@optiaxiom/react 0.12.3 → 0.13.1

package/dist/cjs/unstable.js

@@ -2,83 +2,88 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var reactPopper = require('@radix-ui/react-popper');
-var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var React = require('react');
-var reactContext = require('@radix-ui/react-context');
-var downshift = require('downshift');
-var IconMagnifyingGlass = require('./IconMagnifyingGlass-DvYcw5N4.js');
-var reactPortal = require('@radix-ui/react-portal');
-var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
-require('./assets/src/layers/layers.css.ts.vanilla-Cd9ocVF0.css');
-require('./assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-sZjRVm5-.css');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CyJRzNBY.css');
-var reactComposeRefs = require('@radix-ui/react-compose-refs');
-var reactVirtual = require('@tanstack/react-virtual');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-D8UwqbFF.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-DSmc16lZ.css');
+var Skeleton = require('./Skeleton-Co-JuL-k.js');
+require('./assets/src/layers/layers.css.ts.vanilla-BapI6-Q5.css');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DZOO7tzN.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-D02_J3v7.css');
+var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-CS7DmgdI.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BrqQQJav.css');
-require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-BMhBOLOq.css');
-require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-PaBKoHvJ.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-CzIjzMwj.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-C5I9UZFN.css');
+require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-BvwOpHO4.css');
+require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-D93MlhUu.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/card-checkbox/CardCheckbox.css.ts.vanilla-B7ovfSlo.css');
-require('./assets/src/link/Link.css.ts.vanilla-mAttatgp.css');
-require('./assets/src/card/Card.css.ts.vanilla-BIDodemv.css');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-DjvVKLyu.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-Cjn_Id7x.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BHTi0xxJ.css');
+var reactContext = require('@radix-ui/react-context');
+require('./assets/src/cover/Cover.css.ts.vanilla-DVoaPd3v.css');
+require('./assets/src/link/Link.css.ts.vanilla-Dszs5ipi.css');
+require('./assets/src/card/Card.css.ts.vanilla-l6EO5dST.css');
+require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-BTAMKwHu.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-H9ltG-H8.css');
+require('./assets/src/card-actions/CardActions.css.ts.vanilla-Cg4pe6pL.css');
+var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+var clsx = require('clsx');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-CxQbaQ_I.css');
 var reactSlot = require('@radix-ui/react-slot');
 var RadixDialog = require('@radix-ui/react-dialog');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-Ba5NC_AS.css');
+var downshift = require('downshift');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+var reactVirtual = require('@tanstack/react-virtual');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-Tj2whqM4.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-BKGyXxhT.css');
-require('./assets/src/table/Table.css.ts.vanilla-BFGj4eJp.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-D-9RxT0N.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-BKuGEq5b.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-B8Zf2yag.css');
-require('./assets/src/data-table/DataTable.css.ts.vanilla-BrXUhcOh.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-CRzOHqbX.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-CjJ0Y3Bx.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-D1aLEcuG.css');
-require('./assets/src/select-content/SelectContent.css.ts.vanilla-DkK-DWvO.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-B_pBGhuy.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-DLfRb9S_.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-B0bjehof.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-DC_Xji3I.css');
-require('./assets/src/sub-nav/SubNav.css.ts.vanilla-B3lfRr9O.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-CF2yV8a7.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-CSiw9TKj.css');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-Bk7RvW5I.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-D8iEaYLp.css');
+require('./assets/src/table/Table.css.ts.vanilla-CFKKVer7.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-Iaov5YA2.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-C4Vu9cf4.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-Cz9UR9sE.css');
+require('./assets/src/data-table/DataTable.css.ts.vanilla-DIqBRd91.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-BOZIK-Va.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-z5guNDxs.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-C1IFv3nj.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-BrJEIvjr.css');
+var reactPopper = require('@radix-ui/react-popper');
+var reactPortal = require('@radix-ui/react-portal');
+require('./assets/src/select-content/SelectContent.css.ts.vanilla-Bcvvt7Ox.css');
+require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-0QEVGwcW.css');
+require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-Vx9bm9mL.css');
+require('./assets/src/badge/Badge.css.ts.vanilla-CV9aZJUz.css');
+require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-HwDcaezs.css');
+require('./assets/src/sub-nav/SubNav.css.ts.vanilla-3ySZmf22.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-DUUh17yA.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-Ddt9KOuM.css');
 require('@radix-ui/react-collapsible');
-require('./assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-BXvVttwC.css');
-require('./assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Uzeu57xv.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-BWOKluYb.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-OvUXfGMV.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-Hd13ZaHc.css');
-require('clsx');
+require('./assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-Csj_lgJn.css');
+require('./assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CPpShJkA.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-BNIxitNQ.css');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-Bs_UqBe4.css');
-require('./assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Uzeu57xv.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-B4uW-TL9.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-BYxqoONu.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-C-qH_0-2.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-BMrlqp3V.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BHTi0xxJ.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-CkFL5aFg.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BHTi0xxJ.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-R8IiI6oq.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-xbSGq0v4.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-DyI14986.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-BzU2SdwW.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/text/Text.css.ts.vanilla-6H3aFCbx.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-Bb-clgKZ.css');
+require('./assets/src/text/Text.css.ts.vanilla-DCIR_mds.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-D4aod7vT.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-BH2uKGfQ.css');
+require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-z6eYKKz3.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-BfU6I3wu.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BypP4Boz.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-5VYXbwod.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-DDWQ8L19.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-C2HIp2sT.css');
-require('./assets/src/box/Box.css.ts.vanilla-Cfl8r0-i.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-CLWcNZZI.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-CLkp0G0_.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-BMpmw6Aw.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-BEDqm8-d.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-74J9XwXD.css');
+require('./assets/src/box/Box.css.ts.vanilla-CpMKsyP-.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-j87g8hoz.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -127,7 +132,7 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
       setMatches(queryRef.current.matches);
       return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
     }
-    return undefined;
+    return void 0;
   }, [query]);
   return matches;
 }
@@ -161,583 +166,95 @@ function isExactHotkey(hotkey, event, usePhysicalKeys) {
     }
   } else {
     if (ctrl !== ctrlKey) {
-      return false;
-    }
-    if (meta !== metaKey) {
-      return false;
-    }
-  }
-  if (shift !== shiftKey) {
-    return false;
-  }
-  if (key && (!usePhysicalKeys && pressedKey.toLowerCase() === key.toLowerCase() || pressedCode.replace("Key", "").toLowerCase() === key.toLowerCase())) {
-    return true;
-  }
-  return false;
-}
-function getHotkeyMatcher(hotkey, usePhysicalKeys) {
-  return (event) => isExactHotkey(parseHotkey(hotkey), event, usePhysicalKeys);
-}
-
-function shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable = false) {
-  if (event.target instanceof HTMLElement) {
-    if (triggerOnContentEditable) {
-      return !tagsToIgnore.includes(event.target.tagName);
-    }
-    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
-  }
-  return true;
-}
-function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], triggerOnContentEditable = false) {
-  React.useEffect(() => {
-    const keydownListener = (event) => {
-      hotkeys.forEach(
-        ([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {
-          if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
-            if (options.preventDefault) {
-              event.preventDefault();
-            }
-            handler(event);
-          }
-        }
-      );
-    };
-    document.documentElement.addEventListener("keydown", keydownListener);
-    return () => document.documentElement.removeEventListener("keydown", keydownListener);
-  }, [hotkeys]);
-}
-
-const [AutocompleteContextProvider, useAutocompleteContext] = reactContext.createContext("Autocomplete");
-
-const [CommandContextProvider, useCommandContext] = reactContext.createContext("Command");
-
-function usePortalPatch(open, initialHighlightedIndex = -1) {
-  const [placed, setPlaced] = React.useState(false);
-  React.useEffect(() => {
-    return () => setPlaced(false);
-  }, [open]);
-  const [highlightedIndex, setHighlightedIndex] = React.useState(
-    initialHighlightedIndex
-  );
-  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,
-    setPlaced
-  ];
-}
-
-const isHoverSupported = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
-function Command({
-  children,
-  inputValue: inputValueProp,
-  isItemDisabled = () => false,
-  items,
-  itemToKey = (value) => value,
-  itemToString = (value) => value ? String(value) : "",
-  itemToSubItems,
-  onInputValueChange,
-  onItemSelect,
-  onOpenChange,
-  open,
-  selectedItem,
-  value: valueProp,
-  ...props
-}) {
-  const value = React.useMemo(
-    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
-    [valueProp]
-  );
-  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
-    defaultProp: "",
-    onChange: onInputValueChange,
-    prop: inputValueProp
-  });
-  const [lastInteractionSource, setLastInteractionSource] = React.useState("pointer");
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    open,
-    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
-  );
-  const [highlightedSubIndex, setHighlightedSubIndex] = React.useState(-1);
-  const downshift$1 = downshift.useCombobox({
-    ...props,
-    highlightedIndex: highlightedIndex === -1 && isHoverSupported ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
-    inputValue,
-    isItemDisabled,
-    isOpen: placed,
-    items,
-    itemToKey,
-    itemToString,
-    onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave) {
-        setHighlightedIndex(highlightedIndex2);
-      }
-      if (type === downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp || type === downshift.useCombobox.stateChangeTypes.InputKeyDownPageDown || type === downshift.useCombobox.stateChangeTypes.InputKeyDownPageUp) {
-        setLastInteractionSource("keyboard");
-      } else {
-        setLastInteractionSource("pointer");
-      }
-      if (highlightedIndex2 !== -1 && itemToSubItems?.(items[highlightedIndex2])?.length) {
-        setHighlightedSubIndex(0);
-      } else {
-        setHighlightedSubIndex(-1);
-      }
-    },
-    onIsOpenChange({ isOpen, type }) {
-      onOpenChange?.(isOpen);
-      if (isOpen) {
-        if (type === downshift.useCombobox.stateChangeTypes.InputClick || type === downshift.useCombobox.stateChangeTypes.ToggleButtonClick) {
-          setLastInteractionSource("pointer");
-        } else {
-          setLastInteractionSource("keyboard");
-        }
-      }
-    },
-    onSelectedItemChange({ selectedItem: selectedItem2, type }) {
-      if (type !== downshift.useCombobox.stateChangeTypes.InputBlur) {
-        onItemSelect?.(selectedItem2);
-      }
-    },
-    selectedItem
-  });
-  downshift$1.getMenuProps({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CommandContextProvider,
-    {
-      downshift: downshift$1,
-      highlightedItem: items[downshift$1.highlightedIndex],
-      highlightedSubIndex,
-      isItemDisabled,
-      items,
-      itemToSubItems,
-      lastInteractionSource,
-      setHighlightedIndex: (index, source) => {
-        setHighlightedIndex(index);
-        setLastInteractionSource(source);
-      },
-      setHighlightedSubIndex: (index, source) => {
-        setHighlightedSubIndex(index);
-        setLastInteractionSource(source);
-      },
-      setInputValue,
-      setPlaced,
-      value,
-      children
-    }
-  );
-}
-Command.displayName = "@optiaxiom/react/Command";
-
-function useEffectEvent(callback) {
-  const callbackRef = React.useRef(callback);
-  React.useEffect(() => {
-    callbackRef.current = callback;
-  });
-  return React.useCallback((...args) => {
-    return callbackRef.current(...args);
-  }, []);
-}
-
-function Autocomplete({
-  children,
-  defaultOpen = false,
-  defaultValue,
-  disabled,
-  isItemDisabled,
-  items,
-  itemToKey,
-  itemToString = (value2) => value2 ? String(value2) : "",
-  onInputValueChange,
-  onOpenChange,
-  onValueChange,
-  open,
-  value
-}) {
-  const { inputId } = IconMagnifyingGlass.useFieldContext({});
-  const [selectedItem, setSelectedItem] = reactUseControllableState.useControllableState({
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: value
-  });
-  const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: open
-  });
-  const [inputValue, setInputValue] = React.useState(
-    itemToString(selectedItem ?? null)
-  );
-  const itemToStringStable = useEffectEvent(itemToString);
-  React.useEffect(() => {
-    if (!isOpen) {
-      setInputValue(itemToStringStable(selectedItem ?? null));
-    }
-  }, [isOpen, itemToStringStable, selectedItem]);
-  return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    Command,
-    {
-      inputId,
-      inputValue,
-      isItemDisabled,
-      items,
-      itemToKey,
-      itemToString,
-      onInputValueChange: (value2) => {
-        setInputValue(value2);
-        onInputValueChange?.(value2);
-      },
-      onItemSelect: setSelectedItem,
-      onOpenChange: (open2) => {
-        setIsOpen(open2);
-        if (!open2) {
-          onInputValueChange?.("");
-        }
-      },
-      open: isOpen,
-      selectedItem: selectedItem ?? null,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        AutocompleteContextProvider,
-        {
-          disabled,
-          isOpen,
-          items,
-          selectedItem,
-          setSelectedItem,
-          children
-        }
-      )
-    }
-  ) });
-}
-Autocomplete.displayName = "@optiaxiom/react/Autocomplete";
-
-const CommandListbox = React.forwardRef(
-  ({ children, size, ...props }, ref) => {
-    const { downshift } = useCommandContext("CommandList");
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Listbox, { size, ...downshift.getMenuProps({ ref, ...props }), children });
-  }
-);
-CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
-
-var content$2 = IconMagnifyingGlass.recipeRuntime({base:[{p:'4'},'rm1ywd']});
-
-const AutocompleteContent = React.forwardRef(
-  ({
-    align = "center",
-    children,
-    className,
-    loading,
-    side = "bottom",
-    ...props
-  }, ref) => {
-    const { isOpen, items } = useAutocompleteContext("AutocompleteContent");
-    const { setPlaced } = useCommandContext("AutocompleteContent");
-    return isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { role: "status", children: loading ? "Loading" : `${items.length} option${items.length === 1 ? "" : "s"} available` }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        IconMagnifyingGlass.MenuListbox,
-        {
-          asChild: true,
-          maxH: "sm",
-          minW: "trigger",
-          provider: "popper",
-          ...props,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            CommandListbox,
-            {
-              asChild: true,
-              ref,
-              ...content$2({}, className),
-              ...props,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactPopper.PopperContent,
-                {
-                  align,
-                  onPlaced: () => setPlaced(true),
-                  side,
-                  sideOffset: 5,
-                  children: loading ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Spinner, {}) }) : children
-                }
-              )
-            }
-          )
-        }
-      ) }) })
-    ] });
-  }
-);
-AutocompleteContent.displayName = "@optiaxiom/react/AutocompleteContent";
-
-const AutocompleteEmpty = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Box,
-    {
-      alignItems: "center",
-      color: "fg.disabled",
-      display: "flex",
-      flexDirection: "column",
-      fontSize: "md",
-      p: "16",
-      ref,
-      ...props,
-      children: children || "No options"
-    }
-  );
-});
-AutocompleteEmpty.displayName = "@optiaxiom/react/AutocompleteEmpty";
-
-var item$3 = IconMagnifyingGlass.recipeRuntime({base:'d4shc3'});
-
-const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Box,
-    {
-      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : undefined,
-      ref,
-      ...item$3({}, className),
-      ...props,
-      children
-    }
-  );
-});
-CommandFocusableItem.displayName = "@optiaxiom/react/CommandFocusableItem";
-
-const CommandItem = React.forwardRef(
-  ({ children, item, selected, size, ...props }, ref) => {
-    const { downshift, highlightedItem, value } = useCommandContext("CommandItem");
-    const itemProps = downshift.getItemProps({
-      "aria-selected": selected ?? value?.has(item),
-      item,
-      ...props
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      CommandFocusableItem,
-      {
-        "data-disabled": itemProps["aria-disabled"] ? "" : undefined,
-        "data-highlighted": highlightedItem === item ? "" : undefined,
-        ref,
-        size,
-        tabIndex: -1,
-        ...itemProps,
-        children
-      }
-    );
-  }
-);
-CommandItem.displayName = "@optiaxiom/react/CommandItem";
-
-const AutocompleteItem = React.forwardRef((props, ref) => {
-  const { selectedItem } = useAutocompleteContext("AutocompleteItem");
-  return /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, selected: props.item === selectedItem, ...props });
-});
-AutocompleteItem.displayName = "@optiaxiom/react/AutocompleteItem";
-
-const AutocompleteRadioItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(AutocompleteItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxRadioItem, { children }) });
-});
-AutocompleteRadioItem.displayName = "@optiaxiom/react/AutocompleteRadioItem";
-
-const CommandInput = React.forwardRef(
-  ({ onKeyDown, size, ...props }, ref) => {
-    const {
-      downshift,
-      highlightedItem,
-      highlightedSubIndex,
-      itemToSubItems,
-      setHighlightedSubIndex,
-      setInputValue
-    } = useCommandContext("CommandInput");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Input,
-      {
-        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconMagnifyingGlass, {}),
-        size,
-        ...downshift.getInputProps({
-          ...props,
-          onChange: (event) => {
-            setInputValue("value" in event.target ? event.target.value : "");
-          },
-          onKeyDown: (event) => {
-            onKeyDown?.(event);
-            if (event.defaultPrevented) {
-              return;
-            }
-            if (highlightedItem && highlightedSubIndex !== -1 && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Enter")) {
-              const subItems = itemToSubItems?.(highlightedItem) ?? [];
-              if (subItems.length === 0) {
-                return;
-              }
-              event.preventDefault();
-              Object.assign(event.nativeEvent, {
-                preventDownshiftDefault: true
-              });
-              if (event.key === "ArrowRight") {
-                setHighlightedSubIndex(
-                  highlightedSubIndex === subItems.length - 1 ? 0 : highlightedSubIndex + 1,
-                  "keyboard"
-                );
-              } else if (event.key === "ArrowLeft") {
-                setHighlightedSubIndex(
-                  highlightedSubIndex === 0 ? subItems.length - 1 : highlightedSubIndex - 1,
-                  "keyboard"
-                );
-              } else if (event.key === "Enter") {
-                downshift.selectItem(subItems[highlightedSubIndex]);
-              }
-            }
-          },
-          ref
-        })
-      }
-    );
-  }
-);
-CommandInput.displayName = "@optiaxiom/react/CommandInput";
-
-const CommandToggleButton = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
-  const { downshift } = useCommandContext("CommandToggleButton");
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ref, ...downshift.getToggleButtonProps(restProps), children }) });
-});
-CommandToggleButton.displayName = "@optiaxiom/react/CommandToggleButton";
-
-const AutocompleteTrigger = React.forwardRef((props, ref) => {
-  const { disabled, selectedItem, setSelectedItem } = useAutocompleteContext("AutocompleteInput");
-  return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.PopperAnchor, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    CommandInput,
-    {
-      addonAfter: /* @__PURE__ */ jsxRuntime.jsxs(
-        IconMagnifyingGlass.Flex,
-        {
-          alignItems: "stretch",
-          alignSelf: "stretch",
-          flexDirection: "row",
-          gap: "0",
-          children: [
-            selectedItem && /* @__PURE__ */ jsxRuntime.jsx(
-              IconMagnifyingGlass.Flex,
-              {
-                cursor: disabled ? "default" : "pointer",
-                onClick: () => setSelectedItem(null),
-                w: "md",
-                children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconX, { "aria-hidden": true, focusable: false }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Separator, { my: "8", orientation: "vertical" }),
-            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, w: "md", children: /* @__PURE__ */ jsxRuntime.jsx(CommandToggleButton, { "aria-label": "Toggle", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleDown, { "aria-hidden": true, focusable: false }) }) }) })
-          ]
-        }
-      ),
-      addonBefore: null,
-      disabled,
-      pr: "0",
-      ref,
-      ...props
-    }
-  ) });
-});
-AutocompleteTrigger.displayName = "@optiaxiom/react/AutocompleteTrigger";
-
-const AutocompleteVirtualized = React.forwardRef(({ children, items, ...props }, outerRef) => {
-  const innerRef = React.useRef(null);
-  const ref = reactComposeRefs.useComposedRefs(outerRef, innerRef);
-  const [enabled, setEnabled] = React.useState(false);
-  React.useEffect(() => {
-    requestAnimationFrame(() => setEnabled(true));
-  }, []);
-  const rowVirtualizer = reactVirtual.useVirtualizer({
-    count: items.length,
-    enabled,
-    estimateSize: () => 40,
-    getScrollElement: () => innerRef.current
-  });
-  const { downshift } = useCommandContext("AutocompleteVirtualized");
-  React.useEffect(() => {
-    rowVirtualizer.scrollToIndex(downshift.highlightedIndex);
-  }, [downshift.highlightedIndex, enabled, rowVirtualizer]);
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Box,
-    {
-      display: "flex",
-      flex: "none",
-      flexDirection: "column",
-      gap: "2",
-      style: {
-        height: `${rowVirtualizer.getTotalSize()}px`,
-        position: "relative"
-      },
-      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsx(
-        IconMagnifyingGlass.Box,
-        {
-          style: {
-            height: virtualItem.size,
-            left: 0,
-            position: "absolute",
-            top: 0,
-            transform: `translateY(${virtualItem.start}px)`
-          },
-          w: "full",
-          children: children(items[virtualItem.index])
-        },
-        virtualItem.key
-      ))
+      return false;
     }
-  ) });
-});
-AutocompleteVirtualized.displayName = "@optiaxiom/react/AutocompleteVirtualized";
+    if (meta !== metaKey) {
+      return false;
+    }
+  }
+  if (shift !== shiftKey) {
+    return false;
+  }
+  if (key && (!usePhysicalKeys && pressedKey.toLowerCase() === key.toLowerCase() || pressedCode.replace("Key", "").toLowerCase() === key.toLowerCase())) {
+    return true;
+  }
+  return false;
+}
+function getHotkeyMatcher(hotkey, usePhysicalKeys) {
+  return (event) => isExactHotkey(parseHotkey(hotkey), event, usePhysicalKeys);
+}
+
+function shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable = false) {
+  if (event.target instanceof HTMLElement) {
+    if (triggerOnContentEditable) {
+      return !tagsToIgnore.includes(event.target.tagName);
+    }
+    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
+  }
+  return true;
+}
+function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], triggerOnContentEditable = false) {
+  React.useEffect(() => {
+    const keydownListener = (event) => {
+      hotkeys.forEach(
+        ([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {
+          if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
+            if (options.preventDefault) {
+              event.preventDefault();
+            }
+            handler(event);
+          }
+        }
+      );
+    };
+    document.documentElement.addEventListener("keydown", keydownListener);
+    return () => document.documentElement.removeEventListener("keydown", keydownListener);
+  }, [hotkeys]);
+}
 
 const Breadcrumb = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { alignItems: "center", asChild: true, display: "flex", gap: "8", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { children }) }) }) });
+    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 }) }) }) });
   }
 );
 Breadcrumb.displayName = "@optiaxiom/react/Breadcrumb";
 
 function BreadcrumbEllipsis({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Box,
+    Skeleton.Box,
     {
       "aria-hidden": true,
       color: "fg.tertiary",
       display: "grid",
       placeItems: "center",
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconEllipsis, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconEllipsis, {})
     }
   );
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$2 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'nzwsgc']});
+var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'b94wi1']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...item$2({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...item$3({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, ...restProps, children }) });
   }
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'wfdij0']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'btpymu']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { ...link({}, className), ref, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
 });
 BreadcrumbLink.displayName = "@optiaxiom/react/BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef(
   ({ ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { "aria-current": "page", asChild: true, color: "fg.default", fontSize: "md", children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { "aria-current": "page", asChild: true, color: "fg.default", fontSize: "md", children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props }) });
   }
 );
 BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";
@@ -746,16 +263,16 @@ function CalendarChevron({
   orientation,
   ...props
 }) {
-  return orientation === "left" ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleLeft, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, { ...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(IconMagnifyingGlass.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Day, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Day, { ...props, children }) });
 }
 CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
 
-var button$3 = IconMagnifyingGlass.recipeRuntime({base:{mt:'8'},variants:{outside:{false:{},true:'w9k0kh'}}});
+var button$3 = Skeleton.recipeRuntime({base:{mt:'8'},variants:{outside:{false:{},true:'btk1e5'}}});
 
 function CalendarDayButton({
   children,
@@ -772,10 +289,10 @@ function CalendarDayButton({
     }
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Button,
+    Skeleton.Button,
     {
       appearance: modifiers.selected ? "primary" : "subtle",
-      "data-state": modifiers.today ? "active" : undefined,
+      "data-state": modifiers.today ? "active" : void 0,
       ref,
       square: true,
       ...button$3({ outside: modifiers.outside }, className),
@@ -791,7 +308,7 @@ function CalendarMonthCaption({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Box,
+    Skeleton.Box,
     {
       alignItems: "center",
       asChild: true,
@@ -811,18 +328,18 @@ function CalendarMonthGrid({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.MonthGrid, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.MonthGrid, { ...props, children }) });
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = IconMagnifyingGlass.recipeRuntime({base:'_1x9xpt0'});
+var months = Skeleton.recipeRuntime({base:'_120afus'});
 
 function CalendarMonths({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
 }
 CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
 
-var button$2 = IconMagnifyingGlass.recipeRuntime({base:'_63q7tb'});
+var button$2 = Skeleton.recipeRuntime({base:'_1rrgh1u'});
 
 function CalendarNextMonthButton({
   children,
@@ -831,7 +348,7 @@ function CalendarNextMonthButton({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Button,
+    Skeleton.Button,
     {
       appearance: "subtle",
       asChild: true,
@@ -844,7 +361,7 @@ function CalendarNextMonthButton({
 }
 CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
 
-var button$1 = IconMagnifyingGlass.recipeRuntime({base:'_1xhl0fi'});
+var button$1 = Skeleton.recipeRuntime({base:'n1hm1r'});
 
 function CalendarPreviousMonthButton({
   children,
@@ -853,7 +370,7 @@ function CalendarPreviousMonthButton({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Button,
+    Skeleton.Button,
     {
       appearance: "subtle",
       asChild: true,
@@ -867,7 +384,7 @@ function CalendarPreviousMonthButton({
 CalendarPreviousMonthButton.displayName = "@optiaxiom/react/CalendarPreviousMonthButton";
 
 function CalendarWeekday({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", fontWeight: "400", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Weekday, { ...props, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", fontWeight: "400", children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Weekday, { ...props, children }) });
 }
 CalendarWeekday.displayName = "@optiaxiom/react/CalendarWeekday";
 
@@ -898,7 +415,7 @@ const Calendar = React.forwardRef(
       prop: valueProp
     });
     return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Box,
+      Skeleton.Box,
       {
         bg: "bg.default",
         color: "fg.default",
@@ -912,7 +429,6 @@ const Calendar = React.forwardRef(
             components,
             defaultMonth: value,
             endMonth: max,
-            fixedWeeks: true,
             mode: "single",
             onSelect: setValue,
             required: true,
@@ -928,9 +444,18 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
+var root = Skeleton.recipeRuntime({base:'chwvu9'});
+
+const ActionsRoot = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...root({}, className), ...props, children });
+  }
+);
+ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
+
 const [CardContextProvider, useCardContext] = reactContext.createContext("Card");
 
-var card = IconMagnifyingGlass.recipeRuntime({base:['_1jejsad',{border:'1',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1wp44ly']});
+var card = Skeleton.recipeRuntime({base:['_1igh8l5',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_1auijqv']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -946,46 +471,71 @@ const Card = React.forwardRef(
         descriptionId,
         labelId,
         orientation,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          IconMagnifyingGlass.Flex,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Skeleton.Flex,
           {
-            "aria-describedby": descriptionId,
-            "aria-labelledby": labelId,
             flexDirection: mapOrientationToFlexDirection[orientation],
             ref,
             ...card({}, className),
             ...props,
             children
           }
-        )
+        ) })
       }
     );
   }
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var control = IconMagnifyingGlass.recipeRuntime({base:['_1i3mg3x']});
-var root = IconMagnifyingGlass.recipeRuntime({base:['an3ios',{rounded:'inherit',transition:'opacity'},'oknhts']});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_1iauakn']});
+
+const ActionsContent = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...content$2({}, className), ...props, children });
+  }
+);
+ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
+
+var actions = Skeleton.recipeRuntime({base:['wybrpu']});
+
+const CardActions = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { ref, ...actions({}, className), ...props, children });
+  }
+);
+CardActions.displayName = "@optiaxiom/react/CardActions";
 
 const CardCheckbox = React.forwardRef(
-  ({ children, className, description, indeterminate, ...props }, ref) => {
+  ({ children, indeterminate, onChange, ...props }, ref) => {
+    const labelPrefixId = reactId.useId();
+    const { labelId } = useCardContext("CardCheckbox");
+    const [checked, setChecked] = reactUseControllableState.useControllableState({
+      defaultProp: props.defaultChecked,
+      prop: props.checked
+    });
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      IconMagnifyingGlass.CheckboxRoot,
+      Skeleton.CheckboxRoot,
       {
-        description: !!description,
+        "aria-labelledby": clsx(labelPrefixId, labelId),
+        description: false,
+        onChange: (event) => {
+          onChange?.(event);
+          setChecked(event.target.checked);
+        },
         ref,
-        ...root({}, className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            IconMagnifyingGlass.CheckboxControl,
+            Skeleton.CheckboxControl,
             {
               indeterminate,
-              shift: Boolean(children),
-              ...control({}, className)
+              shift: Boolean(children)
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.CheckboxContent, { description, children })
+          /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { id: labelPrefixId, children: [
+            "Check to ",
+            checked ? "unselect" : "select"
+          ] }) })
         ]
       }
     );
@@ -995,7 +545,7 @@ CardCheckbox.displayName = "@optiaxiom/react/CardCheckbox";
 
 const CardContent = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { gap: "4", ref, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { gap: "4", ref, ...props, children });
   }
 );
 CardContent.displayName = "@optiaxiom/react/CardContent";
@@ -1003,7 +553,7 @@ CardContent.displayName = "@optiaxiom/react/CardContent";
 const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
   const { descriptionId } = useCardContext("CardDescription");
   return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.Text,
+    Skeleton.Text,
     {
       color: "fg.tertiary",
       fontSize: "sm",
@@ -1016,13 +566,13 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = IconMagnifyingGlass.recipeRuntime({base:[{h:'full',rounded:'inherit'},'ewcga8'],variants:{orientation:{horizontal:[{w:'auto'},'t6epaj'],vertical:[{w:'full'},'s8fhr5']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'t2nwh8'],variants:{orientation:{horizontal:[{w:'auto'},'_17itnb5'],vertical:[{w:'full'},'_19k2npo']}}});
 
 const CardImage = React.forwardRef(
-  ({ alt, asChild, children, className, src, ...props }, ref) => {
+  ({ alt = "", asChild, children, className, src, ...props }, ref) => {
     const { orientation } = useCardContext("CardImage");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Box,
+      Skeleton.Box,
       {
         asChild: true,
         ref,
@@ -1035,13 +585,20 @@ const CardImage = React.forwardRef(
 );
 CardImage.displayName = "@optiaxiom/react/CardImage";
 
-var cardOverflow = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'stretch'},'_1xgks22'],variants:{orientation:{horizontal:['_16f40mo'],vertical:['_3g0cj5']}}});
+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:['_1x40qpl',{alignSelf:'stretch'},'_1vv4ouq'],variants:{orientation:{horizontal:['_9owtpu'],vertical:['_1lhpgma']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { orientation } = useCardContext("CardOverflow");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Box,
+      Skeleton.Box,
       {
         ref,
         ...cardOverflow({ orientation }, className),
@@ -1058,12 +615,12 @@ const CardTitle = React.forwardRef(
     const Comp = asChild ? reactSlot.Slot : "h2";
     const { labelId } = useCardContext("CardTitle");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Heading,
+      Skeleton.Heading,
       {
         asChild: true,
+        fontSize: "md",
         fontWeight: "500",
         id: labelId,
-        level: "6",
         ref,
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children })
@@ -1076,7 +633,7 @@ CardTitle.displayName = "@optiaxiom/react/CardTitle";
 const [ComboboxContextProvider, useComboboxContext] = reactContext.createContext("Combobox");
 
 const ComboboxDialogContent = React.forwardRef(({ "aria-label": ariaLabel, children, minW: _minW, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.DialogContent, { ref, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.DialogContent, { ref, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { children: ariaLabel }) }),
     children
   ] });
@@ -1084,21 +641,31 @@ const ComboboxDialogContent = React.forwardRef(({ "aria-label": ariaLabel, child
 ComboboxDialogContent.displayName = "@optiaxiom/react/ComboboxDialogContent";
 
 function ComboboxPopover(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Popover, { modal: true, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Popover, { modal: true, ...props });
 }
 ComboboxPopover.displayName = "@optiaxiom/react/ComboboxPopover";
 
 const ComboboxPopoverContent = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
 });
 ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
 
+function useEffectEvent(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return React.useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
 const list = ["md", "sm"];
 const useResponsiveMatches = (config) => {
   const matches = {
     base: true,
-    sm: useMediaQuery(IconMagnifyingGlass.conditions.conditions.sm["@media"]),
-    md: useMediaQuery(IconMagnifyingGlass.conditions.conditions.md["@media"])
+    sm: useMediaQuery(Skeleton.conditions.conditions.sm["@media"]),
+    md: useMediaQuery(Skeleton.conditions.conditions.md["@media"])
   };
   for (const name of list) {
     if (config[name] && matches[name]) {
@@ -1111,6 +678,7 @@ const useResponsiveMatches = (config) => {
 function Combobox({
   children,
   defaultOpen = false,
+  inputValue,
   isItemDisabled = () => false,
   items,
   itemToKey = (value) => value,
@@ -1124,61 +692,238 @@ function Combobox({
   const components = useResponsiveMatches({
     base: {
       Content: ComboboxDialogContent,
-      Root: IconMagnifyingGlass.Dialog,
-      Trigger: IconMagnifyingGlass.DialogTrigger
+      Root: Skeleton.Dialog,
+      Trigger: Skeleton.DialogTrigger
+    },
+    sm: {
+      Content: ComboboxPopoverContent,
+      Root: ComboboxPopover,
+      Trigger: Skeleton.PopoverTrigger
+    }
+  });
+  const value = React.useMemo(
+    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
+    [valueProp]
+  );
+  const [open, setOpen] = reactUseControllableState.useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const onInputValueChangeStable = useEffectEvent(
+    onInputValueChange ?? (() => {
+    })
+  );
+  React.useEffect(() => {
+    if (open) {
+      onInputValueChangeStable("");
+    }
+  }, [open, onInputValueChangeStable]);
+  return /* @__PURE__ */ jsxRuntime.jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ComboboxContextProvider,
+    {
+      components,
+      inputValue,
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      onInputValueChange,
+      onItemSelect,
+      open,
+      setOpen,
+      value,
+      children
+    }
+  ) });
+}
+Combobox.displayName = "@optiaxiom/react/Combobox";
+
+const [CommandContextProvider, useCommandContext] = reactContext.createContext("Command");
+
+var item$2 = Skeleton.recipeRuntime({base:'_16qybo6'});
+
+const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
+  const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton.Box,
+    {
+      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : void 0,
+      ref,
+      ...item$2({}, className),
+      ...props,
+      children
+    }
+  );
+});
+CommandFocusableItem.displayName = "@optiaxiom/react/CommandFocusableItem";
+
+const CommandItem = React.forwardRef(
+  ({ children, item, selected, size, ...props }, ref) => {
+    const { downshift, highlightedItem, value } = useCommandContext("CommandItem");
+    const itemProps = downshift.getItemProps({
+      "aria-selected": selected ?? value?.has(item),
+      item,
+      ref,
+      ...props
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CommandFocusableItem,
+      {
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        size,
+        tabIndex: -1,
+        ...itemProps,
+        children
+      }
+    );
+  }
+);
+CommandItem.displayName = "@optiaxiom/react/CommandItem";
+
+const ComboboxItem = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
+);
+ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
+
+const ComboboxCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxCheckboxItem, { children }) });
+});
+ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
+
+function usePortalPatch(open, initialHighlightedIndex = -1) {
+  const [placed, setPlaced] = React.useState(false);
+  React.useEffect(() => {
+    return () => setPlaced(false);
+  }, [open]);
+  const [highlightedIndex, setHighlightedIndex] = React.useState(
+    initialHighlightedIndex
+  );
+  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,
+    setPlaced
+  ];
+}
+
+const isHoverSupported = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
+function Command({
+  children,
+  inputValue: inputValueProp,
+  isItemDisabled = () => false,
+  items,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  itemToSubItems,
+  onInputValueChange,
+  onItemSelect,
+  onOpenChange,
+  open,
+  selectedItem,
+  value: valueProp,
+  ...props
+}) {
+  const value = React.useMemo(
+    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
+    [valueProp]
+  );
+  const [inputValue, setInputValue] = reactUseControllableState.useControllableState({
+    defaultProp: "",
+    onChange: onInputValueChange,
+    prop: inputValueProp
+  });
+  const [lastInteractionSource, setLastInteractionSource] = React.useState("pointer");
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    open,
+    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
+  );
+  const [highlightedSubIndex, setHighlightedSubIndex] = React.useState(-1);
+  const downshift$1 = downshift.useCombobox({
+    ...props,
+    highlightedIndex: highlightedIndex === -1 && isHoverSupported ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
+    inputValue,
+    isItemDisabled,
+    isOpen: placed,
+    items,
+    itemToKey,
+    itemToString,
+    onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
+      if (type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave) {
+        setHighlightedIndex(highlightedIndex2);
+      }
+      if (type === downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp || type === downshift.useCombobox.stateChangeTypes.InputKeyDownPageDown || type === downshift.useCombobox.stateChangeTypes.InputKeyDownPageUp) {
+        setLastInteractionSource("keyboard");
+      } else {
+        setLastInteractionSource("pointer");
+      }
+      if (highlightedIndex2 !== -1 && itemToSubItems?.(items[highlightedIndex2])?.length) {
+        setHighlightedSubIndex(0);
+      } else {
+        setHighlightedSubIndex(-1);
+      }
+    },
+    onIsOpenChange({ isOpen, type }) {
+      onOpenChange?.(isOpen);
+      if (isOpen) {
+        if (type === downshift.useCombobox.stateChangeTypes.InputClick || type === downshift.useCombobox.stateChangeTypes.ToggleButtonClick) {
+          setLastInteractionSource("pointer");
+        } else {
+          setLastInteractionSource("keyboard");
+        }
+      }
     },
-    sm: {
-      Content: ComboboxPopoverContent,
-      Root: ComboboxPopover,
-      Trigger: IconMagnifyingGlass.PopoverTrigger
-    }
-  });
-  const value = React.useMemo(
-    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
-    [valueProp]
-  );
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
+    onSelectedItemChange({ selectedItem: selectedItem2, type }) {
+      if (type !== downshift.useCombobox.stateChangeTypes.InputBlur) {
+        onItemSelect?.(selectedItem2);
+      }
+    },
+    selectedItem
   });
-  const onInputValueChangeStable = useEffectEvent(
-    onInputValueChange ?? (() => {
-    })
-  );
-  React.useEffect(() => {
-    if (!open) {
-      onInputValueChangeStable("");
-    }
-  }, [open, onInputValueChangeStable]);
-  return /* @__PURE__ */ jsxRuntime.jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    ComboboxContextProvider,
+  downshift$1.getMenuProps({}, { suppressRefError: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CommandContextProvider,
     {
-      components,
+      downshift: downshift$1,
+      highlightedItem: items[downshift$1.highlightedIndex],
+      highlightedSubIndex,
       isItemDisabled,
       items,
-      itemToKey,
-      itemToString,
-      onInputValueChange,
-      onItemSelect,
-      open,
-      setOpen,
+      itemToSubItems,
+      lastInteractionSource,
+      setHighlightedIndex: (index, source) => {
+        setHighlightedIndex(index);
+        setLastInteractionSource(source);
+      },
+      setHighlightedSubIndex: (index, source) => {
+        setHighlightedSubIndex(index);
+        setLastInteractionSource(source);
+      },
+      setInputValue,
+      setPlaced,
       value,
       children
     }
-  ) });
+  );
 }
-Combobox.displayName = "@optiaxiom/react/Combobox";
+Command.displayName = "@optiaxiom/react/Command";
 
-const ComboboxItem = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
+const CommandListbox = React.forwardRef(
+  ({ children, size, ...props }, ref) => {
+    const { downshift } = useCommandContext("CommandList");
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Listbox, { size, ...downshift.getMenuProps({ ref, ...props }), children });
+  }
 );
-ComboboxItem.displayName = "@optiaxiom/react/ComboboxItem";
-
-const ComboboxCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxCheckboxItem, { children }) });
-});
-ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
+CommandListbox.displayName = "@optiaxiom/react/CommandListbox";
 
 const ComboboxContentImpl = React.forwardRef(({ children, ...props }, ref) => {
   const { setPlaced } = useCommandContext("ComboboxContentImpl");
@@ -1195,9 +940,10 @@ const ComboboxContent = React.forwardRef(
       base: "8",
       sm: "4"
     });
-    const { labelId } = IconMagnifyingGlass.useFieldContext();
+    const { labelId } = Skeleton.useFieldContext();
     const {
       components,
+      inputValue,
       isItemDisabled,
       items,
       itemToKey,
@@ -1217,6 +963,7 @@ const ComboboxContent = React.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Command,
           {
+            inputValue,
             isItemDisabled,
             items,
             itemToKey,
@@ -1253,25 +1000,82 @@ ComboboxContent.displayName = "@optiaxiom/react/ComboboxContent";
 
 const ComboboxEmpty = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxEmpty, { ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { ref, ...props });
   }
 );
 ComboboxEmpty.displayName = "@optiaxiom/react/ComboboxEmpty";
 
 const ComboboxFooter = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxFooter, { ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxFooter, { ref, ...props });
   }
 );
 ComboboxFooter.displayName = "@optiaxiom/react/ComboboxFooter";
 
 const ComboboxGroup = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxGroup, { ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxGroup, { ref, ...props });
   }
 );
 ComboboxGroup.displayName = "@optiaxiom/react/ComboboxGroup";
 
+const CommandInput = React.forwardRef(
+  ({ onKeyDown, size, ...props }, ref) => {
+    const {
+      downshift,
+      highlightedItem,
+      highlightedSubIndex,
+      itemToSubItems,
+      setHighlightedSubIndex,
+      setInputValue
+    } = useCommandContext("CommandInput");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Input,
+      {
+        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
+        size,
+        ...downshift.getInputProps({
+          ...props,
+          onChange: (event) => {
+            setInputValue("value" in event.target ? event.target.value : "");
+          },
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented) {
+              return;
+            }
+            if (highlightedItem && highlightedSubIndex !== -1 && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Enter")) {
+              const subItems = itemToSubItems?.(highlightedItem) ?? [];
+              if (subItems.length === 0) {
+                return;
+              }
+              event.preventDefault();
+              Object.assign(event.nativeEvent, {
+                preventDownshiftDefault: true
+              });
+              if (event.key === "ArrowRight") {
+                setHighlightedSubIndex(
+                  highlightedSubIndex === subItems.length - 1 ? 0 : highlightedSubIndex + 1,
+                  "keyboard"
+                );
+              } else if (event.key === "ArrowLeft") {
+                setHighlightedSubIndex(
+                  highlightedSubIndex === 0 ? subItems.length - 1 : highlightedSubIndex - 1,
+                  "keyboard"
+                );
+              } else if (event.key === "Enter") {
+                downshift.selectItem(subItems[highlightedSubIndex]);
+              }
+            }
+          },
+          ref
+        })
+      }
+    );
+  }
+);
+CommandInput.displayName = "@optiaxiom/react/CommandInput";
+
 const ComboboxInput = React.forwardRef(
   (props, ref) => {
     const { downshift, highlightedItem } = useCommandContext("ComboboxInput");
@@ -1296,23 +1100,23 @@ ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
 
 const ComboboxLabel = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxLabel, { ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { ref, ...props });
   }
 );
 ComboboxLabel.displayName = "@optiaxiom/react/ComboboxLabel";
 
 const ComboboxRadioItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxRadioItem, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
 });
 ComboboxRadioItem.displayName = "@optiaxiom/react/ComboboxRadioItem";
 
-const ComboboxScrollArea = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxScrollArea, { ref, ...props });
+const ComboboxScrollArea = React.forwardRef(({ children, loading, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { ref, ...props, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children });
 });
 ComboboxScrollArea.displayName = "@optiaxiom/react/ComboboxScrollArea";
 
 const ComboboxSeparator = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSeparator, { ref, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { ref, ...props });
 });
 ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
 
@@ -1320,7 +1124,7 @@ const ComboboxTrigger = React.forwardRef(({ asChild, children, ...props }, outer
   const { components, setOpen } = useComboboxContext("ComboboxTrigger");
   const buttonRef = React.useRef(null);
   const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-  const { labelId } = IconMagnifyingGlass.useFieldContext();
+  const { labelId } = Skeleton.useFieldContext();
   React.useEffect(() => {
     if (!labelId || !buttonRef.current) {
       return;
@@ -1349,7 +1153,7 @@ const ComboboxTrigger = React.forwardRef(({ asChild, children, ...props }, outer
       ref,
       role: "combobox",
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.AngleMenuButton, { children })
+      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
     }
   );
 });
@@ -1362,7 +1166,7 @@ const ComboboxValue = React.forwardRef(
       () => valueContext instanceof Set ? [...valueContext] : valueContext,
       [valueContext]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.length === 1 ? itemToString(value[0]) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", flexWrap: "wrap", gap: "2", ref, ...props, children: Array.isArray(value) && value.length > 0 ? children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value.length === 1 ? itemToString(value[0]) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       value.length,
       " selected"
     ] }) }) : placeholder });
@@ -1370,7 +1174,55 @@ const ComboboxValue = React.forwardRef(
 );
 ComboboxValue.displayName = "@optiaxiom/react/ComboboxValue";
 
-const IconSort = IconMagnifyingGlass.withIcon(
+const ComboboxVirtualized = React.forwardRef(({ children, items, ...props }, outerRef) => {
+  const innerRef = React.useRef(null);
+  const ref = reactComposeRefs.useComposedRefs(outerRef, innerRef);
+  const [enabled, setEnabled] = React.useState(false);
+  React.useEffect(() => {
+    requestAnimationFrame(() => setEnabled(true));
+  }, []);
+  const rowVirtualizer = reactVirtual.useVirtualizer({
+    count: items.length,
+    enabled,
+    estimateSize: () => 40,
+    getScrollElement: () => innerRef.current
+  });
+  const { downshift } = useCommandContext("ComboboxVirtualized");
+  React.useEffect(() => {
+    rowVirtualizer.scrollToIndex(downshift.highlightedIndex);
+  }, [downshift.highlightedIndex, enabled, rowVirtualizer]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton.Box,
+    {
+      display: "flex",
+      flex: "none",
+      flexDirection: "column",
+      gap: "2",
+      style: {
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        position: "relative"
+      },
+      children: rowVirtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsx(
+        Skeleton.Box,
+        {
+          style: {
+            height: virtualItem.size,
+            left: 0,
+            position: "absolute",
+            top: 0,
+            transform: `translateY(${virtualItem.start}px)`
+          },
+          w: "full",
+          children: children(items[virtualItem.index])
+        },
+        virtualItem.key
+      ))
+    }
+  ) });
+});
+ComboboxVirtualized.displayName = "@optiaxiom/react/ComboboxVirtualized";
+
+const IconSort = Skeleton.withIcon(
   {
     height: 12,
     name: "IconSort",
@@ -1385,7 +1237,7 @@ const IconSort = IconMagnifyingGlass.withIcon(
   )
 );
 
-const IconSortDown = IconMagnifyingGlass.withIcon(
+const IconSortDown = Skeleton.withIcon(
   {
     height: 12,
     name: "IconSortDown",
@@ -1400,7 +1252,7 @@ const IconSortDown = IconMagnifyingGlass.withIcon(
   )
 );
 
-const IconSortUp = IconMagnifyingGlass.withIcon(
+const IconSortUp = Skeleton.withIcon(
   {
     height: 12,
     name: "IconSortUp",
@@ -1415,33 +1267,33 @@ const IconSortUp = IconMagnifyingGlass.withIcon(
   )
 );
 
-var cell$2 = IconMagnifyingGlass.recipeRuntime({base:'_1lpeqgh'});
-var content$1 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',h:'full',px:'16',py:'12'},'tu3a0n']});
+var cell$2 = Skeleton.recipeRuntime({base:'zynbd7'});
+var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',px:'16',py:'12',size:'full'},'_1849r54']});
 
-const TableHeaderCell = React.forwardRef(({ children, className, colSpan, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ...content$1(), children }) }) }));
+const TableHeaderCell = React.forwardRef(({ children, className, colSpan, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), children }) }) }));
 TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
 
-var button = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'_1gf6pup','_10zqnqr']});
-var icon = IconMagnifyingGlass.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1ahff16'],variants:{active:{false:'yjcsxq',true:'_1m4um4t'},muted:{false:{},true:'_1ghi170'}}});
+var button = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'_1i01mwe','_14nbm67']});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'mn8317'],variants:{active:{false:'_1sj8xtf',true:'_1edduah'},muted:{false:{},true:'_37lpdj'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
   return /* @__PURE__ */ jsxRuntime.jsx(
     TableHeaderCell,
     {
-      "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : undefined,
+      "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : void 0,
       colSpan: header.colSpan,
       ref,
       ...props,
-      children: header.column.columnDef.enableSorting ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...button(), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
+      children: header.column.columnDef.enableSorting ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...button(), children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
         children,
         sortDir && /* @__PURE__ */ jsxRuntime.jsxs(reactVisuallyHidden.VisuallyHidden, { children: [
           "sorted ",
           sortDir === "asc" ? "ascending" : "descending"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Grid, { placeItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Grid, { placeItems: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            IconMagnifyingGlass.Icon,
+            Skeleton.Icon,
             {
               asChild: true,
               ...icon({
@@ -1451,8 +1303,8 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
               children: /* @__PURE__ */ jsxRuntime.jsx(IconSort, {})
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsxRuntime.jsx(IconSortUp, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, ...icon({ active: sortDir === "desc" }), children: /* @__PURE__ */ jsxRuntime.jsx(IconSortDown, {}) })
+          /* @__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
     }
@@ -1460,52 +1312,72 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
 });
 DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
 
-var table$1 = IconMagnifyingGlass.recipeRuntime({base:[{color:'fg.default',fontSize:'md'},'_8ofn3x'],variants:{layout:{auto:[{w:'full'},'nzuj0t'],fixed:[{w:'fit'},'_1xizzjw']}}});
-var wrapper = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.default',maxW:'full',overflow:'auto',rounded:'lg'},'_8heqlj']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md'},'vpo3n1'],variants:{layout:{auto:[{w:'full'},'_8odg6s'],fixed:[{display:'grid',w:'fit'},'o4k4bl']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_1faqdjh']});
 
 const Table = React.forwardRef(
-  ({ children, className, layout = "auto", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ...wrapper({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...table$1({ layout }), children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, children }) }) })
+  ({ 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";
 
-var body = IconMagnifyingGlass.recipeRuntime({base:['_1n9rf9d']});
+var body = Skeleton.recipeRuntime({base:['_12bzf98']});
 
 const TableBody = React.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...body({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, children }) })
+  ({ 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$1 = IconMagnifyingGlass.recipeRuntime({base:[{borderColor:'border.default',p:'16'},'_14efa0b']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_196v1f1']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...cell$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, ref, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$1({}, 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(IconMagnifyingGlass.Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, children }) }));
+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 row = IconMagnifyingGlass.recipeRuntime({base:['_6426li',{transition:'colors',w:'full'},'gnwgu0']});
+var row = Skeleton.recipeRuntime({base:['ov1l18',{transition:'colors',w:'full'},'g2nppn']});
 
 const TableRow = React.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...row({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, children }) })
+  ({ 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 = IconMagnifyingGlass.recipeRuntime({base:['_1g4usb9'],variants:{pinned:{left:'yen15q',right:'ic9kq2'},pinnedType:{body:'_10ms838',header:{}}}});
-var cellOffsetVar = 'var(--_1sg2yos)';
-var cellSizeVar = 'var(--_1pz8zo9)';
-var header = IconMagnifyingGlass.recipeRuntime({base:['_2j50hz']});
-var leftTotalSizeVar = 'var(--_1415tmj)';
-var rightTotalSizeVar = 'var(--_1mua5pj)';
-var table = IconMagnifyingGlass.recipeRuntime({base:'_12rjkdq',variants:{pinned:{both:'_1vwdlsa',left:'_4ml1gc',none:{},right:'mc7hhh'}}});
+var cell = Skeleton.recipeRuntime({base:[{display:'flex'},'_1gg90t8'],variants:{pinned:{left:'vumz7',right:'_9ur6n1'},pinnedType:{body:'_1otcv8x',header:{}}}});
+var cellOffsetVar = 'var(--_1xfi2as)';
+var cellSizeVar = 'var(--t8ry6n)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'_15qgxt1']});
+var leftTotalSizeVar = 'var(--qix54)';
+var rightTotalSizeVar = 'var(--us84oq)';
+var table = Skeleton.recipeRuntime({base:'rr6exg',variants:{pinned:{both:'_1qvxp6f',left:'mdjv7w',none:{},right:'_17otbbz'}}});
 
+const COL_VIRTUALIZATION_THRESHOLD = 20;
+const ROW_VIRTUALIZATION_THRESHOLD = 20;
 const DataTable = React.forwardRef(
-  ({ table: table$1, ...props }, ref) => {
+  ({ estimatedRowHeight = 52, loading, table: table$1, ...props }, ref) => {
+    const tableRef = React.useRef(null);
+    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: () => tableRef.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: () => tableRef.current
+    });
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      IconMagnifyingGlass.Box,
+      Skeleton.Box,
       {
         alignItems: "center",
         display: "flex",
@@ -1518,6 +1390,7 @@ const DataTable = React.forwardRef(
             Table,
             {
               layout: "fixed",
+              ref: tableRef,
               style: dynamic.assignInlineVars({
                 [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
                 [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
@@ -1526,7 +1399,7 @@ const DataTable = React.forwardRef(
                 pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
               }),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
                   DataTableHeaderCell,
                   {
                     header,
@@ -1537,8 +1410,8 @@ const DataTable = React.forwardRef(
                       })
                     },
                     ...cell({
-                      pinned: header.column.getIsPinned() || undefined,
-                      pinnedType: header.column.getIsPinned() ? "header" : undefined
+                      pinned: header.column.getIsPinned() || void 0,
+                      pinnedType: header.column.getIsPinned() ? "header" : void 0
                     }),
                     children: header.isPlaceholder ? null : reactTable.flexRender(
                       header.column.columnDef.header,
@@ -1547,33 +1420,91 @@ const DataTable = React.forwardRef(
                   },
                   header.id
                 )) }, headerGroup.id)) }),
-                /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table$1.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: row.getVisibleCells().map((cell$1) => {
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    TableCell,
-                    {
-                      style: {
-                        ...dynamic.assignInlineVars({
-                          [cellOffsetVar]: `${cell$1.column.getStart(cell$1.column.getIsPinned() || "left")}px`,
-                          [cellSizeVar]: `${cell$1.column.getSize()}px`
-                        })
+                /* @__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-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
+                          ))
+                        ]
                       },
-                      ...cell({
-                        pinned: cell$1.column.getIsPinned() || undefined,
-                        pinnedType: cell$1.column.getIsPinned() ? "body" : undefined
-                      }),
-                      children: reactTable.flexRender(
-                        cell$1.column.columnDef.cell,
-                        cell$1.getContext()
-                      )
-                    },
-                    cell$1.id
-                  );
-                }) }, row.id)) })
+                      row.id
+                    ))
+                  }
+                )
               ]
             }
           ),
-          table$1.getPageCount() > 1 && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { mt: "8", children: /* @__PURE__ */ jsxRuntime.jsx(
-            IconMagnifyingGlass.Pagination,
+          table$1.getPageCount() > 1 && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { mt: "8", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Skeleton.Pagination,
             {
               onPageChange: (newPage) => table$1.setPageIndex(newPage - 1),
               page: table$1.getState().pagination.pageIndex + 1,
@@ -1586,8 +1517,29 @@ const DataTable = React.forwardRef(
   }
 );
 DataTable.displayName = "@optiaxiom/react/DataTable";
+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
+  ),
+  getLeftVisibleCells: fakeCellsFactory(
+    table.getLeftVisibleLeafColumns(),
+    rowIndex
+  ),
+  getRightVisibleCells: fakeCellsFactory(
+    table.getRightVisibleLeafColumns(),
+    rowIndex
+  ),
+  id: "loading" + rowIndex
+});
 
-const IconCalendar = IconMagnifyingGlass.withIcon(
+const IconCalendar = Skeleton.withIcon(
   {
     name: "IconCalendar"
   },
@@ -1602,20 +1554,14 @@ const IconCalendar = IconMagnifyingGlass.withIcon(
   )
 );
 
-const useCalendarSupported = () => {
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-  return mounted ? CSS.supports("selector(::-webkit-datetime-edit)") : null;
-};
+var picker = Skeleton.recipeRuntime({base:'_1p2euk6'});
 
 function format(date) {
   return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).toISOString().split("T")[0];
 }
 function parse(str) {
-  const rawDate = str && typeof str === "string" ? new Date(str) : undefined;
-  return isValidDate(rawDate) ? new Date(rawDate.getTime() + (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3) : undefined;
+  const rawDate = str && typeof str === "string" ? new Date(str) : void 0;
+  return isValidDate(rawDate) ? new Date(rawDate.getTime() + (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3) : void 0;
 }
 const isValidDate = (date) => date ? !isNaN(+date) : false;
 
@@ -1628,36 +1574,21 @@ const DateInput = React.forwardRef(
     });
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
-    const maxDate = max ? new Date(max) : undefined;
-    const minDate = min ? new Date(min) : undefined;
-    const supported = useCalendarSupported();
-    if (supported === null) {
-      return null;
-    } else if (!supported) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        IconMagnifyingGlass.Input,
-        {
-          disabled,
-          max,
-          min,
-          onChange,
-          ref,
-          type: "date",
-          ...props
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        IconMagnifyingGlass.Input,
+    const maxDate = max ? new Date(max) : void 0;
+    const minDate = min ? new Date(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(
-            IconMagnifyingGlass.PopoverTrigger,
+            Skeleton.PopoverTrigger,
             {
               appearance: "subtle",
               "aria-label": "Show date picker",
+              hasCustomAnchor: true,
               icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
-              size: "sm"
+              size: "sm",
+              ...picker()
             }
           ),
           disabled,
@@ -1671,7 +1602,7 @@ const DateInput = React.forwardRef(
             e.preventDefault();
           },
           onKeyDown: (e) => {
-            if (e.key === " ") {
+            if (e.key === " " && CSS.supports("selector(::-webkit-datetime-edit)")) {
               e.preventDefault();
               setOpen(true);
             }
@@ -1681,30 +1612,46 @@ const DateInput = React.forwardRef(
           ...props
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        IconMagnifyingGlass.PopoverContent,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Skeleton.PopoverContent,
         {
+          gap: "8",
           onCloseAutoFocus: (event) => {
             event.preventDefault();
             innerRef.current?.focus();
           },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            Calendar,
-            {
-              max: maxDate,
-              min: minDate,
-              onValueChange: (date) => {
-                if (!date) {
-                  return;
-                }
-                if (innerRef.current) {
-                  IconMagnifyingGlass.forceValueChange(innerRef?.current, format(date));
-                }
-                setOpen(false);
-              },
-              value: parse(value)
-            }
-          )
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Calendar,
+              {
+                max: maxDate,
+                min: minDate,
+                onValueChange: (date) => {
+                  if (!date) {
+                    return;
+                  }
+                  if (innerRef.current) {
+                    Skeleton.forceValueChange(innerRef?.current, format(date));
+                  }
+                  setOpen(false);
+                },
+                value: parse(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Button,
+              {
+                appearance: "subtle",
+                onClick: () => {
+                  if (innerRef.current) {
+                    Skeleton.forceValueChange(innerRef.current, "");
+                  }
+                  setOpen(false);
+                },
+                children: "Clear"
+              }
+            ) })
+          ]
         }
       )
     ] });
@@ -1712,7 +1659,7 @@ const DateInput = React.forwardRef(
 );
 DateInput.displayName = "@optiaxiom/react/DateInput";
 
-var mark = IconMagnifyingGlass.recipeRuntime({base:'fcabbe'});
+var mark = Skeleton.recipeRuntime({base:'_1rwbum2'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -1737,15 +1684,15 @@ function escapeRegExp(string) {
 const Highlight = React.forwardRef(
   ({ children = (chunk) => chunk, content, query, ...props }, ref) => {
     const chunks = useHighlightedChunks(content || "", query);
-    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 }) })
+    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 }) })
     ) : chunk }, index)) });
   }
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = IconMagnifyingGlass.recipeRuntime({base:'_18cego0',variants:{empty:{false:{},true:'_169j7ei'}}});
-var input$1 = IconMagnifyingGlass.recipeRuntime({base:'_9snqya'});
+var editor = Skeleton.recipeRuntime({base:'_1m8k40x',variants:{empty:{false:{},true:'fom7lq'}}});
+var input$1 = Skeleton.recipeRuntime({base:'_1s4r4o5'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -1783,8 +1730,8 @@ const InlineInput = React.forwardRef(
         }
       }
     }, [multiline, value]);
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref, ...input$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Box,
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...input$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Box,
       {
         "aria-multiline": multiline,
         "aria-readonly": disabled,
@@ -1825,14 +1772,36 @@ function getText(element) {
   return text;
 }
 
+const Layout = React.forwardRef(
+  ({ children, header, sidenav, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { gap: "0", h: "full", ref, ...props, children: [
+      header,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Skeleton.Flex,
+        {
+          alignItems: "start",
+          flexDirection: "row",
+          gap: "0",
+          justifyContent: "start",
+          children: [
+            sidenav,
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { flex: "1", h: "full", children })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Layout.displayName = "@optiaxiom/react/Layout";
+
 const NavGroup = React.forwardRef(
   ({ children, ...props }, ref) => {
     const groupId = reactId.useId();
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.NavGroupContextProvider, { id: groupId, children: /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Disclosure,
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.NavGroupContextProvider, { id: groupId, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Disclosure,
       {
         alignItems: "stretch",
-        "aria-labelledby": props["aria-label"] ? undefined : groupId,
+        "aria-labelledby": props["aria-label"] ? void 0 : groupId,
         asChild: true,
         defaultOpen: true,
         display: "flex",
@@ -1845,20 +1814,37 @@ const NavGroup = React.forwardRef(
 );
 NavGroup.displayName = "@optiaxiom/react/NavGroup";
 
-const NavGroupLabel = React.forwardRef(
+const NavGroupContent = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton.DisclosureContent,
+    {
+      asChild: true,
+      display: "flex",
+      flexDirection: "column",
+      gap: "4",
+      p: "0",
+      transitionType: "slidePop",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { ref, children })
+    }
+  );
+});
+NavGroupContent.displayName = "@optiaxiom/react/NavGroupContent";
+
+const NavGroupTrigger = React.forwardRef(
   ({ children, ...props }, ref) => {
-    const { id } = IconMagnifyingGlass.useNavGroupContext("NavGroupLabel");
+    const { id } = Skeleton.useNavGroupContext("NavGroupTrigger");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.DisclosureTrigger,
+      Skeleton.DisclosureTrigger,
       {
         chevronPosition: "end",
         color: "fg.tertiary",
         fontSize: "sm",
+        h: "sm",
         id,
         mb: "4",
         mt: "8",
         px: "12",
-        py: "4",
         ref,
         w: "auto",
         ...props,
@@ -1867,46 +1853,43 @@ const NavGroupLabel = React.forwardRef(
     );
   }
 );
-NavGroupLabel.displayName = "@optiaxiom/react/NavGroupLabel";
+NavGroupTrigger.displayName = "@optiaxiom/react/NavGroupTrigger";
 
 const NavSeparator = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Separator, { flex: "none", mx: "12", my: "8", ref, ...props })
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Separator, { flex: "none", mx: "12", my: "8", ref, ...props })
 );
 NavSeparator.displayName = "@optiaxiom/react/NavSeparator";
 
-var pill = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_28ewa1'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1skitvp'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
-  ({
-    addonAfter,
-    addonBefore,
-    children,
-    className,
-    onRemove,
-    size = "md",
-    ...props
-  }, ref) => {
-    const handleKeyDown = (e) => {
-      if (e.key === "Backspace" && onRemove) {
-        onRemove();
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { auto: true, content: children, children: /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Button,
+  ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Box,
       {
-        addonAfter,
-        addonBefore,
-        onKeyDown: handleKeyDown,
-        ref,
+        asChild: true,
+        "data-disabled": disabled ? "" : void 0,
         ...pill({ size }, className),
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { display: "block", fontSize: "inherit", truncate: true, children })
+        ...boxProps,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { disabled, ref, ...restProps, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { fontSize: "inherit", truncate: true, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}) })
+        ] })
       }
-    ) });
+    );
   }
 );
 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 });
+  }
+);
+PillGroup.displayName = "@optiaxiom/react/PillGroup";
+
 const [SelectContextProvider, useSelectContext] = reactContext.createContext("Select");
 
 function Select({
@@ -1975,7 +1958,7 @@ function Select({
 }
 Select.displayName = "@optiaxiom/react/Select";
 
-var content = IconMagnifyingGlass.recipeRuntime({base:['d4q71n']});
+var content = Skeleton.recipeRuntime({base:['_2mc3cm']});
 
 const SelectContent = React.forwardRef(
   ({
@@ -1986,14 +1969,14 @@ const SelectContent = React.forwardRef(
     side = "bottom",
     ...props
   }, ref) => {
-    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
     const { downshift, isOpen, placed, setPlaced } = useSelectContext("SelectContent");
-    return isOpen && /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.MenuListbox,
+    return isOpen && /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.MenuListbox,
       {
         asChild: true,
         maxH: "sm",
-        minW: loading ? "trigger" : undefined,
+        minW: loading ? "trigger" : void 0,
         provider: "popper",
         ...content({}, className),
         ...boxProps,
@@ -2008,7 +1991,7 @@ const SelectContent = React.forwardRef(
             onPlaced: () => setPlaced(true),
             side,
             sideOffset: 5,
-            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Spinner, {}) }) : children
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children
           }
         )
       }
@@ -2019,7 +2002,7 @@ SelectContent.displayName = "@optiaxiom/react/SelectContent";
 
 const SelectGroup = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxGroup, { ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxGroup, { ref, ...props });
   }
 );
 SelectGroup.displayName = "@optiaxiom/react/SelectGroup";
@@ -2027,14 +2010,13 @@ SelectGroup.displayName = "@optiaxiom/react/SelectGroup";
 const SelectItem = React.forwardRef(
   ({ children, item, size, ...props }, ref) => {
     const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
-    const itemProps = downshift.getItemProps({ item, ...props });
+    const itemProps = downshift.getItemProps({ item, ref, ...props });
     return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Box,
+      Skeleton.Box,
       {
-        "data-disabled": itemProps["aria-disabled"] ? "" : undefined,
-        "data-highlighted": highlightedItem === item ? "" : undefined,
-        "data-selected": selectedItem === item ? "" : undefined,
-        ref,
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-selected": selectedItem === item ? "" : void 0,
         size,
         ...itemProps,
         children
@@ -2046,21 +2028,21 @@ SelectItem.displayName = "@optiaxiom/react/SelectItem";
 
 const SelectLabel = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxLabel, { ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { ref, ...props });
   }
 );
 SelectLabel.displayName = "@optiaxiom/react/SelectLabel";
 
 const SelectRadioItem = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxRadioItem, { children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
   }
 );
 SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
 
 const SelectSeparator = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSeparator, { ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { ref, ...props });
   }
 );
 SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
@@ -2068,7 +2050,7 @@ SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
 const SelectTrigger = React.forwardRef(
   ({ asChild, children, onKeyDown, ...props }, ref) => {
     const { disabled, downshift, isOpen } = useSelectContext("SelectTrigger");
-    const { labelId } = IconMagnifyingGlass.useFieldContext();
+    const { labelId } = Skeleton.useFieldContext();
     const buttonRef = React.useRef(null);
     React.useEffect(() => {
       if (!labelId || !buttonRef.current) {
@@ -2104,7 +2086,7 @@ const SelectTrigger = React.forwardRef(
             document.dispatchEvent(new Event("tooltip.open"));
           }
         }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.AngleMenuButton, { "aria-labelledby": labelId, ref: buttonRef, children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { "aria-labelledby": labelId, ref: buttonRef, children }) })
       }
     );
   }
@@ -2114,7 +2096,7 @@ SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
 const SelectValue = React.forwardRef(
   ({ children, placeholder, ...props }, ref) => {
     const { itemToString, selectedItem } = useSelectContext("SelectValue");
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ...props, ref, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...props, ref, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) });
   }
 );
 SelectValue.displayName = "@optiaxiom/react/SelectValue";
@@ -2149,7 +2131,7 @@ function Spotlight({
       onInputValueChangeStable("");
     }
   }, [open, onInputValueChangeStable]);
-  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
     SpotlightContextProvider,
     {
       inputValue,
@@ -2180,7 +2162,7 @@ const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children,
     onItemSelect
   } = useSpotlightContext("SpotlightContent");
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    IconMagnifyingGlass.DialogContent,
+    Skeleton.DialogContent,
     {
       gap: "0",
       overflow: "hidden",
@@ -2230,22 +2212,22 @@ SpotlightContent.displayName = "@optiaxiom/react/SpotlightContent";
 
 const SpotlightEmpty = React.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxEmpty, { fontSize: "lg", gap: "12", p: "32", ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxEmpty, { fontSize: "lg", gap: "12", p: "32", ref, ...props });
   }
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
 
-var input = IconMagnifyingGlass.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1u4cs2l']});
+var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1svx1eh']});
 
 const SpotlightInput = React.forwardRef(
   ({ addonAfter, className, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       CommandInput,
       {
-        addonAfter: /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { flexDirection: "row", children: [
+        addonAfter: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", children: [
           addonAfter,
           /* @__PURE__ */ jsxRuntime.jsx(
-            IconMagnifyingGlass.DialogClose,
+            Skeleton.DialogClose,
             {
               appearance: "default",
               fontSize: "xs",
@@ -2256,7 +2238,7 @@ const SpotlightInput = React.forwardRef(
             }
           )
         ] }),
-        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconMagnifyingGlass, {}),
+        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
         ref,
         size: "xl",
         ...input({}, className),
@@ -2275,7 +2257,7 @@ SpotlightItem.displayName = "@optiaxiom/react/SpotlightItem";
 const SpotlightLabel = React.forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.Box,
+      Skeleton.Box,
       {
         color: "fg.default",
         fontSize: "lg",
@@ -2292,35 +2274,35 @@ const SpotlightLabel = React.forwardRef(
 );
 SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
 
-var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1blvunx']});
+var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_1vffwt6']});
 
 const SpotlightRadioItem = React.forwardRef(({ addonAfter, children, className, description, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SpotlightItem, { asChild: true, ref, ...item$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.ListboxRadioItem,
+    Skeleton.ListboxRadioItem,
     {
-      addonAfter: addonAfter ?? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, {}),
-      description: description && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { fontSize: "md", mt: "2", children: description }),
+      addonAfter: addonAfter ?? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}),
+      description: description && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { fontSize: "md", mt: "2", children: description }),
       children
     }
   ) });
 });
 SpotlightRadioItem.displayName = "@optiaxiom/react/SpotlightRadioItem";
 
-const SpotlightScrollArea = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxScrollArea, { gap: "8", ref, ...props }));
+const SpotlightScrollArea = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxScrollArea, { gap: "8", ref, ...props }));
 SpotlightScrollArea.displayName = "@optiaxiom/react/SpotlightScrollArea";
 
 const [CommandSubContextProvider, useCommandSubContext] = reactContext.createContext("CommandSub");
 
 const CommandSub = React.forwardRef(
   ({ children, item, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandSubContextProvider, { item, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref, role: "group", ...props, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandSubContextProvider, { item, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, role: "group", ...props, children }) });
   }
 );
 CommandSub.displayName = "@optiaxiom/react/CommandSub";
 
 const SpotlightSub = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandSub, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "8", pt: "12", px: "24", children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandSub, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "8", pt: "12", px: "24", children }) });
   }
 );
 SpotlightSub.displayName = "@optiaxiom/react/SpotlightSub";
@@ -2357,8 +2339,8 @@ const CommandSubItem = React.forwardRef(
       {
         "aria-disabled": disabled,
         "aria-selected": isSelected,
-        "data-disabled": disabled ? "" : undefined,
-        "data-highlighted": highlighted ? "" : undefined,
+        "data-disabled": disabled ? "" : void 0,
+        "data-highlighted": highlighted ? "" : void 0,
         onClick: (event) => {
           onClick?.(event);
           if (event.defaultPrevented) {
@@ -2389,7 +2371,7 @@ const CommandSubItem = React.forwardRef(
 );
 CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
 
-var item = IconMagnifyingGlass.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'vevesm',true:'_1e4l0ok'}}});
+var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'rkasa5',true:'lfm5e4'}}});
 
 const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2401,10 +2383,10 @@ const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...p
       ...item({ active: selected || false }, className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        IconMagnifyingGlass.Badge,
+        Skeleton.Badge,
         {
           intent: selected ? "information" : "neutral",
-          variant: selected ? "solid" : "light",
+          variant: selected ? "strong" : "subtle",
           children
         }
       )
@@ -2418,44 +2400,55 @@ const SpotlightTrigger = React.forwardRef(({ addonAfter, children, hotkey = DEFA
   const { open, setOpen } = useSpotlightContext("SpotlightTrigger");
   useHotkeys([[hotkey, () => setOpen(!open)]]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    IconMagnifyingGlass.DialogTrigger,
+    Skeleton.DialogTrigger,
     {
       addonAfter,
-      icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconMagnifyingGlass, {}),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
       ref,
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { color: "fg.tertiary", children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { color: "fg.tertiary", children })
     }
   );
 });
 SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
 
-var nav = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',py:'16'},'_1sjznob']});
+var nav = Skeleton.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',py:'16'},'_5udrte']});
 
 const SubNav = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { borderR: "1", h: "full", ref, w: "fit", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Secondary", children: /* @__PURE__ */ jsxRuntime.jsx(
-      IconMagnifyingGlass.SidebarContextProvider,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Flex,
       {
-        expanded: true,
-        navId: "",
-        onExpandedChange: () => {
-        },
-        spacing: "12",
-        children
+        borderColor: "border.tertiary",
+        borderR: "1",
+        h: "full",
+        ref,
+        w: "fit",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Secondary", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Skeleton.SidebarContextProvider,
+          {
+            expanded: true,
+            navId: "",
+            onExpandedChange: () => {
+            },
+            spacing: "12",
+            children
+          }
+        ) }) })
       }
-    ) }) }) });
+    );
   }
 );
 SubNav.displayName = "@optiaxiom/react/SubNav";
 
-exports.Autocomplete = Autocomplete;
-exports.AutocompleteContent = AutocompleteContent;
-exports.AutocompleteEmpty = AutocompleteEmpty;
-exports.AutocompleteItem = AutocompleteItem;
-exports.AutocompleteRadioItem = AutocompleteRadioItem;
-exports.AutocompleteTrigger = AutocompleteTrigger;
-exports.AutocompleteVirtualized = AutocompleteVirtualized;
+const TableActions = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ActionsContent, { ref, ...props });
+  }
+);
+TableActions.displayName = "@optiaxiom/react/TableActions";
+
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -2463,10 +2456,12 @@ exports.BreadcrumbLink = BreadcrumbLink;
 exports.BreadcrumbPage = BreadcrumbPage;
 exports.Calendar = Calendar;
 exports.Card = Card;
+exports.CardActions = CardActions;
 exports.CardCheckbox = CardCheckbox;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
 exports.CardImage = CardImage;
+exports.CardLink = CardLink;
 exports.CardOverflow = CardOverflow;
 exports.CardTitle = CardTitle;
 exports.Combobox = Combobox;
@@ -2483,6 +2478,7 @@ exports.ComboboxScrollArea = ComboboxScrollArea;
 exports.ComboboxSeparator = ComboboxSeparator;
 exports.ComboboxTrigger = ComboboxTrigger;
 exports.ComboboxValue = ComboboxValue;
+exports.ComboboxVirtualized = ComboboxVirtualized;
 exports.Command = Command;
 exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
@@ -2492,10 +2488,13 @@ exports.DataTableHeaderCell = DataTableHeaderCell;
 exports.DateInput = DateInput;
 exports.Highlight = Highlight;
 exports.InlineInput = InlineInput;
+exports.Layout = Layout;
 exports.NavGroup = NavGroup;
-exports.NavGroupLabel = NavGroupLabel;
+exports.NavGroupContent = NavGroupContent;
+exports.NavGroupTrigger = NavGroupTrigger;
 exports.NavSeparator = NavSeparator;
 exports.Pill = Pill;
+exports.PillGroup = PillGroup;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -2518,6 +2517,7 @@ exports.SpotlightSubItem = SpotlightSubItem;
 exports.SpotlightTrigger = SpotlightTrigger;
 exports.SubNav = SubNav;
 exports.Table = Table;
+exports.TableActions = TableActions;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;
 exports.TableHeader = TableHeader;