@kerne/react 1.2.0 → 1.3.0

package/dist/ui/index.cjs

@@ -17,1262 +17,54 @@
 
 
 
-var _chunkN6VPGJ36cjs = require('../chunk-N6VPGJ36.cjs');
 
-// src/ui/AuthFlow.tsx
-var _react = require('react');
 
-// src/ui/useUrlToken.ts
 
-function useUrlToken(param = "token", override) {
-  const [token, setToken] = _react.useState.call(void 0, _nullishCoalesce(override, () => ( null)));
-  _react.useEffect.call(void 0, () => {
-    if (override) {
-      setToken(override);
-      return;
-    }
-    if (typeof window === "undefined") return;
-    setToken(_nullishCoalesce(new URLSearchParams(window.location.search).get(param), () => ( "")));
-  }, [param, override]);
-  return token;
-}
 
-// src/ui/LoginForm.tsx
 
 
-// src/ui/primitives.tsx
-
-
-// src/ui/styles.ts
-var STYLE_ELEMENT_ID = "kerne-ui-styles";
-var DARK_TOKENS = `
-  --kerne-fg: #f0f1f3;
-  --kerne-fg-muted: #9ba2ad;
-  --kerne-fg-subtle: #838b96;
-  --kerne-border: #2a2e36;
-  --kerne-border-strong: #363b45;
-  --kerne-panel: #1b1f26;
-  --kerne-surface: #14171c;
-  --kerne-surface-raised: #2a2f38;
-  --kerne-track: #313743;
-  --kerne-primary: #f0f1f3;
-  --kerne-primary-fg: #16181d;
-  --kerne-primary-hover: #d8dade;
-  --kerne-accent: #91a7ff;
-  --kerne-danger: #f0837a;
-  --kerne-success: #5cbd8d;
-  --kerne-warning: #d9ab5e;
-  --kerne-shadow: 0 4px 6px -2px rgba(0,0,0,.4), 0 12px 24px -8px rgba(0,0,0,.6);
-`;
-var CSS = `
-.kerne-root {
-  --kerne-fg: #16171a;
-  --kerne-fg-muted: #6b7280;
-  /* Meets 4.5:1 on white - this carries placeholders and the legal footnote,
-     which used to sit around 2.5:1. */
-  --kerne-fg-subtle: #6f7681;
-  --kerne-border: #e3e5e9;
-  --kerne-border-strong: #d6dade;
-  --kerne-field-bg: transparent;
-  --kerne-panel: #f4f5f7;
-  /* The ground the component sits on. Transparent so an embedded instance
-     inherits the host's page; set it (appearance.background) when the component
-     owns the viewport, so text and background can never resolve independently. */
-  --kerne-bg: transparent;
-  /* An opaque surface for the things that must not show through: the card
-     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;
-  --kerne-accent: #3b5bdb;
-  --kerne-danger: #c0392f;
-  --kerne-success: #1f7a4d;
-  --kerne-warning: #9a6b12;
-  --kerne-radius: 8px;
-  --kerne-control-height: 44px;
-  --kerne-shadow: 0 4px 6px -2px rgba(0,0,0,.06), 0 12px 24px -8px rgba(0,0,0,.16);
-  --kerne-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-
-  box-sizing: border-box;
-  font-family: var(--kerne-font);
-  color: var(--kerne-fg);
-  background: var(--kerne-bg);
-  -webkit-font-smoothing: antialiased;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-.kerne-root *, .kerne-root *::before, .kerne-root *::after { box-sizing: inherit; }
-
-.kerne-root[data-kerne-theme="dark"] {${DARK_TOKENS}}
-/* Only an explicit opt-in follows the visitor's OS. Defaulting to it meant a
-   light-only host got a dark form on any machine set to dark, without ever
-   asking for one - and with no way for the host to know it had happened. */
-@media (prefers-color-scheme: dark) {
-  .kerne-root[data-kerne-theme="system"] {${DARK_TOKENS}}
-}
 
-.kerne-shell {
-  width: 100%;
-  max-width: 384px;
-  display: flex;
-  flex-direction: column;
-}
-/* Auth screens are a single column of fields; an account manager is a
-   navigation plus a content pane and suffocates at 384px. */
-.kerne-shell[data-kerne-size="wide"] { max-width: 800px; }
-
-.kerne-shell[data-kerne-surface="card"] {
-  background: var(--kerne-surface);
-  border: 1px solid var(--kerne-border);
-  border-radius: calc(var(--kerne-radius) + 6px);
-  box-shadow: var(--kerne-shadow);
-  padding: 32px 28px;
-  /* The card is the ground from here down, so nested surfaces stop inheriting
-     the page behind it. */
-  --kerne-bg: var(--kerne-surface);
-}
-@media (max-width: 480px) {
-  /* Full-bleed on a phone: a card with 16px of page showing on each side wastes
-     the only axis a login form has. */
-  .kerne-shell[data-kerne-surface="card"] {
-    border: none;
-    box-shadow: none;
-    padding: 8px 0;
-    background: transparent;
-    /* The card no longer paints, so the ground is the page again. */
-    --kerne-bg: transparent;
-  }
-}
 
-/* ---------- Tabbed account manager ---------- */
-.kerne-profile { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 40px; align-items: start; }
-@media (max-width: 640px) { .kerne-profile { grid-template-columns: 1fr; gap: 20px; } }
-
-.kerne-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; }
-@media (max-width: 640px) {
-  .kerne-nav {
-    position: static;
-    flex-direction: row;
-    overflow-x: auto;
-    gap: 4px;
-    border-bottom: 1px solid var(--kerne-border);
-    padding-bottom: 8px;
-  }
-}
-.kerne-nav-item {
-  font: inherit; font-size: 14px; text-align: left;
-  background: none; border: none; cursor: pointer;
-  padding: 8px 12px; border-radius: 6px;
-  color: var(--kerne-fg-muted); white-space: nowrap;
-  transition: background-color .12s ease, color .12s ease;
-}
-.kerne-nav-item:hover { color: var(--kerne-fg); }
-.kerne-nav-item[aria-current="page"] { background: var(--kerne-panel); color: var(--kerne-fg); font-weight: 500; }
-.kerne-nav-item:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
-
-.kerne-pane { display: flex; flex-direction: column; min-width: 0; }
-.kerne-pane-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
-.kerne-pane-desc { font-size: 14px; color: var(--kerne-fg-muted); margin: 0 0 8px; }
-
-.kerne-subsection { padding: 24px 0; display: flex; flex-direction: column; gap: 16px; }
-.kerne-subsection:first-of-type { padding-top: 16px; }
-.kerne-subsection + .kerne-subsection { border-top: 1px solid var(--kerne-border); }
-.kerne-subsection-head { display: flex; flex-direction: column; gap: 3px; }
-.kerne-subsection-title { font-size: 15px; font-weight: 600; margin: 0; }
-.kerne-subsection-desc { font-size: 13px; color: var(--kerne-fg-muted); margin: 0; }
-/* Buttons inside a settings pane are actions, not page-wide calls to action. */
-.kerne-subsection .kerne-button { width: auto; align-self: flex-start; }
-
-/* ---------- Plan options ---------- */
-.kerne-plan-list { display: flex; flex-direction: column; gap: 10px; }
-.kerne-plan-option {
-  display: flex; justify-content: space-between; align-items: center; gap: 16px;
-  padding: 14px 16px; border: 1px solid var(--kerne-border); border-radius: var(--kerne-radius);
-}
-.kerne-plan-option[data-current="true"] { border-color: var(--kerne-fg); }
-.kerne-plan-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.kerne-plan-option-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
-.kerne-plan-option-price { font-size: 13px; color: var(--kerne-fg-muted); font-variant-numeric: tabular-nums; }
-.kerne-plan-option .kerne-button { width: auto; flex-shrink: 0; height: 36px; font-size: 13px; }
-
-/* Segmented control for billing interval. */
-.kerne-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--kerne-panel); border-radius: var(--kerne-radius); align-self: flex-start; }
-.kerne-segment {
-  font: inherit; font-size: 13px; border: none; background: none; cursor: pointer;
-  padding: 5px 12px; border-radius: calc(var(--kerne-radius) - 3px); color: var(--kerne-fg-muted);
-}
-.kerne-segment[aria-pressed="true"] { background: var(--kerne-surface-raised); color: var(--kerne-fg); font-weight: 500; }
-.kerne-segment:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
-
-/* ---------- Masthead ---------- */
-.kerne-masthead {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  text-align: center;
-  margin-bottom: 32px;
-}
-.kerne-logo { display: flex; align-items: center; justify-content: center; }
-.kerne-heading { display: flex; flex-direction: column; gap: 6px; }
-.kerne-title {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 600;
-  letter-spacing: -.02em;
-  line-height: 1.2;
-  text-wrap: balance;
-}
-.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-inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
-.kerne-form { display: flex; flex-direction: column; gap: 12px; }
-.kerne-field { display: flex; flex-direction: column; gap: 6px; }
-.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;
-  height: var(--kerne-control-height);
-  color: var(--kerne-fg);
-  background: var(--kerne-field-bg);
-  border: 1px solid var(--kerne-border-strong);
-  border-radius: var(--kerne-radius);
-  padding: 0 13px;
-  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 {
-  outline: none;
-  border-color: var(--kerne-accent);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kerne-accent) 15%, transparent);
-}
-.kerne-input:disabled { opacity: .6; cursor: not-allowed; }
-.kerne-input[aria-invalid="true"] { border-color: var(--kerne-danger); }
-.kerne-input[data-kerne-code="true"] {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  letter-spacing: .3em;
-  text-transform: uppercase;
-}
 
-/* ---------- Buttons ---------- */
-.kerne-button {
-  font: inherit;
-  font-size: 14px;
-  font-weight: 500;
-  height: var(--kerne-control-height);
-  border-radius: var(--kerne-radius);
-  padding: 0 16px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  width: 100%;
-  transition: background-color .12s ease, border-color .12s ease, opacity .12s ease;
-}
-.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 {
-  background: transparent;
-  color: var(--kerne-fg);
-  border-color: var(--kerne-border-strong);
-}
-.kerne-button-outline:hover:not(:disabled) { background: var(--kerne-panel); }
-
-/* Method switch - a quiet text control, not a second call to action competing
-   with the primary button above it. */
-.kerne-switch {
-  font: inherit;
-  font-size: 14px;
-  width: 100%;
-  text-align: center;
-  background: none;
-  border: none;
-  padding: 4px 0;
-  cursor: pointer;
-  color: var(--kerne-fg-muted);
-  text-underline-offset: 4px;
-  transition: color .12s ease;
-}
-.kerne-switch:hover { color: var(--kerne-fg); text-decoration: underline; }
-.kerne-switch:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; border-radius: 4px; }
-
-.kerne-link {
-  font-size: inherit;
-  color: var(--kerne-accent);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  font-family: inherit;
-  text-decoration: none;
-  text-underline-offset: 3px;
-}
-.kerne-link:hover { text-decoration: underline; }
-.kerne-link:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; border-radius: 2px; }
-
-/* ---------- Divider ---------- */
-.kerne-divider {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: var(--kerne-fg-muted);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: .06em;
-  padding: 2px 0;
-}
-.kerne-divider::before, .kerne-divider::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: var(--kerne-border);
-}
 
-/* ---------- Panels ---------- */
-.kerne-panel {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 12px 14px;
-  border-radius: var(--kerne-radius);
-  background: var(--kerne-panel);
-  color: var(--kerne-fg-muted);
-}
-.kerne-panel-danger { color: var(--kerne-danger); }
-.kerne-panel-success { color: var(--kerne-success); }
-.kerne-panel svg { flex-shrink: 0; margin-top: 1px; }
-.kerne-panel strong { color: var(--kerne-fg); font-weight: 500; }
-
-.kerne-oauth-group { display: flex; flex-direction: column; gap: 10px; }
-
-/* A closing line under a form, e.g. "Remembered it? Back to sign in". */
-.kerne-footer { font-size: 14px; color: var(--kerne-fg-muted); text-align: center; margin: 4px 0 0; }
-
-/* ---------- Footnotes ---------- */
-.kerne-legal {
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--kerne-fg-subtle);
-  text-align: center;
-  margin: 32px 0 0;
-}
-.kerne-branding {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  margin-top: 24px;
-  font-size: 12px;
-  color: var(--kerne-fg-subtle);
-  text-decoration: none;
-}
-.kerne-branding:hover { color: var(--kerne-fg-muted); }
-
-/* Centred outcome screen for the flows that resolve on their own (magic-link
-   landing, email verification by link) - there is no form to show, only what
-   happened. */
-.kerne-status { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 8px 0; }
-.kerne-status-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kerne-panel); }
-.kerne-status-icon[data-tone="danger"] { color: var(--kerne-danger); }
-.kerne-status-icon[data-tone="success"] { color: var(--kerne-success); }
-.kerne-status-icon[data-tone="muted"] { color: var(--kerne-fg-muted); }
-.kerne-status-text { font-size: 14px; color: var(--kerne-fg-muted); line-height: 1.5; margin: 0; max-width: 34ch; }
-
-.kerne-spinner {
-  width: 20px; height: 20px;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: kerne-spin .6s linear infinite;
-}
-@keyframes kerne-spin { to { transform: rotate(360deg); } }
 
-.kerne-button-danger {
-  background: transparent;
-  color: var(--kerne-danger);
-  border-color: color-mix(in srgb, var(--kerne-danger) 40%, transparent);
-}
-.kerne-button-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--kerne-danger) 8%, transparent); }
-
-/* ---------- Usage meters ---------- */
-.kerne-meters { display: flex; flex-direction: column; gap: 18px; }
-.kerne-meter { display: flex; flex-direction: column; gap: 7px; }
-.kerne-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
-.kerne-meter-name { font-size: 14px; font-weight: 500; }
-.kerne-meter-value {
-  font-size: 13px;
-  color: var(--kerne-fg-muted);
-  /* 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-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); }
-.kerne-meter[data-level="warning"] .kerne-meter-value { color: var(--kerne-warning); }
-.kerne-meter[data-level="critical"] .kerne-meter-value { color: var(--kerne-danger); }
-.kerne-meter-note { font-size: 12px; color: var(--kerne-fg-subtle); margin: 0; }
-@media (prefers-reduced-motion: reduce) { .kerne-meter-fill { transition: none; } }
-
-/* ---------- Pricing table ---------- */
-.kerne-pricing-skeleton { width: 100%; }
-
-.kerne-pricing-switch-wrap { display: flex; justify-content: center; }
-.kerne-pricing-switch {
-  position: relative;
-  display: inline-flex;
-  gap: 2px;
-  padding: 4px;
-  background: var(--kerne-panel);
-  border-radius: 999px;
-}
-.kerne-pricing-switch-thumb {
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-  left: 0;
-  border-radius: 999px;
-  background: var(--kerne-surface);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.kerne-pricing-switch-option {
-  position: relative;
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  font: inherit;
-  font-size: 13.5px;
-  font-weight: 500;
-  white-space: nowrap;
-  color: var(--kerne-fg-muted);
-  background: none;
-  border: none;
-  border-radius: 999px;
-  padding: 7px 16px;
-  cursor: pointer;
-  transition: color 0.18s ease;
-}
-.kerne-pricing-switch-option[aria-pressed="true"] { color: var(--kerne-fg); }
-.kerne-pricing-switch-option:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
-.kerne-pricing-switch-save {
-  font-size: 10.5px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: var(--kerne-success);
-  background: color-mix(in srgb, var(--kerne-success) 14%, transparent);
-  padding: 2px 6px;
-  border-radius: 999px;
-}
 
-.kerne-pricing-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
-  gap: 20px;
-  align-items: stretch;
-}
 
-.kerne-pricing-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  height: 100%;
-  padding: 28px 26px;
-  background: var(--kerne-surface);
-  border: 1px solid var(--kerne-border);
-  border-radius: calc(var(--kerne-radius) + 8px);
-}
-.kerne-pricing-card[data-featured="true"] {
-  background: var(--kerne-surface-raised);
-  border-color: var(--kerne-fg);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 48px -28px rgba(0, 0, 0, 0.22);
-}
-.kerne-pricing-card[data-current="true"]:not([data-featured="true"]) { border-color: var(--kerne-border-strong); }
-
-/* A quiet inline pill, not a loud badge escaping the card border - that
-   shouted-uppercase-chip-on-the-edge look is the single most template-y
-   tell a pricing page can have. Reads as confirmation of what the card's
-   own elevation already signals, never as the primary signal itself. */
-.kerne-pricing-badge {
-  align-self: flex-start;
-  font-size: 11.5px;
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: var(--kerne-fg);
-  background: var(--kerne-panel);
-  padding: 3px 9px;
-  border-radius: 999px;
-}
 
-.kerne-pricing-card-head { display: flex; flex-direction: column; gap: 8px; }
-.kerne-pricing-card-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
-.kerne-pricing-card-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--kerne-fg-muted); }
-
-.kerne-pricing-price { display: flex; flex-direction: column; gap: 3px; min-height: 52px; justify-content: center; }
-.kerne-pricing-price-row { display: flex; align-items: baseline; gap: 5px; }
-.kerne-pricing-amount {
-  font-size: 38px;
-  font-weight: 600;
-  letter-spacing: -0.025em;
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-}
-.kerne-pricing-interval { font-size: 14px; color: var(--kerne-fg-muted); }
-.kerne-pricing-billed { margin: 0; font-size: 12px; color: var(--kerne-fg-subtle); }
 
-.kerne-pricing-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
-.kerne-pricing-feature { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--kerne-fg); }
-.kerne-pricing-feature svg { flex-shrink: 0; margin-top: 2px; color: var(--kerne-fg-subtle); }
-.kerne-pricing-feature-more { font-size: 12.5px; color: var(--kerne-fg-subtle); padding-left: 24px; }
 
-.kerne-pricing-cta { margin-top: auto; }
-.kerne-pricing-cta .kerne-button { width: 100%; }
 
-@media (prefers-reduced-motion: reduce) {
-  .kerne-pricing-switch-thumb { transition: none; }
-}
 
-/* ---------- Sections (profile, settings) ---------- */
-.kerne-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
-.kerne-section-title { font-size: 15px; font-weight: 600; margin: 0; }
-
-.kerne-rows { display: flex; flex-direction: column; gap: 10px; }
-.kerne-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
-.kerne-row dt { color: var(--kerne-fg-muted); margin: 0; }
-.kerne-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
-
-.kerne-badge {
-  display: inline-flex;
-  align-items: center;
-  font-size: 12px;
-  font-weight: 500;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: var(--kerne-panel);
-  color: var(--kerne-fg-muted);
-  white-space: nowrap;
-}
-.kerne-badge[data-tone="success"] { color: var(--kerne-success); }
-.kerne-badge[data-tone="warning"] { color: var(--kerne-warning); }
-.kerne-badge[data-tone="danger"] { color: var(--kerne-danger); }
-
-/* ---------- Identity ---------- */
-.kerne-avatar {
-  width: 32px; height: 32px; border-radius: 50%;
-  background: var(--kerne-panel); color: var(--kerne-fg-muted);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 12px; font-weight: 600; letter-spacing: .02em; flex-shrink: 0;
-  object-fit: cover;
-}
-.kerne-identity { display: flex; align-items: center; gap: 12px; }
-.kerne-identity-text { display: flex; flex-direction: column; min-width: 0; }
-.kerne-identity-name { font-size: 14px; font-weight: 500; }
-.kerne-identity-mail { font-size: 13px; color: var(--kerne-fg-muted); overflow: hidden; text-overflow: ellipsis; }
-
-.kerne-menu-wrap { position: relative; display: inline-flex; }
-.kerne-menu-trigger {
-  background: none; border: none; padding: 0; cursor: pointer;
-  border-radius: 50%; display: inline-flex; font: inherit;
-}
-.kerne-menu-trigger:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: 2px; }
-.kerne-menu {
-  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
-  min-width: 240px; padding: 8px;
-  display: flex; flex-direction: column; gap: 2px;
-  /* Needs an opaque ground of its own: it floats over host content. */
-  background: var(--kerne-surface);
-  border: 1px solid var(--kerne-border);
-  border-radius: var(--kerne-radius);
-  box-shadow: var(--kerne-shadow);
-}
-.kerne-menu-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--kerne-border); margin-bottom: 6px; }
-.kerne-menu-item {
-  font: inherit; font-size: 14px; text-align: left;
-  background: none; border: none; cursor: pointer;
-  padding: 8px 10px; border-radius: 6px; color: var(--kerne-fg);
-  display: block; width: 100%; text-decoration: none;
-}
-.kerne-menu-item:hover { background: var(--kerne-panel); }
-.kerne-menu-item:focus-visible { outline: 2px solid var(--kerne-accent); outline-offset: -2px; }
-.kerne-menu-item[data-tone="danger"] { color: var(--kerne-danger); }
-
-/* ---------- Loading ---------- */
-.kerne-skeleton {
-  background: var(--kerne-panel);
-  border-radius: var(--kerne-radius);
-  height: var(--kerne-control-height);
-  animation: kerne-pulse 1.6s ease-in-out infinite;
-}
-@keyframes kerne-pulse { 50% { opacity: .55; } }
-@media (prefers-reduced-motion: reduce) {
-  .kerne-skeleton { animation: none; }
-  .kerne-spinner { animation-duration: 2s; }
-  .kerne-input, .kerne-button, .kerne-switch { transition: none; }
-}
-`;
-function ensureStylesInjected() {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ELEMENT_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ELEMENT_ID;
-  style.textContent = CSS;
-  document.head.appendChild(style);
-}
-function parseColor(input) {
-  const value = input.trim();
-  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value);
-  if (hex) {
-    const digits = hex[1].length === 3 ? hex[1].split("").map((c) => c + c).join("") : hex[1];
-    return [
-      parseInt(digits.slice(0, 2), 16),
-      parseInt(digits.slice(2, 4), 16),
-      parseInt(digits.slice(4, 6), 16)
-    ];
-  }
-  const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(value);
-  if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
-  return null;
-}
-function luminance([r, g, b]) {
-  const channel = (v) => {
-    const s = Math.min(Math.max(v, 0), 255) / 255;
-    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
-  };
-  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
-}
-function toHex([r, g, b]) {
-  const pair = (v) => Math.round(Math.min(Math.max(v, 0), 255)).toString(16).padStart(2, "0");
-  return `#${pair(r)}${pair(g)}${pair(b)}`;
-}
-function mix(color, toward, amount) {
-  return color.map((c) => c + (toward - c) * amount);
-}
-var LABEL_CROSSOVER = 0.2;
-function appearanceToStyle(appearance) {
-  if (!appearance) return {};
-  const vars = {};
-  if (appearance.primaryColor) {
-    vars["--kerne-primary"] = appearance.primaryColor;
-    vars["--kerne-accent"] = _nullishCoalesce(appearance.accentColor, () => ( appearance.primaryColor));
-    const rgb = parseColor(appearance.primaryColor);
-    if (rgb) {
-      const light = luminance(rgb) > LABEL_CROSSOVER;
-      vars["--kerne-primary-fg"] = _nullishCoalesce(appearance.primaryTextColor, () => ( (light ? "#16171a" : "#ffffff")));
-      vars["--kerne-primary-hover"] = toHex(mix(rgb, light ? 0 : 255, 0.14));
-    } else if (appearance.primaryTextColor) {
-      vars["--kerne-primary-fg"] = appearance.primaryTextColor;
-    }
-  } else {
-    if (appearance.accentColor) vars["--kerne-accent"] = appearance.accentColor;
-    if (appearance.primaryTextColor) vars["--kerne-primary-fg"] = appearance.primaryTextColor;
-  }
-  if (appearance.textColor) vars["--kerne-fg"] = appearance.textColor;
-  if (appearance.borderColor) vars["--kerne-border-strong"] = appearance.borderColor;
-  if (appearance.panelColor) vars["--kerne-panel"] = appearance.panelColor;
-  if (appearance.background) vars["--kerne-bg"] = appearance.background;
-  if (appearance.surfaceColor) {
-    vars["--kerne-surface"] = appearance.surfaceColor;
-    vars["--kerne-surface-raised"] = appearance.surfaceColor;
-  }
-  if (appearance.fontFamily) vars["--kerne-font"] = appearance.fontFamily;
-  if (appearance.radius) vars["--kerne-radius"] = appearance.radius;
-  if (appearance.controlHeight) vars["--kerne-control-height"] = appearance.controlHeight;
-  return vars;
-}
-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);
-function Shell({
-  appearance,
-  className,
-  size = "auth",
-  children
-}) {
-  ensureStylesInjected();
-  const nested = _react.useContext.call(void 0, InsideShell);
-  if (nested) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className, children });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InsideShell.Provider, { value: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "div",
-    {
-      className: `kerne-root${className ? ` ${className}` : ""}`,
-      style: appearanceToStyle(appearance),
-      "data-kerne-theme": resolveTheme(appearance),
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "div",
-        {
-          className: "kerne-shell",
-          "data-kerne-size": size === "wide" ? "wide" : void 0,
-          "data-kerne-surface": _optionalChain([appearance, 'optionalAccess', _3 => _3.surface]) === "card" ? "card" : void 0,
-          children
-        }
-      )
-    }
-  ) });
-}
-function Subsection({
-  title,
-  description,
-  children
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "kerne-subsection", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-subsection-head", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "kerne-subsection-title", children: title }),
-      description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: description }) : null
-    ] }),
-    children
-  ] });
-}
-function Masthead({
-  logo,
-  title,
-  subtitle
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-masthead", children: [
-    logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-logo", children: logo }) : null,
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-heading", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "kerne-title", children: title }),
-      subtitle ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subtitle", children: subtitle }) : null
-    ] })
-  ] });
-}
-function prefersAutoFocus() {
-  if (typeof window === "undefined" || !window.matchMedia) return false;
-  return window.matchMedia("(pointer: fine)").matches;
-}
-function Field({
-  label,
-  type,
-  value,
-  onChange,
-  autoComplete,
-  placeholder,
-  disabled,
-  required,
-  invalid,
-  error,
-  action,
-  code,
-  autoFocus,
-  children
-}) {
-  const id = _react.useId.call(void 0, );
-  const errorId = `${id}-error`;
-  const noteId = `${id}-note`;
-  const l10n = _chunkN6VPGJ36cjs.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.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.jsxs.call(void 0, 
-    "button",
-    {
-      type,
-      className: `kerne-button kerne-button-${variant}`,
-      disabled: disabled || loading,
-      onClick,
-      "aria-label": ariaLabel,
-      "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 = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const resolved = _nullishCoalesce(policy, () => ( resolvePolicy(null)));
-  if (!meetsPolicy(password, resolved)) {
-    const labels2 = {
-      min_length: _chunkN6VPGJ36cjs.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
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: "kerne-switch", onClick, children });
-}
-function AlertIcon() {
-  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, "circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round" })
-      ]
-    }
-  );
-}
-function MailIcon() {
-  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, "rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m2 7 10 6 10-6", strokeLinecap: "round", strokeLinejoin: "round" })
-      ]
-    }
-  );
-}
-function Panel({
-  children,
-  variant = "info"
-}) {
-  const danger = variant === "danger";
-  const icon = danger ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertIcon, {}) : variant === "success" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckIcon, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MailIcon, {});
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      className: `kerne-panel${danger ? " kerne-panel-danger" : ""}${variant === "success" ? " kerne-panel-success" : ""}`,
-      ...danger ? { role: "alert" } : { role: "status", "aria-live": "polite" },
-      children: [
-        icon,
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children })
-      ]
-    }
-  );
-}
-function CheckIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsx.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: "m5 13 4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round" })
+
+var _chunk3R66S7BYcjs = require('../chunk-3R66S7BY.cjs');
+
+// src/ui/AuthFlow.tsx
+var _react = require('react');
+
+// src/ui/useUrlToken.ts
+
+function useUrlToken(param = "token", override) {
+  const [token, setToken] = _react.useState.call(void 0, _nullishCoalesce(override, () => ( null)));
+  _react.useEffect.call(void 0, () => {
+    if (override) {
+      setToken(override);
+      return;
     }
-  );
-}
-function Status({
-  tone,
-  title,
-  children,
-  action
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-status", ...tone === "danger" ? { role: "alert" } : {}, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-status-icon", "data-tone": tone === "loading" ? "muted" : tone, children: tone === "loading" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-spinner", "aria-hidden": "true" }) : tone === "success" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckIcon, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AlertIcon, {}) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-heading", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "kerne-title", children: title }),
-      children ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-status-text", children }) : null
-    ] }),
-    action
-  ] });
-}
-function Divider({ label }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-divider", children: label });
-}
-function TextLink({
-  href,
-  onClick,
-  children
-}) {
-  if (onClick) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: "kerne-link", onClick, children });
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "kerne-link", href: _nullishCoalesce(href, () => ( "#")), children });
-}
-var OAUTH_LABELS = {
-  google: "Google",
-  github: "GitHub",
-  microsoft: "Microsoft",
-  apple: "Apple",
-  gitlab: "GitLab",
-  discord: "Discord"
-};
-function OAuthIcon({ provider }) {
-  const common = { width: 18, height: 18, viewBox: "0 0 24 24", "aria-hidden": true };
-  switch (provider) {
-    case "google":
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { ...common, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "path",
-          {
-            fill: "#4285F4",
-            d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "path",
-          {
-            fill: "#34A853",
-            d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "path",
-          {
-            fill: "#FBBC05",
-            d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "path",
-          {
-            fill: "#EA4335",
-            d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-          }
-        )
-      ] });
-    case "github":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { ...common, fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.26.8-.57v-2c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18.77.84 1.23 1.91 1.23 3.22 0 4.61-2.8 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .31.2.68.81.57A12 12 0 0 0 12 .3z" }) });
-    case "apple":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { ...common, fill: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M17.05 12.75c-.03-2.6 2.12-3.85 2.22-3.91-1.21-1.77-3.09-2.01-3.76-2.04-1.6-.16-3.12.94-3.93.94-.81 0-2.06-.92-3.39-.9-1.74.03-3.35 1.01-4.25 2.57-1.81 3.14-.46 7.79 1.3 10.34.86 1.25 1.89 2.65 3.24 2.6 1.3-.05 1.79-.84 3.36-.84 1.57 0 2.01.84 3.38.81 1.4-.02 2.28-1.27 3.13-2.53.99-1.45 1.4-2.86 1.42-2.93-.03-.01-2.72-1.04-2.75-4.13zM14.5 4.9c.71-.87 1.19-2.07 1.06-3.27-1.02.04-2.26.68-3 1.55-.66.76-1.24 1.98-1.09 3.15 1.14.09 2.31-.58 3.03-1.43z" }) });
-    default:
-      return null;
-  }
-}
-function OAuthButtons({
-  providers,
-  disabled,
-  onSelect
-}) {
-  const l10n = _chunkN6VPGJ36cjs.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 = _chunkN6VPGJ36cjs.fill.call(void 0, l10n.common.continueWith, {
-      provider: _nullishCoalesce(OAUTH_LABELS[provider], () => ( provider))
-    });
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "button",
-      {
-        type: "button",
-        className: "kerne-button kerne-button-outline",
-        disabled,
-        onClick: () => _optionalChain([onSelect, 'optionalCall', _6 => _6(provider)]),
-        "aria-label": label,
-        children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, OAuthIcon, { provider }),
-          label
-        ]
-      },
-      provider
-    );
-  }) });
-}
-function KerneBranding({ show }) {
-  const l10n = _chunkN6VPGJ36cjs.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 = _chunkN6VPGJ36cjs.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" })
-  ] });
+    if (typeof window === "undefined") return;
+    setToken(_nullishCoalesce(new URLSearchParams(window.location.search).get(param), () => ( "")));
+  }, [param, override]);
+  return token;
 }
 
 // src/ui/LoginForm.tsx
 
+var _jsxruntime = require('react/jsx-runtime');
 function LoginForm({
   onSuccess,
   redirectUrl,
-  magicLinkCallbackUrl,
   signUpUrl,
   onSignUpClick,
   forgotPasswordUrl,
@@ -1285,21 +77,21 @@ function LoginForm({
   logo,
   className
 }) {
-  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
-  const { login, startPasswordless } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config, isLoading: configLoading, error: configError } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const client = _chunk3R66S7BYcjs.useClient.call(void 0, );
+  const { login, startPasswordless } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config, isLoading: configLoading, error: configError } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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);
   const [error, setError] = _react.useState.call(void 0, null);
   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', _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 shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children });
+  const hasOAuth = (_nullishCoalesce(_optionalChain([config, 'optionalAccess', _ => _.oauth_providers, 'access', _2 => _2.length]), () => ( 0))) > 0;
+  const hasCredentials = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _3 => _3.enable_credentials]), () => ( false));
+  const hasMagicLink = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _4 => _4.enable_magic_link]), () => ( false));
   const hasEmailMethod = hasCredentials || hasMagicLink;
   const usePassword = passwordMode || !hasMagicLink && hasCredentials;
   const handleSubmit = async (e) => {
@@ -1312,10 +104,10 @@ function LoginForm({
         if (redirectUrl) {
           await client.redirectWithSession(redirectUrl);
         } else {
-          _optionalChain([onSuccess, 'optionalCall', _11 => _11()]);
+          _optionalChain([onSuccess, 'optionalCall', _5 => _5()]);
         }
       } else {
-        await startPasswordless(email, magicLinkCallbackUrl);
+        await startPasswordless(email);
         setLinkSentTo(email);
       }
     } catch (err) {
@@ -1323,29 +115,29 @@ function LoginForm({
       setSubmitting(false);
     }
   };
-  const appName = _optionalChain([config, 'optionalAccess', _12 => _12.app_name]);
+  const appName = _optionalChain([config, 'optionalAccess', _6 => _6.app_name]);
   const heading = _nullishCoalesce(title, () => ( l10n.signIn.title));
   if (configLoading) {
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormSkeleton, {})
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.FormSkeleton, {})
       ] })
     );
   }
   if (configError || !config) {
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.signIn.loadFailed })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: l10n.signIn.loadFailed })
       ] })
     );
   }
   if (!hasEmailMethod && !hasOAuth) {
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.signIn.unavailable })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: l10n.signIn.unavailable })
       ] })
     );
   }
@@ -1353,18 +145,18 @@ 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 ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.signIn.signUpForApp, { app: appName }) : l10n.signIn.signUpLink }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.TextLink, { href: signUpUrl, onClick: onSignUpClick, children: appName ? _chunk3R66S7BYcjs.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;
   return shell(
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading, subtitle: _nullishCoalesce(subtitle, () => ( signUpLine)) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.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: _chunkN6VPGJ36cjs.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: [
+        error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
+        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { children: _chunk3R66S7BYcjs.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,
+            _chunk3R66S7BYcjs.Field,
             {
               label: l10n.common.email,
               type: "email",
@@ -1378,7 +170,7 @@ function LoginForm({
             }
           ),
           usePassword ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Field,
+            _chunk3R66S7BYcjs.Field,
             {
               label: l10n.common.password,
               type: "password",
@@ -1388,12 +180,12 @@ function LoginForm({
               placeholder: l10n.common.passwordPlaceholder,
               disabled: submitting,
               required: true,
-              action: forgotPasswordUrl || onForgotPasswordClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: forgotPasswordUrl, onClick: onForgotPasswordClick, children: l10n.signIn.forgotPassword }) : void 0
+              action: forgotPasswordUrl || onForgotPasswordClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.TextLink, { href: forgotPasswordUrl, onClick: onForgotPasswordClick, children: l10n.signIn.forgotPassword }) : void 0
             }
           ) : null,
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: submitting, disabled: !email || usePassword && !password, children: submitLabel }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { loading: submitting, disabled: !email || usePassword && !password, children: submitLabel }),
           hasCredentials && hasMagicLink ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            MethodSwitch,
+            _chunk3R66S7BYcjs.MethodSwitch,
             {
               onClick: () => {
                 setPasswordMode((v) => !v);
@@ -1403,9 +195,9 @@ function LoginForm({
             }
           ) : null
         ] }) : null,
-        hasOAuth && hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, { label: l10n.common.or }) : null,
+        hasOAuth && hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Divider, { label: l10n.common.or }) : null,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          OAuthButtons,
+          _chunk3R66S7BYcjs.OAuthButtons,
           {
             providers: config.oauth_providers,
             disabled: submitting,
@@ -1414,7 +206,7 @@ function LoginForm({
         )
       ] }),
       legal ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-legal", children: legal }) : null,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: config.show_kerne_branding })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: config.show_kerne_branding })
     ] })
   );
 }
@@ -1425,7 +217,6 @@ function LoginForm({
 function RegisterForm({
   onSuccess,
   redirectUrl,
-  magicLinkCallbackUrl,
   invitationToken: invitationTokenProp,
   signInUrl,
   onSignInClick,
@@ -1438,13 +229,13 @@ function RegisterForm({
   logo,
   className
 }) {
-  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
-  const { register, startPasswordless } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config, isLoading: configLoading, error: configError } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const policy = resolvePolicy(config);
+  const client = _chunk3R66S7BYcjs.useClient.call(void 0, );
+  const { register, startPasswordless } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config, isLoading: configLoading, error: configError } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const policy = _chunk3R66S7BYcjs.resolvePolicy.call(void 0, config);
   const invitationToken = useUrlToken("token", invitationTokenProp) || void 0;
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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, "");
@@ -1453,37 +244,42 @@ function RegisterForm({
   const [error, setError] = _react.useState.call(void 0, null);
   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', _13 => _13.app_name]);
-  const heading = _nullishCoalesce(title, () => ( (appName ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title)));
+  const shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children });
+  const appName = _optionalChain([config, 'optionalAccess', _7 => _7.app_name]);
+  const heading = _nullishCoalesce(title, () => ( (appName ? _chunk3R66S7BYcjs.fill.call(void 0, l10n.signUp.titleWithApp, { app: appName }) : l10n.signUp.title)));
+  const invitationNeeded = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    l10n.signUp.invitationNeeded,
+    " ",
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.signUp.signInLink })
+  ] });
   const signInLine = signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     l10n.signUp.signInPrompt,
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.signUp.signInLink }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.signUp.signInLink }),
     "."
   ] }) : void 0;
   if (configLoading) {
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormSkeleton, {})
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.FormSkeleton, {})
       ] })
     );
   }
   if (configError || !config) {
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.signUp.loadFailed })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: l10n.signUp.loadFailed })
       ] })
     );
   }
   if (config.registration_mode === "CLOSED") {
     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: _chunkN6VPGJ36cjs.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 })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: l10n.signUp.closedTitle, subtitle: signInLine }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { children: _chunk3R66S7BYcjs.fill.call(void 0, l10n.signUp.closedBody, { app: _nullishCoalesce(appName, () => ( l10n.common.thisApp)) }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: config.show_kerne_branding })
       ] })
     );
   }
@@ -1509,10 +305,10 @@ function RegisterForm({
         if (redirectUrl) {
           await client.redirectWithSession(redirectUrl);
         } else {
-          _optionalChain([onSuccess, 'optionalCall', _14 => _14()]);
+          _optionalChain([onSuccess, 'optionalCall', _8 => _8()]);
         }
       } else {
-        await startPasswordless(email, magicLinkCallbackUrl, {
+        await startPasswordless(email, {
           invitationToken,
           invitationCode: invitationCode || void 0
         });
@@ -1526,8 +322,8 @@ function RegisterForm({
   if (!hasEmailMethod && !hasOAuth) {
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.signUp.unavailable })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: l10n.signUp.unavailable })
       ] })
     );
   }
@@ -1535,18 +331,18 @@ function RegisterForm({
   return shell(
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Masthead,
+        _chunk3R66S7BYcjs.Masthead,
         {
           logo,
           title: heading,
-          subtitle: _nullishCoalesce(subtitle, () => ( (needsCode ? l10n.signUp.invitationNeeded : signInLine)))
+          subtitle: _nullishCoalesce(subtitle, () => ( (needsCode ? invitationNeeded : signInLine)))
         }
       ),
       /* @__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: _chunkN6VPGJ36cjs.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: [
+        error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
+        linkSentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { children: _chunk3R66S7BYcjs.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,
+            _chunk3R66S7BYcjs.Field,
             {
               label: l10n.signUp.invitationCode,
               type: "text",
@@ -1561,7 +357,7 @@ function RegisterForm({
             }
           ) : null,
           collectName && usePassword ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Field,
+            _chunk3R66S7BYcjs.Field,
             {
               label: l10n.common.name,
               type: "text",
@@ -1573,7 +369,7 @@ function RegisterForm({
             }
           ) : null,
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Field,
+            _chunk3R66S7BYcjs.Field,
             {
               label: l10n.common.email,
               type: "email",
@@ -1587,7 +383,7 @@ function RegisterForm({
             }
           ),
           usePassword ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Field,
+            _chunk3R66S7BYcjs.Field,
             {
               label: l10n.common.password,
               type: "password",
@@ -1597,19 +393,19 @@ function RegisterForm({
               placeholder: l10n.common.passwordPlaceholder,
               disabled: submitting,
               required: true,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PasswordStrength, { password, policy })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.PasswordStrength, { password, policy })
             }
           ) : null,
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Button,
+            _chunk3R66S7BYcjs.Button,
             {
               loading: submitting,
-              disabled: !email || needsCode && !invitationCode || usePassword && !meetsPolicy(password, policy),
+              disabled: !email || needsCode && !invitationCode || usePassword && !_chunk3R66S7BYcjs.meetsPolicy.call(void 0, password, policy),
               children: submitLabel
             }
           ),
           hasCredentials && hasMagicLink ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            MethodSwitch,
+            _chunk3R66S7BYcjs.MethodSwitch,
             {
               onClick: () => {
                 setPasswordMode((v) => !v);
@@ -1619,9 +415,9 @@ function RegisterForm({
             }
           ) : null
         ] }) : null,
-        hasOAuth && hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, { label: l10n.common.or }) : null,
+        hasOAuth && hasEmailMethod ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Divider, { label: l10n.common.or }) : null,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          OAuthButtons,
+          _chunk3R66S7BYcjs.OAuthButtons,
           {
             providers: config.oauth_providers,
             disabled: submitting,
@@ -1630,7 +426,7 @@ function RegisterForm({
         )
       ] }),
       legal ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-legal", children: legal }) : null,
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: config.show_kerne_branding })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: config.show_kerne_branding })
     ] })
   );
 }
@@ -1639,7 +435,6 @@ function RegisterForm({
 
 
 function ForgotPasswordForm({
-  callbackUrl,
   signInUrl,
   onSignInClick,
   onSent,
@@ -1649,10 +444,10 @@ function ForgotPasswordForm({
   logo,
   className
 }) {
-  const { requestPasswordReset } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const { requestPasswordReset } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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);
@@ -1662,9 +457,9 @@ function ForgotPasswordForm({
     setError(null);
     setSubmitting(true);
     try {
-      await requestPasswordReset(email, callbackUrl);
+      await requestPasswordReset(email);
       setSentTo(email);
-      _optionalChain([onSent, 'optionalCall', _15 => _15(email)]);
+      _optionalChain([onSent, 'optionalCall', _9 => _9(email)]);
     } catch (err) {
       setError(showError(err));
     } finally {
@@ -1674,12 +469,12 @@ function ForgotPasswordForm({
   const backLine = signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     l10n.resetPassword.rememberedPrompt,
     " ",
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.common.backToSignIn }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.common.backToSignIn }),
     "."
   ] }) : void 0;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      Masthead,
+      _chunk3R66S7BYcjs.Masthead,
       {
         logo,
         title: _nullishCoalesce(title, () => ( l10n.resetPassword.requestTitle)),
@@ -1687,10 +482,10 @@ 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: _chunkN6VPGJ36cjs.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: [
+      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
+      sentTo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { children: _chunk3R66S7BYcjs.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,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.common.email,
             type: "email",
@@ -1703,11 +498,11 @@ function ForgotPasswordForm({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: submitting, disabled: !email, children: submitting ? l10n.resetPassword.requestSubmitting : l10n.resetPassword.requestSubmit }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.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', _16 => _16.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _10 => _10.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -1725,12 +520,12 @@ function ResetPasswordForm({
   logo,
   className
 }) {
-  const { confirmPasswordReset } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const policy = resolvePolicy(config);
+  const { confirmPasswordReset } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const policy = _chunk3R66S7BYcjs.resolvePolicy.call(void 0, config);
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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);
@@ -1739,7 +534,7 @@ function ResetPasswordForm({
   const heading = _nullishCoalesce(title, () => ( l10n.resetPassword.title));
   const mismatch = confirm.length > 0 && password !== confirm;
   const signInAction = signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Button,
+    _chunk3R66S7BYcjs.Button,
     {
       type: "button",
       onClick: _nullishCoalesce(onSignInClick, () => ( (() => {
@@ -1756,7 +551,7 @@ function ResetPasswordForm({
     try {
       await confirmPasswordReset(token, password);
       setDone(true);
-      _optionalChain([onSuccess, 'optionalCall', _17 => _17()]);
+      _optionalChain([onSuccess, 'optionalCall', _11 => _11()]);
     } catch (err) {
       setError(showError(err));
     } finally {
@@ -1764,32 +559,32 @@ function ResetPasswordForm({
     }
   };
   if (token === null) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormSkeleton, {})
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.FormSkeleton, {})
     ] });
   }
   if (token === "") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.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', _18 => _18.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "danger", title: l10n.resetPassword.incompleteTitle, action: signInAction, children: l10n.resetPassword.incompleteBody }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _12 => _12.show_kerne_branding]), () => ( false)) })
     ] });
   }
   if (done) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.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', _19 => _19.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "success", title: l10n.resetPassword.doneTitle, action: signInAction, children: l10n.resetPassword.doneBody }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _13 => _13.show_kerne_branding]), () => ( false)) })
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading, subtitle: _nullishCoalesce(subtitle, () => ( l10n.resetPassword.subtitle)) }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading, subtitle: _nullishCoalesce(subtitle, () => ( l10n.resetPassword.subtitle)) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
-      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
+      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.resetPassword.newPassword,
             type: "password",
@@ -1800,11 +595,11 @@ function ResetPasswordForm({
             disabled: submitting,
             required: true,
             autoFocus: true,
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PasswordStrength, { password, policy })
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.PasswordStrength, { password, policy })
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.resetPassword.confirmPassword,
             type: "password",
@@ -1818,17 +613,17 @@ function ResetPasswordForm({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
+          _chunk3R66S7BYcjs.Button,
           {
             loading: submitting,
-            disabled: !meetsPolicy(password, policy) || !confirm || mismatch,
+            disabled: !_chunk3R66S7BYcjs.meetsPolicy.call(void 0, password, policy) || !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
+        signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-footer", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.TextLink, { href: signInUrl, onClick: onSignInClick, children: l10n.common.backToSignIn }) }) : null
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _20 => _20.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _14 => _14.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -1845,12 +640,12 @@ function MagicLinkCallback({
   logo,
   className
 }) {
-  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
-  const { loginWithMagicLink } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
+  const client = _chunk3R66S7BYcjs.useClient.call(void 0, );
+  const { loginWithMagicLink } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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);
@@ -1866,7 +661,7 @@ function MagicLinkCallback({
       if (redirectUrl) {
         await client.redirectWithSession(redirectUrl);
       } else {
-        _optionalChain([onSuccess, 'optionalCall', _21 => _21()]);
+        _optionalChain([onSuccess, 'optionalCall', _15 => _15()]);
       }
     }).catch((e) => {
       setState("failed");
@@ -1874,7 +669,7 @@ function MagicLinkCallback({
     });
   }, [token, loginWithMagicLink, redirectUrl, client, onSuccess]);
   const retry = signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Button,
+    _chunk3R66S7BYcjs.Button,
     {
       variant: "outline",
       type: "button",
@@ -1884,10 +679,10 @@ function MagicLinkCallback({
       children: l10n.common.backToSignIn
     }
   ) : void 0;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.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', _22 => _22.show_kerne_branding]), () => ( false)) })
+    state === "pending" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "loading", title: l10n.magicLink.pendingTitle, children: l10n.magicLink.pendingBody }) : state === "done" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "success", title: l10n.magicLink.doneTitle, children: l10n.magicLink.doneBody }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "danger", title: l10n.magicLink.failedTitle, action: retry, children: _nullishCoalesce(message, () => ( l10n.magicLink.missingToken)) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _16 => _16.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -1896,7 +691,6 @@ function MagicLinkCallback({
 
 function VerifyEmailForm({
   token: tokenProp,
-  callbackUrl,
   onVerified,
   title,
   subtitle,
@@ -1904,11 +698,11 @@ function VerifyEmailForm({
   logo,
   className
 }) {
-  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
+  const { verifyEmailWithCode, verifyEmailWithLink, sendVerificationEmail, refreshToken } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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);
@@ -1922,7 +716,7 @@ function VerifyEmailForm({
       await refreshToken().catch(() => void 0);
     }
     setVerified(true);
-    _optionalChain([onVerified, 'optionalCall', _23 => _23()]);
+    _optionalChain([onVerified, 'optionalCall', _17 => _17()]);
   };
   _react.useEffect.call(void 0, () => {
     if (token === null || token === "" || consumed.current) return;
@@ -1952,49 +746,49 @@ function VerifyEmailForm({
   const handleResend = async () => {
     setError(null);
     try {
-      await sendVerificationEmail("code", callbackUrl);
+      await sendVerificationEmail("code");
       setResent(true);
     } catch (err) {
       setError(showError(err));
     }
   };
   if (verified) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.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', _24 => _24.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "success", title: l10n.verifyEmail.doneTitle, children: l10n.verifyEmail.doneBody }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _18 => _18.show_kerne_branding]), () => ( false)) })
     ] });
   }
   if (linkState === "pending") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.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: "loading", title: l10n.verifyEmail.verifyingTitle, children: l10n.verifyEmail.verifyingBody })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "loading", title: l10n.verifyEmail.verifyingTitle, children: l10n.verifyEmail.verifyingBody })
     ] });
   }
   if (linkState === "failed") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.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,
+        _chunk3R66S7BYcjs.Status,
         {
           tone: "danger",
           title: l10n.verifyEmail.failedTitle,
-          action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: handleResend, children: l10n.verifyEmail.newCode }),
+          action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { variant: "outline", type: "button", onClick: handleResend, children: l10n.verifyEmail.newCode }),
           children: error
         }
       ),
-      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', _25 => _25.show_kerne_branding]), () => ( false)) })
+      resent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "success", children: l10n.verifyEmail.resent }) : null,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _19 => _19.show_kerne_branding]), () => ( false)) })
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading, subtitle: _nullishCoalesce(subtitle, () => ( l10n.verifyEmail.subtitle)) }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading, subtitle: _nullishCoalesce(subtitle, () => ( l10n.verifyEmail.subtitle)) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
-      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-      resent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "success", children: l10n.verifyEmail.resent }) : null,
+      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
+      resent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "success", children: l10n.verifyEmail.resent }) : null,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.verifyEmail.code,
             type: "text",
@@ -2008,11 +802,11 @@ function VerifyEmailForm({
             autoFocus: true
           }
         ),
-        /* @__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, _chunk3R66S7BYcjs.Button, { loading: submitting, disabled: !code, children: submitting ? l10n.verifyEmail.submitting : l10n.verifyEmail.submit }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.MethodSwitch, { onClick: handleResend, children: l10n.verifyEmail.resend })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _26 => _26.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _20 => _20.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -2030,13 +824,13 @@ function ActivateAccountForm({
   logo,
   className
 }) {
-  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
-  const { getActivationContext, completeActivation } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const policy = resolvePolicy(config);
+  const client = _chunk3R66S7BYcjs.useClient.call(void 0, );
+  const { getActivationContext, completeActivation } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const policy = _chunk3R66S7BYcjs.resolvePolicy.call(void 0, config);
   const token = useUrlToken("token", tokenProp);
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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, "");
@@ -2054,7 +848,7 @@ function ActivateAccountForm({
     };
   }, [token, getActivationContext]);
   const signInAction = signInUrl || onSignInClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Button,
+    _chunk3R66S7BYcjs.Button,
     {
       type: "button",
       onClick: _nullishCoalesce(onSignInClick, () => ( (() => {
@@ -2069,11 +863,11 @@ function ActivateAccountForm({
     setError(null);
     setSubmitting(true);
     try {
-      await completeActivation(token, _optionalChain([context, 'optionalAccess', _27 => _27.mode]) === "credentials" ? password : void 0);
+      await completeActivation(token, _optionalChain([context, 'optionalAccess', _21 => _21.mode]) === "credentials" ? password : void 0);
       if (redirectUrl) {
         await client.redirectWithSession(redirectUrl);
       } else {
-        _optionalChain([onSuccess, 'optionalCall', _28 => _28()]);
+        _optionalChain([onSuccess, 'optionalCall', _22 => _22()]);
       }
     } catch (err) {
       setError(showError(err));
@@ -2081,43 +875,43 @@ function ActivateAccountForm({
     }
   };
   if (token === null) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormSkeleton, {})
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.FormSkeleton, {})
     ] });
   }
   if (token === "" || loadError) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.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', _29 => _29.show_kerne_branding]), () => ( false)) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "danger", title: l10n.activate.failedTitle, action: signInAction, children: _nullishCoalesce(loadError, () => ( l10n.activate.missingToken)) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _23 => _23.show_kerne_branding]), () => ( false)) })
     ] });
   }
   if (!context) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Masthead, { logo, title: heading }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FormSkeleton, {})
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Masthead, { logo, title: heading }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.FormSkeleton, {})
     ] });
   }
   const credentialsMode = context.mode === "credentials";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      Masthead,
+      _chunk3R66S7BYcjs.Masthead,
       {
         logo,
         title: heading,
-        subtitle: _chunkN6VPGJ36cjs.fillNode.call(void 0, 
+        subtitle: _chunk3R66S7BYcjs.fillNode.call(void 0, 
           credentialsMode ? l10n.activate.credentialsSubtitle : l10n.activate.magicSubtitle,
           { email: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "strong", { children: context.email }) }
         )
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
-      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
+      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
         credentialsMode ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Field,
+            _chunk3R66S7BYcjs.Field,
             {
               label: l10n.common.password,
               type: "password",
@@ -2128,11 +922,11 @@ function ActivateAccountForm({
               disabled: submitting,
               required: true,
               autoFocus: true,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PasswordStrength, { password, policy })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.PasswordStrength, { password, policy })
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Field,
+            _chunk3R66S7BYcjs.Field,
             {
               label: l10n.activate.confirmPassword,
               type: "password",
@@ -2147,16 +941,16 @@ function ActivateAccountForm({
           )
         ] }) : null,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
+          _chunk3R66S7BYcjs.Button,
           {
             loading: submitting,
-            disabled: credentialsMode && (!meetsPolicy(password, policy) || !confirm || mismatch),
+            disabled: credentialsMode && (!_chunk3R66S7BYcjs.meetsPolicy.call(void 0, password, policy) || !confirm || mismatch),
             children: submitting ? l10n.activate.submitting : l10n.activate.submit
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _30 => _30.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _24 => _24.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -2169,25 +963,22 @@ function AuthFlow({
   onStepChange,
   onSuccess,
   redirectUrl,
-  magicLinkCallbackUrl,
-  resetPasswordCallbackUrl,
-  verificationCallbackUrl,
   allowSignUp = true,
   legal,
   appearance,
   logo,
   className
 }) {
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.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', _31 => _31(next)]);
+    _optionalChain([onStepChange, 'optionalCall', _25 => _25(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', _32 => _32.registration_mode]) !== "CLOSED";
+  const canSignUp = allowSignUp && _optionalChain([config, 'optionalAccess', _26 => _26.registration_mode]) !== "CLOSED";
   const shared = {
     appearance,
     logo,
@@ -2201,20 +992,12 @@ function AuthFlow({
           ...shared,
           onSuccess,
           redirectUrl,
-          magicLinkCallbackUrl,
           onSignInClick: () => go("sign-in"),
           legal
         }
       );
     case "forgot-password":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        ForgotPasswordForm,
-        {
-          ...shared,
-          callbackUrl: resetPasswordCallbackUrl,
-          onSignInClick: () => go("sign-in")
-        }
-      );
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ForgotPasswordForm, { ...shared, onSignInClick: () => go("sign-in") });
     case "reset-password":
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ResetPasswordForm, { ...shared, onSignInClick: () => go("sign-in"), onSuccess });
     case "magic-link":
@@ -2228,7 +1011,7 @@ function AuthFlow({
         }
       );
     case "verify-email":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, VerifyEmailForm, { ...shared, callbackUrl: verificationCallbackUrl, onVerified: onSuccess });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, VerifyEmailForm, { ...shared, onVerified: onSuccess });
     case "activate":
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         ActivateAccountForm,
@@ -2247,7 +1030,6 @@ function AuthFlow({
           ...shared,
           onSuccess,
           redirectUrl,
-          magicLinkCallbackUrl,
           onSignUpClick: canSignUp ? () => go("sign-up") : void 0,
           onForgotPasswordClick: () => go("forgot-password"),
           legal
@@ -2265,11 +1047,11 @@ function ChangePasswordForm({
   appearance,
   className
 }) {
-  const { updatePassword } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const policy = resolvePolicy(config);
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const { updatePassword } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const policy = _chunk3R66S7BYcjs.resolvePolicy.call(void 0, config);
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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, "");
@@ -2291,21 +1073,21 @@ function ChangePasswordForm({
       setCurrentPassword("");
       setNewPassword("");
       setConfirm("");
-      _optionalChain([onSuccess, 'optionalCall', _33 => _33()]);
+      _optionalChain([onSuccess, 'optionalCall', _27 => _27()]);
     } catch (err) {
       setError(showError(err));
     } finally {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
     heading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-heading", style: { marginBottom: 20 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "kerne-title", children: heading }) }) : null,
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
-      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-      done ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "success", children: l10n.security.changed }) : null,
+      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
+      done ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "success", children: l10n.security.changed }) : null,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.security.currentPassword,
             type: "password",
@@ -2318,7 +1100,7 @@ function ChangePasswordForm({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.security.newPassword,
             type: "password",
@@ -2329,11 +1111,11 @@ function ChangePasswordForm({
             disabled: submitting,
             required: true,
             error: unchanged ? l10n.security.sameAsCurrent : void 0,
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PasswordStrength, { password: newPassword, policy })
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.PasswordStrength, { password: newPassword, policy })
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.security.confirmPassword,
             type: "password",
@@ -2347,10 +1129,10 @@ function ChangePasswordForm({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
+          _chunk3R66S7BYcjs.Button,
           {
             loading: submitting,
-            disabled: !currentPassword || !meetsPolicy(newPassword, policy) || !confirm || mismatch || unchanged,
+            disabled: !currentPassword || !_chunk3R66S7BYcjs.meetsPolicy.call(void 0, newPassword, policy) || !confirm || mismatch || unchanged,
             children: submitting ? l10n.security.submitting : l10n.security.submit
           }
         )
@@ -2375,10 +1157,10 @@ function WaitlistForm({
   logo,
   className
 }) {
-  const { join } = _chunkN6VPGJ36cjs.useWaitlist.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const { join } = _chunk3R66S7BYcjs.useWaitlist.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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);
@@ -2395,16 +1177,16 @@ function WaitlistForm({
         metadata
       });
       setJoined(true);
-      _optionalChain([onJoined, 'optionalCall', _34 => _34(email)]);
+      _optionalChain([onJoined, 'optionalCall', _28 => _28(email)]);
     } catch (err) {
       setError(showError(err));
     } finally {
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      Masthead,
+      _chunk3R66S7BYcjs.Masthead,
       {
         logo,
         title: _nullishCoalesce(title, () => ( l10n.waitlist.title)),
@@ -2412,10 +1194,10 @@ function WaitlistForm({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
-      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-      joined ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "success", children: _nullishCoalesce(successMessage, () => ( l10n.waitlist.joined)) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
+      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
+      joined ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "success", children: _nullishCoalesce(successMessage, () => ( l10n.waitlist.joined)) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSubmit, children: [
         collectName ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.common.name,
             type: "text",
@@ -2427,7 +1209,7 @@ function WaitlistForm({
           }
         ) : null,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.common.email,
             type: "email",
@@ -2440,11 +1222,11 @@ function WaitlistForm({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: submitting, disabled: !email, children: submitting ? l10n.waitlist.submitting : _nullishCoalesce(submitLabel, () => ( l10n.waitlist.submit)) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.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', _35 => _35.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _29 => _29.show_kerne_branding]), () => ( false)) })
   ] });
 }
 
@@ -2458,20 +1240,20 @@ function SignOutButton({
   className,
   appearance
 }) {
-  ensureStylesInjected();
-  const { logout } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  _chunk3R66S7BYcjs.ensureStylesInjected.call(void 0, );
+  const { logout } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
   const handle = () => {
     logout();
-    _optionalChain([onSignedOut, 'optionalCall', _36 => _36()]);
+    _optionalChain([onSignedOut, 'optionalCall', _30 => _30()]);
     if (redirectUrl && typeof window !== "undefined") window.location.href = redirectUrl;
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
       className: "kerne-root",
-      style: { ...appearanceToStyle(appearance), display: "inline-flex", width: "auto" },
-      "data-kerne-theme": resolveTheme(appearance),
+      style: { ..._chunk3R66S7BYcjs.appearanceToStyle.call(void 0, appearance), display: "inline-flex", width: "auto" },
+      "data-kerne-theme": _chunk3R66S7BYcjs.resolveTheme.call(void 0, appearance),
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
@@ -2493,32 +1275,56 @@ function UserButton({
   appearance,
   className
 }) {
-  ensureStylesInjected();
-  const { logout, isAuthenticated } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { user, fullName, initials, email } = _chunkN6VPGJ36cjs.useUser.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  _chunk3R66S7BYcjs.ensureStylesInjected.call(void 0, );
+  const { logout, isAuthenticated } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { user, fullName, initials, email } = _chunk3R66S7BYcjs.useUser.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
   const [open, setOpen] = _react.useState.call(void 0, false);
   const wrapRef = _react.useRef.call(void 0, null);
+  const triggerRef = _react.useRef.call(void 0, null);
+  const itemRefs = _react.useRef.call(void 0, []);
   _react.useEffect.call(void 0, () => {
     if (!open) return;
     const onPointerDown = (e) => {
       if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
     };
     const onKeyDown = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key === "Escape") {
+        setOpen(false);
+        _optionalChain([triggerRef, 'access', _31 => _31.current, 'optionalAccess', _32 => _32.focus, 'call', _33 => _33()]);
+      }
+    };
+    const onFocusOut = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.relatedTarget)) setOpen(false);
     };
     document.addEventListener("mousedown", onPointerDown);
     document.addEventListener("keydown", onKeyDown);
+    _optionalChain([wrapRef, 'access', _34 => _34.current, 'optionalAccess', _35 => _35.addEventListener, 'call', _36 => _36("focusout", onFocusOut)]);
+    _optionalChain([itemRefs, 'access', _37 => _37.current, 'access', _38 => _38[0], 'optionalAccess', _39 => _39.focus, 'call', _40 => _40()]);
     return () => {
       document.removeEventListener("mousedown", onPointerDown);
       document.removeEventListener("keydown", onKeyDown);
+      _optionalChain([wrapRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.removeEventListener, 'call', _43 => _43("focusout", onFocusOut)]);
     };
   }, [open]);
+  const onMenuKeyDown = (e) => {
+    const entries = itemRefs.current.filter((el) => el !== null);
+    if (entries.length === 0) return;
+    const currentIndex = entries.indexOf(document.activeElement);
+    let nextIndex = null;
+    if (e.key === "ArrowDown") nextIndex = (currentIndex + 1) % entries.length;
+    else if (e.key === "ArrowUp") nextIndex = (currentIndex - 1 + entries.length) % entries.length;
+    else if (e.key === "Home") nextIndex = 0;
+    else if (e.key === "End") nextIndex = entries.length - 1;
+    else return;
+    e.preventDefault();
+    _optionalChain([entries, 'access', _44 => _44[nextIndex], 'optionalAccess', _45 => _45.focus, 'call', _46 => _46()]);
+  };
   if (!isAuthenticated) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: signedOutFallback });
   const handleSignOut = () => {
     setOpen(false);
     logout();
-    _optionalChain([onSignedOut, 'optionalCall', _37 => _37()]);
+    _optionalChain([onSignedOut, 'optionalCall', _47 => _47()]);
     if (signOutRedirectUrl && typeof window !== "undefined") {
       window.location.href = signOutRedirectUrl;
     }
@@ -2527,54 +1333,74 @@ function UserButton({
     "div",
     {
       className: `kerne-root${className ? ` ${className}` : ""}`,
-      style: { ...appearanceToStyle(appearance), display: "inline-flex", width: "auto" },
-      "data-kerne-theme": resolveTheme(appearance),
+      style: { ..._chunk3R66S7BYcjs.appearanceToStyle.call(void 0, appearance), display: "inline-flex", width: "auto" },
+      "data-kerne-theme": _chunk3R66S7BYcjs.resolveTheme.call(void 0, appearance),
       children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-menu-wrap", ref: wrapRef, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
             type: "button",
+            ref: triggerRef,
             className: "kerne-menu-trigger",
             "aria-haspopup": "menu",
             "aria-expanded": open,
             "aria-label": l10n.account.menuLabel,
             onClick: () => setOpen((v) => !v),
-            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()]) || "?" })
+            children: _optionalChain([user, 'optionalAccess', _48 => _48.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', _49 => _49[0], 'optionalAccess', _50 => _50.toUpperCase, 'call', _51 => _51()]) || "?" })
           }
         ),
-        open ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-menu", role: "menu", children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-menu-header", children: [
-            fullName ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-identity-name", children: fullName }) : null,
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-identity-mail", children: email })
-          ] }),
-          items.map(
-            (item) => item.href ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { role: "menuitem", className: "kerne-menu-item", href: item.href, children: item.label }, item.label) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        open ? (() => {
+          itemRefs.current = [];
+          let itemIndex = 0;
+          const registerItem = (el) => {
+            itemRefs.current[itemIndex++] = el;
+          };
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-menu", role: "menu", onKeyDown: onMenuKeyDown, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-menu-header", children: [
+              fullName ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-identity-name", children: fullName }) : null,
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-identity-mail", children: email })
+            ] }),
+            items.map(
+              (item) => item.href ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "a",
+                {
+                  ref: registerItem,
+                  role: "menuitem",
+                  className: "kerne-menu-item",
+                  href: item.href,
+                  children: item.label
+                },
+                item.label
+              ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "button",
+                {
+                  ref: registerItem,
+                  type: "button",
+                  role: "menuitem",
+                  className: "kerne-menu-item",
+                  onClick: () => {
+                    setOpen(false);
+                    _optionalChain([item, 'access', _52 => _52.onClick, 'optionalCall', _53 => _53()]);
+                  },
+                  children: item.label
+                },
+                item.label
+              )
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 type: "button",
+                ref: registerItem,
                 role: "menuitem",
                 className: "kerne-menu-item",
-                onClick: () => {
-                  setOpen(false);
-                  _optionalChain([item, 'access', _42 => _42.onClick, 'optionalCall', _43 => _43()]);
-                },
-                children: item.label
-              },
-              item.label
+                "data-tone": "danger",
+                onClick: handleSignOut,
+                children: l10n.account.signOut
+              }
             )
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              className: "kerne-menu-item",
-              "data-tone": "danger",
-              onClick: handleSignOut,
-              children: l10n.account.signOut
-            }
-          )
-        ] }) : null
+          ] });
+        })() : null
       ] })
     }
   );
@@ -2586,11 +1412,11 @@ function UserButton({
 // src/ui/profile/ProfileSection.tsx
 
 
-function ProfileSection({ verificationCallbackUrl, onSaved }) {
-  const { updateProfile, sendVerificationEmail, getVerificationStatus } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { user, fullName, initials, email } = _chunkN6VPGJ36cjs.useUser.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+function ProfileSection({ onSaved }) {
+  const { updateProfile, sendVerificationEmail, getVerificationStatus } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { user, fullName, initials, email } = _chunk3R66S7BYcjs.useUser.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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);
@@ -2619,7 +1445,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
     try {
       await updateProfile({ first_name: firstName, last_name: lastName });
       setSaved(true);
-      _optionalChain([onSaved, 'optionalCall', _44 => _44()]);
+      _optionalChain([onSaved, 'optionalCall', _54 => _54()]);
     } catch (err) {
       setError(showError(err));
     } finally {
@@ -2630,7 +1456,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
     setError(null);
     setSending(true);
     try {
-      await sendVerificationEmail("link", verificationCallbackUrl);
+      await sendVerificationEmail("link");
       setSent(true);
     } catch (err) {
       setError(showError(err));
@@ -2639,19 +1465,19 @@ 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, _chunk3R66S7BYcjs.Subsection, { title: l10n.profile.profileTitle, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-identity", children: [
-        _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()]) || "?" }),
+        _optionalChain([user, 'optionalAccess', _55 => _55.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', _56 => _56[0], 'optionalAccess', _57 => _57.toUpperCase, 'call', _58 => _58()]) || "?" }),
         /* @__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 })
         ] })
       ] }),
-      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: error }) : null,
-      saved ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "success", children: l10n.profile.saved }) : null,
+      error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
+      saved ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "success", children: l10n.profile.saved }) : null,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { className: "kerne-form", onSubmit: handleSave, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.profile.firstName,
             type: "text",
@@ -2663,7 +1489,7 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Field,
+          _chunk3R66S7BYcjs.Field,
           {
             label: l10n.profile.lastName,
             type: "text",
@@ -2674,11 +1500,11 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
             disabled: saving
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { loading: saving, children: saving ? l10n.profile.saving : l10n.profile.save })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { loading: saving, children: saving ? l10n.profile.saving : l10n.profile.save })
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      Subsection,
+      _chunk3R66S7BYcjs.Subsection,
       {
         title: l10n.profile.emailSectionTitle,
         description: l10n.profile.emailSectionDesc,
@@ -2688,9 +1514,9 @@ 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, loading: sending, children: sending ? l10n.common.sending : l10n.profile.verify }) : null
+            verified === false ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.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
+          sent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "success", children: l10n.profile.verificationSent }) : null
         ]
       }
     )
@@ -2701,32 +1527,32 @@ function ProfileSection({ verificationCallbackUrl, onSaved }) {
 
 
 function SecuritySection({ showDeleteAccount = true, onDeleted }) {
-  const { requestAccountDeletion } = _chunkN6VPGJ36cjs.useAuth.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const { requestAccountDeletion } = _chunk3R66S7BYcjs.useAuth.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.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', _49 => _49.enable_credentials]), () => ( true));
+  const hasPassword = _nullishCoalesce(_optionalChain([config, 'optionalAccess', _59 => _59.enable_credentials]), () => ( true));
   const handleDelete = async () => {
     setError(null);
     setDeleting(true);
     try {
       await requestAccountDeletion();
-      _optionalChain([onDeleted, 'optionalCall', _50 => _50()]);
+      _optionalChain([onDeleted, 'optionalCall', _60 => _60()]);
     } catch (err) {
       setError(showError(err));
       setDeleting(false);
     }
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    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, loading: deleting, children: deleting ? l10n.security.deleting : l10n.security.deleteConfirm }),
+    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: error }) : null,
+    hasPassword ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.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, _chunk3R66S7BYcjs.Subsection, { title: l10n.security.deleteTitle, description: l10n.security.deleteDesc, children: confirmingDelete ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { variant: "danger", type: "button", onClick: handleDelete, loading: deleting, children: deleting ? l10n.security.deleting : l10n.security.deleteConfirm }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Button,
+        _chunk3R66S7BYcjs.Button,
         {
           variant: "outline",
           type: "button",
@@ -2735,17 +1561,47 @@ function SecuritySection({ showDeleteAccount = true, onDeleted }) {
           children: l10n.common.cancel
         }
       )
-    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "danger", type: "button", onClick: () => setConfirmingDelete(true), children: l10n.security.deleteAction }) }) : null
+    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { variant: "danger", type: "button", onClick: () => setConfirmingDelete(true), children: l10n.security.deleteAction }) }) : null
   ] });
 }
 
-// src/ui/profile/BillingSection.tsx
-
-
 // src/ui/format.ts
 function humanizeFeatureKey(key) {
-  const words = key.replace(/[_-]+/g, " ").trim();
-  return words.charAt(0).toUpperCase() + words.slice(1);
+  const words = key.replace(/[_-]+/g, " ").trim().split(" ");
+  return words.map((word, index) => {
+    const lower = word.toLowerCase();
+    if (COMMON_ACRONYMS.has(lower)) return lower.toUpperCase();
+    return index === 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word;
+  }).join(" ");
+}
+var COMMON_ACRONYMS = /* @__PURE__ */ new Set([
+  "ai",
+  "api",
+  "cdn",
+  "cpu",
+  "db",
+  "gb",
+  "gpu",
+  "id",
+  "ip",
+  "kb",
+  "mb",
+  "saas",
+  "sdk",
+  "sla",
+  "sms",
+  "sql",
+  "sso",
+  "tb",
+  "ui",
+  "url",
+  "ux"
+]);
+function lowercaseFeatureName(name) {
+  return name.split(" ").map((word) => /^[A-Z0-9]{2,}$/.test(word) ? word : word.toLowerCase()).join(" ");
+}
+function capitalize(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
 }
 function formatMoney(amountMinorUnits, currency) {
   try {
@@ -2843,22 +1699,26 @@ function resolveLabelSavings(plans, labels) {
     return void 0;
   };
   const sorted = [...labels].sort(
-    (a, b) => approxMonths(_nullishCoalesce(_optionalChain([priceFor, 'call', _51 => _51(a.slug), 'optionalAccess', _52 => _52.interval]), () => ( "1M"))) - approxMonths(_nullishCoalesce(_optionalChain([priceFor, 'call', _53 => _53(b.slug), 'optionalAccess', _54 => _54.interval]), () => ( "1M")))
+    (a, b) => approxMonths(_nullishCoalesce(_optionalChain([priceFor, 'call', _61 => _61(a.slug), 'optionalAccess', _62 => _62.interval]), () => ( "1M"))) - approxMonths(_nullishCoalesce(_optionalChain([priceFor, 'call', _63 => _63(b.slug), 'optionalAccess', _64 => _64.interval]), () => ( "1M")))
   );
   const shortest = sorted[0];
   const longest = sorted[sorted.length - 1];
   if (shortest.slug === longest.slug) return null;
+  let smallest = null;
   for (const plan of plans) {
     const shortPrice = plan.prices.find((p) => p.label.slug === shortest.slug);
     const longPrice = plan.prices.find((p) => p.label.slug === longest.slug);
-    if (!_optionalChain([shortPrice, 'optionalAccess', _55 => _55.amount]) || !longPrice) continue;
+    if (!_optionalChain([shortPrice, 'optionalAccess', _65 => _65.amount]) || !longPrice) continue;
     const shortMonths = approxMonths(shortPrice.interval);
     const longMonths = approxMonths(longPrice.interval);
     if (!shortMonths || !longMonths) continue;
     const savings = 1 - longPrice.amount / longMonths / (shortPrice.amount / shortMonths);
-    if (savings > 0.01) return { labelSlug: longest.slug, percent: Math.round(savings * 100) };
+    if (savings <= 0.01) return null;
+    smallest = smallest === null ? savings : Math.min(smallest, savings);
   }
-  return null;
+  if (smallest === null) return null;
+  const percent = Math.floor(smallest * 100);
+  return percent > 0 ? { labelSlug: longest.slug, percent } : null;
 }
 
 // src/ui/UsageMeters.tsx
@@ -2886,16 +1746,16 @@ function UsageMeters({
   appearance,
   className
 }) {
-  const { entitlements, isLoading, error } = _chunkN6VPGJ36cjs.useEntitlements.call(void 0, );
-  const { subscription } = _chunkN6VPGJ36cjs.useSubscription.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const { entitlements, isLoading, error } = _chunk3R66S7BYcjs.useEntitlements.call(void 0, );
+  const { subscription } = _chunk3R66S7BYcjs.useSubscription.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.usage.title));
   const nameFor = (key) => {
-    if (_optionalChain([labels, 'optionalAccess', _56 => _56[key]])) return labels[key];
-    const fromPlan = _optionalChain([subscription, 'optionalAccess', _57 => _57.entitlements, 'access', _58 => _58.find, 'call', _59 => _59((e) => e.feature_key === key), 'optionalAccess', _60 => _60.feature_name]);
+    if (_optionalChain([labels, 'optionalAccess', _66 => _66[key]])) return labels[key];
+    const fromPlan = _optionalChain([subscription, 'optionalAccess', _67 => _67.entitlements, 'access', _68 => _68.find, 'call', _69 => _69((e) => e.feature_key === key), 'optionalAccess', _70 => _70.feature_name]);
     return _nullishCoalesce(fromPlan, () => ( humanizeFeatureKey(key)));
   };
-  const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+  const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: [
     heading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-section-head", style: { marginBottom: 16 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-section-title", children: heading }) }) : null,
     children
   ] });
@@ -2908,7 +1768,7 @@ function UsageMeters({
     );
   }
   if (error || !entitlements) {
-    return shell(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.usage.loadFailed }));
+    return shell(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: l10n.usage.loadFailed }));
   }
   const metered = entitlements.entitlements.filter((e) => {
     if (e.feature_type !== "QUOTA") return false;
@@ -2927,19 +1787,19 @@ function UsageMeters({
     return shell(_nullishCoalesce(emptyState, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: l10n.usage.nothingMetered }))));
   }
   return shell(
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-meters", children: rows.map((e) => {
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-meters", children: rows.map((e, index) => {
       const unlimited = e.limit === null || e.limit === void 0;
       const softOverage = isSoftOverage(e.overage_behavior);
       const billed = e.overage_behavior === "BILL";
       const ratio = unlimited ? 0 : quotaRatio(e.used, e.limit);
       const level = unlimited ? "normal" : levelFor(ratio, softOverage);
       const over = !unlimited && e.used > e.limit;
-      const standing = billed ? _optionalChain([subscription, 'optionalAccess', _61 => _61.entitlements, 'access', _62 => _62.find, 'call', _63 => _63((se) => se.feature_key === e.feature_key)]) : void 0;
-      const capReached = billed && (_nullishCoalesce(_optionalChain([standing, 'optionalAccess', _64 => _64.cap_reached]), () => ( false)));
+      const standing = billed ? _optionalChain([subscription, 'optionalAccess', _71 => _71.entitlements, 'access', _72 => _72.find, 'call', _73 => _73((se) => se.feature_key === e.feature_key)]) : void 0;
+      const capReached = billed && (_nullishCoalesce(_optionalChain([standing, 'optionalAccess', _74 => _74.cap_reached]), () => ( false)));
       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 ? _chunkN6VPGJ36cjs.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 ? _chunk3R66S7BYcjs.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",
@@ -2950,18 +1810,24 @@ function UsageMeters({
             "aria-valuemin": 0,
             "aria-valuemax": e.limit,
             "aria-label": nameFor(e.feature_key),
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-meter-fill", style: { width: `${ratio * 100}%` } })
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "div",
+              {
+                className: "kerne-meter-fill",
+                style: { width: `${ratio * 100}%`, animationDelay: `${Math.min(index * 40, 200)}ms` }
+              }
+            )
           }
         ) : null,
         over && softOverage ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: _chunkN6VPGJ36cjs.fill.call(void 0, 
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: _chunk3R66S7BYcjs.fill.call(void 0, 
             // capReached inverts overageBilled's meaning (billing stopped,
             // access didn't) - a variant string would say the opposite of
             // the truth for the one plan that just stopped costing money.
             capReached ? l10n.usage.capReached : billed ? l10n.usage.overageBilled : l10n.usage.overage,
             { count: formatNumber(e.used - e.limit) }
           ) }),
-          billed && _optionalChain([standing, 'optionalAccess', _65 => _65.billed_amount]) != null && standing.currency ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note kerne-meter-cost", children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.usage.billedAmount, {
+          billed && _optionalChain([standing, 'optionalAccess', _75 => _75.billed_amount]) != null && standing.currency ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note kerne-meter-cost", children: _chunk3R66S7BYcjs.fill.call(void 0, l10n.usage.billedAmount, {
             amount: formatMoney(standing.billed_amount, standing.currency)
           }) }) : null
         ] }) : over ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-meter-note", children: l10n.usage.limitReached }) : null
@@ -2984,7 +1850,6 @@ var STATUS_TONES = {
 function SubscriptionCard({
   productSlug,
   title,
-  portalReturnUrl,
   upgradeUrl,
   onUpgradeClick,
   hidePortalButton = false,
@@ -2992,11 +1857,11 @@ function SubscriptionCard({
   appearance,
   className
 }) {
-  const { subscription, isLoading, error, refetch } = _chunkN6VPGJ36cjs.useSubscription.call(void 0, productSlug);
-  const { openPortal } = _chunkN6VPGJ36cjs.usePortal.call(void 0, );
-  const { cancelSubscription, isCanceling } = _chunkN6VPGJ36cjs.useCancelSubscription.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const { subscription, isLoading, error, refetch } = _chunk3R66S7BYcjs.useSubscription.call(void 0, productSlug);
+  const { openPortal } = _chunk3R66S7BYcjs.usePortal.call(void 0, );
+  const { cancelSubscription, isCanceling } = _chunk3R66S7BYcjs.useCancelSubscription.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.useErrorResolver.call(void 0, );
   const heading = title === null ? null : _nullishCoalesce(title, () => ( l10n.billing.plan));
   const statusLabels = {
     ACTIVE: l10n.billing.statusActive,
@@ -3014,7 +1879,7 @@ function SubscriptionCard({
     setPortalError(null);
     setOpening(true);
     try {
-      await openPortal(portalReturnUrl);
+      await openPortal();
     } catch (e) {
       setPortalError(showError(e));
       setOpening(false);
@@ -3031,7 +1896,7 @@ function SubscriptionCard({
       setCancelError(showError(e));
     }
   };
-  const shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
+  const shell = (children) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-stack", children: [
     heading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-section-title", children: heading }) : null,
     children
   ] }) });
@@ -3044,14 +1909,14 @@ function SubscriptionCard({
     );
   }
   if (error) {
-    return shell(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.billing.loadFailed }));
+    return shell(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: l10n.billing.loadFailed }));
   }
   if (!subscription) {
     return shell(
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.freePlan }),
         upgradeUrl || onUpgradeClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
+          _chunk3R66S7BYcjs.Button,
           {
             type: "button",
             onClick: _nullishCoalesce(onUpgradeClick, () => ( (() => {
@@ -3068,7 +1933,7 @@ function SubscriptionCard({
   const trialEnds = formatDate(trial_end);
   return shell(
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      portalError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: portalError }) : null,
+      portalError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: portalError }) : null,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "dl", { className: "kerne-rows", children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dt", { children: l10n.billing.plan }),
@@ -3093,274 +1958,209 @@ function SubscriptionCard({
         ] }) : renews ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-row", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dt", { children: canceled_at ? l10n.billing.ends : l10n.billing.renews }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "dd", { children: renews })
-        ] }) : null
-      ] }),
-      canceled_at ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { children: l10n.billing.cancelNotice }) : null,
-      cancelError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: cancelError }) : null,
-      confirmingCancel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Panel, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: l10n.billing.cancelConfirmTitle }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.cancelConfirmBody }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            Button,
-            {
-              variant: "outline",
-              type: "button",
-              onClick: () => setConfirmingCancel(false),
-              disabled: isCanceling,
-              children: l10n.billing.cancelConfirmDismiss
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: handleCancel, loading: isCanceling, children: isCanceling ? l10n.billing.canceling : l10n.billing.cancelConfirmButton })
-        ] })
-      ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
-        !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,
-        !hideCancelButton && !canceled_at && status !== "CANCELED" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: () => setConfirmingCancel(true), children: l10n.billing.cancelSubscription }) : null
-      ] })
-    ] })
-  );
-}
-
-// src/ui/profile/BillingSection.tsx
-
-function intervalsOf(plans) {
-  const seen = [];
-  for (const plan of plans) {
-    for (const price of plan.prices) {
-      if (!seen.includes(price.interval)) seen.push(price.interval);
-    }
-  }
-  return seen;
-}
-function BillingSection({
-  productSlug,
-  pricingProductIdOrSlug,
-  portalReturnUrl,
-  checkoutSuccessUrl,
-  checkoutCancelUrl,
-  showPlanSwitcher = true,
-  showUsage = true,
-  usageFeatureKeys,
-  usageLabels
-}) {
-  const { subscription, refetch: refetchSubscription } = _chunkN6VPGJ36cjs.useSubscription.call(void 0, productSlug);
-  const { plans, isLoading: plansLoading } = _chunkN6VPGJ36cjs.usePlans.call(void 0, pricingProductIdOrSlug);
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
-  const {
-    pending: pendingPlan,
-    switching,
-    switchError,
-    checkoutPriceId: busy,
-    checkoutError,
-    selectPlan,
-    confirmSwitch,
-    dismissSwitch
-  } = _chunkN6VPGJ36cjs.usePlanSwitch.call(void 0, subscription, refetchSubscription, {
-    successUrl: checkoutSuccessUrl,
-    cancelUrl: checkoutCancelUrl
-  });
-  const error = _nullishCoalesce(checkoutError, () => ( switchError));
-  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', _66 => _66.plan_price, 'access', _67 => _67.interval]))), () => ( intervals[0])), () => ( null));
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(error) }) : null,
-    pendingPlan ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Panel, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.billing.switchConfirmTitle, { plan: pendingPlan.plan.name }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.switchConfirmBody }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: dismissSwitch, disabled: switching, children: l10n.billing.switchConfirmDismiss }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
-      ] })
-    ] }) : null,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Subsection, { title: l10n.billing.currentPlan, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      SubscriptionCard,
-      {
-        title: null,
-        productSlug,
-        portalReturnUrl
-      }
-    ) }),
-    showUsage ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Subsection, { title: l10n.usage.title, description: l10n.usage.subtitle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UsageMeters, { title: null, featureKeys: usageFeatureKeys, labels: usageLabels }) }) : null,
-    showPlanSwitcher ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Subsection, { title: l10n.billing.changePlan, children: plansLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        className: "kerne-skeleton",
-        style: { height: 64 },
-        "aria-label": l10n.billing.loadingPlans
-      }
-    ) : plans.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.noPlans }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      intervals.length > 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        "div",
-        {
-          className: "kerne-segmented",
-          role: "group",
-          "aria-label": l10n.billing.intervalGroupLabel,
-          children: intervals.map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "button",
-            {
-              type: "button",
-              className: "kerne-segment",
-              "aria-pressed": i === activeInterval,
-              onClick: () => setInterval(i),
-              children: formatInterval(i, l10n.billing)
-            },
-            i
-          ))
-        }
-      ) : 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', _68 => _68.plan, 'access', _69 => _69.slug]) === plan.slug;
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "div",
-          {
-            className: "kerne-plan-option",
-            "data-current": isCurrent ? "true" : void 0,
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-plan-option-text", children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "kerne-plan-option-name", children: [
-                  plan.name,
-                  isCurrent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-badge", children: l10n.billing.current }) : null
-                ] }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-plan-option-price", children: price ? `${formatMoney(price.amount, price.currency)} / ${formatInterval(price.interval, l10n.billing)}` : l10n.billing.notOnInterval })
-              ] }),
-              !isCurrent && price ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                Button,
-                {
-                  variant: "outline",
-                  type: "button",
-                  onClick: () => selectPlan(plan, price),
-                  loading: busy === price.id,
-                  disabled: busy !== null,
-                  children: busy === price.id ? l10n.billing.opening : l10n.billing.switchTo
-                }
-              ) : null
-            ]
-          },
-          plan.id
-        );
-      }) })
-    ] }) }) : null
-  ] });
+        ] }) : null
+      ] }),
+      canceled_at ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { children: l10n.billing.cancelNotice }) : null,
+      cancelError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: cancelError }) : null,
+      confirmingCancel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Panel, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: l10n.billing.cancelConfirmTitle }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.cancelConfirmBody }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk3R66S7BYcjs.Button,
+            {
+              variant: "outline",
+              type: "button",
+              onClick: () => setConfirmingCancel(false),
+              disabled: isCanceling,
+              children: l10n.billing.cancelConfirmDismiss
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { type: "button", onClick: handleCancel, loading: isCanceling, children: isCanceling ? l10n.billing.canceling : l10n.billing.cancelConfirmButton })
+        ] })
+      ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
+        !hidePortalButton ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { variant: "outline", type: "button", onClick: handlePortal, loading: opening, children: opening ? l10n.billing.opening : l10n.billing.managePortal }) : null,
+        !hideCancelButton && !canceled_at && status !== "CANCELED" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { variant: "outline", type: "button", onClick: () => setConfirmingCancel(true), children: l10n.billing.cancelSubscription }) : null
+      ] })
+    ] })
+  );
 }
 
-// src/ui/UserProfile.tsx
+// src/ui/PricingTable.tsx
 
-function UserProfile({
-  tabs = ["profile", "security", "billing"],
-  extraTabs = [],
-  defaultTab,
-  activeTab: controlledTab,
-  onTabChange,
-  showDeleteAccount = true,
-  onSaved,
-  onDeleted,
-  productSlug,
-  pricingProductIdOrSlug,
-  portalReturnUrl,
-  checkoutSuccessUrl,
-  checkoutCancelUrl,
-  showPlanSwitcher = true,
-  showUsage = true,
-  usageFeatureKeys,
-  usageLabels,
-  verificationCallbackUrl,
-  appearance,
-  className
+
+// src/ui/rate.ts
+function transformQuantity(rate, units) {
+  const { block_size: size, mode, round } = rate.transform;
+  if (size <= 1) return Math.max(0, units);
+  const blocks = Math.max(0, units) / size;
+  if (mode === "proportional") return blocks;
+  return round === "down" ? Math.floor(blocks) : Math.ceil(blocks);
+}
+function cost(rate, units) {
+  const quantity = transformQuantity(rate, units);
+  if (quantity <= 0) return 0;
+  const { selection } = rate;
+  if (selection.kind === "flat") return Math.round(quantity * (_nullishCoalesce(selection.unit_amount, () => ( 0))));
+  const tiers = _nullishCoalesce(selection.tiers, () => ( []));
+  if (tiers.length === 0) return 0;
+  if (selection.kind === "volume") {
+    const reached = _nullishCoalesce(tiers.find((t) => t.up_to === null || quantity <= t.up_to), () => ( tiers[tiers.length - 1]));
+    return Math.round(quantity * reached.unit_amount);
+  }
+  let remaining = quantity;
+  let previousBound = 0;
+  let total = 0;
+  for (const tier of tiers) {
+    if (remaining <= 0) break;
+    const span = tier.up_to === null ? remaining : Math.max(0, tier.up_to - previousBound);
+    const taken = Math.min(remaining, span);
+    total += taken * tier.unit_amount;
+    remaining -= taken;
+    previousBound = _nullishCoalesce(tier.up_to, () => ( previousBound));
+  }
+  return Math.round(total);
+}
+function rateFloor(rate) {
+  const { selection } = rate;
+  if (selection.kind === "flat") return { amount: _nullishCoalesce(selection.unit_amount, () => ( 0)), declines: false };
+  const amounts = (_nullishCoalesce(selection.tiers, () => ( []))).map((t) => t.unit_amount);
+  if (amounts.length === 0) return { amount: 0, declines: false };
+  const low = Math.min(...amounts);
+  return { amount: low, declines: low < Math.max(...amounts) };
+}
+var GAMMA = 2.2;
+var TICKS = 1e3;
+var TICK_LINEAR = 24;
+var FLAT_REACH = 100;
+var MAX_REACH = 1e5;
+function trackTicks(max) {
+  return max > TICK_LINEAR ? TICKS : Math.max(1, max);
+}
+function ticksToSteps(tick, max) {
+  if (max <= TICK_LINEAR) return Math.min(max, Math.max(0, tick));
+  if (tick <= 0) return 0;
+  return Math.round(1 + (max - 1) * Math.pow((tick - 1) / (TICKS - 1), GAMMA));
+}
+function stepsToTicks(steps, max) {
+  if (max <= TICK_LINEAR) return Math.min(max, Math.max(0, steps));
+  if (steps <= 0) return 0;
+  return 1 + Math.round((TICKS - 1) * Math.pow((steps - 1) / (max - 1), 1 / GAMMA));
+}
+function sizingReach(rate) {
+  const bounded = (_nullishCoalesce(rate.selection.tiers, () => ( []))).filter((t) => t.up_to !== null);
+  const reach = bounded.length === 0 ? FLAT_REACH : bounded[bounded.length - 1].up_to * 2;
+  return Math.min(MAX_REACH, Math.max(10, Math.round(reach)));
+}
+
+// src/ui/PricingTable.tsx
+
+function compactLimit(value) {
+  const abs = Math.abs(value);
+  if (abs >= 1e6) return `${trimZero(value / 1e6)}M`;
+  if (abs >= 1e4) return `${trimZero(value / 1e3)}k`;
+  return formatNumber(value);
+}
+function trimZero(value) {
+  return String(Math.round(value * 10) / 10);
+}
+function entitlementRow(e, l10n, granted = 0) {
+  const label = e.feature_name;
+  if (e.feature_type === "BOOLEAN") {
+    return { label, value: e.value === "1" ? l10n.included : l10n.notIncluded };
+  }
+  if (e.feature_type === "STATIC") return { label, value: e.value || l10n.included };
+  if (e.limit === null) return { label, value: l10n.included };
+  if (e.limit === -1) return { label, value: perSlice(l10n.unlimited, e, l10n) };
+  const total = e.limit + granted;
+  if (total === 0 && e.overage === "BILL") return { label, value: "" };
+  return {
+    label,
+    value: perSlice(withUnit(total, compactLimit(total), e.unit_label), e, l10n)
+  };
+}
+function perSlice(amount, e, l10n) {
+  if (e.limit_binding !== "DIMENSION" || !e.dimension_key) return amount;
+  return _chunk3R66S7BYcjs.fill.call(void 0, l10n.perSlice, { amount, slice: e.dimension_key });
+}
+function withUnit(count, amount, unitLabel) {
+  if (!unitLabel) return amount;
+  const unit = count === 1 && unitLabel.endsWith("s") ? unitLabel.slice(0, -1) : unitLabel;
+  return `${amount} ${unit}`;
+}
+function rateLead(e, from) {
+  const rate = _optionalChain([e, 'access', _76 => _76.meter, 'optionalAccess', _77 => _77.pricing]);
+  if (!rate) return null;
+  const { amount, declines } = rateFloor(rate);
+  const size = rate.transform.block_size;
+  const per = _nullishCoalesce(rate.transform.block_label, () => ( (size === 1 ? _nullishCoalesce(e.unit_label, () => ( "unit")) : `${formatNumber(size)} ${_nullishCoalesce(e.unit_label, () => ( "units"))}`)));
+  return `${declines ? `${from} ` : ""}${formatMoney(amount, rate.currency)} / ${per}`;
+}
+function MeterNote({
+  entitlement,
+  lead,
+  interval,
+  children
 }) {
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const builtins = {
-    profile: {
-      label: l10n.profile.tabProfile,
-      title: l10n.profile.profileTitle,
-      description: l10n.profile.profileDesc
-    },
-    security: {
-      label: l10n.profile.tabSecurity,
-      title: l10n.profile.securityTitle,
-      description: l10n.profile.securityDesc
-    },
-    billing: {
-      label: l10n.profile.tabBilling,
-      title: l10n.profile.billingTitle,
-      description: l10n.profile.billingDesc
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const rate = _optionalChain([entitlement, 'access', _78 => _78.meter, 'optionalAccess', _79 => _79.pricing]);
+  const id = `kerne-meter-${entitlement.feature_key}`;
+  const countedPer = entitlement.limit_binding === "DIMENSION" && entitlement.dimension_key ? entitlement.dimension_key : l10n.pricing.meterPerCustomer;
+  const rows = [];
+  if (rate) {
+    const size = rate.transform.block_size;
+    const per = _nullishCoalesce(rate.transform.block_label, () => ( (size === 1 ? _nullishCoalesce(entitlement.unit_label, () => ( "unit")) : `${formatNumber(size)} ${_nullishCoalesce(entitlement.unit_label, () => ( "units"))}`)));
+    const tiers = _nullishCoalesce(rate.selection.tiers, () => ( []));
+    const first = _nullishCoalesce(_nullishCoalesce(rate.selection.unit_amount, () => ( _optionalChain([tiers, 'access', _80 => _80[0], 'optionalAccess', _81 => _81.unit_amount]))), () => ( 0));
+    rows.push({
+      key: _chunk3R66S7BYcjs.fill.call(void 0, l10n.pricing.meterRatePer, { thing: countedPer }),
+      value: `${formatMoney(first, rate.currency)} / ${per}`
+    });
+    if (tiers.length > 1) {
+      rows.push({
+        key: l10n.pricing.meterShape,
+        value: `${_chunk3R66S7BYcjs.fill.call(void 0, l10n.pricing.meterTiers, {
+          count: tiers.length,
+          amount: formatMoney(rateFloor(rate).amount, rate.currency)
+        })}, ${rate.selection.kind === "volume" ? l10n.pricing.meterVolume : l10n.pricing.meterGraduated}`
+      });
     }
-  };
-  const allTabs = [
-    ...tabs.map((id) => ({ id, ...builtins[id] })),
-    ...extraTabs.map((t) => ({
-      id: t.id,
-      label: t.label,
-      title: _nullishCoalesce(t.title, () => ( t.label)),
-      description: t.description
-    }))
-  ];
-  const [internalTab, setInternalTab] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(defaultTab, () => ( _optionalChain([allTabs, 'access', _70 => _70[0], 'optionalAccess', _71 => _71.id]))), () => ( "profile")));
-  const current = _nullishCoalesce(controlledTab, () => ( internalTab));
-  const select = (id) => {
-    if (controlledTab === void 0) setInternalTab(id);
-    _optionalChain([onTabChange, 'optionalCall', _72 => _72(id)]);
-  };
-  const active = _nullishCoalesce(allTabs.find((t) => t.id === current), () => ( allTabs[0]));
-  const renderPane = () => {
-    switch (_optionalChain([active, 'optionalAccess', _73 => _73.id])) {
-      case "profile":
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProfileSection, { verificationCallbackUrl, onSaved });
-      case "security":
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SecuritySection, { showDeleteAccount, onDeleted });
-      case "billing":
-        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          BillingSection,
-          {
-            productSlug,
-            pricingProductIdOrSlug,
-            portalReturnUrl,
-            checkoutSuccessUrl,
-            checkoutCancelUrl,
-            showPlanSwitcher,
-            showUsage,
-            usageFeatureKeys,
-            usageLabels
-          }
-        );
-      default:
-        return _nullishCoalesce(_optionalChain([extraTabs, 'access', _74 => _74.find, 'call', _75 => _75((t) => t.id === _optionalChain([active, 'optionalAccess', _76 => _76.id])), 'optionalAccess', _77 => _77.content]), () => ( null));
+    if (size > 1) {
+      rows.push({
+        key: l10n.pricing.meterCounted,
+        value: rate.transform.round === "down" ? l10n.pricing.meterRoundedDown : l10n.pricing.meterRoundedUp
+      });
     }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, size: "wide", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-profile", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "nav", { className: "kerne-nav", "aria-label": l10n.profile.navLabel, children: allTabs.map((tab) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  }
+  const resets = entitlement.reset_policy === "ACCUMULATE" ? l10n.pricing.meterResetsNever : entitlement.quota_period === "BILLING_CYCLE" ? interval ? _chunk3R66S7BYcjs.fill.call(void 0, l10n.pricing.meterResetsEvery, {
+    interval: formatInterval(interval, l10n.billing)
+  }) : l10n.pricing.meterResetsCycle : entitlement.quota_period ? entitlement.quota_period.toLowerCase() : null;
+  if (resets) rows.push({ key: l10n.pricing.meterResets, value: resets });
+  if (entitlement.overage_cap_amount != null && rate) {
+    rows.push({
+      key: l10n.pricing.meterCapped,
+      value: formatMoney(entitlement.overage_cap_amount, rate.currency)
+    });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "kerne-pricing-pop-host", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
         type: "button",
-        className: "kerne-nav-item",
-        "aria-current": tab.id === _optionalChain([active, 'optionalAccess', _78 => _78.id]) ? "page" : void 0,
-        onClick: () => select(tab.id),
-        children: tab.label
-      },
-      tab.id
-    )) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pane", children: [
-      active ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-pane-title", children: active.title }),
-        active.description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pane-desc", children: active.description }) : null
-      ] }) : null,
-      renderPane()
-    ] })
-  ] }) });
-}
-
-// src/ui/PricingTable.tsx
-
-
-function formatEntitlement(e, unlimitedLabel) {
-  if (e.feature_type === "BOOLEAN") return e.feature_name;
-  if (e.feature_type === "STATIC")
-    return e.value ? `${e.feature_name}: ${e.value}` : e.feature_name;
-  if (e.limit === null) return e.feature_name;
-  if (e.limit === -1) return `${unlimitedLabel} ${e.feature_name.toLowerCase()}`;
-  return `${formatNumber(e.limit)} ${e.feature_name.toLowerCase()}`;
+        className: "kerne-pricing-feature-note",
+        "data-lead": lead ? "true" : void 0,
+        "aria-describedby": id,
+        children
+      }
+    ),
+    rows.length > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "kerne-pricing-pop", id, role: "tooltip", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-pop-title", children: l10n.pricing.meterTitle }),
+      rows.map((row) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "kerne-pricing-pop-row", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-pop-key", children: row.key }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-pop-value", children: row.value })
+      ] }, row.key))
+    ] }) : null
+  ] });
 }
 var PricingTableContext = _react.createContext.call(void 0, null);
 function usePricingTable() {
@@ -3373,17 +2173,15 @@ function usePricingTable() {
 function PricingTable({
   product,
   defaultLabel,
-  checkoutSuccessUrl,
-  checkoutCancelUrl,
   onSelectPlan,
   appearance,
   className,
   children
 }) {
-  const { plans, isLoading, error } = _chunkN6VPGJ36cjs.usePlans.call(void 0, product);
-  const { subscription, refetch: refetchSubscription } = _chunkN6VPGJ36cjs.useSubscription.call(void 0, product);
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
-  const showError = _chunkN6VPGJ36cjs.useErrorResolver.call(void 0, );
+  const { plans, isLoading, error } = _chunk3R66S7BYcjs.usePlans.call(void 0, product);
+  const { subscription, refetch: refetchSubscription } = _chunk3R66S7BYcjs.useSubscription.call(void 0, product);
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const showError = _chunk3R66S7BYcjs.useErrorResolver.call(void 0, );
   const [selectedLabelSlug, setSelectedLabelSlug] = _react.useState.call(void 0, _nullishCoalesce(defaultLabel, () => ( null)));
   const {
     pending: pendingSwitch,
@@ -3394,10 +2192,7 @@ function PricingTable({
     selectPlan,
     confirmSwitch,
     dismissSwitch
-  } = _chunkN6VPGJ36cjs.usePlanSwitch.call(void 0, subscription, refetchSubscription, {
-    successUrl: checkoutSuccessUrl,
-    cancelUrl: checkoutCancelUrl
-  });
+  } = _chunk3R66S7BYcjs.usePlanSwitch.call(void 0, subscription, refetchSubscription);
   const labels = _react.useMemo.call(void 0, () => collectPriceLabels(plans), [plans]);
   const savings = _react.useMemo.call(void 0, () => resolveLabelSavings(plans, labels), [plans, labels]);
   _react.useEffect.call(void 0, () => {
@@ -3405,14 +2200,14 @@ function PricingTable({
     if (selectedLabelSlug && labels.some((l) => l.slug === selectedLabelSlug)) return;
     setSelectedLabelSlug(labels[0].slug);
   }, [labels]);
-  const handleSelectPlan = (plan) => {
-    const price = _nullishCoalesce(plan.prices.find((p) => p.label.slug === selectedLabelSlug), () => ( plan.prices[0]));
+  const handleSelectPlan = (plan, drivers) => {
+    const price = selectedLabelSlug ? plan.prices.find((p) => p.label.slug === selectedLabelSlug) : plan.prices[0];
     if (!price) return;
     if (onSelectPlan) {
-      onSelectPlan(plan, price);
+      onSelectPlan(plan, price, drivers);
       return;
     }
-    void selectPlan(plan, price);
+    void selectPlan(plan, price, drivers);
   };
   const ctx = {
     plans,
@@ -3420,19 +2215,33 @@ function PricingTable({
     selectedLabelSlug,
     setSelectedLabelSlug,
     savings,
-    currentPlanId: _nullishCoalesce(_optionalChain([subscription, 'optionalAccess', _79 => _79.plan, 'optionalAccess', _80 => _80.id]), () => ( null)),
+    currentPlanId: _nullishCoalesce(_optionalChain([subscription, 'optionalAccess', _82 => _82.plan, 'optionalAccess', _83 => _83.id]), () => ( null)),
+    currentPriceCurrency: _nullishCoalesce(_optionalChain([subscription, 'optionalAccess', _84 => _84.plan_price, 'access', _85 => _85.currency]), () => ( null)),
     busyPriceId,
     onSelectPlan: handleSelectPlan
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Shell, { appearance, className, size: "wide", children: isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-skeleton", "aria-busy": "true", "aria-label": l10n.pricing.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 320 } }) }) : error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: l10n.pricing.loadFailed }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PricingTableContext.Provider, { value: ctx, children: [
-    checkoutError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(checkoutError) }) : null,
-    pendingSwitch ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Panel, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.billing.switchConfirmTitle, { plan: pendingSwitch.plan.name }) }),
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, size: "wide", children: isLoading ? (
+    // The shape of what is coming, not one grey slab: a card-sized
+    // placeholder per column means the page does not jump when plans land.
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-grid", "aria-busy": "true", "aria-label": l10n.pricing.loading, children: [0, 1, 2].map((index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-card kerne-pricing-card-ghost", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 20, width: "45%" } }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 38, width: "60%" } }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 40 } }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-ghost-rows", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 12 } }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 12 } }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-skeleton", style: { height: 12, width: "70%" } })
+      ] })
+    ] }, index)) })
+  ) : error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: l10n.pricing.loadFailed }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PricingTableContext.Provider, { value: ctx, children: [
+    checkoutError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: showError(checkoutError) }) : null,
+    pendingSwitch ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.Panel, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: _chunk3R66S7BYcjs.fill.call(void 0, l10n.billing.switchConfirmTitle, { plan: pendingSwitch.plan.name }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.switchConfirmBody }),
-      switchError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Panel, { variant: "danger", children: showError(switchError) }) : null,
+      switchError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Panel, { variant: "danger", children: showError(switchError) }) : null,
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-inline-actions", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
+          _chunk3R66S7BYcjs.Button,
           {
             variant: "outline",
             type: "button",
@@ -3441,7 +2250,7 @@ function PricingTable({
             children: l10n.billing.switchConfirmDismiss
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { type: "button", onClick: confirmSwitch, loading: switching, children: switching ? l10n.billing.switching : l10n.billing.switchConfirmButton })
       ] })
     ] }) : null,
     children
@@ -3449,7 +2258,7 @@ function PricingTable({
 }
 function LabelSwitch() {
   const { labels, selectedLabelSlug, setSelectedLabelSlug, savings } = usePricingTable();
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
   const containerRef = _react.useRef.call(void 0, null);
   const buttonRefs = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
   const [thumb, setThumb] = _react.useState.call(void 0, null);
@@ -3496,7 +2305,7 @@ function LabelSwitch() {
             onClick: () => setSelectedLabelSlug(label.slug),
             children: [
               label.name,
-              savings && savings.labelSlug === label.slug ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-switch-save", children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.pricing.save, { percent: savings.percent }) }) : null
+              savings && savings.labelSlug === label.slug ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-switch-save", children: _chunk3R66S7BYcjs.fill.call(void 0, l10n.pricing.save, { percent: savings.percent }) }) : null
             ]
           },
           label.slug
@@ -3511,7 +2320,7 @@ function useAnimatedAmount(target, durationMs = 420) {
   const frameRef = _react.useRef.call(void 0, );
   _react.useEffect.call(void 0, () => {
     if (displayedRef.current === target) return;
-    const reduceMotion = typeof window !== "undefined" && _optionalChain([window, 'access', _81 => _81.matchMedia, 'optionalCall', _82 => _82("(prefers-reduced-motion: reduce)"), 'access', _83 => _83.matches]);
+    const reduceMotion = typeof window !== "undefined" && _optionalChain([window, 'access', _86 => _86.matchMedia, 'optionalCall', _87 => _87("(prefers-reduced-motion: reduce)"), 'access', _88 => _88.matches]);
     if (reduceMotion) {
       displayedRef.current = target;
       setDisplayed(target);
@@ -3535,8 +2344,15 @@ function useAnimatedAmount(target, durationMs = 420) {
   return displayed;
 }
 function Plan({ slug, featured, badge, maxFeatures }) {
-  const { plans, selectedLabelSlug, currentPlanId, busyPriceId, onSelectPlan } = usePricingTable();
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const {
+    plans,
+    selectedLabelSlug,
+    currentPlanId,
+    currentPriceCurrency,
+    busyPriceId,
+    onSelectPlan
+  } = usePricingTable();
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
   const plan = plans.find((p) => p.slug === slug);
   _react.useEffect.call(void 0, () => {
     if (!plan && process.env.NODE_ENV === "development") {
@@ -3545,15 +2361,32 @@ function Plan({ slug, featured, badge, maxFeatures }) {
       );
     }
   }, [plan, slug]);
-  const price = _nullishCoalesce(_optionalChain([plan, 'optionalAccess', _84 => _84.prices, 'access', _85 => _85.find, 'call', _86 => _86((p) => p.label.slug === selectedLabelSlug)]), () => ( _optionalChain([plan, 'optionalAccess', _87 => _87.prices, 'access', _88 => _88[0]])));
+  const price = selectedLabelSlug ? _optionalChain([plan, 'optionalAccess', _89 => _89.prices, 'access', _90 => _90.find, 'call', _91 => _91((p) => p.label.slug === selectedLabelSlug)]) : _optionalChain([plan, 'optionalAccess', _92 => _92.prices, 'access', _93 => _93[0]]);
   const resolved = price ? resolvePriceDisplay(price, price.label.display_interval) : null;
-  const animatedAmount = useAnimatedAmount(_nullishCoalesce(_optionalChain([resolved, 'optionalAccess', _89 => _89.displayAmount]), () => ( 0)));
+  const [sizing, setSizing] = _react.useState.call(void 0, {});
+  const sizable = price && plan ? plan.entitlements.map((e) => ({ e, driver: e.drivers.find((d) => d.interval === price.interval) })).filter(
+    (row) => Boolean(row.driver)
+  ) : [];
+  const granted = (featureKey) => {
+    const row = sizable.find((r) => r.e.feature_key === featureKey);
+    return row ? (_nullishCoalesce(sizing[featureKey], () => ( 0))) * row.driver.step_units : 0;
+  };
+  const restate = resolved && resolved.billedAmount > 0 ? resolved.displayAmount / resolved.billedAmount : 1;
+  const added = sizable.reduce(
+    (sum, { e, driver }) => sum + cost(driver.pricing, _nullishCoalesce(sizing[e.feature_key], () => ( 0))) * restate,
+    0
+  );
+  const animatedAmount = useAnimatedAmount((_nullishCoalesce(_optionalChain([resolved, 'optionalAccess', _94 => _94.displayAmount]), () => ( 0))) + added);
+  const selectedDrivers = () => sizable.filter(({ e }) => (_nullishCoalesce(sizing[e.feature_key], () => ( 0))) > 0).map(({ e }) => ({ feature_key: e.feature_key, steps: sizing[e.feature_key] }));
   if (!plan) return null;
   const isCurrent = plan.id === currentPlanId;
   const isBusy = !!price && busyPriceId === price.id;
+  const currencyMismatch = !!price && !!currentPriceCurrency && price.currency.toLowerCase() !== currentPriceCurrency.toLowerCase();
   const shownEntitlements = maxFeatures ? plan.entitlements.slice(0, maxFeatures) : plan.entitlements;
   const remaining = plan.entitlements.length - shownEntitlements.length;
-  const billedCaption = resolved && resolved.displayInterval !== resolved.billedInterval ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.pricing.billedAt, {
+  const isFree = !!resolved && resolved.billedAmount === 0 && added === 0;
+  const trialDays = _nullishCoalesce(_optionalChain([price, 'optionalAccess', _95 => _95.trial_days]), () => ( plan.trial_days));
+  const billedCaption = resolved && resolved.displayInterval !== resolved.billedInterval ? _chunk3R66S7BYcjs.fill.call(void 0, l10n.pricing.billedAt, {
     amount: formatMoney(resolved.billedAmount, price.currency),
     interval: formatInterval(resolved.billedInterval, l10n.billing)
   }) : null;
@@ -3565,59 +2398,120 @@ function Plan({ slug, featured, badge, maxFeatures }) {
       "data-current": isCurrent ? "true" : void 0,
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-card-head", children: [
-          badge ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-badge", children: badge }) : null,
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-card-name", children: plan.name }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-card-titles", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-card-name", children: plan.name }),
+            badge ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-badge", children: badge }) : null
+          ] }),
           plan.description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-card-desc", children: plan.description }) : null
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-price", children: resolved ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-price-row", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-amount", children: formatMoney(animatedAmount, price.currency) }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "kerne-pricing-interval", children: [
-              "/ ",
-              formatInterval(resolved.displayInterval, l10n.billing)
-            ] })
-          ] }),
-          billedCaption ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-billed", children: billedCaption }) : null
-        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-billed", children: l10n.billing.notOnInterval }) }),
-        shownEntitlements.length > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "ul", { className: "kerne-pricing-features", children: [
-          shownEntitlements.map((e) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "kerne-pricing-feature", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CheckIcon2, {}),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: formatEntitlement(e, l10n.pricing.unlimited) })
-          ] }, e.feature_key)),
-          remaining > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "kerne-pricing-feature-more", children: _chunkN6VPGJ36cjs.fill.call(void 0, l10n.pricing.moreFeatures, { count: remaining }) }) : null
-        ] }) : null,
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-cta", children: isCurrent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", disabled: true, children: l10n.billing.current }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Button,
-          {
-            variant: featured ? "primary" : "outline",
-            type: "button",
-            disabled: !price || busyPriceId !== null && !isBusy,
-            loading: isBusy,
-            onClick: () => onSelectPlan(plan),
-            children: currentPlanId ? l10n.billing.switchTo : l10n.pricing.getStarted
-          }
-        ) })
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-body", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-price", children: resolved ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-price-row", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-amount", children: isFree ? l10n.pricing.free : formatMoney(animatedAmount, price.currency) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-interval", children: isFree ? l10n.pricing.forever : `/ ${formatInterval(resolved.displayInterval, l10n.billing)}` })
+            ] }),
+            billedCaption && !isFree ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-billed", children: billedCaption }) : null
+          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-billed", children: l10n.billing.notOnInterval }) }),
+          sizable.length > 0 && !currentPlanId ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-sizer", children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-sizer-head", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-sizer-title", children: l10n.pricing.sizeUpFront }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-sizer-note", children: l10n.pricing.billedWithPlan })
+            ] }),
+            sizable.map(({ e, driver }) => {
+              const steps = _nullishCoalesce(sizing[e.feature_key], () => ( 0));
+              const max = Math.max(
+                1,
+                _nullishCoalesce(driver.max_steps, () => ( Math.max(sizingReach(driver.pricing), steps)))
+              );
+              const units = steps * driver.step_units;
+              const total = (_nullishCoalesce(e.limit, () => ( 0))) + units;
+              return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-sizer-row", children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-sizer-line", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-sizer-name", children: e.feature_name }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-sizer-value", children: withUnit(total, formatNumber(total), e.unit_label) })
+                ] }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "input",
+                  {
+                    className: "kerne-pricing-range",
+                    type: "range",
+                    min: 0,
+                    max: trackTicks(max),
+                    step: 1,
+                    value: stepsToTicks(steps, max),
+                    "aria-label": _chunk3R66S7BYcjs.fill.call(void 0, l10n.pricing.sizeUpFront, {}),
+                    onChange: (event) => setSizing((current) => ({
+                      ...current,
+                      [e.feature_key]: ticksToSteps(Number(event.target.value) || 0, max)
+                    })),
+                    style: {
+                      "--kerne-fill": `${Math.round(
+                        stepsToTicks(steps, max) / trackTicks(max) * 100
+                      )}%`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-sizer-line", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-sizer-foot", children: _chunk3R66S7BYcjs.fill.call(void 0, 
+                    steps === 0 ? l10n.pricing.includedAmount : l10n.pricing.prepaidAmount,
+                    {
+                      amount: withUnit(
+                        steps === 0 ? _nullishCoalesce(e.limit, () => ( 0)) : units,
+                        formatNumber(steps === 0 ? _nullishCoalesce(e.limit, () => ( 0)) : units),
+                        e.unit_label
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-sizer-foot", "data-strong": "true", children: steps === 0 ? l10n.pricing.included : `+${formatMoney(cost(driver.pricing, steps) * restate, price.currency)}` })
+                ] })
+              ] }, e.feature_key);
+            })
+          ] }) : null,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-cta", children: isCurrent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { variant: "outline", type: "button", disabled: true, children: l10n.billing.current }) : currencyMismatch ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-billed", children: l10n.billing.differentCurrency }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunk3R66S7BYcjs.Button,
+            {
+              variant: featured ? "primary" : "outline",
+              type: "button",
+              disabled: !price || busyPriceId !== null && !isBusy,
+              loading: isBusy,
+              onClick: () => onSelectPlan(plan, selectedDrivers()),
+              children: currentPlanId ? l10n.billing.switchTo : isFree ? l10n.pricing.startFree : l10n.pricing.getStarted
+            }
+          ) }),
+          trialDays > 0 && !isCurrent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-trial", children: _chunk3R66S7BYcjs.fill.call(void 0, l10n.pricing.trialNote, { days: trialDays }) }) : null
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "ul", { className: "kerne-pricing-features", children: [
+          shownEntitlements.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "kerne-pricing-feature-empty", children: l10n.pricing.nothingListed }) : shownEntitlements.map((e) => {
+            const row = entitlementRow(e, l10n.pricing, granted(e.feature_key));
+            const note = e.overage === "BILL" ? row.value === "" ? _nullishCoalesce(rateLead(e, l10n.pricing.from), () => ( l10n.pricing.metered)) : l10n.pricing.thenMetered : null;
+            return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "li", { className: "kerne-pricing-feature", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-feature-name", children: row.label }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "kerne-pricing-feature-side", children: [
+                row.value ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-feature-value", children: row.value }) : null,
+                note ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  MeterNote,
+                  {
+                    entitlement: e,
+                    lead: row.value === "",
+                    interval: _nullishCoalesce(_optionalChain([price, 'optionalAccess', _96 => _96.interval]), () => ( null)),
+                    children: note
+                  }
+                ) : null
+              ] })
+            ] }, e.feature_key);
+          }),
+          remaining > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: "kerne-pricing-feature-more", children: _chunk3R66S7BYcjs.fill.call(void 0, l10n.pricing.moreFeatures, { count: remaining }) }) : null
+        ] })
       ]
     }
   );
 }
-function CheckIcon2() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    "svg",
-    {
-      width: "15",
-      height: "15",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m5 13 4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round" })
-    }
-  );
-}
 function Plans({ featuredSlug, featuredBadge, maxFeatures }) {
   const { plans } = usePricingTable();
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  if (plans.length === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-subsection-desc", children: l10n.billing.noPlans });
+  }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-pricing-grid", children: plans.map((plan) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     Plan,
     {
@@ -3629,10 +2523,189 @@ function Plans({ featuredSlug, featuredBadge, maxFeatures }) {
     plan.id
   )) });
 }
+function Header({ eyebrow, headline, lede }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-pricing-header", children: [
+    eyebrow ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "kerne-pricing-eyebrow", children: eyebrow }) : null,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-pricing-headline", children: headline }),
+    lede ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pricing-lede", children: lede }) : null
+  ] });
+}
+PricingTable.Header = Header;
 PricingTable.LabelSwitch = LabelSwitch;
 PricingTable.Plan = Plan;
 PricingTable.Plans = Plans;
 
+// src/ui/profile/BillingSection.tsx
+
+function BillingSection({
+  productSlug,
+  pricingProductIdOrSlug,
+  showPlanSwitcher = true,
+  showUsage = true,
+  usageFeatureKeys,
+  usageLabels
+}) {
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Subsection, { title: l10n.billing.currentPlan, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubscriptionCard, { title: null, productSlug }) }),
+    showUsage ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Subsection, { title: l10n.usage.title, description: l10n.usage.subtitle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UsageMeters, { title: null, featureKeys: usageFeatureKeys, labels: usageLabels }) }) : null,
+    showPlanSwitcher ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Subsection, { title: l10n.billing.changePlan, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PricingTable, { product: pricingProductIdOrSlug, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PricingTable.LabelSwitch, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PricingTable.Plans, {})
+    ] }) }) : null
+  ] });
+}
+
+// src/ui/UserProfile.tsx
+
+function UserProfile({
+  tabs = ["profile", "security", "billing"],
+  extraTabs = [],
+  defaultTab,
+  activeTab: controlledTab,
+  onTabChange,
+  showDeleteAccount = true,
+  onSaved,
+  onDeleted,
+  productSlug,
+  pricingProductIdOrSlug,
+  showPlanSwitcher = true,
+  showUsage = true,
+  usageFeatureKeys,
+  usageLabels,
+  appearance,
+  className
+}) {
+  const l10n = _chunk3R66S7BYcjs.useLocalization.call(void 0, );
+  const builtins = {
+    profile: {
+      label: l10n.profile.tabProfile,
+      title: l10n.profile.profileTitle,
+      description: l10n.profile.profileDesc
+    },
+    security: {
+      label: l10n.profile.tabSecurity,
+      title: l10n.profile.securityTitle,
+      description: l10n.profile.securityDesc
+    },
+    billing: {
+      label: l10n.profile.tabBilling,
+      title: l10n.profile.billingTitle,
+      description: l10n.profile.billingDesc
+    }
+  };
+  const allTabs = [
+    ...tabs.map((id) => ({ id, ...builtins[id] })),
+    ...extraTabs.map((t) => ({
+      id: t.id,
+      label: t.label,
+      title: _nullishCoalesce(t.title, () => ( t.label)),
+      description: t.description
+    }))
+  ];
+  const [internalTab, setInternalTab] = _react.useState.call(void 0, _nullishCoalesce(_nullishCoalesce(defaultTab, () => ( _optionalChain([allTabs, 'access', _97 => _97[0], 'optionalAccess', _98 => _98.id]))), () => ( "profile")));
+  const current = _nullishCoalesce(controlledTab, () => ( internalTab));
+  const select = (id) => {
+    if (controlledTab === void 0) setInternalTab(id);
+    _optionalChain([onTabChange, 'optionalCall', _99 => _99(id)]);
+  };
+  const active = _nullishCoalesce(allTabs.find((t) => t.id === current), () => ( allTabs[0]));
+  const baseId = _react.useId.call(void 0, );
+  const tabId = (id) => `${baseId}-tab-${id}`;
+  const panelId = (id) => `${baseId}-panel-${id}`;
+  const tabRefs = _react.useRef.call(void 0, /* @__PURE__ */ new Map());
+  const onTabKeyDown = (e, index) => {
+    let nextIndex = null;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = (index + 1) % allTabs.length;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = (index - 1 + allTabs.length) % allTabs.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = allTabs.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    const next = allTabs[nextIndex];
+    if (!next) return;
+    select(next.id);
+    _optionalChain([tabRefs, 'access', _100 => _100.current, 'access', _101 => _101.get, 'call', _102 => _102(next.id), 'optionalAccess', _103 => _103.focus, 'call', _104 => _104()]);
+  };
+  const renderPane = () => {
+    switch (_optionalChain([active, 'optionalAccess', _105 => _105.id])) {
+      case "profile":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ProfileSection, { onSaved });
+      case "security":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SecuritySection, { showDeleteAccount, onDeleted });
+      case "billing":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          BillingSection,
+          {
+            productSlug,
+            pricingProductIdOrSlug,
+            showPlanSwitcher,
+            showUsage,
+            usageFeatureKeys,
+            usageLabels
+          }
+        );
+      default:
+        return _nullishCoalesce(_optionalChain([extraTabs, 'access', _106 => _106.find, 'call', _107 => _107((t) => t.id === _optionalChain([active, 'optionalAccess', _108 => _108.id])), 'optionalAccess', _109 => _109.content]), () => ( null));
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Shell, { appearance, className, size: "wide", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "kerne-profile", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "kerne-nav", role: "tablist", "aria-label": l10n.profile.navLabel, children: allTabs.map((tab, index) => {
+      const selected = tab.id === _optionalChain([active, 'optionalAccess', _110 => _110.id]);
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          ref: (el) => {
+            if (el) tabRefs.current.set(tab.id, el);
+            else tabRefs.current.delete(tab.id);
+          },
+          type: "button",
+          role: "tab",
+          id: tabId(tab.id),
+          className: "kerne-nav-item",
+          "aria-selected": selected,
+          "aria-controls": panelId(tab.id),
+          tabIndex: selected ? 0 : -1,
+          onClick: () => select(tab.id),
+          onKeyDown: (e) => onTabKeyDown(e, index),
+          children: tab.label
+        },
+        tab.id
+      );
+    }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: "kerne-pane",
+        role: "tabpanel",
+        id: active ? panelId(active.id) : void 0,
+        "aria-labelledby": active ? tabId(active.id) : void 0,
+        tabIndex: 0,
+        children: [
+          active ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-pane-title", children: active.title }),
+            active.description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-pane-desc", children: active.description }) : null
+          ] }) : null,
+          renderPane()
+        ]
+      }
+    )
+  ] }) });
+}
+
 // src/ui/CheckoutResult.tsx
 
 
@@ -3650,9 +2723,9 @@ function CheckoutResult({
   logo,
   className
 }) {
-  const client = _chunkN6VPGJ36cjs.useClient.call(void 0, );
-  const { config } = _chunkN6VPGJ36cjs.useAuthConfig.call(void 0, );
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const client = _chunk3R66S7BYcjs.useClient.call(void 0, );
+  const { config } = _chunk3R66S7BYcjs.useAuthConfig.call(void 0, );
+  const l10n = _chunk3R66S7BYcjs.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, () => {
@@ -3666,7 +2739,7 @@ function CheckoutResult({
         if (sub && !stopped) {
           confirmed.current = true;
           setState("confirmed");
-          _optionalChain([onConfirmed, 'optionalCall', _90 => _90(sub)]);
+          _optionalChain([onConfirmed, 'optionalCall', _111 => _111(sub)]);
           return;
         }
       } catch (e3) {
@@ -3686,20 +2759,20 @@ function CheckoutResult({
   const go = (url, handler) => _nullishCoalesce(handler, () => ( (() => {
     if (url) window.location.href = url;
   })));
-  const continueAction = continueUrl || onContinue ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { type: "button", onClick: go(continueUrl, onContinue), children: l10n.common.continue }) : void 0;
-  const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Shell, { appearance, className, children: [
+  const continueAction = continueUrl || onContinue ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { type: "button", onClick: go(continueUrl, onContinue), children: l10n.common.continue }) : void 0;
+  const shell = (children) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk3R66S7BYcjs.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', _91 => _91.show_kerne_branding]), () => ( false)) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.KerneBranding, { show: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _112 => _112.show_kerne_branding]), () => ( false)) })
   ] });
   if (outcome === "cancel") {
     return shell(
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        Status,
+        _chunk3R66S7BYcjs.Status,
         {
           tone: "danger",
           title: l10n.checkout.cancelTitle,
-          action: pricingUrl || onRetry ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "outline", type: "button", onClick: go(pricingUrl, onRetry), children: l10n.checkout.backToPlans }) : void 0,
+          action: pricingUrl || onRetry ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Button, { variant: "outline", type: "button", onClick: go(pricingUrl, onRetry), children: l10n.checkout.backToPlans }) : void 0,
           children: l10n.checkout.cancelBody
         }
       )
@@ -3707,16 +2780,16 @@ function CheckoutResult({
   }
   if (state === "checking") {
     return shell(
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "loading", title: l10n.checkout.confirmingTitle, children: l10n.checkout.confirmingBody })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "loading", title: l10n.checkout.confirmingTitle, children: l10n.checkout.confirmingBody })
     );
   }
   if (state === "pending") {
     return shell(
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "success", title: l10n.checkout.pendingTitle, action: continueAction, children: l10n.checkout.pendingBody })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "success", title: l10n.checkout.pendingTitle, action: continueAction, children: l10n.checkout.pendingBody })
     );
   }
   return shell(
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Status, { tone: "success", title: l10n.checkout.doneTitle, action: continueAction, children: l10n.checkout.doneBody })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.Status, { tone: "success", title: l10n.checkout.doneTitle, action: continueAction, children: l10n.checkout.doneBody })
   );
 }
 
@@ -3736,30 +2809,32 @@ function UpgradePrompt({
   appearance,
   className
 }) {
-  const { details, allowed, isLoading } = _chunkN6VPGJ36cjs.useAccess.call(void 0, featureKey, requested);
-  const l10n = _chunkN6VPGJ36cjs.useLocalization.call(void 0, );
+  const { details, allowed, isLoading } = _chunk3R66S7BYcjs.useAccess.call(void 0, featureKey, requested);
+  const l10n = _chunk3R66S7BYcjs.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 }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.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', _92 => _92.feature_type]) === "QUOTA" && typeof details.limit === "number" && typeof details.used === "number";
-  const heading = _nullishCoalesce(title, () => ( _chunkN6VPGJ36cjs.fill.call(void 0, quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name })));
-  const body = _nullishCoalesce(description, () => ( (quotaExhausted ? _chunkN6VPGJ36cjs.fill.call(void 0, l10n.upgrade.quotaBody, {
+  const name = _nullishCoalesce(featureName, () => ( lowercaseFeatureName(humanizeFeatureKey(featureKey))));
+  const quotaExhausted = _optionalChain([details, 'optionalAccess', _113 => _113.feature_type]) === "QUOTA" && typeof details.limit === "number" && typeof details.used === "number";
+  const heading = _nullishCoalesce(title, () => ( capitalize(
+    _chunk3R66S7BYcjs.fill.call(void 0, quotaExhausted ? l10n.upgrade.quotaTitle : l10n.upgrade.featureTitle, { feature: name })
+  )));
+  const body = _nullishCoalesce(description, () => ( (quotaExhausted ? _chunk3R66S7BYcjs.fill.call(void 0, l10n.upgrade.quotaBody, {
     used: formatNumber(details.used),
     // `access_limit` is where access actually stops; `limit` is only the
     // included allocation and can understate it past an overage ceiling.
     // Falls back to `limit` defensively - should never be needed here.
     limit: formatNumber(_nullishCoalesce(details.access_limit, () => ( details.limit)))
-  }) : _chunkN6VPGJ36cjs.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: [
+  }) : _chunk3R66S7BYcjs.fill.call(void 0, l10n.upgrade.featureBody, { feature: name }))));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3R66S7BYcjs.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 }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "kerne-section-title", children: heading }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "kerne-status-text", children: body })
     ] }),
     upgradeUrl || onUpgradeClick ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      Button,
+      _chunk3R66S7BYcjs.Button,
       {
         type: "button",
         onClick: _nullishCoalesce(onUpgradeClick, () => ( (() => {
@@ -3803,4 +2878,7 @@ 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.PricingTable = PricingTable; 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.collectPriceLabels = collectPriceLabels; exports.defaultLocalization = _chunkN6VPGJ36cjs.defaultLocalization; exports.formatDate = formatDate; exports.formatInterval = formatInterval; exports.formatMoney = formatMoney; exports.formatNumber = formatNumber; exports.humanizeFeatureKey = humanizeFeatureKey; exports.resolveLabelSavings = resolveLabelSavings; exports.resolvePriceDisplay = resolvePriceDisplay; exports.useLocalization = _chunkN6VPGJ36cjs.useLocalization; exports.usePricingTable = usePricingTable;
+
+
+
+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.PricingTable = PricingTable; 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.collectPriceLabels = collectPriceLabels; exports.defaultLocalization = _chunk3R66S7BYcjs.defaultLocalization; exports.defaultTokens = _chunk3R66S7BYcjs.defaultTokens; exports.formatDate = formatDate; exports.formatInterval = formatInterval; exports.formatMoney = formatMoney; exports.formatNumber = formatNumber; exports.fr = _chunk3R66S7BYcjs.fr; exports.humanizeFeatureKey = humanizeFeatureKey; exports.mergeLocalization = _chunk3R66S7BYcjs.mergeLocalization; exports.resolveLabelSavings = resolveLabelSavings; exports.resolvePriceDisplay = resolvePriceDisplay; exports.useLocalization = _chunk3R66S7BYcjs.useLocalization; exports.usePricingTable = usePricingTable;