@ostack.tech/ui 0.10.4 → 0.11.0

package/dist/ostack-ui.js

@@ -1,29 +1,29 @@
 import * as React from "react";
-import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo, Fragment as Fragment$1, isValidElement, cloneElement, Children, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$2, useDeferredValue, useSyncExternalStore } from "react";
-import { tinykeys, parseKeybinding } from "tinykeys";
+import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo, Fragment as Fragment$1, isValidElement, cloneElement, Children, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$2, useSyncExternalStore, useDeferredValue } from "react";
+import { parseKeybinding, tinykeys } from "tinykeys";
 import fromExponential from "from-exponential";
-import { isValid, isDate, addMonths, isAfter, isBefore, startOfMonth, setMonth, getYear, setYear, startOfYear, format, isSameYear, getMonth, max, min, lastDayOfMonth, parseISO, parse, isWithinInterval, isEqual } from "date-fns";
+import { isValid, isDate, addMonths, isAfter, isBefore, startOfMonth, setMonth, getYear, setYear, startOfYear, format, isSameYear, getMonth, max, min, isSameDay, lastDayOfMonth, isEqual, parseISO, parse, isWithinInterval } from "date-fns";
 import { createStore, useStore as useStore$1, create } from "zustand";
 import { shallow } from "zustand/shallow";
-import { removeNumericFormat, numericFormatter, NumericFormat } from "react-number-format";
+import { numericFormatter, removeNumericFormat, NumericFormat } from "react-number-format";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { faArrowRight, faArrowLeft, faArrowDown, faArrowUp, faClose, faTriangleExclamation, faCircleExclamation, faCircleCheck, faCircleInfo, faChevronUp, faChevronDown, faRedo, faCircleQuestion, faSortDown, faSortUp, faAsterisk, faMinus, faCheck, faFilter, faSearch, faChevronLeft, faChevronRight, faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
-import { ErrorBoundary as ErrorBoundary$1 } from "react-error-boundary";
-import { useErrorBoundary } from "react-error-boundary";
+import { faArrowRight, faArrowLeft, faArrowDown, faArrowUp, faClose, faTriangleExclamation, faCircleExclamation, faCircleCheck, faCircleInfo, faChevronRight, faChevronDown, faChevronLeft, faChevronUp, faRedo, faCircleQuestion, faSortDown, faSortUp, faAsterisk, faMinus, faCheck, faSearch, faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { AlertDialog as AlertDialog$1, Dialog as Dialog$1, Slot as Slot$1, Portal as Portal$1, Tooltip as Tooltip$1, Toast as Toast$1, Collapsible as Collapsible$1, Popover as Popover$1, Label as Label$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, RadioGroup as RadioGroup$1, Separator as Separator$2, Tabs as Tabs$1 } from "radix-ui";
 import { subscribeWithSelector } from "zustand/middleware";
-import { I as IS_APPLE } from "./chunks/platformUtils-C3IHCr90.js";
+import { ErrorBoundary as ErrorBoundary$1 } from "react-error-boundary";
+import { useErrorBoundary } from "react-error-boundary";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { locale } from "./locales/en-GB.js";
-import { locale as locale2 } from "./locales/en-US.js";
-import { locale as locale3, locale as locale4 } from "./locales/fr-FR.js";
-import { locale as locale5, locale as locale6 } from "./locales/pt-PT.js";
+import { I as IS_APPLE } from "./chunks/platformUtils-C3IHCr90.js";
 import { useDayPicker, DayPicker } from "react-day-picker";
 import { useShallow } from "zustand/react/shallow";
 import { useVirtualizer, observeElementRect } from "@tanstack/react-virtual";
 import { faCalendar } from "@fortawesome/free-regular-svg-icons";
 import { flushSync } from "react-dom";
 import { useReactToPrint } from "react-to-print";
+import { locale } from "./locales/en-GB.js";
+import { locale as locale2 } from "./locales/en-US.js";
+import { locale as locale3, locale as locale4 } from "./locales/fr-FR.js";
+import { locale as locale5, locale as locale6 } from "./locales/pt-PT.js";
 const AlertDialog = AlertDialog$1.Root;
 const AlertDialogAction = forwardRef(function AlertDialogAction2(props, forwardedRef) {
   return /* @__PURE__ */ jsx(AlertDialog$1.Action, { ...props, asChild: true, ref: forwardedRef });
@@ -460,16 +460,37 @@ function useCreateDataTableContext({
           (offset2, totalCount = offset2) => Math.min(Math.max(offset2, 0), Math.max(totalCount - 1, 0))
         ),
         currentPage: computed(
-          () => [get().offset(), get().limit],
+          () => [get().offset(), get().limit()],
           (offset2, limit2) => Math.floor(offset2 / limit2)
         ),
         pageOffset: computed(
-          () => [get().currentPage(), get().limit],
+          () => [get().currentPage(), get().limit()],
           (currentPage, limit2) => currentPage * limit2
         ),
-        limit: limit ?? defaultLimit,
+        limitOptions: void 0,
+        _limit: limit ?? defaultLimit,
+        limit: computed(
+          () => [get()._limit, get().limitOptions],
+          (limit2, limitOptions) => {
+            if (!limitOptions || limitOptions.length === 0) {
+              return Math.max(limit2, 1);
+            }
+            let curLimit = limitOptions[0];
+            let curDelta = Math.abs(limit2 - curLimit);
+            for (let i = 1; i < limitOptions.length; ++i) {
+              const nextLimit = limitOptions[i];
+              const nextDelta = Math.abs(limit2 - nextLimit);
+              if (nextDelta > curDelta) {
+                break;
+              }
+              curLimit = nextLimit;
+              curDelta = nextDelta;
+            }
+            return curLimit;
+          }
+        ),
         pageLimit: computed(
-          () => [get().pageOffset(), get().limit, get().totalCount()],
+          () => [get().pageOffset(), get().limit(), get().totalCount()],
           (pageOffset, limit2, totalCount) => totalCount == null ? void 0 : Math.min(totalCount - pageOffset, limit2)
         ),
         filter: filter ?? defaultFilter2,
@@ -532,7 +553,7 @@ function useCreateDataTableContext({
             latest.onOffsetChange?.(offset2);
           },
           setLimit: (limit2) => {
-            set({ updateCounter: get().updateCounter + 1, limit: limit2 });
+            set({ updateCounter: get().updateCounter + 1, _limit: limit2 });
             latest.onLimitChange?.(limit2);
           },
           setFilter: (filter2) => {
@@ -724,7 +745,7 @@ function useCreateDataTableContext({
     }
   }, [offset, store]);
   useEffect(() => {
-    if (limit !== void 0 && limit !== store.getState().limit) {
+    if (limit !== void 0 && limit !== store.getState()._limit) {
       store.getState().actions.setLimit(limit);
     }
   }, [limit, store]);
@@ -1740,6 +1761,7 @@ const IconButton = forwardRef(function IconButton2({
   onClick,
   className,
   children,
+  "aria-disabled": ariaDisabled,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
@@ -1764,15 +1786,16 @@ const IconButton = forwardRef(function IconButton2({
   if (asChild) {
     content = cloneElement(children, void 0, content);
   }
+  const isAriaDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const handleClick = useCallback(
     (evt) => {
-      if (disabled || loading) {
+      if (disabled || isAriaDisabled) {
         evt.preventDefault();
         return;
       }
       onClick?.(evt);
     },
-    [disabled, loading, onClick]
+    [disabled, isAriaDisabled, onClick]
   );
   const isButton = as === "button" && !asChild;
   const As = asChild ? Slot : as;
@@ -1790,8 +1813,8 @@ const IconButton = forwardRef(function IconButton2({
       onClick: handleClick,
       "data-accent": color,
       disabled,
-      "data-disabled": boolDataAttr(loading || !isButton && disabled),
-      "aria-disabled": loading || !isButton && disabled || void 0,
+      "data-disabled": boolDataAttr(isAriaDisabled || !isButton && disabled),
+      "aria-disabled": isAriaDisabled || !isButton && disabled || void 0,
       "data-active": boolDataAttr(active),
       "aria-keyshortcuts": keybindsToAriaKeyShortcuts(keybinds),
       tabIndex: !isButton && disabled ? -1 : void 0,
@@ -2040,6 +2063,7 @@ const Button = forwardRef(function Button2({
   onClick,
   className,
   children,
+  "aria-disabled": ariaDisabled,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
@@ -2051,7 +2075,7 @@ const Button = forwardRef(function Button2({
         prefix(`button__icon--${iconPlacement}`),
         iconProps?.className
       ),
-      children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, ...iconProps })
+      children: isValidElement(icon) ? icon : /* @__PURE__ */ jsx(Icon, { icon, widthAuto: true, ...iconProps })
     }
   );
   const spinnerEl = showSpinner && /* @__PURE__ */ jsx(
@@ -2066,15 +2090,16 @@ const Button = forwardRef(function Button2({
     }
   );
   const content = loading && loadingContent ? asChild ? cloneElement(children, void 0, loadingContent) : loadingContent : children;
+  const isAriaDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const handleClick = useCallback(
     (evt) => {
-      if (disabled || loading) {
+      if (disabled || isAriaDisabled) {
         evt.preventDefault();
         return;
       }
       onClick?.(evt);
     },
-    [disabled, loading, onClick]
+    [disabled, isAriaDisabled, onClick]
   );
   const isButton = as === "button" && !asChild;
   const As = asChild ? Slot : as;
@@ -2092,8 +2117,8 @@ const Button = forwardRef(function Button2({
       onClick: handleClick,
       "data-accent": color,
       disabled,
-      "data-disabled": boolDataAttr(loading || !isButton && disabled),
-      "aria-disabled": loading || !isButton && disabled || void 0,
+      "data-disabled": boolDataAttr(isAriaDisabled || !isButton && disabled),
+      "aria-disabled": isAriaDisabled || !isButton && disabled || void 0,
       "data-active": boolDataAttr(active),
       "aria-keyshortcuts": keybindsToAriaKeyShortcuts(keybinds),
       tabIndex: !isButton && disabled ? -1 : void 0,
@@ -2490,7 +2515,6 @@ const SEVERITY_ICON$1 = {
   warning: faTriangleExclamation
 };
 const Toast = forwardRef(function Toast2({
-  type,
   duration,
   defaultOpen,
   open: controlledOpen,
@@ -2499,13 +2523,17 @@ const Toast = forwardRef(function Toast2({
   onPause,
   onResume,
   onSwipeStart,
+  onSwipeMove,
   onSwipeEnd,
+  onSwipeCancel,
   forceMount,
   variant = "solid",
   severity = "info",
+  announce = "assertive",
   icon = SEVERITY_ICON$1[severity],
   action,
   actionAltText,
+  dismissible = true,
   showCloseButton = action == null || typeof action === "boolean",
   visuallyHidden,
   rootProps,
@@ -2522,19 +2550,35 @@ const Toast = forwardRef(function Toast2({
   const [open, setOpen] = useControllableState(defaultOpen, controlledOpen);
   const [collapsibleOpen, setCollapsibleOpen] = useState(open);
   useEffect(() => setCollapsibleOpen(open), [open]);
+  const preventIfUndismissible = useCallback(
+    (evt) => {
+      if (!dismissible) {
+        evt.preventDefault();
+      }
+    },
+    [dismissible]
+  );
   const accent = severity === "info" ? "primary" : severity;
   const toast = /* @__PURE__ */ jsx(
     Toast$1.Root,
     {
-      type,
+      type: announce === "polite" ? "background" : "foreground",
       duration,
       open,
       onOpenChange: combineEventHandlers(onOpenChange, setOpen),
-      onEscapeKeyDown,
+      onEscapeKeyDown: combineEventHandlers(
+        preventIfUndismissible,
+        onEscapeKeyDown
+      ),
       onPause,
       onResume,
-      onSwipeStart,
-      onSwipeEnd,
+      onSwipeStart: combineEventHandlers(preventIfUndismissible, onSwipeStart),
+      onSwipeMove: combineEventHandlers(preventIfUndismissible, onSwipeMove),
+      onSwipeEnd: combineEventHandlers(preventIfUndismissible, onSwipeEnd),
+      onSwipeCancel: combineEventHandlers(
+        preventIfUndismissible,
+        onSwipeCancel
+      ),
       forceMount,
       ...rootProps,
       className: cx(prefix("toast__root"), rootProps?.className),
@@ -2580,7 +2624,7 @@ const Toast = forwardRef(function Toast2({
                         children
                       }
                     ),
-                    (action || showCloseButton) && /* @__PURE__ */ jsxs(
+                    (action || dismissible && showCloseButton) && /* @__PURE__ */ jsxs(
                       "div",
                       {
                         ...actionContainerProps,
@@ -2590,7 +2634,7 @@ const Toast = forwardRef(function Toast2({
                         ),
                         children: [
                           action && /* @__PURE__ */ jsx(Toast$1.Action, { altText: actionAltText, asChild: true, children: action }),
-                          showCloseButton && /* @__PURE__ */ jsx(Toast$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+                          dismissible && showCloseButton && /* @__PURE__ */ jsx(Toast$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(
                             CloseButton,
                             {
                               color: variant === "solid" ? "neutral" : accent,
@@ -2663,17 +2707,19 @@ function ToastManagerProvider({ children }) {
     []
   );
   const removeToast = useCallback((toastId2) => {
-    setToasts(
-      (toasts2) => Object.entries(toasts2).reduce(
+    if (toastId2 == null) {
+      return;
+    }
+    setToasts((toasts2) => {
+      return toastId2 in toasts2 && toasts2[toastId2].open ? Object.entries(toasts2).reduce(
         (res, [id, toast]) => {
           const numId = +id;
           res[numId] = numId === toastId2 ? { ...toast, open: false } : toast;
           return res;
         },
         {}
-      )
-    );
-    setTimeout(() => setToasts(({ [toastId2]: _, ...toasts2 }) => toasts2), 250);
+      ) : toasts2;
+    });
   }, []);
   const handleAnimationEnd = useCallback(
     (toastId2) => {
@@ -2753,7 +2799,7 @@ const Collapsible = forwardRef(function Collapsible2({
   defaultOpen,
   open: controlledOpen,
   onOpenChange,
-  direction = "vertical",
+  orientation = "vertical",
   className,
   ...otherProps
 }, forwardedRef) {
@@ -2762,7 +2808,7 @@ const Collapsible = forwardRef(function Collapsible2({
     defaultOpen ?? false,
     controlledOpen
   );
-  return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: { open, direction }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: { open, orientation }, children: /* @__PURE__ */ jsx(
     Collapsible$1.Root,
     {
       open,
@@ -2775,30 +2821,53 @@ const Collapsible = forwardRef(function Collapsible2({
 });
 const CollapsibleContent = forwardRef(function CollapsibleContent2({ className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
-  const { direction } = useCollapsibleContext();
+  const { orientation } = useCollapsibleContext();
   return /* @__PURE__ */ jsx(
     Collapsible$1.Content,
     {
       className: cx(prefix("collapsible__content"), className),
       ...otherProps,
-      "data-direction": direction,
+      "data-orientation": orientation,
       ref: forwardedRef
     }
   );
 });
-const CollapsibleTrigger = forwardRef(function CollapsibleTrigger2({ children, ...props }, forwardedRef) {
+const CollapsibleTrigger = forwardRef(function CollapsibleTrigger2({ children, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
-  const { open } = useCollapsibleContext();
-  children ??= /* @__PURE__ */ jsx(
+  const [locale7] = useLocale();
+  const { open, orientation } = useCollapsibleContext();
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsx(
+      Collapsible$1.Trigger,
+      {
+        ...otherProps,
+        asChild: true,
+        ref: forwardedRef,
+        children: typeof children === "function" ? children(open) : children
+      }
+    );
+  }
+  const {
+    icon,
+    expandIcon = icon ?? (orientation === "horizontal" ? faChevronRight : faChevronDown),
+    collapseIcon = icon ?? (orientation === "horizontal" ? faChevronLeft : faChevronUp),
+    label,
+    expandLabel = label ?? locale7.CollapsibleTrigger.expandLabel,
+    collapseLabel = label ?? locale7.CollapsibleTrigger.collapseLabel,
+    className,
+    ...iconButtonProps
+  } = otherProps;
+  return /* @__PURE__ */ jsx(Collapsible$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
     IconButton,
     {
       variant: "ghost",
-      className: prefix("collapsible__trigger"),
-      icon: open ? faChevronUp : faChevronDown,
-      label: null
+      className: cx(prefix("collapsible__trigger"), className),
+      ...iconButtonProps,
+      icon: open ? collapseIcon : expandIcon,
+      label: open ? collapseLabel : expandLabel,
+      ref: forwardedRef
     }
-  );
-  return /* @__PURE__ */ jsx(Collapsible$1.Trigger, { ...props, asChild: true, ref: forwardedRef, children: typeof children === "function" ? children(open) : children });
+  ) });
 });
 const AlertContext = createContext(null);
 function useAlertContext() {
@@ -2842,7 +2911,7 @@ const Alert = forwardRef(function Alert2({
   const [titleId, setTitleId] = useState();
   const accent = severity === "info" ? "primary" : severity;
   const actualRole = role ?? (announce === "assertive" ? "alert" : announce === "polite" ? "status" : void 0);
-  return /* @__PURE__ */ jsx(AlertContext, { value: { setTitleId }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AlertContext.Provider, { value: { setTitleId }, children: /* @__PURE__ */ jsx(
     Collapsible,
     {
       defaultOpen,
@@ -3225,12 +3294,13 @@ const CalendarDay = memo(function CalendarDay2({
   const prefix = usePrefix();
   const {
     classNames,
-    dayPickerProps: { onDayClick }
+    dayPickerProps: { disableNavigation, onDayClick }
   } = useDayPicker();
-  const isInteractive = onDayClick !== void 0;
+  const isInteractive = children && onDayClick !== void 0;
+  const renderButton = isInteractive && (!disableNavigation || !modifiers.outside);
   const dayText = isInteractive ? children.props.children : children;
   const dayContent = /* @__PURE__ */ jsx("span", { className: prefix("calendar__day-content"), children: dayText });
-  return /* @__PURE__ */ jsx("td", { ...otherProps, children: !modifiers.hidden && (isInteractive ? cloneElement(children, {
+  return /* @__PURE__ */ jsx("td", { ...otherProps, children: !modifiers.hidden && (renderButton ? cloneElement(children, {
     children: dayContent
   }) : /* @__PURE__ */ jsx("span", { className: classNames.day_button, children: dayContent })) });
 });
@@ -3270,7 +3340,7 @@ const ControlAddon = forwardRef(
         "data-variant": controlContext?.variant ?? variant,
         "data-status": controlContext?.status ?? status,
         "data-muted": boolDataAttr(
-          controlContext?.disabled || controlContext?.loading || muted
+          controlContext?.disabled || controlContext?.softDisabled || muted
         ),
         "data-readonly": boolDataAttr(controlContext?.readOnly || readOnly),
         ref: forwardedRef,
@@ -3989,8 +4059,14 @@ const TableFoot = forwardRef(
 );
 const Popover = Popover$1.Root;
 const PopoverAnchor = Popover$1.Anchor;
-const PopoverClose = forwardRef(function PopoverClose2(props, forwardedRef) {
-  return /* @__PURE__ */ jsx(Popover$1.Close, { ...props, asChild: true, ref: forwardedRef });
+const PopoverClose = forwardRef(function PopoverClose2({ children, ...otherProps }, forwardedRef) {
+  return children === void 0 ? /* @__PURE__ */ jsx(Popover$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+    CloseButton,
+    {
+      ...otherProps,
+      ref: forwardedRef
+    }
+  ) }) : /* @__PURE__ */ jsx(Popover$1.Close, { ...otherProps, asChild: true, ref: forwardedRef, children });
 });
 const PopoverContent = forwardRef(function PopoverContent2({
   showArrow = true,
@@ -4071,6 +4147,7 @@ const Stack = forwardRef(function Stack2({
   const stackContext = useContext(StackContext);
   const childMarginMapper = (gapVar) => (d) => d === "column" ? `${cssVar(`stack-${gapVar}`)} 0 0 0` : d === "column-reverse" ? `0 0 ${cssVar(`stack-${gapVar}`)} 0` : d === "row" ? `0 0 0 ${cssVar(`stack-${gapVar}`)}` : `0 ${cssVar(`stack-${gapVar}`)} 0 0`;
   const gapMapper = (v) => typeof v === "number" ? spacing(v) : v;
+  const wrapMapper = (v) => v === "reverse" ? "wrap-reverse" : v ? "wrap" : "nowrap";
   const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
     "stack",
     {
@@ -4088,7 +4165,8 @@ const Stack = forwardRef(function Stack2({
       ancestorGap: gapMapper,
       ancestorChildMargin: childMarginMapper("ancestor-gap"),
       gap: gapMapper,
-      childMargin: childMarginMapper("gap")
+      childMargin: childMarginMapper("gap"),
+      wrap: wrapMapper
     }
   );
   const As = asChild ? Slot : "div";
@@ -4471,6 +4549,8 @@ function rightMostColumns(columns) {
   const lastColumn = columns[columns.length - 1];
   return [lastColumn, ...rightMostColumns(lastColumn.children)];
 }
+const DEFAULT_OFFSET = 0;
+const DEFAULT_LIMIT = 10;
 const DataTable = forwardRef(
   function DataTableRoot({
     displayMode = "paged",
@@ -4481,10 +4561,10 @@ const DataTable = forwardRef(
     loadingCount = 2,
     required,
     loading = false,
-    defaultOffset = 0,
+    defaultOffset = DEFAULT_OFFSET,
     offset,
     onOffsetChange,
-    defaultLimit = 10,
+    defaultLimit = DEFAULT_LIMIT,
     limit,
     onLimitChange,
     defaultFilter: defaultFilter2 = "",
@@ -4516,6 +4596,14 @@ const DataTable = forwardRef(
     const printing = usePrinting();
     const leaves = useMemo(() => leafColumns(columns), [columns]);
     const headCount = useMemo(() => numberOfRows(columns), [columns]);
+    defaultOffset = sanitizeNumeric(defaultOffset) ?? DEFAULT_OFFSET;
+    offset = sanitizeNumeric(offset);
+    defaultLimit = sanitizeNumeric(defaultLimit) ?? DEFAULT_LIMIT;
+    limit = sanitizeNumeric(limit);
+    defaultSortBy = sanitizeSortBy(defaultSortBy, leaves) ?? null;
+    sortBy = sanitizeSortBy(sortBy, leaves);
+    defaultSortDirection = sanitizeSortDirection(defaultSortDirection);
+    sortDirection = sanitizeSortDirection(sortDirection);
     const dataTableContextValue = useCreateDataTableContext({
       displayMode: printing ? "paged" : displayMode,
       columns,
@@ -4585,6 +4673,18 @@ function numberOfRows(columns) {
     0
   );
 }
+function sanitizeNumeric(value) {
+  if (typeof value === "string") {
+    value = +value;
+  }
+  return value === void 0 || Number.isNaN(value) ? void 0 : Math.trunc(value);
+}
+function sanitizeSortBy(sortBy, leaves) {
+  return sortBy == null || sortBy in leaves ? sortBy : null;
+}
+function sanitizeSortDirection(sortDirection) {
+  return sortDirection === void 0 || sortDirection === "asc" || sortDirection === "desc" ? sortDirection : void 0;
+}
 function useDataTableApiRef() {
   return useRef(null);
 }
@@ -4922,6 +5022,7 @@ const Checkbox = forwardRef(function Checkbox2({
   required,
   disabled,
   readOnly,
+  "aria-disabled": ariaDisabled,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
@@ -4953,7 +5054,6 @@ const Checkbox = forwardRef(function Checkbox2({
   const checkboxVariant = variant ?? (isInTableCell ? "cell" : "default");
   status = controlContext?.status ?? status;
   disabled = controlContext?.disabled || disabled;
-  loading = controlContext?.loading || loading;
   readOnly = controlContext?.readOnly || readOnly;
   const requiredInGroup = useIsRequiredInGroup();
   const groupDescriptionIds = useCheckboxGroupDescriptionIds(controlId);
@@ -4964,15 +5064,16 @@ const Checkbox = forwardRef(function Checkbox2({
     defaultChecked ?? false,
     checkedInGroup ?? controlledChecked
   );
+  const softDisabled = controlContext?.softDisabled || loading || ariaDisabled === "true" || ariaDisabled === true;
   const handleCheckedChange = useCallback(
     (state) => {
-      if (!loading && !readOnly) {
+      if (!softDisabled && !readOnly) {
         onCheckedChange?.(state);
         setChecked(state);
         setCheckedInGroup?.(state === true);
       }
     },
-    [loading, onCheckedChange, readOnly, setChecked, setCheckedInGroup]
+    [softDisabled, onCheckedChange, readOnly, setChecked, setCheckedInGroup]
   );
   const setFieldControlFocused = useSetFieldControlFocused();
   const handleFocus = useCallback(() => {
@@ -5017,7 +5118,7 @@ const Checkbox = forwardRef(function Checkbox2({
         ),
         status,
         disabled,
-        loading,
+        softDisabled,
         readOnly
       },
       children: [
@@ -5044,7 +5145,7 @@ const Checkbox = forwardRef(function Checkbox2({
                 {
                   "data-status": status,
                   "data-variant": checkboxVariant,
-                  "data-disabled": boolDataAttr(disabled || loading),
+                  "data-disabled": boolDataAttr(disabled || softDisabled),
                   "data-readonly": boolDataAttr(readOnly),
                   ...containerProps,
                   className: cx(
@@ -5067,14 +5168,14 @@ const Checkbox = forwardRef(function Checkbox2({
                         checked,
                         required: requiredInGroup || required || void 0,
                         disabled,
-                        "data-loading": boolDataAttr(loading),
+                        "data-disabled": boolDataAttr(softDisabled),
                         "data-readonly": boolDataAttr(readOnly),
                         "data-status": status,
                         "data-variant": checkboxVariant,
                         onCheckedChange: handleCheckedChange,
                         onFocus: combineEventHandlers(onFocus, handleFocus),
                         onBlur: combineEventHandlers(onBlur, handleBlur),
-                        "aria-disabled": loading || readOnly || void 0,
+                        "aria-disabled": softDisabled || readOnly || void 0,
                         "aria-label": ariaLabel,
                         "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 && combinedLabelIds !== labelId && combinedLabelIds !== fieldLabelId ? combinedLabelIds : void 0),
                         "aria-invalid": status === "invalid" || void 0,
@@ -5130,7 +5231,7 @@ const Checkbox = forwardRef(function Checkbox2({
                       Spinner,
                       {
                         color: controlStatusToAccent(status, "neutral"),
-                        "data-disabled": boolDataAttr(disabled || loading),
+                        "data-disabled": boolDataAttr(disabled || softDisabled),
                         ...spinnerProps,
                         className: cx(
                           prefix("checkbox__spinner"),
@@ -5187,14 +5288,12 @@ function useDataTableSelectionColumn() {
           return "loading";
         }
         const key = getRowKey(row, rowKey);
-        if (!disabledSelections?.has(key)) {
-          ++enabledCount;
-          selectedCount += +selectedRows2.has(key);
-        }
+        enabledCount += +!disabledSelections?.has(key);
+        selectedCount += +selectedRows2.has(key);
       }
       return {
         allChecked: selectedCount === window2.length ? true : selectedCount === 0 ? false : "indeterminate",
-        allEnabledChecked: selectedCount === enabledCount
+        allEnabledChecked: selectedCount >= enabledCount
       };
     })
   );
@@ -5258,10 +5357,10 @@ function selectionWindow(displayMode, state) {
   if (displayMode === "paged") {
     return state.rowsWindow(
       state.pageOffset(),
-      state.pageLimit() ?? state.limit
+      state.pageLimit() ?? state.limit()
     );
   } else {
-    const totalCount = state.totalCount() ?? state.limit;
+    const totalCount = state.totalCount() ?? state.limit();
     const start = Math.min(state.scrolledRangeStart, totalCount - 1);
     const end = Math.min(state.scrolledRangeEnd, totalCount - 1);
     return state.rowsWindow(start, end - start + 1);
@@ -5421,7 +5520,7 @@ function PagedDataTableRows() {
   const splice = useCallback(
     (startIndex, deleted = 0, added = 0) => {
       const { pageOffset: pageOffset2, limit, actions } = store.getState();
-      actions.spliceWindow(pageOffset2(), limit, startIndex, deleted, added);
+      actions.spliceWindow(pageOffset2(), limit(), startIndex, deleted, added);
     },
     [store]
   );
@@ -5443,7 +5542,7 @@ function PagedDataTableRows() {
       (state) => state.updateCounter,
       () => {
         const { pageOffset: pageOffset2, pageLimit, limit, actions } = store.getState();
-        actions.updateWindow(pageOffset2(), pageLimit() ?? limit);
+        actions.updateWindow(pageOffset2(), pageLimit() ?? limit());
       },
       { fireImmediately: true }
     ),
@@ -5513,7 +5612,7 @@ function ScrolledDataTableRows({
       const { offset, limit, totalCount, actions } = store.getState();
       if (totalCount() == null) {
         const from = Math.max(0, offset() - overscan);
-        const to = offset() + limit + overscan;
+        const to = offset() + limit() + overscan;
         actions.updateWindow(from, to - from + 1);
       } else {
         actions.updateWindow(virtualItems2[0]?.index ?? 0, virtualItems2.length);
@@ -5532,7 +5631,7 @@ function ScrolledDataTableRows({
     (startIndex2, deleted = 0, added = 0) => {
       const { limit, actions } = store.getState();
       const windowOffset = virtualizer.getVirtualItems()[0]?.index ?? 0;
-      const windowLimit = limit + Math.min(windowOffset, overscan) + overscan;
+      const windowLimit = limit() + Math.min(windowOffset, overscan) + overscan;
       actions.spliceWindow(
         windowOffset,
         windowLimit,
@@ -5554,7 +5653,7 @@ function ScrolledDataTableRows({
     (index, options) => {
       const state = store.getState();
       const totalCount = state.totalCount();
-      if (totalCount != null && totalCount > state.limit) {
+      if (totalCount != null && totalCount > state.limit()) {
         if (index < totalCount - 1) {
           virtualizer.scrollToIndex(index, options);
         } else {
@@ -5790,7 +5889,7 @@ const DataTableContent = forwardRef(function DataTable2({
   const rowHeight = typeof estimatedRowHeight === "number" ? estimatedRowHeight : estimatedRowHeight(0);
   const maxHeight = useStore$1(
     store,
-    (state) => displayMode === "scrolled" && !state.loading && (state.totalCount() ?? 0) > state.limit ? (state.tableHeadHeight ?? rowHeight) + (state.tableFootHeight ?? 0) + rowHeight * state.limit + // TODO: Only add this if the container overflows horizontally
+    (state) => displayMode === "scrolled" && !state.loading && (state.totalCount() ?? 0) > state.limit() ? (state.tableHeadHeight ?? rowHeight) + (state.tableFootHeight ?? 0) + rowHeight * state.limit() + // TODO: Only add this if the container overflows horizontally
     scrollbarHeight : void 0
   );
   const stickyHeadFoot = maxHeight !== void 0;
@@ -5852,7 +5951,7 @@ const DataTableContent = forwardRef(function DataTable2({
 });
 const DataTableFilter = forwardRef(function DataTableFilter2({
   preferRightAlignment = true,
-  endAdornment = /* @__PURE__ */ jsx(ControlAddon, { children: /* @__PURE__ */ jsx(Icon, { icon: faFilter }) }),
+  endAdornment = /* @__PURE__ */ jsx(ControlAddon, { children: /* @__PURE__ */ jsx(Icon, { icon: faSearch }) }),
   placeholder,
   ["aria-label"]: ariaLabel,
   onValueChange,
@@ -5872,8 +5971,8 @@ const DataTableFilter = forwardRef(function DataTableFilter2({
   return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(
     Input$1,
     {
+      type: "search",
       placeholder,
-      showClearButton: "auto",
       endAdornment,
       className: cx(prefix("data-table__filter"), className),
       value: filter,
@@ -5908,8 +6007,9 @@ const PagedDataTablePagination = forwardRef(function PagedDataTablePagination2({
   const [locale7] = useLocale();
   ariaLabel ??= locale7.DataTablePagination["aria-label"];
   const { store } = useDataTableContext();
+  const loading = useStore$1(store, (state) => state.loading);
   const totalCount = useStore$1(store, (state) => state.totalCount());
-  const limit = useStore$1(store, (state) => state.limit);
+  const limit = useStore$1(store, (state) => state.limit());
   const { setOffset } = useStore$1(store, (state) => state.actions);
   const setOffsetWithTransition = (offset) => startTransition(() => setOffset(offset));
   const currentPage = useStore$1(store, (state) => state.currentPage());
@@ -5926,8 +6026,8 @@ const PagedDataTablePagination = forwardRef(function PagedDataTablePagination2({
       ref: forwardedRef,
       children: [
         /* @__PURE__ */ jsxs("label", { className: prefix("data-table__pagination-label"), children: [
-          totalCount == null && /* @__PURE__ */ jsx(Spinner, { className: prefix("data-table__pagination-spinner") }),
-          totalCount != null && rowsRange?.(
+          (loading || totalCount == null) && /* @__PURE__ */ jsx(Spinner, { className: prefix("data-table__pagination-spinner") }),
+          !loading && totalCount != null && rowsRange?.(
             /* @__PURE__ */ jsxs(
               Select,
               {
@@ -5960,7 +6060,7 @@ const PagedDataTablePagination = forwardRef(function PagedDataTablePagination2({
               icon: faArrowLeft,
               label: previousPageButtonLabel ?? "",
               ...previousPageButtonProps,
-              disabled: currentPage === 0 || previousPageButtonProps?.disabled,
+              disabled: loading || currentPage === 0 || previousPageButtonProps?.disabled,
               onClick: combineEventHandlers(
                 (() => setOffsetWithTransition((currentPage - 1) * limit)),
                 previousPageButtonProps?.onClick
@@ -5974,7 +6074,7 @@ const PagedDataTablePagination = forwardRef(function PagedDataTablePagination2({
               icon: faArrowRight,
               label: nextPageButtonLabel ?? "",
               ...nextPageButtonProps,
-              disabled: currentPage === lastPage || nextPageButtonProps?.disabled,
+              disabled: loading || currentPage === lastPage || nextPageButtonProps?.disabled,
               onClick: combineEventHandlers(
                 (() => setOffsetWithTransition((currentPage + 1) * limit)),
                 nextPageButtonProps?.onClick
@@ -6055,9 +6155,9 @@ const DataTablePagination = forwardRef(function DataTablePagination2({
     }
   );
 });
-const DEFAULT_ROWS_PER_PAGE_OPTIONS = [10, 15, 25, 50];
+const DEFAULT_LIMIT_OPTIONS = [10, 15, 25, 50];
 const DataTableRowsPerPage = forwardRef(function DataTableRowsPerPage2({
-  limitOptions = DEFAULT_ROWS_PER_PAGE_OPTIONS,
+  limitOptions = DEFAULT_LIMIT_OPTIONS,
   label,
   preferRightAlignment,
   className,
@@ -6067,10 +6167,15 @@ const DataTableRowsPerPage = forwardRef(function DataTableRowsPerPage2({
   const [locale7] = useLocale();
   label ??= locale7.DataTableRowsPerPage.label;
   const { store } = useDataTableContext();
-  const limit = useStore$1(store, (state) => state.limit);
+  const limit = useStore$1(store, (state) => state.limit());
   const { setLimit } = useStore$1(store, (state) => state.actions);
-  const optionsIncludingLimit = limitOptions.includes(limit) ? [...limitOptions] : [...limitOptions, limit];
-  optionsIncludingLimit.sort((v1, v2) => v1 - v2);
+  const normalizedLimitOptions = useMemo(() => {
+    return limitOptions === DEFAULT_LIMIT_OPTIONS ? limitOptions : Array.from(new Set(limitOptions.map(Math.trunc))).sort((a, b) => a - b).filter((limit2) => limit2 >= 1);
+  }, [limitOptions]);
+  useEffect(() => {
+    store.setState({ limitOptions: normalizedLimitOptions });
+    return () => store.setState({ limitOptions: void 0 });
+  }, [normalizedLimitOptions, store]);
   return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(FieldProvider, { children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6090,7 +6195,7 @@ const DataTableRowsPerPage = forwardRef(function DataTableRowsPerPage2({
             rootProps: {
               className: prefix("data-table__rows-per-page-select-root")
             },
-            children: optionsIncludingLimit.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
+            children: normalizedLimitOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
           }
         )
       ]
@@ -6107,7 +6212,10 @@ const DataTableSelectionTrigger = forwardRef(function DataTableSelectionTrigger2
 }, forwardedRef) {
   const prefix = usePrefix();
   const { store } = useDataTableContext();
-  const hasSelected = useStore$1(store, (state) => state.selectedRows.length > 0);
+  const hasSelected = useStore$1(
+    store,
+    (state) => state.selectedRows[0].size > 0
+  );
   const handleClick = useCallback(
     (event) => {
       onClick(Array.from(store.getState().selectedRows[0]).sort(), event);
@@ -6146,7 +6254,7 @@ const Input$1 = forwardRef(
     align,
     startAdornment,
     endAdornment,
-    showClearButton,
+    showClearButton = type === "search" ? "auto" : void 0,
     clearDescription,
     clearButtonLabel,
     onValueChange,
@@ -6166,6 +6274,7 @@ const Input$1 = forwardRef(
     onFocus,
     onBlur,
     onClick,
+    "aria-disabled": ariaDisabled,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
@@ -6197,6 +6306,7 @@ const Input$1 = forwardRef(
     const isInTableCell = useIsInTableCell();
     variant ??= isInTableCell ? "cell" : "default";
     const isControlled = value !== void 0;
+    const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
     const [shouldShowClearButton, setShouldShowClearButton] = useState(
       ((value ?? defaultValue)?.toString() ?? "").length > 0
     );
@@ -6206,14 +6316,18 @@ const Input$1 = forwardRef(
       }
     }, [inputEl, isControlled, showClearButton]);
     const handleChange = useCallback(
-      (event) => {
-        const inputEl2 = event.target;
+      (evt) => {
+        if (softDisabled) {
+          evt.preventDefault();
+          return;
+        }
+        const inputEl2 = evt.target;
         onValueChange?.(inputEl2.value);
         if (showClearButton === "auto" && !isControlled) {
           setShouldShowClearButton(inputEl2.value.length > 0);
         }
       },
-      [isControlled, onValueChange, showClearButton]
+      [softDisabled, isControlled, onValueChange, showClearButton]
     );
     const setFieldControlFocused = useSetFieldControlFocused();
     const handleControlFocus = useCallback(
@@ -6272,7 +6386,7 @@ const Input$1 = forwardRef(
         }
       }
     }, [inputEl]);
-    const hasClearButton = !disabled && !loading && !readOnly && (showClearButton === true || showClearButton === "auto" && (isControlled ? (value?.toString() ?? "")?.length > 0 : shouldShowClearButton));
+    const hasClearButton = !disabled && !softDisabled && !readOnly && (showClearButton === true || showClearButton === "auto" && (isControlled ? (value?.toString() ?? "")?.length > 0 : shouldShowClearButton));
     const clearDescriptionId = hasClearButton && clearDescription && prefix(`control-clear-${generatedId}`);
     const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
       "control",
@@ -6301,7 +6415,7 @@ const Input$1 = forwardRef(
     return /* @__PURE__ */ jsx(ClearContexts, { field: false, children: /* @__PURE__ */ jsxs(
       ControlContext.Provider,
       {
-        value: { variant, status, disabled, loading, readOnly },
+        value: { variant, status, disabled, softDisabled, readOnly },
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -6309,7 +6423,7 @@ const Input$1 = forwardRef(
               "data-status": status,
               "data-accent": controlStatusToAccent(status),
               "data-variant": variant,
-              "data-disabled": boolDataAttr(disabled || loading),
+              "data-disabled": boolDataAttr(disabled || softDisabled),
               "data-readonly": boolDataAttr(readOnly),
               ...rootProps,
               className: cx(prefix("input__root"), rootProps?.className),
@@ -6329,7 +6443,7 @@ const Input$1 = forwardRef(
                     "data-status": status,
                     "data-accent": controlStatusToAccent(status),
                     "data-variant": variant,
-                    "data-disabled": boolDataAttr(disabled || loading),
+                    "data-disabled": boolDataAttr(disabled || softDisabled),
                     "data-readonly": boolDataAttr(readOnly),
                     ...containerProps,
                     className: cx(
@@ -6354,18 +6468,20 @@ const Input$1 = forwardRef(
                           className: cx(prefix("input"), className),
                           required: required && supportsRequired,
                           disabled,
-                          readOnly: (readOnly || loading) && supportsReadOnly,
-                          onChange: combineEventHandlers(onChange, handleChange),
+                          readOnly: (softDisabled || readOnly) && supportsReadOnly,
+                          onChange: combineEventHandlers(handleChange, onChange, {
+                            checkDefaultPrevented: true
+                          }),
                           onFocus: combineEventHandlers(onFocus, handleControlFocus),
                           onBlur: combineEventHandlers(onBlur, handleControlBlur),
                           onClick: combineEventHandlers(onClick, handleClick),
                           style: { ...cssVars, ...style },
                           ...dataAttrs,
-                          "data-loading": boolDataAttr(loading),
+                          "data-disabled": boolDataAttr(softDisabled),
                           "data-status": status,
                           "data-accent": controlStatusToAccent(status),
                           "data-variant": variant,
-                          "aria-disabled": (readOnly || loading) && !supportsReadOnly || void 0,
+                          "aria-disabled": (softDisabled || readOnly) && !supportsReadOnly || void 0,
                           "aria-required": required && !supportsRequired || void 0,
                           "aria-invalid": status === "invalid" || void 0,
                           "aria-label": ariaLabel,
@@ -6413,7 +6529,7 @@ const Input$1 = forwardRef(
                         Spinner,
                         {
                           color: controlStatusToAccent(status, "neutral"),
-                          "data-disabled": boolDataAttr(disabled || loading),
+                          "data-disabled": boolDataAttr(disabled || softDisabled),
                           ...spinnerProps,
                           className: cx(
                             prefix("input__spinner"),
@@ -6552,21 +6668,23 @@ const MenuListItem = forwardRef(
     keybindsProps,
     className,
     children,
+    "aria-disabled": ariaDisabled,
     ...otherProps
   }, forwardedRef) {
     const prefix = usePrefix();
     const menuListContext = useMenuListContext();
     const variant = menuListContext.variant;
     iconPlacement ??= menuListContext.iconPlacement;
+    const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
     const handleSelect = useCallback(
       (evt) => {
-        if (disabled || loading) {
+        if (disabled || softDisabled) {
           evt.preventDefault();
           return;
         }
         onSelect?.(evt);
       },
-      [disabled, loading, onSelect]
+      [disabled, onSelect, softDisabled]
     );
     const iconEl = icon && !showSpinner && /* @__PURE__ */ jsx(
       Slot,
@@ -6596,9 +6714,10 @@ const MenuListItem = forwardRef(
       {
         type: type === "button" ? "button" : void 0,
         disabled: type === "button" ? disabled : void 0,
-        "data-disabled": boolDataAttr(type !== "button" && disabled),
-        "aria-disabled": type !== "button" && disabled || loading || void 0,
-        "data-loading": boolDataAttr(loading),
+        "data-disabled": boolDataAttr(
+          type !== "button" && disabled || softDisabled
+        ),
+        "aria-disabled": type === "button" && softDisabled || type === "link" && (disabled || softDisabled) || void 0,
         "data-selected": boolDataAttr(selected),
         "data-accent": color,
         href,
@@ -6756,7 +6875,7 @@ const GROUP_SELECTOR = `[cmdk-group=""]`;
 const GROUP_ITEMS_SELECTOR = `[cmdk-group-items=""]`;
 const GROUP_HEADING_SELECTOR = `[cmdk-group-heading=""]`;
 const ITEM_SELECTOR = `[cmdk-item=""]`;
-const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
+const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([data-disabled])`;
 const SELECT_EVENT = `cmdk-item-select`;
 const VALUE_ATTR = `data-value`;
 const defaultFilter = (value, search, keywords) => commandScore(value, search, keywords);
@@ -6973,9 +7092,7 @@ const Command = React.forwardRef(
       });
     }
     function selectFirstItem() {
-      const item = getValidItems().find(
-        (item2) => item2.getAttribute("aria-disabled") !== "true"
-      );
+      const item = getValidItems()[0];
       const value2 = item?.getAttribute(VALUE_ATTR);
       store.setState("value", value2 || void 0, {
         id: item?.getAttribute("id")
@@ -7754,23 +7871,26 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
   keybindsProps,
   className,
   children,
+  "aria-disabled": ariaDisabled,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const handleSelect = useCallback(
     (value) => {
-      if (!loading) {
+      if (!softDisabled) {
         onSelect?.(value);
         if (asLink) {
           window.open(href, target, rel?.split(" ").join(","));
         }
       }
     },
-    [asLink, href, loading, onSelect, rel, target]
+    [asLink, href, onSelect, rel, softDisabled, target]
   );
   return /* @__PURE__ */ jsx(
     MenuListItem,
     {
+      asChild: true,
       selected,
       type: asLink ? "link" : "text",
       color,
@@ -7796,15 +7916,16 @@ const CommandMenuItem = forwardRef(function CommandMenuItem2({
       iconProps,
       spinnerProps,
       keybindsProps,
-      asChild: true,
+      "aria-disabled": ariaDisabled,
       children: /* @__PURE__ */ jsx(
         pkg.Item,
         {
+          className: cx(prefix("command-menu__item"), className),
+          onSelect: handleSelect,
+          keywords: typeof children === "string" ? [children, ...keywords ?? []] : keywords,
           disabled,
+          "aria-disabled": disabled || softDisabled,
           ...otherProps,
-          keywords: typeof children === "string" ? [children, ...keywords ?? []] : keywords,
-          onSelect: handleSelect,
-          className: cx(prefix("command-menu__item"), className),
           ref: forwardedRef,
           children
         }
@@ -7826,18 +7947,18 @@ function useCreateSelectContext({
   const store = useConstant(
     () => createStore()(
       subscribeWithSelector((set, get) => ({
-        optionsContent: [/* @__PURE__ */ new Map()],
+        options: [/* @__PURE__ */ new Map()],
         actions: {
-          getOptionState: (value2) => get().optionsContent[0].get(value2),
+          getOptionState: (value2) => get().options[0].get(value2),
           registerOption: (value2, content) => {
-            const [optionsContent] = get().optionsContent;
+            const [optionsContent] = get().options;
             optionsContent.set(value2, content);
-            set({ optionsContent: [optionsContent] });
+            set({ options: [optionsContent] });
           },
           unregisterOption: (value2) => {
-            const [optionsContent] = get().optionsContent;
+            const [optionsContent] = get().options;
             optionsContent.delete(value2);
-            set({ optionsContent: [optionsContent] });
+            set({ options: [optionsContent] });
           }
         }
       }))
@@ -7901,7 +8022,12 @@ const Option = memo(
     );
     useEffect(() => {
       if (registering) {
-        registerOption(textValue, { content: children, color, disabled });
+        registerOption(textValue, {
+          value: textValue,
+          content: children,
+          color,
+          disabled
+        });
         return () => unregisterOption(textValue);
       }
     }, [
@@ -7997,7 +8123,7 @@ const Tag = forwardRef(function Tag2({
       defaultOpen,
       open,
       onOpenChange,
-      direction: "horizontal",
+      orientation: "horizontal",
       asChild: true,
       children: /* @__PURE__ */ jsx(
         CollapsibleContent,
@@ -8157,6 +8283,50 @@ function SelectMultipleValue() {
     valuesToRender.length > 0 && !readOnly && valuesTags
   ] });
 }
+function SelectNative({
+  multiple,
+  onValueChange,
+  ...otherProps
+}) {
+  const { store } = useSelectContext();
+  const hasEmptyOption = useStore$1(
+    store,
+    (state) => state.actions.getOptionState("") !== void 0
+  );
+  const optionStates = useStore$1(
+    store,
+    useShallow((state) => Array.from(state.options[0].values()))
+  );
+  const handleChange = useCallback(
+    (evt) => onValueChange(
+      multiple ? Array.from(evt.target.options).filter((option) => option.selected).map((option) => option.value) : evt.target.value
+    ),
+    [multiple, onValueChange]
+  );
+  const selectKey = useMemo(
+    () => (hasEmptyOption ? "" : ";") + optionStates.map((opt) => opt.value).join(";"),
+    [hasEmptyOption, optionStates]
+  );
+  const options = useMemo(
+    () => optionStates.map(({ value, content, disabled }) => /* @__PURE__ */ jsx("option", { value, disabled, children: content }, value)),
+    [optionStates]
+  );
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      multiple,
+      ...otherProps,
+      onChange: handleChange,
+      tabIndex: -1,
+      "aria-hidden": true,
+      children: [
+        !hasEmptyOption && /* @__PURE__ */ jsx("option", { value: "" }),
+        options
+      ]
+    },
+    selectKey
+  );
+}
 function SelectSingleValue() {
   const { value, store } = useSelectContext();
   return useStore$1(
@@ -8211,7 +8381,10 @@ const Select = forwardRef(function Select2({
   arrowProps,
   popoverProps,
   commandMenuProps,
+  autoComplete,
+  form,
   style,
+  "aria-disabled": ariaDisabled,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   children,
@@ -8247,24 +8420,25 @@ const Select = forwardRef(function Select2({
     "",
     controlledSearchValue
   );
+  const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const actualValue = useMemo(
     () => multiple ? Array.isArray(value) ? value : value === "" ? [] : [value.toString()] : Array.isArray(value) ? value.at(-1) ?? "" : value.toString(),
     [multiple, value]
   );
   const isEmpty = multiple ? actualValue.length === 0 : actualValue === "";
-  const buttonRef = useRef(null);
+  const [buttonEl, setButtonEl] = useState(null);
   const popoverRef = useRef(null);
   const searchRef = useRef(null);
+  const isFormControl = buttonEl ? !!form || !!buttonEl?.closest("form") : true;
   const handleContainerPointerDown = useCallback(
     (evt) => {
       evt.preventDefault();
-      const buttonEl = buttonRef.current;
       const target = evt.target;
-      if (buttonEl && !disabled && !loading && !target.closest("input, select, textarea, button, a")) {
+      if (buttonEl && !disabled && !softDisabled && !target.closest("input, select, textarea, button, a")) {
         setOpen((open2) => !open2);
       }
     },
-    [disabled, loading, setOpen]
+    [buttonEl, disabled, setOpen, softDisabled]
   );
   const handleOptionSelect = useCallback(
     (optionValue) => {
@@ -8275,7 +8449,7 @@ const Select = forwardRef(function Select2({
         if (open) {
           searchRef.current?.focus();
         } else {
-          buttonRef.current?.focus();
+          buttonEl?.focus();
         }
       } else {
         if (optionValue !== actualValue) {
@@ -8289,6 +8463,7 @@ const Select = forwardRef(function Select2({
     },
     [
       actualValue,
+      buttonEl,
       multiple,
       onSearchValueChange,
       onValueChange,
@@ -8305,12 +8480,15 @@ const Select = forwardRef(function Select2({
       onValueChange?.(newValue);
     }
   }, [isEmpty, multiple, onValueChange, setValue]);
-  const handleCloseAutoFocus = useCallback((evt) => {
-    if (document.activeElement === document.body || document.activeElement === document.documentElement) {
-      evt.preventDefault();
-      buttonRef.current?.focus();
-    }
-  }, []);
+  const handleCloseAutoFocus = useCallback(
+    (evt) => {
+      if (document.activeElement === document.body || document.activeElement === document.documentElement) {
+        evt.preventDefault();
+        buttonEl?.focus();
+      }
+    },
+    [buttonEl]
+  );
   const clearButtonRef = useRef(null);
   const handleKeyDown = useCallback(
     (evt) => {
@@ -8324,18 +8502,27 @@ const Select = forwardRef(function Select2({
   );
   const handleControlBlur = useCallback(
     (evt) => {
-      if (onBlurToOutside && (!evt.relatedTarget || !buttonRef.current?.contains(evt.relatedTarget) && !popoverRef.current?.contains(evt.relatedTarget))) {
+      if (onBlurToOutside && (!evt.relatedTarget || !buttonEl?.contains(evt.relatedTarget) && !popoverRef.current?.contains(evt.relatedTarget))) {
         onBlurToOutside(evt);
       }
     },
-    [onBlurToOutside]
+    [buttonEl, onBlurToOutside]
   );
+  const initialValueRef = useRef(value);
+  useEffect(() => {
+    const form2 = buttonEl?.form;
+    if (form2) {
+      const reset = () => setValue(initialValueRef.current);
+      form2.addEventListener("reset", reset);
+      return () => form2.removeEventListener("reset", reset);
+    }
+  }, [buttonEl?.form, multiple, setValue]);
   const selectContext = useCreateSelectContext({
     multiple,
     value: actualValue,
     onOptionSelect: handleOptionSelect,
     status,
-    disabled: disabled || loading,
+    disabled: disabled || softDisabled,
     readOnly,
     valueTagCloseButtonLabel,
     valueTagProps
@@ -8344,12 +8531,12 @@ const Select = forwardRef(function Select2({
     () => ({ registering: true, ...selectContext }),
     [selectContext]
   );
-  const showOpen = open && !disabled && !loading && !readOnly;
+  const showOpen = open && !disabled && !softDisabled && !readOnly;
   const combinedClearButtonRef = useCombinedRef(
     clearButtonRef,
     clearButtonProps?.ref
   );
-  const combinedButtonRef = useCombinedRef(buttonRef, forwardedRef);
+  const combinedButtonRef = useCombinedRef(setButtonEl, forwardedRef);
   const combinedPopoverRef = useCombinedRef(popoverRef, popoverProps?.ref);
   const combinedSearchRef = useCombinedRef(
     searchRef,
@@ -8382,7 +8569,6 @@ const Select = forwardRef(function Select2({
                 InputWithContainerRef,
                 {
                   asChild: true,
-                  name,
                   variant,
                   status,
                   code,
@@ -8404,7 +8590,7 @@ const Select = forwardRef(function Select2({
                           arrowProps?.className
                         ),
                         "data-status": status,
-                        "data-disabled": disabled || loading
+                        "data-disabled": boolDataAttr(disabled || softDisabled)
                       }
                     ),
                     endAdornment
@@ -8441,6 +8627,7 @@ const Select = forwardRef(function Select2({
                     ref: combinedClearButtonRef
                   },
                   ...open ? {} : { "aria-controls": void 0 },
+                  "aria-disabled": ariaDisabled,
                   "aria-labelledby": combineAriaIds(
                     ariaLabelledBy ?? ariaLabelId ?? combineAriaIds(codeId, labelId ?? dataTableColumnLabelId),
                     valueId
@@ -8517,7 +8704,20 @@ const Select = forwardRef(function Select2({
         ]
       }
     ),
-    ariaLabelId && /* @__PURE__ */ jsx("span", { hidden: true, id: ariaLabelId, children: ariaLabel })
+    ariaLabelId && /* @__PURE__ */ jsx("span", { hidden: true, id: ariaLabelId, children: ariaLabel }),
+    isFormControl && /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(
+      SelectNative,
+      {
+        name,
+        value: actualValue,
+        onValueChange: setValue,
+        multiple,
+        required,
+        disabled,
+        autoComplete,
+        form
+      }
+    ) })
   ] });
 });
 const CAPTION_FORMAT = "LLLL y";
@@ -8698,7 +8898,6 @@ const CalendarHeader = memo(function CalendarHeader2({
               Select,
               {
                 "aria-label": monthSelectLabel,
-                disabled: !allowsPrevMonth && !allowsNextMonth,
                 showClearButton: false,
                 ...monthSelectProps,
                 className: cx(
@@ -8717,7 +8916,6 @@ const CalendarHeader = memo(function CalendarHeader2({
               Select,
               {
                 "aria-label": yearSelectLabel,
-                disabled: yearDates.length < 2,
                 showClearButton: false,
                 ...yearSelectProps,
                 className: cx(
@@ -8755,6 +8953,10 @@ const CalendarMonthGrid = memo(function CalendarMonthGrid2({
   ] });
 });
 function Calendar({
+  selectionMode = "none",
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
   required,
   minDate,
   maxDate,
@@ -8770,10 +8972,12 @@ function Calendar({
   month: controlledMonth,
   onMonthChange,
   onDayClick,
+  onDayFocus,
+  onDayMouseEnter,
   numberOfMonths = 1,
   // Show outside days and fix the number of weeks by default
-  showOutsideDays = true,
   fixedWeeks = true,
+  showOutsideDays = true,
   disableNavigation,
   disabled,
   modifiers,
@@ -8792,6 +8996,53 @@ function Calendar({
   yearSelectLabel ??= locale7.Calendar.yearSelectLabel;
   previousMonthLabel ??= locale7.Calendar.previousMonthLabel;
   nextMonthLabel ??= locale7.Calendar.nextMonthLabel;
+  const [unnormalizedValue, setValue] = useControllableState(
+    defaultValue ?? null,
+    controlledValue
+  );
+  const normalizedValue = useMemo(() => {
+    if (unnormalizedValue == null) {
+      return null;
+    }
+    if (typeof unnormalizedValue === "string" || isDate(unnormalizedValue)) {
+      return toValidDate(unnormalizedValue);
+    }
+    if (Array.isArray(unnormalizedValue)) {
+      return unnormalizedValue.reduce((dates, d) => {
+        const validDate = toValidDate(d);
+        if (validDate !== null) {
+          dates.push(validDate);
+        }
+        return dates;
+      }, []);
+    }
+    const rangeValue = {
+      start: toValidDate(unnormalizedValue.start),
+      end: toValidDate(unnormalizedValue.end)
+    };
+    return rangeValue.start && rangeValue.end && isAfter(rangeValue.start, rangeValue.end) ? null : rangeValue;
+  }, [unnormalizedValue]);
+  const value = useMemo(() => {
+    switch (selectionMode) {
+      case "none":
+        return null;
+      case "single":
+        return normalizedValue === null || isDate(normalizedValue) ? normalizedValue : Array.isArray(normalizedValue) ? normalizedValue[0] ?? null : normalizedValue.start ?? normalizedValue.end;
+      case "multiple":
+        return Array.isArray(normalizedValue) ? normalizedValue : normalizedValue === null ? [] : isDate(normalizedValue) ? [normalizedValue] : [normalizedValue.start, normalizedValue.end].filter(
+          (d) => d !== null
+        );
+      case "range":
+      case "range-start":
+      case "range-end":
+        return normalizedValue === null ? { start: null, end: null } : isDate(normalizedValue) ? { start: normalizedValue, end: null } : Array.isArray(normalizedValue) ? normalizedValue.length === 0 ? { start: null, end: null } : { start: min(normalizedValue), end: max(normalizedValue) } : normalizedValue;
+    }
+  }, [normalizedValue, selectionMode]);
+  const firstSelectedDate = selectionMode === "none" ? void 0 : selectionMode === "single" ? value ?? void 0 : selectionMode === "multiple" ? value[0] : value.start ?? value.end ?? void 0;
+  const [focusedRange, setFocusedRange] = useState({
+    start: null,
+    end: null
+  });
   const minAllowedDate = useMemo(() => {
     const minDates = [
       toValidDate(minDate),
@@ -8808,8 +9059,9 @@ function Calendar({
     ].filter((d) => d);
     return maxDates.length > 0 ? min(maxDates) : void 0;
   }, [maxDate, maxMonth, maxYear]);
+  const curMonth = startOfMonth(/* @__PURE__ */ new Date());
   const [month, setMonth2] = useControllableState(
-    defaultMonth ?? minAllowedDate ?? /* @__PURE__ */ new Date(),
+    defaultMonth ?? firstSelectedDate ?? ((!minAllowedDate || !isBefore(curMonth, minAllowedDate)) && (!maxAllowedDate || !isAfter(curMonth, maxAllowedDate)) ? curMonth : minAllowedDate ?? maxAllowedDate ?? curMonth),
     controlledMonth
   );
   const handleMonthChange = useCallback(
@@ -8822,7 +9074,49 @@ function Calendar({
   const handleDayClick = useCallback(
     (date, modifiers2, evt) => {
       onDayClick?.(date, modifiers2, evt);
-      if (!disableNavigation && modifiers2.outside) {
+      switch (selectionMode) {
+        case "single": {
+          const singleValue = value;
+          const isSame = singleValue !== null && isSameDay(singleValue, date);
+          if (!required && isSame) {
+            setValue(null);
+            onValueChange?.(null);
+          } else if (!isSame) {
+            setValue(date);
+            onValueChange?.(date);
+          }
+          break;
+        }
+        case "multiple": {
+          const multipleValue = value;
+          const hasDate = multipleValue.some((d) => isSameDay(d, date));
+          const newValue = hasDate ? multipleValue.filter((d) => !isSameDay(d, date)) : [...multipleValue, date];
+          setValue(newValue);
+          onValueChange?.(newValue);
+          break;
+        }
+        case "range":
+        case "range-start":
+        case "range-end": {
+          setFocusedRange({ start: null, end: null });
+          const rangeValue = value;
+          let newValue;
+          if (selectionMode === "range-start") {
+            newValue = !rangeValue.end || !isAfter(date, rangeValue.end) ? { start: date, end: rangeValue.end } : { start: date, end: null };
+          } else if (selectionMode === "range-end") {
+            newValue = !rangeValue.start || !isBefore(date, rangeValue.start) ? { start: rangeValue.start, end: date } : { start: date, end: null };
+          } else if (!rangeValue.start && !rangeValue.end || rangeValue.start && rangeValue.end) {
+            newValue = { start: date, end: null };
+          } else {
+            const filledDate = rangeValue.start ?? rangeValue.end;
+            newValue = isAfter(date, filledDate) ? { start: filledDate, end: date } : { start: date, end: filledDate };
+          }
+          setValue(newValue);
+          onValueChange?.(newValue);
+          break;
+        }
+      }
+      if (modifiers2.outside) {
         const firstDay = startOfMonth(month);
         const lastDay = lastDayOfMonth(addMonths(firstDay, numberOfMonths - 1));
         if (isBefore(date, firstDay)) {
@@ -8837,14 +9131,37 @@ function Calendar({
       }
     },
     [
-      disableNavigation,
       handleMonthChange,
       month,
       numberOfMonths,
       onDayClick,
-      pagedNavigation
+      onValueChange,
+      pagedNavigation,
+      required,
+      selectionMode,
+      setValue,
+      value
     ]
   );
+  const handleDayFocus = useCallback(
+    (date, modifiers2, evt, handler) => {
+      handler?.(date, modifiers2, evt);
+      const rangeValue = value;
+      let newFocusedRange;
+      if (selectionMode === "range-start" && rangeValue.end && isBefore(date, rangeValue.end)) {
+        newFocusedRange = { start: date, end: rangeValue.end };
+      } else if (selectionMode === "range-end" && rangeValue.start && isAfter(date, rangeValue.start)) {
+        newFocusedRange = { start: rangeValue.start, end: date };
+      } else if (selectionMode === "range" && (rangeValue.start && !rangeValue.end || !rangeValue.start && rangeValue.end)) {
+        const filledDate = rangeValue.start ?? rangeValue.end;
+        newFocusedRange = isAfter(date, filledDate) ? { start: filledDate, end: date } : { start: date, end: filledDate };
+      } else {
+        newFocusedRange = { start: null, end: null };
+      }
+      setFocusedRange(newFocusedRange);
+    },
+    [selectionMode, value]
+  );
   const dynamicModifierClasses = modifiers ? Object.keys(modifiers).reduce(
     (classNames, modifier) => {
       classNames[modifier] = prefix(
@@ -8871,6 +9188,20 @@ function Calendar({
     }
     return composedDisabled2;
   }, [disabled, maxAllowedDate, minAllowedDate]);
+  const rangeModifiers = useMemo(() => {
+    if (selectionMode !== "range" && selectionMode !== "range-start" && selectionMode !== "range-end") {
+      return {};
+    }
+    const rangeValue = value;
+    return {
+      range_start: rangeValue.start ?? rangeValue.end ?? false,
+      range_end: rangeValue.end ?? rangeValue.start ?? false,
+      range_middle: rangeValue.start && rangeValue.end && !isEqual(rangeValue.start, rangeValue.end) ? { after: rangeValue.start, before: rangeValue.end } : false,
+      focused_range_start: focusedRange.start ?? false,
+      focused_range_end: focusedRange.end ?? false,
+      focused_range_middle: focusedRange.start && focusedRange.end && !isEqual(focusedRange.start, focusedRange.end) ? { after: focusedRange.start, before: focusedRange.end } : false
+    };
+  }, [focusedRange.end, focusedRange.start, selectionMode, value]);
   return /* @__PURE__ */ jsx(
     CalendarContext.Provider,
     {
@@ -8894,6 +9225,7 @@ function Calendar({
           locale: locale7.dayPickerLocale,
           required,
           disabled: composedDisabled,
+          selected: firstSelectedDate,
           components: {
             MonthCaption: CalendarHeader,
             MonthGrid: CalendarMonthGrid,
@@ -8918,7 +9250,14 @@ function Calendar({
             day_button: prefix("calendar__day-inner"),
             footer: prefix("calendar__footer")
           },
-          modifiers,
+          modifiers: {
+            ...modifiers,
+            selected: value === null ? void 0 : selectionMode === "single" ? value : selectionMode === "multiple" ? value : selectionMode === "range" || selectionMode === "range-start" || selectionMode === "range-end" ? {
+              from: value.start ?? value.end ?? void 0,
+              to: value.end ?? value.start ?? void 0
+            } : void 0,
+            ...rangeModifiers
+          },
           modifiersClassNames: {
             // Dynamic modifiers
             ...dynamicModifierClasses,
@@ -8928,14 +9267,23 @@ function Calendar({
             disabled: prefix("calendar__day--disabled"),
             hidden: prefix("calendar__day--hidden"),
             today: prefix("calendar__day--today"),
-            outside: prefix("calendar__day--outside")
+            outside: prefix("calendar__day--outside"),
+            // Range modifiers
+            range_start: prefix("calendar__day--range-start"),
+            range_middle: prefix("calendar__day--range-middle"),
+            range_end: prefix("calendar__day--range-end"),
+            focused_range_start: prefix("calendar__day--focused-range-start"),
+            focused_range_middle: prefix("calendar__day--focused-range-middle"),
+            focused_range_end: prefix("calendar__day--focused-range-end")
           },
-          onDayClick: onDayClick && handleDayClick,
+          onDayClick: selectionMode === "none" ? onDayClick && handleDayClick : handleDayClick,
+          onDayFocus: (date, activeModifiers, evt) => handleDayFocus(date, activeModifiers, evt, onDayFocus),
+          onDayMouseEnter: (date, activeModifiers, evt) => handleDayFocus(date, activeModifiers, evt, onDayMouseEnter),
           month,
           onMonthChange: handleMonthChange,
           numberOfMonths,
-          showOutsideDays,
           fixedWeeks,
+          showOutsideDays,
           disableNavigation,
           pagedNavigation,
           ...otherProps
@@ -8945,8 +9293,8 @@ function Calendar({
   );
 }
 function toValidDate(value) {
-  const date = typeof value === "string" ? parseISO(value) : value ?? void 0;
-  return date === void 0 || !isValid(date) ? void 0 : date;
+  const date = typeof value === "string" ? parseISO(value) : value ?? null;
+  return date === null || !isValid(date) ? null : date;
 }
 const CheckboxGroup = forwardRef(function CheckboxGroup2({
   inline,
@@ -8975,6 +9323,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
   onMouseDown,
   tabIndex: controlledTabIndex,
   children,
+  "aria-disabled": ariaDisabled,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   ...otherProps
@@ -8999,6 +9348,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
   const isInTableCell = useIsInTableCell();
   inline ??= isInTableCell;
   variant ??= isInTableCell ? "cell" : "default";
+  const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const [tabIndex, setTabIndex] = useControllableState(
     disabled ? -1 : 0,
     controlledTabIndex ?? (disabled ? -1 : void 0)
@@ -9055,7 +9405,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
   return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(
     ControlContext.Provider,
     {
-      value: { variant, status, disabled, loading, readOnly },
+      value: { variant, status, disabled, softDisabled, readOnly },
       children: /* @__PURE__ */ jsxs(CheckboxGroupContext.Provider, { value: checkboxGroupContextValue, children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -9074,7 +9424,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
             onMouseDown: combineEventHandlers(onMouseDown, handleMouseDown),
             onFocus: combineEventHandlers(onFocus, handleFocus),
             onBlur: combineEventHandlers(onBlur, handleBlur),
-            "aria-disabled": loading || readOnly || void 0,
+            "aria-disabled": softDisabled || readOnly || void 0,
             "aria-label": ariaLabel,
             "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 ? combineAriaIds(codeId, labelId ?? dataTableColumnLabelId) : void 0),
             tabIndex,
@@ -9098,7 +9448,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
                 {
                   "data-status": status,
                   "data-variant": variant,
-                  "data-disabled": boolDataAttr(disabled || loading),
+                  "data-disabled": boolDataAttr(softDisabled),
                   "data-readonly": boolDataAttr(readOnly),
                   ...containerProps,
                   className: cx(
@@ -9113,7 +9463,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
                 {
                   "data-status": status,
                   "data-variant": variant,
-                  "data-disabled": boolDataAttr(disabled || loading),
+                  "data-disabled": boolDataAttr(softDisabled),
                   "data-readonly": boolDataAttr(readOnly),
                   ...endContainerProps,
                   className: cx(
@@ -9124,7 +9474,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
                     Spinner,
                     {
                       color: controlStatusToAccent(status, "neutral"),
-                      "data-disabled": boolDataAttr(disabled || loading),
+                      "data-disabled": boolDataAttr(softDisabled),
                       ...spinnerProps,
                       className: cx(
                         prefix("checkbox-group__spinner"),
@@ -9142,10 +9492,67 @@ const CheckboxGroup = forwardRef(function CheckboxGroup2({
     }
   ) });
 });
+function useMediaQuery(query, options) {
+  const matchMedia = options?.matchMedia ?? (typeof window !== "undefined" ? window.matchMedia : void 0);
+  const getDefaultSnapshot = useCallback(
+    () => options?.defaultMatches ?? false,
+    [options?.defaultMatches]
+  );
+  const getServerSnapshot = useCallback(
+    () => matchMedia?.(query).matches ?? getDefaultSnapshot(),
+    [getDefaultSnapshot, matchMedia, query]
+  );
+  const { getSnapshot, subscribe } = useMemo(() => {
+    if (!matchMedia) {
+      return {
+        getSnapshot: getDefaultSnapshot,
+        subscribe: () => () => {
+        }
+      };
+    }
+    const queryList = matchMedia(query);
+    return {
+      getSnapshot: () => queryList.matches,
+      subscribe: (notify) => {
+        if (queryList.addEventListener) {
+          queryList.addEventListener("change", notify);
+        } else {
+          queryList.addListener(notify);
+        }
+        return () => {
+          if (queryList.removeEventListener) {
+            queryList.removeEventListener("change", notify);
+          } else {
+            queryList.removeListener(notify);
+          }
+        };
+      }
+    };
+  }, [getDefaultSnapshot, matchMedia, query]);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+const BREAKPOINTS = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400
+};
+function useMediaBreakpointUp(breakpoint, options) {
+  return useMediaQuery(`(min-width:${BREAKPOINTS[breakpoint]}px)`, options);
+}
+function useMediaBreakpointDown(breakpoint, options) {
+  return useMediaQuery(
+    `(max-width:${BREAKPOINTS[breakpoint] - 0.02}px)`,
+    options
+  );
+}
 const Container = forwardRef(
   function Container2({
     asChild,
     fluid = "sm",
+    maxWidth,
     gutter,
     leftGutter = gutter,
     rightGutter = gutter,
@@ -9155,6 +9562,7 @@ const Container = forwardRef(
   }, forwardedRef) {
     const prefix = usePrefix();
     const spacing = useSpacing();
+    const { cssVar, cssVarStyle } = useCssVars();
     const { responsiveValuesToCssVarsAndDataAttrs } = useResponsiveValues();
     const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
       "container",
@@ -9170,10 +9578,17 @@ const Container = forwardRef(
       {
         className: cx(
           prefix("container"),
-          fluid !== true && prefix(`container--${fluid}`),
+          fluid !== true && prefix(`container--fluid-${fluid}`),
           className
         ),
-        style: { ...cssVars, ...style },
+        style: {
+          ...cssVarStyle(
+            "container-max-width",
+            typeof maxWidth === "string" && maxWidth !== "xs" && maxWidth in BREAKPOINTS ? cssVar(`container-max-width-${maxWidth}`) : typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth
+          ),
+          ...cssVars,
+          ...style
+        },
         ...dataAttrs,
         ref: forwardedRef,
         ...otherProps
@@ -9214,36 +9629,6 @@ function useDateTransformer({
     [dateFnsLocale, format$1]
   );
 }
-function DatePicker({
-  defaultValue,
-  value: controlledValue,
-  defaultMonth,
-  onChange,
-  onDayClick,
-  ...otherProps
-}) {
-  const [value, setValue] = useControllableState(
-    defaultValue ?? void 0,
-    controlledValue
-  );
-  const handleDayClick = useCallback(
-    (date, modifiers, evt) => {
-      onDayClick?.(date, modifiers, evt);
-      setValue(date);
-      onChange?.(date);
-    },
-    [onChange, onDayClick, setValue]
-  );
-  return /* @__PURE__ */ jsx(
-    Calendar,
-    {
-      modifiers: { selected: value ?? void 0 },
-      onDayClick: handleDayClick,
-      defaultMonth: defaultMonth ?? value ?? void 0,
-      ...otherProps
-    }
-  );
-}
 const DateInput = forwardRef(
   function DateInput2({
     value: controlledValue,
@@ -9262,6 +9647,7 @@ const DateInput = forwardRef(
     maxMonth,
     minYear,
     maxYear,
+    required,
     format: format2,
     announcedFormat,
     formatDescription,
@@ -9271,10 +9657,11 @@ const DateInput = forwardRef(
     onBlurToOutside,
     containerProps,
     clearButtonProps,
-    datePickerProps,
+    calendarProps,
     popoverContentProps,
     className,
     placeholder,
+    "aria-disabled": ariaDisabled,
     "aria-describedby": ariaDescribedBy,
     ...otherProps
   }, forwardedRef) {
@@ -9288,6 +9675,7 @@ const DateInput = forwardRef(
     selectedDateDescription ??= locale7.DateInput.selectedDateDescription;
     calendarButtonLabel ??= locale7.DateInput.calendarButtonLabel;
     const { printHidden } = usePrintClassNames();
+    const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
     const { format: formatDate, parse: parseDate } = useDateTransformer({
       format: format2
     });
@@ -9326,24 +9714,24 @@ const DateInput = forwardRef(
       [onPopoverOpenChange, popoverState.open]
     );
     const monthToDisplay = useCallback(
-      () => startOfMonth(datePickerProps?.defaultMonth ?? dateValue ?? /* @__PURE__ */ new Date()),
-      [datePickerProps?.defaultMonth, dateValue]
+      () => startOfMonth(calendarProps?.defaultMonth ?? dateValue ?? /* @__PURE__ */ new Date()),
+      [calendarProps?.defaultMonth, dateValue]
     );
     const [month, setMonth2] = useControllableState(
       () => monthToDisplay(),
-      datePickerProps?.month
+      calendarProps?.month
     );
     const dateIsVisible = useCallback(
       (date) => isWithinInterval(date, {
         start: month,
         end: lastDayOfMonth(
-          addMonths(month, (datePickerProps?.numberOfMonths ?? 1) - 1)
+          addMonths(month, (calendarProps?.numberOfMonths ?? 1) - 1)
         )
       }),
-      [datePickerProps?.numberOfMonths, month]
+      [calendarProps?.numberOfMonths, month]
     );
     const handleMonthChange = combineEventHandlers(
-      datePickerProps?.onMonthChange,
+      calendarProps?.onMonthChange,
       setMonth2
     );
     const handleInputChange = useCallback(
@@ -9379,7 +9767,7 @@ const DateInput = forwardRef(
       handleMonthChange(monthToDisplay());
       changePopoverState({ open: true, modal: true });
     }, [changePopoverState, handleMonthChange, monthToDisplay]);
-    const handleDatePickerChange = useCallback(
+    const handleCalendarValueChange = useCallback(
       (date) => {
         const formattedValue2 = formatDate(date);
         onValueChange?.({ formattedValue: formattedValue2, dateValue: date });
@@ -9457,6 +9845,7 @@ const DateInput = forwardRef(
             className: cx(prefix("date-input"), className),
             value: formattedValue,
             placeholder,
+            required,
             disabled,
             loading,
             readOnly,
@@ -9479,6 +9868,7 @@ const DateInput = forwardRef(
                 }
               ) }) }) })
             ] }),
+            "aria-disabled": ariaDisabled,
             "aria-describedby": combineAriaIds(
               ariaDescribedBy,
               formatDescriptionId,
@@ -9530,21 +9920,20 @@ const DateInput = forwardRef(
             ),
             ref: combinedPopoverRef,
             children: /* @__PURE__ */ jsx(
-              DatePicker,
+              Calendar,
               {
                 className: cx(
                   prefix("date-input__picker"),
-                  datePickerProps?.className
+                  calendarProps?.className
                 ),
-                ...datePickerProps,
+                required: true,
+                ...calendarProps,
+                selectionMode: "single",
                 value: deferredDateValue,
-                onChange: combineEventHandlers(
-                  datePickerProps?.onChange,
-                  handleDatePickerChange
-                ),
+                onValueChange: handleCalendarValueChange,
                 month,
                 onMonthChange: handleMonthChange,
-                disabled: disabled || loading || readOnly || datePickerProps?.disabled,
+                disabled: disabled || softDisabled || readOnly || calendarProps?.disabled,
                 minDate,
                 maxDate,
                 minMonth,
@@ -9552,22 +9941,22 @@ const DateInput = forwardRef(
                 minYear,
                 maxYear,
                 monthSelectProps: {
-                  ...datePickerProps?.monthSelectProps,
+                  ...calendarProps?.monthSelectProps,
                   popoverProps: {
-                    ...datePickerProps?.monthSelectProps?.popoverProps,
+                    ...calendarProps?.monthSelectProps?.popoverProps,
                     ref: monthSelectMenuRef
                   }
                 },
                 yearSelectProps: {
-                  ...datePickerProps?.yearSelectProps,
+                  ...calendarProps?.yearSelectProps,
                   popoverProps: {
-                    ...datePickerProps?.yearSelectProps?.popoverProps,
+                    ...calendarProps?.yearSelectProps?.popoverProps,
                     ref: yearSelectMenuRef
                   }
                 },
                 headerLabelProps: {
                   role: popoverState.modal ? "status" : void 0,
-                  ...datePickerProps?.headerLabelProps
+                  ...calendarProps?.headerLabelProps
                 }
               }
             )
@@ -9579,98 +9968,10 @@ const DateInput = forwardRef(
     ] });
   }
 );
-function DateRangePicker({
-  defaultValue,
-  value: controlledValue,
-  onChange,
-  selectionMode = "both",
-  defaultMonth,
-  modifiers,
-  onDayClick,
-  onDayFocus,
-  onDayMouseEnter,
-  numberOfMonths = 2,
-  ...otherProps
-}) {
-  const [unnormalizedValue, setValue] = useControllableState(
-    defaultValue ?? { start: null, end: null },
-    controlledValue
-  );
-  const value = useMemo(
-    () => unnormalizedValue.start && unnormalizedValue.end && isAfter(unnormalizedValue.start, unnormalizedValue.end) ? { start: null, end: null } : unnormalizedValue,
-    [unnormalizedValue]
-  );
-  const [focusedDates, setFocusedDates] = useState({
-    start: null,
-    end: null
-  });
-  const handleDayClick = useCallback(
-    (date, modifiers2, evt) => {
-      onDayClick?.(date, modifiers2, evt);
-      setFocusedDates({ start: null, end: null });
-      let newValue;
-      if (selectionMode === "start") {
-        newValue = !value.end || !isAfter(date, value.end) ? { start: date, end: value.end } : { start: date, end: null };
-      } else if (selectionMode === "end") {
-        newValue = !value.start || !isBefore(date, value.start) ? { start: value.start, end: date } : { start: date, end: null };
-      } else if (!value.start && !value.end || value.start && value.end) {
-        newValue = { start: date, end: null };
-      } else {
-        const filledDate = value.start ?? value.end;
-        newValue = isAfter(date, filledDate) ? { start: filledDate, end: date } : { start: date, end: filledDate };
-      }
-      setValue(newValue);
-      onChange?.(newValue);
-    },
-    [onChange, onDayClick, selectionMode, setValue, value.end, value.start]
-  );
-  const handleDayFocus = useCallback(
-    (date, modifiers2, evt, handler) => {
-      handler?.(date, modifiers2, evt);
-      let newFocused;
-      if (selectionMode === "start" && value.end && isBefore(date, value.end)) {
-        newFocused = { start: date, end: value.end };
-      } else if (selectionMode === "end" && value.start && isAfter(date, value.start)) {
-        newFocused = { start: value.start, end: date };
-      } else if (selectionMode === "both" && (value.start && !value.end || !value.start && value.end)) {
-        const filledDate = value.start ?? value.end;
-        newFocused = isAfter(date, filledDate) ? { start: filledDate, end: date } : { start: date, end: filledDate };
-      } else {
-        newFocused = { start: null, end: null };
-      }
-      setFocusedDates(newFocused);
-    },
-    [selectionMode, value.end, value.start]
-  );
-  return /* @__PURE__ */ jsx(
-    Calendar,
-    {
-      modifiers: {
-        ...modifiers,
-        selected: {
-          from: value.start ?? value.end ?? void 0,
-          to: value.end ?? value.start ?? void 0
-        },
-        range_start: value.start ?? value.end ?? false,
-        range_end: value.end ?? value.start ?? false,
-        range_middle: value.start && value.end && !isEqual(value.start, value.end) ? { after: value.start, before: value.end } : false,
-        focused_range_start: focusedDates.start ?? false,
-        focused_range_end: focusedDates.end ?? false,
-        focused_range_middle: focusedDates.start && focusedDates.end && !isEqual(focusedDates.start, focusedDates.end) ? { after: focusedDates.start, before: focusedDates.end } : false
-      },
-      numberOfMonths,
-      defaultMonth: defaultMonth ?? value.start ?? value.end ?? void 0,
-      onDayClick: handleDayClick,
-      onDayFocus: (date, activeModifiers, evt) => handleDayFocus(date, activeModifiers, evt, onDayFocus),
-      onDayMouseEnter: (date, activeModifiers, evt) => handleDayFocus(date, activeModifiers, evt, onDayMouseEnter),
-      ...otherProps
-    }
-  );
-}
-const DateRangeInput = forwardRef(function DateRangeInput2({
-  variant,
-  status,
-  code,
+const DateRangeInput = forwardRef(function DateRangeInput2({
+  variant,
+  status,
+  code,
   value: controlledValue,
   defaultValue,
   onValueChange,
@@ -9716,8 +10017,9 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
   startClearButtonProps,
   endClearButtonProps,
   spinnerProps,
-  dateRangePickerProps,
+  calendarProps,
   popoverContentProps,
+  "aria-disabled": ariaDisabled,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
@@ -9757,6 +10059,16 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
   const formatDescriptionId = formatDescription && typeof formatDescription !== "boolean" ? prefix(`control-format-${generatedId}`) : void 0;
   const isInTableCell = useIsInTableCell();
   variant ??= isInTableCell ? "cell" : "default";
+  const startDisabled = disabled || startInputProps?.disabled;
+  const endDisabled = disabled || endInputProps?.disabled;
+  const bothDisabled = startDisabled && endDisabled;
+  const isAriaDisabled = ariaDisabled === "true" || ariaDisabled === true;
+  const startSoftDisabled = loading || isAriaDisabled || startInputProps?.["aria-disabled"] === "true" || startInputProps?.["aria-disabled"] === true;
+  const endSoftDisabled = loading || isAriaDisabled || endInputProps?.["aria-disabled"] === "true" || endInputProps?.["aria-disabled"] === true;
+  const bothSoftDisabled = startSoftDisabled && endSoftDisabled;
+  const startReadOnly = readOnly || startInputProps?.readOnly;
+  const endReadOnly = readOnly || endInputProps?.readOnly;
+  const bothReadOnly = startReadOnly && endReadOnly;
   const [formattedValue, setFormattedValue] = useControllableState(
     defaultValue && (defaultValue.start === null || isDate(defaultValue.start)) ? {
       start: formatDate(defaultValue.start),
@@ -9812,15 +10124,12 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
   const monthToDisplay = useCallback(
     (input) => {
       let toDisplay;
-      if (dateRangePickerProps?.defaultMonth) {
-        toDisplay = dateRangePickerProps.defaultMonth;
+      if (calendarProps?.defaultMonth) {
+        toDisplay = calendarProps.defaultMonth;
       } else if (input === "start" && dateValue.start) {
         toDisplay = dateValue.start;
       } else {
-        const relevantForEnd = dateValue.end && addMonths(
-          dateValue.end,
-          -(dateRangePickerProps?.numberOfMonths ?? 2) + 1
-        );
+        const relevantForEnd = dateValue.end && addMonths(dateValue.end, -(calendarProps?.numberOfMonths ?? 1) + 1);
         toDisplay = relevantForEnd ?? dateValue.start ?? /* @__PURE__ */ new Date();
       }
       return startOfMonth(toDisplay);
@@ -9828,25 +10137,25 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
     [
       dateValue.end,
       dateValue.start,
-      dateRangePickerProps?.defaultMonth,
-      dateRangePickerProps?.numberOfMonths
+      calendarProps?.defaultMonth,
+      calendarProps?.numberOfMonths
     ]
   );
   const [month, setMonth2] = useControllableState(
     () => monthToDisplay("start"),
-    dateRangePickerProps?.month
+    calendarProps?.month
   );
   const dateIsVisible = useCallback(
     (date) => isWithinInterval(date, {
       start: month,
       end: lastDayOfMonth(
-        addMonths(month, (dateRangePickerProps?.numberOfMonths ?? 2) - 1)
+        addMonths(month, (calendarProps?.numberOfMonths ?? 1) - 1)
       )
     }),
-    [dateRangePickerProps?.numberOfMonths, month]
+    [calendarProps?.numberOfMonths, month]
   );
   const handleMonthChange = combineEventHandlers(
-    dateRangePickerProps?.onMonthChange,
+    calendarProps?.onMonthChange,
     setMonth2
   );
   const handleStartInputChange = useCallback(
@@ -9895,7 +10204,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
         handleMonthChange(
           addMonths(
             startOfMonth(dateEnd),
-            -(dateRangePickerProps?.numberOfMonths ?? 2) + 1
+            -(calendarProps?.numberOfMonths ?? 1) + 1
           )
         );
       }
@@ -9903,7 +10212,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
     [
       dateIsVisible,
       dateValue.start,
-      dateRangePickerProps?.numberOfMonths,
+      calendarProps?.numberOfMonths,
       handleMonthChange,
       onValueChange,
       parseDate,
@@ -9948,7 +10257,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
     (input) => (evt) => {
       const target = evt.target;
       const inputEl = input === "start" ? startInputRef.current : endInputRef.current;
-      if (inputEl && !disabled && !target.closest("input, select, textarea, button, a")) {
+      if (inputEl && !inputEl.disabled && !target.closest("input, select, textarea, button, a")) {
         const cursorIdx = target.closest(`.${prefix("date-range-input")} ~ *`) ? inputEl.value.length : 0;
         requestAnimationFrame(() => {
           try {
@@ -9959,14 +10268,14 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
         });
       }
     },
-    [disabled, prefix]
+    [prefix]
   );
   const handleAddonButtonClick = useCallback(() => {
     setSelectionMode("start");
     handleMonthChange(monthToDisplay("start"));
     changePopoverState({ open: true, modal: true });
   }, [handleMonthChange, monthToDisplay, changePopoverState]);
-  const handleDatePickerChange = useCallback(
+  const handleCalendarValueChange = useCallback(
     (range) => {
       const newFormattedValue = {
         start: formatDate(range.start),
@@ -10054,8 +10363,8 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
       setFormattedValue
     ]
   );
-  const hasStartClearButton = !disabled && !loading && !startInputProps?.disabled && !readOnly && !startInputProps?.readOnly && (showClearButtons === true || showClearButtons === "auto" && formattedValue.start !== "");
-  const hasEndClearButton = !disabled && !loading && !endInputProps?.disabled && !readOnly && !endInputProps?.readOnly && (showClearButtons === true || showClearButtons === "auto" && formattedValue.end !== "");
+  const hasStartClearButton = !startDisabled && !startSoftDisabled && !startReadOnly && (showClearButtons === true || showClearButtons === "auto" && formattedValue.start !== "");
+  const hasEndClearButton = !endDisabled && !endSoftDisabled && !endReadOnly && (showClearButtons === true || showClearButtons === "auto" && formattedValue.end !== "");
   const { responsiveValuesToCssVarsAndDataAttrs } = useResponsiveValues();
   const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
     "control",
@@ -10100,7 +10409,13 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
   return /* @__PURE__ */ jsx(ClearContexts, { field: false, children: /* @__PURE__ */ jsxs(
     ControlContext.Provider,
     {
-      value: { variant, status, disabled, loading, readOnly },
+      value: {
+        variant,
+        status,
+        disabled,
+        softDisabled: bothSoftDisabled,
+        readOnly: bothReadOnly
+      },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -10108,9 +10423,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
             "data-status": status,
             "data-accent": controlStatusToAccent(status),
             "data-variant": variant,
-            "data-disabled": boolDataAttr(
-              disabled || loading || startInputProps?.disabled && endInputProps?.disabled
-            ),
+            "data-disabled": boolDataAttr(bothDisabled || bothSoftDisabled),
             "data-readonly": boolDataAttr(
               readOnly || startInputProps?.readOnly && endInputProps?.readOnly
             ),
@@ -10137,9 +10450,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                     "data-status": status,
                     "data-accent": controlStatusToAccent(status),
                     "data-variant": variant,
-                    "data-disabled": boolDataAttr(
-                      disabled || loading || startInputProps?.disabled && endInputProps?.disabled
-                    ),
+                    "data-disabled": boolDataAttr(bothDisabled || bothSoftDisabled),
                     "data-readonly": boolDataAttr(
                       readOnly || startInputProps?.readOnly && endInputProps?.readOnly
                     ),
@@ -10155,17 +10466,13 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                         "div",
                         {
                           "data-focused": boolDataAttr(
-                            !disabled && !startInputProps?.disabled && popoverState.open && selectionMode === "start"
+                            !startDisabled && popoverState.open && selectionMode === "start"
                           ),
                           "data-status": status,
                           "data-accent": controlStatusToAccent(status),
                           "data-variant": variant,
-                          "data-disabled": boolDataAttr(
-                            disabled || loading || startInputProps?.disabled && endInputProps?.disabled
-                          ),
-                          "data-readonly": boolDataAttr(
-                            readOnly || startInputProps?.readOnly && endInputProps?.readOnly
-                          ),
+                          "data-disabled": boolDataAttr(bothDisabled || bothSoftDisabled),
+                          "data-readonly": boolDataAttr(bothReadOnly),
                           ...startContainerProps,
                           className: cx(
                             prefix("date-range-input__container"),
@@ -10183,7 +10490,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                               {
                                 ...startInputProps,
                                 id: controlId,
-                                "data-loading": boolDataAttr(loading),
+                                "data-disabled": boolDataAttr(startSoftDisabled),
                                 "data-status": status,
                                 "data-variant": variant,
                                 className: cx(
@@ -10194,8 +10501,8 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                                 value: formattedValue.start,
                                 placeholder: startInputProps?.placeholder ?? startPlaceholder ?? placeholder,
                                 required: required || startInputProps?.required,
-                                disabled: disabled || startInputProps?.disabled,
-                                readOnly: readOnly || loading || startInputProps?.readOnly,
+                                disabled: startDisabled,
+                                readOnly: startSoftDisabled || startReadOnly,
                                 onChange: combineEventHandlers(
                                   startInputProps?.onChange,
                                   handleStartInputChange
@@ -10253,7 +10560,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                               {
                                 color: controlStatusToAccent(status, "neutral"),
                                 "data-disabled": boolDataAttr(
-                                  disabled || loading || startInputProps?.disabled
+                                  startDisabled || startSoftDisabled
                                 ),
                                 ...spinnerProps,
                                 className: cx(
@@ -10271,17 +10578,13 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                         "div",
                         {
                           "data-focused": boolDataAttr(
-                            !disabled && !endInputProps?.disabled && popoverState.open && selectionMode === "end"
+                            !endDisabled && popoverState.open && selectionMode === "end"
                           ),
                           "data-status": status,
                           "data-accent": controlStatusToAccent(status),
                           "data-variant": variant,
-                          "data-disabled": boolDataAttr(
-                            disabled || loading || startInputProps?.disabled && endInputProps?.disabled
-                          ),
-                          "data-readonly": boolDataAttr(
-                            readOnly || startInputProps?.readOnly && endInputProps?.readOnly
-                          ),
+                          "data-disabled": boolDataAttr(bothDisabled || bothSoftDisabled),
+                          "data-readonly": boolDataAttr(bothReadOnly),
                           ...endContainerProps,
                           className: cx(
                             prefix("date-range-input__container"),
@@ -10298,7 +10601,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                               "input",
                               {
                                 ...endInputProps,
-                                "data-loading": boolDataAttr(loading),
+                                "data-disabled": boolDataAttr(endSoftDisabled),
                                 "data-status": status,
                                 "data-variant": variant,
                                 className: cx(
@@ -10309,8 +10612,8 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                                 value: formattedValue.end,
                                 placeholder: endInputProps?.placeholder ?? endPlaceholder ?? placeholder,
                                 required: required || endInputProps?.required,
-                                disabled: disabled || endInputProps?.disabled,
-                                readOnly: readOnly || loading || endInputProps?.readOnly,
+                                disabled: endDisabled,
+                                readOnly: endSoftDisabled || endReadOnly,
                                 onChange: combineEventHandlers(
                                   endInputProps?.onChange,
                                   handleEndInputChange
@@ -10367,9 +10670,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                               Spinner,
                               {
                                 color: controlStatusToAccent(status, "neutral"),
-                                "data-disabled": boolDataAttr(
-                                  disabled || loading || endInputProps?.disabled
-                                ),
+                                "data-disabled": boolDataAttr(endDisabled || endSoftDisabled),
                                 ...spinnerProps,
                                 className: cx(
                                   prefix("date-range-input__spinner"),
@@ -10433,22 +10734,20 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                     ),
                     ref: combinedPopoverRef,
                     children: /* @__PURE__ */ jsx(
-                      DateRangePicker,
+                      Calendar,
                       {
                         className: cx(
                           prefix("date-range-input__picker"),
-                          dateRangePickerProps?.className
+                          calendarProps?.className
                         ),
-                        ...dateRangePickerProps,
+                        required: true,
+                        ...calendarProps,
+                        selectionMode: `range-${selectionMode}`,
                         value: deferredDateValue,
-                        onChange: combineEventHandlers(
-                          dateRangePickerProps?.onChange,
-                          handleDatePickerChange
-                        ),
-                        selectionMode,
+                        onValueChange: handleCalendarValueChange,
                         month,
                         onMonthChange: handleMonthChange,
-                        disabled: disabled || loading || readOnly || (startInputProps?.disabled || startInputProps?.readOnly) && (endInputProps?.disabled || endInputProps?.readOnly) || dateRangePickerProps?.disabled,
+                        disabled: bothDisabled || bothSoftDisabled || bothReadOnly || (startDisabled || startSoftDisabled || startReadOnly) && (endDisabled || endSoftDisabled || endReadOnly) || calendarProps?.disabled,
                         minDate,
                         maxDate,
                         minMonth,
@@ -10456,22 +10755,22 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                         minYear,
                         maxYear,
                         monthSelectProps: {
-                          ...dateRangePickerProps?.monthSelectProps,
+                          ...calendarProps?.monthSelectProps,
                           popoverProps: {
-                            ...dateRangePickerProps?.monthSelectProps?.popoverProps,
+                            ...calendarProps?.monthSelectProps?.popoverProps,
                             ref: monthSelectMenuRef
                           }
                         },
                         yearSelectProps: {
-                          ...dateRangePickerProps?.yearSelectProps,
+                          ...calendarProps?.yearSelectProps,
                           popoverProps: {
-                            ...dateRangePickerProps?.yearSelectProps?.popoverProps,
+                            ...calendarProps?.yearSelectProps?.popoverProps,
                             ref: yearSelectMenuRef
                           }
                         },
                         headerLabelProps: {
                           role: popoverState.modal ? "status" : void 0,
-                          ...dateRangePickerProps?.headerLabelProps
+                          ...calendarProps?.headerLabelProps
                         }
                       }
                     )
@@ -10495,6 +10794,151 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
     }
   ) });
 });
+const GridContext = createContext(null);
+const Grid = forwardRef(function Grid2({
+  asChild,
+  container = false,
+  columns,
+  gap,
+  rowGap = gap,
+  columnGap = gap,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  xxl,
+  xsOffset,
+  smOffset,
+  mdOffset,
+  lgOffset,
+  xlOffset,
+  xxlOffset,
+  className,
+  style,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  const { cssToggler } = useCssVars();
+  const spacing = useSpacing();
+  const { responsiveValuesToCssVarsAndDataAttrs } = useResponsiveValues();
+  const gridContext = useContext(GridContext);
+  const sizes = { xs, sm, md, lg, xl, xxl };
+  const offsets = {
+    xs: xsOffset,
+    sm: smOffset,
+    md: mdOffset,
+    lg: lgOffset,
+    xl: xlOffset,
+    xxl: xxlOffset
+  };
+  const gapMapper = (v) => typeof v === "number" ? spacing(v) : v;
+  const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
+    "grid",
+    {
+      rowGap: container ? rowGap : void 0,
+      columnGap: container ? columnGap : void 0,
+      containerColumns: gridContext?.container ? gridContext?.columns : void 0,
+      containerRowGap: gridContext?.container ? gridContext?.rowGap : void 0,
+      containerColumnGap: gridContext?.container ? gridContext?.columnGap : void 0,
+      itemSize: gridContext?.container ? sizes : void 0,
+      itemAutoSize: gridContext?.container ? sizes : void 0,
+      itemOffset: gridContext?.container ? offsets : void 0,
+      itemAutoOffset: gridContext?.container ? offsets : void 0
+    },
+    {
+      rowGap: gapMapper,
+      columnGap: gapMapper,
+      containerRowGap: gapMapper,
+      containerColumnGap: gapMapper,
+      itemSize: (v) => typeof v === "number" ? v : "auto",
+      itemAutoSize: (v) => cssToggler(v === "auto"),
+      itemAutoOffset: (v) => cssToggler(v === "auto")
+    }
+  );
+  const As = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(GridContext.Provider, { value: { container, columns, rowGap, columnGap }, children: /* @__PURE__ */ jsx(
+    As,
+    {
+      className: cx(
+        prefix("grid"),
+        // Grid container classes
+        container && prefix("grid__container"),
+        gridContext?.container && prefix("grid__item"),
+        className
+      ),
+      style: { ...cssVars, ...style },
+      ...dataAttrs,
+      ref: forwardedRef,
+      ...otherProps
+    }
+  ) });
+});
+const DescriptionList = forwardRef(function DescriptionList2({ asChild, columns, gap, rowGap, columnGap, className, ...otherProps }, forwardedRef) {
+  const prefix = usePrefix();
+  const As = asChild ? Slot : "dl";
+  return /* @__PURE__ */ jsx(
+    Grid,
+    {
+      asChild: true,
+      container: true,
+      columns,
+      gap,
+      rowGap,
+      columnGap,
+      children: /* @__PURE__ */ jsx(
+        As,
+        {
+          className: cx(prefix("description-list"), className),
+          ...otherProps,
+          ref: forwardedRef
+        }
+      )
+    }
+  );
+});
+const DescriptionListItem = forwardRef(function DescriptionList3({
+  term,
+  children,
+  descriptionTermProps,
+  descriptionDetailsProps,
+  className,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      className: cx(prefix("description-list__item"), className),
+      ...otherProps,
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          "dt",
+          {
+            ...descriptionTermProps,
+            className: cx(
+              prefix("description-list__term"),
+              descriptionTermProps?.className
+            ),
+            children: term
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            ...descriptionDetailsProps,
+            className: cx(
+              prefix("description-list__details"),
+              descriptionDetailsProps?.className
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+});
 const DropdownMenu = DropdownMenu$1.Root;
 const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
   showCheckbox = true,
@@ -10516,35 +10960,38 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
   keybindsProps,
   indicatorProps,
   className,
+  "aria-disabled": ariaDisabled,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const [checked, setChecked] = useControllableState(
     defaultChecked ?? false,
     controlledChecked
   );
   const handleCheckedChange = useCallback(
     (checked2) => {
-      if (!loading) {
+      if (!softDisabled) {
         onCheckedChange?.(checked2);
         setChecked(checked2);
       }
     },
-    [loading, onCheckedChange, setChecked]
+    [onCheckedChange, setChecked, softDisabled]
   );
   const handleSelect = useCallback(
     (evt) => {
-      if (loading) {
+      if (softDisabled) {
         evt.preventDefault();
         return;
       }
       onSelect?.(evt);
     },
-    [loading, onSelect]
+    [onSelect, softDisabled]
   );
   return /* @__PURE__ */ jsx(
     MenuListItem,
     {
+      asChild: true,
       type: "text",
       color,
       disabled,
@@ -10570,16 +11017,18 @@ const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem2({
       iconProps,
       spinnerProps,
       keybindsProps,
-      asChild: true,
+      "aria-disabled": ariaDisabled,
       children: /* @__PURE__ */ jsx(
         DropdownMenu$1.CheckboxItem,
         {
+          className: cx(prefix("dropdown-menu__checkbox-item"), className),
           checked,
           onCheckedChange: handleCheckedChange,
           onSelect: handleSelect,
           disabled,
+          "data-disabled": boolDataAttr(disabled || softDisabled),
+          "aria-disabled": disabled || softDisabled,
           ...otherProps,
-          className: cx(prefix("dropdown-menu__checkbox-item"), className),
           ref: forwardedRef
         }
       )
@@ -10687,12 +11136,14 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
   spinnerProps,
   keybindsProps,
   className,
+  "aria-disabled": ariaDisabled,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const handleSelect = useCallback(
     (evt) => {
-      if (loading) {
+      if (softDisabled) {
         evt.preventDefault();
         return;
       }
@@ -10701,11 +11152,12 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
         window.open(href, target, rel?.split(" ").join(","));
       }
     },
-    [asLink, href, loading, onSelect, rel, target]
+    [asLink, href, onSelect, rel, softDisabled, target]
   );
   return /* @__PURE__ */ jsx(
     MenuListItem,
     {
+      asChild: true,
       type: asLink ? "link" : "text",
       selected,
       color,
@@ -10724,14 +11176,16 @@ const DropdownMenuItem = forwardRef(function DropdownMenuItem2({
       iconProps,
       spinnerProps,
       keybindsProps,
-      asChild: true,
+      "aria-disabled": ariaDisabled,
       children: /* @__PURE__ */ jsx(
         DropdownMenu$1.Item,
         {
+          className: cx(prefix("dropdown-menu__item"), className),
+          onSelect: handleSelect,
           disabled,
+          "data-disabled": boolDataAttr(disabled || softDisabled),
+          "aria-disabled": disabled || softDisabled,
           ...otherProps,
-          onSelect: handleSelect,
-          className: cx(prefix("dropdown-menu__item"), className),
           ref: forwardedRef
         }
       )
@@ -10775,22 +11229,25 @@ const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
   keybindsProps,
   indicatorProps,
   className,
+  "aria-disabled": ariaDisabled,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
+  const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const handleSelect = useCallback(
     (evt) => {
-      if (loading) {
+      if (softDisabled) {
         evt.preventDefault();
         return;
       }
       onSelect?.(evt);
     },
-    [loading, onSelect]
+    [onSelect, softDisabled]
   );
   return /* @__PURE__ */ jsx(
     MenuListItem,
     {
+      asChild: true,
       type: "text",
       color,
       disabled,
@@ -10815,15 +11272,17 @@ const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem2({
       iconProps,
       spinnerProps,
       keybindsProps,
-      asChild: true,
+      "aria-disabled": ariaDisabled,
       children: /* @__PURE__ */ jsx(
         DropdownMenu$1.RadioItem,
         {
-          disabled,
-          onSelect: handleSelect,
           className: cx(prefix("dropdown-menu__radio-item"), className),
-          ref: forwardedRef,
-          ...otherProps
+          onSelect: handleSelect,
+          disabled,
+          "data-disabled": boolDataAttr(disabled || softDisabled),
+          "aria-disabled": disabled || softDisabled,
+          ...otherProps,
+          ref: forwardedRef
         }
       )
     }
@@ -10877,6 +11336,7 @@ const DropdownMenuSubTrigger = forwardRef(function DropdownMenuSubTrigger2({
   return /* @__PURE__ */ jsx(
     MenuListItem,
     {
+      asChild: true,
       type: "text",
       color,
       icon,
@@ -10891,12 +11351,12 @@ const DropdownMenuSubTrigger = forwardRef(function DropdownMenuSubTrigger2({
           iconProps?.className
         )
       },
-      asChild: true,
       children: /* @__PURE__ */ jsx(
         DropdownMenu$1.SubTrigger,
         {
-          ...otherProps,
           className: cx(prefix("dropdown-menu__sub-trigger"), className),
+          disabled,
+          ...otherProps,
           ref: forwardedRef
         }
       )
@@ -11225,91 +11685,11 @@ const FieldGroupTitle = forwardRef(function FieldGroupTitle2({
     }
   );
 });
-const GridContext = createContext(null);
-const Grid = forwardRef(function Grid2({
-  asChild,
-  container = false,
-  columns,
-  gap,
-  rowGap = gap,
-  columnGap = gap,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xxl,
-  xsOffset,
-  smOffset,
-  mdOffset,
-  lgOffset,
-  xlOffset,
-  xxlOffset,
-  className,
-  style,
-  ...otherProps
-}, forwardedRef) {
+const Heading = forwardRef(function Heading2({ as, asChild, level = 2, className, ...otherProps }, forwardedRef) {
   const prefix = usePrefix();
-  const { cssToggler } = useCssVars();
-  const spacing = useSpacing();
-  const { responsiveValuesToCssVarsAndDataAttrs } = useResponsiveValues();
-  const gridContext = useContext(GridContext);
-  const sizes = { xs, sm, md, lg, xl, xxl };
-  const offsets = {
-    xs: xsOffset,
-    sm: smOffset,
-    md: mdOffset,
-    lg: lgOffset,
-    xl: xlOffset,
-    xxl: xxlOffset
-  };
-  const gapMapper = (v) => typeof v === "number" ? spacing(v) : v;
-  const { cssVars, dataAttrs } = responsiveValuesToCssVarsAndDataAttrs(
-    "grid",
-    {
-      rowGap: container ? rowGap : void 0,
-      columnGap: container ? columnGap : void 0,
-      containerColumns: gridContext?.container ? gridContext?.columns : void 0,
-      containerRowGap: gridContext?.container ? gridContext?.rowGap : void 0,
-      containerColumnGap: gridContext?.container ? gridContext?.columnGap : void 0,
-      itemSize: gridContext?.container ? sizes : void 0,
-      itemAutoSize: gridContext?.container ? sizes : void 0,
-      itemOffset: gridContext?.container ? offsets : void 0,
-      itemAutoOffset: gridContext?.container ? offsets : void 0
-    },
-    {
-      rowGap: gapMapper,
-      columnGap: gapMapper,
-      containerRowGap: gapMapper,
-      containerColumnGap: gapMapper,
-      itemSize: (v) => typeof v === "number" ? v : "auto",
-      itemAutoSize: (v) => cssToggler(v === "auto"),
-      itemAutoOffset: (v) => cssToggler(v === "auto")
-    }
-  );
-  const As = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(GridContext.Provider, { value: { container, columns, rowGap, columnGap }, children: /* @__PURE__ */ jsx(
-    As,
-    {
-      className: cx(
-        prefix("grid"),
-        // Grid container classes
-        container && prefix("grid__container"),
-        gridContext?.container && prefix("grid__item"),
-        className
-      ),
-      style: { ...cssVars, ...style },
-      ...dataAttrs,
-      ref: forwardedRef,
-      ...otherProps
-    }
-  ) });
-});
-const Heading = forwardRef(function Heading2({ as, asChild, level = 2, className, ...otherProps }, forwardedRef) {
-  const prefix = usePrefix();
-  const As = asChild ? Slot : as ?? `h${level}`;
-  return /* @__PURE__ */ jsx(
-    As,
+  const As = asChild ? Slot : as ?? `h${level}`;
+  return /* @__PURE__ */ jsx(
+    As,
     {
       className: cx(prefix("heading"), prefix(`heading--${level}`), className),
       ref: forwardedRef,
@@ -11801,6 +12181,7 @@ const Radio = forwardRef(function Radio2({
   readOnly,
   onClick,
   className,
+  "aria-disabled": ariaDisabled,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   ...otherProps
@@ -11816,15 +12197,15 @@ const Radio = forwardRef(function Radio2({
   const loadingDescriptionId = loading && loadingDescription && prefix(`control-loading-${generatedId}`);
   status = controlContext?.status ?? status;
   disabled = controlContext?.disabled || disabled;
-  loading = controlContext?.loading || loading;
   readOnly = controlContext?.readOnly || readOnly;
+  const softDisabled = controlContext?.softDisabled || loading || ariaDisabled === "true" || ariaDisabled === true;
   const handleClick = useCallback(
     (evt) => {
-      if (loading || readOnly) {
+      if (softDisabled || readOnly) {
         evt.preventDefault();
       }
     },
-    [loading, readOnly]
+    [softDisabled, readOnly]
   );
   const combinedLabelIds = combineAriaIds(codeId, labelId);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -11852,10 +12233,10 @@ const Radio = forwardRef(function Radio2({
               className: cx(prefix("radio"), className),
               value: value?.toString() ?? "",
               disabled,
-              "data-loading": boolDataAttr(loading),
+              "data-disabled": boolDataAttr(softDisabled),
               "data-readonly": boolDataAttr(readOnly),
               "data-status": status,
-              "aria-disabled": loading || readOnly || void 0,
+              "aria-disabled": softDisabled || readOnly || void 0,
               "aria-label": ariaLabel,
               "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 && combinedLabelIds !== labelId ? combinedLabelIds : void 0),
               ...otherProps,
@@ -11895,7 +12276,7 @@ const Radio = forwardRef(function Radio2({
             Spinner,
             {
               "data-status": status,
-              "data-disabled": boolDataAttr(disabled || loading),
+              "data-disabled": boolDataAttr(disabled || softDisabled),
               ...spinnerProps,
               className: cx(prefix("radio__spinner"), spinnerProps?.className)
             }
@@ -11932,6 +12313,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
   readOnly,
   className,
   children,
+  "aria-disabled": ariaDisabled,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
@@ -11966,14 +12348,15 @@ const RadioGroup = forwardRef(function RadioGroup2({
   const isInTableCell = useIsInTableCell();
   inline ??= isInTableCell;
   variant ??= isInTableCell ? "cell" : "default";
+  const softDisabled = loading || ariaDisabled === "true" || ariaDisabled === true;
   const handleValueChange = useCallback(
     (value2) => {
-      if (!loading && !readOnly) {
+      if (!softDisabled && !readOnly) {
         setValue(value2);
         onValueChange?.(value2);
       }
     },
-    [loading, onValueChange, readOnly, setValue]
+    [softDisabled, onValueChange, readOnly, setValue]
   );
   const setFieldControlFocused = useSetFieldControlFocused();
   const handleControlFocus = useCallback(() => {
@@ -11992,7 +12375,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
     handleValueChange("");
     radioGroupRef.current?.focus();
   }, [handleValueChange]);
-  const hasClearButton = !disabled && !loading && !readOnly && (showClearButton === true || showClearButton === "auto" && (value?.length ?? 0) > 0);
+  const hasClearButton = !disabled && !softDisabled && !readOnly && (showClearButton === true || showClearButton === "auto" && (value?.length ?? 0) > 0);
   const clearDescriptionId = hasClearButton && clearDescription && prefix(`control-clear-${generatedId}`);
   const handleKeyDown = useCallback(
     (evt) => {
@@ -12006,7 +12389,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
   return /* @__PURE__ */ jsx(ClearContexts, { children: /* @__PURE__ */ jsx(
     ControlContext.Provider,
     {
-      value: { variant, status, disabled, loading, readOnly },
+      value: { variant, status, disabled, softDisabled, readOnly },
       children: /* @__PURE__ */ jsxs(
         RadioGroup$1.Root,
         {
@@ -12023,7 +12406,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
             inline && prefix("radio-group--inline"),
             className
           ),
-          "aria-disabled": loading || readOnly || void 0,
+          "aria-disabled": softDisabled || readOnly || void 0,
           "aria-invalid": status === "invalid" || void 0,
           "aria-label": ariaLabel,
           "aria-labelledby": ariaLabelledBy ?? (ariaLabel === void 0 ? combineAriaIds(codeId, labelId ?? dataTableColumnLabelId) : void 0),
@@ -12055,7 +12438,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
               {
                 "data-status": status,
                 "data-variant": variant,
-                "data-disabled": boolDataAttr(disabled || loading),
+                "data-disabled": boolDataAttr(disabled || softDisabled),
                 "data-readonly": boolDataAttr(readOnly),
                 ...containerProps,
                 className: cx(
@@ -12070,7 +12453,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
               {
                 "data-status": status,
                 "data-variant": variant,
-                "data-disabled": boolDataAttr(disabled || loading),
+                "data-disabled": boolDataAttr(disabled || softDisabled),
                 "data-readonly": boolDataAttr(readOnly),
                 ...endContainerProps,
                 className: cx(
@@ -12109,7 +12492,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
                     Spinner,
                     {
                       color: controlStatusToAccent(status, "neutral"),
-                      "data-disabled": boolDataAttr(disabled || loading),
+                      "data-disabled": boolDataAttr(disabled || softDisabled),
                       ...spinnerProps,
                       className: cx(
                         prefix("radio-group__spinner"),
@@ -12128,185 +12511,601 @@ const RadioGroup = forwardRef(function RadioGroup2({
     }
   ) });
 });
-const Separator = forwardRef(function Separator2({ className, ...otherProps }, forwardedRef) {
+const Separator = forwardRef(function Separator2({
+  asChild,
+  color = "neutral",
+  length,
+  className,
+  style,
+  children,
+  ...otherProps
+}, forwardedRef) {
   const prefix = usePrefix();
+  const { cssVarStyle } = useCssVars();
+  const spacing = useSpacing();
   return /* @__PURE__ */ jsx(
     Separator$2.Root,
     {
+      asChild: true,
       className: cx(prefix("separator"), className),
+      "data-accent": color,
+      style: {
+        ...cssVarStyle(
+          "separator-length",
+          typeof length === "number" ? spacing(length) : length
+        ),
+        ...style
+      },
       ...otherProps,
-      ref: forwardedRef
+      ref: forwardedRef,
+      children: asChild ? children : /* @__PURE__ */ jsx("span", { children })
     }
   );
 });
 const StepperContext = createContext(null);
+function useCreateStepperContext(defaultActiveStep, activeStep, onActiveStepChange, showAllStepsWhilePrinting) {
+  const latest = useLatestValues({ onActiveStepChange });
+  const store = useConstant(
+    () => createStore()(
+      subscribeWithSelector((set, get) => ({
+        _activeStep: defaultActiveStep ?? 0,
+        _controlledActiveStep: activeStep,
+        activeStep: computed(
+          () => [
+            get()._controlledActiveStep ?? get()._activeStep,
+            get().stepCount()
+          ],
+          (activeStep2, stepCount) => Number.isNaN(activeStep2) ? 0 : Math.max(0, Math.min(activeStep2, stepCount))
+        ),
+        stepsInfo: {},
+        stepsContent: {},
+        stepCount: computed(
+          () => [get().stepsInfo],
+          (stepLabels) => Object.keys(stepLabels).length
+        ),
+        actions: {
+          registerStep: (index, info) => {
+            set(({ stepsInfo }) => ({
+              stepsInfo: { ...stepsInfo, [index]: info }
+            }));
+            return () => {
+              set(({ stepsInfo: { [index]: _, ...otherInfo } }) => ({
+                stepsInfo: otherInfo
+              }));
+            };
+          },
+          registerStepContent: (index, info) => {
+            set(({ stepsContent }) => ({
+              stepsContent: { ...stepsContent, [index]: info }
+            }));
+            return () => {
+              set(({ stepsContent: { [index]: _, ...id } }) => ({
+                stepsContent: id
+              }));
+            };
+          },
+          getStepInfo: (index) => {
+            return get().stepsInfo[index];
+          },
+          getStepContent: (index) => {
+            return get().stepsContent[index];
+          },
+          goTo: (index) => {
+            index = +index;
+            if (Number.isNaN(index)) {
+              index = 0;
+            }
+            index = Math.max(0, Math.min(index, get().stepCount()));
+            if (get().activeStep() !== index) {
+              set({ _activeStep: index });
+              latest.onActiveStepChange?.(index);
+            }
+          },
+          next: () => {
+            get().actions.goTo(get().activeStep() + 1);
+          },
+          previous: () => {
+            get().actions.goTo(get().activeStep() - 1);
+          }
+        }
+      }))
+    )
+  );
+  useEffect(() => {
+    if (activeStep !== void 0) {
+      store.setState({ _controlledActiveStep: activeStep });
+    }
+  }, [store, activeStep]);
+  return useMemo(
+    () => ({ showAllStepsWhilePrinting, store }),
+    [showAllStepsWhilePrinting, store]
+  );
+}
 function useStepperContext() {
-  const stepperContext = useContext(StepperContext);
-  if (!stepperContext) {
+  const stepperContent = useContext(StepperContext);
+  if (!stepperContent) {
     throw new Error("Stepper context not in scope.");
   }
-  return stepperContext;
+  return stepperContent;
+}
+function useRegisterStep(index, info) {
+  const { store } = useStepperContext();
+  const printing = usePrinting();
+  useEffect(() => {
+    if (!printing) {
+      return store.getState().actions.registerStep(index, info);
+    }
+  }, [index, info, printing, store]);
+}
+function useRegisterStepContent(index, info) {
+  const { store } = useStepperContext();
+  const printing = usePrinting();
+  useEffect(() => {
+    if (!printing) {
+      return store.getState().actions.registerStepContent(index, info);
+    }
+  }, [info, index, printing, store]);
+}
+function useStepInfo(index) {
+  const { store } = useStepperContext();
+  return useStore$1(store, (state) => state.actions.getStepInfo(index));
+}
+function useStepContentInfo(index) {
+  const { store } = useStepperContext();
+  return useStore$1(store, (state) => state.actions.getStepContent(index));
+}
+function useStepperApi() {
+  const { store } = useStepperContext();
+  return useStore$1(
+    store,
+    useShallow((state) => ({
+      activeStep: state.activeStep(),
+      goTo: state.actions.goTo,
+      next: state.actions.next,
+      previous: state.actions.previous
+    }))
+  );
 }
 const Step = forwardRef(function Step2({
+  asChild,
   index,
+  completed,
   status,
-  id,
+  stepNumberLabel,
+  completedLabel,
+  variant,
+  disabled,
+  loading,
+  showSpinner,
   className,
   children,
-  containerProps,
+  buttonProps,
   labelProps,
   ...otherProps
 }, forwardedRef) {
   if (index == null) {
-    throw new Error("Step has no `index`.");
+    throw new Error(
+      "Missing `index` property. When a `Step` is not a direct child of `StepList`, its index must be manually provided."
+    );
   }
+  const [locale7] = useLocale();
+  stepNumberLabel ??= locale7.Step.stepNumberLabel;
+  completedLabel ??= locale7.Step.completedLabel;
   const prefix = usePrefix();
-  const { activeStep } = useStepperContext();
-  const visited = activeStep >= index;
+  const { store } = useStepperContext();
+  const isActive = useStore$1(store, (state) => state.activeStep() === index);
+  const isCompleted = useStore$1(
+    store,
+    (state) => completed ?? state.activeStep() > index
+  );
   const generatedId = useId();
-  const stepId = id ?? prefix(`step-${generatedId}`);
+  const labelId = labelProps?.id ?? prefix(`stepper-step-label-${generatedId}`);
+  const buttonId = buttonProps?.id ?? prefix(`stepper-step-button-${generatedId}`);
+  const stepContentInfo = useStepContentInfo(index);
+  useRegisterStep(
+    index,
+    useMemo(
+      () => ({ labelId, label: children, disabled }),
+      [children, disabled, labelId]
+    )
+  );
+  const handleClick = useCallback(
+    (evt) => {
+      store.getState().actions.goTo(index);
+      buttonProps?.onClick?.(evt);
+    },
+    [buttonProps, index, store]
+  );
+  const As = asChild ? Slot : "li";
   return /* @__PURE__ */ jsxs(
-    "div",
+    As,
     {
-      "data-visited": boolDataAttr(visited),
+      className: cx(prefix("stepper__step"), className),
+      "data-completed": boolDataAttr(isCompleted),
+      "data-active": boolDataAttr(isActive),
       "data-status": status,
       "data-accent": controlStatusToAccent(
         status,
-        visited ? "primary" : "neutral"
-      ),
-      ...containerProps,
-      className: cx(
-        prefix("stepper__step-container"),
-        containerProps?.className
+        isCompleted ? "primary" : "neutral"
       ),
+      ...otherProps,
+      ref: forwardedRef,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           Label,
           {
-            "data-visited": boolDataAttr(visited),
+            "data-completed": boolDataAttr(isCompleted),
+            "data-active": boolDataAttr(isActive),
             ...labelProps,
+            id: labelId,
             className: cx(prefix("stepper__step-label"), labelProps?.className),
-            htmlFor: stepId,
-            children
+            htmlFor: buttonId,
+            children: [
+              stepNumberLabel && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                stepNumberLabel(index),
+                ", "
+              ] }),
+              children,
+              isCompleted && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                ", ",
+                completedLabel
+              ] })
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
-          Tabs$1.Trigger,
+          Button,
           {
-            asChild: true,
-            value: index.toString(),
-            id: stepId,
-            className: cx(prefix("stepper__step"), className),
-            ...otherProps,
-            ref: forwardedRef,
-            children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                "data-visited": boolDataAttr(visited),
-                variant: visited ? "solid" : "subtle",
-                "data-status": status,
-                color: controlStatusToAccent(status, visited ? "primary" : "neutral"),
-                children: index + 1
-              }
-            )
+            variant: variant ?? (isCompleted || isActive ? "solid" : "subtle"),
+            color: controlStatusToAccent(
+              status,
+              isCompleted || isActive ? "primary" : "neutral"
+            ),
+            "data-completed": boolDataAttr(isCompleted),
+            "data-active": boolDataAttr(isActive),
+            "data-status": status,
+            loading,
+            showSpinner,
+            "aria-disabled": disabled,
+            "aria-current": isActive ? "step" : void 0,
+            "aria-controls": isActive ? stepContentInfo?.id : void 0,
+            ...buttonProps,
+            id: buttonId,
+            className: cx(prefix("stepper__step-button"), buttonProps?.className),
+            onClick: handleClick,
+            children: isCompleted ? /* @__PURE__ */ jsx(Icon, { icon: faCheck }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: index + 1 })
           }
         )
       ]
     }
   );
 });
-const StepContent = forwardRef(function StepContent2({ index, className, ...otherProps }, forwardedRef) {
-  const prefix = usePrefix();
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Content,
-    {
-      value: index.toString(),
-      className: cx(prefix("stepper__step-content"), className),
-      ...otherProps,
-      ref: forwardedRef
+const StepContent = forwardRef(
+  function StepContent2({
+    asChild,
+    index,
+    id,
+    className,
+    stepContentLabelProps,
+    stepContentLabelIndexProps,
+    ...otherProps
+  }, forwardedRef) {
+    if (index == null) {
+      throw new Error(
+        "Missing `index` property. When a `StepContent` is not a direct child of `Stepper`, its index must be manually provided."
+      );
     }
+    const prefix = usePrefix();
+    const printing = usePrinting();
+    const contentRef = useRef(null);
+    const generatedId = useId();
+    const actualId = id ?? prefix(`stepper-step-content-${generatedId}`);
+    useRegisterStepContent(
+      index,
+      useMemo(() => ({ id: actualId, ref: contentRef }), [actualId])
+    );
+    const { showAllStepsWhilePrinting, store } = useStepperContext();
+    const isActive = useStore$1(store, (state) => state.activeStep() === index);
+    const stepInfo = useStepInfo(index);
+    const combinedRef = useCombinedRef(contentRef, forwardedRef);
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      printing && showAllStepsWhilePrinting && stepInfo?.label && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...stepContentLabelProps,
+          className: cx(
+            prefix("stepper__step-content-label"),
+            stepContentLabelProps?.className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cx(
+                  prefix("stepper__step-content-label-index"),
+                  stepContentLabelIndexProps?.className
+                ),
+                children: index + 1
+              }
+            ),
+            stepInfo.label
+          ]
+        }
+      ),
+      (printing && showAllStepsWhilePrinting || isActive) && /* @__PURE__ */ jsx(
+        As,
+        {
+          className: cx(prefix("stepper__step-content"), className),
+          role: "region",
+          "aria-labelledby": stepInfo?.labelId,
+          "data-active": boolDataAttr(isActive),
+          tabIndex: -1,
+          ...otherProps,
+          ref: combinedRef
+        }
+      )
+    ] });
+  }
+);
+const StepList = forwardRef(
+  function StepList2({ asChild, className, children, ...otherProps }, forwardedRef) {
+    const prefix = usePrefix();
+    const { showAllStepsWhilePrinting } = useStepperContext();
+    const { printHidden } = usePrintClassNames();
+    let currentIndex = 0;
+    const indexedChildren = Children.toArray(children).map((child) => {
+      if (!isValidElement(child) || child.type !== Step) {
+        return child;
+      }
+      const { index, ...otherStepProps } = child.props;
+      if (index) {
+        currentIndex = index;
+      }
+      return cloneElement(child, {
+        index: currentIndex++,
+        ...otherStepProps
+      });
+    });
+    const As = asChild ? Slot : "ol";
+    return /* @__PURE__ */ jsx(
+      As,
+      {
+        className: cx(
+          prefix("stepper__step-list"),
+          showAllStepsWhilePrinting && printHidden,
+          className
+        ),
+        ...otherProps,
+        ref: forwardedRef,
+        children: indexedChildren
+      }
+    );
+  }
+);
+const Stepper = forwardRef(
+  function Stepper2({
+    asChild,
+    defaultActiveStep,
+    activeStep: controlledActiveStep,
+    onActiveStepChange,
+    showAllStepsWhilePrinting,
+    className,
+    apiRef,
+    children,
+    ...otherProps
+  }, forwardedRef) {
+    const prefix = usePrefix();
+    const stepperContext = useCreateStepperContext(
+      defaultActiveStep,
+      controlledActiveStep,
+      onActiveStepChange,
+      showAllStepsWhilePrinting
+    );
+    const { store } = stepperContext;
+    const api = useStore$1(
+      store,
+      useShallow(
+        (state) => apiRef ? {
+          activeStep: state.activeStep(),
+          goTo: state.actions.goTo,
+          next: state.actions.next,
+          previous: state.actions.previous
+        } : null
+      )
+    );
+    useImperativeHandle(apiRef, () => api, [api]);
+    let currentIndex = 0;
+    const indexedChildren = Children.toArray(children).map((child) => {
+      if (!isValidElement(child) || child.type !== StepContent) {
+        return child;
+      }
+      const { index, ...otherStepContentProps } = child.props;
+      if (index) {
+        currentIndex = index;
+      }
+      return cloneElement(child, {
+        index: currentIndex++,
+        ...otherStepContentProps
+      });
+    });
+    const As = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(StepperContext.Provider, { value: stepperContext, children: /* @__PURE__ */ jsx(
+      As,
+      {
+        className: cx(prefix("stepper"), className),
+        ...otherProps,
+        ref: forwardedRef,
+        children: indexedChildren
+      }
+    ) });
+  }
+);
+const StepperFinishTrigger = forwardRef(function StepperFinishTrigger2({
+  showWhenNotLast,
+  showWhilePrinting,
+  disabled,
+  className,
+  children,
+  ...otherProps
+}, forwardedRef) {
+  const prefix = usePrefix();
+  const [locale7] = useLocale();
+  const { printHidden } = usePrintClassNames();
+  const { store } = useStepperContext();
+  const isLast = useStore$1(
+    store,
+    (state) => state.activeStep() >= state.stepCount() - 1
   );
+  const shouldRender = showWhenNotLast || isLast;
+  if (!shouldRender) {
+    return null;
+  }
+  const shouldDisable = !isLast || disabled;
+  const commonProps = {
+    className: cx(
+      prefix("stepper__finish-trigger"),
+      showWhilePrinting || printHidden,
+      className
+    ),
+    disabled: shouldDisable
+  };
+  if (children === void 0) {
+    const { label = locale7.StepperFinishTrigger.label, ...buttonProps } = otherProps;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        iconPlacement: "end",
+        color: "primary",
+        ...buttonProps,
+        ...commonProps,
+        ref: forwardedRef,
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Slot, { ...otherProps, ...commonProps, ref: forwardedRef, children });
 });
-const StepList = forwardRef(function StepList2({ className, children, ...otherProps }, forwardedRef) {
+const StepperNextTrigger = forwardRef(function StepperNextTrigger2({
+  showWhenLast,
+  showWhilePrinting,
+  disabled,
+  onClick,
+  className,
+  children,
+  ...otherProps
+}, forwardedRef) {
   const prefix = usePrefix();
-  let currentIndex = 0;
-  const indexedChildren = Children.toArray(children).map((child) => {
-    if (!isValidElement(child) || child.type !== Step) {
-      return child;
-    }
-    const { index, ...otherStepProps } = child.props;
-    const stepIndex = index ?? currentIndex++;
-    return cloneElement(child, {
-      index: stepIndex,
-      ...otherStepProps
-    });
-  });
-  return /* @__PURE__ */ jsx(
-    Tabs$1.List,
-    {
-      className: cx(prefix("stepper__step-list"), className),
-      ...otherProps,
-      ref: forwardedRef,
-      children: indexedChildren
-    }
+  const [locale7] = useLocale();
+  const { printHidden } = usePrintClassNames();
+  const { store } = useStepperContext();
+  const isLast = useStore$1(
+    store,
+    (state) => state.activeStep() >= state.stepCount() - 1
   );
+  const nextIsDisabled = useStore$1(
+    store,
+    (state) => state.actions.getStepInfo(state.activeStep() + 1)?.disabled
+  );
+  const handleClick = useCallback(() => {
+    const { next, getStepContent } = store.getState().actions;
+    next();
+    setTimeout(
+      () => getStepContent(store.getState().activeStep())?.ref.current?.focus()
+    );
+  }, [store]);
+  const shouldRender = showWhenLast || !isLast;
+  if (!shouldRender) {
+    return null;
+  }
+  const shouldDisable = isLast || nextIsDisabled || disabled;
+  const commonProps = {
+    className: cx(
+      prefix("stepper__next-trigger"),
+      showWhilePrinting || printHidden,
+      className
+    ),
+    disabled: shouldDisable,
+    onClick: combineEventHandlers(onClick, handleClick, {
+      checkDefaultPrevented: true
+    })
+  };
+  if (children === void 0) {
+    const { label = locale7.StepperNextTrigger.label, ...buttonProps } = otherProps;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        iconPlacement: "end",
+        color: "primary",
+        ...buttonProps,
+        ...commonProps,
+        ref: forwardedRef,
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Slot, { ...otherProps, ...commonProps, ref: forwardedRef, children });
 });
-const Stepper = forwardRef(function Stepper2({
-  defaultActiveStep,
-  activeStep: controlledActiveStep,
-  onActiveStepChange,
-  activationMode = "manual",
+const StepperPreviousTrigger = forwardRef(function StepperPreviousTrigger2({
+  showWhenFirst = true,
+  showWhilePrinting,
+  disabled,
+  onClick,
   className,
-  apiRef,
   children,
   ...otherProps
 }, forwardedRef) {
   const prefix = usePrefix();
-  const [activeStep, setActiveStep] = useControllableState(
-    defaultActiveStep ?? 0,
-    controlledActiveStep
+  const [locale7] = useLocale();
+  const { printHidden } = usePrintClassNames();
+  const { store } = useStepperContext();
+  const isFirst = useStore$1(store, (state) => state.activeStep() === 0);
+  const prevIsDisabled = useStore$1(
+    store,
+    (state) => state.actions.getStepInfo(state.activeStep() - 1)?.disabled
   );
-  const handleValueChange = useCallback(
-    (value) => {
-      const newActiveStep = +value;
-      if (newActiveStep >= 0) {
-        setActiveStep(newActiveStep);
-        onActiveStepChange?.(newActiveStep);
+  const handleClick = useCallback(() => {
+    const { previous, getStepContent } = store.getState().actions;
+    previous();
+    setTimeout(
+      () => getStepContent(store.getState().activeStep())?.ref.current?.focus()
+    );
+  }, [store]);
+  const shouldRender = showWhenFirst || !isFirst;
+  if (!shouldRender) {
+    return null;
+  }
+  const shouldDisable = isFirst || prevIsDisabled || disabled;
+  const commonProps = {
+    className: cx(
+      prefix("stepper__previous-trigger"),
+      showWhilePrinting || printHidden,
+      className
+    ),
+    disabled: shouldDisable,
+    onClick: combineEventHandlers(onClick, handleClick, {
+      checkDefaultPrevented: true
+    })
+  };
+  if (children === void 0) {
+    const { label = locale7.StepperPreviousTrigger.label, ...buttonProps } = otherProps;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "subtle",
+        ...buttonProps,
+        ...commonProps,
+        ref: forwardedRef,
+        children: label
       }
-    },
-    [onActiveStepChange, setActiveStep]
-  );
-  const next = useCallback(
-    () => handleValueChange(activeStep + 1),
-    [activeStep, handleValueChange]
-  );
-  const previous = useCallback(
-    () => handleValueChange(activeStep - 1),
-    [activeStep, handleValueChange]
-  );
-  const api = useMemo(
-    () => ({
-      activeStep,
-      goTo: handleValueChange,
-      next,
-      previous
-    }),
-    [activeStep, handleValueChange, next, previous]
-  );
-  useImperativeHandle(apiRef, () => api, [api]);
-  return /* @__PURE__ */ jsx(StepperContext.Provider, { value: { activeStep }, children: /* @__PURE__ */ jsx(
-    Tabs$1.Root,
-    {
-      value: activeStep?.toString(),
-      onValueChange: handleValueChange,
-      className: cx(prefix("stepper"), className),
-      activationMode,
-      ...otherProps,
-      ref: forwardedRef,
-      children: typeof children === "function" ? children(api) : children
-    }
-  ) });
+    );
+  }
+  return /* @__PURE__ */ jsx(Slot, { ...otherProps, ...commonProps, ref: forwardedRef, children });
 });
+function StepperState({ children }) {
+  const api = useStepperApi();
+  return children?.(api);
+}
 const TabsContext = createContext(null);
 function useCreateTabsContext(variant, defaultValue, value, showAllTabsWhilePrinting) {
   const store = useConstant(
@@ -12366,7 +13165,16 @@ function useTabLabel(value) {
   const { store } = useTabsContext();
   return useStore$1(store, (state) => state.actions.getTabLabel(value));
 }
-const Tab = forwardRef(function Tab2({ value, status, tabInnerProps, className, children, ...otherProps }, forwardedRef) {
+const Tab = forwardRef(function Tab2({
+  value,
+  status,
+  tooltipProps,
+  tabInnerProps,
+  tabTextProps,
+  className,
+  children,
+  ...otherProps
+}, forwardedRef) {
   const prefix = usePrefix();
   const { variant, store } = useTabsContext();
   const stringValue = value.toString();
@@ -12380,7 +13188,16 @@ const Tab = forwardRef(function Tab2({ value, status, tabInnerProps, className,
     }
     prevIsActiveRef.current = isActive;
   }, [isActive]);
+  const [tabTextOverflows, setTabTextOverflows] = useState(false);
+  const tabTextRef = useRef(null);
+  useEffect(() => {
+    const el = tabTextRef.current;
+    if (el) {
+      setTabTextOverflows(el.scrollWidth > el.clientWidth);
+    }
+  }, [children]);
   const combinedTabRef = useCombinedRef(tabRef, forwardedRef);
+  const combinedTabTextRef = useCombinedRef(tabTextRef, tabTextProps?.ref);
   return /* @__PURE__ */ jsxs(
     Tabs$1.Trigger,
     {
@@ -12397,23 +13214,39 @@ const Tab = forwardRef(function Tab2({ value, status, tabInnerProps, className,
       ref: combinedTabRef,
       children: [
         /* @__PURE__ */ jsx(
-          "span",
+          Tooltip,
           {
-            ...tabInnerProps,
-            className: cx(prefix("tabs__tab-inner"), tabInnerProps?.className),
-            children
+            side: "top",
+            ...tooltipProps,
+            content: tabTextOverflows ? children : null,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-describedby": void 0,
+                ...tabInnerProps,
+                className: cx(prefix("tabs__tab-inner"), tabInnerProps?.className),
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    ...tabTextProps,
+                    className: cx(prefix("tabs__tab-text"), tabTextProps?.className),
+                    ref: combinedTabTextRef,
+                    children
+                  }
+                )
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx(
           "span",
           {
-            ...tabInnerProps,
             className: cx(
               prefix("tabs__tab-inner"),
               prefix("tabs__tab-inner--hidden"),
               tabInnerProps?.className
             ),
-            children
+            children: /* @__PURE__ */ jsx("span", { className: cx(prefix("tabs__tab-text"), tabTextProps?.className), children })
           }
         )
       ]
@@ -12676,62 +13509,6 @@ const TextArea = forwardRef(
     return /* @__PURE__ */ jsx(Input$1, { asChild: true, ...props, children: /* @__PURE__ */ jsx("textarea", { rows, ref: forwardedRef }) });
   }
 );
-function useMediaQuery(query, options) {
-  const matchMedia = options?.matchMedia ?? (typeof window !== "undefined" ? window.matchMedia : void 0);
-  const getDefaultSnapshot = useCallback(
-    () => options?.defaultMatches ?? false,
-    [options?.defaultMatches]
-  );
-  const getServerSnapshot = useCallback(
-    () => matchMedia?.(query).matches ?? getDefaultSnapshot(),
-    [getDefaultSnapshot, matchMedia, query]
-  );
-  const { getSnapshot, subscribe } = useMemo(() => {
-    if (!matchMedia) {
-      return {
-        getSnapshot: getDefaultSnapshot,
-        subscribe: () => () => {
-        }
-      };
-    }
-    const queryList = matchMedia(query);
-    return {
-      getSnapshot: () => queryList.matches,
-      subscribe: (notify) => {
-        if (queryList.addEventListener) {
-          queryList.addEventListener("change", notify);
-        } else {
-          queryList.addListener(notify);
-        }
-        return () => {
-          if (queryList.removeEventListener) {
-            queryList.removeEventListener("change", notify);
-          } else {
-            queryList.removeListener(notify);
-          }
-        };
-      }
-    };
-  }, [getDefaultSnapshot, matchMedia, query]);
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-const BREAKPOINTS = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-  xxl: 1400
-};
-function useMediaBreakpointUp(breakpoint, options) {
-  return useMediaQuery(`(min-width:${BREAKPOINTS[breakpoint]}px)`, options);
-}
-function useMediaBreakpointDown(breakpoint, options) {
-  return useMediaQuery(
-    `(max-width:${BREAKPOINTS[breakpoint] - 0.02}px)`,
-    options
-  );
-}
 function navigate(url, options) {
   history[options?.replace ? "replaceState" : "pushState"](
     options?.state,
@@ -12867,7 +13644,10 @@ function useSearchParams() {
     []
   );
   return useMemo(
-    () => [new URLSearchParams(locationSearch), setSearchParams],
+    () => ({
+      searchParams: new URLSearchParams(locationSearch),
+      setSearchParams
+    }),
     [locationSearch, setSearchParams]
   );
 }
@@ -12927,9 +13707,9 @@ export {
   DataTableRowsPerPage,
   DataTableSelectionTrigger,
   DateInput,
-  DatePicker,
   DateRangeInput,
-  DateRangePicker,
+  DescriptionList,
+  DescriptionListItem,
   Dialog,
   DialogBody,
   DialogClose,
@@ -13014,6 +13794,10 @@ export {
   StepContent,
   StepList,
   Stepper,
+  StepperFinishTrigger,
+  StepperNextTrigger,
+  StepperPreviousTrigger,
+  StepperState,
   Tab,
   TabContent,
   TabList,
@@ -13127,6 +13911,7 @@ export {
   useSetFieldLabel,
   useSpacing,
   useStartPrintingTask,
+  useStepperApi,
   useTableNumberOfColumns,
   useToastManager,
   validateNumericTransformerOptions,