@dev-dga/react 0.8.0 → 0.8.1

package/dist/index.cjs

@@ -27,6 +27,7 @@ __export(src_exports, {
   Alert: () => Alert,
   AlertDescription: () => AlertDescription,
   AlertTitle: () => AlertTitle,
+  AspectRatio: () => AspectRatio,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
   AvatarGroup: () => AvatarGroup,
@@ -65,6 +66,7 @@ __export(src_exports, {
   CommandList: () => CommandList,
   CommandSeparator: () => CommandSeparator,
   DatePicker: () => DatePicker,
+  DateRangePicker: () => DateRangePicker,
   DescriptionDetails: () => DescriptionDetails,
   DescriptionItem: () => DescriptionItem,
   DescriptionList: () => DescriptionList,
@@ -237,6 +239,8 @@ __export(src_exports, {
   createToast: () => createToast,
   createToastStore: () => createToastStore,
   datePickerVariants: () => datePickerVariants,
+  dateRangePickerTriggerVariants: () => dateRangePickerTriggerVariants,
+  dateRangePickerVariants: () => dateRangePickerVariants,
   descriptionListVariants: () => descriptionListVariants,
   dividerVariants: () => dividerVariants,
   drawerVariants: () => drawerVariants,
@@ -1340,6 +1344,8 @@ function Select({
   placeholder,
   className,
   children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
   ...rootProps
 }) {
   const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
@@ -1349,8 +1355,8 @@ function Select({
     error,
     errorMessage,
     helperText,
-    "aria-label": rootProps["aria-label"],
-    "aria-labelledby": rootProps["aria-labelledby"]
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
   });
   const ctx = (0, import_react5.useContext)(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
@@ -1364,6 +1370,8 @@ function Select({
         import_radix_ui5.Select.Trigger,
         {
           ...controlProps,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
           "data-slot": "select-trigger",
           className: cn(selectTriggerVariants({ size, error: hasError }), className),
           children: [
@@ -1692,7 +1700,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
@@ -2753,6 +2761,11 @@ function CircularProgress({
   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";
@@ -3351,26 +3364,18 @@ function ComboboxSeparator({ className, ...props }) {
 }
 
 // src/components/DatePicker/DatePicker.tsx
+var import_react18 = require("react");
+var import_react_aria_components2 = require("react-aria-components");
+var import_date2 = require("@internationalized/date");
+var import_class_variance_authority27 = require("class-variance-authority");
+
+// src/internal/calendar/calendar-core.tsx
 var import_react17 = require("react");
 var import_react_aria_components = require("react-aria-components");
 var import_date = require("@internationalized/date");
-var import_class_variance_authority27 = require("class-variance-authority");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var datePickerTriggerVariants = (0, import_class_variance_authority27.cva)("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;
+var GREGORIAN = new import_date.GregorianCalendar();
+var ISLAMIC_UMALQURA = new import_date.IslamicUmalquraCalendar();
 function dateToCalendarDate(date) {
   if (!date) return null;
   return new import_date.CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
@@ -3388,14 +3393,91 @@ function composeLocale(dgaLocale, calendar) {
   }
   return isArabic ? `${base}-u-nu-latn` : base;
 }
-var GREGORIAN = new import_date.GregorianCalendar();
-var ISLAMIC_UMALQURA = new import_date.IslamicUmalquraCalendar();
 function secondaryDayNumber(date, mainCalendar) {
   const other = mainCalendar === "hijri" ? GREGORIAN : ISLAMIC_UMALQURA;
   return (0, import_date.toCalendar)(date, other).day;
 }
+function useCalendarChrome(calendarSystem, calendarLabels) {
+  const dgaCtx = (0, import_react17.useContext)(DgaContext);
+  const dgaLocale = dgaCtx?.locale ?? "en";
+  const dir = dgaCtx?.dir ?? "ltr";
+  const locale = (0, import_react17.useMemo)(
+    () => 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 = (0, import_react17.useMemo)(() => {
+    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 = (0, import_react17.useMemo)(
+    () => dgaLocale.startsWith("ar") ? { month: "\u0627\u0644\u0634\u0647\u0631", year: "\u0627\u0644\u0633\u0646\u0629" } : { month: "Month", year: "Year" },
+    [dgaLocale]
+  );
+  const a11yLabels = (0, import_react17.useMemo)(
+    () => 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__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": groupLabel,
+      className: "ddga-calendar-toggle",
+      "data-slot": "calendar-toggle",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "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__ */ (0, import_jsx_runtime29.jsx)(
+          "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 = (0, import_react17.useContext)(import_react_aria_components.CalendarStateContext);
+  const rangeState = (0, import_react17.useContext)(import_react_aria_components.RangeCalendarStateContext);
+  const singleState = (0, import_react17.useContext)(import_react_aria_components.CalendarStateContext);
+  const state = rangeState ?? singleState;
   const focusedDate = state?.focusedDate ?? null;
   const focusedYear = focusedDate?.year ?? 0;
   const focusedCalendar = focusedDate?.calendar ?? GREGORIAN;
@@ -3420,13 +3502,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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ddga-date-picker-calendar__nav-selects", "data-slot": "date-picker-calendar-nav", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ddga-calendar__nav-selects", "data-slot": "calendar-nav", children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "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__ */ (0, import_jsx_runtime29.jsx)("option", { value: i + 1, children: name }, i + 1))
@@ -3436,8 +3518,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__ */ (0, import_jsx_runtime29.jsx)("option", { value: y, children: y }, y))
@@ -3445,8 +3527,33 @@ function CalendarNavHeader({ locale, monthLabel, yearLabel }) {
     )
   ] });
 }
+function renderDayContent(primary, opts) {
+  if (!opts.showSecondary) return primary;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ddga-calendar__cell-primary", children: primary }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { "aria-hidden": "true", className: "ddga-calendar__cell-secondary", children: secondaryDayNumber(opts.date, opts.calendarSystem) })
+  ] });
+}
+
+// src/components/DatePicker/DatePicker.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var datePickerTriggerVariants = (0, import_class_variance_authority27.cva)("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 = (0, import_react17.useContext)(import_react_aria_components.CalendarStateContext);
+  const state = (0, import_react18.useContext)(import_react_aria_components2.CalendarStateContext);
   const start = state?.visibleRange.start;
   const isOutside = !!start && (date.year !== start.year || date.month !== start.month);
   const isOutOfBounds = state ? state.isInvalid(date) : false;
@@ -3457,27 +3564,21 @@ function CalendarDayCell({ date, showSecondary, calendarSystem }) {
       state.setFocusedDate(date);
       state.selectDate(date);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("td", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("td", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "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__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ddga-date-picker-calendar__cell-primary", children: date.day }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.CalendarCell, { date, className: "ddga-date-picker-calendar__cell", children: ({ formattedDate }) => showSecondary ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ddga-date-picker-calendar__cell-primary", children: formattedDate }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { "aria-hidden": "true", className: "ddga-date-picker-calendar__cell-secondary", children: secondaryDayNumber(date, calendarSystem) })
-  ] }) : formattedDate });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components2.CalendarCell, { date, className: "ddga-calendar__cell", children: ({ formattedDate }) => renderDayContent(formattedDate, { showSecondary, date, calendarSystem }) });
 }
 function DatePicker({
   value: controlledValue,
@@ -3504,56 +3605,47 @@ function DatePicker({
   showSecondaryCalendar = false
 }) {
   const isValueControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react17.useState)(
+  const [internalValue, setInternalValue] = (0, import_react18.useState)(
     () => dateToCalendarDate(defaultValue)
   );
   const value = isValueControlled ? dateToCalendarDate(controlledValue) : internalValue;
-  const handleAriaChange = (0, import_react17.useCallback)(
+  const handleAriaChange = (0, import_react18.useCallback)(
     (next) => {
-      const nextCD = next ? new import_date.CalendarDate(next.year, next.month, next.day) : null;
+      const nextCD = next ? new import_date2.CalendarDate(next.year, next.month, next.day) : null;
       if (!isValueControlled) setInternalValue(nextCD);
       onChange?.(calendarDateToDate(nextCD));
     },
     [isValueControlled, onChange]
   );
   const isCalendarControlled = controlledCalendar !== void 0;
-  const [internalCalendar, setInternalCalendar] = (0, import_react17.useState)(defaultCalendar);
+  const [internalCalendar, setInternalCalendar] = (0, import_react18.useState)(defaultCalendar);
   const calendarSystem = isCalendarControlled ? controlledCalendar : internalCalendar;
-  const setCalendar = (0, import_react17.useCallback)(
+  const setCalendar = (0, import_react18.useCallback)(
     (next) => {
       if (!isCalendarControlled) setInternalCalendar(next);
       onCalendarChange?.(next);
     },
     [isCalendarControlled, onCalendarChange]
   );
-  const dgaCtx = (0, import_react17.useContext)(DgaContext);
-  const dgaLocale = dgaCtx?.locale ?? "en";
-  const ariaLocale = (0, import_react17.useMemo)(
-    () => 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 = (0, import_react17.useMemo)(() => {
-    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 = (0, import_react17.useMemo)(
-    () => dgaLocale.startsWith("ar") ? { month: "\u0627\u0644\u0634\u0647\u0631", year: "\u0627\u0644\u0633\u0646\u0629" } : { month: "Month", year: "Year" },
-    [dgaLocale]
-  );
-  const ariaMinValue = (0, import_react17.useMemo)(() => dateToCalendarDate(minValue) ?? void 0, [minValue]);
-  const ariaMaxValue = (0, import_react17.useMemo)(() => 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 = (0, import_react18.useMemo)(() => dateToCalendarDate(minValue) ?? void 0, [minValue]);
+  const ariaMaxValue = (0, import_react18.useMemo)(() => 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__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-    import_react_aria_components.DatePicker,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components2.I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    import_react_aria_components2.DatePicker,
     {
       value,
       onChange: handleAriaChange,
@@ -3569,38 +3661,38 @@ function DatePicker({
       className: "ddga-field",
       "data-slot": "date-picker-field",
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_aria_components.Label, { className: "ddga-date-picker__label", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_aria_components2.Label, { className: "ddga-date-picker__label", children: [
           label,
-          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { "aria-hidden": "true", className: "ddga-date-picker__required", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": "true", className: "ddga-date-picker__required", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-          import_react_aria_components.Group,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          import_react_aria_components2.Group,
           {
             "data-slot": "date-picker-trigger",
             className: cn(datePickerTriggerVariants({ size, error: hasError }), className),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.DateInput, { className: "ddga-date-picker__input", "data-slot": "date-picker-input", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                import_react_aria_components.DateSegment,
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components2.DateInput, { className: "ddga-date-picker__input", "data-slot": "date-picker-input", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                import_react_aria_components2.DateSegment,
                 {
                   segment,
                   className: "ddga-date-picker__segment",
                   "data-slot": "date-picker-segment"
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                import_react_aria_components.Button,
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                import_react_aria_components2.Button,
                 {
                   className: "ddga-date-picker__icon-button",
-                  "aria-label": "Open calendar",
+                  "aria-label": a11yLabels.openCalendar,
                   "data-slot": "date-picker-trigger-button",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-picker__icon" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-picker__icon" })
                 }
               )
             ]
           }
         ),
-        hasHelper && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_react_aria_components.Text,
+        hasHelper && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          import_react_aria_components2.Text,
           {
             slot: "description",
             className: "ddga-field__message ddga-field__message--helper",
@@ -3608,77 +3700,51 @@ function DatePicker({
             children: helperText
           }
         ),
-        hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_react_aria_components.FieldError,
+        hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          import_react_aria_components2.FieldError,
           {
             className: "ddga-field__message ddga-field__message--error",
             "data-slot": "field-error",
             children: errorMessage
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_react_aria_components.Popover,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          import_react_aria_components2.Popover,
           {
             UNSTABLE_portalContainer: portalContainer,
-            className: "ddga-date-picker-popover",
+            className: "ddga-calendar-popover",
             "data-slot": "date-picker-popover",
             offset: 6,
             containerPadding: 12,
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-              import_react_aria_components.Dialog,
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+              import_react_aria_components2.Dialog,
               {
-                className: "ddga-date-picker-dialog",
+                className: "ddga-calendar-dialog",
                 "data-slot": "date-picker-dialog",
                 "aria-label": dialogAriaLabel,
                 "aria-labelledby": ariaLabelledBy,
                 children: [
-                  showToggle && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-                    "div",
+                  showToggle && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                    CalendarSystemToggle,
                     {
-                      role: "tablist",
-                      "aria-label": "Calendar system",
-                      className: "ddga-date-picker-toggle",
-                      "data-slot": "date-picker-toggle",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                          "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__ */ (0, import_jsx_runtime29.jsx)(
-                          "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__ */ (0, import_jsx_runtime29.jsxs)(import_react_aria_components.Calendar, { className: "ddga-date-picker-calendar", "data-slot": "date-picker-calendar", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "ddga-date-picker-calendar__header", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                        import_react_aria_components.Button,
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_aria_components2.Calendar, { className: "ddga-calendar", "data-slot": "date-picker-calendar", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("header", { className: "ddga-calendar__header", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        import_react_aria_components2.Button,
                         {
                           slot: "previous",
-                          className: "ddga-date-picker-calendar__nav",
+                          className: "ddga-calendar__nav",
                           "data-slot": "date-picker-calendar-prev",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PrevChevron, { "aria-hidden": "true" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PrevChevron, { "aria-hidden": "true" })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                         CalendarNavHeader,
                         {
                           locale: ariaLocale,
@@ -3686,19 +3752,19 @@ function DatePicker({
                           yearLabel: navLabels.year
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-                        import_react_aria_components.Button,
+                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                        import_react_aria_components2.Button,
                         {
                           slot: "next",
-                          className: "ddga-date-picker-calendar__nav",
+                          className: "ddga-calendar__nav",
                           "data-slot": "date-picker-calendar-next",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(NextChevron, { "aria-hidden": "true" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(NextChevron, { "aria-hidden": "true" })
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_aria_components.CalendarGrid, { className: "ddga-date-picker-calendar__grid", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.CalendarHeaderCell, { className: "ddga-date-picker-calendar__weekday", children: day }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_aria_components2.CalendarGrid, { className: "ddga-calendar__grid", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components2.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components2.CalendarHeaderCell, { className: "ddga-calendar__weekday", children: day }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components2.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                         CalendarDayCell,
                         {
                           date,
@@ -3719,8 +3785,8 @@ function DatePicker({
 }
 
 // src/components/FileUpload/FileUpload.tsx
-var import_react18 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function matchesAccept(file, accept) {
   if (!accept) return true;
   const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
@@ -3781,8 +3847,8 @@ function FileUpload({
   className,
   ...props
 }) {
-  const inputRef = (0, import_react18.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react18.useState)(false);
+  const inputRef = (0, import_react19.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react19.useState)(false);
   const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
     name: "FileUpload",
     id: externalId,
@@ -3824,12 +3890,12 @@ function FileUpload({
       setIsDragging(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { "data-slot": "file-upload-field", className: cn("ddga-field", "ddga-file-upload", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { htmlFor: fieldId, className: "ddga-file-upload__label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "data-slot": "file-upload-field", className: cn("ddga-field", "ddga-file-upload", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: fieldId, className: "ddga-file-upload__label", children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { "aria-hidden": "true", className: "ddga-file-upload__required", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-hidden": "true", className: "ddga-file-upload__required", children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "div",
       {
         "data-slot": "file-upload-dropzone",
@@ -3847,9 +3913,9 @@ function FileUpload({
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Upload, { className: "ddga-file-upload__icon", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ddga-file-upload__hint", children: hint }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Upload, { className: "ddga-file-upload__icon", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ddga-file-upload__hint", children: hint }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "input",
             {
               ...controlProps,
@@ -3868,24 +3934,24 @@ function FileUpload({
         ]
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText }),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ul", { "data-slot": "file-upload-list", className: "ddga-file-upload__list", children: files.map((item) => {
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText }),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { "data-slot": "file-upload-list", className: "ddga-file-upload__list", children: files.map((item) => {
       const status = item.status ?? "pending";
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "li",
         {
           "data-slot": "file-upload-item",
           "data-status": status,
           className: "ddga-file-upload__item",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ddga-file-upload__item-icon", "aria-hidden": "true", children: status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Check, {}) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AlertCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Upload, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ddga-file-upload__item-main", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ddga-file-upload__item-head", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ddga-file-upload__item-name", title: item.file.name, children: item.file.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "ddga-file-upload__item-meta", children: formatBytes(item.file.size) })
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ddga-file-upload__item-icon", "aria-hidden": "true", children: status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Check, {}) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AlertCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Upload, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ddga-file-upload__item-main", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ddga-file-upload__item-head", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ddga-file-upload__item-name", title: item.file.name, children: item.file.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ddga-file-upload__item-meta", children: formatBytes(item.file.size) })
               ] }),
-              status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 Progress,
                 {
                   size: "sm",
@@ -3894,9 +3960,9 @@ function FileUpload({
                   className: "ddga-file-upload__item-progress"
                 }
               ),
-              status === "error" && item.error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { role: "alert", className: "ddga-file-upload__item-error", children: item.error })
+              status === "error" && item.error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { role: "alert", className: "ddga-file-upload__item-error", children: item.error })
             ] }),
-            onRemove && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            onRemove && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               Button,
               {
                 type: "button",
@@ -3905,7 +3971,7 @@ function FileUpload({
                 "aria-label": `${removeLabel}: ${item.file.name}`,
                 onClick: () => onRemove(item.id),
                 className: "ddga-file-upload__item-remove",
-                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Close, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Close, { "aria-hidden": "true" })
               }
             )
           ]
@@ -3917,10 +3983,10 @@ function FileUpload({
 }
 
 // src/components/Slider/Slider.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_radix_ui21 = require("radix-ui");
 var import_class_variance_authority28 = require("class-variance-authority");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var sliderVariants = (0, import_class_variance_authority28.cva)("ddga-slider", {
   variants: {
     size: {
@@ -3959,7 +4025,7 @@ function Slider({
   className,
   ...props
 }) {
-  const labelId = (0, import_react19.useId)();
+  const labelId = (0, import_react20.useId)();
   const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
     name: "Slider",
     id: externalId,
@@ -3976,12 +4042,12 @@ function Slider({
   const wrap = (next) => isRange ? next : next[0];
   const currentForRender = valueArray ?? defaultArray;
   const fmt = (n) => formatValue ? formatValue(n) : String(n);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { "data-slot": "slider-field", className: "ddga-field", children: [
-    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ddga-slider__header", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { id: labelId, className: "ddga-slider__label", children: label }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ddga-slider__value", "aria-hidden": "true", children: currentForRender.map(fmt).join(" \u2013 ") })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { "data-slot": "slider-field", className: "ddga-field", children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ddga-slider__header", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { id: labelId, className: "ddga-slider__label", children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ddga-slider__value", "aria-hidden": "true", children: currentForRender.map(fmt).join(" \u2013 ") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       import_radix_ui21.Slider.Root,
       {
         ...props,
@@ -3996,8 +4062,8 @@ function Slider({
         "data-slot": "slider",
         className: cn(sliderVariants({ size, error: hasError }), className),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_radix_ui21.Slider.Track, { "data-slot": "slider-track", className: "ddga-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_radix_ui21.Slider.Range, { "data-slot": "slider-range", className: "ddga-slider__range" }) }),
-          currentForRender.map((thumbValue, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui21.Slider.Track, { "data-slot": "slider-track", className: "ddga-slider__track", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui21.Slider.Range, { "data-slot": "slider-range", className: "ddga-slider__range" }) }),
+          currentForRender.map((thumbValue, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             import_radix_ui21.Slider.Thumb,
             {
               "data-slot": "slider-thumb",
@@ -4012,15 +4078,15 @@ function Slider({
         ]
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
 // src/components/NumberInput/NumberInput.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_class_variance_authority29 = require("class-variance-authority");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var numberInputVariants = (0, import_class_variance_authority29.cva)("ddga-number-input", {
   variants: {
     size: {
@@ -4070,9 +4136,9 @@ function NumberInput({
   ...props
 }) {
   const isControlled = value !== void 0;
-  const [internal, setInternal] = (0, import_react20.useState)(defaultValue ?? null);
+  const [internal, setInternal] = (0, import_react21.useState)(defaultValue ?? null);
   const numericValue = isControlled ? value : internal;
-  const [draft, setDraft] = (0, import_react20.useState)(null);
+  const [draft, setDraft] = (0, import_react21.useState)(null);
   const allowDecimal = !Number.isInteger(step);
   const allowNegative = min == null || min < 0;
   const displayValue = draft ?? (numericValue == null ? "" : formatNumber(numericValue));
@@ -4130,18 +4196,18 @@ function NumberInput({
   }
   const atMin = min != null && numericValue != null && numericValue <= min;
   const atMax = max != null && numericValue != null && numericValue >= max;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { "data-slot": "number-input-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { htmlFor: fieldId, className: "ddga-number-input__label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { "data-slot": "number-input-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { htmlFor: fieldId, className: "ddga-number-input__label", children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true", className: "ddga-number-input__required", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { "aria-hidden": "true", className: "ddga-number-input__required", children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "div",
       {
         "data-slot": "number-input-control",
         className: cn(numberInputVariants({ size, error: hasError }), className),
         children: [
-          !hideControls && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          !hideControls && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "button",
             {
               type: "button",
@@ -4151,10 +4217,10 @@ function NumberInput({
               onClick: () => stepBy(-1),
               disabled: disabled || atMin,
               tabIndex: -1,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Minus, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Minus, { "aria-hidden": "true" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "input",
             {
               ...props,
@@ -4171,7 +4237,7 @@ function NumberInput({
               className: "ddga-number-input__field"
             }
           ),
-          !hideControls && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          !hideControls && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "button",
             {
               type: "button",
@@ -4181,21 +4247,21 @@ function NumberInput({
               onClick: () => stepBy(1),
               disabled: disabled || atMax,
               tabIndex: -1,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Plus, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Plus, { "aria-hidden": "true" })
             }
           )
         ]
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
 // src/components/Rating/Rating.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_class_variance_authority30 = require("class-variance-authority");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var ratingVariants = (0, import_class_variance_authority30.cva)("ddga-rating", {
   variants: {
     size: {
@@ -4237,11 +4303,11 @@ function Rating({
   className,
   ...props
 }) {
-  const rootRef = (0, import_react21.useRef)(null);
+  const rootRef = (0, import_react22.useRef)(null);
   const isControlled = value !== void 0;
-  const [internal, setInternal] = (0, import_react21.useState)(defaultValue ?? 0);
+  const [internal, setInternal] = (0, import_react22.useState)(defaultValue ?? 0);
   const currentValue = isControlled ? value : internal;
-  const [hover, setHover] = (0, import_react21.useState)(null);
+  const [hover, setHover] = (0, import_react22.useState)(null);
   const interactive = !readOnly && !disabled;
   const stepSize = allowHalf ? 0.5 : 1;
   const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
@@ -4304,7 +4370,7 @@ function Rating({
   }
   const stars = Array.from({ length: max }, (_, index) => {
     const level = fillFor(index, displayValue, allowHalf);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "span",
       {
         "data-slot": "rating-star",
@@ -4313,8 +4379,8 @@ function Rating({
         onPointerMove: interactive ? (event) => setHover(pointerValue(event, index)) : void 0,
         onClick: interactive ? (event) => commit(pointerValue(event, index)) : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Star, { className: "ddga-rating__star-bg", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "ddga-rating__star-fill", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Star, { className: "ddga-rating__star-fg", "aria-hidden": "true" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Star, { className: "ddga-rating__star-bg", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ddga-rating__star-fill", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Star, { className: "ddga-rating__star-fg", "aria-hidden": "true" }) })
         ]
       },
       index
@@ -4329,9 +4395,9 @@ function Rating({
   };
   const labelledBy = label ? `${fieldId}-label` : props["aria-labelledby"];
   const ariaLabel = labelledBy ? void 0 : props["aria-label"] ?? "Rating";
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { "data-slot": "rating-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { id: `${fieldId}-label`, className: "ddga-rating__label", children: label }),
-    readOnly ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...sharedProps, role: "img", "aria-label": formatValueText(currentValue, max), children: stars }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { "data-slot": "rating-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { id: `${fieldId}-label`, className: "ddga-rating__label", children: label }),
+    readOnly ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...sharedProps, role: "img", "aria-label": formatValueText(currentValue, max), children: stars }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
         ...sharedProps,
@@ -4351,15 +4417,15 @@ function Rating({
         children: stars
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
 // src/components/Toggle/Toggle.tsx
 var import_radix_ui22 = require("radix-ui");
 var import_class_variance_authority31 = require("class-variance-authority");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority31.cva)("ddga-toggle", {
   variants: {
     variant: {
@@ -4395,7 +4461,7 @@ var toggleGroupVariants = (0, import_class_variance_authority31.cva)("ddga-toggl
   }
 });
 function Toggle({ variant, size, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     import_radix_ui22.Toggle.Root,
     {
       "data-slot": "toggle",
@@ -4410,7 +4476,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__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     import_radix_ui22.ToggleGroup.Root,
     {
       "data-slot": "toggle-group",
@@ -4420,7 +4486,7 @@ function ToggleGroup({ variant, size, className, ...props }) {
   );
 }
 function ToggleGroupItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     import_radix_ui22.ToggleGroup.Item,
     {
       "data-slot": "toggle-group-item",
@@ -4432,7 +4498,7 @@ function ToggleGroupItem({ className, ...props }) {
 
 // src/components/DescriptionList/DescriptionList.tsx
 var import_class_variance_authority32 = require("class-variance-authority");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var descriptionListVariants = (0, import_class_variance_authority32.cva)("ddga-description-list", {
   variants: {
     orientation: {
@@ -4448,7 +4514,7 @@ var descriptionListVariants = (0, import_class_variance_authority32.cva)("ddga-d
   }
 });
 function DescriptionList({ orientation, divided, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "dl",
     {
       "data-slot": "description-list",
@@ -4458,7 +4524,7 @@ function DescriptionList({ orientation, divided, className, ...props }) {
   );
 }
 function DescriptionItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       "data-slot": "description-item",
@@ -4468,7 +4534,7 @@ function DescriptionItem({ className, ...props }) {
   );
 }
 function DescriptionTerm({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "dt",
     {
       "data-slot": "description-term",
@@ -4478,7 +4544,7 @@ function DescriptionTerm({ className, ...props }) {
   );
 }
 function DescriptionDetails({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "dd",
     {
       "data-slot": "description-details",
@@ -4489,10 +4555,10 @@ function DescriptionDetails({ className, ...props }) {
 }
 
 // src/components/EmptyState/EmptyState.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_radix_ui23 = require("radix-ui");
 var import_class_variance_authority33 = require("class-variance-authority");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var emptyStateVariants = (0, import_class_variance_authority33.cva)("ddga-empty-state", {
   variants: {
     variant: {
@@ -4513,10 +4579,10 @@ var emptyStateVariants = (0, import_class_variance_authority33.cva)("ddga-empty-
   }
 });
 var DEFAULT_ICONS3 = {
-  default: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Inbox, { "aria-hidden": "true" }),
-  search: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Search, { "aria-hidden": "true" }),
-  error: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AlertCircle, { "aria-hidden": "true" }),
-  success: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Check, { "aria-hidden": "true" })
+  default: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Inbox, { "aria-hidden": "true" }),
+  search: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Search, { "aria-hidden": "true" }),
+  error: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AlertCircle, { "aria-hidden": "true" }),
+  success: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Check, { "aria-hidden": "true" })
 };
 function EmptyState({
   variant,
@@ -4526,24 +4592,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__ */ (0, import_jsx_runtime36.jsx)(
-    "div",
+  const Comp = asChild ? import_radix_ui23.Slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    Comp,
     {
       "data-slot": "empty-state",
       "data-variant": variant ?? "default",
       "data-size": size ?? "md",
       className: cn(emptyStateVariants({ variant, size }), className),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-        resolvedIcon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EmptyStateMedia, { children: resolvedIcon }) : null,
-        title ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EmptyStateTitle, { children: title }) : null,
-        description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EmptyStateDescription, { children: description }) : null,
-        action || secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(EmptyStateActions, { children: [
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+        resolvedIcon ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(EmptyStateMedia, { children: resolvedIcon }) : null,
+        title ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(EmptyStateTitle, { children: title }) : null,
+        description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(EmptyStateDescription, { children: description }) : null,
+        action || secondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(EmptyStateActions, { children: [
           action,
           secondaryAction
         ] }) : null
@@ -4552,7 +4620,7 @@ function EmptyState({
   );
 }
 function EmptyStateMedia({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "empty-state-media",
@@ -4564,7 +4632,7 @@ function EmptyStateMedia({ className, ...props }) {
 }
 function EmptyStateTitle({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui23.Slot.Slot : "h3";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Comp,
     {
       "data-slot": "empty-state-title",
@@ -4575,7 +4643,7 @@ function EmptyStateTitle({ asChild, className, ...props }) {
 }
 function EmptyStateDescription({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui23.Slot.Slot : "p";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Comp,
     {
       "data-slot": "empty-state-description",
@@ -4586,7 +4654,7 @@ function EmptyStateDescription({ asChild, className, ...props }) {
 }
 function EmptyStateActions({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui23.Slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Comp,
     {
       "data-slot": "empty-state-actions",
@@ -4597,9 +4665,9 @@ function EmptyStateActions({ asChild, className, ...props }) {
 }
 
 // src/components/Stat/Stat.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_class_variance_authority34 = require("class-variance-authority");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var statVariants = (0, import_class_variance_authority34.cva)("ddga-stat", {
   variants: {
     variant: {
@@ -4623,9 +4691,9 @@ var statVariants = (0, import_class_variance_authority34.cva)("ddga-stat", {
   }
 });
 var TREND_ICONS = {
-  up: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CaretUp, { "aria-hidden": "true" }),
-  down: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CaretDown, { "aria-hidden": "true" }),
-  flat: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Minus, { "aria-hidden": "true" })
+  up: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CaretUp, { "aria-hidden": "true" }),
+  down: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CaretDown, { "aria-hidden": "true" }),
+  flat: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Minus, { "aria-hidden": "true" })
 };
 var TREND_SENTIMENT = {
   up: "positive",
@@ -4653,7 +4721,7 @@ function Stat({
   ...props
 }) {
   const resolvedSentiment = resolveSentiment(trend, sentiment);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       "data-slot": "stat",
@@ -4663,14 +4731,14 @@ function Stat({
       className: cn(statVariants({ variant, size }), className),
       ...props,
       children: [
-        label || icon ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ddga-stat__label-row", children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StatLabel, { children: label }) : null,
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ddga-stat__icon", "aria-hidden": "true", children: icon }) : null
+        label || icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ddga-stat__label-row", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatLabel, { children: label }) : null,
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ddga-stat__icon", "aria-hidden": "true", children: icon }) : null
         ] }) : null,
-        value ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StatValue, { children: value }) : null,
-        change || changeLabel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "ddga-stat__change-row", children: [
-          change ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StatChange, { trend, sentiment, variant: changeVariant, children: change }) : null,
-          changeLabel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ddga-stat__change-label", children: changeLabel }) : null
+        value ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatValue, { children: value }) : null,
+        change || changeLabel ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "ddga-stat__change-row", children: [
+          change ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatChange, { trend, sentiment, variant: changeVariant, children: change }) : null,
+          changeLabel ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ddga-stat__change-label", children: changeLabel }) : null
         ] }) : null,
         children
       ]
@@ -4678,17 +4746,17 @@ function Stat({
   );
 }
 function StatLabel({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "data-slot": "stat-label", className: cn("ddga-stat__label", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { "data-slot": "stat-label", className: cn("ddga-stat__label", className), ...props });
 }
 function StatValue({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "data-slot": "stat-value", className: cn("ddga-stat__value", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { "data-slot": "stat-value", className: cn("ddga-stat__value", className), ...props });
 }
 function StatChart({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "data-slot": "stat-chart", className: cn("ddga-stat__chart", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       "data-slot": "stat-change",
@@ -4702,7 +4770,7 @@ function StatChange({ trend, sentiment, variant, className, children, ...props }
       ),
       ...props,
       children: [
-        trend ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "ddga-stat__change-icon", children: TREND_ICONS[trend] }) : null,
+        trend ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ddga-stat__change-icon", children: TREND_ICONS[trend] }) : null,
         children
       ]
     }
@@ -4711,7 +4779,7 @@ function StatChange({ trend, sentiment, variant, className, children, ...props }
 
 // src/components/Stat/StatGroup.tsx
 var import_class_variance_authority35 = require("class-variance-authority");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var statGroupVariants = (0, import_class_variance_authority35.cva)("ddga-stat-group", {
   variants: {
     orientation: {
@@ -4730,7 +4798,7 @@ var statGroupVariants = (0, import_class_variance_authority35.cva)("ddga-stat-gr
   }
 });
 function StatGroup({ orientation, gap, columns, className, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       "data-slot": "stat-group",
@@ -4746,10 +4814,10 @@ function StatGroup({ orientation, gap, columns, className, style, ...props }) {
 }
 
 // src/components/Popover/Popover.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_radix_ui24 = require("radix-ui");
 var import_class_variance_authority36 = require("class-variance-authority");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var popoverContentVariants = (0, import_class_variance_authority36.cva)("ddga-popover", {
   variants: {
     size: {
@@ -4762,13 +4830,13 @@ var popoverContentVariants = (0, import_class_variance_authority36.cva)("ddga-po
   }
 });
 function Popover(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_radix_ui24.Popover.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_radix_ui24.Popover.Root, { ...props });
 }
 function PopoverTrigger({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_radix_ui24.Popover.Trigger, { "data-slot": "popover-trigger", className, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_radix_ui24.Popover.Trigger, { "data-slot": "popover-trigger", className, ...props });
 }
 function PopoverAnchor(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_radix_ui24.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_radix_ui24.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({
   size,
@@ -4783,9 +4851,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 = (0, import_react24.useContext)(DgaContext);
+  const ctx = (0, import_react25.useContext)(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_radix_ui24.Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_radix_ui24.Popover.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     import_radix_ui24.Popover.Content,
     {
       "data-slot": "popover-content",
@@ -4794,7 +4862,7 @@ function PopoverContent({
       ...props,
       children: [
         children,
-        arrow ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_radix_ui24.Popover.Arrow, { className: "ddga-popover__arrow", width: 16, height: 8 }) : null
+        arrow ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_radix_ui24.Popover.Arrow, { className: "ddga-popover__arrow", width: 16, height: 8 }) : null
       ]
     }
   ) });
@@ -4808,7 +4876,7 @@ function PopoverClose({
 }) {
   const hasRenderableChildren = children != null && children !== false;
   if (asChild || hasRenderableChildren) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       import_radix_ui24.Popover.Close,
       {
         "data-slot": "popover-close",
@@ -4819,27 +4887,27 @@ function PopoverClose({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     import_radix_ui24.Popover.Close,
     {
       "data-slot": "popover-close",
       "aria-label": closeLabel,
       className: cn("ddga-popover__close", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Close, { "aria-hidden": "true" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Close, { "aria-hidden": "true" })
     }
   );
 }
 
 // src/components/Sidebar/Sidebar.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_radix_ui25 = require("radix-ui");
 
 // src/components/Sidebar/SidebarContext.ts
-var import_react25 = require("react");
-var SidebarContext = (0, import_react25.createContext)(null);
+var import_react26 = require("react");
+var SidebarContext = (0, import_react26.createContext)(null);
 function useSidebar() {
-  const ctx = (0, import_react25.useContext)(SidebarContext);
+  const ctx = (0, import_react26.useContext)(SidebarContext);
   if (!ctx) {
     throw new Error("useSidebar must be used within a <SidebarProvider>");
   }
@@ -4847,10 +4915,10 @@ function useSidebar() {
 }
 
 // src/components/Sidebar/useIsMobile.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = (0, import_react26.useState)(false);
-  (0, import_react26.useEffect)(() => {
+  const [isMobile, setIsMobile] = (0, import_react27.useState)(false);
+  (0, import_react27.useEffect)(() => {
     const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
     const onChange = () => setIsMobile(mql.matches);
     onChange();
@@ -4861,7 +4929,7 @@ function useIsMobile(breakpoint = 768) {
 }
 
 // src/components/Sidebar/Sidebar.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -4874,18 +4942,18 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile(mobileBreakpoint);
-  const [openMobile, setOpenMobile] = (0, import_react27.useState)(false);
+  const [openMobile, setOpenMobile] = (0, import_react28.useState)(false);
   const isControlled = openProp !== void 0;
-  const [openInternal, setOpenInternal] = (0, import_react27.useState)(defaultOpen);
+  const [openInternal, setOpenInternal] = (0, import_react28.useState)(defaultOpen);
   const open = isControlled ? openProp : openInternal;
-  const setOpen = (0, import_react27.useCallback)(
+  const setOpen = (0, import_react28.useCallback)(
     (value2) => {
       if (!isControlled) setOpenInternal(value2);
       onOpenChange?.(value2);
     },
     [isControlled, onOpenChange]
   );
-  const toggleSidebar = (0, import_react27.useCallback)(() => {
+  const toggleSidebar = (0, import_react28.useCallback)(() => {
     if (isMobile) {
       setOpenMobile((v) => !v);
       return;
@@ -4896,7 +4964,7 @@ function SidebarProvider({
       setOpenInternal((v) => !v);
     }
   }, [isMobile, isControlled, onOpenChange, open]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!keyboardShortcut) return;
     const onKeyDown = (e) => {
       if (e.key.toLowerCase() === "b" && (e.metaKey || e.ctrlKey)) {
@@ -4908,11 +4976,11 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [keyboardShortcut, toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const value = (0, import_react27.useMemo)(
+  const value = (0, import_react28.useMemo)(
     () => ({ state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar }),
     [state, open, setOpen, openMobile, isMobile, toggleSidebar]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SidebarContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SidebarContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       "data-slot": "sidebar-wrapper",
@@ -4934,7 +5002,7 @@ function Sidebar({
 }) {
   const { isMobile, openMobile, setOpenMobile, state } = useSidebar();
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Drawer, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Drawer, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       DrawerContent,
       {
         side,
@@ -4944,11 +5012,12 @@ function Sidebar({
         "data-variant": variant,
         "data-side": side,
         className: cn("ddga-sidebar", "ddga-sidebar--mobile", className),
+        ...props,
         children
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "aside",
     {
       "data-slot": "sidebar",
@@ -4973,7 +5042,7 @@ function SidebarTrigger({
 }) {
   const { toggleSidebar, open, openMobile, isMobile } = useSidebar();
   const Comp = asChild ? import_radix_ui25.Slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     Comp,
     {
       type: asChild ? void 0 : "button",
@@ -4987,7 +5056,7 @@ function SidebarTrigger({
         toggleSidebar();
       },
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PanelLeft, { "aria-hidden": "true" })
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PanelLeft, { "aria-hidden": "true" })
     }
   );
 }
@@ -4997,7 +5066,7 @@ function SidebarRail({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "button",
     {
       type: "button",
@@ -5013,15 +5082,15 @@ function SidebarRail({
 }
 function SidebarInset({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui25.Slot.Slot : "main";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Comp, { "data-slot": "sidebar-inset", className: cn("ddga-sidebar-inset", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, { "data-slot": "sidebar-inset", className: cn("ddga-sidebar-inset", className), ...props });
 }
 function SidebarHeader({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui25.Slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Comp, { "data-slot": "sidebar-header", className: cn("ddga-sidebar__header", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, { "data-slot": "sidebar-header", className: cn("ddga-sidebar__header", className), ...props });
 }
 function SidebarContent({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui25.Slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     Comp,
     {
       "data-slot": "sidebar-content",
@@ -5032,10 +5101,10 @@ function SidebarContent({ asChild, className, ...props }) {
 }
 function SidebarFooter({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui25.Slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Comp, { "data-slot": "sidebar-footer", className: cn("ddga-sidebar__footer", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Comp, { "data-slot": "sidebar-footer", className: cn("ddga-sidebar__footer", className), ...props });
 }
 function SidebarSeparator({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "hr",
     {
       "data-slot": "sidebar-separator",
@@ -5047,10 +5116,10 @@ function SidebarSeparator({ className, ...props }) {
 
 // src/components/Sidebar/SidebarGroup.tsx
 var import_radix_ui26 = require("radix-ui");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function SidebarGroup({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui26.Slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Comp,
     {
       "data-slot": "sidebar-group",
@@ -5062,7 +5131,7 @@ function SidebarGroup({ asChild, className, ...props }) {
 }
 function SidebarGroupLabel({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui26.Slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Comp,
     {
       "data-slot": "sidebar-group-label",
@@ -5073,7 +5142,7 @@ function SidebarGroupLabel({ asChild, className, ...props }) {
 }
 function SidebarGroupAction({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui26.Slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Comp,
     {
       type: asChild ? void 0 : "button",
@@ -5085,7 +5154,7 @@ function SidebarGroupAction({ asChild, className, ...props }) {
 }
 function SidebarGroupContent({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui26.Slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Comp,
     {
       "data-slot": "sidebar-group-content",
@@ -5105,12 +5174,12 @@ function useDir() {
 }
 
 // src/components/Sidebar/SidebarMenu.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { "data-slot": "sidebar-menu", className: cn("ddga-sidebar__menu", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("ul", { "data-slot": "sidebar-menu", className: cn("ddga-sidebar__menu", className), ...props });
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -5140,7 +5209,7 @@ function SidebarMenuButton({
   const { state, isMobile } = useSidebar();
   const dir = useDir();
   const Comp = asChild ? import_radix_ui27.Slot.Slot : "button";
-  const button = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Comp,
     {
       type: asChild ? void 0 : "button",
@@ -5155,14 +5224,14 @@ function SidebarMenuButton({
   if (!tooltip || state !== "collapsed" || isMobile) {
     return button;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { "data-slot": "tooltip-trigger", style: { display: "contents" }, children: button }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TooltipContent, { side: dir === "rtl" ? "left" : "right", children: tooltip })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { "data-slot": "tooltip-trigger", style: { display: "contents" }, children: button }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipContent, { side: dir === "rtl" ? "left" : "right", children: tooltip })
   ] });
 }
 function SidebarMenuAction({ asChild, showOnHover, className, ...props }) {
   const Comp = asChild ? import_radix_ui27.Slot.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Comp,
     {
       type: asChild ? void 0 : "button",
@@ -5174,7 +5243,7 @@ function SidebarMenuAction({ asChild, showOnHover, className, ...props }) {
   );
 }
 function SidebarMenuBadge({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "span",
     {
       "data-slot": "sidebar-menu-badge",
@@ -5184,21 +5253,21 @@ function SidebarMenuBadge({ className, ...props }) {
   );
 }
 function SidebarMenuSkeleton({ showIcon, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       "data-slot": "sidebar-menu-skeleton",
       className: cn("ddga-sidebar__menu-skeleton", className),
       ...props,
       children: [
-        showIcon ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Skeleton, { shape: "circle", width: "1rem", height: "1rem" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Skeleton, { shape: "text", className: "ddga-sidebar__menu-skeleton-text" })
+        showIcon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Skeleton, { shape: "circle", width: "1rem", height: "1rem" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Skeleton, { shape: "text", className: "ddga-sidebar__menu-skeleton-text" })
       ]
     }
   );
 }
 function SidebarMenuSub({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "ul",
     {
       "data-slot": "sidebar-menu-sub",
@@ -5208,7 +5277,7 @@ function SidebarMenuSub({ className, ...props }) {
   );
 }
 function SidebarMenuSubItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "li",
     {
       "data-slot": "sidebar-menu-sub-item",
@@ -5234,7 +5303,7 @@ function SidebarMenuSubButton({
   ...props
 }) {
   const Comp = asChild ? import_radix_ui27.Slot.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Comp,
     {
       "data-slot": "sidebar-menu-sub-button",
@@ -5250,7 +5319,7 @@ function SidebarMenuSubButton({
 // src/components/ScrollArea/ScrollArea.tsx
 var import_radix_ui28 = require("radix-ui");
 var import_class_variance_authority38 = require("class-variance-authority");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var scrollAreaVariants = (0, import_class_variance_authority38.cva)("ddga-scroll-area", {
   variants: {
     orientation: {
@@ -5287,7 +5356,7 @@ function ScrollArea({
   const showVertical = orientation === "vertical" || orientation === "both";
   const showHorizontal = orientation === "horizontal" || orientation === "both";
   const { className: viewportClassName, ...restViewportProps } = viewportProps ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     import_radix_ui28.ScrollArea.Root,
     {
       "data-slot": "scroll-area",
@@ -5296,7 +5365,7 @@ function ScrollArea({
       className: cn(scrollAreaVariants({ orientation }), className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           import_radix_ui28.ScrollArea.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -5310,35 +5379,35 @@ function ScrollArea({
             children
           }
         ),
-        showVertical ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        showVertical ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           import_radix_ui28.ScrollArea.Scrollbar,
           {
             "data-slot": "scroll-area-scrollbar",
             orientation: "vertical",
             className: "ddga-scroll-area__scrollbar",
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui28.ScrollArea.Thumb, { className: "ddga-scroll-area__thumb" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui28.ScrollArea.Thumb, { className: "ddga-scroll-area__thumb" })
           }
         ) : null,
-        showHorizontal ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        showHorizontal ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           import_radix_ui28.ScrollArea.Scrollbar,
           {
             "data-slot": "scroll-area-scrollbar",
             orientation: "horizontal",
             className: "ddga-scroll-area__scrollbar",
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui28.ScrollArea.Thumb, { className: "ddga-scroll-area__thumb" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui28.ScrollArea.Thumb, { className: "ddga-scroll-area__thumb" })
           }
         ) : null,
-        orientation === "both" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_radix_ui28.ScrollArea.Corner, { className: "ddga-scroll-area__corner" }) : null
+        orientation === "both" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui28.ScrollArea.Corner, { className: "ddga-scroll-area__corner" }) : null
       ]
     }
   );
 }
 
 // src/components/Menubar/Menubar.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_radix_ui29 = require("radix-ui");
 var import_class_variance_authority39 = require("class-variance-authority");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var menubarContentVariants = (0, import_class_variance_authority39.cva)("ddga-menubar-menu", {
   variants: {
     size: {
@@ -5362,7 +5431,7 @@ var menubarTriggerVariants = (0, import_class_variance_authority39.cva)("ddga-me
   }
 });
 function Menubar({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_radix_ui29.Menubar.Root,
     {
       "data-slot": "menubar",
@@ -5372,10 +5441,10 @@ function Menubar({ className, ...props }) {
   );
 }
 function MenubarMenu(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui29.Menubar.Menu, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui29.Menubar.Menu, { ...props });
 }
 function MenubarTrigger({ variant, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_radix_ui29.Menubar.Trigger,
     {
       "data-slot": "menubar-trigger",
@@ -5386,9 +5455,9 @@ function MenubarTrigger({ variant, className, ...props }) {
   );
 }
 function MenubarContent({ size, className, sideOffset = 6, ...props }) {
-  const ctx = (0, import_react28.useContext)(DgaContext);
+  const ctx = (0, import_react29.useContext)(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui29.Menubar.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui29.Menubar.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_radix_ui29.Menubar.Content,
     {
       "data-slot": "menubar-content",
@@ -5406,7 +5475,7 @@ function MenubarItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     import_radix_ui29.Menubar.Item,
     {
       "data-slot": "menubar-item",
@@ -5414,9 +5483,9 @@ function MenubarItem({
       className: cn("ddga-menubar-menu__item", className),
       ...props,
       children: [
-        startIcon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__label", children }),
-        shortcut ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__shortcut", "aria-hidden": "true", children: shortcut }) : null
+        startIcon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__label", children }),
+        shortcut ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__shortcut", "aria-hidden": "true", children: shortcut }) : null
       ]
     }
   );
@@ -5430,7 +5499,7 @@ function MenubarCheckboxItem({
   const handleSelect = onSelect ?? ((event) => {
     event.preventDefault();
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     import_radix_ui29.Menubar.CheckboxItem,
     {
       "data-slot": "menubar-checkbox-item",
@@ -5438,20 +5507,20 @@ function MenubarCheckboxItem({
       onSelect: handleSelect,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui29.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Check, { className: "ddga-menubar-menu__indicator-icon" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__label", children })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui29.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Check, { className: "ddga-menubar-menu__indicator-icon" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__label", children })
       ]
     }
   );
 }
 function MenubarRadioGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui29.Menubar.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui29.Menubar.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
 }
 function MenubarRadioItem({ className, children, onSelect, ...props }) {
   const handleSelect = onSelect ?? ((event) => {
     event.preventDefault();
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     import_radix_ui29.Menubar.RadioItem,
     {
       "data-slot": "menubar-radio-item",
@@ -5459,14 +5528,14 @@ function MenubarRadioItem({ className, children, onSelect, ...props }) {
       onSelect: handleSelect,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui29.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__radio-dot" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__label", children })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__indicator", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui29.Menubar.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__radio-dot" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__label", children })
       ]
     }
   );
 }
 function MenubarLabel({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_radix_ui29.Menubar.Label,
     {
       "data-slot": "menubar-label",
@@ -5476,7 +5545,7 @@ function MenubarLabel({ className, ...props }) {
   );
 }
 function MenubarSeparator({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_radix_ui29.Menubar.Separator,
     {
       "data-slot": "menubar-separator",
@@ -5486,30 +5555,30 @@ function MenubarSeparator({ className, ...props }) {
   );
 }
 function MenubarGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui29.Menubar.Group, { "data-slot": "menubar-group", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui29.Menubar.Group, { "data-slot": "menubar-group", ...props });
 }
 function MenubarSub(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui29.Menubar.Sub, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui29.Menubar.Sub, { ...props });
 }
 function MenubarSubTrigger({ className, startIcon, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     import_radix_ui29.Menubar.SubTrigger,
     {
       "data-slot": "menubar-sub-trigger",
       className: cn("ddga-menubar-menu__item", "ddga-menubar-menu__item--sub", className),
       ...props,
       children: [
-        startIcon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "ddga-menubar-menu__label", children }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChevronRight, { className: "ddga-menubar-menu__sub-chevron", "aria-hidden": "true" })
+        startIcon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__icon", "aria-hidden": "true", children: startIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-menubar-menu__label", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ChevronRight, { className: "ddga-menubar-menu__sub-chevron", "aria-hidden": "true" })
       ]
     }
   );
 }
 function MenubarSubContent({ size, className, ...props }) {
-  const ctx = (0, import_react28.useContext)(DgaContext);
+  const ctx = (0, import_react29.useContext)(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_radix_ui29.Menubar.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_radix_ui29.Menubar.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_radix_ui29.Menubar.SubContent,
     {
       "data-slot": "menubar-sub-content",
@@ -5521,7 +5590,7 @@ function MenubarSubContent({ size, className, ...props }) {
 
 // src/components/Timeline/Timeline.tsx
 var import_class_variance_authority40 = require("class-variance-authority");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var timelineVariants = (0, import_class_variance_authority40.cva)("ddga-timeline", {
   variants: {
     size: {
@@ -5553,7 +5622,7 @@ var timelineMarkerVariants = (0, import_class_variance_authority40.cva)("ddga-ti
   }
 });
 function Timeline({ size, orientation, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "ol",
     {
       "data-slot": "timeline",
@@ -5564,12 +5633,12 @@ function Timeline({ size, orientation, className, ...props }) {
   );
 }
 function TimelineItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("li", { "data-slot": "timeline-item", className: cn("ddga-timeline__item", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("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__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "span",
     {
       "aria-hidden": "true",
@@ -5578,12 +5647,12 @@ function TimelineMarker({ status, className, children, ...props }) {
       "data-reached": reached ? "" : void 0,
       className: cn(timelineMarkerVariants({ status }), className),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "ddga-timeline__dot" })
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ddga-timeline__dot" })
     }
   );
 }
 function TimelineContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
       "data-slot": "timeline-content",
@@ -5593,10 +5662,10 @@ function TimelineContent({ className, ...props }) {
   );
 }
 function TimelineTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "data-slot": "timeline-title", className: cn("ddga-timeline__title", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { "data-slot": "timeline-title", className: cn("ddga-timeline__title", className), ...props });
 }
 function TimelineDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "span",
     {
       "data-slot": "timeline-description",
@@ -5606,18 +5675,18 @@ function TimelineDescription({ className, ...props }) {
   );
 }
 function TimelineTime({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("time", { "data-slot": "timeline-time", className: cn("ddga-timeline__time", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("time", { "data-slot": "timeline-time", className: cn("ddga-timeline__time", className), ...props });
 }
 
 // src/components/Command/Command.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_cmdk2 = require("cmdk");
 var import_radix_ui30 = require("radix-ui");
 var import_class_variance_authority41 = require("class-variance-authority");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var commandVariants = (0, import_class_variance_authority41.cva)("ddga-command");
 function Command2({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_cmdk2.Command, { "data-slot": "command", className: cn(commandVariants(), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_cmdk2.Command, { "data-slot": "command", className: cn(commandVariants(), className), ...props });
 }
 function CommandInput({
   className,
@@ -5625,9 +5694,9 @@ function CommandInput({
   "aria-label": ariaLabel,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ddga-command__input-wrapper", "data-slot": "command-input-wrapper", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Search, { className: "ddga-command__search-icon", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "ddga-command__input-wrapper", "data-slot": "command-input-wrapper", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Search, { className: "ddga-command__search-icon", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       import_cmdk2.Command.Input,
       {
         "data-slot": "command-input",
@@ -5640,7 +5709,7 @@ function CommandInput({
   ] });
 }
 function CommandList({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     import_cmdk2.Command.List,
     {
       "data-slot": "command-list",
@@ -5650,7 +5719,7 @@ function CommandList({ className, ...props }) {
   );
 }
 function CommandEmpty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     import_cmdk2.Command.Empty,
     {
       "data-slot": "command-empty",
@@ -5660,7 +5729,7 @@ function CommandEmpty({ className, ...props }) {
   );
 }
 function CommandGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     import_cmdk2.Command.Group,
     {
       "data-slot": "command-group",
@@ -5674,7 +5743,7 @@ function CommandSeparator({
   "aria-hidden": ariaHidden = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     import_cmdk2.Command.Separator,
     {
       "aria-hidden": ariaHidden,
@@ -5694,7 +5763,7 @@ function CommandItem({
 }) {
   const labelText = typeof children === "string" ? children : void 0;
   const mergedKeywords = labelText && !keywords?.includes(labelText) ? [...keywords ?? [], labelText] : keywords;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     import_cmdk2.Command.Item,
     {
       "data-slot": "command-item",
@@ -5702,9 +5771,9 @@ function CommandItem({
       keywords: mergedKeywords,
       ...props,
       children: [
-        startIcon != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ddga-command__item-icon", "aria-hidden": "true", children: startIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ddga-command__item-label", children }),
-        shortcut != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ddga-command__item-shortcut", children: shortcut })
+        startIcon != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ddga-command__item-icon", "aria-hidden": "true", children: startIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ddga-command__item-label", children }),
+        shortcut != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ddga-command__item-shortcut", children: shortcut })
       ]
     }
   );
@@ -5722,21 +5791,21 @@ function CommandDialog({
   loop,
   children
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react29.useState)(defaultOpen ?? false);
+  const [internalOpen, setInternalOpen] = (0, import_react30.useState)(defaultOpen ?? false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = (0, import_react29.useCallback)(
+  const setOpen = (0, import_react30.useCallback)(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [isControlled, onOpenChange]
   );
-  const openRef = (0, import_react29.useRef)(open);
-  (0, import_react29.useEffect)(() => {
+  const openRef = (0, import_react30.useRef)(open);
+  (0, import_react30.useEffect)(() => {
     openRef.current = open;
   });
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (typeof shortcut !== "string") return;
     const key = shortcut.toLowerCase();
     const onKeyDown = (event) => {
@@ -5748,20 +5817,20 @@ function CommandDialog({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [shortcut, setOpen]);
-  const ctx = (0, import_react29.useContext)(DgaContext);
+  const ctx = (0, import_react30.useContext)(DgaContext);
   const portalContainer = ctx?.portalEl ?? ctx?.rootEl ?? void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_radix_ui30.Dialog.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_radix_ui30.Dialog.Portal, { container: portalContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_radix_ui30.Dialog.Overlay, { className: "ddga-command__overlay", "data-slot": "command-overlay" }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_radix_ui30.Dialog.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_radix_ui30.Dialog.Portal, { container: portalContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_radix_ui30.Dialog.Overlay, { className: "ddga-command__overlay", "data-slot": "command-overlay" }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
       import_radix_ui30.Dialog.Content,
       {
         "data-slot": "command-dialog",
         className: cn("ddga-command-dialog", className),
         ...description == null ? { "aria-describedby": void 0 } : {},
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_radix_ui30.Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_radix_ui30.VisuallyHidden.Root, { children: label }) }),
-          description != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_radix_ui30.Dialog.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_radix_ui30.VisuallyHidden.Root, { children: description }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_radix_ui30.Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_radix_ui30.VisuallyHidden.Root, { children: label }) }),
+          description != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_radix_ui30.Dialog.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_radix_ui30.VisuallyHidden.Root, { children: description }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Command2,
             {
               "data-slot": "command-dialog-command",
@@ -5781,7 +5850,7 @@ function CommandDialog({
 
 // src/components/Table/Table.tsx
 var import_class_variance_authority42 = require("class-variance-authority");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var tableVariants = (0, import_class_variance_authority42.cva)("ddga-table", {
   variants: {
     size: {
@@ -5821,7 +5890,7 @@ function Table({
       "[ddga] <Table> received both `aria-label` and `aria-labelledby`. `aria-labelledby` takes precedence; `aria-label` will be ignored by assistive technology."
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       "data-slot": "table-region",
@@ -5833,7 +5902,7 @@ function Table({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby
       } : {},
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         "table",
         {
           "data-slot": "table",
@@ -5845,16 +5914,16 @@ function Table({
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("thead", { "data-slot": "table-header", className: cn("ddga-table__header", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { "data-slot": "table-header", className: cn("ddga-table__header", className), ...props });
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tbody", { "data-slot": "table-body", className: cn("ddga-table__body", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { "data-slot": "table-body", className: cn("ddga-table__body", className), ...props });
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("tfoot", { "data-slot": "table-footer", className: cn("ddga-table__footer", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tfoot", { "data-slot": "table-footer", className: cn("ddga-table__footer", className), ...props });
 }
 function TableRow({ className, selected, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "tr",
     {
       "data-slot": "table-row",
@@ -5881,10 +5950,10 @@ function TableHead({
     );
   }
   if (!sortable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("th", { scope: "col", "data-slot": "table-head", className: headClass, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { scope: "col", "data-slot": "table-head", className: headClass, ...props, children });
   }
   const ariaSort = sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("th", { scope: "col", "data-slot": "table-head", "aria-sort": ariaSort, className: headClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { scope: "col", "data-slot": "table-head", "aria-sort": ariaSort, className: headClass, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "button",
     {
       type: "button",
@@ -5893,12 +5962,12 @@ function TableHead({
       onClick,
       children: [
         children,
-        sortLabel ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ddga-sr-only", children: sortLabel }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ddga-table__sort-icon", "data-slot": "table-sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CaretUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CaretDown, {}) : (
+        sortLabel ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ddga-sr-only", children: sortLabel }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ddga-table__sort-icon", "data-slot": "table-sort-icon", "aria-hidden": "true", children: sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CaretUp, {}) : sortDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CaretDown, {}) : (
           // Neutral affordance: stacked carets, dimmed via CSS.
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CaretUp, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CaretDown, {})
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CaretUp, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CaretDown, {})
           ] })
         ) })
       ]
@@ -5906,7 +5975,7 @@ function TableHead({
   ) });
 }
 function TableCell({ className, align, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "td",
     {
       "data-slot": "table-cell",
@@ -5916,7 +5985,7 @@ function TableCell({ className, align, ...props }) {
   );
 }
 function TableCaption({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "caption",
     {
       "data-slot": "table-caption",
@@ -5927,9 +5996,9 @@ function TableCaption({ className, ...props }) {
 }
 
 // src/components/InputOTP/InputOTP.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_class_variance_authority43 = require("class-variance-authority");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var DEFAULT_PATTERN = "^[0-9]*$";
 var inputOTPVariants = (0, import_class_variance_authority43.cva)("ddga-input-otp", {
   variants: {
@@ -5965,7 +6034,7 @@ function Slot({
   caret,
   mask
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       "data-slot": "input-otp-slot",
@@ -5974,7 +6043,7 @@ function Slot({
       className: "ddga-input-otp__slot",
       children: [
         char != null ? mask ? "\u2022" : char : null,
-        caret && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { "aria-hidden": "true", "data-slot": "input-otp-caret", className: "ddga-input-otp__caret" })
+        caret && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { "aria-hidden": "true", "data-slot": "input-otp-caret", className: "ddga-input-otp__caret" })
       ]
     }
   );
@@ -6004,12 +6073,12 @@ function InputOTP({
   "aria-labelledby": ariaLabelledby,
   ...props
 }) {
-  const inputRef = (0, import_react30.useRef)(null);
-  const [focused, setFocused] = (0, import_react30.useState)(false);
+  const inputRef = (0, import_react31.useRef)(null);
+  const [focused, setFocused] = (0, import_react31.useState)(false);
   const isControlled = value !== void 0;
-  const [internal, setInternal] = (0, import_react30.useState)(defaultValue ?? "");
+  const [internal, setInternal] = (0, import_react31.useState)(defaultValue ?? "");
   const current = isControlled ? value : internal;
-  const compiledPattern = (0, import_react30.useMemo)(() => {
+  const compiledPattern = (0, import_react31.useMemo)(() => {
     try {
       return new RegExp(pattern);
     } catch {
@@ -6021,7 +6090,7 @@ function InputOTP({
       return new RegExp(DEFAULT_PATTERN);
     }
   }, [pattern]);
-  const completedRef = (0, import_react30.useRef)(null);
+  const completedRef = (0, import_react31.useRef)(null);
   const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
     name: "InputOTP",
     id: externalId,
@@ -6054,18 +6123,18 @@ function InputOTP({
   const lastGroup = groups.length - 1;
   const activeIndex = focused ? Math.min(current.length, length - 1) : -1;
   const inputMode = pattern === DEFAULT_PATTERN ? "numeric" : "text";
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { "data-slot": "input-otp-field", className: "ddga-field", ...props, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { htmlFor: fieldId, className: "ddga-input-otp__label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { "data-slot": "input-otp-field", className: "ddga-field", ...props, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { htmlFor: fieldId, className: "ddga-input-otp__label", children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { "aria-hidden": "true", className: "ddga-input-otp__required", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { "aria-hidden": "true", className: "ddga-input-otp__required", children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       "div",
       {
         className: cn(inputOTPVariants({ size, error: hasError }), className),
         "data-slot": "input-otp",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             "input",
             {
               ...controlProps,
@@ -6092,12 +6161,12 @@ function InputOTP({
               "data-slot": "input-otp-input"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { dir: "ltr", "aria-hidden": "true", "data-slot": "input-otp-row", className: "ddga-input-otp__row", children: groups.map((count, groupIndex) => {
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime48.jsxs)(import_react30.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { "data-slot": "input-otp-group", className: "ddga-input-otp__group", children: Array.from({ length: count }, (_, offset) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react31.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { "data-slot": "input-otp-group", className: "ddga-input-otp__group", children: Array.from({ length: count }, (_, offset) => {
                 const index = start + offset;
-                return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   Slot,
                   {
                     char: current[index],
@@ -6108,13 +6177,13 @@ function InputOTP({
                   index
                 );
               }) }),
-              groupIndex < lastGroup && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              groupIndex < lastGroup && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
                   "data-slot": "input-otp-separator",
                   className: "ddga-input-otp__separator",
-                  children: separator ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ddga-input-otp__separator-dash" })
+                  children: separator ?? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "ddga-input-otp__separator-dash" })
                 }
               )
             ] }, groupIndex);
@@ -6122,16 +6191,16 @@ function InputOTP({
         ]
       }
     ),
-    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
 // src/components/Link/Link.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_radix_ui31 = require("radix-ui");
 var import_class_variance_authority44 = require("class-variance-authority");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var linkVariants = (0, import_class_variance_authority44.cva)("ddga-link", {
   variants: {
     variant: {
@@ -6172,7 +6241,7 @@ function Link({
     /* @__PURE__ */ new Set([...rel ? rel.split(/\s+/).filter(Boolean) : [], "noopener", "noreferrer"])
   ).join(" ") : rel;
   const showExternalIcon = external && !endIcon;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     Comp,
     {
       "data-slot": "link",
@@ -6180,7 +6249,7 @@ function Link({
       rel: relValue,
       ...props,
       children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "span",
           {
             className: cn("ddga-link__icon", iconFlip && "ddga-icon-flip"),
@@ -6189,8 +6258,8 @@ function Link({
             children: startIcon
           }
         ),
-        asChild ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui31.Slot.Slottable, { children }) : children,
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        asChild ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_radix_ui31.Slot.Slottable, { children }) : children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "span",
           {
             className: cn("ddga-link__icon", iconFlip && "ddga-icon-flip"),
@@ -6199,13 +6268,13 @@ function Link({
             children: endIcon
           }
         ),
-        showExternalIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        showExternalIcon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "span",
           {
             className: "ddga-link__icon ddga-link__icon--external",
             "data-slot": "link-external-icon",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ExternalLink, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ExternalLink, {})
           }
         )
       ]
@@ -6214,8 +6283,8 @@ function Link({
 }
 
 // src/components/SearchBox/SearchBox.tsx
-var import_react32 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function setNativeInputValue(el, value) {
   const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
   setter?.call(el, value);
@@ -6231,11 +6300,20 @@ function SearchBox({
   clearable = true,
   clearLabel = "Clear search",
   className,
+  ref,
   ...rest
 }) {
-  const inputRef = (0, import_react32.useRef)(null);
+  const inputRef = (0, import_react33.useRef)(null);
+  const setRefs = (0, import_react33.useCallback)(
+    (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] = (0, import_react32.useState)(
+  const [internal, setInternal] = (0, import_react33.useState)(
     defaultValue != null ? String(defaultValue) : ""
   );
   const currentValue = isControlled ? String(value ?? "") : internal;
@@ -6262,18 +6340,18 @@ function SearchBox({
     }
   };
   const showClear = clearable && currentValue.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     Input,
     {
       ...rest,
-      ref: inputRef,
+      ref: setRefs,
       type: "search",
       value: currentValue,
       onChange: handleChange,
       onKeyDown: handleKeyDown,
       className: cn("ddga-search-box", className),
-      startAdornment: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Search, { "data-slot": "search-box-icon", "aria-hidden": "true" }),
-      endAdornment: showClear ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      startAdornment: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Search, { "data-slot": "search-box-icon", "aria-hidden": "true" }),
+      endAdornment: showClear ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         Button,
         {
           type: "button",
@@ -6282,7 +6360,7 @@ function SearchBox({
           "aria-label": clearLabel,
           "data-slot": "search-box-clear",
           onClick: clear,
-          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Close, { "aria-hidden": "true" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Close, { "aria-hidden": "true" })
         }
       ) : void 0
     }
@@ -6291,7 +6369,7 @@ function SearchBox({
 
 // src/components/List/List.tsx
 var import_class_variance_authority45 = require("class-variance-authority");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var listVariants = (0, import_class_variance_authority45.cva)("ddga-list", {
   variants: {
     variant: {
@@ -6312,7 +6390,7 @@ 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__ */ (0, import_jsx_runtime51.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "ol",
       {
         "data-slot": "list",
@@ -6324,13 +6402,13 @@ function List({ variant, divided, className, start, reversed, ...props }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("ul", { "data-slot": "list", "data-variant": variant ?? "plain", className: classes, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { "data-slot": "list", "data-variant": variant ?? "plain", className: classes, ...props });
 }
 function ListItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { "data-slot": "list-item", className: cn("ddga-list__item", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { "data-slot": "list-item", className: cn("ddga-list__item", className), ...props });
 }
 function ListItemIcon({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "data-slot": "list-item-icon", className: cn("ddga-list__icon", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "data-slot": "list-item-icon", className: cn("ddga-list__icon", className), ...props });
 }
 function ListItemContent({
   primary,
@@ -6344,20 +6422,20 @@ function ListItemContent({
       "[@dev-dga/react] ListItemContent: `children` overrides `primary`/`secondary`. Pass one or the other, not both."
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { "data-slot": "list-item-content", className: cn("ddga-list__content", className), ...props, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    primary != null && primary !== "" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "data-slot": "list-item-primary", className: "ddga-list__primary", children: primary }),
-    secondary != null && secondary !== "" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "data-slot": "list-item-secondary", className: "ddga-list__secondary", children: secondary })
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { "data-slot": "list-item-content", className: cn("ddga-list__content", className), ...props, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+    primary != null && primary !== "" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "data-slot": "list-item-primary", className: "ddga-list__primary", children: primary }),
+    secondary != null && secondary !== "" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "data-slot": "list-item-secondary", className: "ddga-list__secondary", children: secondary })
   ] }) });
 }
 function ListItemAction({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { "data-slot": "list-item-action", className: cn("ddga-list__action", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { "data-slot": "list-item-action", className: cn("ddga-list__action", className), ...props });
 }
 
 // src/components/Quote/Quote.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_radix_ui32 = require("radix-ui");
 var import_class_variance_authority46 = require("class-variance-authority");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var quoteVariants = (0, import_class_variance_authority46.cva)("ddga-quote", {
   variants: {
     variant: {
@@ -6388,9 +6466,9 @@ function Quote({
   ...props
 }) {
   const hasAttribution = author != null || byline != null || source != null;
-  const mark = quoteMark ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuoteMark, { "aria-hidden": "true", className: "ddga-quote__mark" }) : null;
+  const mark = quoteMark ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(QuoteMark, { "aria-hidden": "true", className: "ddga-quote__mark" }) : null;
   if (!hasAttribution) {
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       "blockquote",
       {
         "data-slot": "quote",
@@ -6400,12 +6478,12 @@ function Quote({
         ...props,
         children: [
           mark,
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuoteContent, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(QuoteContent, { children })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "figure",
     {
       "data-slot": "quote",
@@ -6413,16 +6491,16 @@ function Quote({
       className: cn(quoteVariants({ variant }), className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("blockquote", { "data-slot": "quote-blockquote", className: "ddga-quote__blockquote", cite, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("blockquote", { "data-slot": "quote-blockquote", className: "ddga-quote__blockquote", cite, children: [
           mark,
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuoteContent, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(QuoteContent, { children })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(QuoteCaption, { children: [
-          avatar != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { "data-slot": "quote-avatar", "aria-hidden": "true", className: "ddga-quote__avatar", children: avatar }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "ddga-quote__attribution", children: [
-            author != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuoteAuthor, { children: author }) : null,
-            byline != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ddga-quote__byline", children: byline }) : null,
-            source != null ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(QuoteSource, { children: source }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(QuoteCaption, { children: [
+          avatar != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "data-slot": "quote-avatar", "aria-hidden": "true", className: "ddga-quote__avatar", children: avatar }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "ddga-quote__attribution", children: [
+            author != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(QuoteAuthor, { children: author }) : null,
+            byline != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ddga-quote__byline", children: byline }) : null,
+            source != null ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(QuoteSource, { children: source }) : null
           ] })
         ] })
       ]
@@ -6431,26 +6509,26 @@ function Quote({
 }
 function QuoteContent({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui32.Slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Comp, { "data-slot": "quote-content", className: cn("ddga-quote__content", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Comp, { "data-slot": "quote-content", className: cn("ddga-quote__content", className), ...props });
 }
 function QuoteCaption({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui32.Slot.Slot : "figcaption";
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Comp, { "data-slot": "quote-caption", className: cn("ddga-quote__caption", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Comp, { "data-slot": "quote-caption", className: cn("ddga-quote__caption", className), ...props });
 }
 function QuoteAuthor({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui32.Slot.Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Comp, { "data-slot": "quote-author", className: cn("ddga-quote__author", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Comp, { "data-slot": "quote-author", className: cn("ddga-quote__author", className), ...props });
 }
 function QuoteSource({ asChild, className, ...props }) {
   const Comp = asChild ? import_radix_ui32.Slot.Slot : "cite";
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Comp, { "data-slot": "quote-source", className: cn("ddga-quote__source", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Comp, { "data-slot": "quote-source", className: cn("ddga-quote__source", className), ...props });
 }
 
 // src/components/Collapsible/Collapsible.tsx
 var import_radix_ui33 = require("radix-ui");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Collapsible({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     import_radix_ui33.Collapsible.Root,
     {
       "data-slot": "collapsible",
@@ -6460,7 +6538,7 @@ function Collapsible({ className, ...props }) {
   );
 }
 function CollapsibleTrigger({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     import_radix_ui33.Collapsible.Trigger,
     {
       "data-slot": "collapsible-trigger",
@@ -6470,21 +6548,21 @@ function CollapsibleTrigger({ className, ...props }) {
   );
 }
 function CollapsibleContent({ className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     import_radix_ui33.Collapsible.Content,
     {
       "data-slot": "collapsible-content",
       className: cn("ddga-collapsible__content", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "ddga-collapsible__content-inner", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "ddga-collapsible__content-inner", children })
     }
   );
 }
 
 // src/components/TagInput/TagInput.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_class_variance_authority47 = require("class-variance-authority");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var tagInputVariants = (0, import_class_variance_authority47.cva)("ddga-tag-input", {
   variants: {
     size: {
@@ -6524,11 +6602,11 @@ function TagInput({
   ...props
 }) {
   const isControlled = value !== void 0;
-  const [uncontrolledTags, setUncontrolledTags] = (0, import_react34.useState)(defaultValue ?? []);
+  const [uncontrolledTags, setUncontrolledTags] = (0, import_react35.useState)(defaultValue ?? []);
   const tags = isControlled ? value : uncontrolledTags;
-  const [draft, setDraft] = (0, import_react34.useState)("");
-  const [announcement, setAnnouncement] = (0, import_react34.useState)("");
-  const inputRef = (0, import_react34.useRef)(null);
+  const [draft, setDraft] = (0, import_react35.useState)("");
+  const [announcement, setAnnouncement] = (0, import_react35.useState)("");
+  const inputRef = (0, import_react35.useRef)(null);
   const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
     name: "TagInput",
     id: externalId,
@@ -6613,9 +6691,9 @@ function TagInput({
     inputRef.current?.focus();
   };
   const chipSize = size === "lg" ? "md" : "sm";
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { "data-slot": "tag-input-field", className: "ddga-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { htmlFor: fieldId, className: "ddga-tag-input__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { "data-slot": "tag-input-field", className: "ddga-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("label", { htmlFor: fieldId, className: "ddga-tag-input__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "div",
       {
         "data-slot": "tag-input-control",
@@ -6623,13 +6701,13 @@ function TagInput({
         "data-disabled": disabled || void 0,
         onMouseDown: disabled ? void 0 : handleBoxMouseDown,
         children: [
-          tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { "data-slot": "tag-input-list", className: "ddga-tag-input__list", role: "list", children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("ul", { "data-slot": "tag-input-list", className: "ddga-tag-input__list", role: "list", children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "li",
             {
               "data-slot": "tag-input-item",
               className: "ddga-tag-input__item",
               role: "listitem",
-              children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                 Badge,
                 {
                   variant: chipVariant,
@@ -6644,7 +6722,7 @@ function TagInput({
             },
             `${tag}-${index}`
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             "input",
             {
               ...props,
@@ -6664,17 +6742,304 @@ function TagInput({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { "data-slot": "tag-input-live", className: "ddga-sr-only", role: "status", "aria-live": "polite", children: announcement }),
-    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
-    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { "data-slot": "tag-input-live", className: "ddga-sr-only", role: "status", "aria-live": "polite", children: announcement }),
+    hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+    hasHelper && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(FieldMessage, { id: helperId, variant: "helper", children: helperText })
   ] });
 }
 
-// src/providers/DgaProvider.tsx
-var import_react35 = require("react");
+// src/components/DateRangePicker/DateRangePicker.tsx
+var import_react36 = require("react");
+var import_react_aria_components3 = require("react-aria-components");
+var import_date3 = require("@internationalized/date");
+var import_class_variance_authority48 = require("class-variance-authority");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var dateRangePickerTriggerVariants = (0, import_class_variance_authority48.cva)("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] = (0, import_react36.useState)(
+    () => toAriaRange(defaultValue)
+  );
+  const value = isValueControlled ? toAriaRange(controlledValue) : internalValue;
+  const handleAriaChange = (0, import_react36.useCallback)(
+    (next) => {
+      const nextRange = next ? {
+        start: new import_date3.CalendarDate(next.start.year, next.start.month, next.start.day),
+        end: new import_date3.CalendarDate(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] = (0, import_react36.useState)(defaultCalendar);
+  const calendarSystem = isCalendarControlled ? controlledCalendar : internalCalendar;
+  const setCalendar = (0, import_react36.useCallback)(
+    (next) => {
+      if (!isCalendarControlled) setInternalCalendar(next);
+      onCalendarChange?.(next);
+    },
+    [isCalendarControlled, onCalendarChange]
+  );
+  const {
+    dgaLocale,
+    locale: ariaLocale,
+    portalContainer,
+    PrevChevron,
+    NextChevron,
+    resolvedLabels,
+    navLabels,
+    a11yLabels
+  } = useCalendarChrome(calendarSystem, calendarLabels);
+  const ariaMinValue = (0, import_react36.useMemo)(() => dateToCalendarDate(minValue) ?? void 0, [minValue]);
+  const ariaMaxValue = (0, import_react36.useMemo)(() => 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__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components3.I18nProvider, { locale: ariaLocale, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    import_react_aria_components3.DateRangePicker,
+    {
+      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__ */ (0, import_jsx_runtime56.jsxs)(import_react_aria_components3.Label, { className: "ddga-date-range-picker__label", children: [
+          label,
+          required && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": "true", className: "ddga-date-range-picker__required", children: "*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+          import_react_aria_components3.Group,
+          {
+            "data-slot": "date-range-picker-trigger",
+            className: cn(dateRangePickerTriggerVariants({ size, error: hasError }), className),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                import_react_aria_components3.DateInput,
+                {
+                  slot: "start",
+                  className: "ddga-date-range-picker__input",
+                  "data-slot": "date-range-picker-input-start",
+                  children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    import_react_aria_components3.DateSegment,
+                    {
+                      segment,
+                      className: "ddga-date-range-picker__segment",
+                      "data-slot": "date-range-picker-segment"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": "true", className: "ddga-date-range-picker__separator", children: "\u2013" }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                import_react_aria_components3.DateInput,
+                {
+                  slot: "end",
+                  className: "ddga-date-range-picker__input",
+                  "data-slot": "date-range-picker-input-end",
+                  children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    import_react_aria_components3.DateSegment,
+                    {
+                      segment,
+                      className: "ddga-date-range-picker__segment",
+                      "data-slot": "date-range-picker-segment"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                import_react_aria_components3.Button,
+                {
+                  className: "ddga-date-range-picker__icon-button",
+                  "aria-label": a11yLabels.openCalendar,
+                  "data-slot": "date-range-picker-trigger-button",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CalendarIcon, { "aria-hidden": "true", className: "ddga-date-range-picker__icon" })
+                }
+              )
+            ]
+          }
+        ),
+        hasHelper && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          import_react_aria_components3.Text,
+          {
+            slot: "description",
+            className: "ddga-field__message ddga-field__message--helper",
+            "data-slot": "field-helper",
+            children: helperText
+          }
+        ),
+        hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          import_react_aria_components3.FieldError,
+          {
+            className: "ddga-field__message ddga-field__message--error",
+            "data-slot": "field-error",
+            children: errorMessage
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          import_react_aria_components3.Popover,
+          {
+            UNSTABLE_portalContainer: portalContainer,
+            className: "ddga-calendar-popover",
+            "data-slot": "date-range-picker-popover",
+            offset: 6,
+            containerPadding: 12,
+            children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+              import_react_aria_components3.Dialog,
+              {
+                className: "ddga-calendar-dialog",
+                "data-slot": "date-range-picker-dialog",
+                "aria-label": dialogAriaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                children: [
+                  showToggle && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    CalendarSystemToggle,
+                    {
+                      value: calendarSystem,
+                      onChange: setCalendar,
+                      labels: resolvedLabels,
+                      groupLabel: a11yLabels.calendarSystem
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+                    import_react_aria_components3.RangeCalendar,
+                    {
+                      className: "ddga-calendar ddga-calendar--range",
+                      "data-slot": "date-range-picker-calendar",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("header", { className: "ddga-calendar__header", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                            import_react_aria_components3.Button,
+                            {
+                              slot: "previous",
+                              className: "ddga-calendar__nav",
+                              "data-slot": "date-range-picker-calendar-prev",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PrevChevron, { "aria-hidden": "true" })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                            CalendarNavHeader,
+                            {
+                              locale: ariaLocale,
+                              monthLabel: navLabels.month,
+                              yearLabel: navLabels.year
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                            import_react_aria_components3.Button,
+                            {
+                              slot: "next",
+                              className: "ddga-calendar__nav",
+                              "data-slot": "date-range-picker-calendar-next",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NextChevron, { "aria-hidden": "true" })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_aria_components3.CalendarGrid, { className: "ddga-calendar__grid", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components3.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components3.CalendarHeaderCell, { className: "ddga-calendar__weekday", children: day }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components3.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components3.CalendarCell, { date, className: "ddga-calendar__cell", children: ({ formattedDate }) => renderDayContent(formattedDate, {
+                            showSecondary: showSecondaryCalendar,
+                            date,
+                            calendarSystem
+                          }) }) })
+                        ] })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/components/AspectRatio/AspectRatio.tsx
 var import_radix_ui34 = require("radix-ui");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function AspectRatio({ ratio = 1, asChild, className, style, ...props }) {
+  const Comp = asChild ? import_radix_ui34.Slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    Comp,
+    {
+      "data-slot": "aspect-ratio",
+      className: cn("ddga-aspect-ratio", className),
+      style: { "--ddga-aspect-ratio": ratio, ...style },
+      ...props
+    }
+  );
+}
+
+// src/providers/DgaProvider.tsx
+var import_react37 = require("react");
+var import_radix_ui35 = require("radix-ui");
 var import_tokens = require("@dev-dga/tokens");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function DgaProvider({
   dir = "ltr",
   locale,
@@ -6685,14 +7050,14 @@ function DgaProvider({
   style: consumerStyle,
   children
 }) {
-  const parentCtx = (0, import_react35.useContext)(DgaContext);
+  const parentCtx = (0, import_react37.useContext)(DgaContext);
   const isNested = parentCtx !== null;
-  const [rootEl, setRootEl] = (0, import_react35.useState)(null);
-  const portalRef = (0, import_react35.useRef)(null);
-  const [portalEl, setPortalEl] = (0, import_react35.useState)(null);
+  const [rootEl, setRootEl] = (0, import_react37.useState)(null);
+  const portalRef = (0, import_react37.useRef)(null);
+  const [portalEl, setPortalEl] = (0, import_react37.useState)(null);
   const resolvedLocale = locale ?? (dir === "rtl" ? "ar" : "en");
-  const themeVars = (0, import_react35.useMemo)(() => theme ? (0, import_tokens.buildTheme)(theme) : null, [theme]);
-  (0, import_react35.useEffect)(() => {
+  const themeVars = (0, import_react37.useMemo)(() => theme ? (0, import_tokens.buildTheme)(theme) : null, [theme]);
+  (0, import_react37.useEffect)(() => {
     if (typeof document === "undefined") return;
     const el = document.createElement("div");
     el.setAttribute("data-slot", "dga-portal");
@@ -6707,7 +7072,7 @@ function DgaProvider({
       setPortalEl(null);
     };
   }, []);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const el = portalRef.current;
     if (!el) return;
     el.setAttribute("data-theme", mode);
@@ -6719,12 +7084,12 @@ function DgaProvider({
       }
     }
   }, [mode, dir, themeVars, portalEl]);
-  const ctxValue = (0, import_react35.useMemo)(
+  const ctxValue = (0, import_react37.useMemo)(
     () => ({ dir, locale: resolvedLocale, mode, rootEl, portalEl }),
     [dir, resolvedLocale, mode, rootEl, portalEl]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_radix_ui34.Direction.Provider, { dir, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_radix_ui35.Direction.Provider, { dir, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DgaContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     Component,
     {
       ref: setRootEl,
@@ -6734,7 +7099,7 @@ function DgaProvider({
       "data-theme": mode,
       className,
       style: { colorScheme: mode, ...themeVars ?? {}, ...consumerStyle },
-      children: isNested ? inner : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_radix_ui34.Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
+      children: isNested ? inner : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_radix_ui35.Tooltip.Provider, { delayDuration: 300, skipDelayDuration: 100, children: inner })
     }
   ) });
 }
@@ -6747,6 +7112,7 @@ function DgaProvider({
   Alert,
   AlertDescription,
   AlertTitle,
+  AspectRatio,
   Avatar,
   AvatarFallback,
   AvatarGroup,
@@ -6785,6 +7151,7 @@ function DgaProvider({
   CommandList,
   CommandSeparator,
   DatePicker,
+  DateRangePicker,
   DescriptionDetails,
   DescriptionItem,
   DescriptionList,
@@ -6957,6 +7324,8 @@ function DgaProvider({
   createToast,
   createToastStore,
   datePickerVariants,
+  dateRangePickerTriggerVariants,
+  dateRangePickerVariants,
   descriptionListVariants,
   dividerVariants,
   drawerVariants,