@optiaxiom/react 1.5.5 → 1.5.7

package/dist/cjs/unstable.js

@@ -3,88 +3,88 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var IconMagnifyingGlass = require('./IconMagnifyingGlass-B2lTMCkk.js');
+var IconMagnifyingGlass = require('./IconMagnifyingGlass-C1vmdpal.js');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var downshift = require('downshift');
 var reactContext = require('@radix-ui/react-context');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
-require('./assets/src/layers/layers.css.ts.vanilla-DKXh4Gs6.css');
-require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-CWorIM2m.css');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-B3WavHO0.css');
-require('./assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-BlUvvEKp.css');
-require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-CcGbfi71.css');
-var reactId = require('@radix-ui/react-id');
-require('./assets/src/cover/Cover.css.ts.vanilla-HjCHhlBJ.css');
-require('./assets/src/card/Card.css.ts.vanilla-ZOTme6jf.css');
 var clsx = require('clsx');
-require('./assets/src/card/CardCheckbox.css.ts.vanilla-CERTcfrl.css');
-require('./assets/src/card/CardHeader.css.ts.vanilla-CGTUhop_.css');
-require('./assets/src/card/CardPreview.css.ts.vanilla-pCZTA996.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-DZrZIsyu.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-CGm_vJVt.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-GQk_WUda.css');
+require('./assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css');
+require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-DdNGYk5F.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-BCBcmGyg.css');
+var reactId = require('@radix-ui/react-id');
+require('./assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-CMquv8j0.css');
+require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-HqI8w4rN.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-ByQQlPVT.css');
+require('./assets/src/card/Card.css.ts.vanilla-Dx7-OSeC.css');
+require('./assets/src/card/CardCheckbox.css.ts.vanilla-DHXZbqIX.css');
+require('./assets/src/card/CardHeader.css.ts.vanilla-SKnNZ2q_.css');
+require('./assets/src/card/CardPreview.css.ts.vanilla-DOPVkaXQ.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-CFWJDqnP.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-B1fsHFq9.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-CrzLAJLe.css');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/pill/Pill.css.ts.vanilla-C6rS48Ul.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-CtZnQgDv.css');
 var helpers = require('@dnd-kit/helpers');
 var react = require('@dnd-kit/react');
-var collision = require('@dnd-kit/collision');
+require('./assets/src/sortable/SortableHandle.css.ts.vanilla-jo0CyuY5.css');
 var sortable = require('@dnd-kit/react/sortable');
-require('./assets/src/sortable/SortableHandle.css.ts.vanilla-CJ39FqPe.css');
-require('./assets/src/sortable/SortableItem.css.ts.vanilla-Dpjh9zhf.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-u6nBstXC.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-DZZuHeZw.css');
-require('./assets/src/table/Table.css.ts.vanilla-B5dhG7o0.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-CeJycUv7.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-anJXMUPf.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-BI0-zFxh.css');
-require('./assets/src/table/TableHeader.css.ts.vanilla-Cqq0P-RJ.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-nQKJCSaW.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DtgF1usX.css');
+require('./assets/src/sortable/SortableItem.css.ts.vanilla-BnPen3f6.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-BZJSlXYR.css');
+require('./assets/src/table/Table.css.ts.vanilla-CrhcQ9Fw.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-mpdS9jrL.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-DUuHeFsV.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-CRF35HvX.css');
+require('./assets/src/table/TableHeader.css.ts.vanilla-_0RfH23t.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-81aLYTXU.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DfZe4S8I.css');
 require('react-day-picker');
 require('@radix-ui/react-popper');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/calendar/Calendar.css.ts.vanilla-CcCQeAPt.css');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-DNvXS2S2.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-wvR5p-eh.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-DqnyM60k.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-DGnwLOnv.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-u6nBstXC.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-Cvu47XQC.css');
+require('./assets/src/calendar/Calendar.css.ts.vanilla-8O7JrqRv.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-Ch1bq769.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-Csvemw5U.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-Dd_s-ito.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-Q-s24Cus.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-Ao8bwsNZ.css');
 require('@radix-ui/react-popover');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-u6nBstXC.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-BCilgzn2.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-BvofMiCy.css');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-sHWX-495.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-Boysq-Qv.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-aWtUx5zZ.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-DGO9QbUA.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-BabUUhln.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-SpZDsPH1.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-CjXYpuJi.css');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-r_mUsSk9.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-0CIupe31.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-D7uVxjkP.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CxNujvlK.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-CHqwUT0f.css');
 require('@tanstack/react-virtual');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-DGE7X2K0.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-mxAw0qXt.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-CwrW5T_8.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-2m7n0NDy.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-CZJTNIIa.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-ZzU49MIC.css');
 require('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-DJOUUhpP.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css');
 require('@vanilla-extract/dynamic');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-wSxpsOW8.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-D8UiT9f3.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
 require('@radix-ui/react-portal');
-require('./assets/src/dialog/DialogContent.css.ts.vanilla-HoKkPIKV.css');
-require('./assets/src/text/Text.css.ts.vanilla-BcfBWIns.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-Ci1Zxe5U.css');
+require('./assets/src/dialog/DialogFooter.css.ts.vanilla-Cdb_sOf-.css');
+require('./assets/src/text/Text.css.ts.vanilla-Bjbyatqw.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-DD3VWZYl.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-CKV8XYmU.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-BecW3Bat.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-Cuy-5QTV.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-Q0H8i3_-.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-BtW7ujiM.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-Dd4mtFDn.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-BFURnQ7k.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-SZfW2-MF.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-C5JDwK5p.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-BMvfQRph.css');
-require('./assets/src/box/Box.css.ts.vanilla-Bzc7O3b2.css');
-require('./assets/src/link/Link.css.ts.vanilla-_8_jYioD.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-Dn8sSmJR.css');
+require('./assets/src/box/Box.css.ts.vanilla-BOT2FD3S.css');
+require('./assets/src/link/Link.css.ts.vanilla-DWEYenF1.css');
 
 const keyNameMap = {
   " ": "space",
@@ -268,7 +268,7 @@ function Command({
     prop: inputValueProp
   });
   const items = useCommandItems({ inputValue, options });
-  const [highlightedIndex, setHighlightedIndex, placed] = IconMagnifyingGlass.usePortalPatch(
+  const [highlightedIndex, setHighlightedIndex] = IconMagnifyingGlass.useHighlightedIndex(
     enabled,
     () => items.filter((item) => "selected" in item).length > items.length / 2 ? items.findIndex(
       (item) => !resolveItemProperty(item.disabledReason) && resolveItemProperty(item.selected) && !item.multi
@@ -283,15 +283,16 @@ function Command({
     highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
     inputValue,
     isItemDisabled: (item) => Boolean(resolveItemProperty(item?.disabledReason)),
-    isOpen: placed,
+    isOpen: !!enabled,
     items,
     itemToString: (item) => item !== null ? resolveItemProperty(item.label, { inputValue }) : "",
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
       setHighlightedIndex(highlightedIndex2);
-      const item = items[highlightedIndex2];
-      const hasSubOptions = item && (typeof item.subOptions === "function" || !!item.subOptions?.length);
-      if (highlightedIndex2 !== -1 && (!hasSubOptions || type === downshift.useCombobox.stateChangeTypes.ItemMouseMove)) {
-        onHover?.(items[highlightedIndex2]);
+      if (highlightedIndex2 !== -1) {
+        onHover?.(
+          items[highlightedIndex2],
+          type === downshift.useCombobox.stateChangeTypes.FunctionSetHighlightedIndex || type === downshift.useCombobox.stateChangeTypes.ItemMouseMove
+        );
       }
     },
     onSelectedItemChange({ selectedItem, type }) {
@@ -360,6 +361,7 @@ const CommandInput = React.forwardRef(
         htmlSize: 1,
         size,
         ...downshift.getInputProps({
+          "aria-label": props.placeholder,
           ref,
           ...props,
           onBlur: (event) => {
@@ -524,15 +526,24 @@ CommandItem.displayName = "@optiaxiom/react/CommandItem";
 
 const CommandListbox = React.forwardRef(
   ({ children, size, ...props }, ref) => {
-    const { downshift, highlightedItem, inputValue, items } = useCommandContext(
-      "@optiaxiom/react/CommandListbox"
-    );
+    const {
+      downshift,
+      highlightedItem,
+      highlightedItemRef,
+      inputValue,
+      items
+    } = useCommandContext("@optiaxiom/react/CommandListbox");
     return /* @__PURE__ */ jsxRuntime.jsx(
       IconMagnifyingGlass.ListboxItemized,
       {
         highlightedItem,
         items,
         itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
+        onPlacedChange: (placed) => {
+          if (placed && highlightedItemRef.current) {
+            highlightedItemRef.current.scrollIntoView({ block: "nearest" });
+          }
+        },
         size,
         ...downshift.getMenuProps({ ref, ...props }),
         children
@@ -603,6 +614,7 @@ function Menu({
   }, [open, size]);
   const contentRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const itemRef = React.useRef(null);
   const triggerRef = React.useRef(null);
   const options = React.useMemo(
     () => size === "sm" ? optionsProp.map((option) => ({
@@ -669,14 +681,15 @@ function Menu({
       setActiveItemStack,
       setOpen,
       size,
+      triggerRef,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Command,
         {
           enabled: open ? activeItemStack.length + 1 : false,
           inputValue,
-          onHover: (item) => {
+          onHover: (item, pointer) => {
             setSubMenuOpen(
-              typeof item.subOptions === "function" || !!item.subOptions?.length
+              pointer && (typeof item.subOptions === "function" || !!item.subOptions?.length)
             );
           },
           onInputValueChange: setInputValue,
@@ -701,9 +714,9 @@ function Menu({
             {
               contentRef,
               inputRef,
+              itemRef,
               open: subMenuOpen,
               setOpen: setSubMenuOpen,
-              triggerRef,
               children
             }
           )
@@ -714,7 +727,7 @@ function Menu({
 }
 Menu.displayName = "@optiaxiom/react/Menu";
 
-var content$1 = IconMagnifyingGlass.recipeRuntime({base:'_17tyw2w'});
+var content$1 = IconMagnifyingGlass.recipeRuntime({base:'_1bmf7it'});
 
 const MenuDialogContent = React.forwardRef(
   ({
@@ -726,15 +739,35 @@ const MenuDialogContent = React.forwardRef(
     sideOffset: _sideOffset,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.DialogContent, { ref, ...content$1({}, className), ...props, children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.DialogHeader, { children: ariaLabel }) })
-    ] });
+    const { labelId: fieldLabelId } = IconMagnifyingGlass.useFieldContext(
+      "@optiaxiom/react/MenuDialogContent"
+    );
+    const { triggerRef } = useMenuContext("@optiaxiom/react/MenuDialogContent");
+    const labelId = React.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      IconMagnifyingGlass.DialogContent,
+      {
+        "aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
+        ref,
+        ...content$1({}, className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: labelId, children: ariaLabel || "Menu" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.DialogHeader,
+            {
+              children: "Menu"
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
 MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input$1 = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'quf22t']}}});
+var input$1 = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'bp8kf8']}}});
 
 const MenuInput = React.forwardRef(
   ({ className, onKeyDown, ...props }, outerRef) => {
@@ -877,7 +910,7 @@ const MenuSubInput = React.forwardRef(
 MenuSubInput.displayName = "@optiaxiom/react/MenuSubInput";
 
 const MenuSubContent = React.forwardRef(
-  ({ align = "start", children, side = "right", ...props }, outerRef) => {
+  ({ align = "start", side = "right", ...props }, outerRef) => {
     const { onSelect, setOpen: setRootMenuOpen } = useMenuContext(
       "@optiaxiom/react/MenuSubContent"
     );
@@ -889,11 +922,12 @@ const MenuSubContent = React.forwardRef(
     const {
       contentRef: parentContentRef,
       inputRef: parentInputRef,
-      triggerRef: parentTriggerRef
+      itemRef: parentItemRef
     } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
     const { open, presence } = IconMagnifyingGlass.usePopoverContext(
       "@optiaxiom/react/MenuSubContent"
     );
+    const labelId = reactId.useId();
     const ref = reactComposeRefs.useComposedRefs(parentContentRef, outerRef);
     const [inputValue, setInputValue] = React.useState("");
     const options = React.useMemo(
@@ -902,7 +936,7 @@ const MenuSubContent = React.forwardRef(
     );
     const contentRef = React.useRef(null);
     const inputRef = React.useRef(null);
-    const triggerRef = React.useRef(null);
+    const itemRef = React.useRef(null);
     const [subMenuOpen, setSubMenuOpen] = React.useState(false);
     React.useEffect(() => {
       if (!open) {
@@ -919,12 +953,13 @@ const MenuSubContent = React.forwardRef(
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverAnchor, { virtualRef: parentTriggerRef }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverAnchor, { virtualRef: parentItemRef }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
         IconMagnifyingGlass.PopoverContent,
         {
           align,
           alignOffset: item.subOptionsInputVisible ? -46 : -4,
+          "aria-labelledby": clsx(parentItemRef.current?.id, labelId),
           onCloseAutoFocus: (event) => {
             event.preventDefault();
             parentInputRef.current?.focus();
@@ -956,51 +991,54 @@ const MenuSubContent = React.forwardRef(
           side,
           sideOffset: 0,
           ...props,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(
-            Command,
-            {
-              enabled: true,
-              inputValue,
-              onHover: (item2) => {
-                setSubMenuOpen(
-                  typeof item2.subOptions === "function" || !!item2.subOptions?.length
-                );
-              },
-              onInputValueChange: (inputValue2) => {
-                if (item.subOptionsInputVisible) {
-                  setInputValue(inputValue2);
-                  return;
-                }
-                parentInputRef.current?.focus();
-                setParentInputValue(inputValue2);
-              },
-              onSelect: (item2, { dismiss }) => {
-                if (typeof item2.subOptions === "function" || item2.subOptions?.length) {
-                  setSubMenuOpen(true);
-                } else {
-                  onSelect(item2, { dismiss });
-                }
-              },
-              options,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubInput, { ref: inputRef }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  MenuSubProvider,
-                  {
-                    contentRef,
-                    inputRef,
-                    open: subMenuOpen,
-                    setOpen: setSubMenuOpen,
-                    triggerRef,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { id: labelId, children: "Submenu" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Command,
+              {
+                enabled: true,
+                inputValue,
+                onHover: (item2, pointer) => {
+                  setSubMenuOpen(
+                    pointer && (typeof item2.subOptions === "function" || !!item2.subOptions?.length)
+                  );
+                },
+                onInputValueChange: (inputValue2) => {
+                  if (item.subOptionsInputVisible) {
+                    setInputValue(inputValue2);
+                    return;
                   }
-                )
-              ]
-            },
-            item.key ?? resolveItemProperty(item.label, {
-              inputValue: parentInputValue
-            })
-          )
+                  parentInputRef.current?.focus();
+                  setParentInputValue(inputValue2);
+                },
+                onSelect: (item2, { dismiss }) => {
+                  if (typeof item2.subOptions === "function" || item2.subOptions?.length) {
+                    setSubMenuOpen(true);
+                  } else {
+                    onSelect(item2, { dismiss });
+                  }
+                },
+                options,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubInput, { placeholder: "Filter...", ref: inputRef }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    MenuSubProvider,
+                    {
+                      contentRef,
+                      inputRef,
+                      itemRef,
+                      open: subMenuOpen,
+                      setOpen: setSubMenuOpen,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+                    }
+                  )
+                ]
+              },
+              item.key ?? resolveItemProperty(item.label, {
+                inputValue: parentInputValue
+              })
+            )
+          ]
         }
       )
     ] });
@@ -1020,7 +1058,7 @@ const MenuSubTrigger = React.forwardRef(
   }, outerRef) => {
     const { downshift, enabled, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
     const { open } = IconMagnifyingGlass.usePopoverContext("@optiaxiom/react/MenuSubTrigger");
-    const { contentRef, triggerRef } = useMenuSubContext(
+    const { contentRef, itemRef } = useMenuSubContext(
       "@optiaxiom/react/MenuSubTrigger"
     );
     const pointerEnterRef = React.useRef(false);
@@ -1028,9 +1066,9 @@ const MenuSubTrigger = React.forwardRef(
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     React.useEffect(() => {
       if (open && highlightedItem === item && innerRef.current) {
-        triggerRef.current = innerRef.current;
+        itemRef.current = innerRef.current;
       }
-    }, [highlightedItem, item, open, triggerRef]);
+    }, [highlightedItem, item, open, itemRef]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem,
       {
@@ -1146,8 +1184,25 @@ const MenuPopoverContentImpl = React.forwardRef(({ children, ...props }, outerRe
 });
 MenuPopoverContentImpl.displayName = "@optiaxiom/react/MenuPopoverContentImpl";
 
-const MenuPopoverContent = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverContent, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(MenuPopoverContentImpl, { children }) });
+const MenuPopoverContent = React.forwardRef(({ "aria-label": ariaLabel, children, ...props }, ref) => {
+  const { labelId: fieldLabelId } = IconMagnifyingGlass.useFieldContext(
+    "@optiaxiom/react/MenuPopoverContent"
+  );
+  const { triggerRef } = useMenuContext("@optiaxiom/react/MenuPopoverContent");
+  const labelId = reactId.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.PopoverContent,
+    {
+      "aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
+      asChild: true,
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPopoverContentImpl, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { id: labelId, children: ariaLabel || "Menu" }),
+        children
+      ] })
+    }
+  );
 });
 MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
 
@@ -1155,7 +1210,6 @@ const MenuContent = React.forwardRef(
   ({ children, onPointerDown, ...props }, outerRef) => {
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const { labelId } = IconMagnifyingGlass.useFieldContext("@optiaxiom/react/MenuContent");
     const { activeItemStack, inputRef, inputVisible, placeholder, size } = useMenuContext("@optiaxiom/react/MenuContent");
     const { empty, loading } = useCommandContext(
       "@optiaxiom/react/MenuContent"
@@ -1170,7 +1224,6 @@ const MenuContent = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       {
-        "aria-labelledby": labelId,
         onPointerDown: (event) => {
           onPointerDown?.(event);
           if (event.defaultPrevented) {
@@ -1213,16 +1266,19 @@ const MenuTrigger = React.forwardRef(
     onKeyDown,
     ...props
   }, outerRef) => {
-    const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
+    const { setOpen, size, triggerRef } = useMenuContext(
+      "@optiaxiom/react/MenuTrigger"
+    );
     const Comp = size === "sm" ? IconMagnifyingGlass.PopoverTrigger : IconMagnifyingGlass.DialogTrigger;
-    const buttonRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-    const labelId = IconMagnifyingGlass.useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    const ref = reactComposeRefs.useComposedRefs(outerRef, triggerRef);
+    const id = reactId.useId();
+    const labelId = IconMagnifyingGlass.useFieldLabelTrigger(triggerRef, ariaLabelledBy);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
       {
         "aria-labelledby": labelId,
         asChild: true,
+        id,
         onKeyDown: (event) => {
           onKeyDown?.(event);
           if (event.defaultPrevented) {
@@ -1242,10 +1298,10 @@ const MenuTrigger = React.forwardRef(
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var link = IconMagnifyingGlass.recipeRuntime({base:'_15jrxdk'});
-var list = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_1pr73q5']});
+var link = IconMagnifyingGlass.recipeRuntime({base:'_5ltqrv'});
+var list = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'wbxylc']});
 
-var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'fkno7r']});
+var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_18o5jfd']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ addonAfter, children, className, ...props }, ref) => {
@@ -1309,7 +1365,7 @@ const renderItems = (items, limit = items.length, renderItem) => {
   ];
 };
 
-var card = IconMagnifyingGlass.recipeRuntime({base:['_1o1exmq',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',justifyContent:'flex-start',p:'16'},'_14fwwdh']});
+var card = IconMagnifyingGlass.recipeRuntime({base:['_5ifkln',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',justifyContent:'flex-start',p:'16'},'_1bm247m']});
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
@@ -1329,7 +1385,7 @@ const CardAction = React.forwardRef(
 );
 CardAction.displayName = "@optiaxiom/react/CardAction";
 
-var checkbox = IconMagnifyingGlass.recipeRuntime({base:['_4pd56p']});
+var checkbox = IconMagnifyingGlass.recipeRuntime({base:['_7bcxmb']});
 
 const CardCheckbox = React.forwardRef(
   ({ className, onChange, ...props }, ref) => {
@@ -1370,9 +1426,9 @@ const CardFooter = React.forwardRef(
 );
 CardFooter.displayName = "@optiaxiom/react/CardFooter";
 
-var addon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_1ibgpr0',before:'_1iugdsh'}}});
-var content = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1'},'_1eigwlh']});
-var header = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_1wlwbrl']});
+var addon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_7z43zr',before:'ww3jk7'}}});
+var content = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1'},'gsrmyu']});
+var header = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_5tumoz']});
 
 const CardHeader = React.forwardRef(
   ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
@@ -1407,8 +1463,8 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var overlay = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_16d8ssy']});
-var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1011qxq']});
+var overlay = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'chh5s2']});
+var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1cx4b6h']});
 
 const CardPreview = React.forwardRef(
   ({
@@ -1470,7 +1526,7 @@ const CardPreview = React.forwardRef(
 );
 CardPreview.displayName = "@optiaxiom/react/CardPreview";
 
-var mark = IconMagnifyingGlass.recipeRuntime({base:'_9up3ox'});
+var mark = IconMagnifyingGlass.recipeRuntime({base:'_1tphxua'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -1502,8 +1558,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = IconMagnifyingGlass.recipeRuntime({base:'cx4bl2',variants:{empty:{false:{},true:'_1bwocic'}}});
-var input = IconMagnifyingGlass.recipeRuntime({base:'fyc0qx'});
+var editor = IconMagnifyingGlass.recipeRuntime({base:'bx0ipe',variants:{empty:{false:{},true:'_3nl2ju'}}});
+var input = IconMagnifyingGlass.recipeRuntime({base:'trx2g4'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -1584,7 +1640,7 @@ function getText(element) {
   return text;
 }
 
-var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'cm7pn4']});
+var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1qx8dv6']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -1609,7 +1665,7 @@ const Layout = React.forwardRef(
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-var pill = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1yd1mvw'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_10jr6bf'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
@@ -1642,154 +1698,6 @@ PillGroup.displayName = "@optiaxiom/react/PillGroup";
 
 const [SortableProvider, useSortableContext] = reactContext.createContext("@optiaxiom/react/Sortable");
 
-const [SortableItemContainerProvider, useSortableItemContainerContext] = reactContext.createContext("@optiaxiom/react/SortableItemContainer", {
-  elementRef: () => {
-  },
-  handleRef: { current: null },
-  id: "",
-  index: -1,
-  isDragging: false
-});
-
-const [SortableListProvider, useSortableListContext] = reactContext.createContext("@optiaxiom/react/SortableList", {
-  id: void 0,
-  setHasDropTarget: () => {
-  }
-});
-
-function SortableItemContainer({
-  children,
-  id,
-  index
-}) {
-  const { id: group, setHasDropTarget } = useSortableListContext(
-    "@optiaxiom/react/SortableItemContainer"
-  );
-  const handleRef = React.useRef(null);
-  const { isDragging, isDropTarget, ref } = sortable.useSortable({
-    accept: "item",
-    collisionDetector: collision.pointerIntersection,
-    feedback: "clone",
-    group,
-    handle: handleRef,
-    id,
-    index,
-    type: "item"
-  });
-  React.useEffect(() => {
-    if (!isDropTarget) {
-      return;
-    }
-    setHasDropTarget(true);
-    return () => setHasDropTarget(false);
-  }, [setHasDropTarget, id, isDropTarget]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SortableItemContainerProvider,
-    {
-      elementRef: ref,
-      handleRef,
-      id,
-      index,
-      isDragging,
-      children: children?.({
-        count: 1,
-        id,
-        index,
-        isDropTarget
-      })
-    }
-  );
-}
-SortableItemContainer.displayName = "@optiaxiom/react/SortableItemContainer";
-
-const [SortableListContainerProvider, useSortableListContainerContext] = reactContext.createContext("@optiaxiom/react/SortableListContainer");
-
-const collapse = (items) => {
-  if (Array.isArray(items)) {
-    return items;
-  }
-  const result = {};
-  const entries = Object.entries(items);
-  while (entries.length) {
-    const entry = entries.shift();
-    if (!entry) {
-      break;
-    }
-    const [key, value] = entry;
-    if (Array.isArray(value)) {
-      result[key] = value;
-    } else {
-      for (const entry2 of Object.entries(value)) {
-        entries.push([`${key}:${entry2[0]}`, entry2[1]]);
-      }
-    }
-  }
-  return result;
-};
-const expand = (items) => {
-  if (Array.isArray(items)) {
-    return items;
-  }
-  const result = {};
-  for (const [key, value] of Object.entries(items)) {
-    const parts = key.split(":");
-    let stack = result;
-    for (let i = 0; i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (!(part in stack)) {
-        stack[part] = {};
-      }
-      if (!Array.isArray(stack[part])) {
-        stack = stack[part];
-      }
-    }
-    stack[parts[parts.length - 1]] = value;
-  }
-  return result;
-};
-
-function SortableListContainer({
-  children,
-  id,
-  index,
-  items
-}) {
-  const { id: parent } = useSortableListContext(
-    "@optiaxiom/react/SortableListContainer"
-  );
-  if (typeof items === "string") {
-    throw new Error(
-      `\`@optiaxiom/react/SortableItem\` must be used instead of \`@optiaxiom/react/SortableList\``
-    );
-  }
-  const [hasDropTarget, setHasDropTarget] = React.useState(false);
-  const { isDropTarget, ref } = react.useDroppable({
-    accept: "item",
-    collisionDetector: collision.pointerIntersection,
-    collisionPriority: 1,
-    id: parent ? `${parent}:${id}` : id,
-    type: "list"
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SortableListContainerProvider,
-    {
-      elementRef: ref,
-      id,
-      index,
-      isDropTarget,
-      items,
-      setHasDropTarget,
-      children: children?.({
-        count: Object.keys(collapse(items)).length,
-        id,
-        index,
-        isDropTarget: isDropTarget || hasDropTarget
-      })
-    }
-  );
-}
-SortableListContainer.displayName = "@optiaxiom/react/SortableListContainer";
-
 const Sortable = React.forwardRef(
   ({ children, items: itemsProp, onChange, onItemsChange, ...props }, ref) => {
     const [itemsState, setItemsState] = React.useState(null);
@@ -1817,38 +1725,46 @@ const Sortable = React.forwardRef(
           if (!source || itemsState === null) {
             return;
           }
-          const normalized = collapse(itemsState);
-          const nextNormalized = helpers.move(normalized, event);
-          if (nextNormalized !== normalized) {
-            setItemsState(expand(nextNormalized));
-          }
+          setItemsState(helpers.move(itemsState, event));
         },
         onDragStart: () => {
           setItemsState(itemsProp ?? []);
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(SortableProvider, { cacheRef, isSorting: itemsState !== null, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ref, ...props, children: typeof children === "function" ? Array.isArray(items) ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(SortableItemContainer, { id: item, index, children }, item)) : Object.entries(
-          items
-        ).map(([group, items2], index) => /* @__PURE__ */ jsxRuntime.jsx(
-          SortableListContainer,
-          {
-            id: group,
-            index,
-            items: items2,
-            children
-          },
-          group
-        )) : children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(SortableProvider, { cacheRef, isSorting: itemsState !== null, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ref, ...props, children: children?.(items) }) })
       }
     );
   }
 );
 Sortable.displayName = "@optiaxiom/react/Sortable";
 
-var handle = IconMagnifyingGlass.recipeRuntime({base:'_1hnxqi6'});
+const [SortableGroupProvider, useSortableGroupContext] = reactContext.createContext("@optiaxiom/react/SortableGroup", {
+  id: void 0,
+  setHasDropTarget: () => {
+  }
+});
+
+const SortableGroup = React.forwardRef(
+  ({ children, group: id, ...props }, outerRef) => {
+    const [hasDropTarget, setHasDropTarget] = React.useState(false);
+    const { isDropTarget, ref: innerRef } = react.useDroppable({
+      accept: "item",
+      collisionPriority: 1,
+      id,
+      type: "group"
+    });
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    return /* @__PURE__ */ jsxRuntime.jsx(SortableGroupProvider, { id, setHasDropTarget, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { justifyContent: "flex-start", ref, ...props, children: typeof children === "function" ? children(isDropTarget || hasDropTarget) : children }) });
+  }
+);
+SortableGroup.displayName = "@optiaxiom/react/SortableGroup";
+
+var handle = IconMagnifyingGlass.recipeRuntime({base:'_1ekdc2e'});
+
+const [SortableItemProvider, useSortableItemContext] = reactContext.createContext("@optiaxiom/react/SortableItem");
 
 const SortableHandle = React.forwardRef(
   ({ children, className, ...props }, outerRef) => {
-    const { handleRef, isDragging } = useSortableItemContainerContext(
+    const { handleRef, isDragging } = useSortableItemContext(
       "@optiaxiom/react/SortableHandle"
     );
     const ref = reactComposeRefs.useComposedRefs(handleRef, outerRef);
@@ -1867,24 +1783,42 @@ const SortableHandle = React.forwardRef(
 );
 SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
 
-var item = IconMagnifyingGlass.recipeRuntime({base:'_1x05byt',variants:{handle:{false:{},true:'h4797s'}}});
+var item = IconMagnifyingGlass.recipeRuntime({base:'_11iqij5',variants:{handle:{false:{},true:'abrsb6'}}});
 
 const SortableItem = React.forwardRef(
-  ({ children, className, ...props }, outerRef) => {
+  ({ children, className, index, item: id, ...props }, outerRef) => {
     const { cacheRef, isSorting } = useSortableContext(
       "@optiaxiom/react/SortableItem"
     );
-    const { elementRef, handleRef, id, isDragging } = useSortableItemContainerContext("@optiaxiom/react/SortableItem");
-    if (!id) {
-      throw new Error(
-        `\`@optiaxiom/react/SortableItem\` needs an additional \`@optiaxiom/react/SortableList\``
-      );
-    }
-    const ref = reactComposeRefs.useComposedRefs(elementRef, outerRef);
+    const { id: group, setHasDropTarget } = useSortableGroupContext(
+      "@optiaxiom/react/SortableItem"
+    );
+    const handleRef = React.useRef(null);
+    const {
+      isDragging,
+      isDropTarget,
+      ref: innerRef
+    } = sortable.useSortable({
+      accept: "item",
+      feedback: "clone",
+      group,
+      handle: handleRef,
+      id,
+      index,
+      type: "item"
+    });
+    React.useEffect(() => {
+      if (!isDropTarget) {
+        return;
+      }
+      setHasDropTarget(true);
+      return () => setHasDropTarget(false);
+    }, [setHasDropTarget, id, isDropTarget]);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     if (!isSorting) {
       cacheRef.current.set(id, children);
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(SortableItemProvider, { handleRef, isDragging, children: /* @__PURE__ */ jsxRuntime.jsx(
       IconMagnifyingGlass.Box,
       {
         "data-sortable-dragging": isDragging ? "" : void 0,
@@ -1893,50 +1827,11 @@ const SortableItem = React.forwardRef(
         ...props,
         children: cacheRef.current.get(id)
       }
-    );
+    ) });
   }
 );
 SortableItem.displayName = "@optiaxiom/react/SortableItem";
 
-const SortableList = React.forwardRef(
-  ({ children, ...props }, outerRef) => {
-    const { id: parent } = useSortableListContext(
-      "@optiaxiom/react/SortableList"
-    );
-    const { elementRef, id, items, setHasDropTarget } = useSortableListContainerContext("@optiaxiom/react/SortableList");
-    const { id: itemId } = useSortableItemContainerContext(
-      "@optiaxiom/react/SortableList"
-    );
-    if (itemId) {
-      throw new Error(
-        `\`@optiaxiom/react/SortableItem\` must be used instead of \`@optiaxiom/react/SortableList\``
-      );
-    }
-    const ref = reactComposeRefs.useComposedRefs(
-      Array.isArray(items) ? elementRef : void 0,
-      outerRef
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SortableListProvider,
-      {
-        id: parent ? `${parent}:${id}` : id,
-        setHasDropTarget,
-        children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { justifyContent: "flex-start", ref, ...props, children: typeof children === "function" ? Array.isArray(items) ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(SortableItemContainer, { id: item, index, children }, item)) : Object.entries(items).map(([group, items2], index) => /* @__PURE__ */ jsxRuntime.jsx(
-          SortableListContainer,
-          {
-            id: group,
-            index,
-            items: items2,
-            children
-          },
-          group
-        )) : children })
-      }
-    );
-  }
-);
-SortableList.displayName = "@optiaxiom/react/SortableList";
-
 function Spotlight({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Menu, { inputVisible: "always", size: "lg", ...props, children });
 }
@@ -1979,9 +1874,9 @@ exports.MenuTrigger = MenuTrigger;
 exports.Pill = Pill;
 exports.PillGroup = PillGroup;
 exports.Sortable = Sortable;
+exports.SortableGroup = SortableGroup;
 exports.SortableHandle = SortableHandle;
 exports.SortableItem = SortableItem;
-exports.SortableList = SortableList;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
 exports.SpotlightTrigger = SpotlightTrigger;