@optiaxiom/react 1.4.5 → 1.5.1

package/dist/cjs/unstable.js

@@ -3,80 +3,125 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var IconMagnifyingGlass = require('./IconMagnifyingGlass-Cx14aYC0.js');
-require('./assets/src/layers/layers.css.ts.vanilla-sGpaWqx5.css');
-require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-wWMHw65i.css');
-require('./assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-tPsgaO70.css');
+var IconMagnifyingGlass = require('./IconMagnifyingGlass-CxLRvuEF.js');
+require('./assets/src/layers/layers.css.ts.vanilla-DMaqBdHD.css');
+require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-4EB7Xbqh.css');
+require('./assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-DI9hUTkr.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/cover/Cover.css.ts.vanilla-Dfr_ZXXG.css');
-require('./assets/src/link/Link.css.ts.vanilla-BJCeHHTC.css');
-require('./assets/src/card/Card.css.ts.vanilla-DVjY_Vvs.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-DgBv8RuW.css');
+require('./assets/src/card/Card.css.ts.vanilla-Cbg4QNiF.css');
 var reactContext = require('@radix-ui/react-context');
-require('./assets/src/card/CardOverflow.css.ts.vanilla-DPuwCfiO.css');
-require('./assets/src/card/CardAction.css.ts.vanilla-LsCG0uH3.css');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var clsx = require('clsx');
-require('./assets/src/card/CardImage.css.ts.vanilla-DZkAgxZ2.css');
-var reactSlot = require('@radix-ui/react-slot');
+require('./assets/src/card/CardCheckbox.css.ts.vanilla-Dkjtmy1z.css');
+require('./assets/src/card/CardHeader.css.ts.vanilla-B1H_41zD.css');
+require('./assets/src/card/CardPreview.css.ts.vanilla-DyFoIKdz.css');
 var downshift = require('downshift');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-viM0wzw7.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BzCBwfN1.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-GMnxoQ4-.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-jjeqD_rW.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DJBWP3vP.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-D1-Ij5nY.css');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-B9ESb0EX.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-qAQ5gQIP.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-Cx5atBZp.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-BABdrlmZ.css');
-require('./assets/src/table/Table.css.ts.vanilla-C9jWIfZN.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-Dvewv0g8.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-DKWSCVR_.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-BXyR8q89.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-DWjifEIw.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DA_qbxeU.css');
+require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-CO3bqvq6.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-CkB0e7dC.css');
+var reactSlot = require('@radix-ui/react-slot');
+require('./assets/src/pill/Pill.css.ts.vanilla-LFamA4C1.css');
+var helpers = require('@dnd-kit/helpers');
+var react = require('@dnd-kit/react');
+require('./assets/src/sortable/Sortable.css.ts.vanilla-C1mOONde.css');
+require('./assets/src/sortable/SortableHandle.css.ts.vanilla-CP70tBh_.css');
+var sortable = require('@dnd-kit/react/sortable');
+require('./assets/src/sortable/SortableItem.css.ts.vanilla-D8PbjuDI.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-1mT-GBsC.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-BzBSmcTE.css');
+require('./assets/src/table/Table.css.ts.vanilla-oE1dR3U1.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-BS5o-IU4.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-DARD99Vi.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-Mzp6i09q.css');
+require('./assets/src/table/TableHeader.css.ts.vanilla-DD4vI1Ml.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-BEyX-mhJ.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DKYwKskK.css');
 require('react-day-picker');
 require('@radix-ui/react-popper');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-CoG8NtWh.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-DLhhwjcr.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-FBb6V0pK.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-DTGYmare.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-Cx5atBZp.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-CUEDvAsn.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-B5VHHqk5.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BLJQrr3z.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-CTpGUIiK.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-u-VlisWS.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-1mT-GBsC.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-Dt3RTsY7.css');
 require('@radix-ui/react-popover');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-Cx5atBZp.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-bHOUxPUF.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-Fry_f6al.css');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-BHOxCZ1j.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DN9kKQT8.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-BU8QYqxz.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CYu7IUFz.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-CTJ8rLzc.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-1mT-GBsC.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-BtnqM68I.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-B1Yx7IEn.css');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DDe2uTWF.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DeoFu4V5.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-t0w4VnI3.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-BvbsDONo.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-ChH3E2S-.css');
 require('@tanstack/react-virtual');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-D3djE9RO.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-X8GV77Cr.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-Dqt3__za.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-CNDt1Hak.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-sZQmo5Rf.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-BzdnTk-p.css');
 require('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-CmIZK1cU.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-DklKq-BZ.css');
 require('@vanilla-extract/dynamic');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-Dx-5dCIS.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-qMr39fy7.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-DsS2VGDY.css');
-require('./assets/src/text/Text.css.ts.vanilla-CKKtIpha.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-DZ8Q2jnW.css');
+require('./assets/src/text/Text.css.ts.vanilla-20Dy4ncJ.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-xheREv7l.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-Dx1pjGJE.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-UH8Wm1GJ.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-rL9r9uUN.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-BRoCqZT7.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-DoCIMRp7.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-c0Df-0jA.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-GDFL-t3V.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-DMpnynLb.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-DS0kd8K7.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-DATOtFl_.css');
-require('./assets/src/box/Box.css.ts.vanilla-Bc1EpFFv.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-C7okIXxT.css');
+require('./assets/src/box/Box.css.ts.vanilla-Dhk5a5nh.css');
+require('./assets/src/link/Link.css.ts.vanilla-FPM0Un1u.css');
 
+const useFocusBookmark = (ref) => {
+  React.useEffect(() => {
+    IconMagnifyingGlass.bookmarks.current.push(ref);
+    return () => {
+      IconMagnifyingGlass.bookmarks.current = IconMagnifyingGlass.bookmarks.current.filter(
+        (bookmark) => bookmark !== ref
+      );
+    };
+  }, [ref]);
+};
+
+const keyNameMap = {
+  " ": "space",
+  ArrowLeft: "arrowleft",
+  ArrowRight: "arrowright",
+  ArrowUp: "arrowup",
+  ArrowDown: "arrowdown",
+  Escape: "esc",
+  Esc: "esc",
+  Enter: "enter",
+  Tab: "tab",
+  Backspace: "backspace",
+  Delete: "delete",
+  Insert: "insert",
+  Home: "home",
+  End: "end",
+  PageUp: "pageup",
+  PageDown: "pagedown",
+  "+": "plus",
+  "-": "minus",
+  "*": "asterisk",
+  "/": "slash"
+};
+function normalizeKey(key) {
+  const lowerKey = key.replace("Key", "").toLowerCase();
+  return keyNameMap[key] || lowerKey;
+}
 function parseHotkey(hotkey) {
   const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
   const modifiers = {
@@ -115,7 +160,7 @@ function isExactHotkey(hotkey, event, usePhysicalKeys) {
   if (shift !== shiftKey) {
     return false;
   }
-  if (key && (!usePhysicalKeys && pressedKey.toLowerCase() === key.toLowerCase() || pressedCode.replace("Key", "").toLowerCase() === key.toLowerCase())) {
+  if (key && (usePhysicalKeys ? normalizeKey(pressedCode) === normalizeKey(key) : normalizeKey(pressedKey ?? pressedCode) === normalizeKey(key))) {
     return true;
   }
   return false;
@@ -175,17 +220,17 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1qc5iyo']});
+var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'i8g94y']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...item({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...item$1({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
   }
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = IconMagnifyingGlass.recipeRuntime({base:[{fontSize:'md'},'_1yb2c62']});
+var link = IconMagnifyingGlass.recipeRuntime({base:[{fontSize:'md'},'g8g2nt']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { ...link({}, className), ref, ...props });
@@ -199,51 +244,30 @@ const BreadcrumbPage = React.forwardRef(
 );
 BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";
 
-var card = IconMagnifyingGlass.recipeRuntime({base:['_1rte8d9',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1vlthby']});
+var card = IconMagnifyingGlass.recipeRuntime({base:['_1mad8z6',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',justifyContent:'flex-start',p:'16'},'lyjq9y']});
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-const mapOrientationToFlexDirection = {
-  horizontal: "row",
-  vertical: "column"
-};
 const Card = React.forwardRef(
-  ({ children, className, orientation = "vertical", ...props }, ref) => {
+  ({ children, className, ...props }, ref) => {
     const descriptionId = reactId.useId();
     const labelId = reactId.useId();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      CardProvider,
-      {
-        descriptionId,
-        labelId,
-        orientation,
-        children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          IconMagnifyingGlass.Flex,
-          {
-            flexDirection: mapOrientationToFlexDirection[orientation],
-            ref,
-            ...card({}, className),
-            ...props,
-            children
-          }
-        ) })
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ref, ...card({}, className), ...props, children }) }) });
   }
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var action = IconMagnifyingGlass.recipeRuntime({base:['_9503ag']});
-
 const CardAction = React.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ActionsContent, { ref, ...action({}, className), ...props, children });
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ActionsContent, { flex: "1", ref, ...props, children });
   }
 );
 CardAction.displayName = "@optiaxiom/react/CardAction";
 
+var checkbox = IconMagnifyingGlass.recipeRuntime({base:['_1yrsicx']});
+
 const CardCheckbox = React.forwardRef(
-  ({ children, indeterminate, onChange, ...props }, ref) => {
+  ({ className, onChange, ...props }, ref) => {
     const labelPrefixId = reactId.useId();
     const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
     const [checked, setChecked] = reactUseControllableState.useControllableState({
@@ -251,123 +275,135 @@ const CardCheckbox = React.forwardRef(
       defaultProp: props.defaultChecked,
       prop: props.checked
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      IconMagnifyingGlass.CheckboxRoot,
-      {
-        "aria-labelledby": clsx(labelPrefixId, labelId),
-        description: false,
-        onChange: (event) => {
-          onChange?.(event);
-          setChecked(event.target.checked);
-        },
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            IconMagnifyingGlass.CheckboxControl,
-            {
-              indeterminate,
-              shift: Boolean(children)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { id: labelPrefixId, children: [
-            "Check to ",
-            checked ? "unselect" : "select"
-          ] }) })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.VisuallyHidden, { id: labelPrefixId, children: [
+        "Check to ",
+        checked ? "unselect" : "select"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.Checkbox,
+        {
+          "aria-labelledby": clsx(labelPrefixId, labelId),
+          onChange: (event) => {
+            onChange?.(event);
+            setChecked(event.target.checked);
+          },
+          ref,
+          ...checkbox({}, className),
+          ...props
+        }
+      )
+    ] });
   }
 );
 CardCheckbox.displayName = "@optiaxiom/react/CardCheckbox";
 
-const CardContent = React.forwardRef(
+const CardFooter = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { gap: "4", ref, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { alignSelf: "stretch", mt: "auto", ref, ...props, children });
   }
 );
-CardContent.displayName = "@optiaxiom/react/CardContent";
+CardFooter.displayName = "@optiaxiom/react/CardFooter";
 
-const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
-  const { descriptionId } = useCardContext("@optiaxiom/react/CardDescription");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Text,
-    {
-      color: "fg.tertiary",
-      fontSize: "sm",
-      id: descriptionId,
-      ref,
-      ...props,
-      children
-    }
-  );
-});
-CardDescription.displayName = "@optiaxiom/react/CardDescription";
+var addon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_1mk53j4',before:'q3rphl'}}});
+var content$1 = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1'},'_1ygbcp1']});
+var header = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_120lmmo']});
+
+const CardHeader = React.forwardRef(
+  ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
+    const { descriptionId, labelId } = useCardContext(
+      "@optiaxiom/react/CardHeader"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { ref, ...header({}, className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...content$1(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Heading, { fontSize: "md", fontWeight: "500", id: labelId, level: "2", children }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: description })
+      ] }),
+      addonBefore && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ...addon({ slot: "before" }), children: addonBefore }),
+      addonAfter && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ...addon({ slot: "after" }), children: addonAfter })
+    ] });
+  }
+);
+CardHeader.displayName = "@optiaxiom/react/CardHeader";
 
-var cardImage = IconMagnifyingGlass.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1gavmql'],variants:{orientation:{horizontal:[{w:'auto'},'n72p4u'],vertical:[{w:'full'},'r0v0e']}}});
+var image = IconMagnifyingGlass.recipeRuntime({base:{objectFit:'cover',rounded:'inherit',size:'full'}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
-    const { orientation } = useCardContext("@optiaxiom/react/CardImage");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Box,
-      {
-        asChild: true,
-        ref,
-        ...cardImage({ orientation }, className),
-        ...props,
-        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx("img", { alt, src })
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ref, ...image({}, className), ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx("img", { alt, src }) });
   }
 );
 CardImage.displayName = "@optiaxiom/react/CardImage";
 
 const CardLink = React.forwardRef(
   ({ ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { appearance: "subtle", overlay: true, ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { appearance: "subtle", cover: true, ref, ...props });
   }
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = IconMagnifyingGlass.recipeRuntime({base:['nlf66e',{alignSelf:'stretch'},'r8d21b'],variants:{orientation:{horizontal:['k10rsb'],vertical:['_13ja2hn']}}});
-
-const CardOverflow = React.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    const { orientation } = useCardContext("@optiaxiom/react/CardOverflow");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Box,
-      {
-        ref,
-        ...cardOverflow({ orientation }, className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-CardOverflow.displayName = "@optiaxiom/react/CardOverflow";
+var overlay$1 = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'b8i1y']});
+var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1wg0omi']});
 
-const Slot$1 = reactSlot.createSlot("@optiaxiom/react/CardTitle");
-const CardTitle = React.forwardRef(
-  ({ asChild, children, ...props }, ref) => {
-    const Comp = asChild ? Slot$1 : "h2";
-    const { labelId } = useCardContext("@optiaxiom/react/CardTitle");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Heading,
-      {
-        asChild: true,
-        fontSize: "md",
-        fontWeight: "500",
-        id: labelId,
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children })
-      }
-    );
+const CardPreview = React.forwardRef(
+  ({
+    addonBottomLeft,
+    addonBottomRight,
+    addonTopLeft,
+    addonTopRight,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ref, ...preview({}, className), ...props, children: [
+      children,
+      (addonTopLeft || addonTopRight) && /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...overlay$1(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconMagnifyingGlass.Box,
+          {
+            alignItems: "center",
+            alignSelf: "start",
+            display: "flex",
+            justifyContent: "space-between",
+            children: addonTopLeft
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconMagnifyingGlass.Box,
+          {
+            alignItems: "center",
+            alignSelf: "start",
+            display: "flex",
+            justifyContent: "space-between",
+            children: addonTopRight
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { w: "full" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconMagnifyingGlass.Box,
+          {
+            alignItems: "center",
+            alignSelf: "end",
+            display: "flex",
+            justifyContent: "space-between",
+            children: addonBottomLeft
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconMagnifyingGlass.Box,
+          {
+            alignItems: "center",
+            alignSelf: "end",
+            display: "flex",
+            justifyContent: "space-between",
+            children: addonBottomRight
+          }
+        )
+      ] })
+    ] });
   }
 );
-CardTitle.displayName = "@optiaxiom/react/CardTitle";
+CardPreview.displayName = "@optiaxiom/react/CardPreview";
 
 const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
 const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
@@ -411,7 +447,9 @@ const useCommandItems = ({
   return React.useMemo(() => {
     const substring = (inputValue ?? "").normalize();
     const callback = (parentOption) => (item) => {
-      return item.subOptions && substring ? item.subOptions.flatMap(callback(item)) : filterFn(item, substring) ? [
+      return item.subOptions && substring ? resolveItemProperty(item.subOptions, { inputValue }).flatMap(
+        callback(item)
+      ) : filterFn(item, substring) ? [
         parentOption ? {
           ...item,
           key: [
@@ -424,19 +462,21 @@ const useCommandItems = ({
         } : item
       ] : [];
     };
-    return options.flatMap(callback());
+    return options.flatMap(callback()).sort((a, b) => {
+      return (b.group?.priority ?? 0) - (a.group?.priority ?? 0);
+    });
   }, [options, filterFn, inputValue]);
 };
 
 function Command({
   children,
   empty,
+  enabled,
   inputValue: inputValueProp,
   loading,
   onHover,
   onInputValueChange,
   onSelect: onItemSelect,
-  open,
   options
 }) {
   const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
@@ -447,7 +487,7 @@ function Command({
   });
   const items = useCommandItems({ inputValue, options });
   const [highlightedIndex, setHighlightedIndex, placed] = IconMagnifyingGlass.usePortalPatch(
-    open,
+    enabled,
     () => items.filter((item) => "selected" in item).length > items.length / 2 ? items.findIndex(
       (item) => !resolveItemProperty(item.disabledReason) && resolveItemProperty(item.selected) && !item.multi
     ) : -1
@@ -465,7 +505,9 @@ function Command({
     itemToString: (item) => item !== null ? resolveItemProperty(item.label, { inputValue }) : "",
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
       setHighlightedIndex(highlightedIndex2);
-      if (highlightedIndex2 !== -1 && type === downshift.useCombobox.stateChangeTypes.ItemMouseMove) {
+      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]);
       }
     },
@@ -599,7 +641,10 @@ const CommandItem = React.forwardRef(
       },
       onMouseMove: (event) => {
         onMouseMove?.(event);
-        if (resolveItemProperty(item.disabledReason)) {
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (!downshift.isOpen || resolveItemProperty(item.disabledReason)) {
           event.preventDefault();
           Object.assign(event.nativeEvent, {
             preventDownshiftDefault: true
@@ -643,14 +688,14 @@ const CommandItem = React.forwardRef(
         children: IconMagnifyingGlass.decorateChildren(
           { asChild, children },
           (children2) => children2 ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            item.parentOption && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            item.parentOption && !item.parentOption.hiddenInSearchContext && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { color: "fg.secondary", children: resolveItemProperty(item.parentOption.label, {
                 inputValue
               }) }),
               /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, {}) })
             ] }),
             resolveItemProperty(item.label, { inputValue }),
-            detail && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { color: "fg.secondary", children: detail })
+            detail && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { color: "fg.secondary", flex: "1", children: detail })
           ] })
         )
       }
@@ -679,7 +724,7 @@ const CommandListbox = React.forwardRef(
 );
 CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
 
-var mark = IconMagnifyingGlass.recipeRuntime({base:'tlb7ip'});
+var mark = IconMagnifyingGlass.recipeRuntime({base:'ubpntc'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -711,8 +756,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = IconMagnifyingGlass.recipeRuntime({base:'z31bk8',variants:{empty:{false:{},true:'kdw7yb'}}});
-var input$1 = IconMagnifyingGlass.recipeRuntime({base:'_2skxgf'});
+var editor = IconMagnifyingGlass.recipeRuntime({base:'ooyjp0',variants:{empty:{false:{},true:'_5l3sew'}}});
+var input$1 = IconMagnifyingGlass.recipeRuntime({base:'_143w7pb'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -793,7 +838,7 @@ function getText(element) {
   return text;
 }
 
-var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1nqcmt']});
+var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'mqx0ec']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -830,8 +875,8 @@ const [MenuSubProvider, useMenuSubContext] = reactContext.createContext("@optiax
 function Menu({
   children,
   defaultOpen = false,
-  initialInputVisible,
   inputValue: inputValueProp,
+  inputVisible: inputVisibleProp,
   onInputValueChange,
   onOpenChange,
   open: openProp,
@@ -871,11 +916,15 @@ function Menu({
       }
     } else {
       if (open) {
-        setActiveItemStack([]);
+        setActiveItemStack(
+          (activeItemStack2) => activeItemStack2.length ? [] : activeItemStack2
+        );
       }
     }
   }, [open, size]);
+  const contentRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
   const options = React.useMemo(
     () => size === "sm" ? optionsProp.map((option) => ({
       ...option,
@@ -883,7 +932,18 @@ function Menu({
         "\u2026",
         ""
       ) : resolveItemProperty(option.label, { inputValue })
-    })) : activeItemStack.length ? activeItemStack[activeItemStack.length - 1] : optionsProp,
+    })) : activeItemStack.length ? activeItemStack.reduce((result, stackItem) => {
+      const stackKey = stackItem.key ?? resolveItemProperty(stackItem.label, { inputValue });
+      for (const resultItem of result) {
+        const resultKey = resultItem.key ?? resolveItemProperty(resultItem.label, { inputValue });
+        if (resultKey === stackKey) {
+          return resolveItemProperty(resultItem.subOptions, {
+            inputValue
+          }) ?? [];
+        }
+      }
+      throw new Error(`Could not find item: ${stackKey}`);
+    }, optionsProp) : optionsProp,
     [activeItemStack, inputValue, optionsProp, size]
   );
   const hasSelectableItem = React.useMemo(
@@ -891,7 +951,7 @@ function Menu({
     [options]
   );
   const inputDefaultVisibleRef = React.useRef(hasSelectableItem);
-  inputDefaultVisibleRef.current = initialInputVisible !== void 0 ? initialInputVisible : hasSelectableItem || false;
+  inputDefaultVisibleRef.current = inputVisibleProp === "always" ? true : hasSelectableItem || false;
   const [inputVisible, setInputVisible] = React.useState(
     inputDefaultVisibleRef.current
   );
@@ -923,25 +983,28 @@ function Menu({
         }
       },
       open,
-      placeholder,
+      placeholder: activeItemStack.length ? resolveItemProperty(
+        activeItemStack[activeItemStack.length - 1].label,
+        { inputValue }
+      ) : placeholder,
       setActiveItemStack,
       setOpen,
       size,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Command,
         {
+          enabled: open ? activeItemStack.length + 1 : false,
           inputValue,
           onHover: (item) => {
-            setSubMenuOpen(!!item.subOptions?.length);
+            setSubMenuOpen(
+              typeof item.subOptions === "function" || !!item.subOptions?.length
+            );
           },
           onInputValueChange: setInputValue,
           onSelect: (item, { dismiss }) => {
-            if (item.subOptions?.length) {
+            if (typeof item.subOptions === "function" || item.subOptions?.length) {
               if (size === "lg") {
-                setActiveItemStack((stack) => [
-                  ...stack ?? [],
-                  item.subOptions ?? []
-                ]);
+                setActiveItemStack((stack) => [...stack ?? [], item]);
               } else {
                 setSubMenuOpen(true);
               }
@@ -952,15 +1015,16 @@ function Menu({
               }
             }
           },
-          open: open ? activeItemStack.length + 1 : false,
           options,
           ...props,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             MenuSubProvider,
             {
+              contentRef,
               inputRef,
               open: subMenuOpen,
               setOpen: setSubMenuOpen,
+              triggerRef,
               children
             }
           )
@@ -971,16 +1035,19 @@ function Menu({
 }
 Menu.displayName = "@optiaxiom/react/Menu";
 
+var content = IconMagnifyingGlass.recipeRuntime({base:'alashu'});
+
 const MenuDialogContent = React.forwardRef(
   ({
     align: _align,
     "aria-label": ariaLabel,
     children,
+    className,
     side: _side,
     sideOffset: _sideOffset,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.DialogContent, { ref, transitionType: "pop", ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.DialogContent, { ref, ...content({}, className), ...props, children: [
       children,
       /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.DialogHeader, { children: ariaLabel }) })
     ] });
@@ -988,7 +1055,7 @@ const MenuDialogContent = React.forwardRef(
 );
 MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1fvwxh9']}}});
+var input = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1ytk0dp']}}});
 
 const MenuInput = React.forwardRef(
   ({ className, onKeyDown, ...props }, outerRef) => {
@@ -999,6 +1066,7 @@ 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(() => {
@@ -1029,7 +1097,7 @@ const MenuInput = React.forwardRef(
             setActiveItemStack(
               (stack) => stack.length ? stack.slice(0, -1) : stack
             );
-          } else if (event.key === "ArrowRight" && highlightedItem?.subOptions?.length && size === "sm") {
+          } else if (event.key === "ArrowRight" && (typeof highlightedItem?.subOptions === "function" || highlightedItem?.subOptions?.length) && size === "sm") {
             event.preventDefault();
             downshift.selectItem(highlightedItem);
           }
@@ -1094,11 +1162,14 @@ const MenuRadioItem = React.forwardRef(
 MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
 
 const MenuSubInput = React.forwardRef(
-  ({ onKeyDown, ...props }, ref) => {
+  ({ onKeyDown, ...props }, outerRef) => {
     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,
       {
@@ -1117,7 +1188,7 @@ const MenuSubInput = React.forwardRef(
           if (event.key === "ArrowLeft") {
             event.preventDefault();
             setOpen(false);
-          } else if (event.key === "ArrowRight" && highlightedItem?.subOptions?.length) {
+          } else if (event.key === "ArrowRight" && (typeof highlightedItem?.subOptions === "function" || highlightedItem?.subOptions?.length)) {
             event.preventDefault();
             downshift.selectItem(highlightedItem);
           }
@@ -1131,100 +1202,133 @@ const MenuSubInput = React.forwardRef(
 MenuSubInput.displayName = "@optiaxiom/react/MenuSubInput";
 
 const MenuSubContent = React.forwardRef(
-  ({ align = "start", children, item, side = "right", ...props }, ref) => {
-    const options = React.useMemo(() => item.subOptions ?? [], [item]);
+  ({ align = "start", children, side = "right", ...props }, outerRef) => {
     const { onSelect, setOpen: setRootMenuOpen } = useMenuContext(
       "@optiaxiom/react/MenuSubContent"
     );
-    const { setInputValue } = useCommandContext(
+    const {
+      highlightedItem: item,
+      inputValue: parentInputValue,
+      setInputValue: setParentInputValue
+    } = useCommandContext("@optiaxiom/react/MenuSubContent");
+    const {
+      contentRef: parentContentRef,
+      inputRef: parentInputRef,
+      triggerRef: parentTriggerRef
+    } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const { open, presence } = IconMagnifyingGlass.usePopoverContext(
       "@optiaxiom/react/MenuSubContent"
     );
-    const { inputRef: parentInputRef, open: parentSubMenuOpen } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
-    const { open } = IconMagnifyingGlass.usePopoverContext("@optiaxiom/react/MenuSubContent");
+    const ref = reactComposeRefs.useComposedRefs(parentContentRef, outerRef);
+    const [inputValue, setInputValue] = React.useState("");
+    const options = React.useMemo(
+      () => resolveItemProperty(item?.subOptions, { inputValue }) ?? [],
+      [inputValue, item]
+    );
+    const contentRef = React.useRef(null);
     const inputRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
     const [subMenuOpen, setSubMenuOpen] = React.useState(false);
     React.useEffect(() => {
       if (!open) {
         setSubMenuOpen(false);
       }
     }, [open]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.PopoverContent,
-      {
-        align,
-        alignOffset: item.subOptionsInputVisible ? -46 : -4,
-        minW: "trigger",
-        onCloseAutoFocus: (event) => {
-          if (parentSubMenuOpen) {
-            return;
-          }
-          event.preventDefault();
-          parentInputRef.current?.focus();
-        },
-        onEscapeKeyDown: () => setRootMenuOpen(false),
-        onPointerDown: (event) => {
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.target instanceof HTMLElement && event.target.closest('[role="option"]')) {
-            return;
-          }
-          event.preventDefault();
-        },
-        onPointerEnter: () => {
-          if (item.subOptionsInputVisible) {
-            inputRef.current?.focus();
-          }
-        },
-        onPointerLeave: (event) => {
-          if (item.subOptionsInputVisible) {
+    React.useEffect(() => {
+      return () => {
+        setInputValue("");
+        setSubMenuOpen(false);
+      };
+    }, [item]);
+    if (!item || !(open || presence)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverAnchor, { virtualRef: parentTriggerRef }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.PopoverContent,
+        {
+          align,
+          alignOffset: item.subOptionsInputVisible ? -46 : -4,
+          onCloseAutoFocus: (event) => {
+            event.preventDefault();
             parentInputRef.current?.focus();
-            event.stopPropagation();
-          }
-        },
-        p: "4",
-        ref,
-        side,
-        sideOffset: 0,
-        ...props,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(
-          Command,
-          {
-            onHover: (item2) => {
-              setSubMenuOpen(!!item2.subOptions?.length);
-            },
-            onInputValueChange: (inputValue) => {
-              if (item.subOptionsInputVisible) {
-                return;
-              }
+          },
+          onEscapeKeyDown: () => setRootMenuOpen(false),
+          onPointerDown: (event) => {
+            if (event.defaultPrevented) {
+              return;
+            }
+            if (event.target instanceof Element && event.target.closest('[role="option"]')) {
+              return;
+            }
+            event.preventDefault();
+            inputRef.current?.focus();
+          },
+          onPointerEnter: () => {
+            if (item.subOptionsInputVisible) {
+              inputRef.current?.focus();
+            }
+          },
+          onPointerLeave: (event) => {
+            if (item.subOptionsInputVisible) {
               parentInputRef.current?.focus();
-              setInputValue(inputValue);
-            },
-            onSelect: (item2, { dismiss }) => {
-              if (item2.subOptions?.length) {
-                setSubMenuOpen(true);
-              } else {
-                onSelect(item2, { dismiss });
-              }
-            },
-            open: true,
-            options,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubInput, { ref: inputRef }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                MenuSubProvider,
-                {
-                  inputRef,
-                  open: subMenuOpen,
-                  setOpen: setSubMenuOpen,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
+              event.stopPropagation();
+            }
+          },
+          p: "4",
+          ref,
+          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) })
+                  }
+                )
+              ]
+            },
+            item.key ?? resolveItemProperty(item.label, {
+              inputValue: parentInputValue
+            })
+          )
+        }
+      )
+    ] });
   }
 );
 MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
@@ -1232,16 +1336,27 @@ MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
 const MenuSubTrigger = React.forwardRef(
   ({
     children,
-    contentRef,
     item,
     onPointerDown,
     onPointerEnter,
     onPointerLeave,
+    onPointerMove,
     ...props
-  }, ref) => {
+  }, outerRef) => {
     const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
     const { open } = IconMagnifyingGlass.usePopoverContext("@optiaxiom/react/MenuSubTrigger");
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsxRuntime.jsx(
+    const { contentRef, triggerRef } = useMenuSubContext(
+      "@optiaxiom/react/MenuSubTrigger"
+    );
+    const pointerEnterRef = React.useRef(false);
+    const innerRef = React.useRef();
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    React.useEffect(() => {
+      if (open && highlightedItem === item && innerRef.current) {
+        triggerRef.current = innerRef.current;
+      }
+    }, [highlightedItem, item, open, triggerRef]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem,
       {
         addonAfter: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, {}),
@@ -1254,17 +1369,23 @@ const MenuSubTrigger = React.forwardRef(
         },
         onPointerEnter: (event) => {
           onPointerEnter?.(event);
-          if (highlightedItem !== item) {
+          if (event.defaultPrevented) {
             return;
           }
-          downshift.selectItem(item);
+          if (highlightedItem === item) {
+            pointerEnterRef.current = true;
+          }
         },
         onPointerLeave: (event) => {
           onPointerLeave?.(event);
+          pointerEnterRef.current = false;
           const box = contentRef.current?.getBoundingClientRect();
           if (!box) {
             return;
           }
+          if (pauseInteractionRef.current.isInsideTriangle) {
+            return;
+          }
           const bottom = {
             x: box.left,
             y: box.top + box.height
@@ -1285,38 +1406,42 @@ const MenuSubTrigger = React.forwardRef(
             pauseInteractionRef.current.isInsideTriangle = null;
           }, 20);
         },
+        onPointerMove: (event) => {
+          onPointerMove?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (pointerEnterRef.current && downshift.isOpen) {
+            downshift.selectItem(item);
+          }
+          pointerEnterRef.current = false;
+        },
         ref,
         ...props,
         children
       }
-    ) }) });
+    );
   }
 );
 MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";
 
-function MenuSub({ index, item }) {
-  const { highlightedItem } = useCommandContext("@optiaxiom/react/MenuSub");
-  const { open } = useMenuSubContext("@optiaxiom/react/MenuSub");
-  const contentRef = React.useRef(null);
-  return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Popover, { open: open && highlightedItem === item, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubTrigger, { contentRef, index, item }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(MenuSubContent, { item, ref: contentRef })
-  ] });
-}
-MenuSub.displayName = "@optiaxiom/react/MenuSub";
-
 const MenuListbox = React.forwardRef(
   ({ children, ...props }, ref) => {
+    const { inputValue } = useCommandContext("@optiaxiom/react/MenuListbox");
     const { size } = useMenuContext("@optiaxiom/react/MenuListbox");
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, ...props, children: children ?? ((item, index, prevItem) => {
-      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: [
-        IconMagnifyingGlass.shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSeparator, {}),
-        IconMagnifyingGlass.shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxLabel, { children: group.label }),
-        Comp === MenuSub ? /* @__PURE__ */ jsxRuntime.jsx(Comp, { index, item }) : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { index, item }) })
-      ] });
-    }) });
+    const { open } = useMenuSubContext("@optiaxiom/react/MenuListbox");
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, ...props, children: children ?? ((item, index, prevItem) => {
+        const Comp = typeof item.subOptions === "function" || item.subOptions?.length ? size === "sm" ? MenuSubTrigger : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : MenuRadioItem : MenuItem;
+        const group = item.group;
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          IconMagnifyingGlass.shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSeparator, {}),
+          IconMagnifyingGlass.shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxLabel, { children: group.label }),
+          Comp === MenuSubTrigger ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubTrigger, { index, item }) }) : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { index, item }) })
+        ] });
+      }) }),
+      !inputValue && size === "sm" && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Popover, { open, children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubContent, {}) })
+    ] });
   }
 );
 MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
@@ -1343,15 +1468,7 @@ const MenuPopoverContent = React.forwardRef(({ style, ...props }, outerRef) => {
     });
     return () => observer.disconnect();
   }, [open, props.side]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.PopoverContent,
-    {
-      minW: "trigger",
-      ref,
-      style: { ...style, minHeight },
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverContent, { ref, style: { ...style, minHeight }, ...props });
 });
 MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
 
@@ -1360,9 +1477,7 @@ const MenuContent = React.forwardRef(
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     const { labelId } = IconMagnifyingGlass.useFieldContext("@optiaxiom/react/MenuContent");
-    const { activeItemStack, inputVisible, placeholder, size } = useMenuContext(
-      "@optiaxiom/react/MenuContent"
-    );
+    const { activeItemStack, inputRef, inputVisible, placeholder, size } = useMenuContext("@optiaxiom/react/MenuContent");
     const { empty, loading } = useCommandContext(
       "@optiaxiom/react/MenuContent"
     );
@@ -1382,10 +1497,11 @@ const MenuContent = React.forwardRef(
           if (event.defaultPrevented) {
             return;
           }
-          if (event.target instanceof HTMLElement && event.target.closest('[role="option"]')) {
+          if (event.target instanceof Element && event.target.closest('[role="option"]')) {
             return;
           }
           event.preventDefault();
+          inputRef.current?.focus();
         },
         overflow: "hidden",
         p: size === "sm" ? "4" : "0",
@@ -1411,7 +1527,13 @@ const MenuContent = React.forwardRef(
 MenuContent.displayName = "@optiaxiom/react/MenuContent";
 
 const MenuTrigger = React.forwardRef(
-  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    asChild,
+    children,
+    onKeyDown,
+    ...props
+  }, outerRef) => {
     const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
     const Comp = size === "sm" ? IconMagnifyingGlass.PopoverTrigger : IconMagnifyingGlass.DialogTrigger;
     const buttonRef = React.useRef(null);
@@ -1423,6 +1545,10 @@ const MenuTrigger = React.forwardRef(
         "aria-labelledby": labelId,
         asChild: true,
         onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
           switch (event.key) {
             case "ArrowDown":
               setOpen(true);
@@ -1437,7 +1563,7 @@ const MenuTrigger = React.forwardRef(
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var pill = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_13f8cbk'],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'},'_1cbd4tv'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
@@ -1468,8 +1594,134 @@ const PillGroup = React.forwardRef(
 );
 PillGroup.displayName = "@optiaxiom/react/PillGroup";
 
+var overlay = IconMagnifyingGlass.recipeRuntime({base:['k5rkn3']});
+
+const [SortableProvider, useSortableContext] = reactContext.createContext("@optiaxiom/react/Sortable");
+
+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(
+      react.DragDropProvider,
+      {
+        onDragEnd: (event) => {
+          const { source } = event.operation;
+          if (!source || itemsState === null) {
+            return;
+          }
+          if (!event.canceled) {
+            onChange?.({
+              items: itemsState,
+              source: source.id.toString()
+            });
+            onItemsChange?.(itemsState);
+          }
+          setItemsState(null);
+        },
+        onDragOver: (event) => {
+          const { source } = event.operation;
+          if (!source || itemsState === null) {
+            return;
+          }
+          setItemsState(helpers.move(itemsState, event));
+        },
+        onDragStart: (event) => {
+          setShowOverlay(event.nativeEvent instanceof PointerEvent);
+          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" }) }) })
+        ]
+      }
+    );
+  }
+);
+Sortable.displayName = "@optiaxiom/react/Sortable";
+
+var handle = IconMagnifyingGlass.recipeRuntime({base:'s13mg8'});
+
+const [SortableItemProvider, useSortableItemContext] = reactContext.createContext("@optiaxiom/react/SortableItem");
+
+const SortableHandle = React.forwardRef(
+  ({ children, className, ...props }, outerRef) => {
+    const { handleRef, isDragging } = useSortableItemContext(
+      "@optiaxiom/react/SortableHandle"
+    );
+    const ref = reactComposeRefs.useComposedRefs(handleRef, outerRef);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        "aria-label": "draggable",
+        "data-state": isDragging ? "active" : void 0,
+        ref,
+        ...handle({}, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
+
+var item = IconMagnifyingGlass.recipeRuntime({base:{transition:'opacity'},variants:{handle:{false:{},true:'cgnoic'}}});
+
+const SortableItem = React.forwardRef(
+  ({ children, className, style, ...props }, outerRef) => {
+    const { index, isSorting, item: item$1 } = 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;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SortableItemProvider,
+      {
+        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
+          }
+        )
+      }
+    );
+  }
+);
+SortableItem.displayName = "@optiaxiom/react/SortableItem";
+
 function Spotlight({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Menu, { initialInputVisible: true, size: "lg", ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Menu, { inputVisible: "always", size: "lg", ...props, children });
 }
 Spotlight.displayName = "@optiaxiom/react/Spotlight";
 
@@ -1479,9 +1731,9 @@ const SpotlightContent = React.forwardRef((props, ref) => {
 SpotlightContent.displayName = "@optiaxiom/react/SpotlightContent";
 
 const DEFAULT_HOTKEY = "mod+K";
-const SpotlightTrigger = React.forwardRef(({ children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
+const SpotlightTrigger = React.forwardRef(({ children, ...props }, ref) => {
   const { open, setOpen } = useMenuContext("@optiaxiom/react/SpotlightTrigger");
-  useHotkeys([[hotkey, () => setOpen(!open)]]);
+  useHotkeys([[DEFAULT_HOTKEY, () => setOpen(!open)]]);
   return /* @__PURE__ */ jsxRuntime.jsx(MenuTrigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconMagnifyingGlass, {}), children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { color: "fg.tertiary", children }) }) });
 });
 SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
@@ -1496,12 +1748,11 @@ exports.BreadcrumbPage = BreadcrumbPage;
 exports.Card = Card;
 exports.CardAction = CardAction;
 exports.CardCheckbox = CardCheckbox;
-exports.CardContent = CardContent;
-exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
 exports.CardImage = CardImage;
 exports.CardLink = CardLink;
-exports.CardOverflow = CardOverflow;
-exports.CardTitle = CardTitle;
+exports.CardPreview = CardPreview;
 exports.Command = Command;
 exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
@@ -1514,6 +1765,9 @@ exports.MenuContent = MenuContent;
 exports.MenuTrigger = MenuTrigger;
 exports.Pill = Pill;
 exports.PillGroup = PillGroup;
+exports.Sortable = Sortable;
+exports.SortableHandle = SortableHandle;
+exports.SortableItem = SortableItem;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
 exports.SpotlightTrigger = SpotlightTrigger;