@optiaxiom/react 1.3.6 → 1.4.0

package/dist/cjs/unstable.js

@@ -3,148 +3,78 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-CX8LlUgm.js');
-require('./assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css');
-require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-rsriDPZo.css');
-require('./assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-Db835qcO.css');
-var reactComposeRefs = require('@radix-ui/react-compose-refs');
-var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
-var reactDayPicker = require('react-day-picker');
-var reactPopper = require('@radix-ui/react-popper');
-var downshift = require('downshift');
-var reactContext = require('@radix-ui/react-context');
-var reactPortal = require('@radix-ui/react-portal');
+var IconMagnifyingGlass = require('./IconMagnifyingGlass-D4Z039q-.js');
+require('./assets/src/layers/layers.css.ts.vanilla-LO3h2rjG.css');
+require('./assets/src/breadcrumb/BreadcrumbItem.css.ts.vanilla-CXAw9Ysg.css');
+require('./assets/src/breadcrumb/BreadcrumbLink.css.ts.vanilla-T1RYbhEg.css');
 var reactId = require('@radix-ui/react-id');
-var reactSlot = require('@radix-ui/react-slot');
+require('./assets/src/cover/Cover.css.ts.vanilla-BwrrSUgH.css');
+require('./assets/src/link/Link.css.ts.vanilla-CCzRyxxA.css');
+require('./assets/src/card/Card.css.ts.vanilla-B5M8Ezvo.css');
+var reactContext = require('@radix-ui/react-context');
+require('./assets/src/card/CardOverflow.css.ts.vanilla-BHwYVxJ0.css');
+require('./assets/src/card/CardAction.css.ts.vanilla-DoP1mqAm.css');
+var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var clsx = require('clsx');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-CcW8QE-Q.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-D_MJt33Q.css');
-require('./assets/src/calendar/CalendarNav.css.ts.vanilla-eBZaZla9.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-mPaslDnv.css');
-require('./assets/src/actions/ActionsContent.css.ts.vanilla-B4iglvtu.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-6gsANvu_.css');
-require('./assets/src/link/Link.css.ts.vanilla-CkvEyNoz.css');
-require('./assets/src/card/Card.css.ts.vanilla-DPSAI4TL.css');
-require('./assets/src/card/CardOverflow.css.ts.vanilla-BVl_nq63.css');
-require('./assets/src/card/CardAction.css.ts.vanilla-Rokpns7p.css');
-require('./assets/src/card/CardImage.css.ts.vanilla-RFjtwvtk.css');
-var reactTable = require('@tanstack/react-table');
-var reactVirtual = require('@tanstack/react-virtual');
-var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table/Table.css.ts.vanilla-Clpll45F.css');
-require('./assets/src/table/TableBody.css.ts.vanilla-CEGmA_nd.css');
-require('./assets/src/table/TableRow.css.ts.vanilla-L9Fx5VZc.css');
-require('./assets/src/table/TableCell.css.ts.vanilla-BiqqvaJ8.css');
-require('./assets/src/table/TableHeaderCell.css.ts.vanilla-B6GTKkgd.css');
-require('./assets/src/data-table/DataTableBody.css.ts.vanilla-C6TM5Ak5.css');
-require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-Da09UJwb.css');
-require('./assets/src/data-table/DataTableFooter.css.ts.vanilla-Berk5yuA.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-DZAvtgCf.css');
-require('./assets/src/date-picker/DatePickerContent.css.ts.vanilla-TQGZz5-f.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-Ni7ZUHUo.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-Bq0Wroww.css');
-var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-mPaslDnv.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-Bd2dzV48.css');
-require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-C8xYHTMc.css');
-require('./assets/src/layout/Layouts.css.ts.vanilla-DO2L0UUp.css');
-require('./assets/src/menu/MenuInput.css.ts.vanilla-CNB3GpPD.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-a7j93yNq.css');
-require('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-Cdq4Tadx.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-B3yRYHiN.css');
-require('./assets/src/dialog/DialogContent.css.ts.vanilla-B-s0-vtH.css');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-DWMzPbgh.css');
-require('./assets/src/input/InputControl.css.ts.vanilla-CBHllHS2.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-Lozs8z5D.css');
+require('./assets/src/card/CardImage.css.ts.vanilla-D3HpbV_k.css');
+var reactSlot = require('@radix-ui/react-slot');
+var downshift = require('downshift');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-DmgRrxyU.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-Ck_ze2fz.css');
+require('./assets/src/layout/Layouts.css.ts.vanilla-CCZbG4aH.css');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+require('./assets/src/menu/MenuInput.css.ts.vanilla-DxtymiUe.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-DWLptfp-.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-cBnoy0-c.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-Bu-BHIVG.css');
+require('./assets/src/table/Table.css.ts.vanilla-1BkmblNu.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-WcTUovlJ.css');
+require('./assets/src/table/TableRow.css.ts.vanilla-D8hePLeg.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-BaTdzXBh.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-DLT7MEZP.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-CxzbR_uv.css');
+require('react-day-picker');
+require('@radix-ui/react-popper');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-B3OXzCgC.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-DNr2OvoV.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-CO6uqNRS.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-B6xvcRtH.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-DxYvZN_I.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-cBnoy0-c.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-BczYlfwk.css');
 require('@radix-ui/react-popover');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-cBnoy0-c.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-m5FEauqI.css');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-TILPqdsH.css');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-HVpo9CAc.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-CdGTTZEe.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-DXDUGf-m.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-DbL1_E0k.css');
+require('@tanstack/react-virtual');
+require('@radix-ui/react-separator');
+require('./assets/src/separator/Separator.css.ts.vanilla-BtevYyD1.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-ldtuqJ8w.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-HRG4F-ZP.css');
+require('@radix-ui/react-dialog');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-DGcCE6wN.css');
+require('@vanilla-extract/dynamic');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-7HhFEzyl.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-mPaslDnv.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-Byr6x4TG.css');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-r2Ztxx8z.css');
+require('@radix-ui/react-portal');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-C15H64bZ.css');
+require('./assets/src/text/Text.css.ts.vanilla-E-Il_R31.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DRdpVsTv.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BJ2L8n3Y.css');
-require('./assets/src/text/Text.css.ts.vanilla-D9k0AUkV.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-CIuGxGXM.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CXPDyZdx.css');
-require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-C19bwsLd.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-Bge3BDdC.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-D1q7bCk5.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-BA6CMfjV.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-BUiI4yI-.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-BCBYncQ0.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-geHFKsr2.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-CpGdbNV_.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-bLEdweNe.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-CwAsWxNd.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-7mFww7oH.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-By86Ua1j.css');
-require('./assets/src/box/Box.css.ts.vanilla-BtJImGZv.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-BQkyIpyI.css');
-
-const toPlainDateTime = (date) => new Date(date.getTime() - new Date(date).getTimezoneOffset() * 60 * 1e3).toISOString().slice(0, -1);
-
-const toPlainDate = (date) => toPlainDateTime(date).split("T")[0];
-
-const toPlainTime = (date, step = "60") => {
-  const stepInMinutes = (typeof step === "string" ? parseInt(step) : step) / 60;
-  const [hour, minute] = toPlainDateTime(date).split("T")[1].slice(0, 5).split(":");
-  return hour + ":" + (Math.floor(parseInt(minute) / stepInMinutes) * stepInMinutes).toString().padStart(2, "0");
-};
-
-const useFieldLabelTrigger = (ref, ariaLabelledBy) => {
-  const { labelId = ariaLabelledBy } = Skeleton.useFieldContext("useFieldLabelTrigger");
-  React.useEffect(() => {
-    if (!labelId || !ref.current) {
-      return;
-    }
-    const button = ref.current;
-    const label = document.getElementById(labelId);
-    if (!label) {
-      return;
-    }
-    const onLabelClick = () => button.focus();
-    label.addEventListener("click", onLabelClick);
-    return () => label.removeEventListener("click", onLabelClick);
-  }, [labelId, ref]);
-  return labelId;
-};
-
-function attachMediaListener(query, callback) {
-  try {
-    query.addEventListener("change", callback);
-    return () => query.removeEventListener("change", callback);
-  } catch (e) {
-    query.addListener(callback);
-    return () => query.removeListener(callback);
-  }
-}
-function getInitialValue(query, initialValue) {
-  if (typeof window !== "undefined" && "matchMedia" in window) {
-    return window.matchMedia(query).matches;
-  }
-  return false;
-}
-function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
-  getInitialValueInEffect: true
-}) {
-  const [matches, setMatches] = React.useState(
-    getInitialValueInEffect ? initialValue : getInitialValue(query)
-  );
-  const queryRef = React.useRef(null);
-  React.useEffect(() => {
-    if ("matchMedia" in window) {
-      queryRef.current = window.matchMedia(query);
-      setMatches(queryRef.current.matches);
-      return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
-    }
-    return void 0;
-  }, [query]);
-  return matches;
-}
+require('./assets/src/sprinkles/properties.css.ts.vanilla-Cmx2bDUD.css');
+require('./assets/src/box/Box.css.ts.vanilla-Dro_6tM9.css');
 
 function parseHotkey(hotkey) {
   const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
@@ -221,2205 +151,527 @@ function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], tri
   }, [hotkeys]);
 }
 
-const list = ["md", "sm"];
-const useResponsiveMatches = (config) => {
-  const matches = {
-    base: true,
-    sm: useMediaQuery(Skeleton.conditions.conditions.sm["@media"]),
-    md: useMediaQuery(Skeleton.conditions.conditions.md["@media"])
-  };
-  for (const name of list) {
-    if (config[name] && matches[name]) {
-      return config[name];
-    }
-  }
-  return config.base;
-};
-
 const Breadcrumb = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { alignItems: "center", asChild: true, display: "flex", gap: "8", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { children }) }) }) });
+    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, { alignItems: "center", asChild: true, display: "flex", gap: "8", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { children }) }) }) });
   }
 );
 Breadcrumb.displayName = "@optiaxiom/react/Breadcrumb";
 
 function BreadcrumbEllipsis({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Box,
+    IconMagnifyingGlass.Box,
     {
       "aria-hidden": true,
       color: "fg.tertiary",
       display: "grid",
       placeItems: "center",
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconEllipsis, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconEllipsis, {})
     }
   );
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'f9mc0h']});
+var item = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'q3wmp2']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...item({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
+    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 }) });
   }
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{fontSize:'md',overflow:'hidden',rounded:'md'},'_5mbp4w']});
+var link = IconMagnifyingGlass.recipeRuntime({base:[{fontSize:'md'},'_1cbwven']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Tooltip, { auto: true, content: props.children, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { ...link({}, className), ref, ...props });
 });
 BreadcrumbLink.displayName = "@optiaxiom/react/BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef(
   ({ ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Tooltip, { auto: true, content: props.children, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Text,
-      {
-        "aria-current": "page",
-        asChild: true,
-        color: "fg.default",
-        fontSize: "md",
-        truncate: true,
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props })
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { "aria-current": "page", asChild: true, color: "fg.default", fontSize: "md", children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props }) });
   }
 );
 BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";
 
-function usePortalPatch(open, initialHighlightedIndex = -1) {
-  const [placed, setPlaced] = React.useState(false);
-  React.useEffect(() => {
-    if (open) {
-      requestAnimationFrame(() => requestAnimationFrame(() => setPlaced(true)));
-    } else {
-      setPlaced(false);
-    }
-  }, [open, setPlaced]);
-  const [highlightedIndex, setHighlightedIndex] = React.useState(
-    initialHighlightedIndex
-  );
-  React.useEffect(() => {
-    if (!placed) {
-      setHighlightedIndex(initialHighlightedIndex);
-    }
-  }, [initialHighlightedIndex, placed]);
-  return [
-    /**
-     * Downshift attempts to scroll to the currently selected item when the menu
-     * opens. But since we don't render the menu until it is open the `ref` will
-     * not be available yet.
-     *
-     * So we only return the index when it has been placed and return -1
-     * otherwise.
-     */
-    placed ? highlightedIndex : -1,
-    setHighlightedIndex,
-    placed
-  ];
-}
-
-const [SelectProvider, useSelectContext] = reactContext.createContext("@optiaxiom/react/Select");
+var card = IconMagnifyingGlass.recipeRuntime({base:['_1e7b45g',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_21zgix']});
 
-const SelectHiddenSelect = React.forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
-  const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");
-  const options = React.useMemo(
-    () => items.map((item) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: item.value, children: item.value }, item.value)),
-    [items]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "select",
-    {
-      defaultValue,
-      disabled,
-      name,
-      onChange,
-      ref,
-      required,
-      tabIndex: -1,
-      value,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "" }),
-        options
-      ]
-    }
-  ) });
-});
-SelectHiddenSelect.displayName = "@optiaxiom/react/SelectHiddenSelect";
+const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
 
-const useObserveReset = (inputRef, setValue) => {
-  React.useEffect(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-    const form = input.closest("form");
-    if (!form) {
-      return;
-    }
-    const listener = () => setValue("");
-    form.addEventListener("reset", listener);
-    return () => form.removeEventListener("reset", listener);
-  }, [inputRef, setValue]);
+const mapOrientationToFlexDirection = {
+  horizontal: "row",
+  vertical: "column"
 };
-
-const Select = React.forwardRef(
-  ({
-    children,
-    defaultOpen = false,
-    defaultValue,
-    disabled,
-    loading,
-    name,
-    onBlur,
-    onChange,
-    onOpenChange,
-    onValueChange,
-    open,
-    options: items,
-    required,
-    value
-  }, outerRef) => {
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const [shadowValue, setShadowValue] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/Select",
-      defaultProp: defaultValue ?? "",
-      onChange: onValueChange,
-      prop: value
-    });
-    const forceValueChange = Skeleton.useObserveValue(innerRef, setShadowValue);
-    useObserveReset(innerRef, setShadowValue);
-    const selectedItem = React.useMemo(
-      () => shadowValue !== void 0 ? items.find((item) => item.value === shadowValue) : void 0,
-      [items, shadowValue]
-    );
-    const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/Select",
-      defaultProp: defaultOpen,
-      onChange: onOpenChange,
-      prop: open
-    });
-    const [highlightedIndex, setHighlightedIndex, placed] = usePortalPatch(
-      isOpen,
-      () => selectedItem ? items.findIndex(
-        (item) => !item.disabledReason && selectedItem.value === item.value
-      ) : -1
-    );
-    const downshift$1 = downshift.useSelect({
-      highlightedIndex: highlightedIndex === -1 && placed ? items.findIndex((item) => !item.disabledReason) : highlightedIndex,
-      isItemDisabled: (item) => !!item.disabledReason,
-      isOpen: placed,
-      // @ts-expect-error -- no harm in supporting read only arrays
-      items,
-      itemToKey: (item) => item !== null ? item.value : item,
-      itemToString: (item) => item !== null ? item.label : "",
-      onHighlightedIndexChange(changes) {
-        if (changes.type === downshift.useSelect.stateChangeTypes.MenuMouseLeave) {
-          return;
-        }
-        if (changes.type === downshift.useSelect.stateChangeTypes.ItemMouseMove && isOpen || changes.isOpen) {
-          setHighlightedIndex(changes.highlightedIndex);
-        }
-      },
-      onIsOpenChange({ isOpen: isOpen2 }) {
-        setIsOpen(isOpen2);
-      },
-      onSelectedItemChange({ selectedItem: selectedItem2 }) {
-        forceValueChange(selectedItem2?.value ?? "");
-      },
-      selectedItem: selectedItem ?? null,
-      stateReducer: (state, actionAndChanges) => {
-        const { changes, type } = actionAndChanges;
-        switch (type) {
-          case downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
-            return {
-              ...changes,
-              /**
-               * Do not select highlighted item when tabbing out of clicking
-               * outside to close the menu.
-               */
-              selectedItem: state.selectedItem
-            };
-          default:
-            return changes;
-        }
+const Card = React.forwardRef(
+  ({ children, className, orientation = "vertical", ...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
+          }
+        ) })
       }
+    );
+  }
+);
+Card.displayName = "@optiaxiom/react/Card";
+
+var action = IconMagnifyingGlass.recipeRuntime({base:['_16wg32q']});
+
+const CardAction = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ActionsContent, { ref, ...action({}, className), ...props, children });
+  }
+);
+CardAction.displayName = "@optiaxiom/react/CardAction";
+
+const CardCheckbox = React.forwardRef(
+  ({ children, indeterminate, onChange, ...props }, ref) => {
+    const labelPrefixId = reactId.useId();
+    const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
+    const [checked, setChecked] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/CardCheckbox",
+      defaultProp: props.defaultChecked,
+      prop: props.checked
     });
-    downshift$1.getMenuProps({}, { suppressRefError: true });
-    return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      SelectProvider,
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      IconMagnifyingGlass.CheckboxRoot,
       {
-        disabled,
-        downshift: downshift$1,
-        highlightedItem: items[downshift$1.highlightedIndex],
-        isOpen,
-        items,
-        loading,
-        onBlur,
-        selectedItem,
+        "aria-labelledby": clsx(labelPrefixId, labelId),
+        description: false,
+        onChange: (event) => {
+          onChange?.(event);
+          setChecked(event.target.checked);
+        },
+        ref,
+        ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            SelectHiddenSelect,
+            IconMagnifyingGlass.CheckboxControl,
             {
-              defaultValue,
-              disabled,
-              name,
-              onChange: (event) => {
-                setShadowValue(event.target.value);
-                onChange?.(event);
-              },
-              ref,
-              required,
-              value
+              indeterminate,
+              shift: Boolean(children)
             }
           ),
-          children
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { id: labelPrefixId, children: [
+            "Check to ",
+            checked ? "unselect" : "select"
+          ] }) })
         ]
       }
-    ) });
+    );
   }
 );
-Select.displayName = "@optiaxiom/react/Select";
+CardCheckbox.displayName = "@optiaxiom/react/CardCheckbox";
 
-const SelectItem = React.forwardRef(
-  ({ children, item, onMouseMove, size, ...props }, ref) => {
-    const { downshift, highlightedItem, isOpen, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
-    const itemProps = downshift.getItemProps({
-      item,
-      onMouseMove: (event) => {
-        onMouseMove?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        if (!isOpen) {
-          event.preventDefault();
-          Object.assign(event.nativeEvent, {
-            preventDownshiftDefault: true
-          });
-        }
-      },
+const CardContent = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { gap: "4", ref, ...props, children });
+  }
+);
+CardContent.displayName = "@optiaxiom/react/CardContent";
+
+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
-    });
+      ...props,
+      children
+    }
+  );
+});
+CardDescription.displayName = "@optiaxiom/react/CardDescription";
+
+var cardImage = IconMagnifyingGlass.recipeRuntime({base:[{h:'full',rounded:'inherit'},'b21lzu'],variants:{orientation:{horizontal:[{w:'auto'},'h6s25w'],vertical:[{w:'full'},'tpqcu8']}}});
+
+const CardImage = React.forwardRef(
+  ({ alt = "", asChild, children, className, src, ...props }, ref) => {
+    const { orientation } = useCardContext("@optiaxiom/react/CardImage");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+      IconMagnifyingGlass.Box,
       {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        "data-selected": selectedItem === item ? "" : void 0,
-        size,
-        ...itemProps,
-        children
+        asChild: true,
+        ref,
+        ...cardImage({ orientation }, className),
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx("img", { alt, src })
       }
     );
   }
 );
-SelectItem.displayName = "@optiaxiom/react/SelectItem";
+CardImage.displayName = "@optiaxiom/react/CardImage";
 
-const SelectRadioItem = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
+const CardLink = React.forwardRef(
+  ({ ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { appearance: "subtle", overlay: true, ref, ...props });
   }
 );
-SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
+CardLink.displayName = "@optiaxiom/react/CardLink";
 
-const SelectContent = React.forwardRef(
-  ({ align = "start", children, side = "bottom", size, ...props }, ref) => {
-    const { downshift, highlightedItem, isOpen, items, loading } = useSelectContext("@optiaxiom/react/SelectContent");
-    const [placed, setPlaced] = React.useState(false);
-    let isFirstItem = true;
-    let lastGroup = void 0;
-    const shouldShowSeparator = (group) => {
-      const show = !isFirstItem;
-      isFirstItem = false;
-      return show && group !== lastGroup && (group?.separator || lastGroup?.separator);
-    };
-    const shouldShowGroup = (group) => {
-      const show = group !== lastGroup;
-      lastGroup = group;
-      return show && !!group && !group?.hidden;
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.TransitionGroup, { open: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.ModalListbox,
+var cardOverflow = IconMagnifyingGlass.recipeRuntime({base:['_1lo8hel',{alignSelf:'stretch'},'_1isv8id'],variants:{orientation:{horizontal:['_1rx6r9l'],vertical:['_1ds7qg']}}});
+
+const CardOverflow = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { orientation } = useCardContext("@optiaxiom/react/CardOverflow");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
       {
-        asChild: true,
-        maxH: "sm",
-        minW: "trigger",
-        provider: "popper",
         ref,
-        role: "dialog",
-        size,
+        ...cardOverflow({ orientation }, className),
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactPopper.PopperContent, { align, side, sideOffset: 5, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.ListboxItemized,
-          {
-            highlightedItem,
-            items,
-            itemToKey: (item) => item.value,
-            loading,
-            onPlacedChange: setPlaced,
-            placed,
-            ...downshift.getMenuProps({}, { suppressRefError: !placed }),
-            children: children ?? ((item, index) => {
-              if (index === 0) {
-                isFirstItem = true;
-                lastGroup = void 0;
-              }
-              const group = item.group;
-              return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                shouldShowSeparator(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, {}),
-                shouldShowGroup(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { children: group.label }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SelectRadioItem,
-                  {
-                    addonBefore: item.addon,
-                    "aria-label": item["aria-label"],
-                    description: item.description,
-                    item,
-                    children: item.label
-                  },
-                  item.value
-                )
-              ] });
-            })
-          }
-        ) })
+        children
       }
-    ) }) }) });
+    );
   }
 );
-SelectContent.displayName = "@optiaxiom/react/SelectContent";
+CardOverflow.displayName = "@optiaxiom/react/CardOverflow";
 
-const Slot$2 = reactSlot.createSlot("@optiaxiom/react/SelectTrigger");
-const SelectTrigger = React.forwardRef(
-  ({
-    "aria-labelledby": ariaLabelledBy,
-    asChild,
-    children,
-    onBlur: onBlurProp,
-    onKeyDown,
-    placeholder,
-    ...props
-  }, ref) => {
-    const { disabled, downshift, isOpen, items, onBlur, selectedItem } = useSelectContext("@optiaxiom/react/SelectTrigger");
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    const buttonRef = React.useRef(null);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
-    const valueId = reactId.useId();
-    const [focusOnOpen] = React.useState(isOpen);
-    React.useEffect(
-      function() {
-        if (focusOnOpen && buttonRef.current) {
-          buttonRef.current.focus();
-        }
-      },
-      [focusOnOpen]
-    );
-    const value = selectedItem?.value ? selectedItem.label || placeholder : placeholder;
+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(
-      reactPopper.PopperAnchor,
+      IconMagnifyingGlass.Heading,
       {
         asChild: true,
-        ...boxProps,
-        ...downshift.getToggleButtonProps({
-          ...restProps,
-          "aria-labelledby": labelId ? clsx(labelId, valueId) : valueId,
-          disabled,
-          onBlur: (event) => {
-            onBlurProp?.(event);
-            onBlur?.(event);
-          },
-          onKeyDown: (event) => {
-            onKeyDown?.(event);
-            document.dispatchEvent(new Event("tooltip.open"));
-            if (isOpen) {
-              return;
-            }
-            const selectedItemIndex = downshift.selectedItem ? items.indexOf(downshift.selectedItem) : -1;
-            switch (event.key) {
-              case "ArrowLeft": {
-                let prevItemIndex = selectedItemIndex;
-                for (prevItemIndex--; prevItemIndex >= 0; prevItemIndex--) {
-                  const item = items[prevItemIndex];
-                  if (!item.disabledReason) {
-                    break;
-                  }
-                }
-                downshift.selectItem(items[Math.max(0, prevItemIndex)]);
-                break;
-              }
-              case "ArrowRight": {
-                let nextItemIndex = selectedItemIndex;
-                for (nextItemIndex++; nextItemIndex < items.length; nextItemIndex++) {
-                  const item = items[nextItemIndex];
-                  if (!item.disabledReason) {
-                    break;
-                  }
-                }
-                downshift.selectItem(
-                  items[Math.min(nextItemIndex, items.length - 1)]
-                );
-                break;
-              }
-            }
-          },
-          type: "button"
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Slot$2, { ref, children: asChild ? Skeleton.decorateChildren(
-          { asChild, children },
-          (children2) => (children2 ?? value) && /* @__PURE__ */ jsxRuntime.jsx("span", { id: valueId, children: children2 ?? value })
-        ) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { ref: buttonRef, children: /* @__PURE__ */ jsxRuntime.jsx("span", { id: valueId, children: children ?? value }) }) })
-      }
-    );
-  }
-);
-SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
-
-const format = ({
-  hour,
-  meridiem,
-  minute
-}) => {
-  const formattedHour = parseInt(hour) === 12 ? 0 : parseInt(hour);
-  return (formattedHour + (meridiem === "PM" ? 12 : 0)).toString().padStart(2, "0") + ":" + minute;
-};
-const parse = (value, step = 1) => {
-  const now = /* @__PURE__ */ new Date();
-  const [hour, minute] = (value ? value : `${now.getHours()}:${now.getMinutes()}`).split(":");
-  const parsedHour = parseInt(hour) % 12 === 0 ? 12 : parseInt(hour) % 12;
-  return {
-    hour: parsedHour.toString(),
-    meridiem: parseInt(hour) < 12 ? "AM" : "PM",
-    minute: (Math.floor(parseInt(minute) / step) * step).toString().padStart(2, "0")
-  };
-};
-const range = (min, max, step = 1) => Array.from(
-  { length: Math.floor((max - min) / step) + 1 },
-  (_, index) => (min + index * step).toString()
-);
-
-const Clock = React.forwardRef(
-  ({
-    defaultValue = "",
-    onValueChange,
-    step = "60",
-    value: valueProp,
-    ...props
-  }, ref) => {
-    const [value, setValue] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/Clock",
-      defaultProp: defaultValue,
-      onChange: onValueChange,
-      prop: valueProp
-    });
-    const stepInMinutes = (typeof step === "string" ? parseInt(step) : step) / 60;
-    const parsed = parse(value, stepInMinutes);
-    const hours = range(1, 12);
-    const minutes = range(0, 59, stepInMinutes).map(
-      (minute) => minute.padStart(2, "0")
-    );
-    const periods = ["AM", "PM"];
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", gap: "4", ref, ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Select,
-        {
-          onValueChange: (hour) => hour && setValue(format({ ...parsed, hour })),
-          options: hours.map((hour) => ({ label: hour, value: hour })),
-          value: parsed.hour,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select hour", flex: "1", placeholder: "HH" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Select,
-        {
-          onValueChange: (minute) => minute && setValue(format({ ...parsed, minute })),
-          options: minutes.map((minute) => ({
-            ariaLabel: `${parseInt(minute)}`,
-            label: minute,
-            value: minute
-          })),
-          value: parsed.minute,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "aria-label": "Select minute", flex: "1", placeholder: "MM" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Select,
-        {
-          onValueChange: (meridiem) => (meridiem === "AM" || meridiem === "PM") && setValue(format({ ...parsed, meridiem })),
-          options: periods.map((period) => ({ label: period, value: period })),
-          value: parsed.meridiem,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SelectTrigger,
-              {
-                "aria-label": "Select AM or PM",
-                flex: "1",
-                placeholder: "--"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
-          ]
-        }
-      )
-    ] });
-  }
-);
-Clock.displayName = "@optiaxiom/react/Clock";
-
-function toInstant(str) {
-  const rawDate = str && typeof str === "string" ? new Date(str.includes("T") ? str : str + "T00:00") : void 0;
-  return isValidDate(rawDate) ? rawDate : void 0;
-}
-const isValidDate = (date) => date ? !isNaN(+date) : false;
-
-function CalendarChevron({
-  orientation,
-  ...props
-}) {
-  return orientation === "left" ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleLeft, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, { ...props });
-}
-CalendarChevron.displayName = "@optiaxiom/react/CalendarChevron";
-
-function CalendarDay({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, flex: "1", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Day, { ...props, children }) });
-}
-CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
-
-var button$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_15lrpgb'],variants:{appearance:{'default':'mvui53',holiday:[{color:'fg.error'},'sx0oov'],range_middle:'l1dhz6',selected:[{color:'fg.white'},'_1yy43iq'],weekend:[{color:'fg.tertiary'},'_4osm7j']},range:{end:['i6uz5r'],middle:['s8dhfy'],start:['_1nw2omy']}}});
-var today = Skeleton.recipeRuntime({base:[{bg:'current',mx:'auto',rounded:'full'},'_1ichv9z']});
-
-function CalendarDayButton({
-  children,
-  className,
-  color: _color,
-  day: _day,
-  modifiers,
-  ...props
-}) {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    if (modifiers.focused) {
-      ref.current?.focus();
-    }
-  }, [modifiers.focused]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Box,
-    {
-      asChild: true,
-      "data-disabled": modifiers.outside || props.disabled,
-      ...button$2(
-        {
-          appearance: modifiers.range_middle ? "range_middle" : modifiers.selected ? "selected" : modifiers.holiday ? "holiday" : modifiers.weekend ? "weekend" : "default",
-          range: modifiers.outside || modifiers.range_start && modifiers.range_end ? void 0 : modifiers.range_start ? "start" : modifiers.range_middle ? "middle" : modifiers.range_end ? "end" : void 0
-        },
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("button", { ref, ...props, children: [
-        children,
-        modifiers.today && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...today() })
-      ] })
-    }
-  );
-}
-CalendarDayButton.displayName = "@optiaxiom/react/CalendarDayButton";
-
-function CalendarMonthCaption({
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Box,
-    {
-      alignItems: "center",
-      asChild: true,
-      display: "flex",
-      fontSize: "lg",
-      fontWeight: "500",
-      h: "md",
-      justifyContent: "center",
-      mb: "16",
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.MonthCaption, { ...props, children })
-    }
-  );
-}
-CalendarMonthCaption.displayName = "@optiaxiom/react/CalendarMonthCaption";
-
-function CalendarMonthGrid({
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.MonthGrid, { ...props, children }) });
-}
-CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
-
-var months = Skeleton.recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'dt5lnl']});
-
-function CalendarMonths({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
-}
-CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
-
-var nav = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between',w:'full'},'_18p15qg']});
-
-function CalendarNav({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Nav, { ...props, children }) });
-}
-CalendarNav.displayName = "@optiaxiom/react/CalendarNav";
-
-function CalendarNextMonthButton({
-  children,
-  color: _color,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance: "subtle", asChild: true, icon: children, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.NextMonthButton, {}) });
-}
-CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
-
-function CalendarPreviousMonthButton({
-  children,
-  color: _color,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance: "subtle", asChild: true, icon: children, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.PreviousMonthButton, {}) });
-}
-CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
-
-function CalendarWeek({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", gap: "2", mt: "2", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Week, { ...props, children }) });
-}
-CalendarWeek.displayName = "@optiaxiom/react/CalendarWeek";
-
-function CalendarWeekday({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, color: "fg.tertiary", flex: "1", fontSize: "sm", fontWeight: "400", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Weekday, { ...props, children }) });
-}
-CalendarWeekday.displayName = "@optiaxiom/react/CalendarWeekday";
-
-function CalendarWeekdays({
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", flexDirection: "column", mb: "6", children: /* @__PURE__ */ jsxRuntime.jsx("thead", { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", gap: "2", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ...props, children }) }) }) });
-}
-CalendarWeekdays.displayName = "@optiaxiom/react/CalendarWeekdays";
-
-const formatter = new Intl.DateTimeFormat(void 0, {
-  timeZoneName: "long"
-});
-const toTimeZoneName = (date) => {
-  const parts = formatter.formatToParts(date);
-  return parts.find((part) => part.type === "timeZoneName")?.value ?? "";
-};
-
-const components = {
-  Chevron: CalendarChevron,
-  Day: CalendarDay,
-  MonthCaption: CalendarMonthCaption,
-  MonthGrid: CalendarMonthGrid,
-  Months: CalendarMonths,
-  Nav: CalendarNav,
-  NextMonthButton: CalendarNextMonthButton,
-  PreviousMonthButton: CalendarPreviousMonthButton,
-  Week: CalendarWeek,
-  Weekday: CalendarWeekday,
-  Weekdays: CalendarWeekdays
-};
-const Calendar = React.forwardRef(
-  ({
-    defaultValue = null,
-    holiday,
-    max,
-    min,
-    mode = "single",
-    onHeightChange,
-    onValueChange,
-    step,
-    today,
-    type = "date",
-    value: valueProp,
-    weekend,
-    ...props
-  }, outerRef) => {
-    const [value, setValue] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/Calendar",
-      defaultProp: defaultValue,
-      onChange: onValueChange,
-      prop: valueProp
-    });
-    const time = type === "date" ? "00:00" : toPlainTime(value instanceof Date ? value : /* @__PURE__ */ new Date(), step);
-    const numberOfMonths = useResponsiveMatches({
-      base: 1,
-      sm: 2
-    });
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const [from, setFrom] = React.useState();
-    const [to, setTo] = React.useState();
-    const DayButtonMemo = React.useMemo(
-      () => function DayButton({
-        onFocus,
-        onPointerEnter,
-        onPointerLeave,
-        ...props2
-      }) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          CalendarDayButton,
-          {
-            onFocus: (event) => {
-              onFocus?.(event);
-              setTo(props2.day.date);
-            },
-            onPointerEnter: (event) => {
-              onPointerEnter?.(event);
-              setTo(props2.day.date);
-            },
-            onPointerLeave: (event) => {
-              onPointerLeave?.(event);
-              setTo(void 0);
-            },
-            ...props2
-          }
-        );
-      },
-      []
-    );
-    const onHeightChangeStable = Skeleton.useEffectEvent(onHeightChange ?? (() => {
-    }));
-    React.useEffect(() => {
-      if (!innerRef.current) {
-        return;
-      }
-      const observer = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          onHeightChangeStable(entry.contentRect.height);
-        }
-      });
-      observer.observe(innerRef.current);
-      return () => observer.disconnect();
-    }, [onHeightChangeStable]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.Flex,
-      {
-        bg: "bg.default",
-        color: "fg.default",
-        fontSize: "md",
-        gap: "4",
-        ref,
-        ...props,
-        children: [
-          mode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactDayPicker.DayPicker,
-            {
-              autoFocus: true,
-              components: {
-                ...components,
-                DayButton: DayButtonMemo
-              },
-              defaultMonth: value instanceof Date ? value : void 0,
-              disabled: [
-                ...min ? [{ before: min }] : [],
-                ...max ? [{ after: max }] : []
-              ],
-              mode: "single",
-              modifiers: { holiday, weekend },
-              onSelect: (value2) => {
-                setValue(
-                  value2 ? /* @__PURE__ */ new Date(toPlainDate(value2) + "T" + (time ?? "00:00")) : value2 ?? null
-                );
-              },
-              required: true,
-              selected: value instanceof Date ? value : void 0,
-              today
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            reactDayPicker.DayPicker,
-            {
-              autoFocus: true,
-              components: {
-                ...components,
-                DayButton: DayButtonMemo
-              },
-              defaultMonth: value && typeof value === "object" && "from" in value ? value.from : void 0,
-              disabled: [
-                ...min ? [{ before: min }] : [],
-                ...max ? [{ after: max }] : []
-              ],
-              fixedWeeks: true,
-              mode: "range",
-              modifiers: { holiday, weekend },
-              numberOfMonths,
-              onSelect: (newValue) => {
-                if (!from) {
-                  const oldFrom = value && typeof value === "object" && "from" in value ? value.from : void 0;
-                  const newFrom = oldFrom && newValue?.from && newValue.from < oldFrom ? newValue.from : newValue?.to;
-                  setFrom(newFrom);
-                } else {
-                  setFrom(void 0);
-                  setValue(
-                    to && to < from ? {
-                      from: to,
-                      to: toInstant(toPlainDate(from) + "T23:59:59.999")
-                    } : {
-                      from,
-                      to: to ? toInstant(toPlainDate(to) + "T23:59:59.999") : void 0
-                    }
-                  );
-                }
-              },
-              required: true,
-              selected: from ? to && to < from ? { from: to, to: from } : { from, to } : value && typeof value === "object" && "from" in value ? value : void 0,
-              showOutsideDays: true,
-              today
-            }
-          ),
-          type === "datetime-local" && mode == "single" && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { gap: "8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Separator, { mb: "4" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Clock,
-              {
-                onValueChange: (time2) => {
-                  setValue(
-                    /* @__PURE__ */ new Date(
-                      toPlainDate(value instanceof Date ? value : /* @__PURE__ */ new Date()) + "T" + time2
-                    )
-                  );
-                },
-                step,
-                value: time
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.tertiary", fontSize: "sm", w: "full", children: toTimeZoneName(value instanceof Date ? value : /* @__PURE__ */ new Date()) })
-          ] })
-        ]
-      }
-    );
-  }
-);
-Calendar.displayName = "@optiaxiom/react/Calendar";
-
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_1glu71u'],variants:{visible:{false:'tplmdk',true:'c0pkbq'}}});
-
-const ActionsContent = React.forwardRef(
-  ({ children, className, visible = false, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...content$2({ visible }, className), ...props, children });
-  }
-);
-ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
-
-var root = Skeleton.recipeRuntime({base:'re99jm'});
-
-const ActionsRoot = React.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...root({}, className), ...props, children });
-  }
-);
-ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
-
-var card = Skeleton.recipeRuntime({base:['lj70da',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'s3ox8w']});
-
-const [CardProvider, useCardContext] = reactContext.createContext("@optiaxiom/react/Card");
-
-const mapOrientationToFlexDirection = {
-  horizontal: "row",
-  vertical: "column"
-};
-const Card = React.forwardRef(
-  ({ children, className, orientation = "vertical", ...props }, ref) => {
-    const descriptionId = reactId.useId();
-    const labelId = reactId.useId();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      CardProvider,
-      {
-        descriptionId,
-        labelId,
-        orientation,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.Flex,
-          {
-            flexDirection: mapOrientationToFlexDirection[orientation],
-            ref,
-            ...card({}, className),
-            ...props,
-            children
-          }
-        ) })
-      }
-    );
-  }
-);
-Card.displayName = "@optiaxiom/react/Card";
-
-var action = Skeleton.recipeRuntime({base:['_1eub4el']});
-
-const CardAction = React.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { ref, ...action({}, className), ...props, children });
-  }
-);
-CardAction.displayName = "@optiaxiom/react/CardAction";
-
-const CardCheckbox = React.forwardRef(
-  ({ children, indeterminate, onChange, ...props }, ref) => {
-    const labelPrefixId = reactId.useId();
-    const { labelId } = useCardContext("@optiaxiom/react/CardCheckbox");
-    const [checked, setChecked] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/CardCheckbox",
-      defaultProp: props.defaultChecked,
-      prop: props.checked
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.CheckboxRoot,
-      {
-        "aria-labelledby": clsx(labelPrefixId, labelId),
-        description: false,
-        onChange: (event) => {
-          onChange?.(event);
-          setChecked(event.target.checked);
-        },
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.CheckboxControl,
-            {
-              indeterminate,
-              shift: Boolean(children)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { id: labelPrefixId, children: [
-            "Check to ",
-            checked ? "unselect" : "select"
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-CardCheckbox.displayName = "@optiaxiom/react/CardCheckbox";
-
-const CardContent = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { gap: "4", ref, ...props, children });
-  }
-);
-CardContent.displayName = "@optiaxiom/react/CardContent";
-
-const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
-  const { descriptionId } = useCardContext("@optiaxiom/react/CardDescription");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Text,
-    {
-      color: "fg.tertiary",
-      fontSize: "sm",
-      id: descriptionId,
-      ref,
-      ...props,
-      children
-    }
-  );
-});
-CardDescription.displayName = "@optiaxiom/react/CardDescription";
-
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_18rpxgg'],variants:{orientation:{horizontal:[{w:'auto'},'_1gk33eh'],vertical:[{w:'full'},'_16rptlu']}}});
-
-const CardImage = React.forwardRef(
-  ({ alt = "", asChild, children, className, src, ...props }, ref) => {
-    const { orientation } = useCardContext("@optiaxiom/react/CardImage");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
-      {
-        asChild: true,
-        ref,
-        ...cardImage({ orientation }, 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(Skeleton.Link, { appearance: "subtle", overlay: true, ref, ...props });
-  }
-);
-CardLink.displayName = "@optiaxiom/react/CardLink";
-
-var cardOverflow = Skeleton.recipeRuntime({base:['ga9svo',{alignSelf:'stretch'},'_2tonc8'],variants:{orientation:{horizontal:['p9sf3s'],vertical:['_1vvec2h']}}});
-
-const CardOverflow = React.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    const { orientation } = useCardContext("@optiaxiom/react/CardOverflow");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
-      {
-        ref,
-        ...cardOverflow({ orientation }, className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-CardOverflow.displayName = "@optiaxiom/react/CardOverflow";
-
-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(
-      Skeleton.Heading,
-      {
-        asChild: true,
-        fontSize: "md",
-        fontWeight: "500",
-        id: labelId,
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children })
-      }
-    );
-  }
-);
-CardTitle.displayName = "@optiaxiom/react/CardTitle";
-
-const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
-const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
-
-const collator = new Intl.Collator(void 0, {
-  sensitivity: "base",
-  usage: "search"
-});
-function fuzzysearch(haystack, needle) {
-  const hlen = haystack.length;
-  const nlen = needle.length;
-  if (nlen > hlen) {
-    return false;
-  }
-  if (nlen === hlen) {
-    return collator.compare(needle, haystack) === 0;
-  }
-  outer:
-    for (let i = 0, j = 0; i < nlen; i++) {
-      const nch = needle.charAt(i);
-      while (j < hlen) {
-        if (collator.compare(haystack.charAt(j++), nch) === 0) {
-          continue outer;
-        }
-      }
-      return false;
-    }
-  return true;
-}
-
-const useCommandItems = ({
-  inputValue,
-  options
-}) => {
-  const filterFn = Skeleton.useEffectEvent((item, inputValue2) => {
-    const string = resolveItemProperty(item.label, {
-      inputValue: inputValue2
-    }).normalize();
-    return "visible" in item ? resolveItemProperty(item.visible, { inputValue: inputValue2 }) : inputValue2 ? fuzzysearch(string, inputValue2) || item.keywords && fuzzysearch(item.keywords, inputValue2) : true;
-  });
-  return React.useMemo(() => {
-    const substring = (inputValue ?? "").normalize();
-    const callback = (parentOption) => (item) => {
-      return item.subOptions && substring ? item.subOptions.flatMap(callback(item)) : filterFn(item, substring) ? [
-        parentOption ? {
-          ...item,
-          parentOption
-        } : item
-      ] : [];
-    };
-    return options.flatMap(callback());
-  }, [options, filterFn, inputValue]);
-};
-
-function Command({
-  children,
-  empty,
-  inputValue: inputValueProp,
-  loading,
-  onHover,
-  onInputValueChange,
-  onSelect: onItemSelect,
-  open,
-  options
-}) {
-  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
-    caller: "@optiaxiom/react/Command",
-    defaultProp: "",
-    onChange: onInputValueChange,
-    prop: inputValueProp
-  });
-  const items = useCommandItems({ inputValue, options });
-  const [highlightedIndex, setHighlightedIndex, placed] = usePortalPatch(
-    open,
-    () => items.findIndex(
-      (item) => !resolveItemProperty(item.disabledReason) && resolveItemProperty(item.selected) && !item.multi
-    )
-  );
-  const pauseInteractionRef = React.useRef({
-    isInsideTriangle: null,
-    timer: void 0
-  });
-  const downshift$1 = downshift.useCombobox({
-    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
-    inputValue,
-    isItemDisabled: (item) => Boolean(resolveItemProperty(item?.disabledReason)),
-    isOpen: placed,
-    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]);
-      }
-    },
-    onSelectedItemChange({ selectedItem, type }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
-        onItemSelect?.(selectedItem, {
-          close: type !== downshift.useCombobox.stateChangeTypes.FunctionSelectItem || !("selected" in selectedItem)
-        });
-      }
-    },
-    selectedItem: null,
-    stateReducer: (state, actionAndChanges) => {
-      const { changes, type } = actionAndChanges;
-      switch (type) {
-        case downshift.useCombobox.stateChangeTypes.InputBlur:
-        case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-        case downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
-        case downshift.useCombobox.stateChangeTypes.ItemClick:
-          return {
-            ...changes,
-            /**
-             * Keep the selected option highlighted rather than resetting to -1
-             * TODO: reset if activePath had values
-             */
-            highlightedIndex: state.highlightedIndex
-          };
-        default:
-          return changes;
-      }
-    }
-  });
-  downshift$1.getInputProps({}, { suppressRefError: true });
-  downshift$1.getMenuProps({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandProvider,
-    {
-      downshift: downshift$1,
-      empty,
-      highlightedItem: items[downshift$1.highlightedIndex],
-      inputValue,
-      items,
-      loading,
-      pauseInteractionRef,
-      setHighlightedIndex,
-      setInputValue,
-      children
-    }
-  );
-}
-Command.displayName = "@optiaxiom/react/Command";
-
-const CommandInput = React.forwardRef(
-  ({ onKeyDown, size, ...props }, ref) => {
-    const { downshift, highlightedItem, setInputValue } = useCommandContext(
-      "@optiaxiom/react/CommandInput"
-    );
-    const setInputValueStable = Skeleton.useEffectEvent(setInputValue);
-    React.useEffect(() => {
-      setInputValueStable("");
-    }, [setInputValueStable]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Input,
-      {
-        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
-        htmlSize: 1,
-        size,
-        ...downshift.getInputProps({
-          ref,
-          ...props,
-          onChange: (event) => {
-            setInputValue("value" in event.target ? event.target.value : "");
-          },
-          onKeyDown: (event) => {
-            onKeyDown?.(event);
-            if (event.defaultPrevented) {
-              return;
-            }
-            if (!(event.target instanceof HTMLInputElement)) {
-              return;
-            }
-            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) {
-              event.preventDefault();
-              downshift.selectItem(highlightedItem);
-            }
-          }
-        })
-      }
-    );
-  }
-);
-CommandInput.displayName = "@optiaxiom/react/CommandInput";
-
-const CommandItem = React.forwardRef(
-  ({ asChild, children, item, selected, size, ...props }, ref) => {
-    const { downshift, highlightedItem, inputValue, pauseInteractionRef } = useCommandContext("@optiaxiom/react/CommandItem");
-    const itemProps = downshift.getItemProps({
-      "aria-selected": selected ?? resolveItemProperty(item.selected),
-      item,
-      onClick: (event) => {
-        if (event.currentTarget instanceof HTMLAnchorElement) {
-          event.preventDefault();
-        }
-      },
-      onMouseMove: (event) => {
-        if (resolveItemProperty(item.disabledReason)) {
-          event.preventDefault();
-          Object.assign(event.nativeEvent, {
-            preventDownshiftDefault: true
-          });
-          return;
-        }
-        if (!pauseInteractionRef.current.isInsideTriangle) {
-          return;
-        }
-        if (pauseInteractionRef.current.isInsideTriangle({
-          x: event.clientX,
-          y: event.clientY
-        })) {
-          event.preventDefault();
-          Object.assign(event.nativeEvent, {
-            preventDownshiftDefault: true
-          });
-          window.clearTimeout(pauseInteractionRef.current.timer);
-          pauseInteractionRef.current.timer = window.setTimeout(() => {
-            pauseInteractionRef.current.isInsideTriangle = null;
-          }, 50);
-        } else {
-          pauseInteractionRef.current.isInsideTriangle = null;
-        }
-      },
-      ref,
-      ...props
-    });
-    const detail = resolveItemProperty(item.detail, { inputValue });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
-      {
-        asChild,
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        size,
-        tabIndex: -1,
-        ...itemProps,
-        ...item.link && { href: item.link },
-        children: Skeleton.decorateChildren(
-          { asChild, children },
-          (children2) => children2 ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            item.parentOption && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", children: resolveItemProperty(item.parentOption.label, {
-                inputValue
-              }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}) })
-            ] }),
-            resolveItemProperty(item.label, { inputValue }),
-            detail && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", children: detail })
-          ] })
-        )
-      }
-    );
-  }
-);
-CommandItem.displayName = "@optiaxiom/react/CommandItem";
-
-const CommandListbox = React.forwardRef(
-  ({ children, size, ...props }, ref) => {
-    const { downshift, highlightedItem, inputValue, items } = useCommandContext(
-      "@optiaxiom/react/CommandListbox"
-    );
-    const [placed, setPlaced] = React.useState(false);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.ListboxItemized,
-      {
-        highlightedItem,
-        items,
-        itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
-        onPlacedChange: setPlaced,
-        placed,
-        size,
-        ...downshift.getMenuProps({ ref, ...props }),
-        children
-      }
-    );
-  }
-);
-CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
-
-const [DataTableProvider, useDataTableContext] = reactContext.createContext("@optiaxiom/react/DataTable");
-
-const DataTable = React.forwardRef(
-  ({ children, table, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Flex,
-      {
-        gap: "8",
-        justifyContent: "flex-start",
-        maxH: "full",
-        maxW: "full",
+        fontSize: "md",
+        fontWeight: "500",
+        id: labelId,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(DataTableProvider, { table, children })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children })
       }
     );
   }
 );
-DataTable.displayName = "@optiaxiom/react/DataTable";
-
-var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'f5796h'],variants:{layout:{auto:['_17b57sq'],fixed:[{display:'grid'},'thp50y']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_1rxs1cd']});
-
-const Table = React.forwardRef(
-  ({ children, className, layout = "auto", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...wrapper({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...table$1({ layout }), children: /* @__PURE__ */ jsxRuntime.jsx("table", { children }) }) })
-);
-Table.displayName = "@optiaxiom/react/Table";
-
-const TableAction = React.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { ref, ...props });
-  }
-);
-TableAction.displayName = "@optiaxiom/react/TableAction";
-
-var body = Skeleton.recipeRuntime({base:['lfsxf7']});
-
-const TableBody = React.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...body({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, children }) })
-);
-TableBody.displayName = "@optiaxiom/react/TableBody";
-
-var cell$2 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_14l0b33']});
-
-const TableCell = React.forwardRef(
-  ({ children, className, colSpan, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, ref, children }) });
-  }
-);
-TableCell.displayName = "@optiaxiom/react/TableCell";
-
-const TableHeader = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, children }) }));
-TableHeader.displayName = "@optiaxiom/react/TableHeader";
-
-var cell$1 = Skeleton.recipeRuntime({base:'_1k0j3hu'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_13zb7je']});
-
-const TableHeaderCell = React.forwardRef(
-  ({ children, className, colSpan, p, px = "16", py = "12", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), px: p ?? px, py: p ?? py, children }) }) })
-);
-TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
-
-var row = Skeleton.recipeRuntime({base:['_2290y2',{transition:'colors',w:'full'},'_2xdnof']});
-
-const TableRow = React.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...row({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, children }) }) })
-);
-TableRow.displayName = "@optiaxiom/react/TableRow";
-
-var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1m4udcq'],variants:{pinned:{left:'dn5wae',right:'_1mehsjg'},pinnedType:{body:'iktydb',header:{}}}});
-var cellOffsetVar = 'var(--vcjzw)';
-var cellSizeVar = 'var(--o9mv9v)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_2snwe2']});
-var leftTotalSizeVar = 'var(--_4mhe59)';
-var rightTotalSizeVar = 'var(--_1xvgvzn)';
-var table = Skeleton.recipeRuntime({base:'xlelnu',variants:{pinned:{both:'_1r443se',left:'_17yaj58',none:{},right:'fh2cqt'}}});
-
-const IconSort = Skeleton.withIcon(
-  {
-    height: 12,
-    name: "IconSort",
-    width: 14
-  },
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "M3.88274 5.25H10.0937C10.6562 5.25 10.9609 4.57031 10.539 4.14844L7.44524 0.960938C7.32805 0.820312 7.16399 0.75 6.99993 0.75C6.83586 0.75 6.64836 0.820312 6.53118 0.960938L3.43743 4.14844C3.01555 4.57031 3.32024 5.25 3.88274 5.25ZM10.0937 6.75H3.88274C3.32024 6.75 3.01555 7.45312 3.43743 7.875L6.53118 11.0625C6.64836 11.2031 6.81243 11.25 6.99993 11.25C7.16399 11.25 7.32805 11.2031 7.44524 11.0625L10.539 7.875C10.9609 7.45312 10.6562 6.75 10.0937 6.75Z",
-      fill: "currentColor"
-    }
-  )
-);
-
-const IconSortDown = Skeleton.withIcon(
-  {
-    height: 12,
-    name: "IconSortDown",
-    width: 14
-  },
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "M10.5156 5.78906L7.53907 8.78906C7.375 8.92969 7.1875 9 7 9C6.78907 9 6.60157 8.92969 6.46094 8.78906L3.48438 5.78906C3.25 5.57812 3.17969 5.25 3.29688 4.96875C3.41407 4.6875 3.69532 4.5 4 4.5H9.97657C10.2813 4.5 10.5391 4.6875 10.6563 4.96875C10.7734 5.25 10.7266 5.57812 10.5156 5.78906Z",
-      fill: "currentColor"
-    }
-  )
-);
-
-const IconSortUp = Skeleton.withIcon(
-  {
-    height: 12,
-    name: "IconSortUp",
-    width: 14
-  },
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "M3.46099 6.23438L6.43756 3.23438C6.60162 3.09375 6.78912 3 7.00006 3C7.18756 3 7.37506 3.09375 7.51568 3.23438L10.4922 6.23438C10.7032 6.44531 10.7735 6.77344 10.6563 7.05469C10.5391 7.33594 10.2813 7.5 9.97662 7.5H4.00006C3.69537 7.5 3.41412 7.33594 3.29693 7.05469C3.17974 6.77344 3.25006 6.44531 3.46099 6.23438Z",
-      fill: "currentColor"
-    }
-  )
-);
+CardTitle.displayName = "@optiaxiom/react/CardTitle";
 
-var button$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_4bsdfs']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'bs5vyn'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_4d088f'],variants:{active:{false:'_15f0ff2',true:'_1ds5m0l'}}});
+const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
+const [CommandProvider, useCommandContext] = reactContext.createContext("@optiaxiom/react/Command");
 
-const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
-  const sortDir = header.column.getIsSorted();
-  return /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    TableHeaderCell,
-    {
-      "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : void 0,
-      colSpan: header.colSpan,
-      ref,
-      ...props,
-      children: [
-        header.column.columnDef.enableResizing && /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { visible: header.column.getIsResizing(), children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.Separator,
-          {
-            onDoubleClick: () => header.column.resetSize(),
-            onMouseDown: header.getResizeHandler(),
-            onTouchStart: header.getResizeHandler(),
-            orientation: "vertical",
-            style: {
-              transform: header.getContext().table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${header.getContext().table.getState().columnSizingInfo.deltaOffset}px)` : ""
-            },
-            ...handle({
-              resizing: header.column.getIsResizing()
-            })
-          }
-        ) }),
-        header.column.columnDef.enableSorting ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Cover, { asChild: true, inset: true, ...button$1(), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
-          children,
-          sortDir && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.VisuallyHidden, { children: [
-            "sorted ",
-            sortDir === "asc" ? "ascending" : "descending"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            ActionsContent,
-            {
-              display: "grid",
-              placeItems: "center",
-              visible: !!sortDir,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, ...icon({ active: sortDir === false }), children: /* @__PURE__ */ jsxRuntime.jsx(IconSort, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsxRuntime.jsx(IconSortUp, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, ...icon({ active: sortDir === "desc" }), children: /* @__PURE__ */ jsxRuntime.jsx(IconSortDown, {}) })
-              ]
-            }
-          )
-        ] }) }) : children
-      ]
-    }
-  ) });
+const collator = new Intl.Collator(void 0, {
+  sensitivity: "base",
+  usage: "search"
 });
-DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
-
-const COL_VIRTUALIZATION_THRESHOLD = 20;
-const ROW_VIRTUALIZATION_THRESHOLD = 20;
-const DataTableBody = React.forwardRef(
-  ({ className, estimatedRowHeight = 52, loading, ...props }, outerRef) => {
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const { table: table$1 } = useDataTableContext("@optiaxiom/react/DataTableBody");
-    const { rows } = table$1.getRowModel();
-    const centerColumns = table$1.getCenterVisibleLeafColumns();
-    const columnVirtualizer = reactVirtual.useVirtualizer({
-      count: centerColumns.length,
-      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
-      estimateSize: (index) => centerColumns[index].getSize(),
-      getScrollElement: () => innerRef.current,
-      horizontal: true
-    });
-    const virtualColumns = columnVirtualizer.getVirtualItems();
-    const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
-    const rowVirtualizer = reactVirtual.useVirtualizer({
-      count: rows.length,
-      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
-      estimateSize: () => estimatedRowHeight,
-      getScrollElement: () => innerRef.current
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Table,
-      {
-        layout: "fixed",
-        ref,
-        style: dynamic.assignInlineVars({
-          [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
-          [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
-        }),
-        ...table(
-          {
-            pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
-          },
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { display: "flex", children: [
-            headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
-              DataTableHeaderCell,
-              {
-                header,
-                style: {
-                  ...dynamic.assignInlineVars({
-                    [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
-                    [cellSizeVar]: `${header.getSize()}px`
-                  })
-                },
-                ...cell({
-                  pinned: header.column.getIsPinned() || void 0,
-                  pinnedType: header.column.getIsPinned() ? "header" : void 0
-                }),
-                children: header.isPlaceholder ? null : reactTable.flexRender(
-                  header.column.columnDef.header,
-                  header.getContext()
-                )
-              },
-              header.id
-            )),
-            /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { flex: "1", p: "0", w: "0" })
-          ] }, headerGroup.id)) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            TableBody,
-            {
-              display: "grid",
-              style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
-              children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
-                row: fakeRow(table$1, rowIndex),
-                virtualRow: void 0
-              })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
-                row: rows[virtualRow.index],
-                virtualRow
-              })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }) => /* @__PURE__ */ jsxRuntime.jsxs(
-                TableRow,
-                {
-                  "data-highlighted": row.getIsSelected() ? "" : void 0,
-                  "data-index": virtualRow?.index,
-                  display: "flex",
-                  ref: virtualRow ? rowVirtualizer.measureElement : void 0,
-                  style: virtualRow ? {
-                    minHeight: virtualRow.size,
-                    position: "absolute",
-                    transform: `translateY(${virtualRow.start}px)`
-                  } : void 0,
-                  children: [
-                    row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
-                      TableCell,
-                      {
-                        style: {
-                          ...dynamic.assignInlineVars({
-                            [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-                            [cellSizeVar]: `${cell$1.column.getSize()}px`
-                          })
-                        },
-                        ...cell({
-                          pinned: "left",
-                          pinnedType: "body"
-                        }),
-                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                      },
-                      cell$1.id
-                    )),
-                    columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { style: { width: virtualColumnsOffset } }),
-                    (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
-                      const cells = row.getCenterVisibleCells();
-                      return cells[virtualCell.index];
-                    }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
-                      TableCell,
-                      {
-                        style: {
-                          ...dynamic.assignInlineVars({
-                            [cellSizeVar]: `${cell$1.column.getSize()}px`
-                          })
-                        },
-                        ...cell(),
-                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                      },
-                      cell$1.id
-                    )),
-                    row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
-                      TableCell,
-                      {
-                        style: {
-                          ...dynamic.assignInlineVars({
-                            [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
-                            [cellSizeVar]: `${cell$1.column.getSize()}px`
-                          })
-                        },
-                        ...cell({
-                          pinned: "right",
-                          pinnedType: "body"
-                        }),
-                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                      },
-                      cell$1.id
-                    )),
-                    /* @__PURE__ */ jsxRuntime.jsx(TableCell, { flex: "1", p: "0", w: "0" })
-                  ]
-                },
-                row.id
-              ))
-            }
-          )
-        ]
-      }
-    );
+function fuzzysearch(haystack, needle) {
+  const hlen = haystack.length;
+  const nlen = needle.length;
+  if (nlen > hlen) {
+    return false;
   }
-);
-DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
-const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
-  column,
-  getContext: () => ({}),
-  id: column.id + "-" + ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
-}));
-const fakeCellWidth = (id) => id.split("-")[1];
-const fakeRow = (table, rowIndex) => ({
-  getCenterVisibleCells: fakeCellsFactory(
-    table.getCenterVisibleLeafColumns(),
-    rowIndex
-  ),
-  getIsSelected: () => false,
-  getLeftVisibleCells: fakeCellsFactory(
-    table.getLeftVisibleLeafColumns(),
-    rowIndex
-  ),
-  getRightVisibleCells: fakeCellsFactory(
-    table.getRightVisibleLeafColumns(),
-    rowIndex
-  ),
-  id: "loading" + rowIndex
-});
-
-var addon = Skeleton.recipeRuntime({base:'_1ivxycp',variants:{position:{end:{textAlign:'end'},start:{}}}});
-
-const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({
-  label: size,
-  value: size
-}));
-const DataTableFooter = React.forwardRef(
-  ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
-    const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
-    const { pagination } = table.getState();
-    const pageSizeId = reactId.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.Flex,
-      {
-        alignSelf: "stretch",
-        flexDirection: "row",
-        fontSize: "md",
-        justifyContent: "space-between",
-        mt: "auto",
-        ref,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...addon({ position: "start" }), children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", gap: "8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", id: pageSizeId, children: "Page Size" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              Select,
-              {
-                onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
-                options: pageSizeOptions,
-                value: pagination.pageSize.toString(),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    SelectTrigger,
-                    {
-                      appearance: "subtle",
-                      "aria-labelledby": pageSizeId
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, {})
-                ]
-              }
-            )
-          ] }) }),
-          table.getPageCount() > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.Pagination,
-            {
-              onPageChange: (newPage) => table.setPageIndex(newPage - 1),
-              page: pagination.pageIndex + 1,
-              total: table.getPageCount()
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { ...addon({ position: "end" }), children: table.getRowCount() > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            pagination.pageIndex * pagination.pageSize + 1,
-            " -",
-            " ",
-            Math.min(
-              (pagination.pageIndex + 1) * pagination.pageSize,
-              table.getRowCount()
-            ),
-            " ",
-            "of ",
-            table.getRowCount()
-          ] }) })
-        ]
-      }
-    );
+  if (nlen === hlen) {
+    return collator.compare(needle, haystack) === 0;
   }
-);
-DataTableFooter.displayName = "@optiaxiom/react/DataTableFooter";
-
-const IconCalendar = Skeleton.withIcon(
-  {
-    name: "IconCalendar"
-  },
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      clipRule: "evenodd",
-      d: "M13.5 0.5C13.5 0.223858 13.2761 0 13 0C12.7239 0 12.5 0.223858 12.5 0.5V2H7.5V0.5C7.5 0.223858 7.27614 0 7 0C6.72386 0 6.5 0.223858 6.5 0.5V2H5.33333C4.04467 2 3 3.04467 3 4.33333V13.6667C3 14.9553 4.04467 16 5.33333 16H14.6667C15.9553 16 17 14.9553 17 13.6667V4.33333C17 3.04467 15.9553 2 14.6667 2H13.5V0.5ZM5.33333 3H7H13H14.6667C15.403 3 16 3.59695 16 4.33333V5.16666H4V4.33333C4 3.59695 4.59695 3 5.33333 3ZM4 6.16666V13.6667C4 14.403 4.59695 15 5.33333 15H14.6667C15.403 15 16 14.403 16 13.6667V6.16666H4Z",
-      fill: "currentColor",
-      fillRule: "evenodd"
-    }
-  )
-);
-
-var input$2 = Skeleton.recipeRuntime({base:'_15dofjc'});
-var picker = Skeleton.recipeRuntime({base:'bjnqfm'});
-
-const DateInput = React.forwardRef(
-  ({
-    disabled,
-    holiday,
-    max,
-    min,
-    onChange,
-    step,
-    type = "date",
-    weekend,
-    ...props
-  }, outerRef) => {
-    const [open, setOpen] = React.useState(false);
-    const hasInteractedOutsideRef = React.useRef(false);
-    const pickerRef = React.useRef(null);
-    const innerRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const [value, setValue] = reactUseControllableState.useControllableState({
-      caller: "@optiaxiom/react/DateInput",
-      defaultProp: props.defaultValue,
-      prop: props.value
-    });
-    const forceValueChange = Skeleton.useObserveValue(innerRef, setValue);
-    const instant = typeof value === "string" ? toInstant(value) ?? null : null;
-    const maxDate = max ? toInstant(max) : void 0;
-    const minDate = min ? toInstant(min) : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        Skeleton.Input,
-        {
-          addonAfter: !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.PopoverTrigger,
-            {
-              appearance: "subtle",
-              "aria-label": "Show date picker",
-              hasCustomAnchor: true,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
-              ref: pickerRef,
-              size: "sm",
-              ...picker()
-            }
-          ),
-          asChild: true,
-          disabled,
-          max,
-          min,
-          onChange: (event) => {
-            onChange?.(event);
-            setValue(event.target.value);
-          },
-          onClick: (e) => {
-            if (CSS.supports("selector(::-webkit-datetime-edit)")) {
-              e.preventDefault();
-            }
-          },
-          onKeyDown: (e) => {
-            if (e.key === " " && CSS.supports("selector(::-webkit-datetime-edit)")) {
-              e.preventDefault();
-              setOpen(true);
-            }
-          },
-          ref,
-          step,
-          type,
-          ...props,
-          children: /* @__PURE__ */ jsxRuntime.jsx("input", { ...input$2() })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Skeleton.PopoverContent,
-        {
-          gap: "8",
-          onCloseAutoFocus: (event) => {
-            if (hasInteractedOutsideRef.current) {
-              hasInteractedOutsideRef.current = false;
-            } else {
-              event.preventDefault();
-              innerRef.current?.focus();
-            }
-          },
-          onInteractOutside: (event) => {
-            if (!(event.target instanceof Node && pickerRef.current?.contains(event.target))) {
-              hasInteractedOutsideRef.current = true;
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Calendar,
-              {
-                holiday,
-                max: maxDate,
-                min: minDate,
-                onValueChange: (date) => {
-                  if (!date) {
-                    return;
-                  }
-                  forceValueChange(
-                    type === "datetime-local" ? toPlainDateTime(date) : toPlainDate(date)
-                  );
-                  if (type === "date") {
-                    setOpen(false);
-                  }
-                },
-                step,
-                type,
-                value: instant,
-                weekend
-              }
-            ),
-            (!props.required || type === "datetime-local") && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", justifyContent: "space-between", children: [
-              !props.required && /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Button,
-                {
-                  onClick: () => {
-                    forceValueChange("");
-                    if (type === "date") {
-                      setOpen(false);
-                    }
-                  },
-                  children: "Clear"
-                }
-              ),
-              type === "datetime-local" && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance: "primary", onClick: () => setOpen(false), children: "Done" })
-            ] })
-          ]
+  outer:
+    for (let i = 0, j = 0; i < nlen; i++) {
+      const nch = needle.charAt(i);
+      while (j < hlen) {
+        if (collator.compare(haystack.charAt(j++), nch) === 0) {
+          continue outer;
         }
-      )
-    ] });
-  }
-);
-DateInput.displayName = "@optiaxiom/react/DateInput";
+      }
+      return false;
+    }
+  return true;
+}
 
-const [DatePickerProvider, useDatePickerContext] = reactContext.createContext("@optiaxiom/react/DatePicker");
+const useCommandItems = ({
+  inputValue,
+  options
+}) => {
+  const filterFn = IconMagnifyingGlass.useEffectEvent((item, inputValue2) => {
+    const string = resolveItemProperty(item.label, {
+      inputValue: inputValue2
+    }).normalize();
+    return "visible" in item ? resolveItemProperty(item.visible, { inputValue: inputValue2 }) : inputValue2 ? fuzzysearch(string, inputValue2) || item.keywords && fuzzysearch(item.keywords, inputValue2) : true;
+  });
+  return React.useMemo(() => {
+    const substring = (inputValue ?? "").normalize();
+    const callback = (parentOption) => (item) => {
+      return item.subOptions && substring ? item.subOptions.flatMap(callback(item)) : filterFn(item, substring) ? [
+        parentOption ? {
+          ...item,
+          key: [
+            parentOption.key ?? resolveItemProperty(parentOption.label, {
+              inputValue
+            }),
+            item.key ?? resolveItemProperty(item.label, { inputValue })
+          ].join("-"),
+          parentOption
+        } : item
+      ] : [];
+    };
+    return options.flatMap(callback());
+  }, [options, filterFn, inputValue]);
+};
 
-function DatePicker({
+function Command({
   children,
-  defaultOpen = false,
-  defaultValue = null,
-  disabled,
-  onOpenChange,
-  onValueChange,
-  open: openProp,
-  step,
-  type = "date",
-  value: valueProp,
-  ...props
+  empty,
+  inputValue: inputValueProp,
+  loading,
+  onHover,
+  onInputValueChange,
+  onSelect: onItemSelect,
+  open,
+  options
 }) {
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    caller: "@optiaxiom/react/DatePicker",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
+  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/Command",
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
+  });
+  const items = useCommandItems({ inputValue, options });
+  const [highlightedIndex, setHighlightedIndex, placed] = IconMagnifyingGlass.usePortalPatch(
+    open,
+    () => items.filter((item) => "selected" in item).length > items.length / 2 ? items.findIndex(
+      (item) => !resolveItemProperty(item.disabledReason) && resolveItemProperty(item.selected) && !item.multi
+    ) : -1
+  );
+  const pauseInteractionRef = React.useRef({
+    isInsideTriangle: null,
+    timer: void 0
   });
-  const [value, setValue] = reactUseControllableState.useControllableState({
-    caller: "@optiaxiom/react/DatePicker",
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: valueProp
+  const downshift$1 = downshift.useCombobox({
+    highlightedIndex: highlightedIndex === -1 ? items.findIndex((item) => !resolveItemProperty(item.disabledReason)) : highlightedIndex,
+    inputValue,
+    isItemDisabled: (item) => Boolean(resolveItemProperty(item?.disabledReason)),
+    isOpen: placed,
+    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]);
+      }
+    },
+    onSelectedItemChange({ selectedItem, type }) {
+      if (type !== downshift.useCombobox.stateChangeTypes.InputBlur && selectedItem !== null) {
+        onItemSelect?.(selectedItem, {
+          close: type !== downshift.useCombobox.stateChangeTypes.FunctionSelectItem || !("selected" in selectedItem)
+        });
+      }
+    },
+    selectedItem: null,
+    stateReducer: (state, actionAndChanges) => {
+      const { changes, type } = actionAndChanges;
+      switch (type) {
+        case downshift.useCombobox.stateChangeTypes.InputBlur:
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
+        case downshift.useCombobox.stateChangeTypes.ItemClick:
+          return {
+            ...changes,
+            /**
+             * Keep the selected option highlighted rather than resetting to -1
+             * TODO: reset if activePath had values
+             */
+            highlightedIndex: state.highlightedIndex
+          };
+        default:
+          return changes;
+      }
+    }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DatePickerProvider,
+  downshift$1.getInputProps({}, { suppressRefError: true });
+  downshift$1.getMenuProps({}, { suppressRefError: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CommandProvider,
     {
-      disabled,
-      setOpen,
-      setValue,
-      step,
-      type,
-      value,
+      downshift: downshift$1,
+      empty,
+      highlightedItem: items[downshift$1.highlightedIndex],
+      inputValue,
+      items,
+      loading,
+      pauseInteractionRef,
+      setHighlightedIndex,
+      setInputValue,
       children
     }
-  ) });
+  );
 }
-DatePicker.displayName = "@optiaxiom/react/DatePicker";
-
-var panels$1 = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'},'_1daj0el']});
-
-const DatePickerContent = React.forwardRef(
-  ({
-    addonAfter,
-    addonBefore,
-    children,
-    holiday,
-    max,
-    min,
-    today,
-    weekend,
-    ...props
-  }, ref) => {
-    const { setOpen, setValue, step, type, value } = useDatePickerContext(
-      "@optiaxiom/react/DatePickerContent"
-    );
-    const panelRef = React.useRef(null);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ref: panelRef, ...panels$1(), children: [
-        addonBefore,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Calendar,
-          {
-            alignSelf: "start",
-            holiday,
-            max,
-            min,
-            onHeightChange: (height) => {
-              if (panelRef.current) {
-                panelRef.current.style.height = `${height}px`;
-              }
-            },
-            onValueChange: (date) => {
-              setValue(date);
-              if (type === "date") {
-                setOpen(false);
-              }
-            },
-            step,
-            today,
-            type,
-            value,
-            weekend
-          }
-        ),
-        addonAfter
-      ] }),
-      children
-    ] });
-  }
-);
-DatePickerContent.displayName = "@optiaxiom/react/DatePickerContent";
+Command.displayName = "@optiaxiom/react/Command";
 
-const dateFormatter = new Intl.DateTimeFormat(void 0, {
-  day: "numeric",
-  month: "short",
-  year: "numeric"
-});
-const dateTimeFormatter = new Intl.DateTimeFormat(void 0, {
-  day: "numeric",
-  hour: "numeric",
-  minute: "numeric",
-  month: "short",
-  year: "numeric"
-});
-const DatePickerTrigger = React.forwardRef(
-  ({
-    "aria-labelledby": ariaLabelledBy,
-    children,
-    format,
-    placeholder = "Pick a date",
-    ...props
-  }, outerRef) => {
-    const { disabled, type, value } = useDatePickerContext(
-      "@optiaxiom/react/DatePickerTrigger"
+const CommandInput = React.forwardRef(
+  ({ onKeyDown, size, ...props }, ref) => {
+    const { downshift, highlightedItem, setInputValue } = useCommandContext(
+      "@optiaxiom/react/CommandInput"
     );
-    const formatter = format ? { format } : type === "datetime-local" ? dateTimeFormatter : dateFormatter;
-    const buttonRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    const setInputValueStable = IconMagnifyingGlass.useEffectEvent(setInputValue);
+    React.useEffect(() => {
+      setInputValueStable("");
+    }, [setInputValueStable]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.PopoverTrigger,
+      IconMagnifyingGlass.Input,
       {
-        "aria-labelledby": labelId,
-        disabled,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
-        ref,
-        ...props,
-        children: children ?? (value ? formatter.format(value) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children: placeholder }))
+        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconMagnifyingGlass, {}),
+        htmlSize: 1,
+        size,
+        ...downshift.getInputProps({
+          ref,
+          ...props,
+          onChange: (event) => {
+            setInputValue("value" in event.target ? event.target.value : "");
+          },
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented) {
+              return;
+            }
+            if (!(event.target instanceof HTMLInputElement)) {
+              return;
+            }
+            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) {
+              event.preventDefault();
+              downshift.selectItem(highlightedItem);
+            }
+          }
+        })
       }
     );
   }
 );
-DatePickerTrigger.displayName = "@optiaxiom/react/DatePickerTrigger";
-
-const [DateRangePickerProvider, useDateRangePickerContext] = reactContext.createContext("@optiaxiom/react/DateRangePicker");
-
-function DateRangePicker({
-  children,
-  defaultOpen = false,
-  defaultValue = null,
-  disabled,
-  onOpenChange,
-  onValueChange,
-  open: openProp,
-  value: valueProp,
-  ...props
-}) {
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    caller: "@optiaxiom/react/DateRangePicker",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const [value, setValue] = reactUseControllableState.useControllableState({
-    caller: "@optiaxiom/react/DateRangePicker",
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: valueProp
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DateRangePickerProvider,
-    {
-      disabled,
-      setOpen,
-      setValue,
-      value,
-      children
-    }
-  ) });
-}
-DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
-
-var panels = Skeleton.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});
+CommandInput.displayName = "@optiaxiom/react/CommandInput";
 
-const DateRangePickerContent = React.forwardRef(
-  ({
-    addonAfter,
-    addonBefore,
-    children,
-    holiday,
-    max,
-    min,
-    today,
-    weekend,
-    ...props
-  }, ref) => {
-    const { setOpen, setValue, value } = useDateRangePickerContext(
-      "@optiaxiom/react/DateRangePickerContent"
+const CommandItem = React.forwardRef(
+  ({ asChild, children, item, selected, size, ...props }, ref) => {
+    const {
+      downshift,
+      highlightedItem,
+      inputValue,
+      items,
+      pauseInteractionRef
+    } = useCommandContext("@optiaxiom/react/CommandItem");
+    const itemProps = downshift.getItemProps({
+      "aria-selected": selected ?? resolveItemProperty(item.selected),
+      item,
+      onClick: (event) => {
+        if (event.currentTarget instanceof HTMLAnchorElement) {
+          event.preventDefault();
+        }
+      },
+      onMouseLeave: () => {
+        window.clearTimeout(pauseInteractionRef.current.timer);
+      },
+      onMouseMove: (event) => {
+        if (resolveItemProperty(item.disabledReason)) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+          return;
+        }
+        if (!pauseInteractionRef.current.isInsideTriangle) {
+          return;
+        }
+        if (pauseInteractionRef.current.isInsideTriangle({
+          x: event.clientX,
+          y: event.clientY
+        })) {
+          event.preventDefault();
+          Object.assign(event.nativeEvent, {
+            preventDownshiftDefault: true
+          });
+          window.clearTimeout(pauseInteractionRef.current.timer);
+          pauseInteractionRef.current.timer = window.setTimeout(() => {
+            pauseInteractionRef.current.isInsideTriangle = null;
+            downshift.setHighlightedIndex(items.indexOf(item));
+          }, 20);
+        } else {
+          pauseInteractionRef.current.isInsideTriangle = null;
+        }
+      },
+      ref,
+      ...props
+    });
+    const detail = resolveItemProperty(item.detail, { inputValue });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        asChild,
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        size,
+        tabIndex: -1,
+        ...itemProps,
+        ...item.link && { href: item.link },
+        children: IconMagnifyingGlass.decorateChildren(
+          { asChild, children },
+          (children2) => children2 ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            item.parentOption && /* @__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 })
+          ] })
+        )
+      }
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...panels(), children: [
-        addonBefore,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Calendar,
-          {
-            alignSelf: "start",
-            holiday,
-            max,
-            min,
-            mode: "range",
-            onValueChange: (value2) => {
-              setValue(value2);
-              setOpen(false);
-            },
-            today,
-            value,
-            weekend
-          }
-        ),
-        addonAfter
-      ] }),
-      children
-    ] });
   }
 );
-DateRangePickerContent.displayName = "@optiaxiom/react/DateRangePickerContent";
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
 
-const DEFAULT_FORMATTER = (date) => date.from && date.to ? date.from.toLocaleDateString(void 0, {
-  day: "numeric",
-  month: "short",
-  year: "numeric"
-}) + " - " + date.to.toLocaleDateString(void 0, {
-  day: "numeric",
-  month: "short",
-  year: "numeric"
-}) : null;
-const DateRangePickerTrigger = React.forwardRef(
-  ({
-    "aria-labelledby": ariaLabelledBy,
-    children,
-    format = DEFAULT_FORMATTER,
-    placeholder = "Pick a date",
-    ...props
-  }, outerRef) => {
-    const { disabled, value } = useDateRangePickerContext(
-      "@optiaxiom/react/DateRangePickerTrigger"
+const CommandListbox = React.forwardRef(
+  ({ children, size, ...props }, ref) => {
+    const { downshift, highlightedItem, inputValue, items } = useCommandContext(
+      "@optiaxiom/react/CommandListbox"
     );
-    const buttonRef = React.useRef(null);
-    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.PopoverTrigger,
+      IconMagnifyingGlass.ListboxItemized,
       {
-        "aria-labelledby": labelId,
-        disabled,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
-        ref,
-        ...props,
-        children: children ?? (value ? format(value) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children: placeholder }))
+        highlightedItem,
+        items,
+        itemToKey: (item) => item.key ?? resolveItemProperty(item.label, { inputValue }),
+        size,
+        ...downshift.getMenuProps({ ref, ...props }),
+        children
       }
     );
   }
 );
-DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
+CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
 
-var mark = Skeleton.recipeRuntime({base:'_6ala4g'});
+var mark = IconMagnifyingGlass.recipeRuntime({base:'_8aa34x'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -2444,15 +696,15 @@ function escapeRegExp(string) {
 const Highlight = React.forwardRef(
   ({ children = (chunk) => chunk, content, query, ...props }, ref) => {
     const chunks = useHighlightedChunks(content || "", query);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: highlighted ? children(
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...mark(), children: /* @__PURE__ */ jsxRuntime.jsx("mark", { children: chunk }) })
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref, ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: highlighted ? children(
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...mark(), children: /* @__PURE__ */ jsxRuntime.jsx("mark", { children: chunk }) })
     ) : chunk }, index)) });
   }
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'_1crb85r',variants:{empty:{false:{},true:'_8pf4p2'}}});
-var input$1 = Skeleton.recipeRuntime({base:'_1a4brh7'});
+var editor = IconMagnifyingGlass.recipeRuntime({base:'ihe0re',variants:{empty:{false:{},true:'_1jarzcm'}}});
+var input$1 = IconMagnifyingGlass.recipeRuntime({base:'_1n4a2mh'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -2491,8 +743,8 @@ const InlineInput = React.forwardRef(
         }
       }
     }, [multiline, value]);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...input$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref, ...input$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
       {
         "aria-multiline": multiline,
         "aria-readonly": disabled,
@@ -2533,45 +785,14 @@ function getText(element) {
   return text;
 }
 
-var button = Skeleton.recipeRuntime({base:[{justifyContent:'space-between'},'_2drsbm']});
-var content = Skeleton.recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
-var label = Skeleton.recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
-
-const LabelMenuButton = React.forwardRef(
-  ({ "aria-labelledby": ariaLabelledBy, children, className, label: label$1, ...props }, ref) => {
-    const filled = String(props["aria-expanded"]) === "true" || Boolean(children);
-    const labelId = reactId.useId();
-    const valueId = reactId.useId();
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.ButtonRoot,
-      {
-        "aria-labelledby": ariaLabelledBy ? clsx(labelId, ariaLabelledBy) : clsx(labelId, children && valueId),
-        "data-filled": filled ? "" : void 0,
-        ref,
-        size: "lg",
-        ...button({}, className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { gap: "0", overflow: "hidden", textAlign: "start", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { asChild: true, id: labelId, truncate: true, ...label({ filled }), children: /* @__PURE__ */ jsxRuntime.jsx(RadixLabel.Label, { children: label$1 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { id: valueId, truncate: true, ...content({ filled }), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\xA0" }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ButtonAddon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleDown, {}) })
-        ]
-      }
-    );
-  }
-);
-LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
-
-var layout = Skeleton.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_1cc49pq']});
+var layout = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_124odkt']});
 
 const Layout = React.forwardRef(
   ({ children, className, header, sidebar, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { ref, ...layout({}, className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ref, ...layout({}, className), ...props, children: [
       header,
       /* @__PURE__ */ jsxRuntime.jsxs(
-        Skeleton.Box,
+        IconMagnifyingGlass.Box,
         {
           alignItems: "stretch",
           display: "flex",
@@ -2580,7 +801,7 @@ const Layout = React.forwardRef(
           overflow: "auto",
           children: [
             sidebar,
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { flex: "1", overflow: "auto", px: "32", py: "24", children })
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { flex: "1", overflow: "auto", px: "32", py: "24", children })
           ]
         }
       )
@@ -2592,7 +813,7 @@ Layout.displayName = "@optiaxiom/react/Layout";
 const [MenuProvider, useMenuContext] = reactContext.createContext("@optiaxiom/react/Menu");
 
 function MenuPopover(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { modal: true, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Popover, { modal: true, ...props });
 }
 MenuPopover.displayName = "@optiaxiom/react/MenuPopover";
 
@@ -2611,11 +832,11 @@ function Menu({
   size: sizeProp,
   ...props
 }) {
-  const size = useResponsiveMatches({
+  const size = IconMagnifyingGlass.useResponsiveMatches({
     base: "lg",
     sm: sizeProp ?? "sm"
   });
-  const Comp = size === "sm" ? MenuPopover : Skeleton.Dialog;
+  const Comp = size === "sm" ? MenuPopover : IconMagnifyingGlass.Dialog;
   const [open, setOpen] = reactUseControllableState.useControllableState({
     caller: "@optiaxiom/react/Menu",
     defaultProp: defaultOpen,
@@ -2746,15 +967,15 @@ const MenuDialogContent = React.forwardRef(
     sideOffset: _sideOffset,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.DialogContent, { ref, transitionType: "pop", ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.DialogHeader, { children: ariaLabel }) }),
+    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
     ] });
   }
 );
 MenuDialogContent.displayName = "@optiaxiom/react/MenuDialogContent";
 
-var input = Skeleton.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'a0bogi']}}});
+var input = IconMagnifyingGlass.recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'ftr3vt']}}});
 
 const MenuInput = React.forwardRef(
   ({ className, ...props }, outerRef) => {
@@ -2774,7 +995,7 @@ const MenuInput = React.forwardRef(
         setMinWidth(rect.width);
       }
     }, [downshift.inputValue, minWidth, open]);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref: containerRef, style: { minWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
       CommandInput,
       {
         ref,
@@ -2791,7 +1012,7 @@ const MenuCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
   const Comp = props.item.link ? "a" : "div";
   const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
   return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.ListboxCheckboxItem,
+    IconMagnifyingGlass.ListboxCheckboxItem,
     {
       addonBefore: props.item.addon,
       asChild: true,
@@ -2807,7 +1028,7 @@ const MenuItem = React.forwardRef(
   ({ children, ...props }, ref) => {
     const Comp = props.item.link ? "a" : "div";
     return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.ListboxItem,
+      IconMagnifyingGlass.ListboxItem,
       {
         addonBefore: props.item.addon,
         asChild: true,
@@ -2823,7 +1044,7 @@ const MenuRadioItem = React.forwardRef(
   ({ children, ...props }, ref) => {
     const Comp = props.item.link ? "a" : "div";
     return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.ListboxRadioItem,
+      IconMagnifyingGlass.ListboxRadioItem,
       {
         addonBefore: props.item.addon,
         asChild: true,
@@ -2846,9 +1067,10 @@ const MenuSubContent = React.forwardRef(
     );
     const {
       inputRef: parentInputRef,
-      open,
+      open: parentSubMenuOpen,
       setOpen
     } = useMenuSubContext("@optiaxiom/react/MenuSubContent");
+    const { open } = IconMagnifyingGlass.usePopoverContext("@optiaxiom/react/MenuSubContent");
     const inputRef = React.useRef(null);
     const [subMenuOpen, setSubMenuOpen] = React.useState(false);
     React.useEffect(() => {
@@ -2857,20 +1079,31 @@ const MenuSubContent = React.forwardRef(
       }
     }, [open]);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.PopoverContent,
+      IconMagnifyingGlass.PopoverContent,
       {
         align,
-        alignOffset: -4,
+        alignOffset: item.subOptionsInputVisible ? -46 : -4,
         maxH: "sm",
         minW: "trigger",
         onCloseAutoFocus: (event) => {
-          if (open) {
+          if (parentSubMenuOpen) {
             return;
           }
           event.preventDefault();
           parentInputRef.current?.focus();
         },
         onEscapeKeyDown: () => setRootMenuOpen(false),
+        onPointerEnter: () => {
+          if (item.subOptionsInputVisible) {
+            inputRef.current?.focus();
+          }
+        },
+        onPointerLeave: (event) => {
+          if (item.subOptionsInputVisible) {
+            parentInputRef.current?.focus();
+            event.stopPropagation();
+          }
+        },
         p: "4",
         ref,
         side,
@@ -2883,6 +1116,9 @@ const MenuSubContent = React.forwardRef(
               setSubMenuOpen(!!item2.subOptions?.length);
             },
             onInputValueChange: (inputValue) => {
+              if (item.subOptionsInputVisible) {
+                return;
+              }
               parentInputRef.current?.focus();
               setInputValue(inputValue);
             },
@@ -2896,11 +1132,15 @@ const MenuSubContent = React.forwardRef(
             open: true,
             options,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: item.subOptionsInputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(
                 CommandInput,
                 {
+                  m: "4",
                   onKeyDown: (event) => {
-                    if (event.key === "ArrowLeft") {
+                    if (!(event.target instanceof HTMLInputElement)) {
+                      return;
+                    }
+                    if (!event.target.value && event.key === "ArrowLeft") {
                       event.preventDefault();
                       setOpen(false);
                     }
@@ -2914,7 +1154,7 @@ const MenuSubContent = React.forwardRef(
                   inputRef,
                   open: subMenuOpen,
                   setOpen: setSubMenuOpen,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, {})
+                  children: /* @__PURE__ */ jsxRuntime.jsx(MenuListbox, { onScroll: () => setSubMenuOpen(false) })
                 }
               )
             ]
@@ -2929,11 +1169,11 @@ MenuSubContent.displayName = "@optiaxiom/react/MenuSubContent";
 const MenuSubTrigger = React.forwardRef(
   ({ children, contentRef, item, onPointerDown, ...props }, ref) => {
     const { downshift, highlightedItem, pauseInteractionRef } = useCommandContext("@optiaxiom/react/MenuSubTrigger");
-    const { open } = Skeleton.usePopoverContext("@optiaxiom/react/MenuSubTrigger");
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.FilteredSlot, { exclude: "type", children: /* @__PURE__ */ jsxRuntime.jsx(
+    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(
       MenuItem,
       {
-        addonAfter: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}),
+        addonAfter: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, {}),
         item,
         onPointerDown: (event) => {
           onPointerDown?.(event);
@@ -2970,7 +1210,7 @@ const MenuSubTrigger = React.forwardRef(
           };
           pauseInteractionRef.current.timer = window.setTimeout(() => {
             pauseInteractionRef.current.isInsideTriangle = null;
-          }, 50);
+          }, 20);
         },
         ref,
         ...props,
@@ -2985,8 +1225,8 @@ function MenuSub({ item }) {
   const { highlightedItem } = useCommandContext("@optiaxiom/react/MenuSub");
   const { open } = useMenuSubContext("@optiaxiom/react/MenuSub");
   const contentRef = React.useRef(null);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Popover, { open: open && highlightedItem === item, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(MenuSubTrigger, { contentRef, item }),
+  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(MenuSubContent, { item, ref: contentRef })
   ] });
 }
@@ -3015,29 +1255,57 @@ const MenuListbox = React.forwardRef(
       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: [
-        shouldShowSeparator(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, {}),
-        shouldShowGroup(group) && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { children: group.name }),
-        /* @__PURE__ */ jsxRuntime.jsx(Comp, { item })
+        shouldShowSeparator(group) && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSeparator, {}),
+        shouldShowGroup(group) && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxLabel, { children: group.name }),
+        Comp === MenuSub ? /* @__PURE__ */ jsxRuntime.jsx(Comp, { item }) : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { item }) })
       ] });
     }) });
   }
 );
 MenuListbox.displayName = "@optiaxiom/react/MenuListbox";
 
-const MenuPopoverContent = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
+const MenuPopoverContent = React.forwardRef(({ style, ...props }, outerRef) => {
+  const { open } = useMenuContext("@optiaxiom/react/MenuPopoverContent");
+  const innerRef = React.useRef(null);
+  const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+  const [minHeight, setMinHeight] = React.useState(0);
+  React.useEffect(() => {
+    if (!open || props.side === "top") {
+      return;
+    }
+    requestAnimationFrame(() => {
+      if (innerRef.current?.dataset.side !== "top") {
+        return;
+      }
+      const rect = innerRef.current.getBoundingClientRect();
+      if (rect.height > minHeight) {
+        setMinHeight(rect.height);
+      }
+    });
+  }, [minHeight, open, props.side]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.PopoverContent,
+    {
+      maxH: "sm",
+      minW: "trigger",
+      ref,
+      style: { ...style, minHeight },
+      ...props
+    }
+  );
 });
 MenuPopoverContent.displayName = "@optiaxiom/react/MenuPopoverContent";
 
 const MenuContent = React.forwardRef(
   ({ children, ...props }, ref) => {
-    const { labelId } = Skeleton.useFieldContext("@optiaxiom/react/MenuContent");
+    const { labelId } = IconMagnifyingGlass.useFieldContext("@optiaxiom/react/MenuContent");
     const { inputVisible, placeholder, size } = useMenuContext(
       "@optiaxiom/react/MenuContent"
     );
     const { empty, loading } = useCommandContext(
       "@optiaxiom/react/MenuContent"
     );
+    const { setOpen } = useMenuSubContext("@optiaxiom/react/MenuContent");
     const Comp = size === "sm" ? MenuPopoverContent : MenuDialogContent;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
@@ -3048,12 +1316,13 @@ const MenuContent = React.forwardRef(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInput, { placeholder }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInput, { placeholder }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             MenuListbox,
             {
               empty,
               loading,
+              onScroll: () => setOpen(false),
               p: size === "lg" ? "6" : "0",
               children
             }
@@ -3068,10 +1337,10 @@ MenuContent.displayName = "@optiaxiom/react/MenuContent";
 const MenuTrigger = React.forwardRef(
   ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
     const { setOpen, size } = useMenuContext("@optiaxiom/react/MenuTrigger");
-    const Comp = size === "sm" ? Skeleton.PopoverTrigger : Skeleton.DialogTrigger;
+    const Comp = size === "sm" ? IconMagnifyingGlass.PopoverTrigger : IconMagnifyingGlass.DialogTrigger;
     const buttonRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-    const labelId = useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    const labelId = IconMagnifyingGlass.useFieldLabelTrigger(buttonRef, ariaLabelledBy);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
       {
@@ -3080,36 +1349,35 @@ const MenuTrigger = React.forwardRef(
         onKeyDown: (event) => {
           switch (event.key) {
             case "ArrowDown":
-            case "ArrowUp":
               setOpen(true);
           }
         },
         ref,
         ...props,
-        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.AngleMenuButton, { children })
       }
     );
   }
 );
 MenuTrigger.displayName = "@optiaxiom/react/MenuTrigger";
 
-var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1aecjbe'],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'},'jxzh5n'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Slot = reactSlot.createSlot("@optiaxiom/react/Pill");
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+      IconMagnifyingGlass.Box,
       {
         asChild: true,
         "data-disabled": disabled ? "" : void 0,
         ...pill({ size }, className),
         ...boxProps,
         children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { disabled, ref, ...restProps, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { truncate: true, children }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { truncate: true, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconX, {}) })
         ] })
       }
     );
@@ -3119,7 +1387,7 @@ Pill.displayName = "@optiaxiom/react/Pill";
 
 const PillGroup = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "12", ref, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "12", ref, ...props, children });
   }
 );
 PillGroup.displayName = "@optiaxiom/react/PillGroup";
@@ -3138,16 +1406,17 @@ const DEFAULT_HOTKEY = "mod+K";
 const SpotlightTrigger = React.forwardRef(({ children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
   const { open, setOpen } = useMenuContext("@optiaxiom/react/SpotlightTrigger");
   useHotkeys([[hotkey, () => setOpen(!open)]]);
-  return /* @__PURE__ */ jsxRuntime.jsx(MenuTrigger, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}), children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children }) }) });
+  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";
 
+exports.Calendar = IconMagnifyingGlass.Calendar;
+exports.DataTableHeaderCell = IconMagnifyingGlass.DataTableHeaderCell;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbLink = BreadcrumbLink;
 exports.BreadcrumbPage = BreadcrumbPage;
-exports.Calendar = Calendar;
 exports.Card = Card;
 exports.CardAction = CardAction;
 exports.CardCheckbox = CardCheckbox;
@@ -3157,41 +1426,18 @@ exports.CardImage = CardImage;
 exports.CardLink = CardLink;
 exports.CardOverflow = CardOverflow;
 exports.CardTitle = CardTitle;
-exports.Clock = Clock;
 exports.Command = Command;
 exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
 exports.CommandListbox = CommandListbox;
-exports.DataTable = DataTable;
-exports.DataTableBody = DataTableBody;
-exports.DataTableFooter = DataTableFooter;
-exports.DataTableHeaderCell = DataTableHeaderCell;
-exports.DateInput = DateInput;
-exports.DatePicker = DatePicker;
-exports.DatePickerContent = DatePickerContent;
-exports.DatePickerTrigger = DatePickerTrigger;
-exports.DateRangePicker = DateRangePicker;
-exports.DateRangePickerContent = DateRangePickerContent;
-exports.DateRangePickerTrigger = DateRangePickerTrigger;
 exports.Highlight = Highlight;
 exports.InlineInput = InlineInput;
-exports.LabelMenuButton = LabelMenuButton;
 exports.Layout = Layout;
 exports.Menu = Menu;
 exports.MenuContent = MenuContent;
 exports.MenuTrigger = MenuTrigger;
 exports.Pill = Pill;
 exports.PillGroup = PillGroup;
-exports.Select = Select;
-exports.SelectContent = SelectContent;
-exports.SelectTrigger = SelectTrigger;
 exports.Spotlight = Spotlight;
 exports.SpotlightContent = SpotlightContent;
 exports.SpotlightTrigger = SpotlightTrigger;
-exports.Table = Table;
-exports.TableAction = TableAction;
-exports.TableBody = TableBody;
-exports.TableCell = TableCell;
-exports.TableHeader = TableHeader;
-exports.TableHeaderCell = TableHeaderCell;
-exports.TableRow = TableRow;