@kerne/react 0.1.2 → 0.1.3

package/dist/ui/index.cjs

@@ -16,7 +16,7 @@
 
 
 
-var _chunk3PROPZWWcjs = require('../chunk-3PROPZWW.cjs');
+var _chunk7U3QBMA7cjs = require('../chunk-7U3QBMA7.cjs');
 
 // src/ui/AuthFlow.tsx
 var _react = require('react');
@@ -53,6 +53,7 @@ var DARK_TOKENS = `
   --kerne-panel: #1b1f26;
   --kerne-surface: #14171c;
   --kerne-surface-raised: #2a2f38;
+  --kerne-track: #313743;
   --kerne-primary: #f0f1f3;
   --kerne-primary-fg: #16181d;
   --kerne-primary-hover: #d8dade;
@@ -81,6 +82,11 @@ var CSS = `
      variant, the dropdown floating over host content, a pressed segment. */
   --kerne-surface: #ffffff;
   --kerne-surface-raised: #ffffff;
+  /* Unfilled part of a meter, and the ground of a disabled button. Distinct
+     from --kerne-panel, which is tuned to sit on the page: on a card the two
+     are nearly the same colour, so a meter drawn in panel had invisible empty
+     segments and read as having fewer steps than it has. */
+  --kerne-track: #e3e5e9;
   --kerne-primary: #16171a;
   --kerne-primary-fg: #ffffff;
   --kerne-primary-hover: #2c2e33;
@@ -226,6 +232,18 @@ var CSS = `
 }
 .kerne-subtitle { margin: 0; font-size: 14px; color: var(--kerne-fg-muted); line-height: 1.5; }
 
+/* Moving between steps (sign-in -> sign-up -> forgot password) used to be an
+   instant swap: the content and the height both jumped at once, which reads
+   as a page reload rather than one flow. */
+@keyframes kerne-step-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+.kerne-step { animation: kerne-step-in .18s ease-out; }
+@media (prefers-reduced-motion: reduce) {
+  .kerne-step { animation: none; }
+}
+
 /* ---------- Stack ---------- */
 .kerne-stack { display: flex; flex-direction: column; gap: 16px; }
 .kerne-form { display: flex; flex-direction: column; gap: 12px; }
@@ -233,6 +251,9 @@ var CSS = `
 .kerne-label { font-size: 14px; font-weight: 500; color: var(--kerne-fg); }
 .kerne-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
 
+/* Positioning context for the reveal toggle, which sits inside the input box. */
+.kerne-control { position: relative; display: flex; }
+
 .kerne-input {
   font: inherit;
   font-size: 14px;
@@ -245,6 +266,57 @@ var CSS = `
   width: 100%;
   transition: border-color .12s ease, box-shadow .12s ease;
 }
+/* Room for the toggle, so a long password never runs underneath it. */
+.kerne-input[data-kerne-reveal="true"] { padding-right: 42px; }
+
+.kerne-reveal {
+  position: absolute;
+  top: 0; right: 0; bottom: 0;
+  width: 40px;
+  display: flex; align-items: center; justify-content: center;
+  background: none; border: none; padding: 0; cursor: pointer;
+  color: var(--kerne-fg-subtle);
+  border-radius: var(--kerne-radius);
+  transition: color .12s ease;
+}
+.kerne-reveal:hover:not(:disabled) { color: var(--kerne-fg); }
+.kerne-reveal:disabled { cursor: not-allowed; opacity: .5; }
+.kerne-reveal:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: -2px; }
+
+.kerne-field-note { font-size: 12.5px; line-height: 1.4; color: var(--kerne-fg-muted); margin: 0; }
+.kerne-field-error { font-size: 12.5px; line-height: 1.4; color: var(--kerne-danger); margin: 0; }
+/* Caps Lock is a "you are about to get this wrong" signal, not background
+   guidance - in muted grey it sat at the same weight as a hint and got read
+   as one. */
+.kerne-field-note[data-kerne-warn="true"] { color: var(--kerne-warning); }
+
+/* ---------- Password rules ---------- */
+/* Unmet stays at hint weight rather than turning red: nothing is wrong yet,
+   the user is still typing. Only the tick earns a color. */
+.kerne-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
+.kerne-rule {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12.5px; line-height: 1.4; color: var(--kerne-fg-muted);
+}
+.kerne-rule[data-met] { color: var(--kerne-success); }
+
+/* ---------- Password strength ---------- */
+.kerne-strength { display: flex; flex-direction: column; gap: 5px; }
+.kerne-strength-track { display: flex; gap: 4px; }
+.kerne-strength-step {
+  flex: 1; height: 3px; border-radius: 999px;
+  background: var(--kerne-track);
+  transition: background-color .18s ease;
+}
+.kerne-strength-label { font-size: 12px; color: var(--kerne-fg-muted); }
+.kerne-strength[data-score="0"] .kerne-strength-step[data-on],
+.kerne-strength[data-score="1"] .kerne-strength-step[data-on] { background: var(--kerne-danger); }
+.kerne-strength[data-score="2"] .kerne-strength-step[data-on] { background: var(--kerne-warning); }
+.kerne-strength[data-score="3"] .kerne-strength-step[data-on],
+.kerne-strength[data-score="4"] .kerne-strength-step[data-on] { background: var(--kerne-success); }
+@media (prefers-reduced-motion: reduce) {
+  .kerne-strength-step { transition: none; }
+}
 .kerne-input::placeholder { color: var(--kerne-fg-subtle); }
 .kerne-input:hover:not(:disabled):not(:focus) { border-color: var(--kerne-fg-subtle); }
 .kerne-input:focus {
@@ -279,6 +351,20 @@ var CSS = `
 }
 .kerne-button:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
 .kerne-button:disabled { opacity: .5; cursor: not-allowed; }
+/* A disabled primary drops the brand entirely rather than wearing it at half
+   opacity: on a dark theme the light primary faded into an opaque grey slab
+   that read as an enabled button, and a brand colour has no business marking
+   an action you cannot take. Loading is excluded - it is still the real
+   button, just busy. */
+.kerne-button-primary:disabled:not([data-kerne-loading="true"]) {
+  opacity: 1;
+  background: var(--kerne-track);
+  color: var(--kerne-fg-subtle);
+}
+/* A button mid-request is busy, not unavailable - dimming it to the disabled
+   opacity reads as "this stopped working". */
+.kerne-button[data-kerne-loading="true"] { opacity: 1; cursor: progress; }
+.kerne-button .kerne-spinner { width: 15px; height: 15px; border-width: 2px; }
 .kerne-button-primary { background: var(--kerne-primary); color: var(--kerne-primary-fg); }
 .kerne-button-primary:hover:not(:disabled) { background: var(--kerne-primary-hover); }
 .kerne-button-outline {
@@ -417,7 +503,7 @@ var CSS = `
   /* Digits line up between rows instead of jittering as counts change. */
   font-variant-numeric: tabular-nums;
 }
-.kerne-meter-track { height: 6px; border-radius: 999px; background: var(--kerne-panel); overflow: hidden; }
+.kerne-meter-track { height: 6px; border-radius: 999px; background: var(--kerne-track); overflow: hidden; }
 .kerne-meter-fill { height: 100%; border-radius: 999px; background: var(--kerne-fg); transition: width .3s ease; }
 .kerne-meter[data-level="warning"] .kerne-meter-fill { background: var(--kerne-warning); }
 .kerne-meter[data-level="critical"] .kerne-meter-fill { background: var(--kerne-danger); }
@@ -577,6 +663,43 @@ function resolveTheme(appearance) {
   return _nullishCoalesce(_optionalChain([appearance, 'optionalAccess', _ => _.theme]), () => ( "light"));
 }
 
+// src/ui/password.ts
+var MIN_PASSWORD_LENGTH = 8;
+var BASELINE_POLICY = {
+  min_length: MIN_PASSWORD_LENGTH,
+  require_uppercase: false,
+  require_number: false,
+  require_symbol: false
+};
+function resolvePolicy(config) {
+  return _nullishCoalesce(_optionalChain([config, 'optionalAccess', _2 => _2.password_policy]), () => ( BASELINE_POLICY));
+}
+function passwordRules(password, policy) {
+  const rules = [{ key: "min_length", met: password.length >= policy.min_length }];
+  if (policy.require_uppercase) {
+    rules.push({ key: "require_uppercase", met: /[A-Z]/.test(password) });
+  }
+  if (policy.require_number) {
+    rules.push({ key: "require_number", met: /\d/.test(password) });
+  }
+  if (policy.require_symbol) {
+    rules.push({ key: "require_symbol", met: /[^A-Za-z0-9]/.test(password) });
+  }
+  return rules;
+}
+function meetsPolicy(password, policy) {
+  return passwordRules(password, policy).every((rule) => rule.met);
+}
+function passwordStrength(password) {
+  if (password.length < MIN_PASSWORD_LENGTH) return 0;
+  const variety = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter((re) => re.test(password)).length;
+  let score = 1;
+  if (password.length >= 12) score++;
+  if (password.length >= 16) score++;
+  if (variety >= 3) score++;
+  return Math.min(score, 4);
+}
+
 // src/ui/primitives.tsx
 var _jsxruntime = require('react/jsx-runtime');
 var InsideShell = _react.createContext.call(void 0, false);
@@ -602,7 +725,7 @@ function Shell({
         {
           className: "kerne-shell",
           "data-kerne-size": size === "wide" ? "wide" : void 0,
-          "data-kerne-surface": _optionalChain([appearance, 'optionalAccess', _2 => _2.surface]) === "card" ? "card" : void 0,
+          "data-kerne-surface": _optionalChain([appearance, 'optionalAccess', _3 => _3.surface]) === "card" ? "card" : void 0,
           children
         }
       )
@@ -635,6 +758,10 @@ function Masthead({
     ] })
   ] });
 }
+function prefersAutoFocus() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(pointer: fine)").matches;
+}
 function Field({
   label,
   type,
@@ -645,55 +772,185 @@ function Field({
   disabled,
   required,
   invalid,
+  error,
   action,
   code,
-  autoFocus
+  autoFocus,
+  children
 }) {
   const id = _react.useId.call(void 0, );
+  const errorId = `${id}-error`;
+  const noteId = `${id}-note`;
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const isPassword = type === "password";
+  const [revealed, setRevealed] = _react.useState.call(void 0, false);
+  const [capsLock, setCapsLock] = _react.useState.call(void 0, false);
+  const trackCapsLock = (e) => {
+    if (!isPassword) return;
+    setCapsLock(_nullishCoalesce(_optionalChain([e, 'access', _4 => _4.getModifierState, 'optionalCall', _5 => _5("CapsLock")]), () => ( false)));
+  };
+  const describedBy = [error ? errorId : null, children ? noteId : null].filter(Boolean).join(" ");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-field", children: [
     action ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-label-row", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: "kerne-label", htmlFor: id, children: label }),
       action
     ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: "kerne-label", htmlFor: id, children: label }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "input",
-      {
-        id,
-        className: "kerne-input",
-        type,
-        value,
-        onChange: (e) => onChange(e.target.value),
-        autoComplete,
-        placeholder,
-        disabled,
-        required,
-        "aria-invalid": invalid || void 0,
-        "data-kerne-code": code ? "true" : void 0,
-        autoFocus
-      }
-    )
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-control", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          id,
+          className: "kerne-input",
+          type: isPassword && revealed ? "text" : type,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          onKeyUp: trackCapsLock,
+          onBlur: () => setCapsLock(false),
+          autoComplete,
+          placeholder,
+          disabled,
+          required,
+          "aria-invalid": invalid || !!error || void 0,
+          "aria-describedby": describedBy || void 0,
+          "data-kerne-code": code ? "true" : void 0,
+          "data-kerne-reveal": isPassword ? "true" : void 0,
+          autoFocus: autoFocus && prefersAutoFocus()
+        }
+      ),
+      isPassword ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: "kerne-reveal",
+          onClick: () => setRevealed((v) => !v),
+          disabled,
+          "aria-label": revealed ? l10n.common.hidePassword : l10n.common.showPassword,
+          "aria-pressed": revealed,
+          tabIndex: -1,
+          children: revealed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EyeOffIcon, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EyeIcon, {})
+        }
+      ) : null
+    ] }),
+    children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: noteId, children }) : null,
+    capsLock ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-field-note", "data-kerne-warn": "true", role: "status", children: l10n.common.capsLockOn }) : null,
+    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-field-error", id: errorId, role: "alert", children: error }) : null
   ] });
 }
+function EyeIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z", strokeLinejoin: "round" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  );
+}
+function EyeOffIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M10.6 6.2A9.9 9.9 0 0 1 12 6c6.4 0 10 7 10 7a15.7 15.7 0 0 1-3 3.7M6.2 7.4A15.6 15.6 0 0 0 2 13s3.6 7 10 7a9.7 9.7 0 0 0 4.3-1",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m3 3 18 18", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
 function Button({
   children,
   variant = "primary",
   disabled,
+  loading,
   type = "submit",
   onClick,
   ariaLabel
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "button",
     {
       type,
       className: `kerne-button kerne-button-${variant}`,
-      disabled,
+      disabled: disabled || loading,
       onClick,
       "aria-label": ariaLabel,
-      children
+      "aria-busy": loading || void 0,
+      "data-kerne-loading": loading ? "true" : void 0,
+      children: [
+        loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-spinner", "aria-hidden": "true" }) : null,
+        children
+      ]
     }
   );
 }
+function PasswordStrength({
+  password,
+  policy
+}) {
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const resolved = _nullishCoalesce(policy, () => ( resolvePolicy(null)));
+  if (!meetsPolicy(password, resolved)) {
+    const labels2 = {
+      min_length: _chunk7U3QBMA7cjs.fill.call(void 0, l10n.common.passwordHint, { count: resolved.min_length }),
+      require_uppercase: l10n.common.passwordRequireUppercase,
+      require_number: l10n.common.passwordRequireNumber,
+      require_symbol: l10n.common.passwordRequireSymbol
+    };
+    const rules = passwordRules(password, resolved);
+    if (rules.length === 1) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-field-note", children: labels2[rules[0].key] });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "kerne-rules", children: rules.map((rule) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "kerne-rule", "data-met": rule.met ? "true" : void 0, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": "true", children: rule.met ? "\u2713" : "\xB7" }),
+      labels2[rule.key]
+    ] }, rule.key)) });
+  }
+  const score = passwordStrength(password);
+  const labels = [
+    l10n.common.strengthWeak,
+    l10n.common.strengthWeak,
+    l10n.common.strengthFair,
+    l10n.common.strengthGood,
+    l10n.common.strengthStrong
+  ];
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-strength", "data-score": score, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-strength-track", "aria-hidden": "true", children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "span",
+      {
+        className: "kerne-strength-step",
+        "data-on": score >= step ? "true" : void 0
+      },
+      step
+    )) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "kerne-strength-label", children: [
+      l10n.common.strengthLabel,
+      ": ",
+      labels[score]
+    ] })
+  ] });
+}
 function MethodSwitch({
   onClick,
   children
@@ -746,7 +1003,7 @@ function Panel({
     "div",
     {
       className: `kerne-panel${danger ? " kerne-panel-danger" : ""}${variant === "success" ? " kerne-panel-success" : ""}`,
-      ...danger ? { role: "alert" } : {},
+      ...danger ? { role: "alert" } : { role: "status", "aria-live": "polite" },
       children: [
         icon,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children })
@@ -852,10 +1109,10 @@ function OAuthButtons({
   disabled,
   onSelect
 }) {
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   if (providers.length === 0) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-oauth-group", children: providers.map((provider) => {
-    const label = _chunk3PROPZWWcjs.fill.call(void 0, l10n.common.continueWith, {
+    const label = _chunk7U3QBMA7cjs.fill.call(void 0, l10n.common.continueWith, {
       provider: _nullishCoalesce(OAUTH_LABELS[provider], () => ( provider))
     });
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -864,7 +1121,7 @@ function OAuthButtons({
         type: "button",
         className: "kerne-button kerne-button-outline",
         disabled,
-        onClick: () => _optionalChain([onSelect, 'optionalCall', _3 => _3(provider)]),
+        onClick: () => _optionalChain([onSelect, 'optionalCall', _6 => _6(provider)]),
         "aria-label": label,
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, OAuthIcon, { provider }),
@@ -876,12 +1133,12 @@ function OAuthButtons({
   }) });
 }
 function KerneBranding({ show }) {
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   if (!show) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "kerne-branding", href: "https://kerne.io", target: "_blank", rel: "noopener noreferrer", children: l10n.common.securedByKerne });
 }
 function FormSkeleton() {
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-form", "aria-busy": "true", "aria-label": l10n.common.loading, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton" })
@@ -906,11 +1163,11 @@ function LoginForm({
   logo,
   className
 }) {
-  const client = _chunk3PROPZWWcjs.useClient.call(void 0, );
-  const { login, startPasswordless } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { config, isLoading: configLoading, error: configError } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
+  const { login, startPasswordless } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config, isLoading: configLoading, error: configError } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -918,9 +1175,9 @@ function LoginForm({
   const [linkSentTo, setLinkSentTo] = _react.useState.call(void 0, null);
   const [passwordMode, setPasswordMode] = _react.useState.call(void 0, false);
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children });
-  const hasOAuth = (_nullishCoalesce(_optionalChain([config, 'optionalAccess', _4 => _4.oauth_providers, 'access', _5 => _5.length]), () => ( 0))) > 0;
-  const hasCredentials = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _6 => _6.enable_credentials]), () => ( false));
-  const hasMagicLink = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _7 => _7.enable_magic_link]), () => ( false));
+  const hasOAuth = (_nullishCoalesce(_optionalChain([config, 'optionalAccess', _7 => _7.oauth_providers, 'access', _8 => _8.length]), () => ( 0))) > 0;
+  const hasCredentials = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _9 => _9.enable_credentials]), () => ( false));
+  const hasMagicLink = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _10 => _10.enable_magic_link]), () => ( false));
   const hasEmailMethod = hasCredentials || hasMagicLink;
   const usePassword = passwordMode || !hasMagicLink && hasCredentials;
   const handleSubmit = async (e) => {
@@ -933,7 +1190,7 @@ function LoginForm({
         if (redirectUrl) {
           await client.redirectWithSession(redirectUrl);
         } else {
-          _optionalChain([onSuccess, 'optionalCall', _8 => _8()]);
+          _optionalChain([onSuccess, 'optionalCall', _11 => _11()]);
         }
       } else {
         await startPasswordless(email, magicLinkCallbackUrl);
@@ -944,7 +1201,7 @@ function LoginForm({
       setSubmitting(false);
     }
   };
-  const appName = _optionalChain([config, 'optionalAccess', _9 => _9.app_name]);
+  const appName = _optionalChain([config, 'optionalAccess', _12 => _12.app_name]);
   const heading = _nullishCoalesce(title, () => ( l10n.signIn.title));
   if (configLoading) {
     return shell(
@@ -974,7 +1231,7 @@ function LoginForm({
   const signUpLine = canSignUp && (signUpUrl || onSignUpClick) ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     l10n.signIn.signUpPrompt,
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signUpUrl, onClick: onSignUpClick, children: appName ? _chunk3PROPZWWcjs.fill.call(void 0, l10n.signIn.signUpForApp, { app: appName }) : l10n.signIn.signUpLink }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signUpUrl, onClick: onSignUpClick, children: appName ? _chunk7U3QBMA7cjs.fill.call(void 0, l10n.signIn.signUpForApp, { app: appName }) : l10n.signIn.signUpLink }),
     "."
   ] }) : void 0;
   const submitLabel = submitting ? usePassword ? l10n.signIn.submitting : l10n.signIn.magicSubmitting : usePassword ? l10n.signIn.submit : l10n.signIn.magicSubmit;
@@ -983,7 +1240,7 @@ function LoginForm({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading, subtitle: _nullishCoalesce(subtitle, () => ( signUpLine)) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
         error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk3PROPZWWcjs.fillNode.call(void 0, l10n.signIn.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk7U3QBMA7cjs.fillNode.call(void 0, l10n.signIn.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Field,
             {
@@ -1012,7 +1269,7 @@ function LoginForm({
               action: forgotPasswordUrl || onForgotPasswordClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: forgotPasswordUrl, onClick: onForgotPasswordClick, children: l10n.signIn.forgotPassword }) : void 0
             }
           ) : null,
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: submitting || !email || usePassword && !password, children: submitLabel }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: submitting, disabled: !email || usePassword && !password, children: submitLabel }),
           hasCredentials && hasMagicLink ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             MethodSwitch,
             {
@@ -1059,12 +1316,13 @@ function RegisterForm({
   logo,
   className
 }) {
-  const client = _chunk3PROPZWWcjs.useClient.call(void 0, );
-  const { register, startPasswordless } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { config, isLoading: configLoading, error: configError } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
+  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
+  const { register, startPasswordless } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config, isLoading: configLoading, error: configError } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const policy = resolvePolicy(config);
   const invitationToken = useUrlToken("token", invitationTokenProp) || void 0;
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [name, setName] = _react.useState.call(void 0, "");
@@ -1074,8 +1332,8 @@ function RegisterForm({
   const [linkSentTo, setLinkSentTo] = _react.useState.call(void 0, null);
   const [passwordMode, setPasswordMode] = _react.useState.call(void 0, false);
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children });
-  const appName = _optionalChain([config, 'optionalAccess', _10 => _10.app_name]);
-  const heading = _nullishCoalesce(title, () => ( (appName ? _chunk3PROPZWWcjs.fill.call(void 0, l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title)));
+  const appName = _optionalChain([config, 'optionalAccess', _13 => _13.app_name]);
+  const heading = _nullishCoalesce(title, () => ( (appName ? _chunk7U3QBMA7cjs.fill.call(void 0, l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title)));
   const signInLine = signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     l10n.signUp.signInPrompt,
     " ",
@@ -1102,7 +1360,7 @@ function RegisterForm({
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: l10n.signUp.closedTitle, subtitle: signInLine }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk3PROPZWWcjs.fill.call(void 0, l10n.signUp.closedBody, { app: _nullishCoalesce(appName, () => ( l10n.common.thisApp)) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk7U3QBMA7cjs.fill.call(void 0, l10n.signUp.closedBody, { app: _nullishCoalesce(appName, () => ( l10n.common.thisApp)) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: config.show_kerne_branding })
       ] })
     );
@@ -1129,7 +1387,7 @@ function RegisterForm({
         if (redirectUrl) {
           await client.redirectWithSession(redirectUrl);
         } else {
-          _optionalChain([onSuccess, 'optionalCall', _11 => _11()]);
+          _optionalChain([onSuccess, 'optionalCall', _14 => _14()]);
         }
       } else {
         await startPasswordless(email, magicLinkCallbackUrl, {
@@ -1164,7 +1422,7 @@ function RegisterForm({
       ),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
         error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk3PROPZWWcjs.fillNode.call(void 0, l10n.signUp.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk7U3QBMA7cjs.fillNode.call(void 0, l10n.signUp.linkSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: linkSentTo }) }) }) : hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
           needsCode ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Field,
             {
@@ -1216,13 +1474,15 @@ function RegisterForm({
               autoComplete: "new-password",
               placeholder: l10n.common.passwordPlaceholder,
               disabled: submitting,
-              required: true
+              required: true,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PasswordStrength, { password, policy })
             }
           ) : null,
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             Button,
             {
-              disabled: submitting || !email || needsCode && !invitationCode || usePassword && !password,
+              loading: submitting,
+              disabled: !email || needsCode && !invitationCode || usePassword && !meetsPolicy(password, policy),
               children: submitLabel
             }
           ),
@@ -1267,10 +1527,10 @@ function ForgotPasswordForm({
   logo,
   className
 }) {
-  const { requestPasswordReset } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const { requestPasswordReset } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
   const [error, setError] = _react.useState.call(void 0, null);
@@ -1282,7 +1542,7 @@ function ForgotPasswordForm({
     try {
       await requestPasswordReset(email, callbackUrl);
       setSentTo(email);
-      _optionalChain([onSent, 'optionalCall', _12 => _12(email)]);
+      _optionalChain([onSent, 'optionalCall', _15 => _15(email)]);
     } catch (err) {
       setError(showError(err));
     } finally {
@@ -1306,7 +1566,7 @@ function ForgotPasswordForm({
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
       error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-      sentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk3PROPZWWcjs.fillNode.call(void 0, l10n.resetPassword.requestSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: sentTo }) }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+      sentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: _chunk7U3QBMA7cjs.fillNode.call(void 0, l10n.resetPassword.requestSent, { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: sentTo }) }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           Field,
           {
@@ -1321,11 +1581,11 @@ function ForgotPasswordForm({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: submitting || !email, children: submitting ? l10n.resetPassword.requestSubmitting : l10n.resetPassword.requestSubmit }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: submitting, disabled: !email, children: submitting ? l10n.resetPassword.requestSubmitting : l10n.resetPassword.requestSubmit }),
         backLine ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-footer", children: backLine }) : null
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _13 => _13.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _16 => _16.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -1343,11 +1603,12 @@ function ResetPasswordForm({
   logo,
   className
 }) {
-  const { confirmPasswordReset } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
+  const { confirmPasswordReset } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const policy = resolvePolicy(config);
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [password, setPassword] = _react.useState.call(void 0, "");
   const [confirm, setConfirm] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -1373,7 +1634,7 @@ function ResetPasswordForm({
     try {
       await confirmPasswordReset(token, password);
       setDone(true);
-      _optionalChain([onSuccess, 'optionalCall', _14 => _14()]);
+      _optionalChain([onSuccess, 'optionalCall', _17 => _17()]);
     } catch (err) {
       setError(showError(err));
     } finally {
@@ -1390,14 +1651,14 @@ function ResetPasswordForm({
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
       logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-masthead", children: logo }) : null,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "danger", title: l10n.resetPassword.incompleteTitle, action: signInAction, children: l10n.resetPassword.incompleteBody }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _15 => _15.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _18 => _18.show_kerne_branding]), () => ( false)) })
     ] });
   }
   if (done) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
       logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-masthead", children: logo }) : null,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "success", title: l10n.resetPassword.doneTitle, action: signInAction, children: l10n.resetPassword.doneBody }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _16 => _16.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _19 => _19.show_kerne_branding]), () => ( false)) })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
@@ -1416,7 +1677,8 @@ function ResetPasswordForm({
             placeholder: l10n.common.passwordPlaceholder,
             disabled: submitting,
             required: true,
-            autoFocus: true
+            autoFocus: true,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PasswordStrength, { password, policy })
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1430,15 +1692,21 @@ function ResetPasswordForm({
             placeholder: l10n.common.passwordPlaceholder,
             disabled: submitting,
             required: true,
-            invalid: mismatch
+            error: mismatch ? l10n.resetPassword.mismatch : void 0
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button,
+          {
+            loading: submitting,
+            disabled: !meetsPolicy(password, policy) || !confirm || mismatch,
+            children: submitting ? l10n.resetPassword.submitting : l10n.resetPassword.submit
           }
         ),
-        mismatch ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-footer", children: l10n.resetPassword.mismatch }) : null,
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: submitting || !password || !confirm || mismatch, children: submitting ? l10n.resetPassword.submitting : l10n.resetPassword.submit }),
         signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-footer", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.common.backToSignIn }) }) : null
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _17 => _17.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _20 => _20.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -1455,12 +1723,12 @@ function MagicLinkCallback({
   logo,
   className
 }) {
-  const client = _chunk3PROPZWWcjs.useClient.call(void 0, );
-  const { loginWithMagicLink } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
+  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
+  const { loginWithMagicLink } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [state, setState] = _react.useState.call(void 0, "pending");
   const [message, setMessage] = _react.useState.call(void 0, null);
   const consumed = _react.useRef.call(void 0, false);
@@ -1476,7 +1744,7 @@ function MagicLinkCallback({
       if (redirectUrl) {
         await client.redirectWithSession(redirectUrl);
       } else {
-        _optionalChain([onSuccess, 'optionalCall', _18 => _18()]);
+        _optionalChain([onSuccess, 'optionalCall', _21 => _21()]);
       }
     }).catch((e) => {
       setState("failed");
@@ -1497,7 +1765,7 @@ function MagicLinkCallback({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
     logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-masthead", children: logo }) : null,
     state === "pending" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "loading", title: l10n.magicLink.pendingTitle, children: l10n.magicLink.pendingBody }) : state === "done" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "success", title: l10n.magicLink.doneTitle, children: l10n.magicLink.doneBody }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "danger", title: l10n.magicLink.failedTitle, action: retry, children: _nullishCoalesce(message, () => ( l10n.magicLink.missingToken)) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _19 => _19.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _22 => _22.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -1514,11 +1782,11 @@ function VerifyEmailForm({
   logo,
   className
 }) {
-  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
+  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [code, setCode] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
   const [error, setError] = _react.useState.call(void 0, null);
@@ -1532,7 +1800,7 @@ function VerifyEmailForm({
       await refreshToken().catch(() => void 0);
     }
     setVerified(true);
-    _optionalChain([onVerified, 'optionalCall', _20 => _20()]);
+    _optionalChain([onVerified, 'optionalCall', _23 => _23()]);
   };
   _react.useEffect.call(void 0, () => {
     if (token === null || token === "" || consumed.current) return;
@@ -1572,7 +1840,7 @@ function VerifyEmailForm({
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
       logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-masthead", children: logo }) : null,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "success", title: l10n.verifyEmail.doneTitle, children: l10n.verifyEmail.doneBody }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _21 => _21.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _24 => _24.show_kerne_branding]), () => ( false)) })
     ] });
   }
   if (linkState === "pending") {
@@ -1594,7 +1862,7 @@ function VerifyEmailForm({
         }
       ),
       resent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "success", children: l10n.verifyEmail.resent }) : null,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _22 => _22.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _25 => _25.show_kerne_branding]), () => ( false)) })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
@@ -1618,11 +1886,11 @@ function VerifyEmailForm({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: submitting || !code, children: submitting ? l10n.verifyEmail.submitting : l10n.verifyEmail.submit }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: submitting, disabled: !code, children: submitting ? l10n.verifyEmail.submitting : l10n.verifyEmail.submit }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MethodSwitch, { onClick: handleResend, children: l10n.verifyEmail.resend })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _23 => _23.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _26 => _26.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -1640,12 +1908,13 @@ function ActivateAccountForm({
   logo,
   className
 }) {
-  const client = _chunk3PROPZWWcjs.useClient.call(void 0, );
-  const { getActivationContext, completeActivation } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
+  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
+  const { getActivationContext, completeActivation } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const policy = resolvePolicy(config);
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [context, setContext] = _react.useState.call(void 0, null);
   const [loadError, setLoadError] = _react.useState.call(void 0, null);
   const [password, setPassword] = _react.useState.call(void 0, "");
@@ -1678,11 +1947,11 @@ function ActivateAccountForm({
     setError(null);
     setSubmitting(true);
     try {
-      await completeActivation(token, _optionalChain([context, 'optionalAccess', _24 => _24.mode]) === "credentials" ? password : void 0);
+      await completeActivation(token, _optionalChain([context, 'optionalAccess', _27 => _27.mode]) === "credentials" ? password : void 0);
       if (redirectUrl) {
         await client.redirectWithSession(redirectUrl);
       } else {
-        _optionalChain([onSuccess, 'optionalCall', _25 => _25()]);
+        _optionalChain([onSuccess, 'optionalCall', _28 => _28()]);
       }
     } catch (err) {
       setError(showError(err));
@@ -1699,7 +1968,7 @@ function ActivateAccountForm({
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
       logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-masthead", children: logo }) : null,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "danger", title: l10n.activate.failedTitle, action: signInAction, children: _nullishCoalesce(loadError, () => ( l10n.activate.missingToken)) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _26 => _26.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _29 => _29.show_kerne_branding]), () => ( false)) })
     ] });
   }
   if (!context) {
@@ -1715,7 +1984,7 @@ function ActivateAccountForm({
       {
         logo,
         title: heading,
-        subtitle: _chunk3PROPZWWcjs.fillNode.call(void 0, 
+        subtitle: _chunk7U3QBMA7cjs.fillNode.call(void 0, 
           credentialsMode ? l10n.activate.credentialsSubtitle : l10n.activate.magicSubtitle,
           { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: context.email }) }
         )
@@ -1736,7 +2005,8 @@ function ActivateAccountForm({
               placeholder: l10n.common.passwordPlaceholder,
               disabled: submitting,
               required: true,
-              autoFocus: true
+              autoFocus: true,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PasswordStrength, { password, policy })
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1750,15 +2020,21 @@ function ActivateAccountForm({
               placeholder: l10n.common.passwordPlaceholder,
               disabled: submitting,
               required: true,
-              invalid: mismatch
+              error: mismatch ? l10n.activate.mismatch : void 0
             }
-          ),
-          mismatch ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-footer", children: l10n.activate.mismatch }) : null
+          )
         ] }) : null,
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: submitting || credentialsMode && (!password || !confirm || mismatch), children: submitting ? l10n.activate.submitting : l10n.activate.submit })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Button,
+          {
+            loading: submitting,
+            disabled: credentialsMode && (!meetsPolicy(password, policy) || !confirm || mismatch),
+            children: submitting ? l10n.activate.submitting : l10n.activate.submit
+          }
+        )
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _27 => _27.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _30 => _30.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -1780,17 +2056,21 @@ function AuthFlow({
   logo,
   className
 }) {
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token");
   const [internalStep, setInternalStep] = _react.useState.call(void 0, null);
   const go = (next) => {
     if (controlledStep === void 0) setInternalStep(next);
-    _optionalChain([onStepChange, 'optionalCall', _28 => _28(next)]);
+    _optionalChain([onStepChange, 'optionalCall', _31 => _31(next)]);
   };
   const tokenStep = token && (initialStep === void 0 || TOKEN_STEPS.includes(initialStep)) ? _nullishCoalesce(initialStep, () => ( "magic-link")) : null;
   const step = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_nullishCoalesce(controlledStep, () => ( internalStep)), () => ( tokenStep)), () => ( initialStep)), () => ( "sign-in"));
-  const canSignUp = allowSignUp && _optionalChain([config, 'optionalAccess', _29 => _29.registration_mode]) !== "CLOSED";
-  const shared = { appearance, logo, className };
+  const canSignUp = allowSignUp && _optionalChain([config, 'optionalAccess', _32 => _32.registration_mode]) !== "CLOSED";
+  const shared = {
+    appearance,
+    logo,
+    className: `kerne-step${className ? ` ${className}` : ""}`
+  };
   switch (step) {
     case "sign-up":
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1863,9 +2143,11 @@ function ChangePasswordForm({
   appearance,
   className
 }) {
-  const { updatePassword } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const { updatePassword } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const policy = resolvePolicy(config);
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.security.submit));
   const [currentPassword, setCurrentPassword] = _react.useState.call(void 0, "");
   const [newPassword, setNewPassword] = _react.useState.call(void 0, "");
@@ -1887,7 +2169,7 @@ function ChangePasswordForm({
       setCurrentPassword("");
       setNewPassword("");
       setConfirm("");
-      _optionalChain([onSuccess, 'optionalCall', _30 => _30()]);
+      _optionalChain([onSuccess, 'optionalCall', _33 => _33()]);
     } catch (err) {
       setError(showError(err));
     } finally {
@@ -1924,7 +2206,8 @@ function ChangePasswordForm({
             placeholder: l10n.common.passwordPlaceholder,
             disabled: submitting,
             required: true,
-            invalid: unchanged
+            error: unchanged ? l10n.security.sameAsCurrent : void 0,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PasswordStrength, { password: newPassword, policy })
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1938,14 +2221,14 @@ function ChangePasswordForm({
             placeholder: l10n.common.passwordPlaceholder,
             disabled: submitting,
             required: true,
-            invalid: mismatch
+            error: mismatch ? l10n.security.mismatch : void 0
           }
         ),
-        unchanged ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-footer", children: l10n.security.sameAsCurrent }) : mismatch ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-footer", children: l10n.security.mismatch }) : null,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           Button,
           {
-            disabled: submitting || !currentPassword || !newPassword || !confirm || mismatch || unchanged,
+            loading: submitting,
+            disabled: !currentPassword || !meetsPolicy(newPassword, policy) || !confirm || mismatch || unchanged,
             children: submitting ? l10n.security.submitting : l10n.security.submit
           }
         )
@@ -1970,10 +2253,10 @@ function WaitlistForm({
   logo,
   className
 }) {
-  const { join } = _chunk3PROPZWWcjs.useWaitlist.call(void 0, );
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const { join } = _chunk7U3QBMA7cjs.useWaitlist.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [email, setEmail] = _react.useState.call(void 0, "");
   const [name, setName] = _react.useState.call(void 0, "");
   const [submitting, setSubmitting] = _react.useState.call(void 0, false);
@@ -1990,7 +2273,7 @@ function WaitlistForm({
         metadata
       });
       setJoined(true);
-      _optionalChain([onJoined, 'optionalCall', _31 => _31(email)]);
+      _optionalChain([onJoined, 'optionalCall', _34 => _34(email)]);
     } catch (err) {
       setError(showError(err));
     } finally {
@@ -2035,11 +2318,11 @@ function WaitlistForm({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: submitting || !email, children: submitting ? l10n.waitlist.submitting : _nullishCoalesce(submitLabel, () => ( l10n.waitlist.submit)) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: submitting, disabled: !email, children: submitting ? l10n.waitlist.submitting : _nullishCoalesce(submitLabel, () => ( l10n.waitlist.submit)) })
       ] })
     ] }),
     legal ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-legal", children: legal }) : null,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _32 => _32.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _35 => _35.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -2054,11 +2337,11 @@ function SignOutButton({
   appearance
 }) {
   ensureStylesInjected();
-  const { logout } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const { logout } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   const handle = () => {
     logout();
-    _optionalChain([onSignedOut, 'optionalCall', _33 => _33()]);
+    _optionalChain([onSignedOut, 'optionalCall', _36 => _36()]);
     if (redirectUrl && typeof window !== "undefined") window.location.href = redirectUrl;
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2089,9 +2372,9 @@ function UserButton({
   className
 }) {
   ensureStylesInjected();
-  const { logout, isAuthenticated } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { user, fullName, initials, email } = _chunk3PROPZWWcjs.useUser.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const { logout, isAuthenticated } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { user, fullName, initials, email } = _chunk7U3QBMA7cjs.useUser.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const wrapRef = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
@@ -2113,7 +2396,7 @@ function UserButton({
   const handleSignOut = () => {
     setOpen(false);
     logout();
-    _optionalChain([onSignedOut, 'optionalCall', _34 => _34()]);
+    _optionalChain([onSignedOut, 'optionalCall', _37 => _37()]);
     if (signOutRedirectUrl && typeof window !== "undefined") {
       window.location.href = signOutRedirectUrl;
     }
@@ -2134,7 +2417,7 @@ function UserButton({
             "aria-expanded": open,
             "aria-label": l10n.account.menuLabel,
             onClick: () => setOpen((v) => !v),
-            children: _optionalChain([user, 'optionalAccess', _35 => _35.avatar]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "kerne-avatar", src: user.avatar, alt: "" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-avatar", children: initials || _optionalChain([email, 'optionalAccess', _36 => _36[0], 'optionalAccess', _37 => _37.toUpperCase, 'call', _38 => _38()]) || "?" })
+            children: _optionalChain([user, 'optionalAccess', _38 => _38.avatar]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "kerne-avatar", src: user.avatar, alt: "" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-avatar", children: initials || _optionalChain([email, 'optionalAccess', _39 => _39[0], 'optionalAccess', _40 => _40.toUpperCase, 'call', _41 => _41()]) || "?" })
           }
         ),
         open ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-menu", role: "menu", children: [
@@ -2151,7 +2434,7 @@ function UserButton({
                 className: "kerne-menu-item",
                 onClick: () => {
                   setOpen(false);
-                  _optionalChain([item, 'access', _39 => _39.onClick, 'optionalCall', _40 => _40()]);
+                  _optionalChain([item, 'access', _42 => _42.onClick, 'optionalCall', _43 => _43()]);
                 },
                 children: item.label
               },
@@ -2182,10 +2465,10 @@ function UserButton({
 
 
 function ProfileSection({ verificationCallbackUrl, onSaved }) {
-  const { updateProfile, sendVerificationEmail, getVerificationStatus } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { user, fullName, initials, email } = _chunk3PROPZWWcjs.useUser.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const { updateProfile, sendVerificationEmail, getVerificationStatus } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { user, fullName, initials, email } = _chunk7U3QBMA7cjs.useUser.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [firstName, setFirstName] = _react.useState.call(void 0, "");
   const [lastName, setLastName] = _react.useState.call(void 0, "");
   const [saving, setSaving] = _react.useState.call(void 0, false);
@@ -2214,7 +2497,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
     try {
       await updateProfile({ first_name: firstName, last_name: lastName });
       setSaved(true);
-      _optionalChain([onSaved, 'optionalCall', _41 => _41()]);
+      _optionalChain([onSaved, 'optionalCall', _44 => _44()]);
     } catch (err) {
       setError(showError(err));
     } finally {
@@ -2236,7 +2519,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Subsection, { title: l10n.profile.profileTitle, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-identity", children: [
-        _optionalChain([user, 'optionalAccess', _42 => _42.avatar]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "kerne-avatar", src: user.avatar, alt: "" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-avatar", "aria-hidden": "true", children: initials || _optionalChain([email, 'optionalAccess', _43 => _43[0], 'optionalAccess', _44 => _44.toUpperCase, 'call', _45 => _45()]) || "?" }),
+        _optionalChain([user, 'optionalAccess', _45 => _45.avatar]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { className: "kerne-avatar", src: user.avatar, alt: "" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-avatar", "aria-hidden": "true", children: initials || _optionalChain([email, 'optionalAccess', _46 => _46[0], 'optionalAccess', _47 => _47.toUpperCase, 'call', _48 => _48()]) || "?" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-identity-text", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-identity-name", children: fullName || l10n.profile.unnamed }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-identity-mail", children: email })
@@ -2269,7 +2552,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
             disabled: saving
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { disabled: saving, children: saving ? l10n.profile.saving : l10n.profile.save })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: saving, children: saving ? l10n.profile.saving : l10n.profile.save })
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -2283,7 +2566,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
               email,
               verified === true ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-badge", "data-tone": "success", children: l10n.profile.verified }) : verified === false ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-badge", "data-tone": "warning", children: l10n.profile.unverified }) : null
             ] }) }),
-            verified === false ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: handleResend, disabled: sending, children: sending ? l10n.common.sending : l10n.profile.verify }) : null
+            verified === false ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: handleResend, loading: sending, children: sending ? l10n.common.sending : l10n.profile.verify }) : null
           ] }),
           sent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "success", children: l10n.profile.verificationSent }) : null
         ]
@@ -2296,20 +2579,20 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
 
 
 function SecuritySection({ showDeleteAccount = true, onDeleted }) {
-  const { requestAccountDeletion } = _chunk3PROPZWWcjs.useAuth.call(void 0, );
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const { requestAccountDeletion } = _chunk7U3QBMA7cjs.useAuth.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [error, setError] = _react.useState.call(void 0, null);
   const [confirmingDelete, setConfirmingDelete] = _react.useState.call(void 0, false);
   const [deleting, setDeleting] = _react.useState.call(void 0, false);
-  const hasPassword = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _46 => _46.enable_credentials]), () => ( true));
+  const hasPassword = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _49 => _49.enable_credentials]), () => ( true));
   const handleDelete = async () => {
     setError(null);
     setDeleting(true);
     try {
       await requestAccountDeletion();
-      _optionalChain([onDeleted, 'optionalCall', _47 => _47()]);
+      _optionalChain([onDeleted, 'optionalCall', _50 => _50()]);
     } catch (err) {
       setError(showError(err));
       setDeleting(false);
@@ -2319,7 +2602,7 @@ function SecuritySection({ showDeleteAccount = true, onDeleted }) {
     error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
     hasPassword ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Subsection, { title: l10n.security.passwordTitle, description: l10n.security.passwordDesc, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChangePasswordForm, { title: null }) }) : null,
     showDeleteAccount ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Subsection, { title: l10n.security.deleteTitle, description: l10n.security.deleteDesc, children: confirmingDelete ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", gap: 10, flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "danger", type: "button", onClick: handleDelete, disabled: deleting, children: deleting ? l10n.security.deleting : l10n.security.deleteConfirm }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "danger", type: "button", onClick: handleDelete, loading: deleting, children: deleting ? l10n.security.deleting : l10n.security.deleteConfirm }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Button,
         {
@@ -2413,13 +2696,13 @@ function UsageMeters({
   appearance,
   className
 }) {
-  const { entitlements, isLoading, error } = _chunk3PROPZWWcjs.useEntitlements.call(void 0, );
-  const { subscription } = _chunk3PROPZWWcjs.useSubscription.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const { entitlements, isLoading, error } = _chunk7U3QBMA7cjs.useEntitlements.call(void 0, );
+  const { subscription } = _chunk7U3QBMA7cjs.useSubscription.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.usage.title));
   const nameFor = (key) => {
-    if (_optionalChain([labels, 'optionalAccess', _48 => _48[key]])) return labels[key];
-    const fromPlan = _optionalChain([subscription, 'optionalAccess', _49 => _49.entitlements, 'access', _50 => _50.find, 'call', _51 => _51((e) => e.feature_key === key), 'optionalAccess', _52 => _52.feature_name]);
+    if (_optionalChain([labels, 'optionalAccess', _51 => _51[key]])) return labels[key];
+    const fromPlan = _optionalChain([subscription, 'optionalAccess', _52 => _52.entitlements, 'access', _53 => _53.find, 'call', _54 => _54((e) => e.feature_key === key), 'optionalAccess', _55 => _55.feature_name]);
     return _nullishCoalesce(fromPlan, () => ( humanizeFeatureKey(key)));
   };
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
@@ -2463,7 +2746,7 @@ function UsageMeters({
       return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-meter", "data-level": level, children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-meter-head", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-name", children: nameFor(e.feature_key) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-value", children: unlimited ? _chunk3PROPZWWcjs.fill.call(void 0, l10n.usage.used, { count: formatNumber(e.used) }) : `${formatNumber(e.used)} / ${formatNumber(e.limit)}` })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-meter-value", children: unlimited ? _chunk7U3QBMA7cjs.fill.call(void 0, l10n.usage.used, { count: formatNumber(e.used) }) : `${formatNumber(e.used)} / ${formatNumber(e.limit)}` })
         ] }),
         !unlimited ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
@@ -2477,7 +2760,7 @@ function UsageMeters({
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-meter-fill", style: { width: `${ratio * 100}%` } })
           }
         ) : null,
-        over && overageAllowed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: _chunk3PROPZWWcjs.fill.call(void 0, l10n.usage.overage, {
+        over && overageAllowed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: _chunk7U3QBMA7cjs.fill.call(void 0, l10n.usage.overage, {
           count: formatNumber(e.used - e.limit)
         }) }) : over ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: l10n.usage.limitReached }) : null
       ] }, e.feature_key);
@@ -2506,10 +2789,10 @@ function SubscriptionCard({
   appearance,
   className
 }) {
-  const { subscription, isLoading, error } = _chunk3PROPZWWcjs.useSubscription.call(void 0, productSlug);
-  const { openPortal } = _chunk3PROPZWWcjs.usePortal.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const { subscription, isLoading, error } = _chunk7U3QBMA7cjs.useSubscription.call(void 0, productSlug);
+  const { openPortal } = _chunk7U3QBMA7cjs.usePortal.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.billing.plan));
   const statusLabels = {
     ACTIVE: l10n.billing.statusActive,
@@ -2596,7 +2879,7 @@ function SubscriptionCard({
         ] }) : null
       ] }),
       canceled_at ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: l10n.billing.cancelNotice }) : null,
-      !hidePortalButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: handlePortal, disabled: opening, children: opening ? l10n.billing.opening : l10n.billing.managePortal }) : null
+      !hidePortalButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: handlePortal, loading: opening, children: opening ? l10n.billing.opening : l10n.billing.managePortal }) : null
     ] })
   );
 }
@@ -2623,16 +2906,16 @@ function BillingSection({
   usageFeatureKeys,
   usageLabels
 }) {
-  const { subscription } = _chunk3PROPZWWcjs.useSubscription.call(void 0, productSlug);
-  const { plans, isLoading: plansLoading } = _chunk3PROPZWWcjs.usePlans.call(void 0, pricingProductIdOrSlug);
-  const { openCheckout } = _chunk3PROPZWWcjs.useCheckout.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
-  const showError = _chunk3PROPZWWcjs.useErrorResolver.call(void 0, );
+  const { subscription } = _chunk7U3QBMA7cjs.useSubscription.call(void 0, productSlug);
+  const { plans, isLoading: plansLoading } = _chunk7U3QBMA7cjs.usePlans.call(void 0, pricingProductIdOrSlug);
+  const { openCheckout } = _chunk7U3QBMA7cjs.useCheckout.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
+  const showError = _chunk7U3QBMA7cjs.useErrorResolver.call(void 0, );
   const [busy, setBusy] = _react.useState.call(void 0, null);
   const [error, setError] = _react.useState.call(void 0, null);
   const intervals = _react.useMemo.call(void 0, () => intervalsOf(plans), [plans]);
   const [interval, setInterval] = _react.useState.call(void 0, null);
-  const activeInterval = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(interval, () => ( _optionalChain([subscription, 'optionalAccess', _53 => _53.plan_price, 'access', _54 => _54.interval]))), () => ( intervals[0])), () => ( null));
+  const activeInterval = _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(interval, () => ( _optionalChain([subscription, 'optionalAccess', _56 => _56.plan_price, 'access', _57 => _57.interval]))), () => ( intervals[0])), () => ( null));
   const handleSwitch = async (planPriceId) => {
     setError(null);
     setBusy(planPriceId);
@@ -2686,7 +2969,7 @@ function BillingSection({
       ) : null,
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-plan-list", children: plans.map((plan) => {
         const price = _nullishCoalesce(plan.prices.find((p) => p.interval === activeInterval), () => ( plan.prices[0]));
-        const isCurrent = _optionalChain([subscription, 'optionalAccess', _55 => _55.plan, 'access', _56 => _56.slug]) === plan.slug;
+        const isCurrent = _optionalChain([subscription, 'optionalAccess', _58 => _58.plan, 'access', _59 => _59.slug]) === plan.slug;
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "div",
           {
@@ -2706,6 +2989,7 @@ function BillingSection({
                   variant: "outline",
                   type: "button",
                   onClick: () => handleSwitch(price.id),
+                  loading: busy === price.id,
                   disabled: busy !== null,
                   children: busy === price.id ? l10n.billing.opening : l10n.billing.switchTo
                 }
@@ -2743,7 +3027,7 @@ function UserProfile({
   appearance,
   className
 }) {
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   const builtins = {
     profile: {
       label: l10n.profile.tabProfile,
@@ -2770,15 +3054,15 @@ function UserProfile({
       description: t.description
     }))
   ];
-  const [internalTab, setInternalTab] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(defaultTab, () => ( _optionalChain([allTabs, 'access', _57 => _57[0], 'optionalAccess', _58 => _58.id]))), () => ( "profile")));
+  const [internalTab, setInternalTab] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(defaultTab, () => ( _optionalChain([allTabs, 'access', _60 => _60[0], 'optionalAccess', _61 => _61.id]))), () => ( "profile")));
   const current = _nullishCoalesce(controlledTab, () => ( internalTab));
   const select = (id) => {
     if (controlledTab === void 0) setInternalTab(id);
-    _optionalChain([onTabChange, 'optionalCall', _59 => _59(id)]);
+    _optionalChain([onTabChange, 'optionalCall', _62 => _62(id)]);
   };
   const active = _nullishCoalesce(allTabs.find((t) => t.id === current), () => ( allTabs[0]));
   const renderPane = () => {
-    switch (_optionalChain([active, 'optionalAccess', _60 => _60.id])) {
+    switch (_optionalChain([active, 'optionalAccess', _63 => _63.id])) {
       case "profile":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProfileSection, { verificationCallbackUrl, onSaved });
       case "security":
@@ -2799,7 +3083,7 @@ function UserProfile({
           }
         );
       default:
-        return _nullishCoalesce(_optionalChain([extraTabs, 'access', _61 => _61.find, 'call', _62 => _62((t) => t.id === _optionalChain([active, 'optionalAccess', _63 => _63.id])), 'optionalAccess', _64 => _64.content]), () => ( null));
+        return _nullishCoalesce(_optionalChain([extraTabs, 'access', _64 => _64.find, 'call', _65 => _65((t) => t.id === _optionalChain([active, 'optionalAccess', _66 => _66.id])), 'optionalAccess', _67 => _67.content]), () => ( null));
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, size: "wide", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-profile", children: [
@@ -2808,7 +3092,7 @@ function UserProfile({
       {
         type: "button",
         className: "kerne-nav-item",
-        "aria-current": tab.id === _optionalChain([active, 'optionalAccess', _65 => _65.id]) ? "page" : void 0,
+        "aria-current": tab.id === _optionalChain([active, 'optionalAccess', _68 => _68.id]) ? "page" : void 0,
         onClick: () => select(tab.id),
         children: tab.label
       },
@@ -2841,9 +3125,9 @@ function CheckoutResult({
   logo,
   className
 }) {
-  const client = _chunk3PROPZWWcjs.useClient.call(void 0, );
-  const { config } = _chunk3PROPZWWcjs.useAuthConfig.call(void 0, );
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const client = _chunk7U3QBMA7cjs.useClient.call(void 0, );
+  const { config } = _chunk7U3QBMA7cjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   const [state, setState] = _react.useState.call(void 0, "checking");
   const confirmed = _react.useRef.call(void 0, false);
   _react.useEffect.call(void 0, () => {
@@ -2857,7 +3141,7 @@ function CheckoutResult({
         if (sub && !stopped) {
           confirmed.current = true;
           setState("confirmed");
-          _optionalChain([onConfirmed, 'optionalCall', _66 => _66(sub)]);
+          _optionalChain([onConfirmed, 'optionalCall', _69 => _69(sub)]);
           return;
         }
       } catch (e3) {
@@ -2881,7 +3165,7 @@ function CheckoutResult({
   const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
     logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-masthead", children: logo }) : null,
     children,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _67 => _67.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _70 => _70.show_kerne_branding]), () => ( false)) })
   ] });
   if (outcome === "cancel") {
     return shell(
@@ -2927,20 +3211,20 @@ function UpgradePrompt({
   appearance,
   className
 }) {
-  const { details, allowed, isLoading } = _chunk3PROPZWWcjs.useAccess.call(void 0, featureKey, requested);
-  const l10n = _chunk3PROPZWWcjs.useLocalization.call(void 0, );
+  const { details, allowed, isLoading } = _chunk7U3QBMA7cjs.useAccess.call(void 0, featureKey, requested);
+  const l10n = _chunk7U3QBMA7cjs.useLocalization.call(void 0, );
   if (isLoading) {
     if (hideWhileLoading) return null;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 80 }, "aria-label": l10n.upgrade.checking }) });
   }
   if (allowed) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
   const name = _nullishCoalesce(featureName, () => ( humanizeFeatureKey(featureKey).toLowerCase()));
-  const quotaExhausted = _optionalChain([details, 'optionalAccess', _68 => _68.feature_type]) === "QUOTA" && typeof details.limit === "number" && typeof details.used === "number";
-  const heading = _nullishCoalesce(title, () => ( _chunk3PROPZWWcjs.fill.call(void 0, quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name })));
-  const body = _nullishCoalesce(description, () => ( (quotaExhausted ? _chunk3PROPZWWcjs.fill.call(void 0, l10n.upgrade.quotaBody, {
+  const quotaExhausted = _optionalChain([details, 'optionalAccess', _71 => _71.feature_type]) === "QUOTA" && typeof details.limit === "number" && typeof details.used === "number";
+  const heading = _nullishCoalesce(title, () => ( _chunk7U3QBMA7cjs.fill.call(void 0, quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name })));
+  const body = _nullishCoalesce(description, () => ( (quotaExhausted ? _chunk7U3QBMA7cjs.fill.call(void 0, l10n.upgrade.quotaBody, {
     used: formatNumber(details.used),
     limit: formatNumber(details.limit)
-  }) : _chunk3PROPZWWcjs.fill.call(void 0, l10n.upgrade.featureBody, { feature: name }))));
+  }) : _chunk7U3QBMA7cjs.fill.call(void 0, l10n.upgrade.featureBody, { feature: name }))));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-status", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-heading", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-section-title", style: { fontSize: 17 }, children: heading }),
@@ -2981,4 +3265,4 @@ function UpgradePrompt({
 
 
 
-exports.ActivateAccountForm = ActivateAccountForm; exports.AuthFlow = AuthFlow; exports.BillingSection = BillingSection; exports.ChangePasswordForm = ChangePasswordForm; exports.CheckoutResult = CheckoutResult; exports.ForgotPasswordForm = ForgotPasswordForm; exports.LoginForm = LoginForm; exports.MagicLinkCallback = MagicLinkCallback; exports.ProfileSection = ProfileSection; exports.RegisterForm = RegisterForm; exports.ResetPasswordForm = ResetPasswordForm; exports.SecuritySection = SecuritySection; exports.SignOutButton = SignOutButton; exports.SubscriptionCard = SubscriptionCard; exports.UpgradePrompt = UpgradePrompt; exports.UsageMeters = UsageMeters; exports.UserButton = UserButton; exports.UserProfile = UserProfile; exports.VerifyEmailForm = VerifyEmailForm; exports.WaitlistForm = WaitlistForm; exports.defaultLocalization = _chunk3PROPZWWcjs.defaultLocalization; exports.useLocalization = _chunk3PROPZWWcjs.useLocalization;
+exports.ActivateAccountForm = ActivateAccountForm; exports.AuthFlow = AuthFlow; exports.BillingSection = BillingSection; exports.ChangePasswordForm = ChangePasswordForm; exports.CheckoutResult = CheckoutResult; exports.ForgotPasswordForm = ForgotPasswordForm; exports.LoginForm = LoginForm; exports.MagicLinkCallback = MagicLinkCallback; exports.ProfileSection = ProfileSection; exports.RegisterForm = RegisterForm; exports.ResetPasswordForm = ResetPasswordForm; exports.SecuritySection = SecuritySection; exports.SignOutButton = SignOutButton; exports.SubscriptionCard = SubscriptionCard; exports.UpgradePrompt = UpgradePrompt; exports.UsageMeters = UsageMeters; exports.UserButton = UserButton; exports.UserProfile = UserProfile; exports.VerifyEmailForm = VerifyEmailForm; exports.WaitlistForm = WaitlistForm; exports.defaultLocalization = _chunk7U3QBMA7cjs.defaultLocalization; exports.useLocalization = _chunk7U3QBMA7cjs.useLocalization;