@sckyzo/cosmos-react 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { forwardRef, createContext, Children, Fragment, cloneElement, isValidElement, useState, useRef, useCallback, useEffect, useId, useContext, useMemo } from 'react';
-import { ChevronRight, Check, Copy, BellOff, Bell, CheckCircle2, Info, AlertTriangle, XCircle, ChevronDown, Sun, Moon, MoonStar, ExternalLink, Search, EyeOff, Eye, Minus, Paperclip, Clock, X, ChevronLeft, Dot as Dot$1, ArrowRight, HelpCircle, Home, Inbox, AlertCircle, CheckCircle, RefreshCw, Loader2, Save, Megaphone, Cookie, ArrowUp, ChevronUp, Plus, Maximize2, RotateCcw, Camera, Trash2, Upload, File, ChevronsUpDown, Filter, Quote, Calendar as Calendar$1 } from 'lucide-react';
+import { ChevronRight, Check, Copy, BellOff, Bell, CheckCircle2, Info, AlertTriangle, XCircle, ChevronDown, Sun, Moon, MoonStar, ExternalLink, Search, EyeOff, Eye, Minus, Paperclip, Clock, X, ChevronLeft, Dot as Dot$1, ArrowRight, HelpCircle, Home, Inbox, AlertCircle, CheckCircle, RefreshCw, Loader2, Save, Megaphone, Cookie, ArrowUp, ChevronUp, Plus, Maximize2, RotateCcw, Camera, Trash2, Upload, File, ChevronsUpDown, Filter, MailCheck, ArrowLeft, Mail, User, ShieldCheck, Quote, Calendar as Calendar$1 } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import Autoplay from 'embla-carousel-autoplay';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -12,93 +12,6 @@ import { Command } from 'cmdk';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import 'react-day-picker/style.css';
 
-// src/storybook-avatars.ts
-var PALETTE = [
-  ["#6366f1", "#ffffff"],
-  // indigo
-  ["#8b5cf6", "#ffffff"],
-  // violet
-  ["#0ea5e9", "#ffffff"],
-  // sky
-  ["#10b981", "#ffffff"],
-  // emerald
-  ["#f59e0b", "#1f2937"],
-  // amber (dark text on warm bg)
-  ["#f43f5e", "#ffffff"],
-  // rose
-  ["#14b8a6", "#ffffff"],
-  // teal
-  ["#ec4899", "#ffffff"],
-  // pink
-  ["#64748b", "#ffffff"],
-  // slate
-  ["#a855f7", "#ffffff"]
-  // purple
-];
-var hashSeed = (seed) => {
-  let h = 5381;
-  for (let i = 0; i < seed.length; i += 1) {
-    h = (h << 5) + h + seed.charCodeAt(i) | 0;
-  }
-  return Math.abs(h);
-};
-var extractInitials = (seed) => {
-  const cleaned = seed.replace(/[^\p{L}\p{N}\s'.-]/gu, " ").trim();
-  if (!cleaned) return "?";
-  const parts = cleaned.split(/[\s.'-]+/).filter(Boolean);
-  if (parts.length >= 2) {
-    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-  }
-  return cleaned.slice(0, 2).toUpperCase();
-};
-var buildSvg = (initials, bg, fg, size) => {
-  const fontSize = initials.length === 1 ? 56 : 42;
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 100 100"><rect width="100" height="100" fill="${bg}"/><text x="50" y="50" font-family="ui-sans-serif,system-ui,sans-serif" font-size="${fontSize}" font-weight="600" fill="${fg}" text-anchor="middle" dominant-baseline="central">${initials}</text></svg>`;
-};
-var placeholderAvatar = (seed, size = 64, opts = {}) => {
-  const initials = extractInitials(seed);
-  const [defaultBg, defaultFg] = PALETTE[hashSeed(seed) % PALETTE.length];
-  const bg = opts.bg ?? defaultBg;
-  const fg = opts.fg ?? defaultFg;
-  const svg = buildSvg(initials, bg, fg, size);
-  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-};
-var buildCoverSvg = (seed, from, to, width, height) => {
-  const h = hashSeed(seed);
-  const angle = h % 180;
-  const cx1 = h % 60 + 20;
-  const cy1 = (h >> 3) % 60 + 20;
-  const r1 = (h >> 5) % 35 + 25;
-  const cx2 = (h >> 7) % 60 + 20;
-  const cy2 = (h >> 9) % 60 + 20;
-  const r2 = (h >> 11) % 25 + 15;
-  const gradientId = `g-${(h % 1e5).toString(36)}`;
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><linearGradient id="${gradientId}" gradientTransform="rotate(${angle})"><stop offset="0" stop-color="${from}"/><stop offset="1" stop-color="${to}"/></linearGradient></defs><rect width="100" height="100" fill="url(#${gradientId})"/><circle cx="${cx1}" cy="${cy1}" r="${r1}" fill="rgba(255,255,255,0.08)"/><circle cx="${cx2}" cy="${cy2}" r="${r2}" fill="rgba(0,0,0,0.10)"/></svg>`;
-};
-var placeholderCover = (seed, width = 1600, height = 700, opts = {}) => {
-  const h = hashSeed(seed);
-  const [from] = PALETTE[h % PALETTE.length];
-  const [to] = PALETTE[(h + 3) % PALETTE.length];
-  const svg = buildCoverSvg(seed, opts.from ?? from, opts.to ?? to, width, height);
-  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
-};
-
-// src/storybook-helpers.ts
-var buildParams = (height) => ({
-  layout: "fullscreen",
-  docs: {
-    story: {
-      inline: false,
-      iframeHeight: `${height}px`
-    }
-  }
-});
-var fn = ((height = 480) => buildParams(height));
-fn.sm = () => buildParams(320);
-fn.md = () => buildParams(480);
-fn.lg = () => buildParams(640);
-fn.full = () => buildParams(800);
-var portalDocsParams = fn;
 var Root = ({
   inset,
   align = "center",
@@ -2068,6 +1981,8 @@ var Dropdown = ({
 }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -2076,15 +1991,47 @@ var Dropdown = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const first = menuRef.current?.querySelector('[role="menuitem"]:not(:disabled)');
+    first?.focus();
+  }, [open]);
+  const closeAndRefocus = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const onMenuKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeAndRefocus();
+      return;
+    }
+    const items = Array.from(
+      menuRef.current?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? []
+    );
+    if (items.length === 0) return;
+    const currentIndex = items.indexOf(document.activeElement);
+    const focusAt = (i) => {
+      e.preventDefault();
+      items[(i + items.length) % items.length]?.focus();
+    };
+    if (e.key === "ArrowDown") focusAt(currentIndex + 1);
+    else if (e.key === "ArrowUp") focusAt(currentIndex - 1);
+    else if (e.key === "Home") focusAt(0);
+    else if (e.key === "End") focusAt(items.length - 1);
+  };
   const selected = options.find((o) => !isDivider(o) && o.value === value);
   const displayLabel = selected?.label ?? placeholder ?? label ?? "Select\u2026";
   return /* @__PURE__ */ jsxs("div", { ref, className: clsx("relative inline-block", className), children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: () => !disabled && setOpen((v) => !v),
         disabled,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
         className: clsx(
           "flex h-9 items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700",
           open && "ring-brand-500/30 ring-2"
@@ -2109,6 +2056,10 @@ var Dropdown = ({
       /* @__PURE__ */ jsx(
         "div",
         {
+          ref: menuRef,
+          role: "menu",
+          "aria-label": label,
+          onKeyDown: onMenuKeyDown,
           className: clsx(
             "absolute top-full z-50 mt-1 min-w-[180px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800",
             align === "right" ? "right-0" : "left-0"
@@ -2130,10 +2081,11 @@ var Dropdown = ({
               "button",
               {
                 type: "button",
+                role: "menuitem",
                 disabled: opt.disabled,
                 onClick: () => {
                   onChange?.(opt.value);
-                  setOpen(false);
+                  closeAndRefocus();
                 },
                 className: clsx(
                   "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
@@ -2153,6 +2105,51 @@ var Dropdown = ({
     ] })
   ] });
 };
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function useFocusTrap(active) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!active) return;
+    const node = ref.current;
+    if (!node) return;
+    const previouslyFocused = document.activeElement;
+    const focusables = () => Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR));
+    (focusables()[0] ?? node).focus();
+    const onKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const items = focusables();
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    node.addEventListener("keydown", onKeyDown);
+    return () => {
+      node.removeEventListener("keydown", onKeyDown);
+      previouslyFocused?.focus?.();
+    };
+  }, [active]);
+  return ref;
+}
+var DialogTitleContext = createContext(void 0);
+var DialogTitleProvider = DialogTitleContext.Provider;
+var useDialogTitleId = () => useContext(DialogTitleContext);
 var SIZE_CLASS5 = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -2160,7 +2157,9 @@ var SIZE_CLASS5 = {
   xl: "max-w-2xl",
   full: "h-full w-full max-w-none rounded-none"
 };
-var Root8 = ({ open, onClose, size = "md", className, children }) => {
+var Root8 = ({ open, onClose, size = "md", className, ariaLabel, children }) => {
+  const titleId = useId();
+  const trapRef = useFocusTrap(open);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -2175,12 +2174,16 @@ var Root8 = ({ open, onClose, size = "md", className, children }) => {
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: trapRef,
+        tabIndex: -1,
         className: clsx(
           "fixed inset-0 z-50 flex",
           isFull ? "items-stretch justify-stretch" : "items-center justify-center p-4"
         ),
         role: "dialog",
         "aria-modal": "true",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabel ? void 0 : titleId,
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -2199,7 +2202,7 @@ var Root8 = ({ open, onClose, size = "md", className, children }) => {
                 SIZE_CLASS5[size],
                 className
               ),
-              children
+              children: /* @__PURE__ */ jsx(DialogTitleProvider, { value: titleId, children })
             }
           )
         ]
@@ -2208,32 +2211,35 @@ var Root8 = ({ open, onClose, size = "md", className, children }) => {
     document.body
   );
 };
-var Header2 = ({ title, description, onClose, className, children }) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: clsx(
-      "flex items-start justify-between gap-4 border-b border-gray-200 px-5 py-4 dark:border-gray-800",
-      className
-    ),
-    children: [
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        title && /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description }),
-        children
-      ] }),
-      onClose && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          "aria-label": "Close modal",
-          className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/5 dark:hover:text-gray-300",
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      )
-    ]
-  }
-);
+var Header2 = ({ title, description, onClose, className, children }) => {
+  const titleId = useDialogTitleId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex items-start justify-between gap-4 border-b border-gray-200 px-5 py-4 dark:border-gray-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description }),
+          children
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            "aria-label": "Close modal",
+            className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/5 dark:hover:text-gray-300",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+};
 var Body3 = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: clsx("px-5 py-4", className), children });
 var Footer3 = ({ children, className }) => /* @__PURE__ */ jsx(
   "div",
@@ -2282,7 +2288,7 @@ var Alert = ({
   const handleConfirm = () => onConfirm ? onConfirm() : onClose();
   const handleCancel = () => onCancel ? onCancel() : onClose();
   if (layout === "horizontal") {
-    return /* @__PURE__ */ jsxs(Root8, { open, onClose, size: "lg", children: [
+    return /* @__PURE__ */ jsxs(Root8, { open, onClose, size: "lg", ariaLabel: title, children: [
       /* @__PURE__ */ jsxs("div", { className: "bg-white sm:flex sm:items-start sm:p-6 dark:bg-gray-900", children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -2314,7 +2320,7 @@ var Alert = ({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx(Root8, { open, onClose, size: "sm", children: /* @__PURE__ */ jsxs("div", { className: "p-6 text-center", children: [
+  return /* @__PURE__ */ jsx(Root8, { open, onClose, size: "sm", ariaLabel: title, children: /* @__PURE__ */ jsxs("div", { className: "p-6 text-center", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -2392,9 +2398,12 @@ var Root9 = ({
   size = "md",
   withBackdrop = true,
   closeOutside = false,
+  ariaLabel,
   className,
   children
 }) => {
+  const titleId = useId();
+  const trapRef = useFocusTrap(open);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -2434,6 +2443,8 @@ var Root9 = ({
       /* @__PURE__ */ jsx(
         "aside",
         {
+          ref: trapRef,
+          tabIndex: -1,
           className: clsx(
             "fixed top-0 bottom-0 z-50 flex flex-col border-gray-200 bg-white shadow-2xl transition-transform duration-300 ease-in-out dark:border-gray-800 dark:bg-gray-900",
             SIDE_CLASS[side],
@@ -2443,7 +2454,9 @@ var Root9 = ({
           ),
           role: "dialog",
           "aria-modal": "true",
-          children
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabel ? void 0 : titleId,
+          children: /* @__PURE__ */ jsx(DialogTitleProvider, { value: titleId, children })
         }
       )
     ] }),
@@ -2457,37 +2470,47 @@ var Header3 = ({
   onClose,
   className,
   children
-}) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: clsx(
-      "flex shrink-0 items-center justify-between border-b border-gray-200 p-5 dark:border-gray-800",
-      className
-    ),
-    children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-        Icon2 && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx("h3", { className: "truncate text-base font-semibold text-gray-900 dark:text-white", children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm text-gray-500 dark:text-gray-400", children: description })
+}) => {
+  const titleId = useDialogTitleId();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex shrink-0 items-center justify-between border-b border-gray-200 p-5 dark:border-gray-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+          Icon2 && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-800", children: /* @__PURE__ */ jsx(Icon2, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                id: titleId,
+                className: "truncate text-base font-semibold text-gray-900 dark:text-white",
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate text-sm text-gray-500 dark:text-gray-400", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          children,
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close drawer",
+              className: "text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300",
+              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+            }
+          )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        children,
-        onClose && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onClose,
-            "aria-label": "Close drawer",
-            className: "text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300",
-            children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
-          }
-        )
-      ] })
-    ]
-  }
-);
+      ]
+    }
+  );
+};
 var Body4 = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: clsx("flex-1 overflow-y-auto p-5", className), children });
 var Footer4 = ({ children, className }) => /* @__PURE__ */ jsx(
   "div",
@@ -3072,6 +3095,8 @@ var ConfirmationModal = ({
   saveLabel = "Save & go",
   hideSave = false
 }) => {
+  const titleId = useId();
+  const trapRef = useFocusTrap(open);
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -3085,24 +3110,19 @@ var ConfirmationModal = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: trapRef,
+        tabIndex: -1,
         className: "fixed inset-0 z-50 flex items-center justify-center p-4",
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": "cosmos-confirmation-title",
+        "aria-labelledby": titleId,
         children: [
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onStay, "aria-hidden": true }),
           /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-md overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-6", children: [
               /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-500/10", children: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-5 w-5 text-amber-500" }) }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx(
-                  "h3",
-                  {
-                    id: "cosmos-confirmation-title",
-                    className: "font-semibold text-gray-900 dark:text-white",
-                    children: title
-                  }
-                ),
+                /* @__PURE__ */ jsx("h3", { id: titleId, className: "font-semibold text-gray-900 dark:text-white", children: title }),
                 /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: message })
               ] }),
               /* @__PURE__ */ jsx(
@@ -8111,6 +8131,34 @@ var DataTable = ({
     }
   );
 };
+var AuthLayout = ({
+  logo: Logo,
+  title,
+  subtitle,
+  brand,
+  children,
+  className
+}) => {
+  const showBuiltInBrand = brand === void 0 && (Logo || title || subtitle);
+  const renderBrand = brand !== void 0 ? brand : showBuiltInBrand ? /* @__PURE__ */ jsxs("div", { className: "mb-8 flex flex-col items-center gap-2 text-center", children: [
+    Logo && /* @__PURE__ */ jsx("div", { className: "bg-brand-500 flex h-12 w-12 items-center justify-center rounded-xl text-white", children: /* @__PURE__ */ jsx(Logo, { className: "h-6 w-6" }) }),
+    title && /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-gray-900 dark:text-white", children: title }),
+    subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: subtitle })
+  ] }) : null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "flex min-h-screen items-center justify-center bg-gray-50 p-4 dark:bg-gray-950",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-gray-200 bg-white p-8 shadow-sm dark:border-gray-800 dark:bg-gray-900", children: [
+        renderBrand,
+        children
+      ] }) })
+    }
+  );
+};
 var ErrorPage = ({
   code,
   title,
@@ -8134,6 +8182,462 @@ var ErrorPage = ({
     ]
   }
 );
+var STATUS_LABEL2 = {
+  connected: "Connected",
+  available: "Available",
+  error: "Error",
+  pending: "Pending"
+};
+var STATUS_VARIANT = {
+  connected: "success",
+  available: "neutral",
+  error: "danger",
+  pending: "warning"
+};
+var IntegrationCard = ({
+  logo,
+  name,
+  description,
+  status,
+  category,
+  actionLabel,
+  actionVariant = "primary",
+  onAction,
+  secondaryLabel,
+  onSecondary,
+  loading = false,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: clsx(
+      "flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-5 transition-shadow hover:shadow-md dark:border-gray-700 dark:bg-gray-800",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-gray-100 bg-white dark:border-gray-700 dark:bg-gray-900 [&_img]:h-full [&_img]:w-full [&_img]:object-contain [&_svg]:h-7 [&_svg]:w-7", children: logo }),
+        status && /* @__PURE__ */ jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "light", children: STATUS_LABEL2[status] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 min-w-0 flex-1", children: [
+        category && /* @__PURE__ */ jsx("p", { className: "font-mono text-[10px] tracking-wide text-gray-400 uppercase dark:text-gray-500", children: category }),
+        /* @__PURE__ */ jsx("h3", { className: "mt-0.5 truncate text-sm font-semibold text-gray-900 dark:text-white", children: name }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs text-gray-600 dark:text-gray-400", children: description })
+      ] }),
+      (actionLabel || secondaryLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-end gap-2", children: [
+        secondaryLabel && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onSecondary, disabled: loading, children: secondaryLabel }),
+        actionLabel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: actionVariant,
+            size: "sm",
+            onClick: onAction,
+            loading,
+            disabled: loading,
+            children: actionLabel
+          }
+        )
+      ] })
+    ]
+  }
+);
+var ResetPasswordForm = ({
+  onSubmit,
+  signInHref,
+  signInLabel = "Back to sign in",
+  sent = false,
+  sentEmail,
+  loading = false,
+  error,
+  title = "Reset your password",
+  description = "Enter your email and we\u2019ll send you a link to reset your password.",
+  submitLabel = "Send reset link",
+  onResend,
+  resendLabel = "Resend",
+  className
+}) => {
+  const [email, setEmail] = useState("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (loading || email.length === 0) return;
+    void onSubmit(email);
+  };
+  if (sent) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-brand-500/10 text-brand-600 dark:text-brand-400 mx-auto flex h-12 w-12 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(MailCheck, { className: "h-6 w-6", "aria-hidden": true }) }),
+      /* @__PURE__ */ jsx("h1", { className: "mt-4 text-center text-xl font-semibold text-gray-900 dark:text-white", children: "Check your inbox" }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-2 text-center text-sm text-gray-500 dark:text-gray-400", children: [
+        "We've sent a reset link to",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700 dark:text-gray-200", children: sentEmail ?? email }),
+        ". The link expires in 1 hour."
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col items-stretch gap-2", children: [
+        onResend && /* @__PURE__ */ jsx(Button, { variant: "secondary", loading, disabled: loading, onClick: onResend, children: resendLabel }),
+        signInHref && /* @__PURE__ */ jsxs(Link, { href: signInHref, variant: "subtle", className: "justify-center", children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+          signInLabel
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description })
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(AlertBanner, { variant: "error", children: error }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: "Email",
+          type: "email",
+          icon: Mail,
+          autoComplete: "email",
+          required: true,
+          placeholder: "john@example.com",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          loading,
+          disabled: loading || email.length === 0,
+          className: "w-full",
+          children: submitLabel
+        }
+      )
+    ] }),
+    signInHref && /* @__PURE__ */ jsx("p", { className: "mt-5 text-center text-xs text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsxs(Link, { href: signInHref, variant: "colored", children: [
+      /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+      signInLabel
+    ] }) })
+  ] });
+};
+var SignInForm = ({
+  onSubmit,
+  onForgotPassword,
+  signUpHref,
+  signUpLabel = "Create one",
+  title = "Sign in",
+  description = "Welcome back \u2014 enter your credentials below.",
+  emailLabel = "Email",
+  passwordLabel = "Password",
+  rememberLabel = "Keep me signed in",
+  submitLabel = "Sign in",
+  forgotLabel = "Forgot password?",
+  loading = false,
+  error,
+  extraTop,
+  className
+}) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [remember, setRemember] = useState(false);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (loading) return;
+    void onSubmit({ email, password, remember });
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description })
+    ] }),
+    extraTop && /* @__PURE__ */ jsx("div", { className: "mb-5", children: extraTop }),
+    error && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(AlertBanner, { variant: "error", children: error }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: emailLabel,
+          type: "email",
+          icon: Mail,
+          autoComplete: "email",
+          required: true,
+          placeholder: "john@example.com",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PasswordInput,
+        {
+          label: passwordLabel,
+          autoComplete: "current-password",
+          required: true,
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: rememberLabel,
+            checked: remember,
+            onChange: (c) => setRemember(c),
+            disabled: loading
+          }
+        ),
+        onForgotPassword && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onForgotPassword,
+            className: "text-brand-500 hover:text-brand-600 text-xs font-medium transition-colors",
+            children: forgotLabel
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading, disabled: loading, className: "w-full", children: submitLabel })
+    ] }),
+    signUpHref && /* @__PURE__ */ jsxs("p", { className: "mt-5 text-center text-xs text-[var(--color-text-muted)]", children: [
+      "No account?",
+      " ",
+      /* @__PURE__ */ jsx(Link, { href: signUpHref, variant: "colored", children: signUpLabel })
+    ] })
+  ] });
+};
+var SignUpForm = ({
+  onSubmit,
+  signInHref,
+  signInLabel = "Sign in",
+  termsHref = "#",
+  privacyHref = "#",
+  showPolicy = true,
+  loading = false,
+  error,
+  title = "Create your account",
+  description = "A few details to get you started.",
+  submitLabel = "Create account",
+  extraTop,
+  className
+}) => {
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [agreedToTerms, setAgreedToTerms] = useState(false);
+  const rules = useMemo(() => defaultPasswordRules(password), [password]);
+  const allRulesPass = rules.every((r) => r.ok);
+  const canSubmit = firstName.length > 0 && lastName.length > 0 && email.length > 0 && (showPolicy ? allRulesPass : password.length > 0) && agreedToTerms && !loading;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    void onSubmit({ firstName, lastName, email, password, agreedToTerms });
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description })
+    ] }),
+    extraTop && /* @__PURE__ */ jsx("div", { className: "mb-5", children: extraTop }),
+    error && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(AlertBanner, { variant: "error", children: error }) }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "First name",
+            icon: User,
+            autoComplete: "given-name",
+            required: true,
+            placeholder: "John",
+            value: firstName,
+            onChange: (e) => setFirstName(e.target.value),
+            disabled: loading
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "Last name",
+            autoComplete: "family-name",
+            required: true,
+            placeholder: "Doe",
+            value: lastName,
+            onChange: (e) => setLastName(e.target.value),
+            disabled: loading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: "Email",
+          type: "email",
+          icon: Mail,
+          autoComplete: "email",
+          required: true,
+          placeholder: "john@example.com",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PasswordInput,
+        {
+          label: "Password",
+          autoComplete: "new-password",
+          required: true,
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          disabled: loading
+        }
+      ),
+      showPolicy && password.length > 0 && /* @__PURE__ */ jsx(PasswordPolicyChecker, { rules }),
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          label: /* @__PURE__ */ jsxs("span", { children: [
+            "I agree to the",
+            " ",
+            /* @__PURE__ */ jsx(Link, { href: termsHref, variant: "underline", className: "text-current", children: "terms" }),
+            " ",
+            "and",
+            " ",
+            /* @__PURE__ */ jsx(Link, { href: privacyHref, variant: "underline", className: "text-current", children: "privacy policy" }),
+            "."
+          ] }),
+          checked: agreedToTerms,
+          onChange: (c) => setAgreedToTerms(c),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading, disabled: !canSubmit, className: "w-full", children: submitLabel })
+    ] }),
+    signInHref && /* @__PURE__ */ jsxs("p", { className: "mt-5 text-center text-xs text-[var(--color-text-muted)]", children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsx(Link, { href: signInHref, variant: "colored", children: signInLabel })
+    ] })
+  ] });
+};
+var PROVIDER_NAME = {
+  google: "Google",
+  github: "GitHub",
+  x: "X",
+  facebook: "Facebook",
+  apple: "Apple",
+  microsoft: "Microsoft"
+};
+var GoogleIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx(
+    "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__ */ jsx(
+    "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.84A10.99 10.99 0 0 0 12 23z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "#FBBC05",
+      d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18a10.99 10.99 0 0 0 0 9.86l3.66-2.84z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "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 1a10.99 10.99 0 0 0-9.82 6.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"
+    }
+  )
+] });
+var GithubIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 fill-current", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 2C6.48 2 2 6.58 2 12.26c0 4.49 2.87 8.3 6.84 9.65.5.09.68-.22.68-.49 0-.24-.01-.88-.01-1.73-2.78.62-3.37-1.36-3.37-1.36-.46-1.18-1.11-1.5-1.11-1.5-.91-.63.07-.62.07-.62 1 .07 1.53 1.05 1.53 1.05.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.36-2.22-.26-4.55-1.13-4.55-5.04 0-1.11.39-2.02 1.03-2.74-.1-.26-.45-1.3.1-2.71 0 0 .84-.27 2.75 1.05A9.4 9.4 0 0 1 12 6.99c.85 0 1.71.12 2.51.34 1.91-1.32 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.74 0 3.92-2.34 4.78-4.57 5.03.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.81 0 .27.18.59.69.49A10.04 10.04 0 0 0 22 12.26C22 6.58 17.52 2 12 2z"
+  }
+) });
+var XIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 fill-current", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z" }) });
+var FacebookIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "#1877F2",
+    d: "M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07c0 6.02 4.39 11.01 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.23 2.69.23v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.08 24 18.09 24 12.07Z"
+  }
+) });
+var AppleIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 fill-current", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M17.05 12.04c-.03-2.97 2.43-4.4 2.54-4.47-1.39-2.03-3.55-2.31-4.32-2.34-1.83-.19-3.59 1.08-4.52 1.08-.95 0-2.38-1.06-3.92-1.03-2.01.03-3.88 1.18-4.92 2.97-2.1 3.65-.54 9.05 1.51 12.01 1 1.45 2.18 3.07 3.74 3.01 1.51-.06 2.07-.97 3.89-.97 1.81 0 2.32.97 3.92.94 1.62-.03 2.65-1.46 3.62-2.92 1.15-1.67 1.62-3.32 1.65-3.4-.04-.01-3.16-1.21-3.19-4.81zM14.06 3.74c.81-1 1.36-2.39 1.21-3.78-1.17.05-2.6.79-3.44 1.78-.74.87-1.4 2.28-1.23 3.64 1.31.1 2.65-.66 3.46-1.65z" }) });
+var MicrosoftIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx("path", { fill: "#F25022", d: "M11.4 11.4H1V1h10.4v10.4Z" }),
+  /* @__PURE__ */ jsx("path", { fill: "#7FBA00", d: "M23 11.4H12.6V1H23v10.4Z" }),
+  /* @__PURE__ */ jsx("path", { fill: "#00A4EF", d: "M11.4 23H1V12.6h10.4V23Z" }),
+  /* @__PURE__ */ jsx("path", { fill: "#FFB900", d: "M23 23H12.6V12.6H23V23Z" })
+] });
+var PROVIDER_ICON = {
+  google: GoogleIcon,
+  github: GithubIcon,
+  x: XIcon,
+  facebook: FacebookIcon,
+  apple: AppleIcon,
+  microsoft: MicrosoftIcon
+};
+var SocialAuthButtons = ({
+  providers,
+  onProviderClick,
+  loading,
+  divider = true,
+  dividerLabel = "OR continue with",
+  layout = "stacked",
+  labelFor,
+  position = "above",
+  className
+}) => {
+  if (providers.length === 0) return null;
+  const buttonsList = /* @__PURE__ */ jsx("div", { className: clsx(layout === "grid" ? "grid grid-cols-2 gap-2" : "flex flex-col gap-2"), children: providers.map((provider) => {
+    const Icon2 = PROVIDER_ICON[provider];
+    const isLoading = loading === provider;
+    const isDisabled = loading !== void 0 && loading !== null;
+    const label = labelFor ? labelFor(provider) : `Continue with ${PROVIDER_NAME[provider]}`;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => onProviderClick(provider),
+        disabled: isDisabled,
+        "aria-label": label,
+        className: "flex h-10 items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+        children: [
+          isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Icon2, {}),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+        ]
+      },
+      provider
+    );
+  }) });
+  if (!divider) return /* @__PURE__ */ jsx("div", { className, children: buttonsList });
+  const dividerNode = /* @__PURE__ */ jsxs("div", { className: "my-4 flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs tracking-wide text-gray-400 uppercase dark:text-gray-500", children: dividerLabel }),
+    /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" })
+  ] });
+  return /* @__PURE__ */ jsx("div", { className, children: position === "above" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    buttonsList,
+    dividerNode
+  ] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    dividerNode,
+    buttonsList
+  ] }) });
+};
 var StickyScrollNav = ({
   sections,
   onNavigate,
@@ -8169,6 +8673,80 @@ var StickyScrollNav = ({
     }
   );
 };
+var TwoStepVerificationForm = ({
+  onSubmit,
+  onResend,
+  sentTo,
+  length = 6,
+  loading = false,
+  error,
+  autoSubmit = true,
+  cancelHref,
+  cancelLabel = "Back to sign in",
+  title = "Two-step verification",
+  submitLabel = "Verify my account",
+  resendLabel = "Resend code",
+  className
+}) => {
+  const [code, setCode] = useState("");
+  const description = sentTo ? `Enter the ${length}-digit code we sent to ${sentTo}.` : `Enter the ${length}-digit verification code from your authenticator app.`;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (loading || code.length !== length) return;
+    void onSubmit(code);
+  };
+  const handleComplete = (value) => {
+    if (autoSubmit && !loading) void onSubmit(value);
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsx("div", { className: "bg-brand-500/10 text-brand-600 dark:text-brand-400 mx-auto flex h-12 w-12 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(ShieldCheck, { className: "h-6 w-6", "aria-hidden": true }) }),
+    /* @__PURE__ */ jsx("h1", { className: "mt-4 text-center text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-center text-sm text-gray-500 dark:text-gray-400", children: description }),
+    error && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(AlertBanner, { variant: "error", children: error }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsx(
+      OtpInput,
+      {
+        length,
+        value: code,
+        onChange: setCode,
+        onComplete: handleComplete,
+        disabled: loading,
+        error: !!error,
+        autoFocus: true
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          loading,
+          disabled: loading || code.length !== length,
+          className: "w-full",
+          children: submitLabel
+        }
+      ),
+      onResend && /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-[var(--color-text-muted)]", children: [
+        "Didn't get a code?",
+        " ",
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onResend,
+            disabled: loading,
+            className: "text-brand-500 hover:text-brand-600 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+            children: resendLabel
+          }
+        )
+      ] }),
+      cancelHref && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(Link, { href: cancelHref, variant: "subtle", children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        cancelLabel
+      ] }) })
+    ] })
+  ] });
+};
 var ColorSwatch = ({
   hex,
   label,
@@ -8541,6 +9119,6 @@ var Figure = ({
   caption && /* @__PURE__ */ jsx("figcaption", { className: "mt-2 text-center text-xs text-gray-500 italic dark:text-gray-400", children: caption })
 ] });
 
-export { AccentPicker, Accordion2 as Accordion, ActionPanel, ActiveFiltersBar, ActivityFeed, AlertBanner, AnnouncementBar, Avatar, AvatarUploader, BackToTopFab, Backdrop, Badge, Blockquote, Breadcrumb, Button, ButtonGroup, Calendar, Card2 as Card, Carousel, CarouselRoot, Checkbox, CheckboxGroup, ClickableRow, Clipboard, CodeBlock, ColBox, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, ConfirmationModal, ContentNarrow, ContentStackedList, CookieBanner, DataTable, DatePicker, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, Figure, FileInput, FilterPills, FormFooter, FormRow, GridList, HealthBadge, HealthDot, HelpOverlay, IconBox, ImageGrid, Input, Kbd2 as Kbd, KpiCard, Link, List2 as List, LoadingState, MediaObject, MiniCalendar, Modal, NarrowStackedList, Navbar, NotificationCard, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageBreadcrumb, PageCard, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, Popover, ProgressBar, REFRESH_OPTIONS, Radio, RadioGroup, RefreshButton, Ribbon, RowActionButton, STATUS_COLOR, STATUS_PILL, SearchInput, SectionCard, SectionLabel, SegmentedControl, Select, SelectInput, Shell, Sidebar, SimpleRow, Sk, SkeletonList, SkeletonTable, SkeletonText, Spinner, StackedList, StackedListInCard, StatefulSaveButton, StatusBadge, StatusRow, Stepper, StepperInput, StepperRoot, StickyScrollNav, Tabs, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, UnsavedIndicator, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, defaultPasswordRules, placeholderAvatar, placeholderCover, portalDocsParams, useAutoRefresh };
+export { AccentPicker, Accordion2 as Accordion, ActionPanel, ActiveFiltersBar, ActivityFeed, AlertBanner, AnnouncementBar, AuthLayout, Avatar, AvatarUploader, BackToTopFab, Backdrop, Badge, Blockquote, Breadcrumb, Button, ButtonGroup, Calendar, Card2 as Card, Carousel, CarouselRoot, Checkbox, CheckboxGroup, ClickableRow, Clipboard, CodeBlock, ColBox, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, ConfirmationModal, ContentNarrow, ContentStackedList, CookieBanner, DataTable, DatePicker, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, Figure, FileInput, FilterPills, FormFooter, FormRow, GridList, HealthBadge, HealthDot, HelpOverlay, IconBox, ImageGrid, Input, IntegrationCard, Kbd2 as Kbd, KpiCard, Link, List2 as List, LoadingState, MediaObject, MiniCalendar, Modal, NarrowStackedList, Navbar, NotificationCard, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageBreadcrumb, PageCard, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, Popover, ProgressBar, REFRESH_OPTIONS, Radio, RadioGroup, RefreshButton, ResetPasswordForm, Ribbon, RowActionButton, STATUS_COLOR, STATUS_PILL, SearchInput, SectionCard, SectionLabel, SegmentedControl, Select, SelectInput, Shell, Sidebar, SignInForm, SignUpForm, SimpleRow, Sk, SkeletonList, SkeletonTable, SkeletonText, SocialAuthButtons, Spinner, StackedList, StackedListInCard, StatefulSaveButton, StatusBadge, StatusRow, Stepper, StepperInput, StepperRoot, StickyScrollNav, Tabs, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, TwoStepVerificationForm, UnsavedIndicator, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, defaultPasswordRules, useAutoRefresh };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map