@salesmind-ai/design-system 0.3.3 → 0.3.4

package/dist/core/index.js

@@ -1,16 +1,4132 @@
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AspectRatio, BREAKPOINTS, ButtonGroup, COLORS, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, EmptyState, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, Heading, HoverCard, HoverCardContent, HoverCardTrigger, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, LINE_HEIGHT, Label, MEDIA_QUERIES, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverContent, PopoverTrigger, Progress, Prose, RADIUS, Radio, RadioGroup, SHADOWS, ScrollArea, ScrollBar, Section, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, StatusBadge, Switch, Text, TextArea, ToastContext, ToastItem, ToastProvider, Toggle, VisuallyHidden, Z_INDEX, useFormField, useToast } from '../chunk-MU6GW5ZV.js';
-export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '../chunk-C2BCDNAV.js';
-export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger } from '../chunk-FAFAP4L5.js';
-export { Checkbox } from '../chunk-7PX2AZ6Y.js';
-export { AppearancePanel, AppearanceProvider, hexToRgb, initializeAppearance, prefersReducedMotion, useAppearance } from '../chunk-JPJN4YBC.js';
-export { Stack } from '../chunk-NN3TUHIH.js';
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../chunk-XU3OMQ7V.js';
-export { DISTANCE, DURATION, EASING, MOTION, TRANSITION, VARIANTS } from '../chunk-YNVRDD2P.js';
-export { Badge, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Slider, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem } from '../chunk-HRENHNDJ.js';
-export { TextField } from '../chunk-3NKRFUAR.js';
-export { Button } from '../chunk-SICKWUWB.js';
-export { DSIntlProvider, FormattedDate, FormattedMessage, FormattedNumber, alertMessages, allMessages, appearanceMessages, authMessages, calendarMessages, carouselMessages, commonMessages, defineMessages, dialogMessages, formMessages, methodologyMessages, navigationMessages, paginationMessages, reportMessages, toastMessages, useDateFormat, useIsRTL, useLocale, useMessage, useNumberFormat, useRelativeTime, useTextDirection } from '../chunk-P5BOFE5A.js';
-export { Avatar, AvatarFallback, AvatarImage } from '../chunk-Y3CPKNB7.js';
-export { Box, CONTAINER_SIZE_MAP, Container, SPACING, extractSpacingStyles, resolveSpacing } from '../chunk-HN4PHABT.js';
+import React39, { createContext, useId, forwardRef, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx28 from 'clsx';
+import { Slot } from '@radix-ui/react-slot';
+import { Input } from '@base-ui/react/input';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import ReactDOM, { createPortal } from 'react-dom';
+import { Menu } from '@base-ui/react/menu';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { defineMessages, IntlProvider, useIntl } from 'react-intl';
+export { FormattedDate, FormattedMessage, FormattedNumber, defineMessages } from 'react-intl';
+
+// src/tokens/motion.ts
+var DURATION = {
+  micro: 0.15,
+  // 150ms
+  short: 0.25,
+  // 250ms
+  medium: 0.5,
+  // 500ms
+  long: 1
+  // 1000ms
+};
+var EASING = {
+  standard: [0.16, 1, 0.3, 1],
+  // Smooth, premium feel
+  emphasis: [0.34, 1.56, 0.64, 1],
+  // Slight spring/overshoot
+  exit: [0.4, 0, 0.2, 1],
+  // Quick, decisive exit
+  linear: [0, 0, 1, 1]
+};
+var TRANSITION = {
+  standard: {
+    duration: DURATION.medium,
+    ease: EASING.standard
+  },
+  emphasis: {
+    duration: DURATION.medium,
+    ease: EASING.emphasis
+  },
+  quick: {
+    duration: DURATION.short,
+    ease: EASING.standard
+  },
+  spring: {
+    type: "spring",
+    stiffness: 200,
+    damping: 20
+  }
+};
+var VARIANTS = {
+  fadeIn: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  },
+  fadeUp: {
+    hidden: { opacity: 0, y: 12 },
+    visible: { opacity: 1, y: 0, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  },
+  scaleIn: {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: DURATION.short, ease: EASING.emphasis }
+    }
+  },
+  staggerContainer: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.08,
+        delayChildren: 0.1
+      }
+    }
+  },
+  pulse: {
+    hidden: { scale: 1 },
+    visible: {
+      scale: [1, 1.05, 1],
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  },
+  impact: {
+    hidden: { scale: 1 },
+    trigger: {
+      scale: [1, 0.95, 1.05, 1],
+      transition: { duration: 0.4, ease: "backOut" }
+    }
+  }
+};
+var DISTANCE = {
+  sm: 4,
+  md: 12,
+  lg: 24,
+  xl: 48
+};
+var MOTION = {
+  DURATION,
+  EASING,
+  TRANSITION,
+  VARIANTS,
+  DISTANCE
+};
+
+// src/tokens/colors.ts
+var COLORS = {
+  text: {
+    primary: "var(--text-primary)",
+    secondary: "var(--text-secondary)",
+    tertiary: "var(--text-tertiary)",
+    disabled: "var(--text-disabled)"
+  },
+  glass: {
+    base: "var(--glass-base)",
+    baseHover: "var(--glass-base-hover)",
+    baseActive: "var(--glass-base-active)",
+    backdrop: "var(--glass-backdrop)"
+  },
+  rim: {
+    top: "var(--rim-light-top)",
+    bottom: "var(--rim-light-bottom)"
+  },
+  brand: {
+    pink: "var(--brand-pink)",
+    yellow: "var(--brand-yellow)",
+    pinkGlow: "var(--brand-pink-glow)"
+  },
+  status: {
+    success: "var(--status-success)",
+    warning: "var(--status-warning)",
+    error: "var(--status-error)",
+    info: "var(--status-info)"
+  },
+  button: {
+    primaryBg: "var(--btn-primary-bg)",
+    primaryBgHover: "var(--btn-primary-bg-hover)",
+    secondaryBg: "var(--btn-secondary-bg)",
+    secondaryBgHover: "var(--btn-secondary-bg-hover)"
+  }
+};
+
+// src/tokens/spacing.ts
+var SPACING = {
+  1: "var(--space-1)",
+  2: "var(--space-2)",
+  3: "var(--space-3)",
+  4: "var(--space-4)",
+  5: "var(--space-5)",
+  6: "var(--space-6)",
+  8: "var(--space-8)",
+  10: "var(--space-10)",
+  12: "var(--space-12)",
+  16: "var(--space-16)",
+  20: "var(--space-20)"
+};
+
+// src/tokens/typography.ts
+var FONT_FAMILY = {
+  sans: "var(--font-family)",
+  mono: "var(--font-family-mono)"
+};
+var FONT_SIZE = {
+  xs: "var(--font-size-xs)",
+  sm: "var(--font-size-sm)",
+  base: "var(--font-size-base)",
+  lg: "var(--font-size-lg)",
+  xl: "var(--font-size-xl)",
+  "2xl": "var(--font-size-2xl)",
+  "3xl": "var(--font-size-3xl)"
+};
+var FONT_WEIGHT = {
+  normal: "var(--font-weight-normal)",
+  medium: "var(--font-weight-medium)",
+  semibold: "var(--font-weight-semibold)",
+  bold: "var(--font-weight-bold)"
+};
+var LINE_HEIGHT = {
+  tight: "var(--line-height-tight)",
+  normal: "var(--line-height-normal)",
+  relaxed: "var(--line-height-relaxed)"
+};
+
+// src/tokens/radius.ts
+var RADIUS = {
+  panel: "var(--radius-panel)",
+  card: "var(--radius-card)",
+  button: "var(--radius-button)",
+  badge: "var(--radius-badge)",
+  pill: "var(--radius-pill)"
+};
+
+// src/tokens/shadows.ts
+var SHADOWS = {
+  glass: {
+    outer: "var(--glass-shadow-outer)",
+    inner: "var(--glass-shadow-inner)",
+    combined: "var(--glass-shadow-combined)",
+    elevated: "var(--glass-shadow-elevated)",
+    elevatedCombined: "var(--glass-shadow-elevated-combined)"
+  },
+  interactive: {
+    rest: "var(--shadow-interactive-rest)",
+    restSubtle: "var(--shadow-interactive-rest-subtle)",
+    restLight: "var(--shadow-interactive-rest-light)",
+    hover: "var(--shadow-interactive-hover)",
+    hoverSubtle: "var(--shadow-interactive-hover-subtle)",
+    active: "var(--shadow-interactive-active)"
+  }
+};
+
+// src/tokens/z-index.ts
+var Z_INDEX = {
+  void: "var(--z-void)",
+  glassPanel: "var(--z-glass-panel)",
+  ornament: "var(--z-ornament)",
+  dropdown: "var(--z-dropdown)",
+  modalBackdrop: "var(--z-modal-backdrop)",
+  modal: "var(--z-modal)",
+  tooltip: "var(--z-tooltip)"
+};
+
+// src/tokens/breakpoints.ts
+var BREAKPOINTS = {
+  "3xs": 320,
+  "2xs": 375,
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  "3xl": 1920,
+  "4xl": 2560,
+  "5xl": 3840
+};
+var MEDIA_QUERIES = {
+  "3xs": `(min-width: ${BREAKPOINTS["3xs"]}px)`,
+  "2xs": `(min-width: ${BREAKPOINTS["2xs"]}px)`,
+  xs: `(min-width: ${BREAKPOINTS.xs}px)`,
+  sm: `(min-width: ${BREAKPOINTS.sm}px)`,
+  md: `(min-width: ${BREAKPOINTS.md}px)`,
+  lg: `(min-width: ${BREAKPOINTS.lg}px)`,
+  xl: `(min-width: ${BREAKPOINTS.xl}px)`,
+  "2xl": `(min-width: ${BREAKPOINTS["2xl"]}px)`,
+  "3xl": `(min-width: ${BREAKPOINTS["3xl"]}px)`,
+  "4xl": `(min-width: ${BREAKPOINTS["4xl"]}px)`,
+  "5xl": `(min-width: ${BREAKPOINTS["5xl"]}px)`
+};
+var STORAGE_KEY = "void-appearance-settings";
+var DEFAULT_SETTINGS = {
+  theme: "dark",
+  brand: "default",
+  navPlacement: "left",
+  density: "comfortable",
+  radius: "playful",
+  customColor: "#f97316"
+  // Default orange as fallback
+};
+function hexToRgb(hex) {
+  const cleanHex = hex.replace(/^#/, "");
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) {
+    return "249, 115, 22";
+  }
+  return `${r}, ${g}, ${b}`;
+}
+function generateSecondaryColor(hex) {
+  const cleanHex = hex.replace(/^#/, "");
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) {
+    return "255, 208, 0";
+  }
+  const secondary = {
+    r: Math.min(255, g + 50),
+    g: Math.min(255, b + 100),
+    b: Math.min(255, r)
+  };
+  return `${secondary.r}, ${secondary.g}, ${secondary.b}`;
+}
+function loadSettings() {
+  if (typeof window === "undefined") return DEFAULT_SETTINGS;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return {
+        theme: parsed.theme || DEFAULT_SETTINGS.theme,
+        brand: parsed.brand || DEFAULT_SETTINGS.brand,
+        navPlacement: parsed.navPlacement || DEFAULT_SETTINGS.navPlacement,
+        density: parsed.density || DEFAULT_SETTINGS.density,
+        radius: parsed.radius || DEFAULT_SETTINGS.radius,
+        customColor: parsed.customColor || DEFAULT_SETTINGS.customColor
+      };
+    }
+  } catch {
+  }
+  return {
+    ...DEFAULT_SETTINGS,
+    theme: "dark"
+  };
+}
+function saveSettings(settings) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch {
+  }
+}
+function applySettings(settings) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  root.setAttribute("data-theme", settings.theme);
+  root.setAttribute("data-brand", settings.brand);
+  root.setAttribute("data-nav", settings.navPlacement);
+  root.setAttribute("data-density", settings.density);
+  root.setAttribute("data-radius", settings.radius);
+  if (settings.brand === "custom") {
+    const primaryRgb = hexToRgb(settings.customColor);
+    const secondaryRgb = generateSecondaryColor(settings.customColor);
+    root.style.setProperty("--custom-accent-rgb", primaryRgb);
+    root.style.setProperty("--custom-accent2-rgb", secondaryRgb);
+  } else {
+    root.style.removeProperty("--custom-accent-rgb");
+    root.style.removeProperty("--custom-accent2-rgb");
+  }
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var AppearanceContext = createContext(null);
+function AppearanceProvider({
+  initialSettings,
+  disablePersistence = false,
+  children
+}) {
+  const [settings, setSettings] = useState(() => ({
+    ...DEFAULT_SETTINGS,
+    ...initialSettings
+  }));
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => {
+    if (!disablePersistence) {
+      const loaded = loadSettings();
+      setSettings({
+        ...loaded,
+        // initialSettings still take priority over localStorage
+        ...initialSettings
+      });
+    }
+    setHydrated(true);
+  }, []);
+  useEffect(() => {
+    applySettings(settings);
+    if (!disablePersistence && hydrated) {
+      saveSettings(settings);
+    }
+  }, [settings, disablePersistence, hydrated]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: light)");
+    const handleChange = (e) => {
+      setSettings((prev) => {
+        if (prev.theme === "light-contrast" || prev.theme === "dark-contrast") {
+          return prev;
+        }
+        return {
+          ...prev,
+          theme: e.matches ? "light" : "dark"
+        };
+      });
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = () => {
+      applySettings(settings);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [settings]);
+  const setTheme = useCallback((theme) => {
+    setSettings((prev) => ({ ...prev, theme }));
+  }, []);
+  const setBrand = useCallback((brand) => {
+    setSettings((prev) => ({ ...prev, brand }));
+  }, []);
+  const setNavPlacement = useCallback((navPlacement) => {
+    setSettings((prev) => ({ ...prev, navPlacement }));
+  }, []);
+  const setDensity = useCallback((density) => {
+    setSettings((prev) => ({ ...prev, density }));
+  }, []);
+  const setRadius = useCallback((radius) => {
+    setSettings((prev) => ({ ...prev, radius }));
+  }, []);
+  const setCustomColor = useCallback((customColor) => {
+    setSettings((prev) => ({ ...prev, customColor, brand: "custom" }));
+  }, []);
+  const setAppearance = useCallback((partial) => {
+    setSettings((prev) => ({ ...prev, ...partial }));
+  }, []);
+  const resetToDefaults = useCallback(() => {
+    setSettings(DEFAULT_SETTINGS);
+  }, []);
+  const contextValue = {
+    ...settings,
+    setTheme,
+    setBrand,
+    setNavPlacement,
+    setDensity,
+    setRadius,
+    setCustomColor,
+    setAppearance,
+    resetToDefaults
+  };
+  return /* @__PURE__ */ jsx(AppearanceContext.Provider, { value: contextValue, children });
+}
+function useAppearance() {
+  const context = useContext(AppearanceContext);
+  if (!context) {
+    throw new Error("useAppearance must be used within an AppearanceProvider");
+  }
+  return context;
+}
+function initializeAppearance(settings) {
+  const loaded = loadSettings();
+  const merged = { ...loaded, ...settings };
+  applySettings(merged);
+}
+var AppearancePanel = React39.forwardRef(
+  ({ className, labels: l }, ref) => {
+    const {
+      theme,
+      brand,
+      navPlacement,
+      density,
+      radius,
+      customColor,
+      setTheme,
+      setBrand,
+      setNavPlacement,
+      setDensity,
+      setRadius,
+      setCustomColor,
+      resetToDefaults
+    } = useAppearance();
+    const colorPickerId = useId();
+    const themeOptions = [
+      { value: "light", label: l?.themeLight ?? "Light" },
+      { value: "light-contrast", label: l?.themeLightContrast ?? "Light (High Contrast)" },
+      { value: "dark", label: l?.themeDark ?? "Dark" },
+      { value: "dark-contrast", label: l?.themeDarkContrast ?? "Dark (High Contrast)" }
+    ];
+    const brandOptions = [
+      { value: "default", label: l?.brandDefault ?? "Default", description: l?.brandDefaultDescription ?? "Warm Intelligence" },
+      { value: "salesmind", label: l?.brandSalesmind ?? "SalesMind", description: l?.brandSalesmindDescription ?? "Pink-red + Gold" },
+      { value: "custom", label: l?.brandCustom ?? "Custom", description: l?.brandCustomDescription ?? "Your color" }
+    ];
+    const navOptions = [
+      { value: "left", label: l?.navLeft ?? "Left Sidebar" },
+      { value: "right", label: l?.navRight ?? "Right Sidebar" },
+      { value: "bottom", label: l?.navBottom ?? "Bottom Tabs" }
+    ];
+    const densityOptions = [
+      { value: "comfortable", label: l?.densityComfortable ?? "Comfortable", description: l?.densityComfortableDescription ?? "Generous spacing" },
+      { value: "compact", label: l?.densityCompact ?? "Compact", description: l?.densityCompactDescription ?? "Higher density" }
+    ];
+    const radiusOptions = [
+      { value: "playful", label: l?.radiusPlayful ?? "Playful", description: l?.radiusPlayfulDescription ?? "Rounded corners" },
+      { value: "sharp", label: l?.radiusSharp ?? "Sharp", description: l?.radiusSharpDescription ?? "Technical feel" }
+    ];
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx28("ds-appearance-panel", className), children: [
+      /* @__PURE__ */ jsx("h3", { className: "ds-appearance-panel__title", children: l?.title ?? "Appearance Settings" }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.themeHeading ?? "Theme" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: themeOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx28(
+              "ds-appearance-panel__option",
+              theme === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "theme",
+                  value: option.value,
+                  checked: theme === option.value,
+                  onChange: () => setTheme(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.brandHeading ?? "Brand" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: brandOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx28(
+              "ds-appearance-panel__option",
+              brand === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "brand",
+                  value: option.value,
+                  checked: brand === option.value,
+                  onChange: () => setBrand(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        )) }),
+        brand === "custom" && /* @__PURE__ */ jsxs("div", { className: "ds-appearance-panel__color-picker", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: colorPickerId, className: "ds-appearance-panel__color-label", children: l?.accentColorLabel ?? "Accent Color" }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-appearance-panel__color-input-wrapper", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                id: colorPickerId,
+                value: customColor,
+                onChange: (e) => setCustomColor(e.target.value),
+                className: "ds-appearance-panel__color-input"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__color-value", children: customColor.toUpperCase() })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.densityHeading ?? "Density" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: densityOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx28(
+              "ds-appearance-panel__option",
+              "ds-appearance-panel__option--toggle",
+              density === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "density",
+                  value: option.value,
+                  checked: density === option.value,
+                  onChange: () => setDensity(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.geometryHeading ?? "Geometry" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: radiusOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx28(
+              "ds-appearance-panel__option",
+              "ds-appearance-panel__option--toggle",
+              radius === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "radius",
+                  value: option.value,
+                  checked: radius === option.value,
+                  onChange: () => setRadius(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "ds-appearance-panel__option-content", children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label }),
+                /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-description", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
+        /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.navHeading ?? "Navigation Layout" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: navOptions.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: clsx28(
+              "ds-appearance-panel__option",
+              navPlacement === option.value && "ds-appearance-panel__option--active"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "nav",
+                  value: option.value,
+                  checked: navPlacement === option.value,
+                  onChange: () => setNavPlacement(option.value),
+                  className: "ds-appearance-panel__radio"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "ds-appearance-panel__option-label", children: option.label })
+            ]
+          },
+          option.value
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: resetToDefaults, className: "ds-appearance-panel__reset", children: l?.resetLabel ?? "Reset to Defaults" })
+    ] });
+  }
+);
+AppearancePanel.displayName = "AppearancePanel";
+var Button = React39.forwardRef(
+  ({ className, variant = "primary", size = "md", asChild = false, isLoading = false, children, disabled, ...props }, ref) => {
+    const buttonClass = clsx28(
+      "ds-button",
+      `ds-button--${variant}`,
+      size === "icon" ? "ds-button--icon ds-button--md" : `ds-button--${size}`,
+      isLoading && "ds-button--loading",
+      className
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsx(
+        Slot,
+        {
+          ref,
+          "aria-disabled": isLoading || disabled || void 0,
+          className: buttonClass,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        disabled: isLoading || disabled,
+        className: buttonClass,
+        ...props,
+        children: [
+          isLoading && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "ds-button__spinner",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "1em",
+              height: "1em",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: clsx28("ds-button__content", isLoading && "ds-button__content--hidden"), children })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var ButtonGroup = React39.forwardRef(
+  ({ orientation = "horizontal", fullWidth = false, size = "md", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: clsx28(
+          "ds-button-group",
+          `ds-button-group--${orientation}`,
+          fullWidth && "ds-button-group--full-width",
+          className
+        ),
+        "data-size": size,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var TextField = React39.forwardRef(
+  ({ className, label, error, helperText, endAdornment, id, ...props }, ref) => {
+    const generatedId = React39.useId();
+    const inputId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-textfield", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-textfield__label", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-textfield__input-wrapper", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: inputId,
+            ref,
+            className: clsx28(
+              "ds-textfield__input",
+              error && "ds-textfield__input--error",
+              endAdornment && "ds-textfield__input--adorned"
+            ),
+            ...props
+          }
+        ),
+        endAdornment && /* @__PURE__ */ jsx("div", { className: "ds-textfield__adornment", children: endAdornment })
+      ] }),
+      helperText && /* @__PURE__ */ jsx("span", { className: clsx28("ds-textfield__helper", error && "ds-textfield__helper--error"), children: helperText })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+var TextArea = forwardRef(
+  ({ className, label, error, helperText, id, ...props }, ref) => {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-textarea", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-textarea__label", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "ds-textarea__input-wrapper", children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id: inputId,
+          ref,
+          className: clsx28("ds-textarea__input", error && "ds-textarea__input--error"),
+          ...props
+        }
+      ) }),
+      helperText && /* @__PURE__ */ jsx("span", { className: clsx28("ds-textarea__helper", error && "ds-textarea__helper--error"), children: helperText })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+var Checkbox = React39.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const generatedId = React39.useId();
+    const checkboxId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-checkbox-wrapper", className), children: [
+      /* @__PURE__ */ jsx(Checkbox$1.Root, { id: checkboxId, ref, className: "ds-checkbox", ...props, children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: "ds-checkbox__indicator", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 14 14",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "ds-checkbox__icon",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) }) }),
+      label && /* @__PURE__ */ jsx("label", { htmlFor: checkboxId, className: "ds-checkbox__label", children: label })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var RadioGroupContext = createContext(null);
+var RadioGroup = forwardRef(
+  ({
+    className,
+    name,
+    value,
+    onValueChange,
+    orientation = "vertical",
+    children,
+    ...props
+  }, ref) => {
+    const generatedName = useId();
+    const groupName = name || generatedName;
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { name: groupName, value, onChange: onValueChange }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        className: clsx28(
+          "ds-radio-group",
+          orientation === "horizontal" && "ds-radio-group--horizontal",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Radio = forwardRef(
+  ({ className, label, value, disabled, id, onChange, ...props }, ref) => {
+    const context = useContext(RadioGroupContext);
+    const generatedId = useId();
+    const radioId = id || generatedId;
+    const name = context?.name || props.name;
+    const isChecked = context?.value !== void 0 ? context.value === value : props.checked;
+    const handleChange = (e) => {
+      onChange?.(e);
+      context?.onChange?.(value);
+    };
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: clsx28("ds-radio-wrapper", disabled && "ds-radio-wrapper--disabled", className),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              className: "ds-radio-input",
+              id: radioId,
+              name,
+              value,
+              checked: isChecked,
+              onChange: handleChange,
+              disabled,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: clsx28("ds-radio", isChecked && "ds-radio--checked"), children: /* @__PURE__ */ jsx("div", { className: "ds-radio__indicator" }) }),
+          label && /* @__PURE__ */ jsx("span", { className: "ds-radio__label", children: label })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var Switch = React39.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const generatedId = React39.useId();
+    const switchId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-switch-wrapper", className), children: [
+      /* @__PURE__ */ jsx(Switch$1.Root, { id: switchId, ref, className: "ds-switch", ...props, children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "ds-switch__thumb" }) }),
+      label && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: "ds-switch__label", children: label })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  required,
+  name,
+  items,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: onValueChange ? (val) => onValueChange(val) : void 0,
+      disabled,
+      required,
+      name,
+      items,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+var SelectTrigger = React39.forwardRef(
+  ({ className, placeholder = "Select...", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { className: "ds-select__trigger-wrapper", children: /* @__PURE__ */ jsxs(
+      Select$1.Trigger,
+      {
+        ref,
+        className: clsx28("ds-select__trigger", `ds-select__trigger--${size}`, className),
+        "aria-label": props["aria-label"] || (typeof placeholder === "string" ? placeholder : "Select"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.Value, { className: "ds-select__value", placeholder }),
+          /* @__PURE__ */ jsx(Select$1.Icon, { className: "ds-select__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+        ]
+      }
+    ) });
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React39.forwardRef(
+  ({ className, side = "bottom", sideOffset = 4, align = "start", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Positioner,
+      {
+        side,
+        sideOffset,
+        align,
+        alignItemWithTrigger: false,
+        children: /* @__PURE__ */ jsx(Select$1.Popup, { ref, className: clsx28("ds-select__content", className), ...props, children: /* @__PURE__ */ jsx(Select$1.List, { className: "ds-select__list", children }) })
+      }
+    ) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = React39.forwardRef(
+  ({ className, value, children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Select$1.Item,
+      {
+        ref,
+        value,
+        disabled,
+        className: clsx28("ds-select__item", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: "ds-select__item-indicator", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectGroup = React39.forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Select$1.Group, { ref, className: clsx28("ds-select__group", className), ...props, children: [
+      label && /* @__PURE__ */ jsx(Select$1.GroupLabel, { className: "ds-select__group-label", children: label }),
+      children
+    ] });
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+var SelectSeparator = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-select__separator", className), ...props });
+});
+SelectSeparator.displayName = "SelectSeparator";
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+var Dialog = Dialog$1.Root;
+var DialogTrigger = Dialog$1.Trigger;
+var DialogClose = Dialog$1.Close;
+var DialogTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Title, { ref, className: clsx28("ds-dialog__title", className), ...props }));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog$1.Description,
+  {
+    ref,
+    className: clsx28("ds-dialog__description", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var DialogContent = React39.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "ds-dialog__backdrop" }),
+    /* @__PURE__ */ jsx(Dialog$1.Popup, { ref, className: clsx28("ds-dialog__content", className), ...props, children })
+  ] })
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-dialog__header", className), ...props })
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-dialog__footer", className), ...props })
+);
+DialogFooter.displayName = "DialogFooter";
+var TooltipProvider = Tooltip$1.Provider;
+var TooltipRoot = Tooltip$1.Root;
+var TooltipTrigger = Tooltip$1.Trigger;
+var TooltipContent = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { sideOffset: 5, children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, { ref, className: clsx28("ds-tooltip__content", className), ...props, children: [
+  children,
+  /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "ds-tooltip__arrow" })
+] }) }) }));
+TooltipContent.displayName = "TooltipContent";
+var Tooltip = ({ content, children, delay = 200 }) => {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsxs(Tooltip$1.Root, { children: [
+    /* @__PURE__ */ jsx(Tooltip$1.Trigger, { render: children }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: content })
+  ] }) });
+};
+var Badge = React39.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: clsx28("ds-badge", `ds-badge--${variant}`, className),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var StatusBadge = React39.forwardRef(
+  ({ variant = "default", size = "md", dot = false, className, children }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: clsx28(
+          "ds-status-badge",
+          `ds-status-badge--${variant}`,
+          `ds-status-badge--${size}`,
+          dot && "ds-status-badge--dot",
+          className
+        ),
+        children: [
+          dot && /* @__PURE__ */ jsx("span", { className: "ds-status-badge__dot" }),
+          children
+        ]
+      }
+    );
+  }
+);
+StatusBadge.displayName = "StatusBadge";
+var DefaultIcons = {
+  info: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+      ]
+    }
+  ),
+  success: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+      ]
+    }
+  ),
+  warning: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  ),
+  error: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+        /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+      ]
+    }
+  )
+};
+var Alert = React39.forwardRef(
+  ({ className, variant = "info", title, icon, children, ...props }, ref) => {
+    const renderedIcon = icon || DefaultIcons[variant];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: clsx28("ds-alert", `ds-alert--${variant}`, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ds-alert__icon", "aria-hidden": "true", children: renderedIcon }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-alert__content", children: [
+            title && /* @__PURE__ */ jsx("div", { className: "ds-alert__title", children: title }),
+            children && /* @__PURE__ */ jsx("div", { className: "ds-alert__description", children })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+var ToastContext = createContext(void 0);
+var useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastItem = ({
+  title,
+  description,
+  variant = "info",
+  action,
+  onDismiss,
+  dismissLabel = "Close"
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-toast-root", `ds-toast--${variant}`), "data-state": "open", role: "alert", children: [
+    title && /* @__PURE__ */ jsx("div", { className: "ds-toast-title", children: title }),
+    description && /* @__PURE__ */ jsx("div", { className: "ds-toast-description", children: description }),
+    action && /* @__PURE__ */ jsx("div", { className: "ds-toast-action", children: action }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onDismiss,
+        style: {
+          background: "transparent",
+          border: "none",
+          color: "var(--text-tertiary)",
+          cursor: "pointer",
+          padding: "4px",
+          marginLeft: "auto",
+          gridColumn: "action",
+          alignSelf: "start"
+        },
+        "aria-label": dismissLabel,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const [mounted, setMounted] = useState(false);
+  const idCounter = useRef(0);
+  useEffect(() => setMounted(true), []);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const addToast = useCallback(
+    ({ duration = 5e3, ...props }) => {
+      const id = `toast-${++idCounter.current}`;
+      const newToast = { ...props, id, duration };
+      setToasts((prev) => [...prev, newToast]);
+      if (duration !== Infinity) {
+        setTimeout(() => {
+          removeToast(id);
+        }, duration);
+      }
+    },
+    [removeToast]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+    children,
+    mounted && createPortal(
+      /* @__PURE__ */ jsx("div", { className: "ds-toast-viewport", children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, { ...toast, onDismiss: () => removeToast(toast.id) }, toast.id)) }),
+      document.body
+    )
+  ] });
+};
+var DropdownMenu = Menu.Root;
+var DropdownMenuTrigger = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Menu.Trigger,
+    {
+      ref,
+      className: clsx28("ds-dropdown-menu__trigger", className),
+      ...props
+    }
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var DropdownMenuContent = React39.forwardRef(
+  ({ className, side = "bottom", align = "start", sideOffset = 4, alignOffset = 0, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+      Menu.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+        children: /* @__PURE__ */ jsx(
+          Menu.Popup,
+          {
+            ref,
+            className: clsx28("ds-dropdown-menu__content", className),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React39.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Menu.Item, { ref, className: clsx28("ds-dropdown-menu__item", className), ...props });
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-dropdown-menu__separator", className), ...props });
+});
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuLabel = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-dropdown-menu__label", className), ...props });
+});
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var EmptyState = React39.forwardRef(
+  ({ icon, title, description, action, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx28("ds-empty-state", className), ...props, children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "ds-empty-state__icon", children: icon }),
+      /* @__PURE__ */ jsx("h3", { className: "ds-empty-state__title", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "ds-empty-state__description", children: description }),
+      action && /* @__PURE__ */ jsx("div", { className: "ds-empty-state__action", children: action })
+    ] });
+  }
+);
+EmptyState.displayName = "EmptyState";
+var Card = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-card", className), ...props })
+);
+Card.displayName = "Card";
+var CardHeader = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-card__header", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: clsx28("ds-card__title", className), ...props }));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx28("ds-card__description", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-card__content", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-card__footer", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+var AccordionContext = React39.createContext(null);
+function useAccordionContext() {
+  const ctx = React39.useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error("Accordion compound components must be used within <Accordion>");
+  }
+  return ctx;
+}
+var AccordionItemContext = React39.createContext(null);
+function useAccordionItemContext() {
+  const ctx = React39.useContext(AccordionItemContext);
+  if (!ctx) {
+    throw new Error("AccordionTrigger/AccordionContent must be used within <AccordionItem>");
+  }
+  return ctx;
+}
+var Accordion = React39.forwardRef(
+  ({ className, type = "single", defaultValue = [], collapsible: _collapsible, children, ...props }, ref) => {
+    const [openItems, setOpenItems] = React39.useState(
+      () => new Set(defaultValue)
+    );
+    const toggle = React39.useCallback(
+      (value) => {
+        setOpenItems((prev) => {
+          const next = new Set(prev);
+          if (next.has(value)) {
+            next.delete(value);
+          } else {
+            if (type === "single") {
+              next.clear();
+            }
+            next.add(value);
+          }
+          return next;
+        });
+      },
+      [type]
+    );
+    const contextValue = React39.useMemo(
+      () => ({ openItems, toggle }),
+      [openItems, toggle]
+    );
+    return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-accordion", className), ...props, children }) });
+  }
+);
+Accordion.displayName = "Accordion";
+var AccordionItem = React39.forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    const { openItems } = useAccordionContext();
+    const isOpen = openItems.has(value);
+    const contextValue = React39.useMemo(
+      () => ({ value, isOpen }),
+      [value, isOpen]
+    );
+    return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28("ds-accordion__item", className),
+        "data-state": isOpen ? "open" : "closed",
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React39.forwardRef(({ className, children, ...props }, ref) => {
+  const { toggle } = useAccordionContext();
+  const { value, isOpen } = useAccordionItemContext();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx28("ds-accordion__trigger", className),
+      "aria-expanded": isOpen,
+      onClick: () => toggle(value),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ds-accordion__trigger-text", children }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "ds-accordion__chevron",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+          }
+        )
+      ]
+    }
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React39.forwardRef(({ className, children, ...props }, ref) => {
+  const { isOpen } = useAccordionItemContext();
+  const contentRef = React39.useRef(null);
+  const [height, setHeight] = React39.useState(
+    isOpen ? void 0 : 0
+  );
+  React39.useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (isOpen) {
+      const scrollHeight = el.scrollHeight;
+      setHeight(scrollHeight);
+      const timer = setTimeout(() => setHeight(void 0), 200);
+      return () => clearTimeout(timer);
+    } else {
+      const scrollHeight = el.scrollHeight;
+      setHeight(scrollHeight);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setHeight(0);
+        });
+      });
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: clsx28("ds-accordion__content", className),
+      style: {
+        height: height !== void 0 ? `${height}px` : "auto"
+      },
+      hidden: !isOpen && height === 0,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { ref, className: "ds-accordion__content-inner", children })
+    }
+  );
+});
+AccordionContent.displayName = "AccordionContent";
+var Label = React39.forwardRef(
+  ({ className, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        className: clsx28("ds-label", disabled && "ds-label--disabled", className),
+        "data-disabled": disabled || void 0,
+        ...props
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var Skeleton = React39.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28("ds-skeleton", className),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var Separator = React39.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: clsx28(
+          "ds-separator",
+          `ds-separator--${orientation}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+var SheetContext = React39.createContext(void 0);
+function useSheetContext() {
+  const ctx = React39.useContext(SheetContext);
+  if (!ctx) {
+    throw new Error("Sheet compound components must be used within a <Sheet> parent.");
+  }
+  return ctx;
+}
+var Sheet = ({ open: controlledOpen, onOpenChange, children }) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = React39.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(SheetContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
+};
+Sheet.displayName = "Sheet";
+var SheetTrigger = React39.forwardRef(
+  ({ onClick, asChild = false, ...props }, ref) => {
+    const { onOpenChange } = useSheetContext();
+    const handleClick = (e) => {
+      onOpenChange(true);
+      onClick?.(e);
+    };
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { ref, type: "button", onClick: handleClick, ...props });
+  }
+);
+SheetTrigger.displayName = "SheetTrigger";
+var SheetClose = React39.forwardRef(
+  ({ onClick, asChild = false, ...props }, ref) => {
+    const { onOpenChange } = useSheetContext();
+    const handleClick = (e) => {
+      onOpenChange(false);
+      onClick?.(e);
+    };
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { ref, type: "button", onClick: handleClick, ...props });
+  }
+);
+SheetClose.displayName = "SheetClose";
+var SheetContent = React39.forwardRef(
+  ({ side = "right", className, children, ...props }, ref) => {
+    const { open, onOpenChange } = useSheetContext();
+    if (!open) return null;
+    return createPortal(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-sheet__backdrop",
+            onClick: () => onOpenChange(false),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            role: "dialog",
+            className: clsx28("ds-sheet__content", `ds-sheet__content--${side}`, className),
+            ...props,
+            children
+          }
+        )
+      ] }),
+      document.body
+    );
+  }
+);
+SheetContent.displayName = "SheetContent";
+var SheetHeader = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-sheet__header", className), ...props })
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h2", { ref, className: clsx28("ds-sheet__title", className), ...props }));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx28("ds-sheet__description", className), ...props }));
+SheetDescription.displayName = "SheetDescription";
+var SheetFooter = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-sheet__footer", className), ...props })
+);
+SheetFooter.displayName = "SheetFooter";
+var AvatarContext = React39.createContext({
+  hasImage: false,
+  imageError: false,
+  onImageError: () => {
+  }
+});
+var Avatar = React39.forwardRef(
+  ({ size = "md", className, children, ...props }, ref) => {
+    const [imageError, setImageError] = React39.useState(false);
+    const [hasImage, setHasImage] = React39.useState(false);
+    React39.useEffect(() => {
+      let found = false;
+      React39.Children.forEach(children, (child) => {
+        if (React39.isValidElement(child) && child.type === AvatarImage) {
+          found = true;
+        }
+      });
+      setHasImage(found);
+    }, [children]);
+    const onImageError = React39.useCallback(() => {
+      setImageError(true);
+    }, []);
+    return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { hasImage, imageError, onImageError }, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: clsx28("ds-avatar", `ds-avatar--${size}`, className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React39.forwardRef(({ className, onError, ...props }, ref) => {
+  const { imageError, onImageError } = React39.useContext(AvatarContext);
+  const handleError = (e) => {
+    onImageError();
+    onError?.(e);
+  };
+  if (imageError) return null;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      className: clsx28("ds-avatar__image", className),
+      onError: handleError,
+      ...props
+    }
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React39.forwardRef(({ className, ...props }, ref) => {
+  const { hasImage, imageError } = React39.useContext(AvatarContext);
+  if (hasImage && !imageError) return null;
+  return /* @__PURE__ */ jsx("span", { ref, className: clsx28("ds-avatar__fallback", className), ...props });
+});
+AvatarFallback.displayName = "AvatarFallback";
+var PopoverContext = React39.createContext(null);
+function usePopoverContext() {
+  const context = React39.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover compound components must be used within <Popover>");
+  }
+  return context;
+}
+var Popover = ({ open: controlledOpen, onOpenChange, children }) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = React39.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setUncontrolledOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = React39.useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+  const contextValue = React39.useMemo(
+    () => ({ open, setOpen, toggle }),
+    [open, setOpen, toggle]
+  );
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "ds-popover", children }) });
+};
+Popover.displayName = "Popover";
+var PopoverTrigger = React39.forwardRef(
+  ({ className, onClick, asChild = false, ...props }, ref) => {
+    const { toggle } = usePopoverContext();
+    const handleClick = (e) => {
+      toggle();
+      onClick?.(e);
+    };
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        type: "button",
+        className: clsx28("ds-popover__trigger", className),
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverContent = React39.forwardRef(
+  ({ className, side = "bottom", align = "center", ...props }, ref) => {
+    const { open } = usePopoverContext();
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28(
+          "ds-popover__content",
+          `ds-popover__content--${side}`,
+          `ds-popover__content--align-${align}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var PopoverClose = React39.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { setOpen } = usePopoverContext();
+  const handleClick = (e) => {
+    setOpen(false);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx28("ds-popover__close", className),
+      onClick: handleClick,
+      ...props
+    }
+  );
+});
+PopoverClose.displayName = "PopoverClose";
+var Progress = React39.forwardRef(
+  ({ className, value = 0, max = 100, ...props }, ref) => {
+    const percentage = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: clsx28("ds-progress", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-progress__indicator",
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var ScrollArea = React39.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-scroll-area", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "ds-scroll-area__viewport", children }) });
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+var ScrollBar = React39.forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28(
+          "ds-scroll-area__scrollbar",
+          `ds-scroll-area__scrollbar--${orientation}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+ScrollBar.displayName = "ScrollBar";
+var Breadcrumb = React39.forwardRef(
+  ({ className, "aria-label": ariaLabel = "Breadcrumb", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: clsx28("ds-breadcrumb", className),
+        ...props
+      }
+    );
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: clsx28("ds-breadcrumb__list", className),
+      ...props
+    }
+  );
+});
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      className: clsx28("ds-breadcrumb__item", className),
+      ...props
+    }
+  );
+});
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React39.forwardRef(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: clsx28("ds-breadcrumb__link", className),
+      ...props
+    }
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "link",
+      "aria-current": "page",
+      "aria-disabled": "true",
+      className: clsx28("ds-breadcrumb__page", className),
+      ...props
+    }
+  );
+});
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = React39.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: clsx28("ds-breadcrumb__separator", className),
+      ...props,
+      children: children ?? "/"
+    }
+  );
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: clsx28("ds-breadcrumb__ellipsis", className),
+      ...props,
+      children: "\u2026"
+    }
+  );
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+var Toggle = React39.forwardRef(
+  ({
+    className,
+    pressed: controlledPressed,
+    onPressedChange,
+    variant = "default",
+    size = "md",
+    onClick,
+    ...props
+  }, ref) => {
+    const [uncontrolledPressed, setUncontrolledPressed] = React39.useState(false);
+    const isControlled = controlledPressed !== void 0;
+    const pressed = isControlled ? controlledPressed : uncontrolledPressed;
+    const handleClick = (e) => {
+      const next = !pressed;
+      if (!isControlled) {
+        setUncontrolledPressed(next);
+      }
+      onPressedChange?.(next);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: clsx28(
+          "ds-toggle",
+          `ds-toggle--${variant}`,
+          `ds-toggle--${size}`,
+          className
+        ),
+        "aria-pressed": pressed,
+        "data-state": pressed ? "on" : "off",
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var ToggleGroupContext = React39.createContext({
+  type: "single",
+  value: [],
+  onItemToggle: () => {
+  }
+});
+var ToggleGroup = React39.forwardRef(
+  ({ className, type, value, onValueChange, children, ...props }, ref) => {
+    const normalizedValue = React39.useMemo(() => {
+      if (value === void 0) return [];
+      return Array.isArray(value) ? value : [value];
+    }, [value]);
+    const onItemToggle = React39.useCallback(
+      (itemValue) => {
+        if (type === "single") {
+          const next = normalizedValue.includes(itemValue) ? "" : itemValue;
+          onValueChange?.(next);
+        } else {
+          const next = normalizedValue.includes(itemValue) ? normalizedValue.filter((v) => v !== itemValue) : [...normalizedValue, itemValue];
+          onValueChange?.(next);
+        }
+      },
+      [type, normalizedValue, onValueChange]
+    );
+    const ctx = React39.useMemo(
+      () => ({ type, value: normalizedValue, onItemToggle }),
+      [type, normalizedValue, onItemToggle]
+    );
+    return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: clsx28("ds-toggle-group", className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+var ToggleGroupItem = React39.forwardRef(({ className, value, children, onClick, ...props }, ref) => {
+  const ctx = React39.useContext(ToggleGroupContext);
+  const pressed = ctx.value.includes(value);
+  const handleClick = (e) => {
+    ctx.onItemToggle(value);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-pressed": pressed,
+      className: clsx28(
+        "ds-toggle-group__item",
+        pressed && "ds-toggle-group__item--pressed",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+var Slider = React39.forwardRef(
+  ({
+    className,
+    value: controlledValue,
+    defaultValue = 50,
+    min = 0,
+    max = 100,
+    step = 1,
+    onValueChange,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React39.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = (e) => {
+      const next = Number(e.target.value);
+      if (!isControlled) {
+        setUncontrolledValue(next);
+      }
+      onValueChange?.(next);
+    };
+    const percentage = (value - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx28("ds-slider", disabled && "ds-slider--disabled", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "ds-slider__track", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ds-slider__range",
+              style: { width: `${percentage}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              className: "ds-slider__thumb",
+              role: "slider",
+              min,
+              max,
+              step,
+              value,
+              disabled,
+              onChange: handleChange,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuenow": value
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+var CollapsibleContext = React39.createContext(null);
+function useCollapsibleContext() {
+  const context = React39.useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("Collapsible compound components must be used within <Collapsible>");
+  }
+  return context;
+}
+var Collapsible = React39.forwardRef(
+  ({ className, open: controlledOpen, onOpenChange, children, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(false);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const toggle = React39.useCallback(() => {
+      const next = !open;
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    }, [open, isControlled, onOpenChange]);
+    const contextValue = React39.useMemo(
+      () => ({ open, toggle }),
+      [open, toggle]
+    );
+    return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28("ds-collapsible", className),
+        "data-state": open ? "open" : "closed",
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Collapsible.displayName = "Collapsible";
+var CollapsibleTrigger = React39.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { toggle } = useCollapsibleContext();
+  const handleClick = (e) => {
+    toggle();
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx28("ds-collapsible__trigger", className),
+      onClick: handleClick,
+      ...props
+    }
+  );
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+var CollapsibleContent = React39.forwardRef(({ className, children, ...props }, ref) => {
+  const { open } = useCollapsibleContext();
+  const contentRef = React39.useRef(null);
+  const [maxHeight, setMaxHeight] = React39.useState(
+    open ? void 0 : 0
+  );
+  React39.useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (open) {
+      const scrollHeight = el.scrollHeight;
+      setMaxHeight(scrollHeight);
+      const timer = setTimeout(() => setMaxHeight(void 0), 200);
+      return () => clearTimeout(timer);
+    } else {
+      const scrollHeight = el.scrollHeight;
+      setMaxHeight(scrollHeight);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setMaxHeight(0);
+        });
+      });
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: clsx28("ds-collapsible__content", className),
+      "data-state": open ? "open" : "closed",
+      style: {
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : "none"
+      },
+      hidden: !open && maxHeight === 0,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { ref, className: "ds-collapsible__content-inner", children })
+    }
+  );
+});
+CollapsibleContent.displayName = "CollapsibleContent";
+var HoverCardContext = React39.createContext(null);
+function useHoverCardContext() {
+  const context = React39.useContext(HoverCardContext);
+  if (!context) {
+    throw new Error("HoverCard compound components must be used within <HoverCard>");
+  }
+  return context;
+}
+var HoverCard = ({
+  openDelay = 200,
+  closeDelay = 100,
+  children
+}) => {
+  const [open, setOpen] = React39.useState(false);
+  const openTimerRef = React39.useRef();
+  const closeTimerRef = React39.useRef();
+  const onOpen = React39.useCallback(() => {
+    clearTimeout(closeTimerRef.current);
+    openTimerRef.current = setTimeout(() => setOpen(true), openDelay);
+  }, [openDelay]);
+  const onClose = React39.useCallback(() => {
+    clearTimeout(openTimerRef.current);
+    closeTimerRef.current = setTimeout(() => setOpen(false), closeDelay);
+  }, [closeDelay]);
+  React39.useEffect(() => {
+    return () => {
+      clearTimeout(openTimerRef.current);
+      clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+  const contextValue = React39.useMemo(
+    () => ({ open, onOpen, onClose }),
+    [open, onOpen, onClose]
+  );
+  return /* @__PURE__ */ jsx(HoverCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "ds-hover-card", children }) });
+};
+HoverCard.displayName = "HoverCard";
+var HoverCardTrigger = React39.forwardRef(({ className, onMouseEnter, onMouseLeave, ...props }, ref) => {
+  const { onOpen, onClose } = useHoverCardContext();
+  const handleMouseEnter = (e) => {
+    onOpen();
+    onMouseEnter?.(e);
+  };
+  const handleMouseLeave = (e) => {
+    onClose();
+    onMouseLeave?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: clsx28("ds-hover-card__trigger", className),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...props
+    }
+  );
+});
+HoverCardTrigger.displayName = "HoverCardTrigger";
+var HoverCardContent = React39.forwardRef(
+  ({ className, side = "bottom", align = "center", onMouseEnter, onMouseLeave, ...props }, ref) => {
+    const { open, onOpen, onClose } = useHoverCardContext();
+    const handleMouseEnter = (e) => {
+      onOpen();
+      onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+      onClose();
+      onMouseLeave?.(e);
+    };
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28(
+          "ds-hover-card__content",
+          `ds-hover-card__content--${side}`,
+          `ds-hover-card__content--align-${align}`,
+          className
+        ),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props
+      }
+    );
+  }
+);
+HoverCardContent.displayName = "HoverCardContent";
+var AspectRatio = React39.forwardRef(
+  ({ className, ratio = 1, style, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28("ds-aspect-ratio", className),
+        style: { ...style, paddingBottom: `${1 / ratio * 100}%` },
+        ...props,
+        children
+      }
+    );
+  }
+);
+AspectRatio.displayName = "AspectRatio";
+var Pagination = React39.forwardRef(
+  ({ className, "aria-label": ariaLabel = "pagination", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": ariaLabel,
+        className: clsx28("ds-pagination", className),
+        ...props
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+var PaginationContent = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      className: clsx28("ds-pagination__content", className),
+      ...props
+    }
+  );
+});
+PaginationContent.displayName = "PaginationContent";
+var PaginationItem = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      className: clsx28("ds-pagination__item", className),
+      ...props
+    }
+  );
+});
+PaginationItem.displayName = "PaginationItem";
+var PaginationLink = React39.forwardRef(({ className, isActive = false, size = "md", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "aria-current": isActive ? "page" : void 0,
+      className: clsx28(
+        "ds-pagination__link",
+        `ds-pagination__link--${size}`,
+        isActive && "ds-pagination__link--active",
+        className
+      ),
+      ...props
+    }
+  );
+});
+PaginationLink.displayName = "PaginationLink";
+var PaginationPrevious = React39.forwardRef(({ className, label = "Previous", "aria-label": ariaLabel = "Go to previous page", ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: clsx28("ds-pagination__prev", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+});
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = React39.forwardRef(({ className, label = "Next", "aria-label": ariaLabel = "Go to next page", ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: clsx28("ds-pagination__next", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+          }
+        )
+      ]
+    }
+  );
+});
+PaginationNext.displayName = "PaginationNext";
+var PaginationEllipsis = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: clsx28("ds-pagination__ellipsis", className),
+      ...props,
+      children: "..."
+    }
+  );
+});
+PaginationEllipsis.displayName = "PaginationEllipsis";
+var levelToElement = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6"
+};
+var Heading = React39.forwardRef(
+  ({ className, level = "h2", as, children, ...props }, ref) => {
+    const Comp = as ?? levelToElement[level];
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: clsx28("ds-heading", `ds-heading--${level}`, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+var Text = React39.forwardRef(
+  ({ className, variant = "body", as = "p", children, ...props }, ref) => {
+    const Comp = as;
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: clsx28("ds-text", `ds-text--${variant}`, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Text.displayName = "Text";
+var Prose = React39.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28("ds-prose", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Prose.displayName = "Prose";
+var CarouselContext = React39.createContext(void 0);
+function useCarouselContext() {
+  const ctx = React39.useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("Carousel compound components must be used within a <Carousel> parent.");
+  }
+  return ctx;
+}
+var Carousel = React39.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const scrollRef = React39.useRef(null);
+    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: { scrollRef }, children: /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-carousel", className), ...props, children }) });
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = React39.forwardRef(({ className, ...props }, ref) => {
+  const { scrollRef } = useCarouselContext();
+  const mergedRef = React39.useCallback(
+    (node) => {
+      scrollRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref, scrollRef]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: mergedRef, className: clsx28("ds-carousel__content", className), ...props });
+});
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-carousel__item", className), ...props })
+);
+CarouselItem.displayName = "CarouselItem";
+var CarouselPrevious = React39.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Previous slide", ...props }, ref) => {
+  const { scrollRef } = useCarouselContext();
+  const handleClick = (e) => {
+    const container = scrollRef.current;
+    if (container) {
+      const firstItem = container.querySelector(".ds-carousel__item");
+      const scrollAmount = firstItem ? firstItem.clientWidth : container.clientWidth;
+      container.scrollBy({ left: -scrollAmount, behavior: "smooth" });
+    }
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx28("ds-carousel__prev", className),
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10 12L6 8L10 4",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = React39.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Next slide", ...props }, ref) => {
+  const { scrollRef } = useCarouselContext();
+  const handleClick = (e) => {
+    const container = scrollRef.current;
+    if (container) {
+      const firstItem = container.querySelector(".ds-carousel__item");
+      const scrollAmount = firstItem ? firstItem.clientWidth : container.clientWidth;
+      container.scrollBy({ left: scrollAmount, behavior: "smooth" });
+    }
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx28("ds-carousel__next", className),
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 4L10 8L6 12",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+function mergeRefs(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    });
+  };
+}
+var CommandContext = React39.createContext(void 0);
+function useCommandContext() {
+  const ctx = React39.useContext(CommandContext);
+  if (!ctx) {
+    throw new Error("Command compound components must be used within a <Command> parent.");
+  }
+  return ctx;
+}
+function getOptionElements(listEl) {
+  if (!listEl) return [];
+  return Array.from(listEl.querySelectorAll('[role="option"]'));
+}
+var Command = React39.forwardRef(
+  ({ className, value: controlledValue, onValueChange, onKeyDown, children, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React39.useState("");
+    const [activeId, setActiveId] = React39.useState(null);
+    const listRef = React39.useRef(null);
+    const isControlled = controlledValue !== void 0;
+    const search = isControlled ? controlledValue : uncontrolledValue;
+    const inputId = React39.useId();
+    const listId = React39.useId();
+    const setSearch = React39.useCallback(
+      (next) => {
+        if (!isControlled) {
+          setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    React39.useEffect(() => {
+      const frame = requestAnimationFrame(() => {
+        const items = getOptionElements(listRef.current);
+        if (items.length > 0) {
+          setActiveId(items[0].id);
+        } else {
+          setActiveId(null);
+        }
+      });
+      return () => cancelAnimationFrame(frame);
+    }, [search]);
+    const handleKeyDown = React39.useCallback(
+      (e) => {
+        const items = getOptionElements(listRef.current);
+        if (items.length === 0) {
+          onKeyDown?.(e);
+          return;
+        }
+        const currentIndex = items.findIndex((el) => el.id === activeId);
+        switch (e.key) {
+          case "ArrowDown": {
+            e.preventDefault();
+            const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+            setActiveId(items[nextIndex].id);
+            items[nextIndex].scrollIntoView?.({ block: "nearest" });
+            break;
+          }
+          case "ArrowUp": {
+            e.preventDefault();
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+            setActiveId(items[prevIndex].id);
+            items[prevIndex].scrollIntoView?.({ block: "nearest" });
+            break;
+          }
+          case "Home": {
+            e.preventDefault();
+            setActiveId(items[0].id);
+            items[0].scrollIntoView?.({ block: "nearest" });
+            break;
+          }
+          case "End": {
+            e.preventDefault();
+            const lastItem = items[items.length - 1];
+            setActiveId(lastItem.id);
+            lastItem.scrollIntoView?.({ block: "nearest" });
+            break;
+          }
+          case "Enter": {
+            const target = e.target;
+            if (target.getAttribute("role") === "option") break;
+            const activeEl = activeId ? document.getElementById(activeId) : null;
+            if (activeEl) {
+              e.preventDefault();
+              activeEl.click();
+            }
+            break;
+          }
+        }
+        onKeyDown?.(e);
+      },
+      [activeId, onKeyDown]
+    );
+    const ctx = React39.useMemo(
+      () => ({ search, setSearch, activeId, setActiveId, listRef, inputId, listId }),
+      [search, setSearch, activeId, inputId, listId]
+    );
+    return /* @__PURE__ */ jsx(CommandContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28("ds-command", className),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Command.displayName = "Command";
+var CommandInput = React39.forwardRef(({ className, onChange, ...props }, ref) => {
+  const { search, setSearch, activeId, inputId, listId } = useCommandContext();
+  const handleChange = (e) => {
+    setSearch(e.target.value);
+    onChange?.(e);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "ds-command__input-wrapper", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "ds-command__input-icon",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M11 11L14 14",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: inputId,
+        type: "text",
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-controls": listId,
+        "aria-activedescendant": activeId ?? void 0,
+        "aria-autocomplete": "list",
+        autoComplete: "off",
+        className: clsx28("ds-command__input", className),
+        value: search,
+        onChange: handleChange,
+        ...props
+      }
+    )
+  ] });
+});
+CommandInput.displayName = "CommandInput";
+var CommandList = React39.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { listRef, listId } = useCommandContext();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergeRefs(ref, listRef),
+        id: listId,
+        role: "listbox",
+        className: clsx28("ds-command__list", className),
+        ...props
+      }
+    );
+  }
+);
+CommandList.displayName = "CommandList";
+var CommandEmpty = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-command__empty", className), ...props })
+);
+CommandEmpty.displayName = "CommandEmpty";
+var CommandGroup = React39.forwardRef(
+  ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: clsx28("ds-command__group", className), ...props, children: [
+    heading && /* @__PURE__ */ jsx("div", { className: "ds-command__group-heading", children: heading }),
+    children
+  ] })
+);
+CommandGroup.displayName = "CommandGroup";
+var CommandItem = React39.forwardRef(
+  ({ className, onSelect, onClick, onKeyDown, onPointerEnter, id: externalId, ...props }, ref) => {
+    const generatedId = React39.useId();
+    const { activeId, setActiveId } = useCommandContext();
+    const itemId = externalId || generatedId;
+    const isActive = activeId === itemId;
+    const handleClick = (e) => {
+      onSelect?.();
+      onClick?.(e);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        onSelect?.();
+      }
+      onKeyDown?.(e);
+    };
+    const handlePointerEnter = (e) => {
+      setActiveId(itemId);
+      onPointerEnter?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: itemId,
+        role: "option",
+        tabIndex: 0,
+        "aria-selected": isActive,
+        "data-active": isActive || void 0,
+        className: clsx28("ds-command__item", className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onPointerEnter: handlePointerEnter,
+        ...props
+      }
+    );
+  }
+);
+CommandItem.displayName = "CommandItem";
+var CommandSeparator = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-command__separator", className), ...props }));
+CommandSeparator.displayName = "CommandSeparator";
+var SIZE_CLASSES = {
+  sm: "ds-dialog__content--sm",
+  lg: "ds-dialog__content--lg",
+  xl: "ds-dialog__content--xl"
+};
+var CommandDialog = ({
+  open,
+  onOpenChange,
+  title = "Search",
+  size = "lg",
+  className,
+  children
+}) => /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+  DialogContent,
+  {
+    className: clsx28("ds-command-dialog", SIZE_CLASSES[size], className),
+    children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "ds-command-dialog__sr-title", children: title }),
+      children
+    ]
+  }
+) });
+CommandDialog.displayName = "CommandDialog";
+var DrawerContext = React39.createContext(void 0);
+function useDrawerContext() {
+  const ctx = React39.useContext(DrawerContext);
+  if (!ctx) {
+    throw new Error("Drawer compound components must be used within a <Drawer> parent.");
+  }
+  return ctx;
+}
+var Drawer = ({ open: controlledOpen, onOpenChange, children }) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = React39.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
+};
+Drawer.displayName = "Drawer";
+var DrawerTrigger = React39.forwardRef(({ onClick, ...props }, ref) => {
+  const { onOpenChange } = useDrawerContext();
+  const handleClick = (e) => {
+    onOpenChange(true);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx("button", { ref, type: "button", onClick: handleClick, ...props });
+});
+DrawerTrigger.displayName = "DrawerTrigger";
+var DrawerClose = React39.forwardRef(({ onClick, ...props }, ref) => {
+  const { onOpenChange } = useDrawerContext();
+  const handleClick = (e) => {
+    onOpenChange(false);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx("button", { ref, type: "button", onClick: handleClick, ...props });
+});
+DrawerClose.displayName = "DrawerClose";
+var DrawerContent = React39.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { open, onOpenChange } = useDrawerContext();
+    if (!open) return null;
+    return createPortal(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-drawer__backdrop",
+            onClick: () => onOpenChange(false),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref,
+            role: "dialog",
+            className: clsx28("ds-drawer__content", className),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "ds-drawer__handle", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "ds-drawer__handle-bar" }) }),
+              children
+            ]
+          }
+        )
+      ] }),
+      document.body
+    );
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-drawer__header", className), ...props })
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h2", { ref, className: clsx28("ds-drawer__title", className), ...props }));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx28("ds-drawer__description", className), ...props }));
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerFooter = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-drawer__footer", className), ...props })
+);
+DrawerFooter.displayName = "DrawerFooter";
+var DEFAULT_WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var DEFAULT_MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getCalendarGrid(year, month) {
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = getDaysInMonth(year, month);
+  const daysInPrevMonth = getDaysInMonth(year, month - 1);
+  const days = [];
+  for (let i = firstDay - 1; i >= 0; i--) {
+    days.push(new Date(year, month - 1, daysInPrevMonth - i));
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    days.push(new Date(year, month, d));
+  }
+  const remaining = 7 - days.length % 7;
+  if (remaining < 7) {
+    for (let d = 1; d <= remaining; d++) {
+      days.push(new Date(year, month + 1, d));
+    }
+  }
+  const weeks = [];
+  for (let i = 0; i < days.length; i += 7) {
+    weeks.push(days.slice(i, i + 7));
+  }
+  return weeks;
+}
+var Calendar = React39.forwardRef(
+  ({ className, selected, onSelect, month, onMonthChange, labels, ...props }, ref) => {
+    const weekdayLabels = labels?.weekdays ?? DEFAULT_WEEKDAY_LABELS;
+    const monthNames = labels?.months ?? DEFAULT_MONTH_NAMES;
+    const formatDayLabel = labels?.formatDayLabel ?? ((d) => d.toDateString());
+    const today = /* @__PURE__ */ new Date();
+    const [internalMonth, setInternalMonth] = React39.useState(
+      () => month ?? selected ?? /* @__PURE__ */ new Date()
+    );
+    const displayedMonth = month ?? internalMonth;
+    const displayYear = displayedMonth.getFullYear();
+    const displayMonthIndex = displayedMonth.getMonth();
+    const weeks = getCalendarGrid(displayYear, displayMonthIndex);
+    const navigateMonth = (delta) => {
+      const next = new Date(displayYear, displayMonthIndex + delta, 1);
+      if (onMonthChange) {
+        onMonthChange(next);
+      } else {
+        setInternalMonth(next);
+      }
+    };
+    const handleDayClick = (date) => {
+      onSelect?.(date);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx28("ds-calendar", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-calendar__header", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ds-calendar__nav-button",
+            onClick: () => navigateMonth(-1),
+            "aria-label": labels?.previousMonth ?? "Previous month",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ds-calendar__title", children: [
+          monthNames[displayMonthIndex],
+          " ",
+          displayYear
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ds-calendar__nav-button",
+            onClick: () => navigateMonth(1),
+            "aria-label": labels?.nextMonth ?? "Next month",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-calendar__grid", role: "grid", children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-calendar__head-row", role: "row", children: weekdayLabels.map((wdLabel) => /* @__PURE__ */ jsx("div", { className: "ds-calendar__head-cell", role: "columnheader", children: wdLabel }, wdLabel)) }),
+        /* @__PURE__ */ jsx("div", { className: "ds-calendar__body", children: weeks.map((week, wi) => /* @__PURE__ */ jsx("div", { className: "ds-calendar__row", role: "row", children: week.map((date, di) => {
+          const isOutside = date.getMonth() !== displayMonthIndex;
+          const isSelected = selected ? isSameDay(date, selected) : false;
+          const isToday = isSameDay(date, today);
+          return /* @__PURE__ */ jsx("div", { className: "ds-calendar__cell", role: "gridcell", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx28(
+                "ds-calendar__day",
+                isSelected && "ds-calendar__day--selected",
+                isToday && "ds-calendar__day--today",
+                isOutside && "ds-calendar__day--outside"
+              ),
+              onClick: () => handleDayClick(date),
+              tabIndex: isOutside ? -1 : 0,
+              "aria-label": formatDayLabel(date),
+              children: date.getDate()
+            }
+          ) }, di);
+        }) }, wi)) })
+      ] })
+    ] });
+  }
+);
+Calendar.displayName = "Calendar";
+var InputOTPContext = React39.createContext({
+  value: "",
+  activeIndex: -1
+});
+var InputOTP = React39.forwardRef(
+  ({ className, length = 6, value = "", onChange, children, "aria-label": ariaLabel = "One-time password", ...props }, ref) => {
+    const inputRef = React39.useRef(null);
+    const [activeIndex, setActiveIndex] = React39.useState(-1);
+    const handleChange = (e) => {
+      const newValue = e.target.value.replace(/[^0-9]/g, "").slice(0, length);
+      onChange?.(newValue);
+    };
+    const handleFocus = () => {
+      setActiveIndex(Math.min(value.length, length - 1));
+    };
+    const handleBlur = () => {
+      setActiveIndex(-1);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Backspace" && value.length > 0) {
+        onChange?.(value.slice(0, -1));
+      }
+    };
+    const handleContainerClick = () => {
+      inputRef.current?.focus();
+    };
+    const contextValue = React39.useMemo(
+      () => ({ value, activeIndex }),
+      [value, activeIndex]
+    );
+    return /* @__PURE__ */ jsx(InputOTPContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: clsx28("ds-input-otp", className),
+        onClick: handleContainerClick,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: "one-time-code",
+              pattern: "[0-9]*",
+              maxLength: length,
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              className: "ds-input-otp__hidden-input",
+              "aria-label": ariaLabel
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-input-otp__group", className), ...props });
+});
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React39.forwardRef(
+  ({ className, index, ...props }, ref) => {
+    const { value, activeIndex } = React39.useContext(InputOTPContext);
+    const char = value[index] ?? "";
+    const isActive = activeIndex === index;
+    const isFilled = char !== "";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx28(
+          "ds-input-otp__slot",
+          isActive && "ds-input-otp__slot--active",
+          isFilled && "ds-input-otp__slot--filled",
+          className
+        ),
+        ...props,
+        children: char
+      }
+    );
+  }
+);
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-input-otp__separator", className), role: "separator", ...props, children: /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "2" })
+    }
+  ) });
+});
+InputOTPSeparator.displayName = "InputOTPSeparator";
+var ContextMenuContext = React39.createContext({
+  open: false,
+  position: { x: 0, y: 0 },
+  onClose: () => {
+  }
+});
+function ContextMenu({ children }) {
+  const [open, setOpen] = React39.useState(false);
+  const [position, setPosition] = React39.useState({ x: 0, y: 0 });
+  const handleOpen = React39.useCallback((x, y) => {
+    setPosition({ x, y });
+    setOpen(true);
+  }, []);
+  const handleClose = React39.useCallback(() => {
+    setOpen(false);
+  }, []);
+  const contextValue = React39.useMemo(
+    () => ({ open, position, onClose: handleClose }),
+    [open, position, handleClose]
+  );
+  return /* @__PURE__ */ jsx(ContextMenuInternalContext.Provider, { value: { onOpen: handleOpen }, children: /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: contextValue, children }) });
+}
+ContextMenu.displayName = "ContextMenu";
+var ContextMenuInternalContext = React39.createContext({ onOpen: () => {
+} });
+var ContextMenuTrigger = React39.forwardRef(({ className, onContextMenu, ...props }, ref) => {
+  const { onOpen } = React39.useContext(ContextMenuInternalContext);
+  const handleContextMenu = (e) => {
+    e.preventDefault();
+    onOpen(e.clientX, e.clientY);
+    onContextMenu?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx28("ds-context-menu__trigger", className),
+      onContextMenu: handleContextMenu,
+      ...props
+    }
+  );
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+var ContextMenuContent = React39.forwardRef(({ className, ...props }, ref) => {
+  const { open, position, onClose } = React39.useContext(ContextMenuContext);
+  const contentRef = React39.useRef(null);
+  const mergedRef = React39.useCallback(
+    (node) => {
+      contentRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  React39.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (contentRef.current && !contentRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergedRef,
+        role: "menu",
+        className: clsx28("ds-context-menu__content", className),
+        style: { top: position.y, left: position.x },
+        ...props
+      }
+    ),
+    document.body
+  );
+});
+ContextMenuContent.displayName = "ContextMenuContent";
+var ContextMenuItem = React39.forwardRef(
+  ({ className, onSelect, onClick, ...props }, ref) => {
+    const { onClose } = React39.useContext(ContextMenuContext);
+    const handleClick = (e) => {
+      onSelect?.();
+      onClose();
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        className: clsx28("ds-context-menu__item", className),
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+var ContextMenuSeparator = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "separator",
+      className: clsx28("ds-context-menu__separator", className),
+      ...props
+    }
+  );
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+var ContextMenuLabel = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx28("ds-context-menu__label", className),
+      ...props
+    }
+  );
+});
+ContextMenuLabel.displayName = "ContextMenuLabel";
+var FormFieldContext = React39.createContext(void 0);
+function useFormField() {
+  const ctx = React39.useContext(FormFieldContext);
+  if (!ctx) {
+    throw new Error("useFormField must be used within a <FormField>");
+  }
+  return ctx;
+}
+var FormItemContext = React39.createContext(void 0);
+function FormField({ name, children, value, onChange, onBlur, error }) {
+  const id = React39.useId();
+  const contextValue = React39.useMemo(
+    () => ({ id: `${id}-form-item`, name, error }),
+    [id, name, error]
+  );
+  const fieldProps = React39.useMemo(
+    () => ({
+      value: value ?? "",
+      onChange: onChange ?? (() => {
+      }),
+      onBlur: onBlur ?? (() => {
+      }),
+      error,
+      id: `${id}-form-item`
+    }),
+    [value, onChange, onBlur, error, id]
+  );
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: contextValue, children: children(fieldProps) });
+}
+FormField.displayName = "FormField";
+var FormItem = React39.forwardRef(
+  ({ className, ...props }, ref) => {
+    const id = React39.useId();
+    const contextValue = React39.useMemo(() => ({ id }), [id]);
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-form__item", className), ...props }) });
+  }
+);
+FormItem.displayName = "FormItem";
+var FormLabel = React39.forwardRef(({ className, ...props }, ref) => {
+  const fieldCtx = React39.useContext(FormFieldContext);
+  const hasError = !!fieldCtx?.error;
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      ref,
+      htmlFor: fieldCtx?.id,
+      className: clsx28("ds-form__label", hasError && "ds-form__label--error", className),
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React39.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const fieldCtx = React39.useContext(FormFieldContext);
+    const descriptionId = fieldCtx ? `${fieldCtx.id}-description` : void 0;
+    const messageId = fieldCtx ? `${fieldCtx.id}-message` : void 0;
+    const hasError = !!fieldCtx?.error;
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-form__control", className), ...props, children: React39.isValidElement(children) ? React39.cloneElement(children, {
+      id: fieldCtx?.id,
+      "aria-describedby": descriptionId,
+      "aria-invalid": hasError || void 0,
+      "aria-errormessage": hasError ? messageId : void 0
+    }) : children });
+  }
+);
+FormControl.displayName = "FormControl";
+var FormDescription = React39.forwardRef(({ className, ...props }, ref) => {
+  const fieldCtx = React39.useContext(FormFieldContext);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: fieldCtx ? `${fieldCtx.id}-description` : void 0,
+      className: clsx28("ds-form__description", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React39.forwardRef(({ className, children, ...props }, ref) => {
+  const fieldCtx = React39.useContext(FormFieldContext);
+  const message = children ?? fieldCtx?.error;
+  if (!message) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: fieldCtx ? `${fieldCtx.id}-message` : void 0,
+      role: "alert",
+      className: clsx28("ds-form__message", className),
+      ...props,
+      children: message
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+// src/components/LayoutPrimitives/utils.ts
+var SPACING_ALIASES = {
+  xs: "var(--space-2)",
+  sm: "var(--space-3)",
+  md: "var(--space-4)",
+  lg: "var(--space-6)",
+  xl: "var(--space-8)",
+  "2xl": "var(--space-12)"
+};
+function resolveSpacing(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "number" && SPACING[value]) {
+    return SPACING[value];
+  }
+  if (typeof value === "string" && value in SPACING_ALIASES) {
+    return SPACING_ALIASES[value];
+  }
+  return String(value);
+}
+function extractSpacingStyles(props) {
+  const styles = {};
+  if (props.m !== void 0) styles.margin = resolveSpacing(props.m);
+  if (props.mt !== void 0) styles.marginTop = resolveSpacing(props.mt);
+  if (props.mb !== void 0) styles.marginBottom = resolveSpacing(props.mb);
+  if (props.ml !== void 0) styles.marginLeft = resolveSpacing(props.ml);
+  if (props.mr !== void 0) styles.marginRight = resolveSpacing(props.mr);
+  if (props.mx !== void 0) {
+    styles.marginLeft = resolveSpacing(props.mx);
+    styles.marginRight = resolveSpacing(props.mx);
+  }
+  if (props.my !== void 0) {
+    styles.marginTop = resolveSpacing(props.my);
+    styles.marginBottom = resolveSpacing(props.my);
+  }
+  if (props.p !== void 0) styles.padding = resolveSpacing(props.p);
+  if (props.pt !== void 0) styles.paddingTop = resolveSpacing(props.pt);
+  if (props.pb !== void 0) styles.paddingBottom = resolveSpacing(props.pb);
+  if (props.pl !== void 0) styles.paddingLeft = resolveSpacing(props.pl);
+  if (props.pr !== void 0) styles.paddingRight = resolveSpacing(props.pr);
+  if (props.px !== void 0) {
+    styles.paddingLeft = resolveSpacing(props.px);
+    styles.paddingRight = resolveSpacing(props.px);
+  }
+  if (props.py !== void 0) {
+    styles.paddingTop = resolveSpacing(props.py);
+    styles.paddingBottom = resolveSpacing(props.py);
+  }
+  if (props.gap !== void 0) styles.gap = resolveSpacing(props.gap);
+  return styles;
+}
+var Box = forwardRef(
+  ({ as: Component = "div", className, style, children, ...props }, ref) => {
+    const spacingStyles = extractSpacingStyles(props);
+    const { m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py, gap, ...domProps } = props;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: clsx28("ds-box", className),
+        style: { ...spacingStyles, ...style },
+        ...domProps,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var Stack = forwardRef(
+  ({ direction = "column", align, justify, wrap, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        className: clsx28("ds-stack", direction === "row" && "ds-stack--horizontal", className),
+        style: {
+          alignItems: align,
+          justifyContent: justify === "between" ? "space-between" : justify,
+          flexWrap: wrap ? "wrap" : void 0,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+var MAX_RESPONSIVE_COLS = 6;
+var Grid = forwardRef(
+  ({ columns, rows, align, justify, fixed, className, style, ...props }, ref) => {
+    const useColClass = typeof columns === "number" && columns >= 1 && columns <= MAX_RESPONSIVE_COLS;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        className: clsx28(
+          "ds-grid",
+          useColClass && `ds-grid--cols-${columns}`,
+          fixed && "ds-grid--fixed",
+          className
+        ),
+        style: {
+          gridTemplateColumns: useColClass ? void 0 : typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns,
+          gridTemplateRows: typeof rows === "number" ? `repeat(${rows}, 1fr)` : rows,
+          alignItems: align,
+          justifyItems: justify,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+var CONTAINER_SIZE_MAP = {
+  sm: "768px",
+  // 48rem — max-w-3xl
+  md: "1024px",
+  // 64rem — max-w-5xl
+  lg: "1152px",
+  // 72rem — max-w-6xl
+  xl: "1280px",
+  // 80rem — max-w-7xl
+  full: "100%"
+};
+var Container = forwardRef(
+  ({ size, fluid, maxWidth, className, style, ...props }, ref) => {
+    let resolvedMaxWidth;
+    if (fluid) {
+      resolvedMaxWidth = "100%";
+    } else if (size) {
+      resolvedMaxWidth = CONTAINER_SIZE_MAP[size];
+    } else {
+      resolvedMaxWidth = maxWidth || "var(--container-default-max, 1200px)";
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        className: clsx28("ds-container", className),
+        style: {
+          maxWidth: resolvedMaxWidth,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+var Section = forwardRef(
+  ({ padding = "md", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        className: clsx28("ds-section-block", `ds-section-block--${padding}`, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+var VisuallyHidden = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("span", { ref, className: clsx28("ds-visually-hidden", className), ...props });
+  }
+);
+VisuallyHidden.displayName = "VisuallyHidden";
+var Tabs = React39.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tabs$1.Root,
+      {
+        ref,
+        className: clsx28("ds-tabs", `ds-tabs--${orientation}`, className),
+        orientation,
+        ...props
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+var TabsList = React39.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Tabs$1.List, { ref, className: clsx28("ds-tabs__list", className), ...props });
+  }
+);
+TabsList.displayName = "TabsList";
+var TabsTrigger = React39.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Tabs$1.Tab, { ref, className: clsx28("ds-tabs__trigger", className), ...props, children });
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React39.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Tabs$1.Panel, { ref, className: clsx28("ds-tabs__content", className), ...props });
+  }
+);
+TabsContent.displayName = "TabsContent";
+var defaultMessages = {
+  // Common
+  "ds.common.loading": "Loading...",
+  "ds.common.error": "An error occurred",
+  "ds.common.retry": "Retry",
+  "ds.common.cancel": "Cancel",
+  "ds.common.confirm": "Confirm",
+  "ds.common.close": "Close",
+  "ds.common.save": "Save",
+  "ds.common.delete": "Delete",
+  "ds.common.edit": "Edit",
+  "ds.common.submit": "Submit",
+  "ds.common.required": "Required",
+  "ds.common.optional": "Optional",
+  // Alert
+  "ds.alert.dismissLabel": "Dismiss alert",
+  "ds.alert.successTitle": "Success",
+  "ds.alert.errorTitle": "Error",
+  "ds.alert.warningTitle": "Warning",
+  "ds.alert.infoTitle": "Information",
+  // Toast
+  "ds.toast.dismissLabel": "Dismiss notification",
+  // Dialog
+  "ds.dialog.closeLabel": "Close dialog",
+  // Form
+  "ds.form.showPassword": "Show password",
+  "ds.form.hidePassword": "Hide password",
+  "ds.form.clearInput": "Clear input",
+  "ds.form.invalidEmail": "Please enter a valid email address",
+  "ds.form.passwordRequired": "Password is required",
+  // Auth
+  "ds.auth.loginTitle": "Sign in to your account",
+  "ds.auth.signupTitle": "Create your account",
+  "ds.auth.forgotPasswordTitle": "Reset your password",
+  "ds.auth.emailLabel": "Email address",
+  "ds.auth.passwordLabel": "Password",
+  "ds.auth.rememberMe": "Remember me",
+  "ds.auth.forgotPassword": "Forgot your password?",
+  "ds.auth.signIn": "Sign in",
+  "ds.auth.signUp": "Sign up",
+  "ds.auth.sendResetLink": "Send reset link",
+  "ds.auth.backToLogin": "Back to login",
+  // Navigation
+  "ds.nav.menuLabel": "Navigation menu",
+  "ds.nav.toggleSidebar": "Toggle sidebar",
+  "ds.nav.expandSubmenu": "Expand submenu",
+  "ds.nav.collapseSubmenu": "Collapse submenu",
+  // Report
+  "ds.report.confidenceLabel": "Confidence score",
+  "ds.report.dataCoverageLabel": "Data coverage",
+  "ds.report.insufficientData": "Insufficient data",
+  "ds.report.exportPdf": "Export as PDF",
+  "ds.report.exportCsv": "Export as CSV",
+  "ds.report.exportPptx": "Export as PowerPoint",
+  // Appearance
+  "ds.appearance.themeLabel": "Theme",
+  "ds.appearance.darkTheme": "Dark",
+  "ds.appearance.lightTheme": "Light",
+  "ds.appearance.highContrastTheme": "High contrast",
+  "ds.appearance.densityLabel": "Density",
+  "ds.appearance.comfortableDensity": "Comfortable",
+  "ds.appearance.compactDensity": "Compact",
+  // Pagination
+  "ds.pagination.previous": "Previous",
+  "ds.pagination.next": "Next",
+  "ds.pagination.goToPreviousPage": "Go to previous page",
+  "ds.pagination.goToNextPage": "Go to next page",
+  // Calendar
+  "ds.calendar.previousMonth": "Previous month",
+  "ds.calendar.nextMonth": "Next month",
+  // Carousel
+  "ds.carousel.previousSlide": "Previous slide",
+  "ds.carousel.nextSlide": "Next slide",
+  // Methodology
+  "ds.methodology.title": "Methodology",
+  "ds.methodology.sampleSize": "Sample Size",
+  "ds.methodology.dataSources": "Data Sources",
+  "ds.methodology.calculation": "Calculation"
+};
+function DSIntlProvider({
+  locale = "en",
+  messages,
+  intlConfig,
+  children
+}) {
+  const mergedMessages = {
+    ...defaultMessages,
+    ...messages
+  };
+  return /* @__PURE__ */ jsx(
+    IntlProvider,
+    {
+      locale,
+      messages: mergedMessages,
+      defaultLocale: "en",
+      onError: (err) => {
+        if (process.env.NODE_ENV === "development") {
+          if (err.code !== "MISSING_TRANSLATION") {
+            console.error(err);
+          }
+        }
+      },
+      ...intlConfig,
+      children
+    }
+  );
+}
+function useMessage() {
+  const intl = useIntl();
+  const formatMessage = useCallback(
+    (descriptor, values) => {
+      return intl.formatMessage(descriptor, values);
+    },
+    [intl]
+  );
+  return formatMessage;
+}
+function useLocale() {
+  const intl = useIntl();
+  return intl.locale;
+}
+function useIsRTL() {
+  const locale = useLocale();
+  const rtlLocales = [
+    "ar",
+    // Arabic
+    "he",
+    // Hebrew
+    "fa",
+    // Persian/Farsi
+    "ur",
+    // Urdu
+    "ps",
+    // Pashto
+    "sd",
+    // Sindhi
+    "yi"
+    // Yiddish
+  ];
+  return rtlLocales.some((rtl) => locale === rtl || locale.startsWith(`${rtl}-`));
+}
+function useTextDirection() {
+  const isRTL = useIsRTL();
+  return isRTL ? "rtl" : "ltr";
+}
+function useNumberFormat() {
+  const intl = useIntl();
+  const formatNumber = useCallback(
+    (value, options) => {
+      return intl.formatNumber(value, options);
+    },
+    [intl]
+  );
+  return formatNumber;
+}
+function useDateFormat() {
+  const intl = useIntl();
+  const formatDate = useCallback(
+    (value, options) => {
+      return intl.formatDate(value, options);
+    },
+    [intl]
+  );
+  return formatDate;
+}
+function useRelativeTime() {
+  const intl = useIntl();
+  const formatRelativeTime = useCallback(
+    (value, unit, options) => {
+      return intl.formatRelativeTime(value, unit, options);
+    },
+    [intl]
+  );
+  return formatRelativeTime;
+}
+var commonMessages = defineMessages({
+  loading: {
+    id: "ds.common.loading",
+    defaultMessage: "Loading...",
+    description: "Generic loading state text"
+  },
+  error: {
+    id: "ds.common.error",
+    defaultMessage: "An error occurred",
+    description: "Generic error message"
+  },
+  retry: {
+    id: "ds.common.retry",
+    defaultMessage: "Retry",
+    description: "Retry action button text"
+  },
+  cancel: {
+    id: "ds.common.cancel",
+    defaultMessage: "Cancel",
+    description: "Cancel action button text"
+  },
+  confirm: {
+    id: "ds.common.confirm",
+    defaultMessage: "Confirm",
+    description: "Confirm action button text"
+  },
+  close: {
+    id: "ds.common.close",
+    defaultMessage: "Close",
+    description: "Close action button text"
+  },
+  save: {
+    id: "ds.common.save",
+    defaultMessage: "Save",
+    description: "Save action button text"
+  },
+  delete: {
+    id: "ds.common.delete",
+    defaultMessage: "Delete",
+    description: "Delete action button text"
+  },
+  edit: {
+    id: "ds.common.edit",
+    defaultMessage: "Edit",
+    description: "Edit action button text"
+  },
+  submit: {
+    id: "ds.common.submit",
+    defaultMessage: "Submit",
+    description: "Submit action button text"
+  },
+  required: {
+    id: "ds.common.required",
+    defaultMessage: "Required",
+    description: "Field required indicator"
+  },
+  optional: {
+    id: "ds.common.optional",
+    defaultMessage: "Optional",
+    description: "Field optional indicator"
+  }
+});
+var alertMessages = defineMessages({
+  dismissLabel: {
+    id: "ds.alert.dismissLabel",
+    defaultMessage: "Dismiss alert",
+    description: "Accessible label for alert dismiss button"
+  },
+  successTitle: {
+    id: "ds.alert.successTitle",
+    defaultMessage: "Success",
+    description: "Default title for success alerts"
+  },
+  errorTitle: {
+    id: "ds.alert.errorTitle",
+    defaultMessage: "Error",
+    description: "Default title for error alerts"
+  },
+  warningTitle: {
+    id: "ds.alert.warningTitle",
+    defaultMessage: "Warning",
+    description: "Default title for warning alerts"
+  },
+  infoTitle: {
+    id: "ds.alert.infoTitle",
+    defaultMessage: "Information",
+    description: "Default title for info alerts"
+  }
+});
+var toastMessages = defineMessages({
+  dismissLabel: {
+    id: "ds.toast.dismissLabel",
+    defaultMessage: "Dismiss notification",
+    description: "Accessible label for toast dismiss button"
+  }
+});
+var dialogMessages = defineMessages({
+  closeLabel: {
+    id: "ds.dialog.closeLabel",
+    defaultMessage: "Close dialog",
+    description: "Accessible label for dialog close button"
+  }
+});
+var formMessages = defineMessages({
+  showPassword: {
+    id: "ds.form.showPassword",
+    defaultMessage: "Show password",
+    description: "Toggle to show password text"
+  },
+  hidePassword: {
+    id: "ds.form.hidePassword",
+    defaultMessage: "Hide password",
+    description: "Toggle to hide password text"
+  },
+  clearInput: {
+    id: "ds.form.clearInput",
+    defaultMessage: "Clear input",
+    description: "Clear input field button"
+  },
+  invalidEmail: {
+    id: "ds.form.invalidEmail",
+    defaultMessage: "Please enter a valid email address",
+    description: "Email validation error"
+  },
+  passwordRequired: {
+    id: "ds.form.passwordRequired",
+    defaultMessage: "Password is required",
+    description: "Password required validation error"
+  }
+});
+var authMessages = defineMessages({
+  loginTitle: {
+    id: "ds.auth.loginTitle",
+    defaultMessage: "Sign in to your account",
+    description: "Login page title"
+  },
+  signupTitle: {
+    id: "ds.auth.signupTitle",
+    defaultMessage: "Create your account",
+    description: "Signup page title"
+  },
+  forgotPasswordTitle: {
+    id: "ds.auth.forgotPasswordTitle",
+    defaultMessage: "Reset your password",
+    description: "Forgot password page title"
+  },
+  emailLabel: {
+    id: "ds.auth.emailLabel",
+    defaultMessage: "Email address",
+    description: "Email field label"
+  },
+  passwordLabel: {
+    id: "ds.auth.passwordLabel",
+    defaultMessage: "Password",
+    description: "Password field label"
+  },
+  rememberMe: {
+    id: "ds.auth.rememberMe",
+    defaultMessage: "Remember me",
+    description: "Remember me checkbox label"
+  },
+  forgotPassword: {
+    id: "ds.auth.forgotPassword",
+    defaultMessage: "Forgot your password?",
+    description: "Forgot password link text"
+  },
+  signIn: {
+    id: "ds.auth.signIn",
+    defaultMessage: "Sign in",
+    description: "Sign in button text"
+  },
+  signUp: {
+    id: "ds.auth.signUp",
+    defaultMessage: "Sign up",
+    description: "Sign up button text"
+  },
+  sendResetLink: {
+    id: "ds.auth.sendResetLink",
+    defaultMessage: "Send reset link",
+    description: "Send password reset link button"
+  },
+  backToLogin: {
+    id: "ds.auth.backToLogin",
+    defaultMessage: "Back to login",
+    description: "Back to login link text"
+  }
+});
+var navigationMessages = defineMessages({
+  menuLabel: {
+    id: "ds.nav.menuLabel",
+    defaultMessage: "Navigation menu",
+    description: "Accessible label for navigation menu"
+  },
+  toggleSidebar: {
+    id: "ds.nav.toggleSidebar",
+    defaultMessage: "Toggle sidebar",
+    description: "Toggle sidebar button label"
+  },
+  expandSubmenu: {
+    id: "ds.nav.expandSubmenu",
+    defaultMessage: "Expand submenu",
+    description: "Expand submenu button label"
+  },
+  collapseSubmenu: {
+    id: "ds.nav.collapseSubmenu",
+    defaultMessage: "Collapse submenu",
+    description: "Collapse submenu button label"
+  }
+});
+var reportMessages = defineMessages({
+  confidenceLabel: {
+    id: "ds.report.confidenceLabel",
+    defaultMessage: "Confidence score",
+    description: "Label for confidence indicator"
+  },
+  dataCoverageLabel: {
+    id: "ds.report.dataCoverageLabel",
+    defaultMessage: "Data coverage",
+    description: "Label for data coverage badge"
+  },
+  insufficientData: {
+    id: "ds.report.insufficientData",
+    defaultMessage: "Insufficient data",
+    description: "Message when data is insufficient for analysis"
+  },
+  exportPdf: {
+    id: "ds.report.exportPdf",
+    defaultMessage: "Export as PDF",
+    description: "Export to PDF option"
+  },
+  exportCsv: {
+    id: "ds.report.exportCsv",
+    defaultMessage: "Export as CSV",
+    description: "Export to CSV option"
+  },
+  exportPptx: {
+    id: "ds.report.exportPptx",
+    defaultMessage: "Export as PowerPoint",
+    description: "Export to PowerPoint option"
+  }
+});
+var appearanceMessages = defineMessages({
+  themeLabel: {
+    id: "ds.appearance.themeLabel",
+    defaultMessage: "Theme",
+    description: "Theme selector label"
+  },
+  darkTheme: {
+    id: "ds.appearance.darkTheme",
+    defaultMessage: "Dark",
+    description: "Dark theme option"
+  },
+  lightTheme: {
+    id: "ds.appearance.lightTheme",
+    defaultMessage: "Light",
+    description: "Light theme option"
+  },
+  highContrastTheme: {
+    id: "ds.appearance.highContrastTheme",
+    defaultMessage: "High contrast",
+    description: "High contrast theme option"
+  },
+  densityLabel: {
+    id: "ds.appearance.densityLabel",
+    defaultMessage: "Density",
+    description: "Density selector label"
+  },
+  comfortableDensity: {
+    id: "ds.appearance.comfortableDensity",
+    defaultMessage: "Comfortable",
+    description: "Comfortable density option"
+  },
+  compactDensity: {
+    id: "ds.appearance.compactDensity",
+    defaultMessage: "Compact",
+    description: "Compact density option"
+  }
+});
+var paginationMessages = defineMessages({
+  previous: {
+    id: "ds.pagination.previous",
+    defaultMessage: "Previous",
+    description: "Pagination previous button label"
+  },
+  next: {
+    id: "ds.pagination.next",
+    defaultMessage: "Next",
+    description: "Pagination next button label"
+  },
+  goToPreviousPage: {
+    id: "ds.pagination.goToPreviousPage",
+    defaultMessage: "Go to previous page",
+    description: "Accessible label for previous page button"
+  },
+  goToNextPage: {
+    id: "ds.pagination.goToNextPage",
+    defaultMessage: "Go to next page",
+    description: "Accessible label for next page button"
+  }
+});
+var calendarMessages = defineMessages({
+  previousMonth: {
+    id: "ds.calendar.previousMonth",
+    defaultMessage: "Previous month",
+    description: "Accessible label for previous month button"
+  },
+  nextMonth: {
+    id: "ds.calendar.nextMonth",
+    defaultMessage: "Next month",
+    description: "Accessible label for next month button"
+  }
+});
+var carouselMessages = defineMessages({
+  previousSlide: {
+    id: "ds.carousel.previousSlide",
+    defaultMessage: "Previous slide",
+    description: "Accessible label for previous slide button"
+  },
+  nextSlide: {
+    id: "ds.carousel.nextSlide",
+    defaultMessage: "Next slide",
+    description: "Accessible label for next slide button"
+  }
+});
+var methodologyMessages = defineMessages({
+  title: {
+    id: "ds.methodology.title",
+    defaultMessage: "Methodology",
+    description: "Methodology note title"
+  },
+  sampleSize: {
+    id: "ds.methodology.sampleSize",
+    defaultMessage: "Sample Size",
+    description: "Methodology sample size label"
+  },
+  dataSources: {
+    id: "ds.methodology.dataSources",
+    defaultMessage: "Data Sources",
+    description: "Methodology data sources label"
+  },
+  calculation: {
+    id: "ds.methodology.calculation",
+    defaultMessage: "Calculation",
+    description: "Methodology calculation label"
+  }
+});
+var allMessages = {
+  ...commonMessages,
+  ...alertMessages,
+  ...toastMessages,
+  ...dialogMessages,
+  ...formMessages,
+  ...authMessages,
+  ...navigationMessages,
+  ...reportMessages,
+  ...appearanceMessages,
+  ...paginationMessages,
+  ...calendarMessages,
+  ...carouselMessages,
+  ...methodologyMessages
+};
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AppearancePanel, AppearanceProvider, AspectRatio, Avatar, AvatarFallback, AvatarImage, BREAKPOINTS, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, COLORS, CONTAINER_SIZE_MAP, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Container, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, DISTANCE, DSIntlProvider, DURATION, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EASING, EmptyState, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, Heading, HoverCard, HoverCardContent, HoverCardTrigger, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, LINE_HEIGHT, Label, MEDIA_QUERIES, MOTION, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverContent, PopoverTrigger, Progress, Prose, RADIUS, Radio, RadioGroup, SHADOWS, SPACING, ScrollArea, ScrollBar, Section, Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Stack, StatusBadge, Switch, TRANSITION, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextArea, TextField, ToastContext, ToastItem, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, VARIANTS, VisuallyHidden, Z_INDEX, alertMessages, allMessages, appearanceMessages, authMessages, calendarMessages, carouselMessages, commonMessages, dialogMessages, extractSpacingStyles, formMessages, hexToRgb, initializeAppearance, methodologyMessages, navigationMessages, paginationMessages, prefersReducedMotion, reportMessages, resolveSpacing, toastMessages, useAppearance, useDateFormat, useFormField, useIsRTL, useLocale, useMessage, useNumberFormat, useRelativeTime, useTextDirection, useToast };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map