@optiaxiom/react 1.4.3 → 1.4.5

package/dist/cjs/unstable.js

@@ -3,79 +3,79 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var IconMagnifyingGlass = require('./IconMagnifyingGlass-cu2dqprf.js');
-require('./assets/src/layers/layers.css.ts.vanilla-IRSHqbpU.css');
-require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-Ceqt8kiB.css');
-require('./assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-4Bap70-A.css');
+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 reactId = require('@radix-ui/react-id');
-require('./assets/src/cover/Cover.css.ts.vanilla-t83DCGIF.css');
-require('./assets/src/link/Link.css.ts.vanilla-DCcetJvT.css');
-require('./assets/src/card/Card.css.ts.vanilla-ChUD7DVe.css');
+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');
 var reactContext = require('@radix-ui/react-context');
-require('./assets/src/card/CardOverflow.css.ts.vanilla-CKXnzYgJ.css');
-require('./assets/src/card/CardAction.css.ts.vanilla-C3Pt9Tr9.css');
+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-DvAmCfam.css');
+require('./assets/src/card/CardImage.css.ts.vanilla-DZkAgxZ2.css');
 var reactSlot = require('@radix-ui/react-slot');
 var downshift = require('downshift');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-B9rAnBw0.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DMtGmdZQ.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-8_-PISER.css');
+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');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-ALP4hTWK.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-Bw1DRUCB.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-IBpgBir4.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-DllCjCMM.css');
-require('./assets/src/table/Table.css.ts.vanilla-c1spS8Si.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-CHcW3i_W.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-BHe8Yd_C.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-CCikQZ_Z.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-DVHbSJAx.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-JJUadFMR.css');
+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('react-day-picker');
 require('@radix-ui/react-popper');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-Bw1MP2Ce.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-CX5BeU28.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-BD4Ez75f.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-Wa1_QyF_.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-IBpgBir4.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-Dy7oEZeq.css');
+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('@radix-ui/react-popover');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-IBpgBir4.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-Bai1BKi_.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-BlspQV2G.css');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-B62MJP5b.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-cqYDOJN9.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-DfYre0Yx.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla--HSsA9eL.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-CDgH9kUf.css');
+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('@tanstack/react-virtual');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-D7AI5WS1.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-DkzwDW8O.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla--BNwNv-w.css');
+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('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-BPDllpR5.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-CmIZK1cU.css');
 require('@vanilla-extract/dynamic');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-D1gxKuAZ.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-Dx-5dCIS.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-Dw3kOwhm.css');
-require('./assets/src/text/Text.css.ts.vanilla-E9UNkeEw.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-DsS2VGDY.css');
+require('./assets/src/text/Text.css.ts.vanilla-CKKtIpha.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-AOzhTAjH.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-IgsbjOjl.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-j3RJdozs.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-DM0YmXP0.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-QnTWdJ1A.css');
+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('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-BYgrHT7u.css');
-require('./assets/src/box/Box.css.ts.vanilla-C04tzhuw.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-DATOtFl_.css');
+require('./assets/src/box/Box.css.ts.vanilla-Bc1EpFFv.css');
 
 function parseHotkey(hotkey) {
   const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
@@ -175,7 +175,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_12zqmo7']});
+var item = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1qc5iyo']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -185,7 +185,7 @@ const BreadcrumbItem = React.forwardRef(
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = IconMagnifyingGlass.recipeRuntime({base:[{fontSize:'md'},'_1pc3gl3']});
+var link = IconMagnifyingGlass.recipeRuntime({base:[{fontSize:'md'},'_1yb2c62']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { ...link({}, className), ref, ...props });
@@ -199,7 +199,7 @@ const BreadcrumbPage = React.forwardRef(
 );
 BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";
 
-var card = IconMagnifyingGlass.recipeRuntime({base:['pns50a',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1x5q9dn']});
+var card = IconMagnifyingGlass.recipeRuntime({base:['_1rte8d9',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1vlthby']});
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
@@ -233,7 +233,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var action = IconMagnifyingGlass.recipeRuntime({base:['_1lzegdm']});
+var action = IconMagnifyingGlass.recipeRuntime({base:['_9503ag']});
 
 const CardAction = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -304,7 +304,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = IconMagnifyingGlass.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_14cdka6'],variants:{orientation:{horizontal:[{w:'auto'},'tknmfb'],vertical:[{w:'full'},'_1tr2lqh']}}});
+var cardImage = IconMagnifyingGlass.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1gavmql'],variants:{orientation:{horizontal:[{w:'auto'},'n72p4u'],vertical:[{w:'full'},'r0v0e']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -330,7 +330,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = IconMagnifyingGlass.recipeRuntime({base:['_1a9sfc6',{alignSelf:'stretch'},'_7l0341'],variants:{orientation:{horizontal:['_98bnd0'],vertical:['_1rvz8vp']}}});
+var cardOverflow = IconMagnifyingGlass.recipeRuntime({base:['nlf66e',{alignSelf:'stretch'},'r8d21b'],variants:{orientation:{horizontal:['k10rsb'],vertical:['_13ja2hn']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -464,9 +464,6 @@ function Command({
     items,
     itemToString: (item) => item !== null ? resolveItemProperty(item.label, { inputValue }) : "",
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
-      if (type === downshift.useCombobox.stateChangeTypes.MenuMouseLeave) {
-        return;
-      }
       setHighlightedIndex(highlightedIndex2);
       if (highlightedIndex2 !== -1 && type === downshift.useCombobox.stateChangeTypes.ItemMouseMove) {
         onHover?.(items[highlightedIndex2]);
@@ -484,14 +481,15 @@ function Command({
       const { changes, type } = actionAndChanges;
       switch (type) {
         case downshift.useCombobox.stateChangeTypes.InputBlur:
+        case downshift.useCombobox.stateChangeTypes.InputClick:
         case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
         case downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
         case downshift.useCombobox.stateChangeTypes.ItemClick:
+        case downshift.useCombobox.stateChangeTypes.MenuMouseLeave:
           return {
             ...changes,
             /**
              * Keep the selected option highlighted rather than resetting to -1
-             * TODO: reset if activePath had values
              */
             highlightedIndex: state.highlightedIndex
           };
@@ -552,14 +550,7 @@ const CommandInput = React.forwardRef(
             if (event.target.value) {
               return;
             }
-            if (!highlightedItem) {
-              return;
-            }
-            const subOptions = highlightedItem.subOptions;
-            if (event.key === " ") {
-              event.preventDefault();
-              downshift.selectItem(highlightedItem);
-            } else if (event.key === "ArrowRight" && subOptions?.length) {
+            if (event.key === " " && highlightedItem) {
               event.preventDefault();
               downshift.selectItem(highlightedItem);
             }
@@ -575,6 +566,7 @@ const CommandItem = React.forwardRef(
   ({
     asChild,
     children,
+    index,
     item,
     onClick,
     onMouseLeave,
@@ -591,7 +583,9 @@ const CommandItem = React.forwardRef(
       pauseInteractionRef
     } = useCommandContext("@optiaxiom/react/CommandItem");
     const itemProps = downshift.getItemProps({
+      "aria-posinset": index + 1,
       "aria-selected": selected ?? resolveItemProperty(item.selected),
+      "aria-setsize": items.length,
       item,
       onClick: (event) => {
         onClick?.(event);
@@ -626,7 +620,7 @@ const CommandItem = React.forwardRef(
           window.clearTimeout(pauseInteractionRef.current.timer);
           pauseInteractionRef.current.timer = window.setTimeout(() => {
             pauseInteractionRef.current.isInsideTriangle = null;
-            downshift.setHighlightedIndex(items.indexOf(item));
+            downshift.setHighlightedIndex(index);
           }, 20);
         } else {
           pauseInteractionRef.current.isInsideTriangle = null;
@@ -685,7 +679,7 @@ const CommandListbox = React.forwardRef(
 );
 CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
 
-var mark = IconMagnifyingGlass.recipeRuntime({base:'_1cvew0o'});
+var mark = IconMagnifyingGlass.recipeRuntime({base:'tlb7ip'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -717,8 +711,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = IconMagnifyingGlass.recipeRuntime({base:'_43lgrt',variants:{empty:{false:{},true:'szz2ke'}}});
-var input$1 = IconMagnifyingGlass.recipeRuntime({base:'_1pyfzt7'});
+var editor = IconMagnifyingGlass.recipeRuntime({base:'z31bk8',variants:{empty:{false:{},true:'kdw7yb'}}});
+var input$1 = IconMagnifyingGlass.recipeRuntime({base:'_2skxgf'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -799,7 +793,7 @@ function getText(element) {
   return text;
 }
 
-var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_7x85lh']});
+var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1nqcmt']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
@@ -863,7 +857,7 @@ function Menu({
     onChange: onInputValueChange,
     prop: inputValueProp
   });
-  const [activeItems, setActiveItems] = React.useState();
+  const [activeItemStack, setActiveItemStack] = React.useState([]);
   const [subMenuOpen, setSubMenuOpen] = React.useState(false);
   React.useEffect(() => {
     if (inputValue && size === "sm") {
@@ -877,7 +871,7 @@ function Menu({
       }
     } else {
       if (open) {
-        setActiveItems(void 0);
+        setActiveItemStack([]);
       }
     }
   }, [open, size]);
@@ -889,8 +883,8 @@ function Menu({
         "\u2026",
         ""
       ) : resolveItemProperty(option.label, { inputValue })
-    })) : activeItems ?? optionsProp,
-    [activeItems, inputValue, optionsProp, size]
+    })) : activeItemStack.length ? activeItemStack[activeItemStack.length - 1] : optionsProp,
+    [activeItemStack, inputValue, optionsProp, size]
   );
   const hasSelectableItem = React.useMemo(
     () => options.filter((item) => "selected" in item).length > options.length / 2,
@@ -915,10 +909,11 @@ function Menu({
     if (size === "lg") {
       setInputVisible(inputDefaultVisibleRef.current);
     }
-  }, [activeItems, size]);
+  }, [activeItemStack, size]);
   return /* @__PURE__ */ jsxRuntime.jsx(Comp, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
     MenuProvider,
     {
+      activeItemStack,
       inputRef,
       inputVisible,
       onSelect: (item, { dismiss }) => {
@@ -929,6 +924,7 @@ function Menu({
       },
       open,
       placeholder,
+      setActiveItemStack,
       setOpen,
       size,
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -942,7 +938,10 @@ function Menu({
           onSelect: (item, { dismiss }) => {
             if (item.subOptions?.length) {
               if (size === "lg") {
-                setActiveItems(item.subOptions);
+                setActiveItemStack((stack) => [
+                  ...stack ?? [],
+                  item.subOptions ?? []
+                ]);
               } else {
                 setSubMenuOpen(true);
               }
@@ -953,7 +952,7 @@ function Menu({
               }
             }
           },
-          open,
+          open: open ? activeItemStack.length + 1 : false,
           options,
           ...props,
           children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -982,21 +981,23 @@ const MenuDialogContent = React.forwardRef(
     ...props
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.DialogContent, { ref, transitionType: "pop", ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.DialogHeader, { children: ariaLabel }) }),
-      children
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.DialogHeader, { children: ariaLabel }) })
     ] });
   }
 );
 MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_18i5kkb']}}});
+var input = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1fvwxh9']}}});
 
 const MenuInput = React.forwardRef(
-  ({ className, ...props }, outerRef) => {
-    const { inputRef, open, size } = useMenuContext(
+  ({ className, onKeyDown, ...props }, outerRef) => {
+    const { inputRef, open, setActiveItemStack, size } = useMenuContext(
+      "@optiaxiom/react/MenuInput"
+    );
+    const { downshift, highlightedItem } = useCommandContext(
       "@optiaxiom/react/MenuInput"
     );
-    const { downshift } = useCommandContext("@optiaxiom/react/MenuInput");
     const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
     const [minWidth, setMinWidth] = React.useState(160);
     const containerRef = React.useRef(null);
@@ -1012,6 +1013,27 @@ const MenuInput = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
       CommandInput,
       {
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (!(event.target instanceof HTMLInputElement)) {
+            return;
+          }
+          if (event.target.value) {
+            return;
+          }
+          if (event.key === "Backspace" && size === "lg") {
+            event.preventDefault();
+            setActiveItemStack(
+              (stack) => stack.length ? stack.slice(0, -1) : stack
+            );
+          } else if (event.key === "ArrowRight" && highlightedItem?.subOptions?.length && size === "sm") {
+            event.preventDefault();
+            downshift.selectItem(highlightedItem);
+          }
+        },
         ref,
         size: size === "sm" ? "md" : "xl",
         ...input({ size }, className),
@@ -1047,6 +1069,7 @@ const MenuItem = React.forwardRef(
         addonBefore: props.item.addon,
         asChild: true,
         description: props.item.description,
+        intent: props.item.intent,
         children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.link && { href: props.item.link }, children })
       }
     ) });
@@ -1070,6 +1093,43 @@ const MenuRadioItem = React.forwardRef(
 );
 MenuRadioItem.displayName = "@optiaxiom/react/MenuRadioItem";
 
+const MenuSubInput = React.forwardRef(
+  ({ onKeyDown, ...props }, ref) => {
+    const { downshift, highlightedItem } = useCommandContext(
+      "@optiaxiom/react/MenuSubInput"
+    );
+    const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuSubInput");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CommandInput,
+      {
+        m: "4",
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          if (!(event.target instanceof HTMLInputElement)) {
+            return;
+          }
+          if (event.target.value) {
+            return;
+          }
+          if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            setOpen(false);
+          } else if (event.key === "ArrowRight" && highlightedItem?.subOptions?.length) {
+            event.preventDefault();
+            downshift.selectItem(highlightedItem);
+          }
+        },
+        ref,
+        ...props
+      }
+    );
+  }
+);
+MenuSubInput.displayName = "@optiaxiom/react/MenuSubInput";
+
 const MenuSubContent = React.forwardRef(
   ({ align = "start", children, item, side = "right", ...props }, ref) => {
     const options = React.useMemo(() => item.subOptions ?? [], [item]);
@@ -1079,11 +1139,7 @@ const MenuSubContent = React.forwardRef(
     const { setInputValue } = useCommandContext(
       "@optiaxiom/react/MenuSubContent"
     );
-    const {
-      inputRef: parentInputRef,
-      open: parentSubMenuOpen,
-      setOpen
-    } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const { inputRef: parentInputRef, open: parentSubMenuOpen } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
     const { open } = IconMagnifyingGlass.usePopoverContext("@optiaxiom/react/MenuSubContent");
     const inputRef = React.useRef(null);
     const [subMenuOpen, setSubMenuOpen] = React.useState(false);
@@ -1097,7 +1153,6 @@ const MenuSubContent = React.forwardRef(
       {
         align,
         alignOffset: item.subOptionsInputVisible ? -46 : -4,
-        maxH: "sm",
         minW: "trigger",
         onCloseAutoFocus: (event) => {
           if (parentSubMenuOpen) {
@@ -1155,22 +1210,7 @@ const MenuSubContent = React.forwardRef(
             open: true,
             options,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(
-                CommandInput,
-                {
-                  m: "4",
-                  onKeyDown: (event) => {
-                    if (!(event.target instanceof HTMLInputElement)) {
-                      return;
-                    }
-                    if (!event.target.value && event.key === "ArrowLeft") {
-                      event.preventDefault();
-                      setOpen(false);
-                    }
-                  },
-                  ref: inputRef
-                }
-              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubInput, { ref: inputRef }) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 MenuSubProvider,
                 {
@@ -1254,12 +1294,12 @@ const MenuSubTrigger = React.forwardRef(
 );
 MenuSubTrigger.displayName = "@optiaxiom/react/MenuSubTrigger";
 
-function MenuSub({ item }) {
+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, item }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(MenuSubTrigger, { contentRef, index, item }) }),
     /* @__PURE__ */ jsxRuntime.jsx(MenuSubContent, { item, ref: contentRef })
   ] });
 }
@@ -1268,13 +1308,13 @@ MenuSub.displayName = "@optiaxiom/react/MenuSub";
 const MenuListbox = React.forwardRef(
   ({ children, ...props }, ref) => {
     const { size } = useMenuContext("@optiaxiom/react/MenuListbox");
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, ...props, children: children ?? ((item, prevItem) => {
+    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, { item }) : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { item }) })
+        Comp === MenuSub ? /* @__PURE__ */ jsxRuntime.jsx(Comp, { index, item }) : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { index, item }) })
       ] });
     }) });
   }
@@ -1290,20 +1330,22 @@ const MenuPopoverContent = React.forwardRef(({ style, ...props }, outerRef) => {
     if (!open || props.side === "top") {
       return;
     }
-    requestAnimationFrame(() => {
-      if (innerRef.current?.dataset.side !== "top") {
-        return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setMinHeight(entry.borderBoxSize[0].blockSize);
       }
-      const rect = innerRef.current.getBoundingClientRect();
-      if (rect.height > minHeight) {
-        setMinHeight(rect.height);
+    });
+    setMinHeight(0);
+    requestAnimationFrame(() => {
+      if (innerRef.current?.dataset.side === "top") {
+        observer.observe(innerRef.current);
       }
     });
-  }, [minHeight, open, props.side]);
+    return () => observer.disconnect();
+  }, [open, props.side]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     IconMagnifyingGlass.PopoverContent,
     {
-      maxH: "sm",
       minW: "trigger",
       ref,
       style: { ...style, minHeight },
@@ -1314,9 +1356,11 @@ const MenuPopoverContent = React.forwardRef(({ style, ...props }, outerRef) => {
 MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
 
 const MenuContent = React.forwardRef(
-  ({ children, onPointerDown, ...props }, ref) => {
+  ({ children, onPointerDown, ...props }, outerRef) => {
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
     const { labelId } = IconMagnifyingGlass.useFieldContext("@optiaxiom/react/MenuContent");
-    const { inputVisible, placeholder, size } = useMenuContext(
+    const { activeItemStack, inputVisible, placeholder, size } = useMenuContext(
       "@optiaxiom/react/MenuContent"
     );
     const { empty, loading } = useCommandContext(
@@ -1324,6 +1368,11 @@ const MenuContent = React.forwardRef(
     );
     const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuContent");
     const Comp = size === "sm" ? MenuPopoverContent : MenuDialogContent;
+    React.useEffect(() => {
+      innerRef.current?.animate([{ scale: 1 }, { scale: 0.97 }, { scale: 1 }], {
+        duration: 150
+      });
+    }, [activeItemStack]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       {
@@ -1388,7 +1437,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'},'df5s95'],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'},'_13f8cbk'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(

package/dist/esm/assets/src/actions/ActionsContent.css.ts.vanilla-BABdrlmZ.css

@@ -0,0 +1,22 @@
+@layer optiaxiom._12h7ywj;
+@layer optiaxiom._12h7ywj {
+  ._1mar2v4 {
+    transition: opacity var(--ax-duration-sm) ease;
+  }
+  .wkayr6:not(:has(.wkayr6)):focus-within ._1mar2v4, ._1mar2v4:has(:checked, [data-state=open]) {
+    opacity: 1;
+    transition: none;
+  }
+  .i98qit {
+    opacity: 0;
+  }
+  ._14q4we6 {
+    opacity: 1;
+  }
+  @media (hover: hover) {
+    .wkayr6:not(:has(.wkayr6)):hover ._1mar2v4 {
+      opacity: 1;
+      transition: none;
+    }
+  }
+}

package/dist/esm/assets/src/alert/Alert.css.ts.vanilla-DExKVjQj.css

@@ -0,0 +1,6 @@
+@layer optiaxiom._12h7ywj;
+@layer optiaxiom._12h7ywj {
+  ._1swj4aa {
+    min-height: var(--ax-size-sm);
+  }
+}

package/dist/esm/assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-BWh92oY5.css

@@ -0,0 +1,27 @@
+@layer optiaxiom._12h7ywj;
+@layer optiaxiom._12h7ywj {
+  .n0m1rp {
+    opacity: 0;
+  }
+  ._1hex5r6 {
+    inset: 0;
+    position: fixed;
+  }
+  ._1rjww8y {
+    max-height: 50dvh;
+    max-width: calc(100dvw - 2 * 24px);
+    transform: 
+      translateY(calc(1rem * var(--v3bq1o)))
+      scale(calc(1 - 0.06 * var(--v3bq1o)))
+    ;
+  }
+  ._1ngmdcf {
+    width: 400px;
+  }
+  ._1qgwpcl {
+    width: 600px;
+  }
+  ._14y2jt9 {
+    width: 800px;
+  }
+}