@sckyzo/cosmos-react 0.0.2 → 0.1.0

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, Palette, 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",
@@ -407,11 +320,11 @@ var SidebarItem = ({
   const baseClass = 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__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(Icon2, { className: clsx("h-5 w-5 shrink-0", active && "text-brand-500") }),
+    /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
     !collapsed && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label }),
       badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: badge })
@@ -462,9 +375,9 @@ var SidebarSubMenu = ({
         title: label,
         className: 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__ */ jsx(Icon2, { className: clsx("h-5 w-5 shrink-0", active && "text-brand-500") })
+        children: /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 shrink-0" })
       }
     );
   }
@@ -477,10 +390,10 @@ var SidebarSubMenu = ({
         "aria-expanded": open,
         className: 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__ */ jsx(Icon2, { className: clsx("h-5 w-5 shrink-0", active && "text-brand-500") }),
+          /* @__PURE__ */ jsx(Icon2, { className: "h-5 w-5 shrink-0" }),
           /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label }),
           badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: badge }),
           /* @__PURE__ */ jsx(
@@ -541,7 +454,7 @@ Sidebar.SubMenu = SidebarSubMenu;
 var PageBreadcrumb = ({ items, className }) => /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [
     isFirst && /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }),
     item.label
@@ -685,7 +598,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"
     }
   )
@@ -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(
@@ -3459,7 +3479,7 @@ var NotificationsPanelFooter = ({
         if (closeOnClick && !e.defaultPrevented) setOpen(false);
       },
       className: 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,
@@ -3792,7 +3812,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];
@@ -3800,7 +3820,7 @@ var nextInCycle = (current) => {
 var ICON_FOR = {
   light: Sun,
   dark: Moon,
-  oled: MoonStar
+  "deep-blue": MoonStar
 };
 var ThemeToggleTri = forwardRef(
   function ThemeToggleTri2({
@@ -3809,12 +3829,12 @@ var ThemeToggleTri = 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__ */ jsx(
@@ -4066,9 +4086,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]);
   useEffect(() => {
@@ -4107,13 +4130,18 @@ var PopoverTrigger = forwardRef(function PopoverTrigger2({ onClick, children, ..
     }
   );
 });
-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 {
@@ -4131,32 +4159,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",
@@ -4172,7 +4204,8 @@ var PopoverContent = ({
         "div",
         {
           role: "dialog",
-          style: positionStyle(position, triggerRect, offset),
+          "aria-label": ariaLabel,
+          style: positionStyle(position, align, triggerRect, offset),
           className: 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,
@@ -4183,7 +4216,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"
               }
             ),
@@ -7604,7 +7637,7 @@ var ColumnHeader = ({
               "aria-label": "Filter column",
               className: 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__ */ jsx(Filter, { className: "h-3 w-3" }),
@@ -8111,6 +8144,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 +8195,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-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 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 +8686,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-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__ */ 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,
@@ -8273,7 +8864,7 @@ var PaletteCard = ({ meta, active = false, onClick, className }) => /* @__PURE__
       /* @__PURE__ */ 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}`
@@ -8284,11 +8875,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__ */ jsx("span", { className: "block text-[10px]", style: { color: "#9ca3af" }, children: meta.desc })
+              meta.desc && /* @__PURE__ */ jsx("span", { className: "block text-[10px]", style: { color: meta.preview.text ?? "#9ca3af" }, children: meta.desc })
             ] }),
             active && /* @__PURE__ */ jsx("span", { className: "bg-brand-500 flex h-4 w-4 shrink-0 items-center justify-center rounded-full", children: /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5 text-white", "aria-hidden": true }) })
           ]
@@ -8338,7 +8929,7 @@ var OptionCard = ({
           {
             className: 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
           }
@@ -8374,6 +8965,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 = useId();
+  const accentHeadingId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: clsx("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": themeHeadingId, children: [
+      /* @__PURE__ */ jsx("p", { id: themeHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: themeLabel }),
+      /* @__PURE__ */ jsx(
+        PalettePicker,
+        {
+          className: "mt-3",
+          palettes: themes,
+          value: theme,
+          cols: themeColumns,
+          onChange: (id) => onThemeChange(id)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": accentHeadingId, children: [
+      /* @__PURE__ */ jsx("p", { id: accentHeadingId, className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: accentLabel }),
+      /* @__PURE__ */ 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__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(
+      Popover.Trigger,
+      {
+        title: label,
+        "aria-label": label,
+        className: 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__ */ jsx(Palette, { className: icon, "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsx(Popover.Content, { align: "end", width: "w-96", "aria-label": label, children: /* @__PURE__ */ jsx(AppearanceSettings, { themeColumns: 2, ...settings }) })
+  ] });
+};
 var SIZE = {
   sm: "text-base leading-relaxed",
   md: "text-lg leading-relaxed",
@@ -8541,6 +9255,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, AppearanceMenu, AppearanceSettings, AuthLayout, Avatar, AvatarUploader, BackToTopFab, Backdrop, Badge, Blockquote, Breadcrumb, Button, ButtonGroup, COSMOS_ACCENTS, COSMOS_THEMES, 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, applyAppearance, defaultPasswordRules, isDarkTheme, useAutoRefresh };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map