@dev-dga/react 0.7.0 → 0.8.1

package/dist/index.js

@@ -80,6 +80,16 @@ var buttonVariants = cva2("ddga-button", {
      */
     inverted: {
       true: "ddga-button--inverted"
+    },
+    /**
+     * Floating action button: fully-rounded + elevated. Orthogonal to `variant`
+     * (color) and `size` — pair with `size="icon"` for a circular FAB, or a text
+     * size for an extended pill FAB. Positioning (`position: fixed`, safe-area
+     * insets) is the consumer's responsibility — see the placement recipe in the
+     * stories. Keep it a modifier, not a `Fab` wrapper component.
+     */
+    fab: {
+      true: "ddga-button--fab"
     }
   },
   compoundVariants: [],
@@ -93,6 +103,7 @@ function Button({
   size,
   fullWidth,
   inverted,
+  fab,
   loading,
   disabled,
   startIcon,
@@ -122,7 +133,7 @@ function Button({
       "aria-busy": loading || void 0,
       "data-slot": "button",
       className: cn(
-        buttonVariants({ variant, size, fullWidth, inverted }),
+        buttonVariants({ variant, size, fullWidth, inverted, fab }),
         loading && "ddga-button--loading",
         className
       ),
@@ -704,6 +715,43 @@ function CaretDown(props) {
     }
   );
 }
+function ExternalLink(props) {
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      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",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6("path", { d: "M15 3h6v6" }),
+        /* @__PURE__ */ jsx6("path", { d: "M10 14 21 3" }),
+        /* @__PURE__ */ jsx6("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+      ]
+    }
+  );
+}
+function QuoteMark(props) {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "none",
+      ...props,
+      children: /* @__PURE__ */ jsx6("path", { d: "M7 7C4.8 7 3 8.8 3 11s1.8 4 4 4c.2 0 .4 0 .6-.1C7.2 16.4 6 17.5 4.2 17.7L4 17.7V20c3.6-.3 6-3.2 6-7v-1.2C10 8.7 8.4 7 7 7zM18 7c-2.2 0-4 1.8-4 4s1.8 4 4 4c.2 0 .4 0 .6-.1-.4 1.5-1.6 2.6-3.4 2.8l-.2 0V20c3.6-.3 6-3.2 6-7v-1.2C21 8.7 19.4 7 18 7z" })
+    }
+  );
+}
 function PanelLeft(props) {
   return /* @__PURE__ */ jsxs4(
     "svg",
@@ -998,6 +1046,8 @@ function Select({
   placeholder,
   className,
   children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   ...rootProps
 }) {
   const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
@@ -1007,8 +1057,8 @@ function Select({
     error,
     errorMessage,
     helperText,
-    "aria-label": rootProps["aria-label"],
-    "aria-labelledby": rootProps["aria-labelledby"]
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
   });
   const ctx = useContext2(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
@@ -1022,6 +1072,8 @@ function Select({
         SelectPrimitive.Trigger,
         {
           ...controlProps,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
           "data-slot": "select-trigger",
           className: cn(selectTriggerVariants({ size, error: hasError }), className),
           children: [
@@ -1350,7 +1402,7 @@ function Avatar({ size, shape, status, statusLabel, className, children, ...prop
           "span",
           {
             className: cn("ddga-avatar__status", `ddga-avatar__status--${status}`),
-            role: "status",
+            role: "img",
             "aria-label": statusLabel ?? status
           }
         ) : null
@@ -1840,9 +1892,10 @@ function ToastItem({ toast: t, store, closeButton, closeLabel, hideIcon }) {
 }
 
 // src/components/Tabs/Tabs.tsx
+import "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { cva as cva17 } from "class-variance-authority";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var tabsVariants = cva17("ddga-tabs", {
   variants: {
     variant: {
@@ -1886,13 +1939,49 @@ function TabsList({ fullWidth, className, ...props }) {
     }
   );
 }
-function TabsTrigger({ className, ...props }) {
+function TabsTrigger({
+  className,
+  startIcon,
+  endIcon,
+  children,
+  asChild,
+  ...props
+}) {
+  const hasIcon = startIcon != null || endIcon != null;
+  const hasText = children != null && children !== "" && typeof children !== "boolean";
+  const isIconOnly = !asChild && hasIcon && !hasText;
+  if (process.env.NODE_ENV === "development") {
+    if (isIconOnly && !props["aria-label"] && !props["aria-labelledby"]) {
+      console.warn(
+        "[@dev-dga/react] An icon-only TabsTrigger (icon with no text label) requires an aria-label or aria-labelledby for screen reader accessibility."
+      );
+    }
+    if (asChild && hasIcon) {
+      console.warn(
+        "[@dev-dga/react] TabsTrigger `startIcon`/`endIcon` are ignored when `asChild` is set \u2014 render the icons inside your child element instead."
+      );
+    }
+  }
   return /* @__PURE__ */ jsx19(
     TabsPrimitive.Trigger,
     {
       "data-slot": "tabs-trigger",
-      className: cn("ddga-tabs__trigger", className),
-      ...props
+      asChild,
+      className: cn("ddga-tabs__trigger", isIconOnly && "ddga-tabs__trigger--icon-only", className),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs15(Fragment, { children: [
+        startIcon && /* @__PURE__ */ jsx19(
+          "span",
+          {
+            className: "ddga-tabs__icon",
+            "data-slot": "tabs-trigger-start-icon",
+            "aria-hidden": "true",
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ jsx19("span", { className: "ddga-tabs__icon", "data-slot": "tabs-trigger-end-icon", "aria-hidden": "true", children: endIcon })
+      ] })
     }
   );
 }
@@ -1992,7 +2081,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
 // src/components/Pagination/Pagination.tsx
 import { Slot as SlotPrimitive7 } from "radix-ui";
 import { cva as cva19 } from "class-variance-authority";
-import { Fragment, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 var paginationVariants = cva19("ddga-pagination", {
   variants: {
     size: {
@@ -2063,7 +2152,7 @@ function PaginationPrevious({
       "data-slot": "pagination-previous",
       className: cn("ddga-pagination__nav", "ddga-pagination__nav--previous", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs15(Fragment, { children: [
+      children: children ?? /* @__PURE__ */ jsxs16(Fragment2, { children: [
         /* @__PURE__ */ jsx21(ChevronRight, { className: "ddga-pagination__nav-icon ddga-pagination__nav-icon--previous" }),
         /* @__PURE__ */ jsx21("span", { children: label })
       ] })
@@ -2085,7 +2174,7 @@ function PaginationNext({
       "data-slot": "pagination-next",
       className: cn("ddga-pagination__nav", "ddga-pagination__nav--next", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs15(Fragment, { children: [
+      children: children ?? /* @__PURE__ */ jsxs16(Fragment2, { children: [
         /* @__PURE__ */ jsx21("span", { children: label }),
         /* @__PURE__ */ jsx21(ChevronRight, { className: "ddga-pagination__nav-icon ddga-pagination__nav-icon--next" })
       ] })
@@ -2109,7 +2198,7 @@ function PaginationEllipsis({ className, ...props }) {
 // src/components/Accordion/Accordion.tsx
 import { Accordion as AccordionPrimitive } from "radix-ui";
 import { cva as cva20 } from "class-variance-authority";
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var accordionVariants = cva20("ddga-accordion", {
   variants: {
     size: {
@@ -2142,7 +2231,7 @@ function AccordionItem({ className, ...props }) {
   );
 }
 function AccordionTrigger({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "ddga-accordion__header", children: /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "ddga-accordion__header", children: /* @__PURE__ */ jsxs17(
     AccordionPrimitive.Trigger,
     {
       "data-slot": "accordion-trigger",
@@ -2176,7 +2265,7 @@ function AccordionContent({ className, children, ...props }) {
 
 // src/components/Steps/Steps.tsx
 import { cva as cva21 } from "class-variance-authority";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var stepsVariants = cva21("ddga-steps", {
   variants: {
     size: {
@@ -2229,7 +2318,7 @@ function Step({ state, className, ...props }) {
   );
 }
 function StepIndicator({ step, className, ...props }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "span",
     {
       "aria-hidden": "true",
@@ -2299,7 +2388,7 @@ function Skeleton({ shape, animation, width, height, className, style, ...props
 // src/components/Progress/Progress.tsx
 import { Progress as ProgressPrimitive } from "radix-ui";
 import { cva as cva23 } from "class-variance-authority";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var progressVariants = cva23("ddga-progress", {
   variants: {
     size: {
@@ -2362,30 +2451,65 @@ function Progress({ value = null, max = 100, size, color, className, ...props })
 }
 var CIRCULAR_SIZES = { sm: 32, md: 48, lg: 72 };
 var CIRCULAR_DEFAULT_THICKNESS = { sm: 4, md: 5, lg: 6 };
+var SEGMENT_GAP_FRACTION = 0.16;
 function CircularProgress({
   value = null,
   max = 100,
   size,
   color,
   thickness,
+  segments,
   showLabel = false,
   className,
   ...props
 }) {
+  if (process.env.NODE_ENV === "development" && !props["aria-label"] && !props["aria-labelledby"]) {
+    console.warn(
+      "[dga/Progress] <CircularProgress> has no accessible name. Pass `aria-label` or `aria-labelledby` so screen-reader users know what the progress represents."
+    );
+  }
   const isIndeterminate = value === null;
+  const isSegmented = typeof segments === "number" && segments >= 2;
   const sizeKey = size ?? "md";
   const diameter = CIRCULAR_SIZES[sizeKey];
   const strokeWidth = thickness ?? CIRCULAR_DEFAULT_THICKNESS[sizeKey];
   const radius = (diameter - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
+  const center = diameter / 2;
   const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
   const dashOffset = isIndeterminate ? circumference * 0.75 : circumference * (1 - pct / 100);
   const state = isIndeterminate ? "indeterminate" : value >= max ? "complete" : "loading";
-  return /* @__PURE__ */ jsxs18(
+  const segmentEls = isSegmented && segments ? (() => {
+    const filled = isIndeterminate ? 0 : Math.round(pct / 100 * segments);
+    const segAngle = 360 / segments;
+    const gapAngle = segAngle * SEGMENT_GAP_FRACTION;
+    const segLen = circumference * ((1 - SEGMENT_GAP_FRACTION) / segments);
+    return Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx25(
+      "circle",
+      {
+        className: cn(
+          "ddga-circular-progress__segment",
+          i < filled && "ddga-circular-progress__segment--filled"
+        ),
+        cx: center,
+        cy: center,
+        r: radius,
+        fill: "none",
+        strokeWidth,
+        strokeLinecap: "butt",
+        strokeDasharray: `${segLen} ${circumference}`,
+        transform: `rotate(${-90 + i * segAngle + gapAngle / 2} ${center} ${center})`
+      },
+      i
+    ));
+  })() : null;
+  const labelText = isSegmented ? `${segments ? Math.round(pct / 100 * segments) : 0}/${segments}` : `${Math.round(pct)}%`;
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       "data-slot": "circular-progress",
       "data-state": state,
+      "data-segmented": isSegmented ? "" : void 0,
       role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": max,
@@ -2394,7 +2518,7 @@ function CircularProgress({
       style: { inlineSize: diameter, blockSize: diameter },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx25(
           "svg",
           {
             className: "ddga-circular-progress__svg",
@@ -2403,13 +2527,13 @@ function CircularProgress({
             height: diameter,
             "aria-hidden": "true",
             focusable: "false",
-            children: [
+            children: isSegmented ? segmentEls : /* @__PURE__ */ jsxs19(Fragment3, { children: [
               /* @__PURE__ */ jsx25(
                 "circle",
                 {
                   className: "ddga-circular-progress__track",
-                  cx: diameter / 2,
-                  cy: diameter / 2,
+                  cx: center,
+                  cy: center,
                   r: radius,
                   fill: "none",
                   strokeWidth
@@ -2419,24 +2543,21 @@ function CircularProgress({
                 "circle",
                 {
                   className: "ddga-circular-progress__indicator",
-                  cx: diameter / 2,
-                  cy: diameter / 2,
+                  cx: center,
+                  cy: center,
                   r: radius,
                   fill: "none",
                   strokeWidth,
                   strokeLinecap: "round",
                   strokeDasharray: circumference,
                   strokeDashoffset: dashOffset,
-                  transform: `rotate(-90 ${diameter / 2} ${diameter / 2})`
+                  transform: `rotate(-90 ${center} ${center})`
                 }
               )
-            ]
+            ] })
           }
         ),
-        showLabel && !isIndeterminate ? /* @__PURE__ */ jsxs18("span", { className: "ddga-circular-progress__label", "aria-hidden": "true", children: [
-          Math.round(pct),
-          "%"
-        ] }) : null
+        showLabel && !isIndeterminate ? /* @__PURE__ */ jsx25("span", { className: "ddga-circular-progress__label", "aria-hidden": "true", children: labelText }) : null
       ]
     }
   );
@@ -2446,7 +2567,7 @@ function CircularProgress({
 import { useContext as useContext5 } from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { cva as cva24 } from "class-variance-authority";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var dropdownMenuVariants = cva24("ddga-dropdown-menu", {
   variants: {
     size: {
@@ -2490,7 +2611,7 @@ function DropdownMenuItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     DropdownMenuPrimitive.Item,
     {
       "data-slot": "dropdown-menu-item",
@@ -2514,7 +2635,7 @@ function DropdownMenuCheckboxItem({
   const handleSelect = onSelect ?? ((event) => {
     event.preventDefault();
   });
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
@@ -2540,7 +2661,7 @@ function DropdownMenuRadioItem({
   const handleSelect = onSelect ?? ((event) => {
     event.preventDefault();
   });
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     DropdownMenuPrimitive.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
@@ -2586,7 +2707,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
@@ -2617,7 +2738,7 @@ function DropdownMenuSubContent({ size, className, ...props }) {
 import { useContext as useContext6 } from "react";
 import { Dialog as DialogPrimitive2, Slot as SlotPrimitive8 } from "radix-ui";
 import { cva as cva25 } from "class-variance-authority";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var drawerVariants = cva25("ddga-drawer", {
   variants: {
     side: {
@@ -2655,9 +2776,9 @@ function DrawerContent({
 }) {
   const ctx = useContext6(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ jsxs20(DialogPrimitive2.Portal, { container: portalContainer, children: [
+  return /* @__PURE__ */ jsxs21(DialogPrimitive2.Portal, { container: portalContainer, children: [
     /* @__PURE__ */ jsx27(DialogPrimitive2.Overlay, { className: "ddga-drawer__overlay", "data-slot": "drawer-overlay" }),
-    /* @__PURE__ */ jsxs20(
+    /* @__PURE__ */ jsxs21(
       DialogPrimitive2.Content,
       {
         "data-slot": "drawer-content",
@@ -2731,7 +2852,7 @@ import {
 import { Command } from "cmdk";
 import { Popover as PopoverPrimitive } from "radix-ui";
 import { cva as cva26 } from "class-variance-authority";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var comboboxTriggerVariants = cva26("ddga-combobox-trigger", {
   variants: {
     size: {
@@ -2835,13 +2956,13 @@ function Combobox({
     return itemLabels.get(value) ?? null;
   }, [value, getLabel, itemLabels]);
   const searchId = useId3();
-  return /* @__PURE__ */ jsx28(ComboboxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs21("div", { "data-slot": "combobox-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ jsxs21("label", { htmlFor: fieldId, className: "ddga-combobox__label", children: [
+  return /* @__PURE__ */ jsx28(ComboboxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs22("div", { "data-slot": "combobox-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsxs22("label", { htmlFor: fieldId, className: "ddga-combobox__label", children: [
       label,
       required && /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", className: "ddga-combobox__required", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs21(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx28(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
+    /* @__PURE__ */ jsxs22(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx28(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs22(
         "button",
         {
           type: "button",
@@ -2869,7 +2990,7 @@ function Combobox({
           onOpenAutoFocus: (event) => {
             event.preventDefault();
           },
-          children: /* @__PURE__ */ jsxs21(
+          children: /* @__PURE__ */ jsxs22(
             Command,
             {
               id: searchId,
@@ -2885,7 +3006,7 @@ function Combobox({
                     className: "ddga-combobox-input"
                   }
                 ),
-                /* @__PURE__ */ jsxs21(Command.List, { "data-slot": "combobox-list", className: "ddga-combobox-list", children: [
+                /* @__PURE__ */ jsxs22(Command.List, { "data-slot": "combobox-list", className: "ddga-combobox-list", children: [
                   /* @__PURE__ */ jsx28(Command.Empty, { "data-slot": "combobox-empty", className: "ddga-combobox-empty", children: emptyMessage }),
                   children
                 ] })
@@ -2910,7 +3031,7 @@ function ComboboxItem({
 }) {
   const { value: selectedValue, select } = useComboboxContext("ComboboxItem");
   const isSelected = selectedValue === value;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     Command.Item,
     {
       value,
@@ -2954,7 +3075,7 @@ function ComboboxSeparator({ className, ...props }) {
 }
 
 // src/components/DatePicker/DatePicker.tsx
-import { useCallback as useCallback2, useContext as useContext8, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useContext as useContext9, useMemo as useMemo3, useState as useState4 } from "react";
 import {
   Button as AriaButton,
   Calendar as AriaCalendar,
@@ -2963,7 +3084,7 @@ import {
   CalendarGridBody as AriaCalendarGridBody,
   CalendarGridHeader as AriaCalendarGridHeader,
   CalendarHeaderCell as AriaCalendarHeaderCell,
-  CalendarStateContext as AriaCalendarStateContext,
+  CalendarStateContext as AriaCalendarStateContext2,
   DateInput as AriaDateInput,
   DatePicker as AriaDatePicker,
   DateSegment as AriaDateSegment,
@@ -2975,29 +3096,24 @@ import {
   Popover as AriaPopover,
   Text as AriaText
 } from "react-aria-components";
+import { CalendarDate as CalendarDate2 } from "@internationalized/date";
+import { cva as cva27 } from "class-variance-authority";
+
+// src/internal/calendar/calendar-core.tsx
+import { useContext as useContext8, useMemo as useMemo2 } from "react";
+import {
+  CalendarStateContext as AriaCalendarStateContext,
+  RangeCalendarStateContext as AriaRangeCalendarStateContext
+} from "react-aria-components";
 import {
   CalendarDate,
   GregorianCalendar,
   IslamicUmalquraCalendar,
   toCalendar
 } from "@internationalized/date";
-import { cva as cva27 } from "class-variance-authority";
-import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
-var datePickerTriggerVariants = cva27("ddga-date-picker-trigger", {
-  variants: {
-    size: {
-      sm: "ddga-date-picker-trigger--sm",
-      md: "ddga-date-picker-trigger--md"
-    },
-    error: {
-      true: "ddga-date-picker-trigger--error"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var datePickerVariants = datePickerTriggerVariants;
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+var GREGORIAN = new GregorianCalendar();
+var ISLAMIC_UMALQURA = new IslamicUmalquraCalendar();
 function dateToCalendarDate(date) {
   if (!date) return null;
   return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
@@ -3015,14 +3131,91 @@ function composeLocale(dgaLocale, calendar) {
   }
   return isArabic ? `${base}-u-nu-latn` : base;
 }
-var GREGORIAN = new GregorianCalendar();
-var ISLAMIC_UMALQURA = new IslamicUmalquraCalendar();
 function secondaryDayNumber(date, mainCalendar) {
   const other = mainCalendar === "hijri" ? GREGORIAN : ISLAMIC_UMALQURA;
   return toCalendar(date, other).day;
 }
+function useCalendarChrome(calendarSystem, calendarLabels) {
+  const dgaCtx = useContext8(DgaContext);
+  const dgaLocale = dgaCtx?.locale ?? "en";
+  const dir = dgaCtx?.dir ?? "ltr";
+  const locale = useMemo2(
+    () => composeLocale(dgaLocale, calendarSystem),
+    [dgaLocale, calendarSystem]
+  );
+  const portalContainer = dgaCtx?.portalEl ?? dgaCtx?.rootEl ?? void 0;
+  const PrevChevron = dir === "rtl" ? ChevronRight : ChevronLeft;
+  const NextChevron = dir === "rtl" ? ChevronLeft : ChevronRight;
+  const resolvedLabels = useMemo2(() => {
+    if (calendarLabels) return calendarLabels;
+    return dgaLocale.startsWith("ar") ? { gregorian: "\u0645\u064A\u0644\u0627\u062F\u064A", hijri: "\u0647\u062C\u0631\u064A" } : { gregorian: "Gregorian", hijri: "Hijri" };
+  }, [calendarLabels, dgaLocale]);
+  const navLabels = useMemo2(
+    () => dgaLocale.startsWith("ar") ? { month: "\u0627\u0644\u0634\u0647\u0631", year: "\u0627\u0644\u0633\u0646\u0629" } : { month: "Month", year: "Year" },
+    [dgaLocale]
+  );
+  const a11yLabels = useMemo2(
+    () => dgaLocale.startsWith("ar") ? { openCalendar: "\u0641\u062A\u062D \u0627\u0644\u062A\u0642\u0648\u064A\u0645", calendarSystem: "\u0646\u0638\u0627\u0645 \u0627\u0644\u062A\u0642\u0648\u064A\u0645" } : { openCalendar: "Open calendar", calendarSystem: "Calendar system" },
+    [dgaLocale]
+  );
+  return {
+    dgaLocale,
+    dir,
+    locale,
+    portalContainer,
+    PrevChevron,
+    NextChevron,
+    resolvedLabels,
+    navLabels,
+    a11yLabels
+  };
+}
+function CalendarSystemToggle({
+  value,
+  onChange,
+  labels,
+  groupLabel
+}) {
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": groupLabel,
+      className: "ddga-calendar-toggle",
+      "data-slot": "calendar-toggle",
+      children: [
+        /* @__PURE__ */ jsx29(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": value === "gregorian",
+            className: "ddga-calendar-toggle__button",
+            "data-active": value === "gregorian" ? "" : void 0,
+            onClick: () => onChange("gregorian"),
+            children: labels.gregorian
+          }
+        ),
+        /* @__PURE__ */ jsx29(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": value === "hijri",
+            className: "ddga-calendar-toggle__button",
+            "data-active": value === "hijri" ? "" : void 0,
+            onClick: () => onChange("hijri"),
+            children: labels.hijri
+          }
+        )
+      ]
+    }
+  );
+}
 function CalendarNavHeader({ locale, monthLabel, yearLabel }) {
-  const state = useContext8(AriaCalendarStateContext);
+  const rangeState = useContext8(AriaRangeCalendarStateContext);
+  const singleState = useContext8(AriaCalendarStateContext);
+  const state = rangeState ?? singleState;
   const focusedDate = state?.focusedDate ?? null;
   const focusedYear = focusedDate?.year ?? 0;
   const focusedCalendar = focusedDate?.calendar ?? GREGORIAN;
@@ -3047,13 +3240,13 @@ function CalendarNavHeader({ locale, monthLabel, yearLabel }) {
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
   }, [focusedDate, focusedCalendar, focusedYear, minValue, maxValue]);
   if (!state || !focusedDate) return null;
-  return /* @__PURE__ */ jsxs22("div", { className: "ddga-date-picker-calendar__nav-selects", "data-slot": "date-picker-calendar-nav", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "ddga-calendar__nav-selects", "data-slot": "calendar-nav", children: [
     /* @__PURE__ */ jsx29(
       "select",
       {
         "aria-label": monthLabel,
-        className: "ddga-date-picker-calendar__select ddga-date-picker-calendar__month-select",
-        "data-slot": "date-picker-month-select",
+        className: "ddga-calendar__select ddga-calendar__month-select",
+        "data-slot": "calendar-month-select",
         value: focusedDate.month,
         onChange: (e) => state.setFocusedDate(focusedDate.set({ month: Number(e.target.value) })),
         children: monthNames.map((name, i) => /* @__PURE__ */ jsx29("option", { value: i + 1, children: name }, i + 1))
@@ -3063,8 +3256,8 @@ function CalendarNavHeader({ locale, monthLabel, yearLabel }) {
       "select",
       {
         "aria-label": yearLabel,
-        className: "ddga-date-picker-calendar__select ddga-date-picker-calendar__year-select",
-        "data-slot": "date-picker-year-select",
+        className: "ddga-calendar__select ddga-calendar__year-select",
+        "data-slot": "calendar-year-select",
         value: focusedDate.year,
         onChange: (e) => state.setFocusedDate(focusedDate.set({ year: Number(e.target.value) })),
         children: yearOptions.map((y) => /* @__PURE__ */ jsx29("option", { value: y, children: y }, y))
@@ -3072,8 +3265,33 @@ function CalendarNavHeader({ locale, monthLabel, yearLabel }) {
     )
   ] });
 }
+function renderDayContent(primary, opts) {
+  if (!opts.showSecondary) return primary;
+  return /* @__PURE__ */ jsxs23(Fragment4, { children: [
+    /* @__PURE__ */ jsx29("span", { className: "ddga-calendar__cell-primary", children: primary }),
+    /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-calendar__cell-secondary", children: secondaryDayNumber(opts.date, opts.calendarSystem) })
+  ] });
+}
+
+// src/components/DatePicker/DatePicker.tsx
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+var datePickerTriggerVariants = cva27("ddga-date-picker-trigger", {
+  variants: {
+    size: {
+      sm: "ddga-date-picker-trigger--sm",
+      md: "ddga-date-picker-trigger--md"
+    },
+    error: {
+      true: "ddga-date-picker-trigger--error"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var datePickerVariants = datePickerTriggerVariants;
 function CalendarDayCell({ date, showSecondary, calendarSystem }) {
-  const state = useContext8(AriaCalendarStateContext);
+  const state = useContext9(AriaCalendarStateContext2);
   const start = state?.visibleRange.start;
   const isOutside = !!start && (date.year !== start.year || date.month !== start.month);
   const isOutOfBounds = state ? state.isInvalid(date) : false;
@@ -3084,27 +3302,21 @@ function CalendarDayCell({ date, showSecondary, calendarSystem }) {
       state.setFocusedDate(date);
       state.selectDate(date);
     };
-    return /* @__PURE__ */ jsx29("td", { role: "gridcell", children: /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsx30("td", { role: "gridcell", children: /* @__PURE__ */ jsx30(
       "button",
       {
         type: "button",
         tabIndex: -1,
-        className: "ddga-date-picker-calendar__cell",
+        className: "ddga-calendar__cell",
         "data-outside-month": "",
         "data-selected": isSelected ? "" : void 0,
         "data-slot": "date-picker-day-cell",
         onClick: handleSelect,
-        children: showSecondary ? /* @__PURE__ */ jsxs22(Fragment2, { children: [
-          /* @__PURE__ */ jsx29("span", { className: "ddga-date-picker-calendar__cell-primary", children: date.day }),
-          /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker-calendar__cell-secondary", children: secondaryDayNumber(date, calendarSystem) })
-        ] }) : String(date.day)
+        children: renderDayContent(date.day, { showSecondary, date, calendarSystem })
       }
     ) });
   }
-  return /* @__PURE__ */ jsx29(AriaCalendarCell, { date, className: "ddga-date-picker-calendar__cell", children: ({ formattedDate }) => showSecondary ? /* @__PURE__ */ jsxs22(Fragment2, { children: [
-    /* @__PURE__ */ jsx29("span", { className: "ddga-date-picker-calendar__cell-primary", children: formattedDate }),
-    /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker-calendar__cell-secondary", children: secondaryDayNumber(date, calendarSystem) })
-  ] }) : formattedDate });
+  return /* @__PURE__ */ jsx30(AriaCalendarCell, { date, className: "ddga-calendar__cell", children: ({ formattedDate }) => renderDayContent(formattedDate, { showSecondary, date, calendarSystem }) });
 }
 function DatePicker({
   value: controlledValue,
@@ -3137,7 +3349,7 @@ function DatePicker({
   const value = isValueControlled ? dateToCalendarDate(controlledValue) : internalValue;
   const handleAriaChange = useCallback2(
     (next) => {
-      const nextCD = next ? new CalendarDate(next.year, next.month, next.day) : null;
+      const nextCD = next ? new CalendarDate2(next.year, next.month, next.day) : null;
       if (!isValueControlled) setInternalValue(nextCD);
       onChange?.(calendarDateToDate(nextCD));
     },
@@ -3153,33 +3365,24 @@ function DatePicker({
     },
     [isCalendarControlled, onCalendarChange]
   );
-  const dgaCtx = useContext8(DgaContext);
-  const dgaLocale = dgaCtx?.locale ?? "en";
-  const ariaLocale = useMemo2(
-    () => composeLocale(dgaLocale, calendarSystem),
-    [dgaLocale, calendarSystem]
-  );
-  const portalContainer = dgaCtx?.portalEl ?? dgaCtx?.rootEl ?? void 0;
-  const dgaDir = dgaCtx?.dir ?? "ltr";
-  const PrevChevron = dgaDir === "rtl" ? ChevronRight : ChevronLeft;
-  const NextChevron = dgaDir === "rtl" ? ChevronLeft : ChevronRight;
-  const resolvedLabels = useMemo2(() => {
-    if (calendarLabels) return calendarLabels;
-    const isArabic = dgaLocale.startsWith("ar");
-    return isArabic ? { gregorian: "\u0645\u064A\u0644\u0627\u062F\u064A", hijri: "\u0647\u062C\u0631\u064A" } : { gregorian: "Gregorian", hijri: "Hijri" };
-  }, [calendarLabels, dgaLocale]);
-  const navLabels = useMemo2(
-    () => dgaLocale.startsWith("ar") ? { month: "\u0627\u0644\u0634\u0647\u0631", year: "\u0627\u0644\u0633\u0646\u0629" } : { month: "Month", year: "Year" },
-    [dgaLocale]
-  );
-  const ariaMinValue = useMemo2(() => dateToCalendarDate(minValue) ?? void 0, [minValue]);
-  const ariaMaxValue = useMemo2(() => dateToCalendarDate(maxValue) ?? void 0, [maxValue]);
-  const dialogAriaLabel = ariaLabel ?? (typeof label === "string" ? label : ariaLabelledBy ? void 0 : "Date");
+  const {
+    dgaLocale,
+    locale: ariaLocale,
+    portalContainer,
+    PrevChevron,
+    NextChevron,
+    resolvedLabels,
+    navLabels,
+    a11yLabels
+  } = useCalendarChrome(calendarSystem, calendarLabels);
+  const ariaMinValue = useMemo3(() => dateToCalendarDate(minValue) ?? void 0, [minValue]);
+  const ariaMaxValue = useMemo3(() => dateToCalendarDate(maxValue) ?? void 0, [maxValue]);
+  const dialogAriaLabel = ariaLabel ?? (typeof label === "string" ? label : ariaLabelledBy ? void 0 : dgaLocale.startsWith("ar") ? "\u0627\u0644\u062A\u0627\u0631\u064A\u062E" : "Date");
   const showToggle = showCalendarToggle && !isCalendarControlled;
   const hasError = !!error;
   const hasErrorMessage = hasError && errorMessage != null && errorMessage !== "";
   const hasHelper = !hasErrorMessage && helperText != null && helperText !== "";
-  return /* @__PURE__ */ jsx29(I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx30(I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */ jsxs24(
     AriaDatePicker,
     {
       value,
@@ -3196,17 +3399,17 @@ function DatePicker({
       className: "ddga-field",
       "data-slot": "date-picker-field",
       children: [
-        label && /* @__PURE__ */ jsxs22(AriaLabel, { className: "ddga-date-picker__label", children: [
+        label && /* @__PURE__ */ jsxs24(AriaLabel, { className: "ddga-date-picker__label", children: [
           label,
-          required && /* @__PURE__ */ jsx29("span", { "aria-hidden": "true", className: "ddga-date-picker__required", children: "*" })
+          required && /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", className: "ddga-date-picker__required", children: "*" })
         ] }),
-        /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsxs24(
           AriaGroup,
           {
             "data-slot": "date-picker-trigger",
             className: cn(datePickerTriggerVariants({ size, error: hasError }), className),
             children: [
-              /* @__PURE__ */ jsx29(AriaDateInput, { className: "ddga-date-picker__input", "data-slot": "date-picker-input", children: (segment) => /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(AriaDateInput, { className: "ddga-date-picker__input", "data-slot": "date-picker-input", children: (segment) => /* @__PURE__ */ jsx30(
                 AriaDateSegment,
                 {
                   segment,
@@ -3214,19 +3417,19 @@ function DatePicker({
                   "data-slot": "date-picker-segment"
                 }
               ) }),
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(
                 AriaButton,
                 {
                   className: "ddga-date-picker__icon-button",
-                  "aria-label": "Open calendar",
+                  "aria-label": a11yLabels.openCalendar,
                   "data-slot": "date-picker-trigger-button",
-                  children: /* @__PURE__ */ jsx29(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-picker__icon" })
+                  children: /* @__PURE__ */ jsx30(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-picker__icon" })
                 }
               )
             ]
           }
         ),
-        hasHelper && /* @__PURE__ */ jsx29(
+        hasHelper && /* @__PURE__ */ jsx30(
           AriaText,
           {
             slot: "description",
@@ -3235,7 +3438,7 @@ function DatePicker({
             children: helperText
           }
         ),
-        hasErrorMessage && /* @__PURE__ */ jsx29(
+        hasErrorMessage && /* @__PURE__ */ jsx30(
           AriaFieldError,
           {
             className: "ddga-field__message ddga-field__message--error",
@@ -3243,69 +3446,43 @@ function DatePicker({
             children: errorMessage
           }
         ),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           AriaPopover,
           {
             UNSTABLE_portalContainer: portalContainer,
-            className: "ddga-date-picker-popover",
+            className: "ddga-calendar-popover",
             "data-slot": "date-picker-popover",
             offset: 6,
             containerPadding: 12,
-            children: /* @__PURE__ */ jsxs22(
+            children: /* @__PURE__ */ jsxs24(
               AriaDialog,
               {
-                className: "ddga-date-picker-dialog",
+                className: "ddga-calendar-dialog",
                 "data-slot": "date-picker-dialog",
                 "aria-label": dialogAriaLabel,
                 "aria-labelledby": ariaLabelledBy,
                 children: [
-                  showToggle && /* @__PURE__ */ jsxs22(
-                    "div",
+                  showToggle && /* @__PURE__ */ jsx30(
+                    CalendarSystemToggle,
                     {
-                      role: "tablist",
-                      "aria-label": "Calendar system",
-                      className: "ddga-date-picker-toggle",
-                      "data-slot": "date-picker-toggle",
-                      children: [
-                        /* @__PURE__ */ jsx29(
-                          "button",
-                          {
-                            type: "button",
-                            role: "tab",
-                            "aria-selected": calendarSystem === "gregorian",
-                            className: "ddga-date-picker-toggle__button",
-                            "data-active": calendarSystem === "gregorian" ? "" : void 0,
-                            onClick: () => setCalendar("gregorian"),
-                            children: resolvedLabels.gregorian
-                          }
-                        ),
-                        /* @__PURE__ */ jsx29(
-                          "button",
-                          {
-                            type: "button",
-                            role: "tab",
-                            "aria-selected": calendarSystem === "hijri",
-                            className: "ddga-date-picker-toggle__button",
-                            "data-active": calendarSystem === "hijri" ? "" : void 0,
-                            onClick: () => setCalendar("hijri"),
-                            children: resolvedLabels.hijri
-                          }
-                        )
-                      ]
+                      value: calendarSystem,
+                      onChange: setCalendar,
+                      labels: resolvedLabels,
+                      groupLabel: a11yLabels.calendarSystem
                     }
                   ),
-                  /* @__PURE__ */ jsxs22(AriaCalendar, { className: "ddga-date-picker-calendar", "data-slot": "date-picker-calendar", children: [
-                    /* @__PURE__ */ jsxs22("header", { className: "ddga-date-picker-calendar__header", children: [
-                      /* @__PURE__ */ jsx29(
+                  /* @__PURE__ */ jsxs24(AriaCalendar, { className: "ddga-calendar", "data-slot": "date-picker-calendar", children: [
+                    /* @__PURE__ */ jsxs24("header", { className: "ddga-calendar__header", children: [
+                      /* @__PURE__ */ jsx30(
                         AriaButton,
                         {
                           slot: "previous",
-                          className: "ddga-date-picker-calendar__nav",
+                          className: "ddga-calendar__nav",
                           "data-slot": "date-picker-calendar-prev",
-                          children: /* @__PURE__ */ jsx29(PrevChevron, { "aria-hidden": "true" })
+                          children: /* @__PURE__ */ jsx30(PrevChevron, { "aria-hidden": "true" })
                         }
                       ),
-                      /* @__PURE__ */ jsx29(
+                      /* @__PURE__ */ jsx30(
                         CalendarNavHeader,
                         {
                           locale: ariaLocale,
@@ -3313,19 +3490,19 @@ function DatePicker({
                           yearLabel: navLabels.year
                         }
                       ),
-                      /* @__PURE__ */ jsx29(
+                      /* @__PURE__ */ jsx30(
                         AriaButton,
                         {
                           slot: "next",
-                          className: "ddga-date-picker-calendar__nav",
+                          className: "ddga-calendar__nav",
                           "data-slot": "date-picker-calendar-next",
-                          children: /* @__PURE__ */ jsx29(NextChevron, { "aria-hidden": "true" })
+                          children: /* @__PURE__ */ jsx30(NextChevron, { "aria-hidden": "true" })
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs22(AriaCalendarGrid, { className: "ddga-date-picker-calendar__grid", children: [
-                      /* @__PURE__ */ jsx29(AriaCalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx29(AriaCalendarHeaderCell, { className: "ddga-date-picker-calendar__weekday", children: day }) }),
-                      /* @__PURE__ */ jsx29(AriaCalendarGridBody, { children: (date) => /* @__PURE__ */ jsx29(
+                    /* @__PURE__ */ jsxs24(AriaCalendarGrid, { className: "ddga-calendar__grid", children: [
+                      /* @__PURE__ */ jsx30(AriaCalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx30(AriaCalendarHeaderCell, { className: "ddga-calendar__weekday", children: day }) }),
+                      /* @__PURE__ */ jsx30(AriaCalendarGridBody, { children: (date) => /* @__PURE__ */ jsx30(
                         CalendarDayCell,
                         {
                           date,
@@ -3347,7 +3524,7 @@ function DatePicker({
 
 // src/components/FileUpload/FileUpload.tsx
 import { useRef, useState as useState5 } from "react";
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 function matchesAccept(file, accept) {
   if (!accept) return true;
   const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
@@ -3451,12 +3628,12 @@ function FileUpload({
       setIsDragging(false);
     }
   }
-  return /* @__PURE__ */ jsxs23("div", { "data-slot": "file-upload-field", className: cn("ddga-field", "ddga-file-upload", className), children: [
-    label && /* @__PURE__ */ jsxs23("label", { htmlFor: fieldId, className: "ddga-file-upload__label", children: [
+  return /* @__PURE__ */ jsxs25("div", { "data-slot": "file-upload-field", className: cn("ddga-field", "ddga-file-upload", className), children: [
+    label && /* @__PURE__ */ jsxs25("label", { htmlFor: fieldId, className: "ddga-file-upload__label", children: [
       label,
-      required && /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", className: "ddga-file-upload__required", children: "*" })
+      required && /* @__PURE__ */ jsx31("span", { "aria-hidden": "true", className: "ddga-file-upload__required", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsxs25(
       "div",
       {
         "data-slot": "file-upload-dropzone",
@@ -3474,9 +3651,9 @@ function FileUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ jsx30(Upload, { className: "ddga-file-upload__icon", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__hint", children: hint }),
-          /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(Upload, { className: "ddga-file-upload__icon", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx31("span", { className: "ddga-file-upload__hint", children: hint }),
+          /* @__PURE__ */ jsx31(
             "input",
             {
               ...controlProps,
@@ -3495,24 +3672,24 @@ function FileUpload({
         ]
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ jsx30(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ jsx30(FieldMessage, { id: helperId, variant: "helper", children: helperText }),
-    files.length > 0 && /* @__PURE__ */ jsx30("ul", { "data-slot": "file-upload-list", className: "ddga-file-upload__list", children: files.map((item) => {
+    hasErrorMessage && /* @__PURE__ */ jsx31(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx31(FieldMessage, { id: helperId, variant: "helper", children: helperText }),
+    files.length > 0 && /* @__PURE__ */ jsx31("ul", { "data-slot": "file-upload-list", className: "ddga-file-upload__list", children: files.map((item) => {
       const status = item.status ?? "pending";
-      return /* @__PURE__ */ jsxs23(
+      return /* @__PURE__ */ jsxs25(
         "li",
         {
           "data-slot": "file-upload-item",
           "data-status": status,
           className: "ddga-file-upload__item",
           children: [
-            /* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__item-icon", "aria-hidden": "true", children: status === "success" ? /* @__PURE__ */ jsx30(Check, {}) : status === "error" ? /* @__PURE__ */ jsx30(AlertCircle, {}) : /* @__PURE__ */ jsx30(Upload, {}) }),
-            /* @__PURE__ */ jsxs23("div", { className: "ddga-file-upload__item-main", children: [
-              /* @__PURE__ */ jsxs23("div", { className: "ddga-file-upload__item-head", children: [
-                /* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__item-name", title: item.file.name, children: item.file.name }),
-                /* @__PURE__ */ jsx30("span", { className: "ddga-file-upload__item-meta", children: formatBytes(item.file.size) })
+            /* @__PURE__ */ jsx31("span", { className: "ddga-file-upload__item-icon", "aria-hidden": "true", children: status === "success" ? /* @__PURE__ */ jsx31(Check, {}) : status === "error" ? /* @__PURE__ */ jsx31(AlertCircle, {}) : /* @__PURE__ */ jsx31(Upload, {}) }),
+            /* @__PURE__ */ jsxs25("div", { className: "ddga-file-upload__item-main", children: [
+              /* @__PURE__ */ jsxs25("div", { className: "ddga-file-upload__item-head", children: [
+                /* @__PURE__ */ jsx31("span", { className: "ddga-file-upload__item-name", title: item.file.name, children: item.file.name }),
+                /* @__PURE__ */ jsx31("span", { className: "ddga-file-upload__item-meta", children: formatBytes(item.file.size) })
               ] }),
-              status === "uploading" && /* @__PURE__ */ jsx30(
+              status === "uploading" && /* @__PURE__ */ jsx31(
                 Progress,
                 {
                   size: "sm",
@@ -3521,9 +3698,9 @@ function FileUpload({
                   className: "ddga-file-upload__item-progress"
                 }
               ),
-              status === "error" && item.error && /* @__PURE__ */ jsx30("span", { role: "alert", className: "ddga-file-upload__item-error", children: item.error })
+              status === "error" && item.error && /* @__PURE__ */ jsx31("span", { role: "alert", className: "ddga-file-upload__item-error", children: item.error })
             ] }),
-            onRemove && /* @__PURE__ */ jsx30(
+            onRemove && /* @__PURE__ */ jsx31(
               Button,
               {
                 type: "button",
@@ -3532,7 +3709,7 @@ function FileUpload({
                 "aria-label": `${removeLabel}: ${item.file.name}`,
                 onClick: () => onRemove(item.id),
                 className: "ddga-file-upload__item-remove",
-                children: /* @__PURE__ */ jsx30(Close, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ jsx31(Close, { "aria-hidden": "true" })
               }
             )
           ]
@@ -3547,7 +3724,7 @@ function FileUpload({
 import { useId as useId4 } from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
 import { cva as cva28 } from "class-variance-authority";
-import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 var sliderVariants = cva28("ddga-slider", {
   variants: {
     size: {
@@ -3603,12 +3780,12 @@ function Slider({
   const wrap = (next) => isRange ? next : next[0];
   const currentForRender = valueArray ?? defaultArray;
   const fmt = (n) => formatValue ? formatValue(n) : String(n);
-  return /* @__PURE__ */ jsxs24("div", { "data-slot": "slider-field", className: "ddga-field", children: [
-    (label || showValue) && /* @__PURE__ */ jsxs24("div", { className: "ddga-slider__header", children: [
-      label && /* @__PURE__ */ jsx31("span", { id: labelId, className: "ddga-slider__label", children: label }),
-      showValue && /* @__PURE__ */ jsx31("span", { className: "ddga-slider__value", "aria-hidden": "true", children: currentForRender.map(fmt).join(" \u2013 ") })
+  return /* @__PURE__ */ jsxs26("div", { "data-slot": "slider-field", className: "ddga-field", children: [
+    (label || showValue) && /* @__PURE__ */ jsxs26("div", { className: "ddga-slider__header", children: [
+      label && /* @__PURE__ */ jsx32("span", { id: labelId, className: "ddga-slider__label", children: label }),
+      showValue && /* @__PURE__ */ jsx32("span", { className: "ddga-slider__value", "aria-hidden": "true", children: currentForRender.map(fmt).join(" \u2013 ") })
     ] }),
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs26(
       SliderPrimitive.Root,
       {
         ...props,
@@ -3623,8 +3800,8 @@ function Slider({
         "data-slot": "slider",
         className: cn(sliderVariants({ size, error: hasError }), className),
         children: [
-          /* @__PURE__ */ jsx31(SliderPrimitive.Track, { "data-slot": "slider-track", className: "ddga-slider__track", children: /* @__PURE__ */ jsx31(SliderPrimitive.Range, { "data-slot": "slider-range", className: "ddga-slider__range" }) }),
-          currentForRender.map((thumbValue, index) => /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(SliderPrimitive.Track, { "data-slot": "slider-track", className: "ddga-slider__track", children: /* @__PURE__ */ jsx32(SliderPrimitive.Range, { "data-slot": "slider-range", className: "ddga-slider__range" }) }),
+          currentForRender.map((thumbValue, index) => /* @__PURE__ */ jsx32(
             SliderPrimitive.Thumb,
             {
               "data-slot": "slider-thumb",
@@ -3639,15 +3816,15 @@ function Slider({
         ]
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ jsx31(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ jsx31(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ jsx32(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx32(FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
 // src/components/NumberInput/NumberInput.tsx
 import { useState as useState6 } from "react";
 import { cva as cva29 } from "class-variance-authority";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 var numberInputVariants = cva29("ddga-number-input", {
   variants: {
     size: {
@@ -3757,18 +3934,18 @@ function NumberInput({
   }
   const atMin = min != null && numericValue != null && numericValue <= min;
   const atMax = max != null && numericValue != null && numericValue >= max;
-  return /* @__PURE__ */ jsxs25("div", { "data-slot": "number-input-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ jsxs25("label", { htmlFor: fieldId, className: "ddga-number-input__label", children: [
+  return /* @__PURE__ */ jsxs27("div", { "data-slot": "number-input-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsxs27("label", { htmlFor: fieldId, className: "ddga-number-input__label", children: [
       label,
-      required && /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", className: "ddga-number-input__required", children: "*" })
+      required && /* @__PURE__ */ jsx33("span", { "aria-hidden": "true", className: "ddga-number-input__required", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs27(
       "div",
       {
         "data-slot": "number-input-control",
         className: cn(numberInputVariants({ size, error: hasError }), className),
         children: [
-          !hideControls && /* @__PURE__ */ jsx32(
+          !hideControls && /* @__PURE__ */ jsx33(
             "button",
             {
               type: "button",
@@ -3778,10 +3955,10 @@ function NumberInput({
               onClick: () => stepBy(-1),
               disabled: disabled || atMin,
               tabIndex: -1,
-              children: /* @__PURE__ */ jsx32(Minus, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx33(Minus, { "aria-hidden": "true" })
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             "input",
             {
               ...props,
@@ -3798,7 +3975,7 @@ function NumberInput({
               className: "ddga-number-input__field"
             }
           ),
-          !hideControls && /* @__PURE__ */ jsx32(
+          !hideControls && /* @__PURE__ */ jsx33(
             "button",
             {
               type: "button",
@@ -3808,21 +3985,21 @@ function NumberInput({
               onClick: () => stepBy(1),
               disabled: disabled || atMax,
               tabIndex: -1,
-              children: /* @__PURE__ */ jsx32(Plus, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx33(Plus, { "aria-hidden": "true" })
             }
           )
         ]
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ jsx32(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ jsx32(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ jsx33(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx33(FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
 // src/components/Rating/Rating.tsx
 import { useRef as useRef2, useState as useState7 } from "react";
 import { cva as cva30 } from "class-variance-authority";
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 var ratingVariants = cva30("ddga-rating", {
   variants: {
     size: {
@@ -3931,7 +4108,7 @@ function Rating({
   }
   const stars = Array.from({ length: max }, (_, index) => {
     const level = fillFor(index, displayValue, allowHalf);
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs28(
       "span",
       {
         "data-slot": "rating-star",
@@ -3940,8 +4117,8 @@ function Rating({
         onPointerMove: interactive ? (event) => setHover(pointerValue(event, index)) : void 0,
         onClick: interactive ? (event) => commit(pointerValue(event, index)) : void 0,
         children: [
-          /* @__PURE__ */ jsx33(Star, { className: "ddga-rating__star-bg", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx33("span", { className: "ddga-rating__star-fill", "aria-hidden": "true", children: /* @__PURE__ */ jsx33(Star, { className: "ddga-rating__star-fg", "aria-hidden": "true" }) })
+          /* @__PURE__ */ jsx34(Star, { className: "ddga-rating__star-bg", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx34("span", { className: "ddga-rating__star-fill", "aria-hidden": "true", children: /* @__PURE__ */ jsx34(Star, { className: "ddga-rating__star-fg", "aria-hidden": "true" }) })
         ]
       },
       index
@@ -3956,9 +4133,9 @@ function Rating({
   };
   const labelledBy = label ? `${fieldId}-label` : props["aria-labelledby"];
   const ariaLabel = labelledBy ? void 0 : props["aria-label"] ?? "Rating";
-  return /* @__PURE__ */ jsxs26("div", { "data-slot": "rating-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ jsx33("span", { id: `${fieldId}-label`, className: "ddga-rating__label", children: label }),
-    readOnly ? /* @__PURE__ */ jsx33("div", { ...sharedProps, role: "img", "aria-label": formatValueText(currentValue, max), children: stars }) : /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs28("div", { "data-slot": "rating-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsx34("span", { id: `${fieldId}-label`, className: "ddga-rating__label", children: label }),
+    readOnly ? /* @__PURE__ */ jsx34("div", { ...sharedProps, role: "img", "aria-label": formatValueText(currentValue, max), children: stars }) : /* @__PURE__ */ jsx34(
       "div",
       {
         ...sharedProps,
@@ -3978,15 +4155,15 @@ function Rating({
         children: stars
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ jsx33(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ jsx33(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ jsx34(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx34(FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
 // src/components/Toggle/Toggle.tsx
 import { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { cva as cva31 } from "class-variance-authority";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var toggleVariants = cva31("ddga-toggle", {
   variants: {
     variant: {
@@ -4022,7 +4199,7 @@ var toggleGroupVariants = cva31("ddga-toggle-group", {
   }
 });
 function Toggle({ variant, size, className, ...props }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     TogglePrimitive.Root,
     {
       "data-slot": "toggle",
@@ -4037,7 +4214,7 @@ function ToggleGroup({ variant, size, className, ...props }) {
       "[@dev-dga/react] ToggleGroup should have an `aria-label` or `aria-labelledby` so the button group has an accessible name."
     );
   }
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     ToggleGroupPrimitive.Root,
     {
       "data-slot": "toggle-group",
@@ -4047,7 +4224,7 @@ function ToggleGroup({ variant, size, className, ...props }) {
   );
 }
 function ToggleGroupItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     ToggleGroupPrimitive.Item,
     {
       "data-slot": "toggle-group-item",
@@ -4059,7 +4236,7 @@ function ToggleGroupItem({ className, ...props }) {
 
 // src/components/DescriptionList/DescriptionList.tsx
 import { cva as cva32 } from "class-variance-authority";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var descriptionListVariants = cva32("ddga-description-list", {
   variants: {
     orientation: {
@@ -4075,7 +4252,7 @@ var descriptionListVariants = cva32("ddga-description-list", {
   }
 });
 function DescriptionList({ orientation, divided, className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "dl",
     {
       "data-slot": "description-list",
@@ -4085,7 +4262,7 @@ function DescriptionList({ orientation, divided, className, ...props }) {
   );
 }
 function DescriptionItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "data-slot": "description-item",
@@ -4095,7 +4272,7 @@ function DescriptionItem({ className, ...props }) {
   );
 }
 function DescriptionTerm({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "dt",
     {
       "data-slot": "description-term",
@@ -4105,7 +4282,7 @@ function DescriptionTerm({ className, ...props }) {
   );
 }
 function DescriptionDetails({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "dd",
     {
       "data-slot": "description-details",
@@ -4119,7 +4296,7 @@ function DescriptionDetails({ className, ...props }) {
 import "react";
 import { Slot as SlotPrimitive9 } from "radix-ui";
 import { cva as cva33 } from "class-variance-authority";
-import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 var emptyStateVariants = cva33("ddga-empty-state", {
   variants: {
     variant: {
@@ -4140,10 +4317,10 @@ var emptyStateVariants = cva33("ddga-empty-state", {
   }
 });
 var DEFAULT_ICONS3 = {
-  default: /* @__PURE__ */ jsx36(Inbox, { "aria-hidden": "true" }),
-  search: /* @__PURE__ */ jsx36(Search, { "aria-hidden": "true" }),
-  error: /* @__PURE__ */ jsx36(AlertCircle, { "aria-hidden": "true" }),
-  success: /* @__PURE__ */ jsx36(Check, { "aria-hidden": "true" })
+  default: /* @__PURE__ */ jsx37(Inbox, { "aria-hidden": "true" }),
+  search: /* @__PURE__ */ jsx37(Search, { "aria-hidden": "true" }),
+  error: /* @__PURE__ */ jsx37(AlertCircle, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx37(Check, { "aria-hidden": "true" })
 };
 function EmptyState({
   variant,
@@ -4153,24 +4330,26 @@ function EmptyState({
   description,
   action,
   secondaryAction,
+  asChild,
   className,
   children,
   ...props
 }) {
   const resolvedIcon = icon === false ? null : icon !== void 0 ? icon : DEFAULT_ICONS3[variant ?? "default"];
-  return /* @__PURE__ */ jsx36(
-    "div",
+  const Comp = asChild ? SlotPrimitive9.Slot : "div";
+  return /* @__PURE__ */ jsx37(
+    Comp,
     {
       "data-slot": "empty-state",
       "data-variant": variant ?? "default",
       "data-size": size ?? "md",
       className: cn(emptyStateVariants({ variant, size }), className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs27(Fragment3, { children: [
-        resolvedIcon ? /* @__PURE__ */ jsx36(EmptyStateMedia, { children: resolvedIcon }) : null,
-        title ? /* @__PURE__ */ jsx36(EmptyStateTitle, { children: title }) : null,
-        description ? /* @__PURE__ */ jsx36(EmptyStateDescription, { children: description }) : null,
-        action || secondaryAction ? /* @__PURE__ */ jsxs27(EmptyStateActions, { children: [
+      children: children ?? /* @__PURE__ */ jsxs29(Fragment5, { children: [
+        resolvedIcon ? /* @__PURE__ */ jsx37(EmptyStateMedia, { children: resolvedIcon }) : null,
+        title ? /* @__PURE__ */ jsx37(EmptyStateTitle, { children: title }) : null,
+        description ? /* @__PURE__ */ jsx37(EmptyStateDescription, { children: description }) : null,
+        action || secondaryAction ? /* @__PURE__ */ jsxs29(EmptyStateActions, { children: [
           action,
           secondaryAction
         ] }) : null
@@ -4179,7 +4358,7 @@ function EmptyState({
   );
 }
 function EmptyStateMedia({ className, ...props }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       "data-slot": "empty-state-media",
@@ -4191,7 +4370,7 @@ function EmptyStateMedia({ className, ...props }) {
 }
 function EmptyStateTitle({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive9.Slot : "h3";
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Comp,
     {
       "data-slot": "empty-state-title",
@@ -4202,7 +4381,7 @@ function EmptyStateTitle({ asChild, className, ...props }) {
 }
 function EmptyStateDescription({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive9.Slot : "p";
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Comp,
     {
       "data-slot": "empty-state-description",
@@ -4213,7 +4392,7 @@ function EmptyStateDescription({ asChild, className, ...props }) {
 }
 function EmptyStateActions({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive9.Slot : "div";
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     Comp,
     {
       "data-slot": "empty-state-actions",
@@ -4226,18 +4405,22 @@ function EmptyStateActions({ asChild, className, ...props }) {
 // src/components/Stat/Stat.tsx
 import "react";
 import { cva as cva34 } from "class-variance-authority";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 var statVariants = cva34("ddga-stat", {
   variants: {
     variant: {
       flat: "ddga-stat--flat",
       elevated: "ddga-stat--elevated",
-      accent: "ddga-stat--accent"
+      accent: "ddga-stat--accent",
+      // Soft sentiment-tinted gradient surface (reuses the accent tint vars).
+      gradient: "ddga-stat--gradient"
     },
     size: {
       sm: "ddga-stat--sm",
       md: "ddga-stat--md",
-      lg: "ddga-stat--lg"
+      lg: "ddga-stat--lg",
+      // Hero/display size for headline KPIs (display-scale value).
+      xl: "ddga-stat--xl"
     }
   },
   defaultVariants: {
@@ -4246,9 +4429,9 @@ var statVariants = cva34("ddga-stat", {
   }
 });
 var TREND_ICONS = {
-  up: /* @__PURE__ */ jsx37(CaretUp, { "aria-hidden": "true" }),
-  down: /* @__PURE__ */ jsx37(CaretDown, { "aria-hidden": "true" }),
-  flat: /* @__PURE__ */ jsx37(Minus, { "aria-hidden": "true" })
+  up: /* @__PURE__ */ jsx38(CaretUp, { "aria-hidden": "true" }),
+  down: /* @__PURE__ */ jsx38(CaretDown, { "aria-hidden": "true" }),
+  flat: /* @__PURE__ */ jsx38(Minus, { "aria-hidden": "true" })
 };
 var TREND_SENTIMENT = {
   up: "positive",
@@ -4269,13 +4452,14 @@ function Stat({
   changeLabel,
   trend,
   sentiment,
+  changeVariant,
   icon,
   className,
   children,
   ...props
 }) {
   const resolvedSentiment = resolveSentiment(trend, sentiment);
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       "data-slot": "stat",
@@ -4285,14 +4469,14 @@ function Stat({
       className: cn(statVariants({ variant, size }), className),
       ...props,
       children: [
-        label || icon ? /* @__PURE__ */ jsxs28("div", { className: "ddga-stat__label-row", children: [
-          label ? /* @__PURE__ */ jsx37(StatLabel, { children: label }) : null,
-          icon ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__icon", "aria-hidden": "true", children: icon }) : null
+        label || icon ? /* @__PURE__ */ jsxs30("div", { className: "ddga-stat__label-row", children: [
+          label ? /* @__PURE__ */ jsx38(StatLabel, { children: label }) : null,
+          icon ? /* @__PURE__ */ jsx38("span", { className: "ddga-stat__icon", "aria-hidden": "true", children: icon }) : null
         ] }) : null,
-        value ? /* @__PURE__ */ jsx37(StatValue, { children: value }) : null,
-        change || changeLabel ? /* @__PURE__ */ jsxs28("div", { className: "ddga-stat__change-row", children: [
-          change ? /* @__PURE__ */ jsx37(StatChange, { trend, sentiment, children: change }) : null,
-          changeLabel ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__change-label", children: changeLabel }) : null
+        value ? /* @__PURE__ */ jsx38(StatValue, { children: value }) : null,
+        change || changeLabel ? /* @__PURE__ */ jsxs30("div", { className: "ddga-stat__change-row", children: [
+          change ? /* @__PURE__ */ jsx38(StatChange, { trend, sentiment, variant: changeVariant, children: change }) : null,
+          changeLabel ? /* @__PURE__ */ jsx38("span", { className: "ddga-stat__change-label", children: changeLabel }) : null
         ] }) : null,
         children
       ]
@@ -4300,14 +4484,17 @@ function Stat({
   );
 }
 function StatLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx37("div", { "data-slot": "stat-label", className: cn("ddga-stat__label", className), ...props });
+  return /* @__PURE__ */ jsx38("div", { "data-slot": "stat-label", className: cn("ddga-stat__label", className), ...props });
 }
 function StatValue({ className, ...props }) {
-  return /* @__PURE__ */ jsx37("div", { "data-slot": "stat-value", className: cn("ddga-stat__value", className), ...props });
+  return /* @__PURE__ */ jsx38("div", { "data-slot": "stat-value", className: cn("ddga-stat__value", className), ...props });
 }
-function StatChange({ trend, sentiment, className, children, ...props }) {
+function StatChart({ className, ...props }) {
+  return /* @__PURE__ */ jsx38("div", { "data-slot": "stat-chart", className: cn("ddga-stat__chart", className), ...props });
+}
+function StatChange({ trend, sentiment, variant, className, children, ...props }) {
   const resolvedSentiment = resolveSentiment(trend, sentiment);
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       "data-slot": "stat-change",
@@ -4316,11 +4503,12 @@ function StatChange({ trend, sentiment, className, children, ...props }) {
       className: cn(
         "ddga-stat__change",
         resolvedSentiment ? `ddga-stat__change--${resolvedSentiment}` : null,
+        variant === "chip" && "ddga-stat__change--chip",
         className
       ),
       ...props,
       children: [
-        trend ? /* @__PURE__ */ jsx37("span", { className: "ddga-stat__change-icon", children: TREND_ICONS[trend] }) : null,
+        trend ? /* @__PURE__ */ jsx38("span", { className: "ddga-stat__change-icon", children: TREND_ICONS[trend] }) : null,
         children
       ]
     }
@@ -4329,7 +4517,7 @@ function StatChange({ trend, sentiment, className, children, ...props }) {
 
 // src/components/Stat/StatGroup.tsx
 import { cva as cva35 } from "class-variance-authority";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var statGroupVariants = cva35("ddga-stat-group", {
   variants: {
     orientation: {
@@ -4348,7 +4536,7 @@ var statGroupVariants = cva35("ddga-stat-group", {
   }
 });
 function StatGroup({ orientation, gap, columns, className, style, ...props }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       "data-slot": "stat-group",
@@ -4364,10 +4552,10 @@ function StatGroup({ orientation, gap, columns, className, style, ...props }) {
 }
 
 // src/components/Popover/Popover.tsx
-import { useContext as useContext9 } from "react";
+import { useContext as useContext10 } from "react";
 import { Popover as PopoverPrimitive2 } from "radix-ui";
 import { cva as cva36 } from "class-variance-authority";
-import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
 var popoverContentVariants = cva36("ddga-popover", {
   variants: {
     size: {
@@ -4380,13 +4568,13 @@ var popoverContentVariants = cva36("ddga-popover", {
   }
 });
 function Popover(props) {
-  return /* @__PURE__ */ jsx39(PopoverPrimitive2.Root, { ...props });
+  return /* @__PURE__ */ jsx40(PopoverPrimitive2.Root, { ...props });
 }
 function PopoverTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx39(PopoverPrimitive2.Trigger, { "data-slot": "popover-trigger", className, ...props });
+  return /* @__PURE__ */ jsx40(PopoverPrimitive2.Trigger, { "data-slot": "popover-trigger", className, ...props });
 }
 function PopoverAnchor(props) {
-  return /* @__PURE__ */ jsx39(PopoverPrimitive2.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ jsx40(PopoverPrimitive2.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({
   size,
@@ -4401,9 +4589,9 @@ function PopoverContent({
       '[@dev-dga/react] PopoverContent renders role="dialog" and should have an `aria-label` or `aria-labelledby` so the panel has an accessible name.'
     );
   }
-  const ctx = useContext9(DgaContext);
+  const ctx = useContext10(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ jsx39(PopoverPrimitive2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsx40(PopoverPrimitive2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs31(
     PopoverPrimitive2.Content,
     {
       "data-slot": "popover-content",
@@ -4412,7 +4600,7 @@ function PopoverContent({
       ...props,
       children: [
         children,
-        arrow ? /* @__PURE__ */ jsx39(PopoverPrimitive2.Arrow, { className: "ddga-popover__arrow", width: 16, height: 8 }) : null
+        arrow ? /* @__PURE__ */ jsx40(PopoverPrimitive2.Arrow, { className: "ddga-popover__arrow", width: 16, height: 8 }) : null
       ]
     }
   ) });
@@ -4426,7 +4614,7 @@ function PopoverClose({
 }) {
   const hasRenderableChildren = children != null && children !== false;
   if (asChild || hasRenderableChildren) {
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40(
       PopoverPrimitive2.Close,
       {
         "data-slot": "popover-close",
@@ -4437,27 +4625,27 @@ function PopoverClose({
       }
     );
   }
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     PopoverPrimitive2.Close,
     {
       "data-slot": "popover-close",
       "aria-label": closeLabel,
       className: cn("ddga-popover__close", className),
       ...props,
-      children: /* @__PURE__ */ jsx39(Close, { "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx40(Close, { "aria-hidden": "true" })
     }
   );
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useState as useState9 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo4, useState as useState9 } from "react";
 import { Slot as SlotPrimitive10 } from "radix-ui";
 
 // src/components/Sidebar/SidebarContext.ts
-import { createContext as createContext3, useContext as useContext10 } from "react";
+import { createContext as createContext3, useContext as useContext11 } from "react";
 var SidebarContext = createContext3(null);
 function useSidebar() {
-  const ctx = useContext10(SidebarContext);
+  const ctx = useContext11(SidebarContext);
   if (!ctx) {
     throw new Error("useSidebar must be used within a <SidebarProvider>");
   }
@@ -4479,7 +4667,7 @@ function useIsMobile(breakpoint = 768) {
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -4526,11 +4714,11 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [keyboardShortcut, toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const value = useMemo3(
+  const value = useMemo4(
     () => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }),
     [state, open, setOpen, openMobile, isMobile, toggleSidebar]
   );
-  return /* @__PURE__ */ jsx40(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(SidebarContext.Provider, { value, children: /* @__PURE__ */ jsx41(
     "div",
     {
       "data-slot": "sidebar-wrapper",
@@ -4552,7 +4740,7 @@ function Sidebar({
 }) {
   const { isMobile, openMobile, setOpenMobile, state } = useSidebar();
   if (isMobile) {
-    return /* @__PURE__ */ jsx40(Drawer, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(Drawer, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsx41(
       DrawerContent,
       {
         side,
@@ -4562,11 +4750,12 @@ function Sidebar({
         "data-variant": variant,
         "data-side": side,
         className: cn("ddga-sidebar", "ddga-sidebar--mobile", className),
+        ...props,
         children
       }
     ) });
   }
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "aside",
     {
       "data-slot": "sidebar",
@@ -4591,7 +4780,7 @@ function SidebarTrigger({
 }) {
   const { toggleSidebar, open, openMobile, isMobile } = useSidebar();
   const Comp = asChild ? SlotPrimitive10.Slot : "button";
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     Comp,
     {
       type: asChild ? void 0 : "button",
@@ -4605,7 +4794,7 @@ function SidebarTrigger({
         toggleSidebar();
       },
       ...props,
-      children: children ?? /* @__PURE__ */ jsx40(PanelLeft, { "aria-hidden": "true" })
+      children: children ?? /* @__PURE__ */ jsx41(PanelLeft, { "aria-hidden": "true" })
     }
   );
 }
@@ -4615,7 +4804,7 @@ function SidebarRail({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "button",
     {
       type: "button",
@@ -4631,15 +4820,15 @@ function SidebarRail({
 }
 function SidebarInset({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive10.Slot : "main";
-  return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-inset", className: cn("ddga-sidebar-inset", className), ...props });
+  return /* @__PURE__ */ jsx41(Comp, { "data-slot": "sidebar-inset", className: cn("ddga-sidebar-inset", className), ...props });
 }
 function SidebarHeader({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive10.Slot : "div";
-  return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-header", className: cn("ddga-sidebar__header", className), ...props });
+  return /* @__PURE__ */ jsx41(Comp, { "data-slot": "sidebar-header", className: cn("ddga-sidebar__header", className), ...props });
 }
 function SidebarContent({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive10.Slot : "div";
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     Comp,
     {
       "data-slot": "sidebar-content",
@@ -4650,10 +4839,10 @@ function SidebarContent({ asChild, className, ...props }) {
 }
 function SidebarFooter({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive10.Slot : "div";
-  return /* @__PURE__ */ jsx40(Comp, { "data-slot": "sidebar-footer", className: cn("ddga-sidebar__footer", className), ...props });
+  return /* @__PURE__ */ jsx41(Comp, { "data-slot": "sidebar-footer", className: cn("ddga-sidebar__footer", className), ...props });
 }
 function SidebarSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "hr",
     {
       "data-slot": "sidebar-separator",
@@ -4665,10 +4854,10 @@ function SidebarSeparator({ className, ...props }) {
 
 // src/components/Sidebar/SidebarGroup.tsx
 import { Slot as SlotPrimitive11 } from "radix-ui";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function SidebarGroup({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive11.Slot : "div";
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Comp,
     {
       "data-slot": "sidebar-group",
@@ -4680,7 +4869,7 @@ function SidebarGroup({ asChild, className, ...props }) {
 }
 function SidebarGroupLabel({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive11.Slot : "div";
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Comp,
     {
       "data-slot": "sidebar-group-label",
@@ -4691,7 +4880,7 @@ function SidebarGroupLabel({ asChild, className, ...props }) {
 }
 function SidebarGroupAction({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive11.Slot : "button";
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Comp,
     {
       type: asChild ? void 0 : "button",
@@ -4703,7 +4892,7 @@ function SidebarGroupAction({ asChild, className, ...props }) {
 }
 function SidebarGroupContent({ asChild, className, ...props }) {
   const Comp = asChild ? SlotPrimitive11.Slot : "div";
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Comp,
     {
       "data-slot": "sidebar-group-content",
@@ -4723,12 +4912,12 @@ function useDir() {
 }
 
 // src/components/Sidebar/SidebarMenu.tsx
-import { jsx as jsx42, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs32 } from "react/jsx-runtime";
 function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("ul", { "data-slot": "sidebar-menu", className: cn("ddga-sidebar__menu", className), ...props });
+  return /* @__PURE__ */ jsx43("ul", { "data-slot": "sidebar-menu", className: cn("ddga-sidebar__menu", className), ...props });
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -4758,7 +4947,7 @@ function SidebarMenuButton({
   const { state, isMobile } = useSidebar();
   const dir = useDir();
   const Comp = asChild ? SlotPrimitive12.Slot : "button";
-  const button = /* @__PURE__ */ jsx42(
+  const button = /* @__PURE__ */ jsx43(
     Comp,
     {
       type: asChild ? void 0 : "button",
@@ -4773,14 +4962,14 @@ function SidebarMenuButton({
   if (!tooltip || state !== "collapsed" || isMobile) {
     return button;
   }
-  return /* @__PURE__ */ jsxs30(Tooltip, { children: [
-    /* @__PURE__ */ jsx42(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx42("span", { "data-slot": "tooltip-trigger", style: { display: "contents" }, children: button }) }),
-    /* @__PURE__ */ jsx42(TooltipContent, { side: dir === "rtl" ? "left" : "right", children: tooltip })
+  return /* @__PURE__ */ jsxs32(Tooltip, { children: [
+    /* @__PURE__ */ jsx43(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx43("span", { "data-slot": "tooltip-trigger", style: { display: "contents" }, children: button }) }),
+    /* @__PURE__ */ jsx43(TooltipContent, { side: dir === "rtl" ? "left" : "right", children: tooltip })
   ] });
 }
 function SidebarMenuAction({ asChild, showOnHover, className, ...props }) {
   const Comp = asChild ? SlotPrimitive12.Slot : "button";
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Comp,
     {
       type: asChild ? void 0 : "button",
@@ -4792,7 +4981,7 @@ function SidebarMenuAction({ asChild, showOnHover, className, ...props }) {
   );
 }
 function SidebarMenuBadge({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "span",
     {
       "data-slot": "sidebar-menu-badge",
@@ -4802,21 +4991,21 @@ function SidebarMenuBadge({ className, ...props }) {
   );
 }
 function SidebarMenuSkeleton({ showIcon, className, ...props }) {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       "data-slot": "sidebar-menu-skeleton",
       className: cn("ddga-sidebar__menu-skeleton", className),
       ...props,
       children: [
-        showIcon ? /* @__PURE__ */ jsx42(Skeleton, { shape: "circle", width: "1rem", height: "1rem" }) : null,
-        /* @__PURE__ */ jsx42(Skeleton, { shape: "text", className: "ddga-sidebar__menu-skeleton-text" })
+        showIcon ? /* @__PURE__ */ jsx43(Skeleton, { shape: "circle", width: "1rem", height: "1rem" }) : null,
+        /* @__PURE__ */ jsx43(Skeleton, { shape: "text", className: "ddga-sidebar__menu-skeleton-text" })
       ]
     }
   );
 }
 function SidebarMenuSub({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "ul",
     {
       "data-slot": "sidebar-menu-sub",
@@ -4826,7 +5015,7 @@ function SidebarMenuSub({ className, ...props }) {
   );
 }
 function SidebarMenuSubItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "li",
     {
       "data-slot": "sidebar-menu-sub-item",
@@ -4852,7 +5041,7 @@ function SidebarMenuSubButton({
   ...props
 }) {
   const Comp = asChild ? SlotPrimitive12.Slot : "a";
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Comp,
     {
       "data-slot": "sidebar-menu-sub-button",
@@ -4868,7 +5057,7 @@ function SidebarMenuSubButton({
 // src/components/ScrollArea/ScrollArea.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import { cva as cva38 } from "class-variance-authority";
-import { jsx as jsx43, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
 var scrollAreaVariants = cva38("ddga-scroll-area", {
   variants: {
     orientation: {
@@ -4905,7 +5094,7 @@ function ScrollArea({
   const showVertical = orientation === "vertical" || orientation === "both";
   const showHorizontal = orientation === "horizontal" || orientation === "both";
   const { className: viewportClassName, ...restViewportProps } = viewportProps ?? {};
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs33(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
@@ -4914,7 +5103,7 @@ function ScrollArea({
       className: cn(scrollAreaVariants({ orientation }), className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -4928,35 +5117,35 @@ function ScrollArea({
             children
           }
         ),
-        showVertical ? /* @__PURE__ */ jsx43(
+        showVertical ? /* @__PURE__ */ jsx44(
           ScrollAreaPrimitive.Scrollbar,
           {
             "data-slot": "scroll-area-scrollbar",
             orientation: "vertical",
             className: "ddga-scroll-area__scrollbar",
-            children: /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Thumb, { className: "ddga-scroll-area__thumb" })
+            children: /* @__PURE__ */ jsx44(ScrollAreaPrimitive.Thumb, { className: "ddga-scroll-area__thumb" })
           }
         ) : null,
-        showHorizontal ? /* @__PURE__ */ jsx43(
+        showHorizontal ? /* @__PURE__ */ jsx44(
           ScrollAreaPrimitive.Scrollbar,
           {
             "data-slot": "scroll-area-scrollbar",
             orientation: "horizontal",
             className: "ddga-scroll-area__scrollbar",
-            children: /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Thumb, { className: "ddga-scroll-area__thumb" })
+            children: /* @__PURE__ */ jsx44(ScrollAreaPrimitive.Thumb, { className: "ddga-scroll-area__thumb" })
           }
         ) : null,
-        orientation === "both" ? /* @__PURE__ */ jsx43(ScrollAreaPrimitive.Corner, { className: "ddga-scroll-area__corner" }) : null
+        orientation === "both" ? /* @__PURE__ */ jsx44(ScrollAreaPrimitive.Corner, { className: "ddga-scroll-area__corner" }) : null
       ]
     }
   );
 }
 
 // src/components/Menubar/Menubar.tsx
-import { useContext as useContext11 } from "react";
+import { useContext as useContext12 } from "react";
 import { Menubar as MenubarPrimitive } from "radix-ui";
 import { cva as cva39 } from "class-variance-authority";
-import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var menubarContentVariants = cva39("ddga-menubar-menu", {
   variants: {
     size: {
@@ -4980,7 +5169,7 @@ var menubarTriggerVariants = cva39("ddga-menubar__trigger", {
   }
 });
 function Menubar({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     MenubarPrimitive.Root,
     {
       "data-slot": "menubar",
@@ -4990,10 +5179,10 @@ function Menubar({ className, ...props }) {
   );
 }
 function MenubarMenu(props) {
-  return /* @__PURE__ */ jsx44(MenubarPrimitive.Menu, { ...props });
+  return /* @__PURE__ */ jsx45(MenubarPrimitive.Menu, { ...props });
 }
 function MenubarTrigger({ variant, className, ...props }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     MenubarPrimitive.Trigger,
     {
       "data-slot": "menubar-trigger",
@@ -5004,9 +5193,9 @@ function MenubarTrigger({ variant, className, ...props }) {
   );
 }
 function MenubarContent({ size, className, sideOffset = 6, ...props }) {
-  const ctx = useContext11(DgaContext);
+  const ctx = useContext12(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ jsx44(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx45(
     MenubarPrimitive.Content,
     {
       "data-slot": "menubar-content",
@@ -5024,7 +5213,7 @@ function MenubarItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34(
     MenubarPrimitive.Item,
     {
       "data-slot": "menubar-item",
@@ -5032,9 +5221,9 @@ function MenubarItem({
       className: cn("ddga-menubar-menu__item", className),
       ...props,
       children: [
-        startIcon ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
-        /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children }),
-        shortcut ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__shortcut", "aria-hidden": "true", children: shortcut }) : null
+        startIcon ? /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
+        /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__label", children }),
+        shortcut ? /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__shortcut", "aria-hidden": "true", children: shortcut }) : null
       ]
     }
   );
@@ -5048,7 +5237,7 @@ function MenubarCheckboxItem({
   const handleSelect = onSelect ?? ((event) => {
     event.preventDefault();
   });
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34(
     MenubarPrimitive.CheckboxItem,
     {
       "data-slot": "menubar-checkbox-item",
@@ -5056,20 +5245,20 @@ function MenubarCheckboxItem({
       onSelect: handleSelect,
       ...props,
       children: [
-        /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx44(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx44(Check, { className: "ddga-menubar-menu__indicator-icon" }) }) }),
-        /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children })
+        /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx45(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx45(Check, { className: "ddga-menubar-menu__indicator-icon" }) }) }),
+        /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__label", children })
       ]
     }
   );
 }
 function MenubarRadioGroup(props) {
-  return /* @__PURE__ */ jsx44(MenubarPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
+  return /* @__PURE__ */ jsx45(MenubarPrimitive.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
 }
 function MenubarRadioItem({ className, children, onSelect, ...props }) {
   const handleSelect = onSelect ?? ((event) => {
     event.preventDefault();
   });
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34(
     MenubarPrimitive.RadioItem,
     {
       "data-slot": "menubar-radio-item",
@@ -5077,14 +5266,14 @@ function MenubarRadioItem({ className, children, onSelect, ...props }) {
       onSelect: handleSelect,
       ...props,
       children: [
-        /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx44(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__radio-dot" }) }) }),
-        /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children })
+        /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx45(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__radio-dot" }) }) }),
+        /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__label", children })
       ]
     }
   );
 }
 function MenubarLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     MenubarPrimitive.Label,
     {
       "data-slot": "menubar-label",
@@ -5094,7 +5283,7 @@ function MenubarLabel({ className, ...props }) {
   );
 }
 function MenubarSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     MenubarPrimitive.Separator,
     {
       "data-slot": "menubar-separator",
@@ -5104,30 +5293,30 @@ function MenubarSeparator({ className, ...props }) {
   );
 }
 function MenubarGroup(props) {
-  return /* @__PURE__ */ jsx44(MenubarPrimitive.Group, { "data-slot": "menubar-group", ...props });
+  return /* @__PURE__ */ jsx45(MenubarPrimitive.Group, { "data-slot": "menubar-group", ...props });
 }
 function MenubarSub(props) {
-  return /* @__PURE__ */ jsx44(MenubarPrimitive.Sub, { ...props });
+  return /* @__PURE__ */ jsx45(MenubarPrimitive.Sub, { ...props });
 }
 function MenubarSubTrigger({ className, startIcon, children, ...props }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34(
     MenubarPrimitive.SubTrigger,
     {
       "data-slot": "menubar-sub-trigger",
       className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--sub", className),
       ...props,
       children: [
-        startIcon ? /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
-        /* @__PURE__ */ jsx44("span", { className: "ddga-menubar-menu__label", children }),
-        /* @__PURE__ */ jsx44(ChevronRight, { className: "ddga-menubar-menu__sub-chevron", "aria-hidden": "true" })
+        startIcon ? /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
+        /* @__PURE__ */ jsx45("span", { className: "ddga-menubar-menu__label", children }),
+        /* @__PURE__ */ jsx45(ChevronRight, { className: "ddga-menubar-menu__sub-chevron", "aria-hidden": "true" })
       ]
     }
   );
 }
 function MenubarSubContent({ size, className, ...props }) {
-  const ctx = useContext11(DgaContext);
+  const ctx = useContext12(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ jsx44(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(MenubarPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx45(
     MenubarPrimitive.SubContent,
     {
       "data-slot": "menubar-sub-content",
@@ -5139,7 +5328,7 @@ function MenubarSubContent({ size, className, ...props }) {
 
 // src/components/Timeline/Timeline.tsx
 import { cva as cva40 } from "class-variance-authority";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var timelineVariants = cva40("ddga-timeline", {
   variants: {
     size: {
@@ -5171,7 +5360,7 @@ var timelineMarkerVariants = cva40("ddga-timeline__marker", {
   }
 });
 function Timeline({ size, orientation, className, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "ol",
     {
       "data-slot": "timeline",
@@ -5182,12 +5371,12 @@ function Timeline({ size, orientation, className, ...props }) {
   );
 }
 function TimelineItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx45("li", { "data-slot": "timeline-item", className: cn("ddga-timeline__item", className), ...props });
+  return /* @__PURE__ */ jsx46("li", { "data-slot": "timeline-item", className: cn("ddga-timeline__item", className), ...props });
 }
 function TimelineMarker({ status, className, children, ...props }) {
   const resolved = status ?? "default";
   const reached = resolved !== "default";
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "span",
     {
       "aria-hidden": "true",
@@ -5196,12 +5385,12 @@ function TimelineMarker({ status, className, children, ...props }) {
       "data-reached": reached ? "" : void 0,
       className: cn(timelineMarkerVariants({ status }), className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx45("span", { className: "ddga-timeline__dot" })
+      children: children ?? /* @__PURE__ */ jsx46("span", { className: "ddga-timeline__dot" })
     }
   );
 }
 function TimelineContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       "data-slot": "timeline-content",
@@ -5211,10 +5400,10 @@ function TimelineContent({ className, ...props }) {
   );
 }
 function TimelineTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx45("span", { "data-slot": "timeline-title", className: cn("ddga-timeline__title", className), ...props });
+  return /* @__PURE__ */ jsx46("span", { "data-slot": "timeline-title", className: cn("ddga-timeline__title", className), ...props });
 }
 function TimelineDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "span",
     {
       "data-slot": "timeline-description",
@@ -5224,47 +5413,1422 @@ function TimelineDescription({ className, ...props }) {
   );
 }
 function TimelineTime({ className, ...props }) {
-  return /* @__PURE__ */ jsx45("time", { "data-slot": "timeline-time", className: cn("ddga-timeline__time", className), ...props });
+  return /* @__PURE__ */ jsx46("time", { "data-slot": "timeline-time", className: cn("ddga-timeline__time", className), ...props });
 }
 
-// src/providers/DgaProvider.tsx
-import { useState as useState10, useMemo as useMemo4, useContext as useContext12, useEffect as useEffect3, useRef as useRef3 } from "react";
-import { Direction as DirectionPrimitive, Tooltip as TooltipPrimitive2 } from "radix-ui";
-import { buildTheme } from "@dev-dga/tokens";
-import { jsx as jsx46 } from "react/jsx-runtime";
-function DgaProvider({
-  dir = "ltr",
-  locale,
-  mode = "light",
-  theme,
-  as: Component = "div",
+// src/components/Command/Command.tsx
+import { useCallback as useCallback4, useContext as useContext13, useEffect as useEffect3, useRef as useRef3, useState as useState10 } from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog as DialogPrimitive3, VisuallyHidden } from "radix-ui";
+import { cva as cva41 } from "class-variance-authority";
+import { jsx as jsx47, jsxs as jsxs35 } from "react/jsx-runtime";
+var commandVariants = cva41("ddga-command");
+function Command2({ className, ...props }) {
+  return /* @__PURE__ */ jsx47(CommandPrimitive, { "data-slot": "command", className: cn(commandVariants(), className), ...props });
+}
+function CommandInput({
   className,
-  style: consumerStyle,
+  placeholder,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs35("div", { className: "ddga-command__input-wrapper", "data-slot": "command-input-wrapper", children: [
+    /* @__PURE__ */ jsx47(Search, { className: "ddga-command__search-icon", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx47(
+      CommandPrimitive.Input,
+      {
+        "data-slot": "command-input",
+        className: cn("ddga-command__input", className),
+        placeholder,
+        "aria-label": ariaLabel ?? (typeof placeholder === "string" ? placeholder : void 0),
+        ...props
+      }
+    )
+  ] });
+}
+function CommandList({ className, ...props }) {
+  return /* @__PURE__ */ jsx47(
+    CommandPrimitive.List,
+    {
+      "data-slot": "command-list",
+      className: cn("ddga-command__list", className),
+      ...props
+    }
+  );
+}
+function CommandEmpty({ className, ...props }) {
+  return /* @__PURE__ */ jsx47(
+    CommandPrimitive.Empty,
+    {
+      "data-slot": "command-empty",
+      className: cn("ddga-command__empty", className),
+      ...props
+    }
+  );
+}
+function CommandGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx47(
+    CommandPrimitive.Group,
+    {
+      "data-slot": "command-group",
+      className: cn("ddga-command__group", className),
+      ...props
+    }
+  );
+}
+function CommandSeparator({
+  className,
+  "aria-hidden": ariaHidden = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx47(
+    CommandPrimitive.Separator,
+    {
+      "aria-hidden": ariaHidden,
+      "data-slot": "command-separator",
+      className: cn("ddga-command__separator", className),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  startIcon,
+  shortcut,
+  className,
+  children,
+  keywords,
+  ...props
+}) {
+  const labelText = typeof children === "string" ? children : void 0;
+  const mergedKeywords = labelText && !keywords?.includes(labelText) ? [...keywords ?? [], labelText] : keywords;
+  return /* @__PURE__ */ jsxs35(
+    CommandPrimitive.Item,
+    {
+      "data-slot": "command-item",
+      className: cn("ddga-command__item", className),
+      keywords: mergedKeywords,
+      ...props,
+      children: [
+        startIcon != null && /* @__PURE__ */ jsx47("span", { className: "ddga-command__item-icon", "aria-hidden": "true", children: startIcon }),
+        /* @__PURE__ */ jsx47("span", { className: "ddga-command__item-label", children }),
+        shortcut != null && /* @__PURE__ */ jsx47("span", { className: "ddga-command__item-shortcut", children: shortcut })
+      ]
+    }
+  );
+}
+function CommandDialog({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange,
+  shortcut = "k",
+  label = "Command palette",
+  description,
+  className,
+  filter,
+  shouldFilter,
+  loop,
   children
 }) {
-  const parentCtx = useContext12(DgaContext);
-  const isNested = parentCtx !== null;
-  const [rootEl, setRootEl] = useState10(null);
-  const portalRef = useRef3(null);
-  const [portalEl, setPortalEl] = useState10(null);
-  const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
-  const themeVars = useMemo4(() => theme ? buildTheme(theme) : null, [theme]);
+  const [internalOpen, setInternalOpen] = useState10(defaultOpen ?? false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback4(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const openRef = useRef3(open);
   useEffect3(() => {
-    if (typeof document === "undefined") return;
-    const el = document.createElement("div");
-    el.setAttribute("data-slot", "dga-portal");
-    el.style.position = "relative";
-    el.style.zIndex = "50";
-    document.body.appendChild(el);
-    portalRef.current = el;
-    setPortalEl(el);
-    return () => {
-      el.remove();
-      portalRef.current = null;
-      setPortalEl(null);
-    };
-  }, []);
+    openRef.current = open;
+  });
   useEffect3(() => {
+    if (typeof shortcut !== "string") return;
+    const key = shortcut.toLowerCase();
+    const onKeyDown = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === key) {
+        event.preventDefault();
+        setOpen(!openRef.current);
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [shortcut, setOpen]);
+  const ctx = useContext13(DgaContext);
+  const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
+  return /* @__PURE__ */ jsx47(DialogPrimitive3.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs35(DialogPrimitive3.Portal, { container: portalContainer, children: [
+    /* @__PURE__ */ jsx47(DialogPrimitive3.Overlay, { className: "ddga-command__overlay", "data-slot": "command-overlay" }),
+    /* @__PURE__ */ jsxs35(
+      DialogPrimitive3.Content,
+      {
+        "data-slot": "command-dialog",
+        className: cn("ddga-command-dialog", className),
+        ...description == null ? { "aria-describedby": void 0 } : {},
+        children: [
+          /* @__PURE__ */ jsx47(DialogPrimitive3.Title, { asChild: true, children: /* @__PURE__ */ jsx47(VisuallyHidden.Root, { children: label }) }),
+          description != null && /* @__PURE__ */ jsx47(DialogPrimitive3.Description, { asChild: true, children: /* @__PURE__ */ jsx47(VisuallyHidden.Root, { children: description }) }),
+          /* @__PURE__ */ jsx47(
+            Command2,
+            {
+              "data-slot": "command-dialog-command",
+              className: "ddga-command--dialog",
+              label: typeof label === "string" ? label : "Command palette",
+              filter,
+              shouldFilter,
+              loop,
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/Table/Table.tsx
+import { cva as cva42 } from "class-variance-authority";
+import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs36 } from "react/jsx-runtime";
+var tableVariants = cva42("ddga-table", {
+  variants: {
+    size: {
+      sm: "ddga-table--sm",
+      md: "ddga-table--md",
+      lg: "ddga-table--lg"
+    },
+    striped: { true: "ddga-table--striped" },
+    divided: { true: "ddga-table--divided" },
+    bordered: { true: "ddga-table--bordered" },
+    stickyHeader: { true: "ddga-table--sticky" }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Table({
+  size,
+  striped,
+  divided,
+  bordered,
+  stickyHeader,
+  className,
+  maxHeight,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const named = Boolean(ariaLabel || ariaLabelledby);
+  if (process.env.NODE_ENV !== "production" && !named) {
+    console.warn(
+      "[ddga] <Table> wraps its table in a horizontally scrollable container. Pass `aria-label` (or `aria-labelledby`) so keyboard and screen-reader users can identify and scroll it. Without a name it degrades to a plain scroll container with no landmark."
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && ariaLabel && ariaLabelledby) {
+    console.warn(
+      "[ddga] <Table> received both `aria-label` and `aria-labelledby`. `aria-labelledby` takes precedence; `aria-label` will be ignored by assistive technology."
+    );
+  }
+  return /* @__PURE__ */ jsx48(
+    "div",
+    {
+      "data-slot": "table-region",
+      className: "ddga-table__region",
+      style: maxHeight != null ? { maxBlockSize: maxHeight, overflowY: "auto" } : void 0,
+      ...named ? {
+        role: "region",
+        tabIndex: 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby
+      } : {},
+      children: /* @__PURE__ */ jsx48(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn(tableVariants({ size, striped, divided, bordered, stickyHeader }), className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx48("thead", { "data-slot": "table-header", className: cn("ddga-table__header", className), ...props });
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx48("tbody", { "data-slot": "table-body", className: cn("ddga-table__body", className), ...props });
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx48("tfoot", { "data-slot": "table-footer", className: cn("ddga-table__footer", className), ...props });
+}
+function TableRow({ className, selected, ...props }) {
+  return /* @__PURE__ */ jsx48(
+    "tr",
+    {
+      "data-slot": "table-row",
+      "data-state": selected ? "selected" : void 0,
+      className: cn("ddga-table__row", className),
+      ...props
+    }
+  );
+}
+function TableHead({
+  className,
+  align,
+  sortable,
+  sortDirection = false,
+  sortLabel,
+  onClick,
+  children,
+  ...props
+}) {
+  const headClass = cn("ddga-table__head", align && `ddga-table__head--align-${align}`, className);
+  if (process.env.NODE_ENV !== "production" && sortable && !sortLabel) {
+    console.warn(
+      '[ddga] <TableHead sortable> has no `sortLabel`. `aria-sort` conveys the sort state, but pass a localized cue (e.g. "activate to sort") so a focused sort button announces its action to screen-reader users.'
+    );
+  }
+  if (!sortable) {
+    return /* @__PURE__ */ jsx48("th", { scope: "col", "data-slot": "table-head", className: headClass, ...props, children });
+  }
+  const ariaSort = sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none";
+  return /* @__PURE__ */ jsx48("th", { scope: "col", "data-slot": "table-head", "aria-sort": ariaSort, className: headClass, ...props, children: /* @__PURE__ */ jsxs36(
+    "button",
+    {
+      type: "button",
+      "data-slot": "table-sort-button",
+      className: "ddga-table__sort-button",
+      onClick,
+      children: [
+        children,
+        sortLabel ? /* @__PURE__ */ jsx48("span", { className: "ddga-sr-only", children: sortLabel }) : null,
+        /* @__PURE__ */ jsx48("span", { className: "ddga-table__sort-icon", "data-slot": "table-sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ jsx48(CaretUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ jsx48(CaretDown, {}) : (
+          // Neutral affordance: stacked carets, dimmed via CSS.
+          /* @__PURE__ */ jsxs36(Fragment6, { children: [
+            /* @__PURE__ */ jsx48(CaretUp, {}),
+            /* @__PURE__ */ jsx48(CaretDown, {})
+          ] })
+        ) })
+      ]
+    }
+  ) });
+}
+function TableCell({ className, align, ...props }) {
+  return /* @__PURE__ */ jsx48(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn("ddga-table__cell", align && `ddga-table__cell--align-${align}`, className),
+      ...props
+    }
+  );
+}
+function TableCaption({ className, ...props }) {
+  return /* @__PURE__ */ jsx48(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("ddga-table__caption", className),
+      ...props
+    }
+  );
+}
+
+// src/components/InputOTP/InputOTP.tsx
+import { useMemo as useMemo5, useRef as useRef4, useState as useState11, Fragment as Fragment7 } from "react";
+import { cva as cva43 } from "class-variance-authority";
+import { jsx as jsx49, jsxs as jsxs37 } from "react/jsx-runtime";
+var DEFAULT_PATTERN = "^[0-9]*$";
+var inputOTPVariants = cva43("ddga-input-otp", {
+  variants: {
+    size: {
+      sm: "ddga-input-otp--sm",
+      md: "ddga-input-otp--md",
+      lg: "ddga-input-otp--lg"
+    },
+    error: {
+      true: "ddga-input-otp--error"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function resolveGroups(length, groupSizes) {
+  if (!groupSizes || groupSizes.length === 0) return [length];
+  const sum = groupSizes.reduce((total, n) => total + n, 0);
+  if (sum !== length) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        `[@dev-dga/react] InputOTP: groupSizes must sum to length (${length}); got ${sum}. Falling back to a single group.`
+      );
+    }
+    return [length];
+  }
+  return groupSizes;
+}
+function Slot({
+  char,
+  active,
+  caret,
+  mask
+}) {
+  return /* @__PURE__ */ jsxs37(
+    "div",
+    {
+      "data-slot": "input-otp-slot",
+      "data-active": active || void 0,
+      "data-filled": char != null || void 0,
+      className: "ddga-input-otp__slot",
+      children: [
+        char != null ? mask ? "\u2022" : char : null,
+        caret && /* @__PURE__ */ jsx49("div", { "aria-hidden": "true", "data-slot": "input-otp-caret", className: "ddga-input-otp__caret" })
+      ]
+    }
+  );
+}
+function InputOTP({
+  id: externalId,
+  length = 6,
+  groupSizes,
+  value,
+  defaultValue,
+  onChange,
+  onComplete,
+  pattern = DEFAULT_PATTERN,
+  mask = false,
+  separator,
+  size,
+  disabled,
+  autoFocus,
+  name,
+  required,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const inputRef = useRef4(null);
+  const [focused, setFocused] = useState11(false);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState11(defaultValue ?? "");
+  const current = isControlled ? value : internal;
+  const compiledPattern = useMemo5(() => {
+    try {
+      return new RegExp(pattern);
+    } catch {
+      if (process.env.NODE_ENV === "development") {
+        console.warn(
+          `[@dev-dga/react] InputOTP: invalid \`pattern\` regex "${pattern}". Falling back to digits-only.`
+        );
+      }
+      return new RegExp(DEFAULT_PATTERN);
+    }
+  }, [pattern]);
+  const completedRef = useRef4(null);
+  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
+    name: "InputOTP",
+    id: externalId,
+    label,
+    error,
+    errorMessage,
+    helperText,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  });
+  function handleChange(event) {
+    const next = event.target.value.replace(/[\s-]/g, "").slice(0, length);
+    if (!compiledPattern.test(next)) return;
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+    if (next.length === length) {
+      if (completedRef.current !== next) {
+        completedRef.current = next;
+        onComplete?.(next);
+      }
+    } else {
+      completedRef.current = null;
+    }
+  }
+  function moveCaretToEnd() {
+    const el = inputRef.current;
+    if (el) el.setSelectionRange(el.value.length, el.value.length);
+  }
+  const groups = resolveGroups(length, groupSizes);
+  const lastGroup = groups.length - 1;
+  const activeIndex = focused ? Math.min(current.length, length - 1) : -1;
+  const inputMode = pattern === DEFAULT_PATTERN ? "numeric" : "text";
+  return /* @__PURE__ */ jsxs37("div", { "data-slot": "input-otp-field", className: "ddga-field", ...props, children: [
+    label && /* @__PURE__ */ jsxs37("label", { htmlFor: fieldId, className: "ddga-input-otp__label", children: [
+      label,
+      required && /* @__PURE__ */ jsx49("span", { "aria-hidden": "true", className: "ddga-input-otp__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs37(
+      "div",
+      {
+        className: cn(inputOTPVariants({ size, error: hasError }), className),
+        "data-slot": "input-otp",
+        children: [
+          /* @__PURE__ */ jsx49(
+            "input",
+            {
+              ...controlProps,
+              ref: inputRef,
+              type: "text",
+              inputMode,
+              autoComplete: "one-time-code",
+              value: current,
+              maxLength: length,
+              disabled,
+              autoFocus,
+              name,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+              onChange: handleChange,
+              onFocus: () => {
+                setFocused(true);
+                moveCaretToEnd();
+              },
+              onBlur: () => setFocused(false),
+              onPointerUp: moveCaretToEnd,
+              className: "ddga-input-otp__input",
+              "data-slot": "input-otp-input"
+            }
+          ),
+          /* @__PURE__ */ jsx49("div", { dir: "ltr", "aria-hidden": "true", "data-slot": "input-otp-row", className: "ddga-input-otp__row", children: groups.map((count, groupIndex) => {
+            const start = groups.slice(0, groupIndex).reduce((total, n) => total + n, 0);
+            return /* @__PURE__ */ jsxs37(Fragment7, { children: [
+              /* @__PURE__ */ jsx49("div", { "data-slot": "input-otp-group", className: "ddga-input-otp__group", children: Array.from({ length: count }, (_, offset) => {
+                const index = start + offset;
+                return /* @__PURE__ */ jsx49(
+                  Slot,
+                  {
+                    char: current[index],
+                    active: index === activeIndex,
+                    caret: index === activeIndex && current.length < length,
+                    mask
+                  },
+                  index
+                );
+              }) }),
+              groupIndex < lastGroup && /* @__PURE__ */ jsx49(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-slot": "input-otp-separator",
+                  className: "ddga-input-otp__separator",
+                  children: separator ?? /* @__PURE__ */ jsx49("span", { className: "ddga-input-otp__separator-dash" })
+                }
+              )
+            ] }, groupIndex);
+          }) })
+        ]
+      }
+    ),
+    hasErrorMessage && /* @__PURE__ */ jsx49(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx49(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+
+// src/components/Link/Link.tsx
+import "react";
+import { Slot as SlotPrimitive13 } from "radix-ui";
+import { cva as cva44 } from "class-variance-authority";
+import { jsx as jsx50, jsxs as jsxs38 } from "react/jsx-runtime";
+var linkVariants = cva44("ddga-link", {
+  variants: {
+    variant: {
+      // Inline links in running prose. Underlined always — color alone fails
+      // WCAG 1.4.1 when a link sits inside a block of text.
+      default: "ddga-link--default",
+      // Links in UI chrome (footers, meta rows) where context makes them
+      // obviously links: no underline until hover.
+      subtle: "ddga-link--subtle",
+      // Block-level CTAs ("Learn more →"): inline-flex with gapped icons,
+      // no underline. Not for mid-sentence use.
+      standalone: "ddga-link--standalone"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Link({
+  variant,
+  external,
+  startIcon,
+  endIcon,
+  iconFlip,
+  asChild,
+  className,
+  children,
+  rel,
+  ...props
+}) {
+  if (process.env.NODE_ENV === "development" && !asChild && props.href == null) {
+    console.warn(
+      '[@dev-dga/react] Link rendered without an `href`. A link needs an href to be focusable and exposed as a link to assistive tech. Provide `href`, use `asChild` to render your own element (e.g. a router Link), or use `Button variant="ghost"` for an action that is not navigation.'
+    );
+  }
+  const Comp = asChild ? SlotPrimitive13.Slot : "a";
+  const relValue = external ? Array.from(
+    /* @__PURE__ */ new Set([...rel ? rel.split(/\s+/).filter(Boolean) : [], "noopener", "noreferrer"])
+  ).join(" ") : rel;
+  const showExternalIcon = external && !endIcon;
+  return /* @__PURE__ */ jsxs38(
+    Comp,
+    {
+      "data-slot": "link",
+      className: cn(linkVariants({ variant }), className),
+      rel: relValue,
+      ...props,
+      children: [
+        startIcon && /* @__PURE__ */ jsx50(
+          "span",
+          {
+            className: cn("ddga-link__icon", iconFlip && "ddga-icon-flip"),
+            "data-slot": "link-start-icon",
+            "aria-hidden": "true",
+            children: startIcon
+          }
+        ),
+        asChild ? /* @__PURE__ */ jsx50(SlotPrimitive13.Slottable, { children }) : children,
+        endIcon && /* @__PURE__ */ jsx50(
+          "span",
+          {
+            className: cn("ddga-link__icon", iconFlip && "ddga-icon-flip"),
+            "data-slot": "link-end-icon",
+            "aria-hidden": "true",
+            children: endIcon
+          }
+        ),
+        showExternalIcon && /* @__PURE__ */ jsx50(
+          "span",
+          {
+            className: "ddga-link__icon ddga-link__icon--external",
+            "data-slot": "link-external-icon",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx50(ExternalLink, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/SearchBox/SearchBox.tsx
+import { useCallback as useCallback5, useRef as useRef5, useState as useState12 } from "react";
+import { jsx as jsx51 } from "react/jsx-runtime";
+function setNativeInputValue(el, value) {
+  const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+  setter?.call(el, value);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function SearchBox({
+  value,
+  defaultValue,
+  onChange,
+  onKeyDown,
+  onSearch,
+  onClear,
+  clearable = true,
+  clearLabel = "Clear search",
+  className,
+  ref,
+  ...rest
+}) {
+  const inputRef = useRef5(null);
+  const setRefs = useCallback5(
+    (node) => {
+      inputRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState12(
+    defaultValue != null ? String(defaultValue) : ""
+  );
+  const currentValue = isControlled ? String(value ?? "") : internal;
+  const handleChange = (event) => {
+    if (!isControlled) setInternal(event.target.value);
+    onChange?.(event);
+  };
+  const clear = () => {
+    const el = inputRef.current;
+    if (!el) return;
+    setNativeInputValue(el, "");
+    el.focus();
+    onClear?.();
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (event.key === "Enter") {
+      onSearch?.(currentValue);
+    } else if (event.key === "Escape" && currentValue.length > 0) {
+      event.preventDefault();
+      event.stopPropagation();
+      clear();
+    }
+  };
+  const showClear = clearable && currentValue.length > 0;
+  return /* @__PURE__ */ jsx51(
+    Input,
+    {
+      ...rest,
+      ref: setRefs,
+      type: "search",
+      value: currentValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      className: cn("ddga-search-box", className),
+      startAdornment: /* @__PURE__ */ jsx51(Search, { "data-slot": "search-box-icon", "aria-hidden": "true" }),
+      endAdornment: showClear ? /* @__PURE__ */ jsx51(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": clearLabel,
+          "data-slot": "search-box-clear",
+          onClick: clear,
+          children: /* @__PURE__ */ jsx51(Close, { "aria-hidden": "true" })
+        }
+      ) : void 0
+    }
+  );
+}
+
+// src/components/List/List.tsx
+import { cva as cva45 } from "class-variance-authority";
+import { Fragment as Fragment8, jsx as jsx52, jsxs as jsxs39 } from "react/jsx-runtime";
+var listVariants = cva45("ddga-list", {
+  variants: {
+    variant: {
+      plain: "ddga-list--plain",
+      bulleted: "ddga-list--bulleted",
+      numbered: "ddga-list--numbered",
+      lettered: "ddga-list--lettered"
+    },
+    divided: {
+      true: "ddga-list--divided"
+    }
+  },
+  defaultVariants: {
+    variant: "plain"
+  }
+});
+function List({ variant, divided, className, start, reversed, ...props }) {
+  const classes = cn(listVariants({ variant, divided }), className);
+  const ordered = variant === "numbered" || variant === "lettered";
+  if (ordered) {
+    return /* @__PURE__ */ jsx52(
+      "ol",
+      {
+        "data-slot": "list",
+        "data-variant": variant,
+        className: classes,
+        start,
+        reversed,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx52("ul", { "data-slot": "list", "data-variant": variant ?? "plain", className: classes, ...props });
+}
+function ListItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx52("li", { "data-slot": "list-item", className: cn("ddga-list__item", className), ...props });
+}
+function ListItemIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx52("span", { "data-slot": "list-item-icon", className: cn("ddga-list__icon", className), ...props });
+}
+function ListItemContent({
+  primary,
+  secondary,
+  className,
+  children,
+  ...props
+}) {
+  if (process.env.NODE_ENV === "development" && children != null && (primary != null || secondary != null)) {
+    console.warn(
+      "[@dev-dga/react] ListItemContent: `children` overrides `primary`/`secondary`. Pass one or the other, not both."
+    );
+  }
+  return /* @__PURE__ */ jsx52("div", { "data-slot": "list-item-content", className: cn("ddga-list__content", className), ...props, children: children ?? /* @__PURE__ */ jsxs39(Fragment8, { children: [
+    primary != null && primary !== "" && /* @__PURE__ */ jsx52("span", { "data-slot": "list-item-primary", className: "ddga-list__primary", children: primary }),
+    secondary != null && secondary !== "" && /* @__PURE__ */ jsx52("span", { "data-slot": "list-item-secondary", className: "ddga-list__secondary", children: secondary })
+  ] }) });
+}
+function ListItemAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx52("div", { "data-slot": "list-item-action", className: cn("ddga-list__action", className), ...props });
+}
+
+// src/components/Quote/Quote.tsx
+import "react";
+import { Slot as SlotPrimitive14 } from "radix-ui";
+import { cva as cva46 } from "class-variance-authority";
+import { jsx as jsx53, jsxs as jsxs40 } from "react/jsx-runtime";
+var quoteVariants = cva46("ddga-quote", {
+  variants: {
+    variant: {
+      /** Inline-start accent border (SA Green). The everyday blockquote. */
+      default: "ddga-quote--default",
+      /** Large editorial quote, centered, prominent mark — breaks up prose. */
+      pullquote: "ddga-quote--pullquote",
+      /** Card surface (border + bg + shadow), sized for an avatar + attribution. */
+      testimonial: "ddga-quote--testimonial",
+      /** Bare — no border, no surface. For inline / tightly-composed use. */
+      plain: "ddga-quote--plain"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Quote({
+  variant,
+  quoteMark = false,
+  avatar,
+  author,
+  byline,
+  source,
+  cite,
+  className,
+  children,
+  ...props
+}) {
+  const hasAttribution = author != null || byline != null || source != null;
+  const mark = quoteMark ? /* @__PURE__ */ jsx53(QuoteMark, { "aria-hidden": "true", className: "ddga-quote__mark" }) : null;
+  if (!hasAttribution) {
+    return /* @__PURE__ */ jsxs40(
+      "blockquote",
+      {
+        "data-slot": "quote",
+        "data-variant": variant ?? "default",
+        className: cn(quoteVariants({ variant }), className),
+        cite,
+        ...props,
+        children: [
+          mark,
+          /* @__PURE__ */ jsx53(QuoteContent, { children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs40(
+    "figure",
+    {
+      "data-slot": "quote",
+      "data-variant": variant ?? "default",
+      className: cn(quoteVariants({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs40("blockquote", { "data-slot": "quote-blockquote", className: "ddga-quote__blockquote", cite, children: [
+          mark,
+          /* @__PURE__ */ jsx53(QuoteContent, { children })
+        ] }),
+        /* @__PURE__ */ jsxs40(QuoteCaption, { children: [
+          avatar != null ? /* @__PURE__ */ jsx53("span", { "data-slot": "quote-avatar", "aria-hidden": "true", className: "ddga-quote__avatar", children: avatar }) : null,
+          /* @__PURE__ */ jsxs40("span", { className: "ddga-quote__attribution", children: [
+            author != null ? /* @__PURE__ */ jsx53(QuoteAuthor, { children: author }) : null,
+            byline != null ? /* @__PURE__ */ jsx53("span", { className: "ddga-quote__byline", children: byline }) : null,
+            source != null ? /* @__PURE__ */ jsx53(QuoteSource, { children: source }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function QuoteContent({ asChild, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive14.Slot : "div";
+  return /* @__PURE__ */ jsx53(Comp, { "data-slot": "quote-content", className: cn("ddga-quote__content", className), ...props });
+}
+function QuoteCaption({ asChild, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive14.Slot : "figcaption";
+  return /* @__PURE__ */ jsx53(Comp, { "data-slot": "quote-caption", className: cn("ddga-quote__caption", className), ...props });
+}
+function QuoteAuthor({ asChild, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive14.Slot : "span";
+  return /* @__PURE__ */ jsx53(Comp, { "data-slot": "quote-author", className: cn("ddga-quote__author", className), ...props });
+}
+function QuoteSource({ asChild, className, ...props }) {
+  const Comp = asChild ? SlotPrimitive14.Slot : "cite";
+  return /* @__PURE__ */ jsx53(Comp, { "data-slot": "quote-source", className: cn("ddga-quote__source", className), ...props });
+}
+
+// src/components/Collapsible/Collapsible.tsx
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { jsx as jsx54 } from "react/jsx-runtime";
+function Collapsible({ className, ...props }) {
+  return /* @__PURE__ */ jsx54(
+    CollapsiblePrimitive.Root,
+    {
+      "data-slot": "collapsible",
+      className: cn("ddga-collapsible", className),
+      ...props
+    }
+  );
+}
+function CollapsibleTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx54(
+    CollapsiblePrimitive.Trigger,
+    {
+      "data-slot": "collapsible-trigger",
+      className: cn("ddga-collapsible__trigger", className),
+      ...props
+    }
+  );
+}
+function CollapsibleContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx54(
+    CollapsiblePrimitive.Content,
+    {
+      "data-slot": "collapsible-content",
+      className: cn("ddga-collapsible__content", className),
+      ...props,
+      children: /* @__PURE__ */ jsx54("div", { className: "ddga-collapsible__content-inner", children })
+    }
+  );
+}
+
+// src/components/TagInput/TagInput.tsx
+import { useRef as useRef6, useState as useState13 } from "react";
+import { cva as cva47 } from "class-variance-authority";
+import { jsx as jsx55, jsxs as jsxs41 } from "react/jsx-runtime";
+var tagInputVariants = cva47("ddga-tag-input", {
+  variants: {
+    size: {
+      sm: "ddga-tag-input--sm",
+      md: "ddga-tag-input--md",
+      lg: "ddga-tag-input--lg"
+    },
+    error: {
+      true: "ddga-tag-input--error"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function TagInput({
+  id: externalId,
+  value,
+  defaultValue,
+  onChange,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  size,
+  disabled,
+  placeholder,
+  max,
+  allowDuplicates = false,
+  caseSensitive = false,
+  validate,
+  delimiters = [","],
+  chipVariant = "secondary",
+  removeLabel = (tag) => `Remove ${tag}`,
+  formatAnnouncement = (tag, action) => `${tag} ${action === "add" ? "added" : "removed"}`,
+  className,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const [uncontrolledTags, setUncontrolledTags] = useState13(defaultValue ?? []);
+  const tags = isControlled ? value : uncontrolledTags;
+  const [draft, setDraft] = useState13("");
+  const [announcement, setAnnouncement] = useState13("");
+  const inputRef = useRef6(null);
+  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
+    name: "TagInput",
+    id: externalId,
+    label,
+    error,
+    errorMessage,
+    helperText,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"]
+  });
+  const commit = (next) => {
+    if (!isControlled) setUncontrolledTags(next);
+    onChange?.(next);
+  };
+  const norm = (t) => caseSensitive ? t : t.toLowerCase();
+  const accept = (raw, current) => {
+    let next = current;
+    for (const fragment of raw) {
+      const trimmed = fragment.trim();
+      if (!trimmed) continue;
+      if (max !== void 0 && next.length >= max) break;
+      if (!allowDuplicates && next.some((t) => norm(t) === norm(trimmed))) continue;
+      if (validate && !validate(trimmed, next)) continue;
+      next = [...next, trimmed];
+    }
+    return next;
+  };
+  const announceAdded = (added) => {
+    if (added.length > 0) {
+      setAnnouncement(added.map((t) => formatAnnouncement(t, "add")).join(", "));
+    }
+  };
+  const commitDraft = () => {
+    const next = accept([draft], tags);
+    if (next.length > tags.length) {
+      commit(next);
+      announceAdded(next.slice(tags.length));
+      setDraft("");
+    }
+  };
+  const splitPaste = (text) => {
+    const escaped = delimiters.map((d) => d.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&"));
+    const pattern = new RegExp(`[${escaped.join("")}\\n\\r]`);
+    return text.split(pattern);
+  };
+  const removeTag = (index) => {
+    const removed = tags[index];
+    commit(tags.filter((_, i) => i !== index));
+    setAnnouncement(formatAnnouncement(removed, "remove"));
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (draft.trim()) commitDraft();
+    } else if (delimiters.includes(event.key)) {
+      event.preventDefault();
+      if (draft.trim()) commitDraft();
+    } else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
+      event.preventDefault();
+      removeTag(tags.length - 1);
+    }
+  };
+  const handlePaste = (event) => {
+    if (disabled) return;
+    const text = event.clipboardData.getData("text");
+    const fragments = splitPaste(text);
+    if (fragments.length <= 1) return;
+    event.preventDefault();
+    const next = accept(fragments, tags);
+    if (next.length > tags.length) {
+      commit(next);
+      announceAdded(next.slice(tags.length));
+      setDraft("");
+    }
+  };
+  const handleBoxMouseDown = (event) => {
+    const target = event.target;
+    if (target === inputRef.current || target.closest("button")) return;
+    event.preventDefault();
+    inputRef.current?.focus();
+  };
+  const chipSize = size === "lg" ? "md" : "sm";
+  return /* @__PURE__ */ jsxs41("div", { "data-slot": "tag-input-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ jsx55("label", { htmlFor: fieldId, className: "ddga-tag-input__label", children: label }),
+    /* @__PURE__ */ jsxs41(
+      "div",
+      {
+        "data-slot": "tag-input-control",
+        className: cn(tagInputVariants({ size, error: hasError }), className),
+        "data-disabled": disabled || void 0,
+        onMouseDown: disabled ? void 0 : handleBoxMouseDown,
+        children: [
+          tags.length > 0 && /* @__PURE__ */ jsx55("ul", { "data-slot": "tag-input-list", className: "ddga-tag-input__list", role: "list", children: tags.map((tag, index) => /* @__PURE__ */ jsx55(
+            "li",
+            {
+              "data-slot": "tag-input-item",
+              className: "ddga-tag-input__item",
+              role: "listitem",
+              children: /* @__PURE__ */ jsx55(
+                Badge,
+                {
+                  variant: chipVariant,
+                  size: chipSize,
+                  open: true,
+                  dismissible: !disabled,
+                  onDismiss: () => removeTag(index),
+                  closeLabel: removeLabel(tag),
+                  children: tag
+                }
+              )
+            },
+            `${tag}-${index}`
+          )) }),
+          /* @__PURE__ */ jsx55(
+            "input",
+            {
+              ...props,
+              ...controlProps,
+              ref: inputRef,
+              "data-slot": "tag-input",
+              className: "ddga-tag-input__field",
+              type: "text",
+              value: draft,
+              disabled,
+              placeholder: tags.length === 0 ? placeholder : void 0,
+              onChange: (event) => setDraft(event.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx55("div", { "data-slot": "tag-input-live", className: "ddga-sr-only", role: "status", "aria-live": "polite", children: announcement }),
+    hasErrorMessage && /* @__PURE__ */ jsx55(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ jsx55(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+  ] });
+}
+
+// src/components/DateRangePicker/DateRangePicker.tsx
+import { useCallback as useCallback6, useMemo as useMemo6, useState as useState14 } from "react";
+import {
+  Button as AriaButton2,
+  CalendarCell as AriaCalendarCell2,
+  CalendarGrid as AriaCalendarGrid2,
+  CalendarGridBody as AriaCalendarGridBody2,
+  CalendarGridHeader as AriaCalendarGridHeader2,
+  CalendarHeaderCell as AriaCalendarHeaderCell2,
+  DateInput as AriaDateInput2,
+  DateRangePicker as AriaDateRangePicker,
+  DateSegment as AriaDateSegment2,
+  Dialog as AriaDialog2,
+  FieldError as AriaFieldError2,
+  Group as AriaGroup2,
+  I18nProvider as I18nProvider2,
+  Label as AriaLabel2,
+  Popover as AriaPopover2,
+  RangeCalendar as AriaRangeCalendar,
+  Text as AriaText2
+} from "react-aria-components";
+import { CalendarDate as CalendarDate3 } from "@internationalized/date";
+import { cva as cva48 } from "class-variance-authority";
+import { jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
+var dateRangePickerTriggerVariants = cva48("ddga-date-range-picker-trigger", {
+  variants: {
+    size: {
+      sm: "ddga-date-range-picker-trigger--sm",
+      md: "ddga-date-range-picker-trigger--md"
+    },
+    error: {
+      true: "ddga-date-range-picker-trigger--error"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var dateRangePickerVariants = dateRangePickerTriggerVariants;
+function toAriaRange(range) {
+  if (!range) return null;
+  const start = dateToCalendarDate(range.start);
+  const end = dateToCalendarDate(range.end);
+  if (!start || !end) return null;
+  return { start, end };
+}
+function fromAriaRange(value) {
+  if (!value) return null;
+  const start = calendarDateToDate(value.start);
+  const end = calendarDateToDate(value.end);
+  if (!start || !end) return null;
+  return { start, end };
+}
+function DateRangePicker({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  minValue,
+  maxValue,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  required,
+  disabled,
+  size,
+  id,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  calendar: controlledCalendar,
+  defaultCalendar = "gregorian",
+  onCalendarChange,
+  showCalendarToggle = true,
+  calendarLabels,
+  showSecondaryCalendar = false
+}) {
+  const isValueControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState14(
+    () => toAriaRange(defaultValue)
+  );
+  const value = isValueControlled ? toAriaRange(controlledValue) : internalValue;
+  const handleAriaChange = useCallback6(
+    (next) => {
+      const nextRange = next ? {
+        start: new CalendarDate3(next.start.year, next.start.month, next.start.day),
+        end: new CalendarDate3(next.end.year, next.end.month, next.end.day)
+      } : null;
+      if (!isValueControlled) setInternalValue(nextRange);
+      onChange?.(fromAriaRange(nextRange));
+    },
+    [isValueControlled, onChange]
+  );
+  const isCalendarControlled = controlledCalendar !== void 0;
+  const [internalCalendar, setInternalCalendar] = useState14(defaultCalendar);
+  const calendarSystem = isCalendarControlled ? controlledCalendar : internalCalendar;
+  const setCalendar = useCallback6(
+    (next) => {
+      if (!isCalendarControlled) setInternalCalendar(next);
+      onCalendarChange?.(next);
+    },
+    [isCalendarControlled, onCalendarChange]
+  );
+  const {
+    dgaLocale,
+    locale: ariaLocale,
+    portalContainer,
+    PrevChevron,
+    NextChevron,
+    resolvedLabels,
+    navLabels,
+    a11yLabels
+  } = useCalendarChrome(calendarSystem, calendarLabels);
+  const ariaMinValue = useMemo6(() => dateToCalendarDate(minValue) ?? void 0, [minValue]);
+  const ariaMaxValue = useMemo6(() => dateToCalendarDate(maxValue) ?? void 0, [maxValue]);
+  const dialogAriaLabel = ariaLabel ?? (typeof label === "string" ? label : ariaLabelledBy ? void 0 : dgaLocale.startsWith("ar") ? "\u0646\u0637\u0627\u0642 \u0627\u0644\u062A\u0627\u0631\u064A\u062E" : "Date range");
+  const showToggle = showCalendarToggle && !isCalendarControlled;
+  const hasError = !!error;
+  const hasErrorMessage = hasError && errorMessage != null && errorMessage !== "";
+  const hasHelper = !hasErrorMessage && helperText != null && helperText !== "";
+  return /* @__PURE__ */ jsx56(I18nProvider2, { locale: ariaLocale, children: /* @__PURE__ */ jsxs42(
+    AriaDateRangePicker,
+    {
+      value,
+      onChange: handleAriaChange,
+      minValue: ariaMinValue,
+      maxValue: ariaMaxValue,
+      isRequired: required,
+      isDisabled: disabled,
+      isInvalid: hasError,
+      shouldCloseOnSelect: true,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      className: "ddga-field",
+      "data-slot": "date-range-picker-field",
+      children: [
+        label && /* @__PURE__ */ jsxs42(AriaLabel2, { className: "ddga-date-range-picker__label", children: [
+          label,
+          required && /* @__PURE__ */ jsx56("span", { "aria-hidden": "true", className: "ddga-date-range-picker__required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs42(
+          AriaGroup2,
+          {
+            "data-slot": "date-range-picker-trigger",
+            className: cn(dateRangePickerTriggerVariants({ size, error: hasError }), className),
+            children: [
+              /* @__PURE__ */ jsx56(
+                AriaDateInput2,
+                {
+                  slot: "start",
+                  className: "ddga-date-range-picker__input",
+                  "data-slot": "date-range-picker-input-start",
+                  children: (segment) => /* @__PURE__ */ jsx56(
+                    AriaDateSegment2,
+                    {
+                      segment,
+                      className: "ddga-date-range-picker__segment",
+                      "data-slot": "date-range-picker-segment"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx56("span", { "aria-hidden": "true", className: "ddga-date-range-picker__separator", children: "\u2013" }),
+              /* @__PURE__ */ jsx56(
+                AriaDateInput2,
+                {
+                  slot: "end",
+                  className: "ddga-date-range-picker__input",
+                  "data-slot": "date-range-picker-input-end",
+                  children: (segment) => /* @__PURE__ */ jsx56(
+                    AriaDateSegment2,
+                    {
+                      segment,
+                      className: "ddga-date-range-picker__segment",
+                      "data-slot": "date-range-picker-segment"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx56(
+                AriaButton2,
+                {
+                  className: "ddga-date-range-picker__icon-button",
+                  "aria-label": a11yLabels.openCalendar,
+                  "data-slot": "date-range-picker-trigger-button",
+                  children: /* @__PURE__ */ jsx56(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-range-picker__icon" })
+                }
+              )
+            ]
+          }
+        ),
+        hasHelper && /* @__PURE__ */ jsx56(
+          AriaText2,
+          {
+            slot: "description",
+            className: "ddga-field__message ddga-field__message--helper",
+            "data-slot": "field-helper",
+            children: helperText
+          }
+        ),
+        hasErrorMessage && /* @__PURE__ */ jsx56(
+          AriaFieldError2,
+          {
+            className: "ddga-field__message ddga-field__message--error",
+            "data-slot": "field-error",
+            children: errorMessage
+          }
+        ),
+        /* @__PURE__ */ jsx56(
+          AriaPopover2,
+          {
+            UNSTABLE_portalContainer: portalContainer,
+            className: "ddga-calendar-popover",
+            "data-slot": "date-range-picker-popover",
+            offset: 6,
+            containerPadding: 12,
+            children: /* @__PURE__ */ jsxs42(
+              AriaDialog2,
+              {
+                className: "ddga-calendar-dialog",
+                "data-slot": "date-range-picker-dialog",
+                "aria-label": dialogAriaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: [
+                  showToggle && /* @__PURE__ */ jsx56(
+                    CalendarSystemToggle,
+                    {
+                      value: calendarSystem,
+                      onChange: setCalendar,
+                      labels: resolvedLabels,
+                      groupLabel: a11yLabels.calendarSystem
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs42(
+                    AriaRangeCalendar,
+                    {
+                      className: "ddga-calendar ddga-calendar--range",
+                      "data-slot": "date-range-picker-calendar",
+                      children: [
+                        /* @__PURE__ */ jsxs42("header", { className: "ddga-calendar__header", children: [
+                          /* @__PURE__ */ jsx56(
+                            AriaButton2,
+                            {
+                              slot: "previous",
+                              className: "ddga-calendar__nav",
+                              "data-slot": "date-range-picker-calendar-prev",
+                              children: /* @__PURE__ */ jsx56(PrevChevron, { "aria-hidden": "true" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx56(
+                            CalendarNavHeader,
+                            {
+                              locale: ariaLocale,
+                              monthLabel: navLabels.month,
+                              yearLabel: navLabels.year
+                            }
+                          ),
+                          /* @__PURE__ */ jsx56(
+                            AriaButton2,
+                            {
+                              slot: "next",
+                              className: "ddga-calendar__nav",
+                              "data-slot": "date-range-picker-calendar-next",
+                              children: /* @__PURE__ */ jsx56(NextChevron, { "aria-hidden": "true" })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs42(AriaCalendarGrid2, { className: "ddga-calendar__grid", children: [
+                          /* @__PURE__ */ jsx56(AriaCalendarGridHeader2, { children: (day) => /* @__PURE__ */ jsx56(AriaCalendarHeaderCell2, { className: "ddga-calendar__weekday", children: day }) }),
+                          /* @__PURE__ */ jsx56(AriaCalendarGridBody2, { children: (date) => /* @__PURE__ */ jsx56(AriaCalendarCell2, { date, className: "ddga-calendar__cell", children: ({ formattedDate }) => renderDayContent(formattedDate, {
+                            showSecondary: showSecondaryCalendar,
+                            date,
+                            calendarSystem
+                          }) }) })
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/components/AspectRatio/AspectRatio.tsx
+import { Slot as SlotPrimitive15 } from "radix-ui";
+import { jsx as jsx57 } from "react/jsx-runtime";
+function AspectRatio({ ratio = 1, asChild, className, style, ...props }) {
+  const Comp = asChild ? SlotPrimitive15.Slot : "div";
+  return /* @__PURE__ */ jsx57(
+    Comp,
+    {
+      "data-slot": "aspect-ratio",
+      className: cn("ddga-aspect-ratio", className),
+      style: { "--ddga-aspect-ratio": ratio, ...style },
+      ...props
+    }
+  );
+}
+
+// src/providers/DgaProvider.tsx
+import { useState as useState15, useMemo as useMemo7, useContext as useContext14, useEffect as useEffect4, useRef as useRef7 } from "react";
+import { Direction as DirectionPrimitive, Tooltip as TooltipPrimitive2 } from "radix-ui";
+import { buildTheme } from "@dev-dga/tokens";
+import { jsx as jsx58 } from "react/jsx-runtime";
+function DgaProvider({
+  dir = "ltr",
+  locale,
+  mode = "light",
+  theme,
+  as: Component = "div",
+  className,
+  style: consumerStyle,
+  children
+}) {
+  const parentCtx = useContext14(DgaContext);
+  const isNested = parentCtx !== null;
+  const [rootEl, setRootEl] = useState15(null);
+  const portalRef = useRef7(null);
+  const [portalEl, setPortalEl] = useState15(null);
+  const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
+  const themeVars = useMemo7(() => theme ? buildTheme(theme) : null, [theme]);
+  useEffect4(() => {
+    if (typeof document === "undefined") return;
+    const el = document.createElement("div");
+    el.setAttribute("data-slot", "dga-portal");
+    el.style.position = "relative";
+    el.style.zIndex = "50";
+    document.body.appendChild(el);
+    portalRef.current = el;
+    setPortalEl(el);
+    return () => {
+      el.remove();
+      portalRef.current = null;
+      setPortalEl(null);
+    };
+  }, []);
+  useEffect4(() => {
     const el = portalRef.current;
     if (!el) return;
     el.setAttribute("data-theme", mode);
@@ -5276,12 +6840,12 @@ function DgaProvider({
       }
     }
   }, [mode, dir, themeVars, portalEl]);
-  const ctxValue = useMemo4(
+  const ctxValue = useMemo7(
     () => ({ dir, locale: resolvedLocale, mode, rootEl, portalEl }),
     [dir, resolvedLocale, mode, rootEl, portalEl]
   );
-  const inner = /* @__PURE__ */ jsx46(DirectionPrimitive.Provider, { dir, children });
-  return /* @__PURE__ */ jsx46(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx46(
+  const inner = /* @__PURE__ */ jsx58(DirectionPrimitive.Provider, { dir, children });
+  return /* @__PURE__ */ jsx58(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx58(
     Component,
     {
       ref: setRootEl,
@@ -5291,7 +6855,7 @@ function DgaProvider({
       "data-theme": mode,
       className,
       style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
-      children: isNested ? inner : /* @__PURE__ */ jsx46(TooltipPrimitive2.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
+      children: isNested ? inner : /* @__PURE__ */ jsx58(TooltipPrimitive2.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
     }
   ) });
 }
@@ -5303,6 +6867,7 @@ export {
   Alert,
   AlertDescription,
   AlertTitle,
+  AspectRatio,
   Avatar,
   AvatarFallback,
   AvatarGroup,
@@ -5325,11 +6890,23 @@ export {
   CardTitle,
   Checkbox,
   CircularProgress,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
   Combobox,
   ComboboxGroup,
   ComboboxItem,
   ComboboxSeparator,
+  Command2 as Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
   DatePicker,
+  DateRangePicker,
   DescriptionDetails,
   DescriptionItem,
   DescriptionList,
@@ -5366,6 +6943,13 @@ export {
   FieldMessage,
   FileUpload,
   Input,
+  InputOTP,
+  Link,
+  List,
+  ListItem,
+  ListItemAction,
+  ListItemContent,
+  ListItemIcon,
   Menubar,
   MenubarCheckboxItem,
   MenubarContent,
@@ -5402,10 +6986,16 @@ export {
   PopoverContent,
   PopoverTrigger,
   Progress,
+  Quote,
+  QuoteAuthor,
+  QuoteCaption,
+  QuoteContent,
+  QuoteSource,
   Radio,
   RadioGroup,
   Rating,
   ScrollArea,
+  SearchBox,
   Select,
   SelectItem,
   Sidebar,
@@ -5435,6 +7025,7 @@ export {
   Spinner,
   Stat,
   StatChange,
+  StatChart,
   StatGroup,
   StatLabel,
   StatValue,
@@ -5444,10 +7035,19 @@ export {
   StepTitle,
   Steps,
   Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
+  TagInput,
   Textarea,
   Timeline,
   TimelineContent,
@@ -5475,15 +7075,21 @@ export {
   cn,
   comboboxTriggerVariants,
   comboboxVariants,
+  commandVariants,
   createToast,
   createToastStore,
   datePickerVariants,
+  dateRangePickerTriggerVariants,
+  dateRangePickerVariants,
   descriptionListVariants,
   dividerVariants,
   drawerVariants,
   dropdownMenuVariants,
   emptyStateVariants,
+  inputOTPVariants,
   inputVariants,
+  linkVariants,
+  listVariants,
   menubarContentVariants,
   menubarTriggerVariants,
   modalContentVariants,
@@ -5492,6 +7098,7 @@ export {
   paginationVariants,
   popoverContentVariants,
   progressVariants,
+  quoteVariants,
   radioGroupVariants,
   radioVariants,
   ratingVariants,
@@ -5507,8 +7114,10 @@ export {
   stepVariants,
   stepsVariants,
   switchVariants,
+  tableVariants,
   tabsListVariants,
   tabsVariants,
+  tagInputVariants,
   textareaVariants,
   timelineMarkerVariants,
   timelineVariants,