@optiaxiom/react 1.5.3 → 1.5.5

package/dist/cjs/unstable.js

@@ -3,99 +3,88 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var IconMagnifyingGlass = require('./IconMagnifyingGlass-DSb8yHAt.js');
+var IconMagnifyingGlass = require('./IconMagnifyingGlass-B2lTMCkk.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-8LhR5w3v.css');
-require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-laHh_DG3.css');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-DaXyL8HV.css');
-require('./assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-BL0uHKk1.css');
-require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-BdtIq5VP.css');
+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-MwWujuN6.css');
-require('./assets/src/card/Card.css.ts.vanilla-B5UcESE6.css');
+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-BSoAMcMa.css');
-require('./assets/src/card/CardHeader.css.ts.vanilla-DtYv9g7V.css');
-require('./assets/src/card/CardPreview.css.ts.vanilla-CZI5pIpO.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-BocAEG9j.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-C454O81a.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-BFUu_GyR.css');
+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');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/pill/Pill.css.ts.vanilla-CNLuvMBl.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-C6rS48Ul.css');
 var helpers = require('@dnd-kit/helpers');
 var react = require('@dnd-kit/react');
-require('./assets/src/sortable/Sortable.css.ts.vanilla-BBTt9HvE.css');
-require('./assets/src/sortable/SortableHandle.css.ts.vanilla-vvrch3Zc.css');
+var collision = require('@dnd-kit/collision');
 var sortable = require('@dnd-kit/react/sortable');
-require('./assets/src/sortable/SortableItem.css.ts.vanilla-CuOsT2xy.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CJDNP0Kx.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-DtgB8qaI.css');
-require('./assets/src/table/Table.css.ts.vanilla-BBv3smRP.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-B9iraYpv.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-CWDdCmxv.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-CZGS-jc-.css');
-require('./assets/src/table/TableHeader.css.ts.vanilla-74DzHpNe.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-B_XkaSHg.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-B7It_nVP.css');
+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('react-day-picker');
 require('@radix-ui/react-popper');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/calendar/Calendar.css.ts.vanilla-ClSVw3Dw.css');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-hV69pzOp.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-CzzPfCL9.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-BG6BK7O0.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-C2smGP-j.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CJDNP0Kx.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-C6gmwJZA.css');
+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('@radix-ui/react-popover');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CJDNP0Kx.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-DJvZ0etP.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-CpKWXW6H.css');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DWdYUXqs.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-JMfsYW26.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-BYPobqvu.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-BENwxMg5.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-CUNyez_P.css');
+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('@tanstack/react-virtual');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-CcXUnze5.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-DniA0gMP.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-D8wejmbE.css');
+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('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-Dk191LzY.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-DJOUUhpP.css');
 require('@vanilla-extract/dynamic');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DOuPOyFX.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-wSxpsOW8.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-DYLdRaZO.css');
-require('./assets/src/text/Text.css.ts.vanilla-ClbiM7to.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-HoKkPIKV.css');
+require('./assets/src/text/Text.css.ts.vanilla-BcfBWIns.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-BxJRjiSk.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-z8aQkdYA.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-BFyL7usa.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-CaxwdPPt.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-C736k4Hf.css');
+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('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-BrZyuCJa.css');
-require('./assets/src/box/Box.css.ts.vanilla-D4_HO4KZ.css');
-require('./assets/src/link/Link.css.ts.vanilla-Bx_q1DaI.css');
-
-const useFocusBookmark = (ref) => {
-  React.useEffect(() => {
-    IconMagnifyingGlass.bookmarks.current.push(ref);
-    return () => {
-      IconMagnifyingGlass.bookmarks.current = IconMagnifyingGlass.bookmarks.current.filter(
-        (bookmark) => bookmark !== ref
-      );
-    };
-  }, [ref]);
-};
+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');
 
 const keyNameMap = {
   " ": "space",
@@ -725,7 +714,7 @@ function Menu({
 }
 Menu.displayName = "@optiaxiom/react/Menu";
 
-var content$1 = IconMagnifyingGlass.recipeRuntime({base:'_1ors29n'});
+var content$1 = IconMagnifyingGlass.recipeRuntime({base:'_17tyw2w'});
 
 const MenuDialogContent = React.forwardRef(
   ({
@@ -745,7 +734,7 @@ const MenuDialogContent = React.forwardRef(
 );
 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'},'_1f6sbo1']}}});
+var input$1 = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'quf22t']}}});
 
 const MenuInput = React.forwardRef(
   ({ className, onKeyDown, ...props }, outerRef) => {
@@ -756,7 +745,6 @@ const MenuInput = React.forwardRef(
       "@optiaxiom/react/MenuInput"
     );
     const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
-    useFocusBookmark(inputRef);
     const [minWidth, setMinWidth] = React.useState(160);
     const containerRef = React.useRef(null);
     React.useEffect(() => {
@@ -852,14 +840,11 @@ const MenuRadioItem = React.forwardRef(
 MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
 
 const MenuSubInput = React.forwardRef(
-  ({ onKeyDown, ...props }, outerRef) => {
+  ({ onKeyDown, ...props }, ref) => {
     const { downshift, highlightedItem } = useCommandContext(
       "@optiaxiom/react/MenuSubInput"
     );
     const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuSubInput");
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    useFocusBookmark(innerRef);
     return /* @__PURE__ */ jsxRuntime.jsx(
       CommandInput,
       {
@@ -1257,10 +1242,10 @@ const MenuTrigger = React.forwardRef(
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var link = IconMagnifyingGlass.recipeRuntime({base:'_2w7k96'});
-var list = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'fflwz0']});
+var link = IconMagnifyingGlass.recipeRuntime({base:'_15jrxdk'});
+var list = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_1pr73q5']});
 
-var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_131k7l4']});
+var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'fkno7r']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ addonAfter, children, className, ...props }, ref) => {
@@ -1324,7 +1309,7 @@ const renderItems = (items, limit = items.length, renderItem) => {
   ];
 };
 
-var card = IconMagnifyingGlass.recipeRuntime({base:['giyg52',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',justifyContent:'flex-start',p:'16'},'_1kyd686']});
+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']});
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
@@ -1344,7 +1329,7 @@ const CardAction = React.forwardRef(
 );
 CardAction.displayName = "@optiaxiom/react/CardAction";
 
-var checkbox = IconMagnifyingGlass.recipeRuntime({base:['_29vng0']});
+var checkbox = IconMagnifyingGlass.recipeRuntime({base:['_4pd56p']});
 
 const CardCheckbox = React.forwardRef(
   ({ className, onChange, ...props }, ref) => {
@@ -1385,9 +1370,9 @@ const CardFooter = React.forwardRef(
 );
 CardFooter.displayName = "@optiaxiom/react/CardFooter";
 
-var addon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_45jb5w',before:'_1s8ms5k'}}});
-var content = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1'},'_13rjljh']});
-var header = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_1h876ce']});
+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']});
 
 const CardHeader = React.forwardRef(
   ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
@@ -1422,8 +1407,8 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var overlay$1 = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_9c0jk']});
-var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_5h5w8z']});
+var overlay = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_16d8ssy']});
+var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1011qxq']});
 
 const CardPreview = React.forwardRef(
   ({
@@ -1437,7 +1422,7 @@ const CardPreview = React.forwardRef(
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ref, ...preview({}, className), ...props, children: [
       children,
-      (addonTopLeft || addonTopRight) && /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...overlay$1(), children: [
+      (addonTopLeft || addonTopRight) && /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...overlay(), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           IconMagnifyingGlass.Box,
           {
@@ -1485,7 +1470,7 @@ const CardPreview = React.forwardRef(
 );
 CardPreview.displayName = "@optiaxiom/react/CardPreview";
 
-var mark = IconMagnifyingGlass.recipeRuntime({base:'_16vfsi9'});
+var mark = IconMagnifyingGlass.recipeRuntime({base:'_9up3ox'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -1517,8 +1502,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = IconMagnifyingGlass.recipeRuntime({base:'n0w604',variants:{empty:{false:{},true:'oh9bpb'}}});
-var input = IconMagnifyingGlass.recipeRuntime({base:'_86ucpu'});
+var editor = IconMagnifyingGlass.recipeRuntime({base:'cx4bl2',variants:{empty:{false:{},true:'_1bwocic'}}});
+var input = IconMagnifyingGlass.recipeRuntime({base:'fyc0qx'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -1599,7 +1584,7 @@ function getText(element) {
   return text;
 }
 
-var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1uebty']});
+var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'cm7pn4']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -1624,7 +1609,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'},'_1r6qn5a'],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'},'_1yd1mvw'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
@@ -1655,16 +1640,162 @@ const PillGroup = React.forwardRef(
 );
 PillGroup.displayName = "@optiaxiom/react/PillGroup";
 
-var overlay = IconMagnifyingGlass.recipeRuntime({base:['jbi8to']});
-
 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 [showOverlay, setShowOverlay] = React.useState(false);
     const [itemsState, setItemsState] = React.useState(null);
     const items = itemsState === null ? itemsProp ?? [] : itemsState;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    const cacheRef = React.useRef(/* @__PURE__ */ new Map());
+    return /* @__PURE__ */ jsxRuntime.jsx(
       react.DragDropProvider,
       {
         onDragEnd: (event) => {
@@ -1686,38 +1817,38 @@ const Sortable = React.forwardRef(
           if (!source || itemsState === null) {
             return;
           }
-          setItemsState(helpers.move(itemsState, event));
+          const normalized = collapse(itemsState);
+          const nextNormalized = helpers.move(normalized, event);
+          if (nextNormalized !== normalized) {
+            setItemsState(expand(nextNormalized));
+          }
         },
-        onDragStart: (event) => {
-          setShowOverlay(event.nativeEvent instanceof PointerEvent);
+        onDragStart: () => {
           setItemsState(itemsProp ?? []);
         },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ref, ...props, children: typeof children === "function" ? items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            SortableProvider,
-            {
-              index,
-              isSorting: itemsState !== null,
-              item,
-              children: children(item, index)
-            },
-            item
-          )) : children }),
-          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Portal, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsxRuntime.jsx(react.DragOverlay, { children: showOverlay && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { bg: "bg.overlay", rounded: "sm", size: "full" }) }) })
-        ]
+        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 }) })
       }
     );
   }
 );
 Sortable.displayName = "@optiaxiom/react/Sortable";
 
-var handle = IconMagnifyingGlass.recipeRuntime({base:'_95bja'});
-
-const [SortableItemProvider, useSortableItemContext] = reactContext.createContext("@optiaxiom/react/SortableItem");
+var handle = IconMagnifyingGlass.recipeRuntime({base:'_1hnxqi6'});
 
 const SortableHandle = React.forwardRef(
   ({ children, className, ...props }, outerRef) => {
-    const { handleRef, isDragging } = useSortableItemContext(
+    const { handleRef, isDragging } = useSortableItemContainerContext(
       "@optiaxiom/react/SortableHandle"
     );
     const ref = reactComposeRefs.useComposedRefs(handleRef, outerRef);
@@ -1736,51 +1867,76 @@ const SortableHandle = React.forwardRef(
 );
 SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
 
-var item = IconMagnifyingGlass.recipeRuntime({base:{transition:'opacity'},variants:{handle:{false:{},true:'_1mmklwa'}}});
+var item = IconMagnifyingGlass.recipeRuntime({base:'_1x05byt',variants:{handle:{false:{},true:'h4797s'}}});
 
 const SortableItem = React.forwardRef(
-  ({ children, className, style, ...props }, outerRef) => {
-    const { index, isSorting, item: item$1 } = useSortableContext(
+  ({ children, className, ...props }, outerRef) => {
+    const { cacheRef, isSorting } = useSortableContext(
       "@optiaxiom/react/SortableItem"
     );
-    const handleRef = React.useRef(null);
-    const { isDragging, ref: innerRef } = sortable.useSortable({
-      accept: "item",
-      handle: handleRef,
-      id: item$1,
-      index,
-      type: "item"
-    });
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const cacheRef = React.useRef();
-    if (!isSorting || typeof children !== "function") {
-      cacheRef.current = typeof children === "function" ? children() : children;
+    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);
+    if (!isSorting) {
+      cacheRef.current.set(id, children);
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      SortableItemProvider,
+      IconMagnifyingGlass.Box,
       {
-        handleRef,
-        id: item$1,
-        isDragging,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          IconMagnifyingGlass.Box,
-          {
-            ref,
-            style: {
-              opacity: isDragging ? 0.5 : void 0,
-              ...style
-            },
-            ...item({ handle: !handleRef.current }, className),
-            ...props,
-            children: cacheRef.current
-          }
-        )
+        "data-sortable-dragging": isDragging ? "" : void 0,
+        ref,
+        ...item({ handle: !handleRef.current }, className),
+        ...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 });
 }
@@ -1825,6 +1981,7 @@ exports.PillGroup = PillGroup;
 exports.Sortable = Sortable;
 exports.SortableHandle = SortableHandle;
 exports.SortableItem = SortableItem;
+exports.SortableList = SortableList;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
 exports.SpotlightTrigger = SpotlightTrigger;