@optiaxiom/react 1.2.5 → 1.3.1

package/dist/cjs/unstable.js

@@ -3,90 +3,85 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-DE4URqWE.js');
-require('./assets/src/layers/layers.css.ts.vanilla-BIlp7Els.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-CV-bql3a.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-CWx9s0VY.css');
+var Skeleton = require('./Skeleton-CE8kcuAZ.js');
+require('./assets/src/layers/layers.css.ts.vanilla-D2iWt029.css');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-B3bvX3WR.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-B79F0dM2.css');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
 var reactPopper = require('@radix-ui/react-popper');
 var downshift = require('downshift');
 var reactContext = require('@radix-ui/react-context');
-var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+var RadixVisuallyHidden = require('@radix-ui/react-visually-hidden');
 var reactPortal = require('@radix-ui/react-portal');
 var reactVirtual = require('@tanstack/react-virtual');
-require('./assets/src/select-content/SelectContent.css.ts.vanilla-DXggbRTQ.css');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-4BAxMnL5.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-Bun2UNFP.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-DHSTTORm.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-0TZcmmu3.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BnSeiwfY.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-BEUq3kDL.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CjfwYd9Q.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-MaOs4its.css');
-require('./assets/src/link/Link.css.ts.vanilla-DsprUWN_.css');
-require('./assets/src/card/Card.css.ts.vanilla-CRUkZJ0N.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-Bz7PeMPd.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-DFwtJh9H.css');
-require('./assets/src/card-action/CardAction.css.ts.vanilla-G-MAb5WN.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-CFXkX2QS.css');
+require('./assets/src/link/Link.css.ts.vanilla-D-bSclzt.css');
+require('./assets/src/card/Card.css.ts.vanilla-C3yqZN2A.css');
+require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-DwmjlEGM.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-BvmS9ZSU.css');
+require('./assets/src/card-action/CardAction.css.ts.vanilla-B51eANPd.css');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-DaibQxBG.css');
-var RadixDialog = require('@radix-ui/react-dialog');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BfzbPCLF.css');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-DA-nCsoz.css');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-Cz62bqT8.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CrqZmJXD.css');
-require('./assets/src/table/Table.css.ts.vanilla-DA5H5_FY.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-gyrGzzA_.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-Dzxs57Ca.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-DARtrZn8.css');
-require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-MsX92Doe.css');
-require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-BSLfrkW1.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-BR8vi6FR.css');
-require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-DhKbHjAB.css');
-require('./assets/src/date-range-picker-content/DateRangePickerContent.css.ts.vanilla-CaPBBNgA.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-Xw-ns80B.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BdKXpj1z.css');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-Dabn0RCS.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-Cl1-HqFR.css');
+require('./assets/src/table/Table.css.ts.vanilla-BwPOHhs_.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-BYY8IIuw.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-C8xEmbBv.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-CrSWyIGa.css');
+require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-DT67y1Z6.css');
+require('./assets/src/data-table-footer/DataTableFooter.css.ts.vanilla-CUUnuvvE.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-BaJS33T7.css');
+require('./assets/src/date-picker-content/DatePickerContent.css.ts.vanilla-C5ejyS0a.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-CwsU-HaV.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DU5yHX96.css');
 var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CjfwYd9Q.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-Cnjh6ZE6.css');
-require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-D7RfKeTc.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-4_F9ttVI.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-DKrCo1ZD.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-CFXSuLJN.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-DnWR9h1S.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-i6CsKaj9.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-Bwmx5Lqj.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-TqOwdkqK.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-CTrZhzGF.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-BkCGiMYb.css');
+require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-DcNCgJgp.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-AW54A-sP.css');
+require('./assets/src/menu-input/MenuInput.css.ts.vanilla-CUqEzWEo.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-D2bvjE-M.css');
+require('@radix-ui/react-dialog');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-BROM2YGz.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-RMNv9Lqm.css');
+require('./assets/src/dialog-header/DialogHeader.css.ts.vanilla-DDRAkIzV.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-Bj8DiXwJ.css');
-require('@radix-ui/react-dropdown-menu');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-BlFqBxdI.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-I6c00poA.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CjfwYd9Q.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-DNCCDGec.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-D4QUtJqT.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-Cow23haB.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-CKKVEFPs.css');
-require('./assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-dIk7ESAB.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-DA0Ma99D.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-CcpeXlIo.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-DAIh1s87.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-CDv_HSCK.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-ByPjrct_.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-DGNVVOIL.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-CG80wFdK.css');
+require('./assets/src/listbox-checkbox-item/ListboxCheckboxItem.css.ts.vanilla-C2eU117O.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-TsCn1kNw.css');
+require('./assets/src/listbox-item-indicator/ListboxItemIndicator.css.ts.vanilla-D8wnYoJl.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/text/Text.css.ts.vanilla-B5VbRhB3.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-xLDa2Hwh.css');
+require('./assets/src/text/Text.css.ts.vanilla-B2NYcXGo.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-ZIE8tgBJ.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-Cqb0w2i5.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-DlcmsaMY.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-BGvCoOzl.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-D_jnqlSi.css');
+require('./assets/src/overlay-listbox/OverlayListbox.css.ts.vanilla-CFW6sooD.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-XjejeJkt.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-CT8EdlkT.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-Bu-WyyWJ.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-CUMPevOq.css');
-require('./assets/src/box/Box.css.ts.vanilla-Dy0kxHbJ.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-R1bNynwK.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-acUo1A_8.css');
+require('./assets/src/box/Box.css.ts.vanilla-Cfss3XgW.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-Cw-U1f2M.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -105,7 +100,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var RadixDialog__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixDialog);
+var RadixVisuallyHidden__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixVisuallyHidden);
 
 const toPlainDateTime = (date) => new Date(date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1e3).toISOString().slice(0, -1);
 
@@ -248,17 +243,17 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_8zt3s1']});
+var item = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'jarath']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...item$3({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...item({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
   }
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'qgo5fk']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1rve23b']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -300,26 +295,13 @@ function usePortalPatch(initialHighlightedIndex = -1) {
 
 const [SelectProvider, useSelectContext] = reactContext.createContext("@optiaxiom/react/Select");
 
-function useEffectEvent(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React.useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
 const SelectHiddenSelect = React.forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
-  const { items, itemToValue } = useSelectContext(
-    "@optiaxiom/react/SelectHiddenSelect"
-  );
-  const itemToValueStable = useEffectEvent(itemToValue);
+  const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");
   const options = React.useMemo(
-    () => items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: itemToValueStable(item), children: itemToValueStable(item) }, itemToValueStable(item))),
-    [itemToValueStable, items]
+    () => items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.value, children: item.value }, item.value)),
+    [items]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "select",
     {
       defaultValue,
@@ -361,16 +343,14 @@ const Select = React.forwardRef(
     defaultOpen = false,
     defaultValue,
     disabled,
-    isItemDisabled = () => false,
-    items,
-    itemToLabel = (value2) => value2 ? String(value2) : "",
-    itemToValue = (item) => item,
+    loading,
     name,
     onBlur,
     onChange,
     onOpenChange,
     onValueChange,
     open,
+    options: items,
     required,
     value
   }, outerRef) => {
@@ -383,10 +363,9 @@ const Select = React.forwardRef(
     });
     const forceValueChange = Skeleton.useObserveValue(innerRef, setShadowValue);
     useObserveReset(innerRef, setShadowValue);
-    const itemToValueStable = useEffectEvent(itemToValue);
     const selectedItem = React.useMemo(
-      () => shadowValue !== void 0 ? items.find((item) => itemToValueStable(item) === shadowValue) : void 0,
-      [itemToValueStable, items, shadowValue]
+      () => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0,
+      [items, shadowValue]
     );
     const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
       defaultProp: defaultOpen,
@@ -394,18 +373,16 @@ const Select = React.forwardRef(
       prop: open
     });
     const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-      () => selectedItem ? items.findIndex(
-        (item) => itemToValue(selectedItem) === itemToValue(item)
-      ) : -1
+      () => selectedItem ? items.findIndex((item) => selectedItem.value === item.value) : -1
     );
     const downshift$1 = downshift.useSelect({
       highlightedIndex,
-      isItemDisabled,
+      isItemDisabled: (item) => !!item.disabledReason,
       isOpen: placed,
       // @ts-expect-error -- no harm in supporting read only arrays
       items,
-      itemToKey: (item) => item !== null ? itemToValue(item) : item,
-      itemToString: (item) => item !== null ? itemToLabel(item) : "",
+      itemToKey: (item) => item !== null ? item.value : item,
+      itemToString: (item) => item !== null ? item.label : "",
       onHighlightedIndexChange(changes) {
         if ((changes.type === downshift.useSelect.stateChangeTypes.ItemMouseMove || changes.type === downshift.useSelect.stateChangeTypes.MenuMouseLeave) && isOpen || changes.isOpen) {
           setHighlightedIndex(changes.highlightedIndex);
@@ -415,7 +392,7 @@ const Select = React.forwardRef(
         setIsOpen(isOpen2);
       },
       onSelectedItemChange({ selectedItem: selectedItem2 }) {
-        forceValueChange(itemToValue(selectedItem2) ?? "");
+        forceValueChange(selectedItem2?.value ?? "");
       },
       selectedItem: selectedItem ?? null
     });
@@ -428,8 +405,7 @@ const Select = React.forwardRef(
         highlightedItem: items[highlightedIndex],
         isOpen,
         items,
-        itemToLabel,
-        itemToValue,
+        loading,
         onBlur,
         placed,
         selectedItem,
@@ -514,13 +490,13 @@ const ListboxVirtualized = React.forwardRef(({ children, highlightedItem, items,
         paddingBottom,
         paddingTop
       },
-      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsxs(
+      children: virtualItems.map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsxs(
         Skeleton.Box,
         {
           "data-index": virtualItem.index,
           ref: rowVirtualizer.measureElement,
           children: [
-            children(items[virtualItem.index]),
+            children(items[virtualItem.index], virtualItem.index),
             virtualItem.index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { pb: "2" })
           ]
         },
@@ -531,6 +507,56 @@ const ListboxVirtualized = React.forwardRef(({ children, highlightedItem, items,
 });
 ListboxVirtualized.displayName = "@optiaxiom/react/ListboxVirtualized";
 
+function useEffectEvent(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+const VIRTUALIZE_THRESHOLD = 50;
+const ListboxItemized = React.forwardRef(
+  ({
+    children,
+    empty = "No results found.",
+    highlightedItem,
+    items,
+    itemToKey,
+    loading,
+    onPlacedChange,
+    placed,
+    ...props
+  }, ref) => {
+    const onPlacedChangeStable = useEffectEvent(onPlacedChange ?? (() => {
+    }));
+    React.useEffect(() => {
+      requestAnimationFrame(() => onPlacedChangeStable(true));
+      return () => onPlacedChangeStable(false);
+    }, [onPlacedChangeStable]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Listbox,
+      {
+        asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD && placed,
+        ref,
+        tabIndex: -1,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? placed && /* @__PURE__ */ jsxRuntime.jsx(
+          ListboxVirtualized,
+          {
+            highlightedItem,
+            items,
+            children
+          }
+        ) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: children(item, index) }, itemToKey(item))) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { children: empty }) : items.length > 0 ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { children: empty })
+      }
+    );
+  }
+);
+ListboxItemized.displayName = "@optiaxiom/react/ListboxItemized";
+
 const SelectItem = React.forwardRef(
   ({ children, item, onMouseMove, size, ...props }, ref) => {
     const { downshift, highlightedItem, isOpen, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
@@ -573,74 +599,76 @@ const SelectRadioItem = React.forwardRef(
 );
 SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
 
-var content$3 = Skeleton.recipeRuntime({base:['fwayxp']});
-
 const SelectContent = React.forwardRef(
-  ({
-    align = "start",
-    children,
-    className,
-    loading,
-    side = "bottom",
-    ...props
-  }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+  ({ align = "start", children, side = "bottom", size, ...props }, ref) => {
     const {
       downshift,
       highlightedItem,
       isOpen,
       items,
-      itemToLabel,
-      itemToValue,
+      loading,
       placed,
       setPlaced
     } = useSelectContext("@optiaxiom/react/SelectContent");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.TransitionGroup,
+    let isFirstItem = true;
+    let lastGroup = void 0;
+    const shouldShowSeparator = (group) => {
+      const show = !isFirstItem;
+      isFirstItem = false;
+      return show && group && group !== lastGroup && group.separator;
+    };
+    const shouldShowGroup = (group) => {
+      const show = group !== lastGroup;
+      lastGroup = group;
+      return show && !group?.hidden;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.TransitionGroup, { open: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.OverlayListbox,
       {
-        onPresenceChange: (presence) => {
-          if (!presence) {
-            setPlaced(presence);
-          }
-        },
-        open: isOpen,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.MenuListbox,
+        asChild: true,
+        maxH: "sm",
+        minW: "trigger",
+        provider: "popper",
+        ref,
+        role: "dialog",
+        size,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactPopper.PopperContent, { align, side, sideOffset: 5, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ListboxItemized,
           {
-            asChild: true,
-            maxH: "sm",
-            minW: "trigger",
-            provider: "popper",
-            ...content$3({}, className),
-            ...boxProps,
-            ...downshift.getMenuProps(
-              { ref, ...restProps },
-              { suppressRefError: !placed }
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactPopper.PopperContent,
-              {
-                align,
-                asChild: !loading && typeof children === "function",
-                onPlaced: () => setPlaced(true),
-                side,
-                sideOffset: 5,
-                children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children ? typeof children === "function" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  ListboxVirtualized,
-                  {
-                    highlightedItem,
-                    items,
-                    children
-                  }
-                ) : children : items.map((item) => {
-                  return /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item, children: itemToLabel(item) }, itemToValue(item));
-                })
+            highlightedItem,
+            items,
+            itemToKey: (item) => item.value,
+            loading,
+            onPlacedChange: setPlaced,
+            placed,
+            ...downshift.getMenuProps({}, { suppressRefError: !placed }),
+            children: children ?? ((item, index) => {
+              if (index === 0) {
+                isFirstItem = true;
+                lastGroup = void 0;
               }
-            )
+              const group = item.group;
+              return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                shouldShowSeparator(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, {}),
+                shouldShowGroup(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { children: group.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SelectRadioItem,
+                  {
+                    addonBefore: item.addon,
+                    "aria-label": item["aria-label"],
+                    description: item.description,
+                    item,
+                    children: item.label
+                  },
+                  item.value
+                )
+              ] });
+            })
           }
-        ) }) })
+        ) })
       }
-    );
+    ) }) }) });
   }
 );
 SelectContent.displayName = "@optiaxiom/react/SelectContent";
@@ -673,7 +701,7 @@ const SelectTrigger = React.forwardRef(
     placeholder,
     ...props
   }, ref) => {
-    const { disabled, downshift, isOpen, itemToLabel, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
+    const { disabled, downshift, isOpen, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
     const { boxProps, restProps } = Skeleton.extractBoxProps(props);
     const buttonRef = React.useRef(null);
     const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
@@ -686,7 +714,7 @@ const SelectTrigger = React.forwardRef(
       },
       [focusOnOpen]
     );
-    const value = selectedItem ? itemToLabel(selectedItem) || placeholder : placeholder;
+    const value = selectedItem?.value ? selectedItem.label || placeholder : placeholder;
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactPopper.PopperAnchor,
       {
@@ -757,8 +785,8 @@ const Clock = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsxs(
         Select,
         {
-          items: hours,
           onValueChange: (hour) => hour && setValue(format({ ...parsed, hour })),
+          options: hours.map((hour) => ({ label: hour, value: hour })),
           value: parsed.hour,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select hour", flex: "1", placeholder: "HH" }),
@@ -769,28 +797,24 @@ const Clock = React.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsxs(
         Select,
         {
-          items: minutes,
           onValueChange: (minute) => minute && setValue(format({ ...parsed, minute })),
+          options: minutes.map((minute) => ({
+            ariaLabel: `${parseInt(minute)}`,
+            label: minute,
+            value: minute
+          })),
           value: parsed.minute,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select minute", flex: "1", placeholder: "MM" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: minutes.map((minute) => /* @__PURE__ */ jsxRuntime.jsx(
-              SelectRadioItem,
-              {
-                "aria-label": `${parseInt(minute)}`,
-                item: minute,
-                children: minute
-              },
-              minute
-            )) })
+            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
           ]
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
         Select,
         {
-          items: periods,
-          onValueChange: (meridiem) => meridiem && setValue(format({ ...parsed, meridiem })),
+          onValueChange: (meridiem) => (meridiem === "AM" || meridiem === "PM") && setValue(format({ ...parsed, meridiem })),
+          options: periods.map((period) => ({ label: period, value: period })),
           value: parsed.meridiem,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -838,8 +862,8 @@ function CalendarDay({ children, ...props }) {
 }
 CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
 
-var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',mt:'2',size:'md',transition:'colors'},'_1h13b5x'],variants:{appearance:{'default':'_1b49ntc',holiday:[{color:'fg.error'},'_1rm900o'],range_middle:'_479fpg',selected:[{color:'fg.white'},'pnh3z4'],weekend:[{color:'fg.tertiary'},'a1a5uk']},range:{end:['_150ve9g'],middle:['tvmewa'],start:['_19go4d4']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_5zsqp5']});
+var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1ey6956'],variants:{appearance:{'default':'o40pi0',holiday:[{color:'fg.error'},'_1bm3lkd'],range_middle:'qn7lxr',selected:[{color:'fg.white'},'_1jepfs1'],weekend:[{color:'fg.tertiary'},'p6usae']},range:{end:['_1opkj88'],middle:['_1chn8zi'],start:['wd69gz']}}});
+var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'itcpl5']});
 
 function CalendarDayButton({
   children,
@@ -859,10 +883,11 @@ function CalendarDayButton({
     Skeleton.Box,
     {
       asChild: true,
+      "data-disabled": modifiers.outside || props.disabled,
       ...button$2(
         {
           appearance: modifiers.range_middle ? "range_middle" : modifiers.selected ? "selected" : modifiers.holiday ? "holiday" : modifiers.weekend ? "weekend" : "default",
-          range: modifiers.range_start && modifiers.range_end ? void 0 : modifiers.range_start ? "start" : modifiers.range_middle ? "middle" : modifiers.range_end ? "end" : void 0
+          range: modifiers.outside || modifiers.range_start && modifiers.range_end ? void 0 : modifiers.range_start ? "start" : modifiers.range_middle ? "middle" : modifiers.range_end ? "end" : void 0
         },
         className
       ),
@@ -904,14 +929,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1w3br18']});
+var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'rj06bq']});
 
 function CalendarMonths({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
 }
 CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
 
-var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_84h1eu']});
+var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_2cl7kj']});
 
 function CalendarNav({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
@@ -937,7 +962,7 @@ function CalendarPreviousMonthButton({
 CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
 
 function CalendarWeek({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", gap: "2", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Week, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", gap: "2", mt: "2", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Week, { ...props, children }) });
 }
 CalendarWeek.displayName = "@optiaxiom/react/CalendarWeek";
 
@@ -1038,6 +1063,7 @@ const Calendar = React.forwardRef(
                 ...min ? [{ before: min }] : [],
                 ...max ? [{ after: max }] : []
               ],
+              fixedWeeks: mode === "range",
               mode,
               modifiers: { holiday, weekend },
               numberOfMonths: mode === "range" ? numberOfMonths : 1,
@@ -1048,6 +1074,7 @@ const Calendar = React.forwardRef(
               },
               required: true,
               selected: value,
+              showOutsideDays: mode === "range",
               today
             }
           ),
@@ -1076,7 +1103,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'_1bsyws2'});
+var root = Skeleton.recipeRuntime({base:'_1bo82hc'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1087,7 +1114,7 @@ ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-var card = Skeleton.recipeRuntime({base:['_9v3ucd',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'u4v2ms']});
+var card = Skeleton.recipeRuntime({base:['_1kedgbq',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1bpwocj']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -1119,7 +1146,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'jproer'],variants:{visible:{false:'ym8uww',true:'fign15'}}});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_4wyfzu'],variants:{visible:{false:'_2qrlrc',true:'y6tlr4'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
@@ -1128,7 +1155,7 @@ const ActionsContent = React.forwardRef(
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var action = Skeleton.recipeRuntime({base:['oxlg66']});
+var action = Skeleton.recipeRuntime({base:['r00ct0']});
 
 const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1164,7 +1191,7 @@ const CardCheckbox = React.forwardRef(
               shift: Boolean(children)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { id: labelPrefixId, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { id: labelPrefixId, children: [
             "Check to ",
             checked ? "unselect" : "select"
           ] }) })
@@ -1198,7 +1225,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_9fsv0m'],variants:{orientation:{horizontal:[{w:'auto'},'m10qi7'],vertical:[{w:'full'},'x4dzne']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1ivqld2'],variants:{orientation:{horizontal:[{w:'auto'},'_1kwxdnc'],vertical:[{w:'full'},'frlz6d']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -1224,7 +1251,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['_1lx6sij',{alignSelf:'stretch'},'nmpkrw'],variants:{orientation:{horizontal:['_1s6v127'],vertical:['_4rrvmw']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_147hzs6',{alignSelf:'stretch'},'fm7cxm'],variants:{orientation:{horizontal:['v3par3'],vertical:['_1cq1izs']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -1262,26 +1289,7 @@ const CardTitle = React.forwardRef(
 );
 CardTitle.displayName = "@optiaxiom/react/CardTitle";
 
-const [ComboboxProvider, useComboboxContext] = reactContext.createContext("@optiaxiom/react/Combobox");
-
-const ComboboxDialogContent = React.forwardRef(({ "aria-label": ariaLabel, children, minW: _minW, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.DialogContent, { ref, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { children: ariaLabel }) }),
-    children
-  ] });
-});
-ComboboxDialogContent.displayName = "@optiaxiom/react/ComboboxDialogContent";
-
-function ComboboxPopover(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { modal: true, ...props });
-}
-ComboboxPopover.displayName = "@optiaxiom/react/ComboboxPopover";
-
-const ComboboxPopoverContent = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
-});
-ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
-
+const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
 const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
 
 const collator = new Intl.Collator(void 0, {
@@ -1295,7 +1303,7 @@ function fuzzysearch(haystack, needle) {
     return false;
   }
   if (nlen === hlen) {
-    return needle === haystack;
+    return collator.compare(needle, haystack) === 0;
   }
   outer:
     for (let i = 0, j = 0; i < nlen; i++) {
@@ -1311,105 +1319,79 @@ function fuzzysearch(haystack, needle) {
 }
 
 const useCommandItems = ({
-  defaultFilter,
-  defaultItems,
-  inputValue: inputValueProp,
-  items: itemsProp,
-  itemToLabel,
-  onInputValueChange
+  inputValue,
+  options
 }) => {
-  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
-    defaultProp: "",
-    onChange: onInputValueChange,
-    prop: inputValueProp
+  const filterFn = useEffectEvent((item, inputValue2) => {
+    const string = resolveItemProperty(item.label, {
+      inputValue: inputValue2
+    }).normalize();
+    return item.visible ? resolveItemProperty(item.visible, { inputValue: inputValue2 }) : inputValue2 ? fuzzysearch(string, inputValue2) || item.keywords && fuzzysearch(item.keywords, inputValue2) : true;
   });
-  const filterFn = useEffectEvent(
-    defaultFilter ?? ((item, inputValue2) => {
-      const string = itemToLabel(item).normalize();
-      return fuzzysearch(string, inputValue2);
-    })
-  );
-  const [itemsState, setItemsState] = React.useState(
-    defaultItems ? filter(defaultItems, inputValue, filterFn) : []
-  );
-  const items = typeof itemsProp !== "undefined" ? itemsProp : itemsState;
-  return [
-    items,
-    inputValue,
-    useEffectEvent((inputValue2) => {
-      setInputValue(inputValue2);
-      if (typeof itemsProp === "undefined" && defaultItems) {
-        setItemsState(filter(defaultItems, inputValue2, filterFn));
-      }
-    })
-  ];
-};
-const filter = (items, inputValue, filterFn) => {
-  const substring = (inputValue ?? "").normalize();
-  return inputValue ? items.filter((item) => filterFn(item, substring)) : items;
+  return React.useMemo(() => {
+    const substring = (inputValue ?? "").normalize();
+    const callback = (parentOption) => (item) => {
+      return item.subOptions && substring ? item.subOptions.flatMap(callback(item)) : filterFn(item, substring) ? [
+        parentOption ? {
+          ...item,
+          parentOption
+        } : item
+      ] : [];
+    };
+    return options.flatMap(callback());
+  }, [options, filterFn, inputValue]);
 };
 
 function Command({
   children,
-  defaultFilter,
-  defaultItems,
+  empty,
   inputValue: inputValueProp,
-  isItemDisabled = () => false,
-  isItemSelected = () => false,
-  items: itemsProp,
-  itemToLabel = (value) => value ? String(value) : "",
-  itemToSubItems,
+  loading,
+  onHover,
   onInputValueChange,
-  onItemSelect
+  onSelect: onItemSelect,
+  options
 }) {
-  const [items, inputValue, setInputValue] = useCommandItems({
-    defaultFilter,
-    defaultItems,
-    inputValue: inputValueProp,
-    items: itemsProp,
-    itemToLabel,
-    onInputValueChange
+  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
   });
-  const [lastInteractionSource, setLastInteractionSource] = React.useState("pointer");
+  const items = useCommandItems({ inputValue, options });
   const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    () => items.findIndex((item, index) => isItemSelected(item, index))
+    () => items.findIndex((item) => resolveItemProperty(item.selected))
   );
-  const [highlightedSubIndex, setHighlightedSubIndex] = React.useState(-1);
+  const setInputValueStable = useEffectEvent(setInputValue);
+  React.useEffect(() => {
+    if (placed) {
+      setInputValueStable("");
+    }
+  }, [placed, setInputValueStable]);
+  const pauseInteractionRef = React.useRef({
+    isInsideTriangle: null,
+    timer: void 0
+  });
   const downshift$1 = downshift.useCombobox({
-    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
+    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
     inputValue,
-    isItemDisabled,
+    isItemDisabled: (item) => Boolean(resolveItemProperty(item?.disabledReason)),
     isOpen: placed,
-    // @ts-expect-error -- no harm in supporting read only arrays
     items,
-    itemToString: (item) => item !== null ? itemToLabel(item) : "",
+    itemToString: (item) => item !== null ? resolveItemProperty(item.label, { inputValue }) : "",
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave) {
-        setHighlightedIndex(highlightedIndex2);
-      }
-      if (type === downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp || type === downshift.useCombobox.stateChangeTypes.InputKeyDownPageDown || type === downshift.useCombobox.stateChangeTypes.InputKeyDownPageUp) {
-        setLastInteractionSource("keyboard");
-      } else {
-        setLastInteractionSource("pointer");
-      }
-      if (highlightedIndex2 !== -1 && itemToSubItems?.(items[highlightedIndex2])?.length) {
-        setHighlightedSubIndex(0);
-      } else {
-        setHighlightedSubIndex(-1);
+      if (type === downshift.useCombobox.stateChangeTypes.MenuMouseLeave) {
+        return;
       }
-    },
-    onIsOpenChange({ isOpen, type }) {
-      if (isOpen) {
-        if (type === downshift.useCombobox.stateChangeTypes.InputClick || type === downshift.useCombobox.stateChangeTypes.ToggleButtonClick) {
-          setLastInteractionSource("pointer");
-        } else {
-          setLastInteractionSource("keyboard");
-        }
+      setHighlightedIndex(highlightedIndex2);
+      if (highlightedIndex2 !== -1 && type === downshift.useCombobox.stateChangeTypes.ItemMouseMove) {
+        onHover?.(items[highlightedIndex2]);
       }
     },
     onSelectedItemChange({ selectedItem, type }) {
       if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
-        onItemSelect?.(selectedItem);
+        onItemSelect?.(selectedItem, {
+          close: type !== downshift.useCombobox.stateChangeTypes.FunctionSelectItem || !("selected" in selectedItem)
+        });
       }
     },
     selectedItem: null,
@@ -1424,6 +1406,7 @@ function Command({
             ...changes,
             /**
              * Keep the selected option highlighted rather than resetting to -1
+             * TODO: reset if activePath had values
              */
             highlightedIndex: state.highlightedIndex
           };
@@ -1438,30 +1421,15 @@ function Command({
     CommandProvider,
     {
       downshift: downshift$1,
+      empty,
       highlightedItem: items[downshift$1.highlightedIndex],
-      highlightedSubIndex: highlightedSubIndex === -1 && items[downshift$1.highlightedIndex] && itemToSubItems?.(items[downshift$1.highlightedIndex])?.length ? 0 : highlightedSubIndex,
-      isItemDisabled,
-      isItemSelected,
+      inputValue,
       items,
-      itemToLabel,
-      itemToSubItems,
-      lastInteractionSource,
+      loading,
+      pauseInteractionRef,
       placed,
-      setHighlightedIndex: (index, source) => {
-        setHighlightedIndex(index);
-        setLastInteractionSource(source);
-      },
-      setHighlightedSubIndex: (index, source) => {
-        setHighlightedSubIndex(index);
-        setLastInteractionSource(source);
-      },
-      setInputValue: useEffectEvent((newInputValue) => {
-        if (inputValue === "" && newInputValue === "") {
-          onInputValueChange?.("");
-        } else {
-          setInputValue(newInputValue);
-        }
-      }),
+      setHighlightedIndex,
+      setInputValue,
       setPlaced,
       children
     }
@@ -1469,106 +1437,19 @@ function Command({
 }
 Command.displayName = "@optiaxiom/react/Command";
 
-function Combobox({
-  children,
-  defaultOpen = false,
-  onOpenChange,
-  open: openProp,
-  ...props
-}) {
-  const components = useResponsiveMatches({
-    base: {
-      Content: ComboboxDialogContent,
-      Root: Skeleton.Dialog,
-      Trigger: Skeleton.DialogTrigger
-    },
-    sm: {
-      Content: ComboboxPopoverContent,
-      Root: ComboboxPopover,
-      Trigger: Skeleton.PopoverTrigger
-    }
-  });
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxProvider, { components, open, setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Command, { ...props, children }) }) });
-}
-Combobox.displayName = "@optiaxiom/react/Combobox";
-
-var item$2 = Skeleton.recipeRuntime({base:'_14286wt'});
-
-const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { lastInteractionSource } = useCommandContext(
-    "@optiaxiom/react/CommandFocusableItem"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Box,
-    {
-      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : void 0,
-      ref,
-      ...item$2({}, className),
-      ...props,
-      children
-    }
-  );
-});
-CommandFocusableItem.displayName = "@optiaxiom/react/CommandFocusableItem";
-
-const CommandItem = React.forwardRef(
-  ({ children, item, selected, size, ...props }, ref) => {
-    const { downshift, highlightedItem, isItemSelected, items } = useCommandContext("@optiaxiom/react/CommandItem");
-    const itemProps = downshift.getItemProps({
-      "aria-selected": selected ?? isItemSelected(item, items.indexOf(item)),
-      item,
-      ref,
-      ...props
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      CommandFocusableItem,
-      {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        size,
-        tabIndex: -1,
-        ...itemProps,
-        children
-      }
-    );
-  }
-);
-CommandItem.displayName = "@optiaxiom/react/CommandItem";
-
-const ComboboxItem = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
-);
-ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
-
-const ComboboxCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxCheckboxItem, { children }) });
-});
-ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
-
 const CommandInput = React.forwardRef(
   ({ onKeyDown, size, ...props }, ref) => {
-    const {
-      downshift,
-      highlightedItem,
-      highlightedSubIndex,
-      itemToSubItems,
-      setHighlightedSubIndex,
-      setInputValue
-    } = useCommandContext("@optiaxiom/react/CommandInput");
-    React.useEffect(() => {
-      setInputValue("");
-    }, [setInputValue]);
+    const { downshift, highlightedItem, setInputValue } = useCommandContext(
+      "@optiaxiom/react/CommandInput"
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton.Input,
       {
         addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
+        htmlSize: 1,
         size,
         ...downshift.getInputProps({
+          ref,
           ...props,
           onChange: (event) => {
             setInputValue("value" in event.target ? event.target.value : "");
@@ -1578,31 +1459,24 @@ const CommandInput = React.forwardRef(
             if (event.defaultPrevented) {
               return;
             }
-            if (highlightedItem && highlightedSubIndex !== -1 && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Enter")) {
-              const subItems = itemToSubItems?.(highlightedItem) ?? [];
-              if (subItems.length === 0) {
-                return;
-              }
+            if (!(event.target instanceof HTMLInputElement)) {
+              return;
+            }
+            if (event.target.value) {
+              return;
+            }
+            if (!highlightedItem) {
+              return;
+            }
+            const subOptions = highlightedItem.subOptions;
+            if (event.key === " ") {
               event.preventDefault();
-              Object.assign(event.nativeEvent, {
-                preventDownshiftDefault: true
-              });
-              if (event.key === "ArrowRight") {
-                setHighlightedSubIndex(
-                  highlightedSubIndex === subItems.length - 1 ? 0 : highlightedSubIndex + 1,
-                  "keyboard"
-                );
-              } else if (event.key === "ArrowLeft") {
-                setHighlightedSubIndex(
-                  highlightedSubIndex === 0 ? subItems.length - 1 : highlightedSubIndex - 1,
-                  "keyboard"
-                );
-              } else if (event.key === "Enter") {
-                downshift.selectItem(subItems[highlightedSubIndex]);
-              }
+              downshift.selectItem(highlightedItem);
+            } else if (event.key === "ArrowRight" && subOptions?.length) {
+              event.preventDefault();
+              downshift.selectItem(highlightedItem);
             }
-          },
-          ref
+          }
         })
       }
     );
@@ -1610,171 +1484,97 @@ const CommandInput = React.forwardRef(
 );
 CommandInput.displayName = "@optiaxiom/react/CommandInput";
 
-const ComboboxInput = React.forwardRef(
-  (props, ref) => {
-    const { downshift, highlightedItem } = useCommandContext(
-      "@optiaxiom/react/ComboboxInput"
-    );
-    const { open } = useComboboxContext("@optiaxiom/react/ComboboxInput");
-    const [minWidth, setMinWidth] = React.useState(160);
-    const containerRef = React.useRef(null);
-    React.useEffect(() => {
-      if (!containerRef.current) {
-        return;
-      }
-      const rect = containerRef.current.getBoundingClientRect();
-      if (open && rect.width > minWidth) {
-        setMinWidth(rect.width);
+const CommandItem = React.forwardRef(
+  ({ asChild, children, item, selected, size, ...props }, ref) => {
+    const { downshift, highlightedItem, inputValue, pauseInteractionRef } = useCommandContext("@optiaxiom/react/CommandItem");
+    const itemProps = downshift.getItemProps({
+      "aria-selected": selected ?? resolveItemProperty(item.selected),
+      item,
+      onClick: (event) => {
+        if (event.currentTarget instanceof HTMLAnchorElement) {
+          event.preventDefault();
+        }
+      },
+      onMouseMove: (event) => {
+        if (resolveItemProperty(item.disabledReason)) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+          return;
+        }
+        if (!pauseInteractionRef.current.isInsideTriangle) {
+          return;
+        }
+        if (pauseInteractionRef.current.isInsideTriangle({
+          x: event.clientX,
+          y: event.clientY
+        })) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+          window.clearTimeout(pauseInteractionRef.current.timer);
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.isInsideTriangle = null;
+          }, 50);
+        } else {
+          pauseInteractionRef.current.isInsideTriangle = null;
+        }
+      },
+      ref,
+      ...props
+    });
+    const detail = resolveItemProperty(item.detail, { inputValue });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Box,
+      {
+        asChild,
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        size,
+        tabIndex: -1,
+        ...itemProps,
+        ...item.link && { href: item.link },
+        children: Skeleton.decorateChildren(
+          { asChild, children },
+          (children2) => children2 ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            item.parentOption && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", children: resolveItemProperty(item.parentOption.label, {
+                inputValue
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}) })
+            ] }),
+            resolveItemProperty(item.label, { inputValue }),
+            detail && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", children: detail })
+          ] })
+        )
       }
-    }, [downshift.inputValue, minWidth, open]);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
-      CommandInput,
+    );
+  }
+);
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
+
+const CommandListbox = React.forwardRef(
+  ({ children, size, ...props }, ref) => {
+    const { downshift, highlightedItem, inputValue, items, placed, setPlaced } = useCommandContext("@optiaxiom/react/CommandListbox");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ListboxItemized,
       {
-        htmlSize: 1,
-        m: "4",
-        onKeyDown: (event) => {
-          if (!(event.target instanceof HTMLInputElement)) {
-            return;
-          }
-          if (event.key === " " && !event.target.value) {
-            event.preventDefault();
-            downshift.selectItem(highlightedItem);
-          }
-        },
-        ref,
-        ...props
-      }
-    ) });
-  }
-);
-ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
-
-const ComboboxRadioItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
-});
-ComboboxRadioItem.displayName = "@optiaxiom/react/ComboboxRadioItem";
-
-const VIRTUALIZE_THRESHOLD = 50;
-const CommandListbox = React.forwardRef(
-  ({ children, empty = "No results found.", loading, size, ...props }, ref) => {
-    const { downshift, highlightedItem, items, placed, setPlaced } = useCommandContext("@optiaxiom/react/CommandListbox");
-    React.useEffect(() => {
-      requestAnimationFrame(() => setPlaced(true));
-      return () => setPlaced(false);
-    }, [setPlaced]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Listbox,
-      {
-        asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD && placed,
+        highlightedItem,
+        items,
+        itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
+        onPlacedChange: setPlaced,
+        placed,
         size,
         ...downshift.getMenuProps({ ref, ...props }),
-        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? placed && /* @__PURE__ */ jsxRuntime.jsx(
-          ListboxVirtualized,
-          {
-            highlightedItem,
-            items,
-            children
-          }
-        ) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: children(item) }, index)) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { children: empty }) : items.length > 0 ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { children: empty })
+        children
       }
     );
   }
 );
 CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
 
-const ComboboxListbox = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    const { itemToLabel } = useCommandContext(
-      "@optiaxiom/react/ComboboxListbox"
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, tabIndex: -1, ...props, children: children ?? ((item) => /* @__PURE__ */ jsxRuntime.jsx(ComboboxRadioItem, { item, children: itemToLabel(item) })) });
-  }
-);
-ComboboxListbox.displayName = "@optiaxiom/react/ComboboxListbox";
-
-const ComboboxContent = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    const p = useResponsiveMatches({
-      base: "8",
-      sm: "4"
-    });
-    const { labelId } = Skeleton.useFieldContext();
-    const { components } = useComboboxContext(
-      "@optiaxiom/react/ComboboxContent"
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      components.Content,
-      {
-        "aria-labelledby": labelId,
-        overflow: "hidden",
-        p,
-        ref,
-        ...props,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ComboboxInput, { placeholder: "Search..." }),
-          /* @__PURE__ */ jsxRuntime.jsx(ComboboxListbox, {})
-        ] })
-      }
-    );
-  }
-);
-ComboboxContent.displayName = "@optiaxiom/react/ComboboxContent";
-
-const ComboboxFooter = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxFooter, { ref, ...props });
-  }
-);
-ComboboxFooter.displayName = "@optiaxiom/react/ComboboxFooter";
-
-const ComboboxGroup = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxGroup, { ref, ...props });
-  }
-);
-ComboboxGroup.displayName = "@optiaxiom/react/ComboboxGroup";
-
-const ComboboxLabel = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { ref, ...props });
-  }
-);
-ComboboxLabel.displayName = "@optiaxiom/react/ComboboxLabel";
-
-const ComboboxSeparator = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { ref, ...props });
-});
-ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
-
-const ComboboxTrigger = React.forwardRef(
-  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
-    const { components, setOpen } = useComboboxContext(
-      "@optiaxiom/react/ComboboxTrigger"
-    );
-    const buttonRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      components.Trigger,
-      {
-        "aria-labelledby": labelId,
-        asChild: true,
-        onKeyDown: (event) => {
-          switch (event.key) {
-            case "ArrowDown":
-            case "ArrowUp":
-              setOpen(true);
-          }
-        },
-        ref,
-        ...props,
-        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
-      }
-    );
-  }
-);
-ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
-
 const [DataTableProvider, useDataTableContext] = reactContext.createContext("@optiaxiom/react/DataTable");
 
 const DataTable = React.forwardRef(
@@ -1840,17 +1640,17 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_22k295'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'pafxzm']});
+var cell$2 = Skeleton.recipeRuntime({base:'_17zicgj'});
+var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_12glaqo']});
 
 const TableHeaderCell = React.forwardRef(
   ({ children, className, colSpan, p, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), px: p ?? px, py: p ?? py, children }) }) })
 );
 TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
 
-var button$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1kzywp6']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'xuzae'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_12oj5j7'],variants:{active:{false:'_1usa78f',true:'_1ytyt7y'}}});
+var button$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1j2rrz']});
+var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_1h86772'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1k4k6rc'],variants:{active:{false:'_1dr0ifh',true:'_1ahof'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1879,7 +1679,7 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
         ) }),
         header.column.columnDef.enableSorting ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Cover, { asChild: true, inset: true, ...button$1(), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
           children,
-          sortDir && /* @__PURE__ */ jsxRuntime.jsxs(reactVisuallyHidden.VisuallyHidden, { children: [
+          sortDir && /* @__PURE__ */ jsxRuntime.jsxs(RadixVisuallyHidden.VisuallyHidden, { children: [
             "sorted ",
             sortDir === "asc" ? "ascending" : "descending"
           ] }),
@@ -1903,22 +1703,22 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
 });
 DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
 
-var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'_19hiexi'],variants:{layout:{auto:['lpim7t'],fixed:[{display:'grid'},'_448yrh']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_1gftj40']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'_1x7yaoc'],variants:{layout:{auto:['_17chxsm'],fixed:[{display:'grid'},'hpv250']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_77vhxu']});
 
 const Table = React.forwardRef(
   ({ children, className, layout = "auto", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...wrapper({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...table$1({ layout }), children: /* @__PURE__ */ jsxRuntime.jsx("table", { children }) }) })
 );
 Table.displayName = "@optiaxiom/react/Table";
 
-var body = Skeleton.recipeRuntime({base:['jli4x9']});
+var body = Skeleton.recipeRuntime({base:['x2j69j']});
 
 const TableBody = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...body({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, children }) })
 );
 TableBody.displayName = "@optiaxiom/react/TableBody";
 
-var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'p72438']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_159f5re']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1930,20 +1730,20 @@ TableCell.displayName = "@optiaxiom/react/TableCell";
 const TableHeader = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, children }) }));
 TableHeader.displayName = "@optiaxiom/react/TableHeader";
 
-var row = Skeleton.recipeRuntime({base:['_14xes2s',{transition:'colors',w:'full'},'_1qlkiw3']});
+var row = Skeleton.recipeRuntime({base:['_1urd86t',{transition:'colors',w:'full'},'_2wamft']});
 
 const TableRow = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...row({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, children }) }) })
 );
 TableRow.displayName = "@optiaxiom/react/TableRow";
 
-var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1iuw7iz'],variants:{pinned:{left:'y2wztl',right:'n26krp'},pinnedType:{body:'_1k2vu7v',header:{}}}});
-var cellOffsetVar = 'var(--_1r7wj72)';
-var cellSizeVar = 'var(--oqs8rg)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_1dvu9uq']});
-var leftTotalSizeVar = 'var(--_12zd1fa)';
-var rightTotalSizeVar = 'var(--dm8p5p)';
-var table = Skeleton.recipeRuntime({base:'cl3n7r',variants:{pinned:{both:'_1v0nhcu',left:'_1xvq3du',none:{},right:'tjzwgn'}}});
+var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'w3f2u6'],variants:{pinned:{left:'przi2k',right:'_4hhea2'},pinnedType:{body:'jer5ns',header:{}}}});
+var cellOffsetVar = 'var(--_1mtov39)';
+var cellSizeVar = 'var(--_10b0tf5)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_1poq2ke']});
+var leftTotalSizeVar = 'var(--_1tj311f)';
+var rightTotalSizeVar = 'var(--_1ygqjbh)';
+var table = Skeleton.recipeRuntime({base:'_1ys8i5x',variants:{pinned:{both:'_1ysbnzx',left:'_1fzpktf',none:{},right:'_18j0pz7'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
@@ -2121,9 +1921,12 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
-var addon = Skeleton.recipeRuntime({base:'w0mlxs',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = Skeleton.recipeRuntime({base:'_732vsj',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
-const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
+const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({
+  label: size,
+  value: size
+}));
 const DataTableFooter = React.forwardRef(
   ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
     const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
@@ -2145,8 +1948,8 @@ const DataTableFooter = React.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsxs(
               Select,
               {
-                items: pageSizeOptions,
                 onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
+                options: pageSizeOptions,
                 value: pagination.pageSize.toString(),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -2203,7 +2006,7 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_3xxe0i'});
+var picker = Skeleton.recipeRuntime({base:'_4cn5iy'});
 
 function toInstant(str) {
   const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
@@ -2377,7 +2180,7 @@ function DatePicker({
 }
 DatePicker.displayName = "@optiaxiom/react/DatePicker";
 
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1jbn8se']});
+var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'n36163']});
 
 const DatePickerContent = React.forwardRef(
   ({
@@ -2504,7 +2307,7 @@ function DateRangePicker({
 }
 DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
 
-var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_142opfz']});
+var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});
 
 const DateRangePickerContent = React.forwardRef(
   ({
@@ -2536,6 +2339,7 @@ const DateRangePickerContent = React.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(
           Calendar,
           {
+            alignSelf: "start",
             holiday,
             max,
             min,
@@ -2607,124 +2411,7 @@ const DateRangePickerTrigger = React.forwardRef(
 );
 DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
 
-const [DropdownMenuComboboxProvider, useDropdownMenuComboboxContext] = reactContext.createContext("@optiaxiom/react/DropdownMenuCombobox");
-
-function DropdownMenuCombobox({
-  children,
-  defaultOpen,
-  onItemSelect,
-  onOpenChange,
-  open: openProp,
-  ...props
-}) {
-  const { setOpen: setOpenRoot } = Skeleton.useDropdownMenuContext(
-    "@optiaxiom/react/DropdownMenuCombobox"
-  );
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const inputRef = React.useRef(null);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DropdownMenuSub, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxProvider, { inputRef, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Command,
-    {
-      onItemSelect: (item) => {
-        onItemSelect?.(item);
-        setOpenRoot(false);
-      },
-      ...props,
-      children
-    }
-  ) }) });
-}
-DropdownMenuCombobox.displayName = "@optiaxiom/react/DropdownMenuCombobox";
-
-const DropdownMenuComboboxInput = React.forwardRef((props, outerRef) => {
-  const { downshift, highlightedItem } = useCommandContext(
-    "@optiaxiom/react/DropdownMenuComboboxInput"
-  );
-  const { inputRef } = useDropdownMenuComboboxContext(
-    "@optiaxiom/react/DropdownMenuComboboxInput"
-  );
-  const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandInput,
-    {
-      htmlSize: 10,
-      m: "4",
-      onKeyDown: (event) => {
-        if (!(event.target instanceof HTMLInputElement)) {
-          return;
-        }
-        if (event.key === " " && !event.target.value) {
-          event.preventDefault();
-          downshift.selectItem(highlightedItem);
-        }
-      },
-      ref,
-      ...props
-    }
-  );
-});
-DropdownMenuComboboxInput.displayName = "@optiaxiom/react/DropdownMenuComboboxInput";
-
-const DropdownMenuAutocompleteItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxItem, { children }) });
-});
-DropdownMenuAutocompleteItem.displayName = "@optiaxiom/react/DropdownMenuAutocompleteItem";
-
-const DropdownMenuComboboxListbox = React.forwardRef(({ children, ...props }, ref) => {
-  const { itemToLabel } = useCommandContext(
-    "@optiaxiom/react/DropdownMenuComboboxListbox"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, ...props, children: children ?? ((item) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuAutocompleteItem, { item, children: itemToLabel(item) }, item)) });
-});
-DropdownMenuComboboxListbox.displayName = "@optiaxiom/react/DropdownMenuComboboxListbox";
-
-const DropdownMenuComboboxContent = React.forwardRef(({ children, onMouseMove, ...props }, outerRef) => {
-  const { presence } = Skeleton.useDropdownMenuSubContext(
-    "@optiaxiom/react/DropdownMenuComboboxContent"
-  );
-  const { inputRef } = useDropdownMenuComboboxContext(
-    "@optiaxiom/react/DropdownMenuComboboxContent"
-  );
-  const innerRef = React.useRef(null);
-  const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-  React.useEffect(() => {
-    const container = innerRef.current;
-    if (!container || !presence) {
-      return;
-    }
-    const listener = () => inputRef.current?.focus();
-    container.addEventListener("focus", listener);
-    return () => container.removeEventListener("focus", listener);
-  }, [inputRef, presence]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.DropdownMenuSubContent,
-    {
-      onMouseMove: (event) => {
-        onMouseMove?.(event);
-        inputRef.current?.focus();
-      },
-      ref,
-      role: "dialog",
-      ...props,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxInput, { placeholder: "Search..." }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuComboboxListbox, {})
-      ] })
-    }
-  );
-});
-DropdownMenuComboboxContent.displayName = "@optiaxiom/react/DropdownMenuComboboxContent";
-
-const DropdownMenuComboboxTrigger = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DropdownMenuSubTrigger, { "aria-haspopup": "dialog", ref, ...props });
-});
-DropdownMenuComboboxTrigger.displayName = "@optiaxiom/react/DropdownMenuComboboxTrigger";
-
-var mark = Skeleton.recipeRuntime({base:'i6obck'});
+var mark = Skeleton.recipeRuntime({base:'_2x8rug'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2756,8 +2443,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'_7a7gm',variants:{empty:{false:{},true:'v0acjn'}}});
-var input$1 = Skeleton.recipeRuntime({base:'w0lpc1'});
+var editor = Skeleton.recipeRuntime({base:'clqaag',variants:{empty:{false:{},true:'xrqdqk'}}});
+var input$1 = Skeleton.recipeRuntime({base:'d09sm7'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2837,7 +2524,7 @@ function getText(element) {
   return text;
 }
 
-var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'k31rlt']});
+var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'t574ao']});
 var content = Skeleton.recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
 var label = Skeleton.recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
 
@@ -2868,7 +2555,7 @@ const LabelMenuButton = React.forwardRef(
 );
 LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
 
-var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'ikdrzs']});
+var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1p9zzr2']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -2893,289 +2580,587 @@ const Layout = React.forwardRef(
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_18b6ch8'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
-
-const Pill = React.forwardRef(
-  ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
-      {
-        asChild: true,
-        "data-disabled": disabled ? "" : void 0,
-        ...pill({ size }, className),
-        ...boxProps,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { disabled, ref, ...restProps, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { truncate: true, children }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}) })
-        ] })
-      }
-    );
-  }
-);
-Pill.displayName = "@optiaxiom/react/Pill";
-
-const PillGroup = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "12", ref, ...props, children });
-  }
-);
-PillGroup.displayName = "@optiaxiom/react/PillGroup";
+const [MenuProvider, useMenuContext] = reactContext.createContext("@optiaxiom/react/Menu");
 
-const SelectGroup = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxGroup, { ref, ...props });
-  }
-);
-SelectGroup.displayName = "@optiaxiom/react/SelectGroup";
-
-const SelectLabel = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { ref, ...props });
-  }
-);
-SelectLabel.displayName = "@optiaxiom/react/SelectLabel";
-
-const SelectSeparator = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { ref, ...props });
-  }
-);
-SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
-
-const [SpotlightProvider, useSpotlightContext] = reactContext.createContext("@optiaxiom/react/Spotlight");
+function MenuPopover(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { modal: true, ...props });
+}
+MenuPopover.displayName = "@optiaxiom/react/MenuPopover";
 
-function Spotlight({
+function Menu({
   children,
+  defaultInputVisible,
   defaultOpen = false,
+  inputValue: inputValueProp,
+  onInputValueChange,
   onOpenChange,
   open: openProp,
+  options: optionsProp,
+  placeholder = "Filter...",
+  size: sizeProp,
   ...props
 }) {
+  const size = useResponsiveMatches({
+    base: "lg",
+    sm: sizeProp ?? "sm"
+  });
+  const Comp = size === "sm" ? MenuPopover : Skeleton.Dialog;
   const [open, setOpen] = reactUseControllableState.useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(SpotlightProvider, { open, setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Command, { ...props, children }) }) });
-}
-Spotlight.displayName = "@optiaxiom/react/Spotlight";
-
-const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children, size: _size, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Skeleton.DialogContent,
-    {
-      gap: "0",
-      overflow: "hidden",
-      pb: "24",
-      ref,
-      transitionType: "pop",
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { children: ariaLabel ?? "Quick search" }) }),
-        children
-      ]
+  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
+  });
+  const [activePath, setActivePath] = React.useState([]);
+  React.useEffect(() => {
+    if (inputValue && size === "sm") {
+      setActivePath((path) => path.length ? [] : path);
     }
+  }, [inputValue, size]);
+  React.useEffect(() => {
+    if (size === "sm") {
+      if (!open) {
+        setActivePath((path) => path.length ? [] : path);
+      }
+    } else {
+      if (open) {
+        setActivePath((path) => path.length ? [] : path);
+      }
+    }
+  }, [open, size]);
+  const inputRef = React.useRef(null);
+  const options = React.useMemo(
+    () => activePath.length && size === "lg" ? activePath.reduce(
+      (result, index) => result[index].subOptions ?? [],
+      optionsProp
+    ) : size === "sm" ? optionsProp.map((option) => ({
+      ...option,
+      label: option.subOptions ? resolveItemProperty(option.label, { inputValue }).replace(
+        "\u2026",
+        ""
+      ) : resolveItemProperty(option.label, { inputValue })
+    })) : optionsProp,
+    [activePath, inputValue, optionsProp, size]
   );
-});
-SpotlightContent.displayName = "@optiaxiom/react/SpotlightContent";
+  const hasSelectableItem = React.useMemo(
+    () => options.some((item) => "selected" in item),
+    [options]
+  );
+  const inputDefaultVisibleRef = React.useRef(hasSelectableItem);
+  inputDefaultVisibleRef.current = hasSelectableItem || defaultInputVisible || false;
+  const [inputVisible, setInputVisible] = React.useState(
+    inputDefaultVisibleRef.current
+  );
+  React.useEffect(() => {
+    if (inputValue) {
+      setInputVisible(true);
+    }
+  }, [inputValue]);
+  React.useEffect(() => {
+    if (open) {
+      setInputVisible(inputDefaultVisibleRef.current);
+    }
+  }, [open]);
+  React.useEffect(() => {
+    if (size === "lg") {
+      setInputVisible(inputDefaultVisibleRef.current);
+    }
+  }, [activePath, size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MenuProvider,
+    {
+      activePath,
+      inputRef,
+      inputVisible,
+      onSelect: (item, { close }) => {
+        item.execute?.({ inputValue });
+        if (typeof openProp === "undefined" && close) {
+          setOpen(false);
+        }
+      },
+      open,
+      placeholder,
+      setActivePath,
+      setOpen,
+      size,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Command,
+        {
+          inputValue,
+          onHover: (item) => {
+            if (item.subOptions?.length) {
+              const index = options.indexOf(item);
+              setActivePath((path) => !path.includes(index) ? [index] : path);
+            } else {
+              setActivePath((path) => path.length ? [] : path);
+            }
+          },
+          onInputValueChange: setInputValue,
+          onSelect: (item, { close }) => {
+            if (item.subOptions?.length) {
+              const index = options.indexOf(item);
+              setActivePath(
+                (path) => path.at(-1) !== index ? [...path, index] : path
+              );
+            } else {
+              item.execute?.({ inputValue });
+              if (typeof openProp === "undefined" && close) {
+                setOpen(false);
+              }
+            }
+          },
+          options,
+          ...props,
+          children
+        }
+      )
+    }
+  ) });
+}
+Menu.displayName = "@optiaxiom/react/Menu";
 
-const SpotlightEmpty = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { fontSize: "lg", gap: "12", p: "32", ref, ...props });
+const MenuDialogContent = React.forwardRef(
+  ({
+    align: _align,
+    "aria-label": ariaLabel,
+    children,
+    side: _side,
+    sideOffset: _sideOffset,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.DialogContent, { ref, transitionType: "pop", ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogHeader, { children: ariaLabel }) }),
+      children
+    ] });
   }
 );
-SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
+MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1e8glwj']});
+var input = Skeleton.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1hote6u']}}});
 
-const SpotlightInput = React.forwardRef(
-  ({ addonAfter, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+const MenuInput = React.forwardRef(
+  ({ className, ...props }, outerRef) => {
+    const { inputRef, open, size } = useMenuContext(
+      "@optiaxiom/react/MenuInput"
+    );
+    const { downshift } = useCommandContext("@optiaxiom/react/MenuInput");
+    const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
+    const [minWidth, setMinWidth] = React.useState(160);
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!containerRef.current) {
+        return;
+      }
+      const rect = containerRef.current.getBoundingClientRect();
+      if (open && rect.width > minWidth) {
+        setMinWidth(rect.width);
+      }
+    }, [downshift.inputValue, minWidth, open]);
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
       CommandInput,
       {
-        addonAfter: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", children: [
-          addonAfter,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.DialogClose,
-            {
-              appearance: "default",
-              fontSize: "xs",
-              fontWeight: "500",
-              h: "xs",
-              size: "sm",
-              children: "ESC"
-            }
-          )
-        ] }),
-        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
         ref,
-        size: "xl",
-        ...input({}, className),
+        size: size === "sm" ? "md" : "xl",
+        ...input({ size }, className),
         ...props
       }
-    );
+    ) });
   }
 );
-SpotlightInput.displayName = "@optiaxiom/react/SpotlightInput";
+MenuInput.displayName = "@optiaxiom/react/MenuInput";
+
+const MenuCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
+  const Comp = props.item.link ? "a" : "div";
+  const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton.ListboxCheckboxItem,
+    {
+      addonBefore: props.item.addon,
+      asChild: true,
+      description: props.item.description,
+      onCheckedChange: () => props.item.execute?.({ inputValue }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+    }
+  ) });
+});
+MenuCheckboxItem.displayName = "@optiaxiom/react/MenuCheckboxItem";
 
-const SpotlightItem = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
+const MenuItem = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    const Comp = props.item.link ? "a" : "div";
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.ListboxItem,
+      {
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+      }
+    ) });
+  }
 );
-SpotlightItem.displayName = "@optiaxiom/react/SpotlightItem";
+MenuItem.displayName = "@optiaxiom/react/MenuItem";
 
-const SpotlightLabel = React.forwardRef(
+const MenuRadioItem = React.forwardRef(
   ({ children, ...props }, ref) => {
+    const Comp = props.item.link ? "a" : "div";
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.ListboxRadioItem,
+      {
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
+      }
+    ) });
+  }
+);
+MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
+
+const [MenuNestedProvider, useMenuNestedContext] = reactContext.createContext("@optiaxiom/react/MenuNested", { inputRef: void 0, level: 0 });
+
+const [MenuSubProvider, useMenuSubContext] = reactContext.createContext("@optiaxiom/react/MenuSub");
+
+const MenuSubContent = React.forwardRef(
+  ({ align = "start", children, item, side = "right", ...props }, outerRef) => {
+    const options = React.useMemo(() => item.subOptions ?? [], [item]);
+    const {
+      activePath,
+      inputRef: rootInputRef,
+      onSelect,
+      setActivePath,
+      setOpen
+    } = useMenuContext("@optiaxiom/react/MenuSubContent");
+    const { setInputValue } = useCommandContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const {
+      contentRef,
+      inputRef,
+      level,
+      setOpen: setSubOpen
+    } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const { inputRef: parentInputRef = rootInputRef } = useMenuNestedContext(
+      "@optiaxiom/react/MenuSubContent"
+    );
+    const ref = reactComposeRefs.useComposedRefs(contentRef, outerRef);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+      Skeleton.PopoverContent,
       {
-        color: "fg.default",
-        fontSize: "lg",
-        fontWeight: "600",
-        pb: "12",
-        pt: "16",
-        px: "24",
+        align,
+        alignOffset: -4,
+        maxH: "sm",
+        minW: "trigger",
+        onCloseAutoFocus: (event) => {
+          if (activePath.length > level) {
+            return;
+          }
+          event.preventDefault();
+          parentInputRef.current?.focus();
+        },
+        onEscapeKeyDown: () => setOpen(false),
+        p: "4",
         ref,
+        side,
+        sideOffset: 0,
         ...props,
-        children
+        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(
+          Command,
+          {
+            onHover: (item2) => {
+              if (item2.subOptions?.length) {
+                const index = options.indexOf(item2);
+                setActivePath(
+                  (path) => path[level + 1] !== index ? [...path.slice(0, level + 1), index] : path
+                );
+              } else {
+                setActivePath(
+                  (path) => path.length > level + 1 ? path.slice(0, level + 1) : path
+                );
+              }
+            },
+            onInputValueChange: (inputValue) => {
+              parentInputRef.current?.focus();
+              setInputValue(inputValue);
+            },
+            onSelect: (item2, { close }) => {
+              if (item2.subOptions?.length) {
+                const index = options.indexOf(item2);
+                setActivePath(
+                  (path) => path[level + 1] !== index ? [...path.slice(0, level + 1), index] : path
+                );
+              } else {
+                onSelect(item2, { close });
+              }
+            },
+            options,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                CommandInput,
+                {
+                  onKeyDown: (event) => {
+                    if (event.key === "ArrowLeft") {
+                      event.preventDefault();
+                      setSubOpen(false);
+                    }
+                  },
+                  ref: inputRef
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(MenuNestedProvider, { inputRef, level: level + 1, children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, {}) })
+            ]
+          }
+        )
       }
     );
   }
 );
-SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
-
-const SpotlightListbox = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { gap: "8", ref, ...props }));
-SpotlightListbox.displayName = "@optiaxiom/react/SpotlightListbox";
+MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1hz708r']});
+const MenuSubTrigger = React.forwardRef(
+  ({ children, item, onPointerDown, ...props }, ref) => {
+    const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
+    const { contentRef, open } = useMenuSubContext(
+      "@optiaxiom/react/MenuSubTrigger"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem,
+      {
+        addonAfter: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}),
+        item,
+        onPointerDown: (event) => {
+          onPointerDown?.(event);
+          if (open) {
+            event.preventDefault();
+          }
+        },
+        onPointerEnter: () => {
+          if (highlightedItem !== item) {
+            return;
+          }
+          downshift.selectItem(item);
+        },
+        onPointerLeave: (event) => {
+          const box = contentRef.current?.getBoundingClientRect();
+          if (!box) {
+            return;
+          }
+          const bottom = {
+            x: box.left,
+            y: box.top + box.height
+          };
+          const side = {
+            x: event.clientX + 10 * (box.left > event.clientX ? -1 : 1),
+            y: event.clientY
+          };
+          const top = {
+            x: box.left,
+            y: box.top
+          };
+          pauseInteractionRef.current.isInsideTriangle = (target) => {
+            const b0 = (top.x - side.x) * (bottom.y - side.y) - (bottom.x - side.x) * (top.y - side.y), b1 = ((top.x - target.x) * (bottom.y - target.y) - (bottom.x - target.x) * (top.y - target.y)) / b0, b2 = ((bottom.x - target.x) * (side.y - target.y) - (side.x - target.x) * (bottom.y - target.y)) / b0, b3 = ((side.x - target.x) * (top.y - target.y) - (top.x - target.x) * (side.y - target.y)) / b0;
+            return b1 > 0 && b2 > 0 && b3 > 0;
+          };
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.isInsideTriangle = null;
+          }, 50);
+        },
+        ref,
+        ...props,
+        children
+      }
+    ) }) });
+  }
+);
+MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";
 
-const SpotlightRadioItem = React.forwardRef(({ addonAfter, children, className, description, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(SpotlightItem, { asChild: true, ref, ...item$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.ListboxRadioItem,
+function MenuSub({ children, item }) {
+  const { activePath, setActivePath } = useMenuContext(
+    "@optiaxiom/react/MenuSub"
+  );
+  const { items } = useCommandContext("@optiaxiom/react/MenuSub");
+  const { level } = useMenuNestedContext("@optiaxiom/react/MenuSub");
+  const index = items.indexOf(item);
+  const contentRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MenuSubProvider,
     {
-      addonAfter: addonAfter ?? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}),
-      description: description && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { fontSize: "md", mt: "2", children: description }),
-      children
+      contentRef,
+      inputRef,
+      level,
+      open: activePath[level] === index,
+      setOpen: () => {
+        setActivePath(
+          (path) => path[level] === index ? path.slice(0, level) : path
+        );
+      },
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Popover, { open: activePath[level] === index, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(MenuSubTrigger, { item }),
+        /* @__PURE__ */ jsxRuntime.jsx(MenuSubContent, { item })
+      ] })
     }
-  ) });
-});
-SpotlightRadioItem.displayName = "@optiaxiom/react/SpotlightRadioItem";
-
-const [CommandSubProvider, useCommandSubContext] = reactContext.createContext("@optiaxiom/react/CommandSub");
+  );
+}
+MenuSub.displayName = "@optiaxiom/react/MenuSub";
 
-const CommandSub = React.forwardRef(
-  ({ children, item, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandSubProvider, { item, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, role: "group", ...props, children }) });
+const MenuListbox = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    const { size } = useMenuContext("@optiaxiom/react/MenuListbox");
+    let isFirstItem = true;
+    let lastGroup = void 0;
+    const shouldShowSeparator = (group) => {
+      const show = !isFirstItem;
+      isFirstItem = false;
+      return show && group && group !== lastGroup && group.separator;
+    };
+    const shouldShowGroup = (group) => {
+      const show = group !== lastGroup;
+      lastGroup = group;
+      return show && !group?.hidden;
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, ...props, children: children ?? ((item, index) => {
+      if (index === 0) {
+        isFirstItem = true;
+        lastGroup = void 0;
+      }
+      const Comp = item.subOptions?.length ? size === "sm" ? MenuSub : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : MenuRadioItem : MenuItem;
+      const group = item.group;
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        shouldShowSeparator(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, {}),
+        shouldShowGroup(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { children: group.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(Comp, { item })
+      ] });
+    }) });
   }
 );
-CommandSub.displayName = "@optiaxiom/react/CommandSub";
+MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
 
-const SpotlightSub = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandSub, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "8", pt: "12", px: "24", children }) });
+const MenuPopoverContent = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
+});
+MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
+
+const VisuallyHidden = React.forwardRef(
+  ({ children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(RadixVisuallyHidden__namespace.Root, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.FilteredSlot, { exclude: disabled ? "style" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children }) }) });
   }
 );
-SpotlightSub.displayName = "@optiaxiom/react/SpotlightSub";
+VisuallyHidden.displayName = "@optiaxiom/react/VisuallyHidden";
 
-const CommandSubItem = React.forwardRef(
-  ({ children, item, onClick, onMouseDown, onMouseMove, selected, ...props }, outerRef) => {
-    const {
-      downshift,
-      highlightedItem,
-      highlightedSubIndex,
-      isItemDisabled,
-      isItemSelected,
-      items,
-      itemToSubItems,
-      setHighlightedIndex,
-      setHighlightedSubIndex
-    } = useCommandContext("@optiaxiom/react/CommandSubItem");
-    const { item: parentItem } = useCommandSubContext(
-      "@optiaxiom/react/CommandSubItem"
+const MenuContent = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    const { labelId } = Skeleton.useFieldContext();
+    const { inputVisible, placeholder, size } = useMenuContext(
+      "@optiaxiom/react/MenuContent"
     );
-    const subItems = itemToSubItems?.(parentItem) ?? [];
-    const highlightedSubItem = highlightedItem === parentItem && highlightedSubIndex !== -1 ? subItems[highlightedSubIndex] : null;
-    const index = items.indexOf(parentItem);
-    const subIndex = subItems.indexOf(item);
-    const disabled = isItemDisabled(item, subIndex);
-    const highlighted = highlightedSubItem === item;
-    const isSelected = selected ?? isItemSelected(item, index);
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    React.useEffect(() => {
-      if (innerRef.current && isSelected) {
-        innerRef.current.scrollIntoView({ block: "nearest" });
+    const { empty, loading } = useCommandContext(
+      "@optiaxiom/react/MenuContent"
+    );
+    const Comp = size === "sm" ? MenuPopoverContent : MenuDialogContent;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        "aria-labelledby": labelId,
+        overflow: "hidden",
+        p: size === "sm" ? "4" : "0",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInput, { placeholder }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuListbox,
+            {
+              empty,
+              loading,
+              p: size === "lg" ? "6" : "0",
+              children
+            }
+          )
+        ]
       }
-    }, [isSelected]);
+    );
+  }
+);
+MenuContent.displayName = "@optiaxiom/react/MenuContent";
+
+const MenuTrigger = React.forwardRef(
+  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
+    const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
+    const Comp = size === "sm" ? Skeleton.PopoverTrigger : Skeleton.DialogTrigger;
+    const buttonRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
+    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      CommandFocusableItem,
+      Comp,
       {
-        "aria-disabled": disabled,
-        "aria-selected": isSelected,
-        "data-disabled": disabled ? "" : void 0,
-        "data-highlighted": highlighted ? "" : void 0,
-        onClick: (event) => {
-          onClick?.(event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          event.preventDefault();
-          downshift.selectItem(item);
-        },
-        onMouseDown: (event) => {
-          onMouseDown?.(event);
-          event.preventDefault();
-        },
-        onMouseMove: (event) => {
-          onMouseMove?.(event);
-          if (event.defaultPrevented) {
-            return;
+        "aria-labelledby": labelId,
+        asChild: true,
+        onKeyDown: (event) => {
+          switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp":
+              setOpen(true);
           }
-          setHighlightedIndex(index, "pointer");
-          setHighlightedSubIndex(subIndex, "pointer");
         },
         ref,
-        role: "option",
         ...props,
-        children
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
       }
     );
   }
 );
-CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
+MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1d3ixq',true:'ojdloy'}}});
+var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1vmftfb'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
-const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandSubItem,
-    {
-      asChild: true,
-      ref,
-      selected,
-      ...item({ active: selected || false }, className),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Skeleton.Badge,
-        {
-          intent: selected ? "information" : "neutral",
-          variant: selected ? "strong" : "subtle",
-          children
-        }
-      )
-    }
-  );
+const Pill = React.forwardRef(
+  ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Box,
+      {
+        asChild: true,
+        "data-disabled": disabled ? "" : void 0,
+        ...pill({ size }, className),
+        ...boxProps,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { disabled, ref, ...restProps, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { truncate: true, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}) })
+        ] })
+      }
+    );
+  }
+);
+Pill.displayName = "@optiaxiom/react/Pill";
+
+const PillGroup = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "12", ref, ...props, children });
+  }
+);
+PillGroup.displayName = "@optiaxiom/react/PillGroup";
+
+function Spotlight({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Menu, { defaultInputVisible: true, size: "lg", ...props, children });
+}
+Spotlight.displayName = "@optiaxiom/react/Spotlight";
+
+const SpotlightContent = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { "aria-label": "Quick search", ref, ...props });
 });
-SpotlightSubItem.displayName = "@optiaxiom/react/SpotlightSubItem";
+SpotlightContent.displayName = "@optiaxiom/react/SpotlightContent";
 
 const DEFAULT_HOTKEY = "mod+K";
 const SpotlightTrigger = React.forwardRef(({ children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
-  const { open, setOpen } = useSpotlightContext(
-    "@optiaxiom/react/SpotlightTrigger"
-  );
+  const { open, setOpen } = useMenuContext("@optiaxiom/react/SpotlightTrigger");
   useHotkeys([[hotkey, () => setOpen(!open)]]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogTrigger, { icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuTrigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}), children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children }) }) });
 });
 SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
 
@@ -3202,18 +3187,6 @@ exports.CardLink = CardLink;
 exports.CardOverflow = CardOverflow;
 exports.CardTitle = CardTitle;
 exports.Clock = Clock;
-exports.Combobox = Combobox;
-exports.ComboboxCheckboxItem = ComboboxCheckboxItem;
-exports.ComboboxContent = ComboboxContent;
-exports.ComboboxFooter = ComboboxFooter;
-exports.ComboboxGroup = ComboboxGroup;
-exports.ComboboxInput = ComboboxInput;
-exports.ComboboxItem = ComboboxItem;
-exports.ComboboxLabel = ComboboxLabel;
-exports.ComboboxListbox = ComboboxListbox;
-exports.ComboboxRadioItem = ComboboxRadioItem;
-exports.ComboboxSeparator = ComboboxSeparator;
-exports.ComboboxTrigger = ComboboxTrigger;
 exports.Command = Command;
 exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
@@ -3228,35 +3201,20 @@ exports.DatePickerTrigger = DatePickerTrigger;
 exports.DateRangePicker = DateRangePicker;
 exports.DateRangePickerContent = DateRangePickerContent;
 exports.DateRangePickerTrigger = DateRangePickerTrigger;
-exports.DropdownMenuCombobox = DropdownMenuCombobox;
-exports.DropdownMenuComboboxContent = DropdownMenuComboboxContent;
-exports.DropdownMenuComboboxInput = DropdownMenuComboboxInput;
-exports.DropdownMenuComboboxListbox = DropdownMenuComboboxListbox;
-exports.DropdownMenuComboboxTrigger = DropdownMenuComboboxTrigger;
 exports.Highlight = Highlight;
 exports.InlineInput = InlineInput;
 exports.LabelMenuButton = LabelMenuButton;
 exports.Layout = Layout;
+exports.Menu = Menu;
+exports.MenuContent = MenuContent;
+exports.MenuTrigger = MenuTrigger;
 exports.Pill = Pill;
 exports.PillGroup = PillGroup;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
-exports.SelectGroup = SelectGroup;
-exports.SelectItem = SelectItem;
-exports.SelectLabel = SelectLabel;
-exports.SelectRadioItem = SelectRadioItem;
-exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
-exports.SpotlightEmpty = SpotlightEmpty;
-exports.SpotlightInput = SpotlightInput;
-exports.SpotlightItem = SpotlightItem;
-exports.SpotlightLabel = SpotlightLabel;
-exports.SpotlightListbox = SpotlightListbox;
-exports.SpotlightRadioItem = SpotlightRadioItem;
-exports.SpotlightSub = SpotlightSub;
-exports.SpotlightSubItem = SpotlightSubItem;
 exports.SpotlightTrigger = SpotlightTrigger;
 exports.Table = Table;
 exports.TableAction = TableAction;