update deps

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nopwdio/nopwd.rocks",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "license": "MIT",
   "author": "Adrien Pinet",
   "contributors": [
@@ -32,12 +32,12 @@
     "build": "npm run clean && node ./build.js"
   },
   "dependencies": {
-    "@nopwdio/sdk-js": "^0.5.16"
+    "@nopwdio/sdk-js": "^0.6.3"
   },
   "devDependencies": {
-    "esbuild": "^0.23.0",
+    "esbuild": "^0.23.1",
     "minify-html-literals": "^1.3.5",
-    "typescript": "^5.5.3"
+    "typescript": "^5.6.2"
   },
   "type": "module"
 }

src/demo-app.styles.ts

@@ -73,6 +73,11 @@ export default css`
     justify-content: space-between;
     gap: var(--np-core-padding-xl);
   }
+
+  np-status::part(link) {
+    background-color: transparent;
+  }
+
   footer .value {
     font-weight: var(--np-core-font-weight-m);
     color: var(--np-core-color-grey-xl);

src/demo-app.ts

@@ -72,7 +72,7 @@ export class DemoApp extends LitElement {
             </a>
             <span class="api">
               <span class="name">Api status:</span>
-              <np-status class="value"></np-status>
+              <np-status></np-status>
             </span>
           </nav>
         </details>

src/views/view-login.styles.ts

@@ -10,12 +10,6 @@ export default css`
     color: var(--np-core-color-grey-m);
   }
 
-  np-passkey-conditional,
-  np-email-auth {
-    width: 100%;
-  }
-
-  np-email-auth:not([state])::part(button) {
-    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+  np-login {
   }
 `;

src/views/view-login.ts

@@ -4,8 +4,7 @@ import { customElement, property } from "lit/decorators.js";
 import view from "./view.styles.js";
 import login from "./view-login.styles.js";
 
-import "@nopwdio/sdk-js/dist/components/np-passkey-conditional.js";
-import "@nopwdio/sdk-js/dist/components/np-email-auth.js";
+import "@nopwdio/sdk-js/dist/components/np-login.js";
 import { hideNotification, showNotification } from "../components/ui-notification.js";
 import "../components/ui-timestamp.js";
 import {
@@ -37,18 +36,11 @@ export class ViewLogin extends LitElement {
       <span class="avatar">${user}</span>
 
       <!-- the only logic to use magic link or passkey authentication is here -->
-      <np-passkey-conditional
-        @input=${this.onEmailChange}
+      <np-login
         @np:error=${this.onError}
         lifetime="604800"
-        id="input"
-      ></np-passkey-conditional>
-
-      <np-email-auth
-        email=${this.email}
-        @np:error=${this.onError}
-        lifetime="604800"
-      ></np-email-auth>
+        placeholder="Enter your email"
+      ></np-login>
 
       <p class="disclaimer">
         By logging in, you are agreeing to our

src/views/view-user.ts

@@ -6,8 +6,6 @@ import user from "./view-user.styles.js";
 
 import "../components/ui-timestamp.js";
 
-import "@nopwdio/sdk-js/dist/components/np-email-auth.js";
-import "@nopwdio/sdk-js/dist/components/np-passkey-conditional.js";
 import "@nopwdio/sdk-js/dist/components/np-passkey-register.js";
 
 import { RegisterEvent } from "@nopwdio/sdk-js/dist/components/np-passkey-register.js";