release: WRNexusJS 0.8.0

packages/auth/components/ImpersonationBanner.wrn

@@ -1,22 +1,25 @@
 component ImpersonationBanner {
   props {
-    visible = true
-    targetName = "this user"
-    stopAction = "/api/auth/impersonation/stop"
-    stopSchema = "auth-empty"
-    redirect = "/account"
-    message = "You are viewing the application as"
-    stopLabel = "Stop impersonating"
-    color = "warning"
-    size = "md"
-    class = ""
+    visible: boolean = true
+    targetName: string = "this user"
+    stopAction: string = "/api/auth/impersonation/stop"
+    stopSchema: string = "auth-empty"
+    redirect: string = "/account"
+    message: string = "You are viewing the application as"
+    stopLabel: string = "Stop impersonating"
+    color: string = "warning"
+    size: string = "md"
+    class: string = ""
   }
+
   view {
     {#if visible}
-      <aside {...attrs} data-wrnexus-runtime="auth" role="status" class='flex w-full flex-wrap items-center justify-between gap-3 border-b border-[var(--wire-color-warning)] bg-[color-mix(in_srgb,var(--wire-color-warning)_14%,var(--wire-color-surface))] px-4 py-2 text-sm text-[var(--wire-color-text)] {class}'>
-        <span class="flex items-center gap-2"><span class="icon-[lucide--scan-face] size-4 text-[var(--wire-color-warning)]"></span><span>{message} <strong>{targetName}</strong>.</span></span>
-        <form method="post" action='{stopAction}' data-schema='{stopSchema}' data-redirect='{redirect}' novalidate><p data-error="_form" role="alert" class="m-0 hidden text-xs text-[var(--wire-color-danger)]"></p><button type="submit" class="inline-flex h-8 items-center rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-warning)] px-3 text-xs font-semibold text-black disabled:opacity-60">{stopLabel}</button></form>
-      </aside>
+      <Alert {...attrs} title='{message + " " + targetName}' icon="icon-[lucide--scan-face]" color='{color}' size='{size}' variant="soft" class='{class}'>
+        <form method="post" action='{stopAction}' data-schema='{stopSchema}' data-redirect='{redirect}' novalidate class="mt-2">
+          <p data-error="_form" role="alert" class="m-0 hidden text-xs text-[var(--wire-color-danger)]"></p>
+          <Button type="submit" label='{stopLabel}' color='{color}' size="sm" />
+        </form>
+      </Alert>
     {/if}
   }
 }