@optiaxiom/react 1.5.9 → 1.5.11

package/dist/cjs/unstable.js

@@ -2,91 +2,115 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var reactId = require('@radix-ui/react-id');
+var reactSlot = require('@radix-ui/react-slot');
 var React = require('react');
-var IconMagnifyingGlass = require('./IconMagnifyingGlass-l4lyw31a.js');
+var IconMagnifyingGlass = require('./IconMagnifyingGlass-BDf2No3u.js');
+require('./assets/src/layers/layers.css.ts.vanilla-gSAv9Bvn.css');
+require('./assets/src/aside/Aside.css.ts.vanilla-Ct8cMQYM.css');
+var reactContext = require('@radix-ui/react-context');
+require('./assets/src/aside/AsideFooter.css.ts.vanilla-DXUE44So.css');
+require('./assets/src/aside/AsideHeader.css.ts.vanilla-C9B2L6fU.css');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var downshift = require('downshift');
-var reactContext = require('@radix-ui/react-context');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var clsx = require('clsx');
-require('./assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css');
-require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-cZVGhcw3.css');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-Bf6pAFWt.css');
-var reactId = require('@radix-ui/react-id');
-require('./assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-Bgb_K_qI.css');
-require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-C0t-ImS8.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-B7ifRXzK.css');
-require('./assets/src/card/Card.css.ts.vanilla-DWRoAkEU.css');
-require('./assets/src/card/CardCheckbox.css.ts.vanilla-CQA9E9Hd.css');
-require('./assets/src/card/CardHeader.css.ts.vanilla-BI52cGXd.css');
-require('./assets/src/card/CardPreview.css.ts.vanilla-Cbq2BzJm.css');
+require('./assets/src/menu/MenuDialogContent.css.ts.vanilla-CrN3yNuX.css');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-BbcehRsP.css');
+require('./assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-gJbAbNHv.css');
+require('./assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-4m4Ts5Xs.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-C0N7p645.css');
+require('./assets/src/card/Card.css.ts.vanilla-CrSAgABL.css');
+require('./assets/src/card/CardCheckbox.css.ts.vanilla-BxyKamw5.css');
+require('./assets/src/card/CardHeader.css.ts.vanilla-DYQ7G2y4.css');
+require('./assets/src/card/CardPreview.css.ts.vanilla-BpdkS4oZ.css');
 var reactDropzone = require('react-dropzone');
-require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-CaOs20ch.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-DHIzBl3t.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BtRpxB_S.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-BpdJM0hh.css');
-var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/pill/Pill.css.ts.vanilla-DF8TRDwX.css');
+require('./assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-RO0rvb7D.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-6n9z-QJL.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BkGJITC2.css');
+var ResizablePrimitive = require('react-resizable-panels');
+require('./assets/src/resizable/ResizableHandle.css.ts.vanilla-DCz6w2ER.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-CfgzX-rP.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-D2eo1Hbx.css');
 var helpers = require('@dnd-kit/helpers');
 var react = require('@dnd-kit/react');
-require('./assets/src/sortable/SortableHandle.css.ts.vanilla-DSLCmr1W.css');
+require('./assets/src/sortable/SortableHandle.css.ts.vanilla-DE_EDSIF.css');
 var sortable = require('@dnd-kit/react/sortable');
-require('./assets/src/sortable/SortableItem.css.ts.vanilla-DrojkcgI.css');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-BGkDreBM.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-B1nj-lOR.css');
-require('./assets/src/table/Table.css.ts.vanilla-BYeQmH2Y.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-BtH1pKw7.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-DtHSZb8O.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-CWBvbpJk.css');
-require('./assets/src/table/TableHeader.css.ts.vanilla-Cn1jZj8u.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-BlgVEAMG.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DzVT4QtY.css');
+require('./assets/src/sortable/SortableItem.css.ts.vanilla-DE8GJGgy.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BvhDwVOk.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-DrBPclzT.css');
+require('./assets/src/table/Table.css.ts.vanilla-xQaHC4Px.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-BVsBeSeT.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-CQcRdbeV.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-Bv4FlRaE.css');
+require('./assets/src/table/TableHeader.css.ts.vanilla-DUtYk7I-.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-vNkltrKA.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-CZMS-wK8.css');
 require('react-day-picker');
 require('@radix-ui/react-popper');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/calendar/Calendar.css.ts.vanilla-Bt1RIzxm.css');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-DBgZ4dAA.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BYhjXrzi.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-CARPueAn.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-C9_LVZhG.css');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-BGkDreBM.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-BOUgRCH_.css');
+require('./assets/src/calendar/Calendar.css.ts.vanilla-BRT6WcKf.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-TNtCbCi4.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-CgM-jo3n.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-CisL9S-p.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-B8p0jOT_.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BvhDwVOk.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-Cq5hpJhJ.css');
 require('@radix-ui/react-popover');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-BGkDreBM.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-C3Eyp63O.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-B2jY-FTQ.css');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-IAcLEIVH.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-B4bfdvSK.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-X7dcCdH-.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-TBDke6xS.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-DKfCsVm2.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BvhDwVOk.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-CikxaUsf.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-Ba3gnCRs.css');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DcNKkq4r.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-DT2ykkkr.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-CSCTKW8t.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CSYdOguE.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-CI6KnK9v.css');
 require('@tanstack/react-virtual');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-Bysb5ICL.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-esk_cjZB.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-vJ4ibcUx.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-D0x0PqKS.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-Ply6UHRy.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-e3sz6wmn.css');
 require('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-BGkDreBM.css');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-BvhDwVOk.css');
 require('@vanilla-extract/dynamic');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-BXy_kn-B.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-BC26--LZ.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-guagiIXf.css');
-require('./assets/src/dialog/DialogFooter.css.ts.vanilla-B7FTN28g.css');
-require('./assets/src/text/Text.css.ts.vanilla-D5aE5ZD3.css');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-DILQX1Xk.css');
+require('./assets/src/dialog/DialogFooter.css.ts.vanilla-BzxtqIVX.css');
+require('./assets/src/text/Text.css.ts.vanilla-CGIRpi6Z.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-CfYbRkTA.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-BZilmyUD.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-Cn8okhqh.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-C9Tu4ZkQ.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-LUQvS36-.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-xpDqMjq4.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-CysUCjqr.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-CA2ZGgI7.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-BRdUFAB2.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-0hsvXkI_.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-DVrj3i5o.css');
-require('./assets/src/box/Box.css.ts.vanilla-9dOX9gEv.css');
-require('./assets/src/link/Link.css.ts.vanilla-D64-a8ia.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-DdX430Rk.css');
+require('./assets/src/box/Box.css.ts.vanilla-BKDFwzzS.css');
+require('./assets/src/link/Link.css.ts.vanilla-ckzJi2LM.css');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ResizablePrimitive);
 
 const keyNameMap = {
   " ": "space",
@@ -189,6 +213,85 @@ function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], tri
   }, [hotkeys]);
 }
 
+var root$1 = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'_1nvuxw']});
+
+const [AsideProvider, useAsideContext] = reactContext.createContext("@optiaxiom/react/Aside");
+
+const Slot$1 = reactSlot.createSlot("@optiaxiom/react/Aside");
+const Aside = React.forwardRef(
+  ({ asChild, children, className, ...props }, ref) => {
+    const Comp = asChild ? Slot$1 : "aside";
+    const labelId = reactId.useId();
+    const descriptionId = reactId.useId();
+    return /* @__PURE__ */ jsxRuntime.jsx(AsideProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        "aria-describedby": descriptionId,
+        "aria-labelledby": labelId,
+        asChild: true,
+        tabIndex: 0,
+        ...root$1({}, className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, children })
+      }
+    ) });
+  }
+);
+Aside.displayName = "@optiaxiom/react/Aside";
+
+const AsideBody = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { flex: "1", fontSize: "md", px: "16", ref, ...props, children });
+  }
+);
+AsideBody.displayName = "@optiaxiom/react/AsideBody";
+
+var footer = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'_1vmgfp9']});
+
+const AsideFooter = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ref, ...footer({}, className), ...props, children }) });
+  }
+);
+AsideFooter.displayName = "@optiaxiom/react/AsideFooter";
+
+var header$1 = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'_7iegn1']});
+
+const AsideHeader = React.forwardRef(
+  ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
+    const { descriptionId, labelId } = useAsideContext(
+      "@optiaxiom/react/AsideHeader"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ButtonProvider, { size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ref, ...header$1({}, className), ...props, children: [
+      addonBefore && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "8", children: addonBefore }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.Heading,
+        {
+          flex: "1",
+          fontSize: "lg",
+          fontWeight: "600",
+          id: labelId,
+          level: "2",
+          children
+        }
+      ),
+      addonAfter && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "8", children: addonAfter }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.Text,
+        {
+          asChild: true,
+          color: "fg.secondary",
+          fontSize: "sm",
+          id: descriptionId,
+          w: "full",
+          children: IconMagnifyingGlass.fallbackSpan(description)
+        }
+      )
+    ] }) });
+  }
+);
+AsideHeader.displayName = "@optiaxiom/react/AsideHeader";
+
 const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
 const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
 
@@ -218,7 +321,7 @@ function fuzzysearch(haystack, needle) {
   return true;
 }
 function score(item, inputValue) {
-  if (!inputValue) {
+  if (!inputValue || item.skipFilterScoring) {
     return 0;
   }
   const label = resolveItemProperty(item.label, { inputValue }).normalize().toLowerCase();
@@ -319,8 +422,12 @@ function Command({
         onItemSelect?.(selectedItem, {
           dismiss: type !== downshift.useCombobox.stateChangeTypes.FunctionSelectItem || !("selected" in selectedItem)
         });
+        downshift$1.selectItem(null);
       }
     },
+    scrollIntoView(node) {
+      node?.scrollIntoView({ block: "nearest" });
+    },
     selectedItem: null,
     stateReducer: (state, actionAndChanges) => {
       const { changes, type } = actionAndChanges;
@@ -575,7 +682,7 @@ CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
 const [MenuProvider, useMenuContext] = reactContext.createContext("@optiaxiom/react/Menu");
 
 function MenuPopover(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Popover, { modal: true, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Popover, { ...props });
 }
 MenuPopover.displayName = "@optiaxiom/react/MenuPopover";
 
@@ -746,7 +853,7 @@ function Menu({
 }
 Menu.displayName = "@optiaxiom/react/Menu";
 
-var content$1 = IconMagnifyingGlass.recipeRuntime({base:'x4klq0'});
+var content$1 = IconMagnifyingGlass.recipeRuntime({base:'_1xiq2hs'});
 
 const MenuDialogContent = React.forwardRef(
   ({
@@ -787,7 +894,7 @@ const MenuDialogContent = React.forwardRef(
 );
 MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input$1 = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1qskfih']}}});
+var input$1 = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_18kw08s']}}});
 
 const MenuInput = React.forwardRef(
   ({ className, onKeyDown, ...props }, outerRef) => {
@@ -798,18 +905,17 @@ const MenuInput = React.forwardRef(
       "@optiaxiom/react/MenuInput"
     );
     const ref = reactComposeRefs.useComposedRefs(inputRef, outerRef);
-    const [minWidth, setMinWidth] = React.useState(160);
     const containerRef = React.useRef(null);
     React.useEffect(() => {
       if (!containerRef.current) {
         return;
       }
       const rect = containerRef.current.getBoundingClientRect();
-      if (open && rect.width > minWidth) {
-        setMinWidth(rect.width);
+      if (open) {
+        containerRef.current.style.minWidth = `${rect.width}px`;
       }
-    }, [downshift.inputValue, minWidth, open]);
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    }, [downshift.inputValue, open]);
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref: containerRef, style: { minWidth: 160 }, children: /* @__PURE__ */ jsxRuntime.jsx(
       CommandInput,
       {
         onKeyDown: (event) => {
@@ -849,9 +955,11 @@ const MenuCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     IconMagnifyingGlass.ListboxCheckboxItem,
     {
-      addonBefore: props.item.addon,
+      addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
       asChild: true,
-      description: props.item.description,
+      description: resolveItemProperty(props.item.description, {
+        inputValue
+      }),
       onCheckedChange: () => !resolveItemProperty(props.item.disabledReason) && props.item.execute?.({ dismiss: false, inputValue }),
       children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
     }
@@ -862,12 +970,15 @@ MenuCheckboxItem.displayName = "@optiaxiom/react/MenuCheckboxItem";
 const MenuItem = React.forwardRef(
   ({ children, ...props }, ref) => {
     const Comp = props.item.href ? "a" : "div";
+    const { inputValue } = useCommandContext("@optiaxiom/react/MenuItem");
     return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
       IconMagnifyingGlass.ListboxItem,
       {
-        addonBefore: props.item.addon,
+        addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
         asChild: true,
-        description: props.item.description,
+        description: resolveItemProperty(props.item.description, {
+          inputValue
+        }),
         intent: props.item.intent,
         children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
       }
@@ -879,12 +990,15 @@ MenuItem.displayName = "@optiaxiom/react/MenuItem";
 const MenuRadioItem = React.forwardRef(
   ({ children, ...props }, ref) => {
     const Comp = props.item.href ? "a" : "div";
+    const { inputValue } = useCommandContext("@optiaxiom/react/MenuRadioItem");
     return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
       IconMagnifyingGlass.ListboxRadioItem,
       {
-        addonBefore: props.item.addon,
+        addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
         asChild: true,
-        description: props.item.description,
+        description: resolveItemProperty(props.item.description, {
+          inputValue
+        }),
         children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
       }
     ) });
@@ -1165,9 +1279,11 @@ const MenuSwitchItem = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
       IconMagnifyingGlass.ListboxSwitchItem,
       {
-        addonBefore: props.item.addon,
+        addonBefore: resolveItemProperty(props.item.addon, { inputValue }),
         asChild: true,
-        description: props.item.description,
+        description: resolveItemProperty(props.item.description, {
+          inputValue
+        }),
         onCheckedChange: () => !resolveItemProperty(props.item.disabledReason) && props.item.execute?.({ dismiss: false, inputValue }),
         children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
       }
@@ -1197,48 +1313,22 @@ const MenuListbox = React.forwardRef(
 );
 MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
 
-const MenuPopoverContentImpl = React.forwardRef(({ children, ...props }, outerRef) => {
-  const { side } = IconMagnifyingGlass.usePopoverContentContext(
-    "@optiaxiom/react/MenuPopoverContentImpl"
-  );
-  const innerRef = React.useRef(null);
-  const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-  React.useEffect(() => {
-    if (!innerRef.current || side !== "top") {
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      if (!innerRef.current) {
-        return;
-      }
-      for (const entry of entries) {
-        innerRef.current.style.minHeight = `${entry.borderBoxSize[0].blockSize}px`;
-      }
-    });
-    observer.observe(innerRef.current);
-    return () => observer.disconnect();
-  }, [side]);
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref, ...props, children });
-});
-MenuPopoverContentImpl.displayName = "@optiaxiom/react/MenuPopoverContentImpl";
-
 const MenuPopoverContent = React.forwardRef(({ "aria-label": ariaLabel, children, ...props }, ref) => {
   const { labelId: fieldLabelId } = IconMagnifyingGlass.useFieldContext(
     "@optiaxiom/react/MenuPopoverContent"
   );
   const { triggerRef } = useMenuContext("@optiaxiom/react/MenuPopoverContent");
   const labelId = reactId.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     IconMagnifyingGlass.PopoverContent,
     {
       "aria-labelledby": clsx(fieldLabelId ?? triggerRef.current?.id, labelId),
-      asChild: true,
       ref,
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPopoverContentImpl, { children: [
+      children: [
         /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { id: labelId, children: ariaLabel || "Menu" }),
         children
-      ] })
+      ]
     }
   );
 });
@@ -1330,6 +1420,7 @@ const MenuTrigger = React.forwardRef(
           }
           switch (event.key) {
             case "ArrowDown":
+              event.preventDefault();
               setOpen(true);
           }
         },
@@ -1342,12 +1433,12 @@ const MenuTrigger = React.forwardRef(
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var link = IconMagnifyingGlass.recipeRuntime({base:'_1vobdsg'});
-var list = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'tq6pzd']});
+var link = IconMagnifyingGlass.recipeRuntime({base:'_2nkd0q'});
+var list = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_19wb306']});
 
-var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'zpbbe3']});
+var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_1fxvg1s']});
 
-const BreadcrumbItem = React.forwardRef(
+const BreadcrumbNode = React.forwardRef(
   ({ addonAfter, children, className, ...props }, ref) => {
     const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
     return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...item$1({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs("li", { ref, ...restProps, children: [
@@ -1356,18 +1447,18 @@ const BreadcrumbItem = React.forwardRef(
     ] }) });
   }
 );
-BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
+BreadcrumbNode.displayName = "@optiaxiom/react/BreadcrumbNode";
 
 const Breadcrumb = React.forwardRef(
   ({ className, items, maxItems = 3, ...props }, ref) => {
     const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...list(), children: /* @__PURE__ */ jsxRuntime.jsx("ol", { children: renderItems(items, maxItems, (item, index) => /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { addonAfter: item.addonAfter, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { auto: true, content: item.label, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { asChild: true, truncate: true, children: index === items.length - 1 || !item.href ? /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...list(), children: /* @__PURE__ */ jsxRuntime.jsx("ol", { children: renderItems(items, maxItems, (item, index) => /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbNode, { addonAfter: item.addonAfter, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { auto: true, content: item.label, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { asChild: true, truncate: true, children: index === items.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
       IconMagnifyingGlass.Box,
       {
         "aria-current": index === items.length - 1 ? "page" : void 0,
         children: item.label
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
+    ) : item.href ? /* @__PURE__ */ jsxRuntime.jsx(
       IconMagnifyingGlass.Link,
       {
         appearance: "subtle",
@@ -1375,7 +1466,7 @@ const Breadcrumb = React.forwardRef(
         ...link(),
         children: item.label
       }
-    ) }) }) })) }) }) }) });
+    ) : item.execute ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { appearance: "subtle", asChild: true, ...link(), children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => item.execute?.(), children: item.label }) }) : null }) }) })) }) }) }) });
   }
 );
 Breadcrumb.displayName = "@optiaxiom/react/Breadcrumb";
@@ -1394,7 +1485,7 @@ const renderItems = (items, limit = items.length, renderItem) => {
   ];
   return [
     ...items.slice(boundaries[0], boundaries[1]).map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderItem(item, index) }, "left" + index)),
-    boundaries[2] > boundaries[1] && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(Menu, { options: items.slice(boundaries[1], boundaries[2]), children: [
+    boundaries[2] > boundaries[1] && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbNode, { children: /* @__PURE__ */ jsxRuntime.jsxs(Menu, { options: items.slice(boundaries[1], boundaries[2]), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         MenuTrigger,
         {
@@ -1409,7 +1500,7 @@ const renderItems = (items, limit = items.length, renderItem) => {
   ];
 };
 
-var card = IconMagnifyingGlass.recipeRuntime({base:['_1dt45gc',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_6ub5bd']});
+var card = IconMagnifyingGlass.recipeRuntime({base:['_14iixuh',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_142er0o']});
 
 const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
@@ -1429,7 +1520,7 @@ const CardAction = React.forwardRef(
 );
 CardAction.displayName = "@optiaxiom/react/CardAction";
 
-var checkbox = IconMagnifyingGlass.recipeRuntime({base:['g1jyek']});
+var checkbox = IconMagnifyingGlass.recipeRuntime({base:['w223cq']});
 
 const CardCheckbox = React.forwardRef(
   ({ className, onChange, ...props }, ref) => {
@@ -1470,9 +1561,9 @@ const CardFooter = React.forwardRef(
 );
 CardFooter.displayName = "@optiaxiom/react/CardFooter";
 
-var addon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_12ld5tn',before:'w6hkxd'}}});
-var content = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1'},'_136szac']});
-var header = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_1oqljvl']});
+var addon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'a0csh',before:'_1iuye9'}}});
+var content = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1'},'wqk4rj']});
+var header = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_1iw5gl8']});
 
 const CardHeader = React.forwardRef(
   ({ addonAfter, addonBefore, children, className, description, ...props }, ref) => {
@@ -1507,8 +1598,8 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var overlay = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'nlygyh']});
-var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1716fhe']});
+var overlay = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_1anhtda']});
+var preview = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'d6q57y']});
 
 const CardPreview = React.forwardRef(
   ({
@@ -1617,7 +1708,7 @@ const IconFileImportSolid = IconMagnifyingGlass.withIcon(
   )
 );
 
-var dropzone = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',border:'1',cursor:'pointer',display:'flex',flexDirection:'column',fontSize:'md',gap:'8',justifyContent:'center',p:'16',rounded:'lg',textAlign:'center',transition:'colors'},'_159pt2e'],variants:{drag:{accept:[{borderColor:'border.success'},'_5mn998'],'default':'zhiwws',reject:[{borderColor:'border.error'},'_9vquf9']}}});
+var dropzone = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',border:'1',cursor:'pointer',display:'flex',flexDirection:'column',fontSize:'md',gap:'8',justifyContent:'center',p:'16',rounded:'lg',textAlign:'center',transition:'colors'},'roi8wu'],variants:{drag:{accept:[{borderColor:'border.success'},'_16k5t2q'],'default':'_29p2rk',reject:[{borderColor:'border.error'},'swxqt0']}}});
 
 const FileUploadDropzone = React.forwardRef(({ children, className, ...props }, ref) => {
   const { getInputProps, getRootProps, isDragAccept, isDragReject } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
@@ -1646,7 +1737,7 @@ const FileUploadDropzone = React.forwardRef(({ children, className, ...props },
 });
 FileUploadDropzone.displayName = "@optiaxiom/react/FileUploadDropzone";
 
-var mark = IconMagnifyingGlass.recipeRuntime({base:'_17p5tlb'});
+var mark = IconMagnifyingGlass.recipeRuntime({base:'_1ag9xq2'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -1678,8 +1769,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = IconMagnifyingGlass.recipeRuntime({base:'_1qoti6t',variants:{empty:{false:{},true:'_1mbhevs'}}});
-var input = IconMagnifyingGlass.recipeRuntime({base:'pg5m4f'});
+var editor = IconMagnifyingGlass.recipeRuntime({base:'_60gltg',variants:{empty:{false:{},true:'_1z0cgbk'}}});
+var input = IconMagnifyingGlass.recipeRuntime({base:'_1becym9'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -1760,32 +1851,58 @@ function getText(element) {
   return text;
 }
 
-var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1r4g79e']});
+const Resizable = ({ ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ResizablePrimitive__namespace.PanelGroup, { ...props });
+};
+Resizable.displayName = "@optiaxiom/react/Resizable";
+
+var handle$1 = IconMagnifyingGlass.recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_1apiukx']});
+var root = IconMagnifyingGlass.recipeRuntime({base:[{justifyContent:'center',rounded:'sm',z:'10'},'ev5hya']});
+
+const ResizableHandle = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, ...root(), children: /* @__PURE__ */ jsxRuntime.jsx(ResizablePrimitive__namespace.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ...handle$1() }) }) });
+};
+ResizableHandle.displayName = "@optiaxiom/react/ResizableHandle";
+
+const ResizablePanel = ({ ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ResizablePrimitive__namespace.Panel, { ...props });
+};
+ResizablePanel.displayName = "@optiaxiom/react/ResizablePanel";
+
+var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_16hwj8g']});
 
 const Layout = React.forwardRef(
-  ({ children, className, header, sidebar, ...props }, ref) => {
+  ({ aside, children, className, header, resizable, sidebar, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ref, ...layout({}, className), ...props, children: [
       header,
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        IconMagnifyingGlass.Box,
-        {
-          alignItems: "stretch",
-          display: "flex",
-          flex: "1",
-          flexDirection: "row",
-          overflow: "auto",
-          children: [
-            sidebar,
-            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { flex: "1", overflow: "auto", px: "32", py: "24", children })
-          ]
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { alignItems: "stretch", display: "flex", flex: "1", overflow: "auto", children: [
+        sidebar,
+        resizable ? /* @__PURE__ */ jsxRuntime.jsxs(Resizable, { direction: "horizontal", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ResizablePanel, { children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { h: "full", overflow: "auto", px: "32", py: "24", children }) }),
+          aside && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ResizableHandle, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(ResizablePanel, { defaultSize: 33, children: aside })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { alignItems: "stretch", display: "flex", flex: "1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.Box,
+            {
+              overflow: "auto",
+              px: "32",
+              py: "24",
+              w: aside ? "2/3" : void 0,
+              children
+            }
+          ),
+          aside && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { w: "1/3", children: aside })
+        ] })
+      ] })
     ] });
   }
 );
 Layout.displayName = "@optiaxiom/react/Layout";
 
-var pill = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'yjgp0o'],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'},'dndar'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
@@ -1878,7 +1995,7 @@ const SortableGroup = React.forwardRef(
 );
 SortableGroup.displayName = "@optiaxiom/react/SortableGroup";
 
-var handle = IconMagnifyingGlass.recipeRuntime({base:'_6s2cl5'});
+var handle = IconMagnifyingGlass.recipeRuntime({base:'_1ed9v3y'});
 
 const [SortableItemProvider, useSortableItemContext] = reactContext.createContext("@optiaxiom/react/SortableItem");
 
@@ -1903,7 +2020,7 @@ const SortableHandle = React.forwardRef(
 );
 SortableHandle.displayName = "@optiaxiom/react/SortableHandle";
 
-var item = IconMagnifyingGlass.recipeRuntime({base:'t995ym',variants:{handle:{false:{},true:'sk3r4u'}}});
+var item = IconMagnifyingGlass.recipeRuntime({base:'s0uqsp',variants:{handle:{false:{},true:'_40m1sf'}}});
 
 const SortableItem = React.forwardRef(
   ({ children, className, index, item: id, ...props }, outerRef) => {
@@ -1972,6 +2089,10 @@ SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
 
 exports.Calendar = IconMagnifyingGlass.Calendar;
 exports.DataTableHeaderCell = IconMagnifyingGlass.DataTableHeaderCell;
+exports.Aside = Aside;
+exports.AsideBody = AsideBody;
+exports.AsideFooter = AsideFooter;
+exports.AsideHeader = AsideHeader;
 exports.Breadcrumb = Breadcrumb;
 exports.Card = Card;
 exports.CardAction = CardAction;