@sckyzo/cosmos-react 0.0.2 → 0.1.0

package/dist/index.cjs

@@ -37,93 +37,6 @@ var Autoplay__default = /*#__PURE__*/_interopDefault(Autoplay);
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 var RadixAccordion__namespace = /*#__PURE__*/_interopNamespace(RadixAccordion);
 
-// 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",
@@ -432,11 +345,11 @@ var SidebarItem = ({
   const baseClass = clsx.clsx(
     "group mx-2 flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors",
     collapsed ? "justify-center px-2" : "px-3",
-    active ? "bg-brand-500/10 text-brand-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
+    active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
   );
   const style = !collapsed && depth > 0 ? { paddingLeft: 12 + depth * 20 } : void 0;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") }),
+    /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
     !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label }),
       badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge })
@@ -487,9 +400,9 @@ var SidebarSubMenu = ({
         title: label,
         className: clsx.clsx(
           "group mx-2 flex w-[calc(100%-1rem)] items-center justify-center rounded-lg px-2 py-2 text-sm font-medium transition-colors",
-          active ? "bg-brand-500/10 text-brand-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
+          active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" })
       }
     );
   }
@@ -502,10 +415,10 @@ var SidebarSubMenu = ({
         "aria-expanded": open,
         className: clsx.clsx(
           "group mx-2 flex w-[calc(100%-1rem)] items-center gap-3 rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors",
-          active ? "bg-brand-500/10 text-brand-500" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
+          active ? "bg-brand-500/10 text-brand-600 dark:text-brand-400" : "text-[var(--color-text-secondary)] hover:bg-black/5 hover:text-[var(--color-text-primary)] dark:hover:bg-white/5"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: clsx.clsx("h-5 w-5 shrink-0", active && "text-brand-500") }),
+          /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: label }),
           badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: badge }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -566,7 +479,7 @@ Sidebar.SubMenu = SidebarSubMenu;
 var PageBreadcrumb = ({ items, className }) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-wrap items-center gap-1 text-sm", children: items.map((item, i) => {
   const isFirst = i === 0;
   const isLast = i === items.length - 1;
-  const linkClass = "hover:text-brand-500 dark:hover:text-brand-400 flex items-center gap-1 text-[var(--color-text-secondary)] transition-colors";
+  const linkClass = "hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1 text-[var(--color-text-secondary)] transition-colors";
   const renderInner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     isFirst && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }),
     item.label
@@ -710,7 +623,7 @@ var ErrorState = ({
     {
       type: "button",
       onClick: onRetry,
-      className: "text-brand-500 hover:text-brand-600 text-xs font-medium hover:underline",
+      className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 text-xs font-medium hover:underline",
       children: "Try again"
     }
   )
@@ -2093,6 +2006,8 @@ var Dropdown = ({
 }) => {
   const [open, setOpen] = react.useState(false);
   const ref = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const menuRef = react.useRef(null);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -2101,15 +2016,47 @@ var Dropdown = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
+  react.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__ */ jsxRuntime.jsxs("div", { ref, className: clsx.clsx("relative inline-block", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         onClick: () => !disabled && setOpen((v) => !v),
         disabled,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
         className: clsx.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"
@@ -2134,6 +2081,10 @@ var Dropdown = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
+          ref: menuRef,
+          role: "menu",
+          "aria-label": label,
+          onKeyDown: onMenuKeyDown,
           className: clsx.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"
@@ -2155,10 +2106,11 @@ var Dropdown = ({
               "button",
               {
                 type: "button",
+                role: "menuitem",
                 disabled: opt.disabled,
                 onClick: () => {
                   onChange?.(opt.value);
-                  setOpen(false);
+                  closeAndRefocus();
                 },
                 className: clsx.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",
@@ -2178,6 +2130,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 = react.useRef(null);
+  react.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 = react.createContext(void 0);
+var DialogTitleProvider = DialogTitleContext.Provider;
+var useDialogTitleId = () => react.useContext(DialogTitleContext);
 var SIZE_CLASS5 = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -2185,7 +2182,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 = react.useId();
+  const trapRef = useFocusTrap(open);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -2200,12 +2199,16 @@ var Root8 = ({ open, onClose, size = "md", className, children }) => {
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        ref: trapRef,
+        tabIndex: -1,
         className: clsx.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__ */ jsxRuntime.jsx(
             "div",
@@ -2224,7 +2227,7 @@ var Root8 = ({ open, onClose, size = "md", className, children }) => {
                 SIZE_CLASS5[size],
                 className
               ),
-              children
+              children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitleProvider, { value: titleId, children })
             }
           )
         ]
@@ -2233,32 +2236,35 @@ var Root8 = ({ open, onClose, size = "md", className, children }) => {
     document.body
   );
 };
-var Header2 = ({ title, description, onClose, className, children }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "div",
-  {
-    className: clsx.clsx(
-      "flex items-start justify-between gap-4 border-b border-gray-200 px-5 py-4 dark:border-gray-800",
-      className
-    ),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description }),
-        children
-      ] }),
-      onClose && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
-        }
-      )
-    ]
-  }
-);
+var Header2 = ({ title, description, onClose, className, children }) => {
+  const titleId = useDialogTitleId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx.clsx(
+        "flex items-start justify-between gap-4 border-b border-gray-200 px-5 py-4 dark:border-gray-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description }),
+          children
+        ] }),
+        onClose && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+};
 var Body3 = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("px-5 py-4", className), children });
 var Footer3 = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
@@ -2307,7 +2313,7 @@ var Alert = ({
   const handleConfirm = () => onConfirm ? onConfirm() : onClose();
   const handleCancel = () => onCancel ? onCancel() : onClose();
   if (layout === "horizontal") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root8, { open, onClose, size: "lg", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root8, { open, onClose, size: "lg", ariaLabel: title, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white sm:flex sm:items-start sm:p-6 dark:bg-gray-900", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -2339,7 +2345,7 @@ var Alert = ({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Root8, { open, onClose, size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 text-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root8, { open, onClose, size: "sm", ariaLabel: title, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 text-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -2417,9 +2423,12 @@ var Root9 = ({
   size = "md",
   withBackdrop = true,
   closeOutside = false,
+  ariaLabel,
   className,
   children
 }) => {
+  const titleId = react.useId();
+  const trapRef = useFocusTrap(open);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -2459,6 +2468,8 @@ var Root9 = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         "aside",
         {
+          ref: trapRef,
+          tabIndex: -1,
           className: clsx.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],
@@ -2468,7 +2479,9 @@ var Root9 = ({
           ),
           role: "dialog",
           "aria-modal": "true",
-          children
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabel ? void 0 : titleId,
+          children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitleProvider, { value: titleId, children })
         }
       )
     ] }),
@@ -2482,37 +2495,47 @@ var Header3 = ({
   onClose,
   className,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "div",
-  {
-    className: clsx.clsx(
-      "flex shrink-0 items-center justify-between border-b border-gray-200 p-5 dark:border-gray-800",
-      className
-    ),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
-        Icon2 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "truncate text-base font-semibold text-gray-900 dark:text-white", children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-sm text-gray-500 dark:text-gray-400", children: description })
+}) => {
+  const titleId = useDialogTitleId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx.clsx(
+        "flex shrink-0 items-center justify-between border-b border-gray-200 p-5 dark:border-gray-800",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+          Icon2 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4 text-gray-500 dark:text-gray-400" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                id: titleId,
+                className: "truncate text-base font-semibold text-gray-900 dark:text-white",
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-sm text-gray-500 dark:text-gray-400", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          children,
+          onClose && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" })
+            }
+          )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        children,
-        onClose && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" })
-          }
-        )
-      ] })
-    ]
-  }
-);
+      ]
+    }
+  );
+};
 var Body4 = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx("flex-1 overflow-y-auto p-5", className), children });
 var Footer4 = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
@@ -3097,6 +3120,8 @@ var ConfirmationModal = ({
   saveLabel = "Save & go",
   hideSave = false
 }) => {
+  const titleId = react.useId();
+  const trapRef = useFocusTrap(open);
   react.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
@@ -3110,24 +3135,19 @@ var ConfirmationModal = ({
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onStay, "aria-hidden": true }),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4 p-6", children: [
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-5 w-5 text-amber-500" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "h3",
-                  {
-                    id: "cosmos-confirmation-title",
-                    className: "font-semibold text-gray-900 dark:text-white",
-                    children: title
-                  }
-                ),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { id: titleId, className: "font-semibold text-gray-900 dark:text-white", children: title }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: message })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -3484,7 +3504,7 @@ var NotificationsPanelFooter = ({
         if (closeOnClick && !e.defaultPrevented) setOpen(false);
       },
       className: clsx.clsx(
-        "text-brand-500 w-full rounded-lg py-2 text-center text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-white/5",
+        "text-brand-600 dark:text-brand-400 w-full rounded-lg py-2 text-center text-sm font-medium transition-colors hover:bg-gray-50 dark:hover:bg-white/5",
         className
       ),
       ...rest,
@@ -3817,7 +3837,7 @@ var SIZE_CLASS9 = {
   sm: { box: "h-8 w-8", icon: "h-4 w-4" },
   md: { box: "h-10 w-10", icon: "h-5 w-5" }
 };
-var TRI_ORDER = ["light", "dark", "oled"];
+var TRI_ORDER = ["light", "dark", "deep-blue"];
 var nextInCycle = (current) => {
   const idx = TRI_ORDER.indexOf(current);
   return TRI_ORDER[(idx + 1) % TRI_ORDER.length];
@@ -3825,7 +3845,7 @@ var nextInCycle = (current) => {
 var ICON_FOR = {
   light: lucideReact.Sun,
   dark: lucideReact.Moon,
-  oled: lucideReact.MoonStar
+  "deep-blue": lucideReact.MoonStar
 };
 var ThemeToggleTri = react.forwardRef(
   function ThemeToggleTri2({
@@ -3834,12 +3854,12 @@ var ThemeToggleTri = react.forwardRef(
     size = "md",
     lightLabel = "Switch to light mode",
     darkLabel = "Switch to dark mode",
-    oledLabel = "Switch to OLED mode",
+    deepBlueLabel = "Switch to deep blue mode",
     className,
     ...rest
   }, ref) {
     const next = nextInCycle(theme);
-    const label = next === "light" ? lightLabel : next === "dark" ? darkLabel : oledLabel;
+    const label = next === "light" ? lightLabel : next === "dark" ? darkLabel : deepBlueLabel;
     const Icon2 = ICON_FOR[theme];
     const { box, icon } = SIZE_CLASS9[size];
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4091,9 +4111,12 @@ var PopoverRoot = ({
     const handler = () => refreshRect();
     window.addEventListener("resize", handler);
     window.addEventListener("scroll", handler, true);
+    const observer = new ResizeObserver(handler);
+    if (triggerRef.current) observer.observe(triggerRef.current, { box: "border-box" });
     return () => {
       window.removeEventListener("resize", handler);
       window.removeEventListener("scroll", handler, true);
+      observer.disconnect();
     };
   }, [open, refreshRect]);
   react.useEffect(() => {
@@ -4132,13 +4155,18 @@ var PopoverTrigger = react.forwardRef(function PopoverTrigger2({ onClick, childr
     }
   );
 });
-var positionStyle = (position, rect, offset) => {
+var VIEWPORT_MARGIN = 16;
+var positionStyle = (position, align, rect, offset) => {
+  const left = align === "end" ? rect.right : rect.left + rect.width / 2;
+  const shiftX = align === "end" ? "-100%" : "-50%";
+  const maxWidth = align === "end" ? rect.right - VIEWPORT_MARGIN : void 0;
   switch (position) {
     case "top":
       return {
         top: rect.top - offset,
-        left: rect.left + rect.width / 2,
-        transform: "translate(-50%, -100%)"
+        left,
+        maxWidth,
+        transform: `translate(${shiftX}, -100%)`
       };
     case "right":
       return {
@@ -4156,32 +4184,36 @@ var positionStyle = (position, rect, offset) => {
     default:
       return {
         top: rect.bottom + offset,
-        left: rect.left + rect.width / 2,
-        transform: "translateX(-50%)"
+        left,
+        maxWidth,
+        transform: `translateX(${shiftX})`
       };
   }
 };
-var arrowStyle = (position) => {
+var arrowStyle = (position, align, rect) => {
   const base = {
     position: "absolute",
     width: 8,
     height: 8,
     transform: "rotate(45deg)"
   };
+  const x = align === "end" ? { right: rect.width / 2 - 1, marginRight: -4 } : { left: "50%", marginLeft: -4 };
   switch (position) {
     case "top":
-      return { ...base, bottom: -4, left: "50%", marginLeft: -4 };
+      return { ...base, bottom: -4, ...x };
     case "right":
       return { ...base, left: -4, top: "50%", marginTop: -4 };
     case "left":
       return { ...base, right: -4, top: "50%", marginTop: -4 };
     case "bottom":
     default:
-      return { ...base, top: -4, left: "50%", marginLeft: -4 };
+      return { ...base, top: -4, ...x };
   }
 };
 var PopoverContent = ({
   position = "bottom",
+  align = "center",
+  "aria-label": ariaLabel,
   offset = 8,
   arrow = false,
   width = "w-64",
@@ -4197,7 +4229,8 @@ var PopoverContent = ({
         "div",
         {
           role: "dialog",
-          style: positionStyle(position, triggerRect, offset),
+          "aria-label": ariaLabel,
+          style: positionStyle(position, align, triggerRect, offset),
           className: clsx.clsx(
             "fixed z-[9999] rounded-xl border border-gray-200 bg-white p-4 text-sm shadow-xl dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
             width,
@@ -4208,7 +4241,7 @@ var PopoverContent = ({
               "span",
               {
                 "aria-hidden": true,
-                style: arrowStyle(position),
+                style: arrowStyle(position, align, triggerRect),
                 className: "border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
               }
             ),
@@ -7629,7 +7662,7 @@ var ColumnHeader = ({
               "aria-label": "Filter column",
               className: clsx.clsx(
                 "flex items-center gap-1 rounded p-0.5 transition-colors hover:bg-gray-200 dark:hover:bg-white/10",
-                filterCount > 0 && "text-brand-500"
+                filterCount > 0 && "text-brand-600 dark:text-brand-400"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-3 w-3" }),
@@ -8136,6 +8169,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__ */ jsxRuntime.jsxs("div", { className: "mb-8 flex flex-col items-center gap-2 text-center", children: [
+    Logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-brand-500 flex h-12 w-12 items-center justify-center rounded-xl text-white", children: /* @__PURE__ */ jsxRuntime.jsx(Logo, { className: "h-6 w-6" }) }),
+    title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold text-gray-900 dark:text-white", children: title }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: subtitle })
+  ] }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(
+        "flex min-h-screen items-center justify-center bg-gray-50 p-4 dark:bg-gray-950",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-md", children: /* @__PURE__ */ jsxRuntime.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,
@@ -8159,6 +8220,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__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: clsx.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__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Badge, { variant: STATUS_VARIANT[status], appearance: "light", children: STATUS_LABEL2[status] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 min-w-0 flex-1", children: [
+        category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[10px] tracking-wide text-gray-400 uppercase dark:text-gray-500", children: category }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-0.5 truncate text-sm font-semibold text-gray-900 dark:text-white", children: name }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 line-clamp-2 text-xs text-gray-600 dark:text-gray-400", children: description })
+      ] }),
+      (actionLabel || secondaryLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-end gap-2", children: [
+        secondaryLabel && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: onSecondary, disabled: loading, children: secondaryLabel }),
+        actionLabel && /* @__PURE__ */ jsxRuntime.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] = react.useState("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (loading || email.length === 0) return;
+    void onSubmit(email);
+  };
+  if (sent) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.MailCheck, { className: "h-6 w-6", "aria-hidden": true }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-4 text-center text-xl font-semibold text-gray-900 dark:text-white", children: "Check your inbox" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-700 dark:text-gray-200", children: sentEmail ?? email }),
+        ". The link expires in 1 hour."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex flex-col items-stretch gap-2", children: [
+        onResend && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", loading, disabled: loading, onClick: onResend, children: resendLabel }),
+        signInHref && /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: signInHref, variant: "subtle", className: "justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+          signInLabel
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(AlertBanner, { variant: "error", children: error }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          label: "Email",
+          type: "email",
+          icon: lucideReact.Mail,
+          autoComplete: "email",
+          required: true,
+          placeholder: "john@example.com",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "submit",
+          loading,
+          disabled: loading || email.length === 0,
+          className: "w-full",
+          children: submitLabel
+        }
+      )
+    ] }),
+    signInHref && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-5 text-center text-xs text-[var(--color-text-muted)]", children: /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: signInHref, variant: "colored", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [remember, setRemember] = react.useState(false);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (loading) return;
+    void onSubmit({ email, password, remember });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description })
+    ] }),
+    extraTop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5", children: extraTop }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(AlertBanner, { variant: "error", children: error }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          label: emailLabel,
+          type: "email",
+          icon: lucideReact.Mail,
+          autoComplete: "email",
+          required: true,
+          placeholder: "john@example.com",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PasswordInput,
+        {
+          label: passwordLabel,
+          autoComplete: "current-password",
+          required: true,
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox,
+          {
+            label: rememberLabel,
+            checked: remember,
+            onChange: (c) => setRemember(c),
+            disabled: loading
+          }
+        ),
+        onForgotPassword && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onForgotPassword,
+            className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 text-xs font-medium transition-colors",
+            children: forgotLabel
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", loading, disabled: loading, className: "w-full", children: submitLabel })
+    ] }),
+    signUpHref && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-5 text-center text-xs text-[var(--color-text-muted)]", children: [
+      "No account?",
+      " ",
+      /* @__PURE__ */ jsxRuntime.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] = react.useState("");
+  const [lastName, setLastName] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [agreedToTerms, setAgreedToTerms] = react.useState(false);
+  const rules = react.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__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: description })
+    ] }),
+    extraTop && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5", children: extraTop }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(AlertBanner, { variant: "error", children: error }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            label: "First name",
+            icon: lucideReact.User,
+            autoComplete: "given-name",
+            required: true,
+            placeholder: "John",
+            value: firstName,
+            onChange: (e) => setFirstName(e.target.value),
+            disabled: loading
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            label: "Last name",
+            autoComplete: "family-name",
+            required: true,
+            placeholder: "Doe",
+            value: lastName,
+            onChange: (e) => setLastName(e.target.value),
+            disabled: loading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          label: "Email",
+          type: "email",
+          icon: lucideReact.Mail,
+          autoComplete: "email",
+          required: true,
+          placeholder: "john@example.com",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PasswordInput,
+        {
+          label: "Password",
+          autoComplete: "new-password",
+          required: true,
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          disabled: loading
+        }
+      ),
+      showPolicy && password.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(PasswordPolicyChecker, { rules }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Checkbox,
+        {
+          label: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "I agree to the",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(Link, { href: termsHref, variant: "underline", className: "text-current", children: "terms" }),
+            " ",
+            "and",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(Link, { href: privacyHref, variant: "underline", className: "text-current", children: "privacy policy" }),
+            "."
+          ] }),
+          checked: agreedToTerms,
+          onChange: (c) => setAgreedToTerms(c),
+          disabled: loading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", loading, disabled: !canSubmit, className: "w-full", children: submitLabel })
+    ] }),
+    signInHref && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-5 text-center text-xs text-[var(--color-text-muted)]", children: [
+      "Already have an account?",
+      " ",
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 fill-current", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 fill-current", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 fill-current", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#F25022", d: "M11.4 11.4H1V1h10.4v10.4Z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#7FBA00", d: "M23 11.4H12.6V1H23v10.4Z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#00A4EF", d: "M11.4 23H1V12.6h10.4V23Z" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: clsx.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon2, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label })
+        ]
+      },
+      provider
+    );
+  }) });
+  if (!divider) return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: buttonsList });
+  const dividerNode = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-4 flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tracking-wide text-gray-400 uppercase dark:text-gray-500", children: dividerLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: position === "above" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    buttonsList,
+    dividerNode
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    dividerNode,
+    buttonsList
+  ] }) });
+};
 var StickyScrollNav = ({
   sections,
   onNavigate,
@@ -8194,6 +8711,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] = react.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__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "h-6 w-6", "aria-hidden": true }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-4 text-center text-xl font-semibold text-gray-900 dark:text-white", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-center text-sm text-gray-500 dark:text-gray-400", children: description }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(AlertBanner, { variant: "error", children: error }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      OtpInput,
+      {
+        length,
+        value: code,
+        onChange: setCode,
+        onComplete: handleComplete,
+        disabled: loading,
+        error: !!error,
+        autoFocus: true
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "submit",
+          loading,
+          disabled: loading || code.length !== length,
+          className: "w-full",
+          children: submitLabel
+        }
+      ),
+      onResend && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center text-xs text-[var(--color-text-muted)]", children: [
+        "Didn't get a code?",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onResend,
+            disabled: loading,
+            className: "text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+            children: resendLabel
+          }
+        )
+      ] }),
+      cancelHref && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: cancelHref, variant: "subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        cancelLabel
+      ] }) })
+    ] })
+  ] });
+};
 var ColorSwatch = ({
   hex,
   label,
@@ -8298,7 +8889,7 @@ var PaletteCard = ({ meta, active = false, onClick, className }) => /* @__PURE__
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "flex items-center justify-between px-2.5 py-1.5",
+          className: "flex flex-1 items-center justify-between px-2.5 py-1.5",
           style: {
             backgroundColor: meta.preview.surface,
             borderTop: `1px solid ${meta.preview.border}`
@@ -8309,11 +8900,11 @@ var PaletteCard = ({ meta, active = false, onClick, className }) => /* @__PURE__
                 "span",
                 {
                   className: "block text-xs font-semibold",
-                  style: { color: active ? void 0 : "#6b7280" },
+                  style: { color: meta.preview.text ?? (active ? void 0 : "#6b7280") },
                   children: meta.label
                 }
               ),
-              meta.desc && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", style: { color: "#9ca3af" }, children: meta.desc })
+              meta.desc && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px]", style: { color: meta.preview.text ?? "#9ca3af" }, children: meta.desc })
             ] }),
             active && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-brand-500 flex h-4 w-4 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-2.5 w-2.5 text-white", "aria-hidden": true }) })
           ]
@@ -8363,7 +8954,7 @@ var OptionCard = ({
           {
             className: clsx.clsx(
               "text-xs font-semibold",
-              active ? "text-brand-500" : "text-gray-700 dark:text-gray-300"
+              active ? "text-brand-600 dark:text-brand-400" : "text-gray-700 dark:text-gray-300"
             ),
             children: label
           }
@@ -8399,6 +8990,129 @@ var OptionPicker = ({
     ))
   }
 );
+
+// src/settings/appearance.ts
+var COSMOS_THEMES = [
+  {
+    id: "light",
+    label: "Light",
+    dark: false,
+    preview: { bg: "#f9fafb", surface: "#ffffff", border: "#e5e7eb", text: "#667085" }
+  },
+  {
+    id: "sand",
+    label: "Sand",
+    dark: false,
+    preview: { bg: "#f9f5eb", surface: "#fffcf7", border: "#e7dfd0", text: "#746656" }
+  },
+  {
+    id: "dark",
+    label: "Dark",
+    dark: true,
+    preview: { bg: "#0a0a0a", surface: "#141414", border: "#3d3d3d", text: "#a3a3a3" }
+  },
+  {
+    id: "deep-blue",
+    label: "Deep Blue",
+    dark: true,
+    preview: { bg: "#0c111d", surface: "#101828", border: "#344054", text: "#98a2b3" }
+  }
+];
+var COSMOS_ACCENTS = [
+  { id: "blue", label: "Blue", hex: "#465fff" },
+  { id: "indigo", label: "Indigo", hex: "#5963e9" },
+  { id: "violet", label: "Violet", hex: "#8745f1" },
+  { id: "purple", label: "Purple", hex: "#ad2ecf" },
+  { id: "rose", label: "Rose", hex: "#d4166d" },
+  { id: "teal", label: "Teal", hex: "#038378" },
+  { id: "cyan", label: "Cyan", hex: "#017f9d" },
+  { id: "graphite", label: "Graphite", hex: "#707580" },
+  { id: "red", label: "Red", hex: "#db192a" },
+  { id: "orange", label: "Orange", hex: "#c04f01" },
+  { id: "amber", label: "Amber", hex: "#a46800" },
+  { id: "green", label: "Green", hex: "#02863c" }
+];
+var THEME_CLASSES = COSMOS_THEMES.map((t) => t.id).filter((id) => id !== "light");
+var isDarkTheme = (theme) => COSMOS_THEMES.some((t) => t.id === theme && t.dark);
+var applyAppearance = ({ theme, accent }, root) => {
+  const el = root ?? (typeof document === "undefined" ? void 0 : document.documentElement);
+  if (!el) return;
+  el.classList.remove(...THEME_CLASSES);
+  if (theme !== "light") el.classList.add(theme);
+  if (accent === "blue") delete el.dataset.accent;
+  else el.dataset.accent = accent;
+};
+var AppearanceSettings = ({
+  theme,
+  accent,
+  onThemeChange,
+  onAccentChange,
+  themeLabel = "Theme",
+  accentLabel = "Accent color",
+  themes = COSMOS_THEMES,
+  accents = COSMOS_ACCENTS,
+  themeColumns = 4,
+  className
+}) => {
+  const themeHeadingId = react.useId();
+  const accentHeadingId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": themeHeadingId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { id: themeHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: themeLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PalettePicker,
+        {
+          className: "mt-3",
+          palettes: themes,
+          value: theme,
+          cols: themeColumns,
+          onChange: (id) => onThemeChange(id)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-labelledby": accentHeadingId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { id: accentHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: accentLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AccentPicker,
+        {
+          className: "mt-3",
+          colors: accents,
+          value: accent,
+          onChange: (id) => onAccentChange(id),
+          cols: 6
+        }
+      )
+    ] })
+  ] });
+};
+var SIZE_CLASS12 = {
+  sm: { box: "h-8 w-8", icon: "h-4 w-4" },
+  md: { box: "h-10 w-10", icon: "h-5 w-5" }
+};
+var AppearanceMenu = ({
+  label = "Appearance",
+  size = "md",
+  className,
+  ...settings
+}) => {
+  const { box, icon } = SIZE_CLASS12[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Trigger,
+      {
+        title: label,
+        "aria-label": label,
+        className: clsx.clsx(
+          "flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white",
+          box,
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: icon, "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { align: "end", width: "w-96", "aria-label": label, children: /* @__PURE__ */ jsxRuntime.jsx(AppearanceSettings, { themeColumns: 2, ...settings }) })
+  ] });
+};
 var SIZE = {
   sm: "text-base leading-relaxed",
   md: "text-lg leading-relaxed",
@@ -8577,6 +9291,9 @@ exports.ActiveFiltersBar = ActiveFiltersBar;
 exports.ActivityFeed = ActivityFeed;
 exports.AlertBanner = AlertBanner;
 exports.AnnouncementBar = AnnouncementBar;
+exports.AppearanceMenu = AppearanceMenu;
+exports.AppearanceSettings = AppearanceSettings;
+exports.AuthLayout = AuthLayout;
 exports.Avatar = Avatar;
 exports.AvatarUploader = AvatarUploader;
 exports.BackToTopFab = BackToTopFab;
@@ -8586,6 +9303,8 @@ exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.COSMOS_ACCENTS = COSMOS_ACCENTS;
+exports.COSMOS_THEMES = COSMOS_THEMES;
 exports.Calendar = Calendar;
 exports.Card = Card2;
 exports.Carousel = Carousel;
@@ -8627,6 +9346,7 @@ exports.HelpOverlay = HelpOverlay;
 exports.IconBox = IconBox;
 exports.ImageGrid = ImageGrid;
 exports.Input = Input;
+exports.IntegrationCard = IntegrationCard;
 exports.Kbd = Kbd2;
 exports.KpiCard = KpiCard;
 exports.Link = Link;
@@ -8659,6 +9379,7 @@ exports.REFRESH_OPTIONS = REFRESH_OPTIONS;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.RefreshButton = RefreshButton;
+exports.ResetPasswordForm = ResetPasswordForm;
 exports.Ribbon = Ribbon;
 exports.RowActionButton = RowActionButton;
 exports.STATUS_COLOR = STATUS_COLOR;
@@ -8671,11 +9392,14 @@ exports.Select = Select;
 exports.SelectInput = SelectInput;
 exports.Shell = Shell;
 exports.Sidebar = Sidebar;
+exports.SignInForm = SignInForm;
+exports.SignUpForm = SignUpForm;
 exports.SimpleRow = SimpleRow;
 exports.Sk = Sk;
 exports.SkeletonList = SkeletonList;
 exports.SkeletonTable = SkeletonTable;
 exports.SkeletonText = SkeletonText;
+exports.SocialAuthButtons = SocialAuthButtons;
 exports.Spinner = Spinner;
 exports.StackedList = StackedList;
 exports.StackedListInCard = StackedListInCard;
@@ -8697,15 +9421,15 @@ exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
 exports.TooltipHelp = TooltipHelp;
 exports.Topbar = Topbar;
+exports.TwoStepVerificationForm = TwoStepVerificationForm;
 exports.UnsavedIndicator = UnsavedIndicator;
 exports.UserMenu = UserMenu;
 exports.VerticalNavigation = VerticalNavigation;
 exports.VideoEmbed = VideoEmbed;
 exports.ZoomBar = ZoomBar;
+exports.applyAppearance = applyAppearance;
 exports.defaultPasswordRules = defaultPasswordRules;
-exports.placeholderAvatar = placeholderAvatar;
-exports.placeholderCover = placeholderCover;
-exports.portalDocsParams = portalDocsParams;
+exports.isDarkTheme = isDarkTheme;
 exports.useAutoRefresh = useAutoRefresh;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map