@sckyzo/cosmos-react 0.0.3 → 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, MailCheck, ArrowLeft, Mail, User, ShieldCheck, 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';
@@ -320,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 })
@@ -375,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" })
       }
     );
   }
@@ -390,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(
@@ -454,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
@@ -598,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"
     }
   )
@@ -3479,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,
@@ -3812,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];
@@ -3820,7 +3820,7 @@ var nextInCycle = (current) => {
 var ICON_FOR = {
   light: Sun,
   dark: Moon,
-  oled: MoonStar
+  "deep-blue": MoonStar
 };
 var ThemeToggleTri = forwardRef(
   function ThemeToggleTri2({
@@ -3829,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(
@@ -4086,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(() => {
@@ -4127,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 {
@@ -4151,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",
@@ -4192,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,
@@ -4203,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"
               }
             ),
@@ -7624,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" }),
@@ -8392,7 +8405,7 @@ var SignInForm = ({
           {
             type: "button",
             onClick: onForgotPassword,
-            className: "text-brand-500 hover:text-brand-600 text-xs font-medium transition-colors",
+            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
           }
         )
@@ -8735,7 +8748,7 @@ var TwoStepVerificationForm = ({
             type: "button",
             onClick: onResend,
             disabled: loading,
-            className: "text-brand-500 hover:text-brand-600 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+            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
           }
         )
@@ -8851,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}`
@@ -8862,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 }) })
           ]
@@ -8916,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
           }
@@ -8952,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",
@@ -9119,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, AuthLayout, Avatar, AvatarUploader, BackToTopFab, Backdrop, Badge, Blockquote, Breadcrumb, Button, ButtonGroup, Calendar, Card2 as Card, Carousel, CarouselRoot, Checkbox, CheckboxGroup, ClickableRow, Clipboard, CodeBlock, ColBox, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, ConfirmationModal, ContentNarrow, ContentStackedList, CookieBanner, DataTable, DatePicker, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, Figure, FileInput, FilterPills, FormFooter, FormRow, GridList, HealthBadge, HealthDot, HelpOverlay, IconBox, ImageGrid, Input, IntegrationCard, Kbd2 as Kbd, KpiCard, Link, List2 as List, LoadingState, MediaObject, MiniCalendar, Modal, NarrowStackedList, Navbar, NotificationCard, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageBreadcrumb, PageCard, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, Popover, ProgressBar, REFRESH_OPTIONS, Radio, RadioGroup, RefreshButton, ResetPasswordForm, Ribbon, RowActionButton, STATUS_COLOR, STATUS_PILL, SearchInput, SectionCard, SectionLabel, SegmentedControl, Select, SelectInput, Shell, Sidebar, SignInForm, SignUpForm, SimpleRow, Sk, SkeletonList, SkeletonTable, SkeletonText, SocialAuthButtons, Spinner, StackedList, StackedListInCard, StatefulSaveButton, StatusBadge, StatusRow, Stepper, StepperInput, StepperRoot, StickyScrollNav, Tabs, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, TwoStepVerificationForm, UnsavedIndicator, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, defaultPasswordRules, useAutoRefresh };
+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