@optiaxiom/react 0.12.2 → 0.13.0

package/dist/cjs/unstable.js

@@ -0,0 +1,2602 @@
+"use client";
+'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-CTEsjPRN.js');
+var reactPortal = require('@radix-ui/react-portal');
+var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+require('./assets/src/layers/layers.css.ts.vanilla-DvUyVLsY.css');
+require('./assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-CqyRMvtf.css');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-DOFxVbIV.css');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+var reactVirtual = require('@tanstack/react-virtual');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-hTHCMtVm.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-DH5ulu82.css');
+var reactDayPicker = require('react-day-picker');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-DXNpsD1a.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-BiNlJGyd.css');
+require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-C7QrLCoy.css');
+require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-Deoc0VJu.css');
+var reactId = require('@radix-ui/react-id');
+require('./assets/src/cover/Cover.css.ts.vanilla-B-I3ddwo.css');
+require('./assets/src/link/Link.css.ts.vanilla-DpUHZuBB.css');
+require('./assets/src/card/Card.css.ts.vanilla-C_4cdNEn.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-DePFn19-.css');
+require('./assets/src/card-actions/CardActions.css.ts.vanilla-qXNctE3P.css');
+var clsx = require('clsx');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-CMyUjLWX.css');
+var reactSlot = require('@radix-ui/react-slot');
+var RadixDialog = require('@radix-ui/react-dialog');
+var reactTable = require('@tanstack/react-table');
+var dynamic = require('@vanilla-extract/dynamic');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-udsOdmeI.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-BPJHzlBh.css');
+require('./assets/src/table/Table.css.ts.vanilla-ClUzV4r4.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-DAL-84lR.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-CgvKoCRz.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-DTjY_myB.css');
+require('./assets/src/data-table/DataTable.css.ts.vanilla-CbD9vNcU.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-G8KfRd1k.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DUHjYb7w.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-DIdnsPW2.css');
+require('./assets/src/select-content/SelectContent.css.ts.vanilla-Hl9KkRrw.css');
+require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-DYAEHbRE.css');
+require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-C26jKxXG.css');
+require('./assets/src/badge/Badge.css.ts.vanilla-K20bfTNv.css');
+require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-mx9lT-uT.css');
+require('./assets/src/sub-nav/SubNav.css.ts.vanilla-7q20BQ3n.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-Sdkm0Ik-.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-BQ9-WHf6.css');
+require('@radix-ui/react-collapsible');
+require('./assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CoBOLDcZ.css');
+require('./assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CiNDiK90.css');
+require('./assets/src/avatar-group/AvatarGroup.css.ts.vanilla-pvg1PXNv.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-Bjb3PD4S.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-BrznT8Qb.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-C3pr7zVr.css');
+require('@radix-ui/react-separator');
+require('./assets/src/separator/Separator.css.ts.vanilla-DW8OmA5H.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-D_Y4T4gr.css');
+require('./assets/src/avatar-group/AvatarGroup.css.ts.vanilla-pvg1PXNv.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-B-a174zk.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-BFoVwm4N.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-zVX8BmW1.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-D1oh8aQz.css');
+require('@radix-ui/react-popover');
+require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-Cp_vxKKA.css');
+require('@optiaxiom/globals/fonts');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-Dnn6qkGT.css');
+require('./assets/src/box/Box.css.ts.vanilla-BWyfa0J7.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-BrUGV5jP.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-EPXy4rlh.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-Cg1S7kSw.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-OebmjN-9.css');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var RadixDialog__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixDialog);
+
+function attachMediaListener(query, callback) {
+  try {
+    query.addEventListener("change", callback);
+    return () => query.removeEventListener("change", callback);
+  } catch (e) {
+    query.addListener(callback);
+    return () => query.removeListener(callback);
+  }
+}
+function getInitialValue(query, initialValue) {
+  if (typeof window !== "undefined" && "matchMedia" in window) {
+    return window.matchMedia(query).matches;
+  }
+  return false;
+}
+function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
+  getInitialValueInEffect: true
+}) {
+  const [matches, setMatches] = React.useState(
+    getInitialValueInEffect ? initialValue : getInitialValue(query)
+  );
+  const queryRef = React.useRef(null);
+  React.useEffect(() => {
+    if ("matchMedia" in window) {
+      queryRef.current = window.matchMedia(query);
+      setMatches(queryRef.current.matches);
+      return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
+    }
+    return void 0;
+  }, [query]);
+  return matches;
+}
+
+function parseHotkey(hotkey) {
+  const keys = hotkey.toLowerCase().split("+").map((part) => part.trim());
+  const modifiers = {
+    alt: keys.includes("alt"),
+    ctrl: keys.includes("ctrl"),
+    meta: keys.includes("meta"),
+    mod: keys.includes("mod"),
+    shift: keys.includes("shift"),
+    plus: keys.includes("[plus]")
+  };
+  const reservedKeys = ["alt", "ctrl", "meta", "shift", "mod"];
+  const freeKey = keys.find((key) => !reservedKeys.includes(key));
+  return {
+    ...modifiers,
+    key: freeKey === "[plus]" ? "+" : freeKey
+  };
+}
+function isExactHotkey(hotkey, event, usePhysicalKeys) {
+  const { alt, ctrl, meta, mod, shift, key } = hotkey;
+  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey, code: pressedCode } = event;
+  if (alt !== altKey) {
+    return false;
+  }
+  if (mod) {
+    if (!ctrlKey && !metaKey) {
+      return false;
+    }
+  } 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'},'_145h0vf']});
+
+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:'_1edynus'});
+
+const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
+  const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Box,
+    {
+      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : void 0,
+      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"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        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
+      ))
+    }
+  ) });
+});
+AutocompleteVirtualized.displayName = "@optiaxiom/react/AutocompleteVirtualized";
+
+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 }) }) }) });
+  }
+);
+Breadcrumb.displayName = "@optiaxiom/react/Breadcrumb";
+
+function BreadcrumbEllipsis({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Box,
+    {
+      "aria-hidden": true,
+      color: "fg.tertiary",
+      display: "grid",
+      placeItems: "center",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconEllipsis, {})
+    }
+  );
+}
+BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
+
+var item$2 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1y6xek6']});
+
+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 }) });
+  }
+);
+BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
+
+var link = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1oic160']});
+
+const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { ...link({}, className), ref, ...props });
+});
+BreadcrumbLink.displayName = "@optiaxiom/react/BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef(
+  ({ ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { "aria-current": "page", asChild: true, color: "fg.default", fontSize: "md", children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...props }) });
+  }
+);
+BreadcrumbPage.displayName = "@optiaxiom/react/BreadcrumbPage";
+
+function CalendarChevron({
+  orientation,
+  ...props
+}) {
+  return orientation === "left" ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleLeft, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.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 }) });
+}
+CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
+
+var button$3 = IconMagnifyingGlass.recipeRuntime({base:{mt:'8'},variants:{outside:{false:{},true:'_1aaycnp'}}});
+
+function CalendarDayButton({
+  children,
+  className,
+  color: _color,
+  day: _day,
+  modifiers,
+  ...props
+}) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus();
+    }
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Button,
+    {
+      appearance: modifiers.selected ? "primary" : "subtle",
+      "data-state": modifiers.today ? "active" : void 0,
+      ref,
+      square: true,
+      ...button$3({ outside: modifiers.outside }, className),
+      ...props,
+      children
+    }
+  );
+}
+CalendarDayButton.displayName = "@optiaxiom/react/CalendarDayButton";
+
+function CalendarMonthCaption({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Box,
+    {
+      alignItems: "center",
+      asChild: true,
+      display: "flex",
+      fontSize: "lg",
+      fontWeight: "500",
+      h: "md",
+      justifyContent: "center",
+      mb: "16",
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.MonthCaption, { ...props, children })
+    }
+  );
+}
+CalendarMonthCaption.displayName = "@optiaxiom/react/CalendarMonthCaption";
+
+function CalendarMonthGrid({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.MonthGrid, { ...props, children }) });
+}
+CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
+
+var months = IconMagnifyingGlass.recipeRuntime({base:'_1v3okza'});
+
+function CalendarMonths({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
+}
+CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
+
+var button$2 = IconMagnifyingGlass.recipeRuntime({base:'njo368'});
+
+function CalendarNextMonthButton({
+  children,
+  className,
+  color: _color,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Button,
+    {
+      appearance: "subtle",
+      asChild: true,
+      icon: children,
+      ...button$2({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.NextMonthButton, {})
+    }
+  );
+}
+CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
+
+var button$1 = IconMagnifyingGlass.recipeRuntime({base:'a394w3'});
+
+function CalendarPreviousMonthButton({
+  children,
+  className,
+  color: _color,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Button,
+    {
+      appearance: "subtle",
+      asChild: true,
+      icon: children,
+      ...button$1({}, className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.PreviousMonthButton, {})
+    }
+  );
+}
+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 }) });
+}
+CalendarWeekday.displayName = "@optiaxiom/react/CalendarWeekday";
+
+const components = {
+  Chevron: CalendarChevron,
+  Day: CalendarDay,
+  DayButton: CalendarDayButton,
+  MonthCaption: CalendarMonthCaption,
+  MonthGrid: CalendarMonthGrid,
+  Months: CalendarMonths,
+  NextMonthButton: CalendarNextMonthButton,
+  PreviousMonthButton: CalendarPreviousMonthButton,
+  Weekday: CalendarWeekday
+};
+const Calendar = React.forwardRef(
+  ({
+    defaultValue,
+    max,
+    min,
+    onValueChange,
+    today,
+    value: valueProp,
+    ...props
+  }, ref) => {
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+      prop: valueProp
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        bg: "bg.default",
+        color: "fg.default",
+        fontSize: "md",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactDayPicker.DayPicker,
+          {
+            autoFocus: true,
+            components,
+            defaultMonth: value,
+            endMonth: max,
+            fixedWeeks: true,
+            mode: "single",
+            onSelect: setValue,
+            required: true,
+            selected: value,
+            showOutsideDays: true,
+            startMonth: min,
+            today
+          }
+        )
+      }
+    );
+  }
+);
+Calendar.displayName = "@optiaxiom/react/Calendar";
+
+const [CardContextProvider, useCardContext] = reactContext.createContext("Card");
+
+var card = IconMagnifyingGlass.recipeRuntime({base:['p8zfdk',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'arn8e5']});
+
+const mapOrientationToFlexDirection = {
+  horizontal: "row",
+  vertical: "column"
+};
+const Card = React.forwardRef(
+  ({ children, className, orientation = "vertical", ...props }, ref) => {
+    const descriptionId = reactId.useId();
+    const labelId = reactId.useId();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CardContextProvider,
+      {
+        descriptionId,
+        labelId,
+        orientation,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconMagnifyingGlass.Flex,
+          {
+            flexDirection: mapOrientationToFlexDirection[orientation],
+            ref,
+            ...card({}, className),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Card.displayName = "@optiaxiom/react/Card";
+
+var actions = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'sm35cl']});
+
+const CardActions = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref, ...actions({}, className), ...props, children });
+  }
+);
+CardActions.displayName = "@optiaxiom/react/CardActions";
+
+const CardCheckbox = React.forwardRef(
+  ({ 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,
+      {
+        "aria-labelledby": clsx(labelPrefixId, labelId),
+        description: false,
+        onChange: (event) => {
+          onChange?.(event);
+          setChecked(event.target.checked);
+        },
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.CheckboxControl,
+            {
+              indeterminate,
+              shift: Boolean(children)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { id: labelPrefixId, children: [
+            "Check to ",
+            checked ? "unselect" : "select"
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+CardCheckbox.displayName = "@optiaxiom/react/CardCheckbox";
+
+const CardContent = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { gap: "4", ref, ...props, children });
+  }
+);
+CardContent.displayName = "@optiaxiom/react/CardContent";
+
+const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
+  const { descriptionId } = useCardContext("CardDescription");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Text,
+    {
+      color: "fg.tertiary",
+      fontSize: "sm",
+      id: descriptionId,
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+CardDescription.displayName = "@optiaxiom/react/CardDescription";
+
+var cardImage = IconMagnifyingGlass.recipeRuntime({base:[{h:'full',rounded:'inherit'},'rsiwei'],variants:{orientation:{horizontal:[{w:'auto'},'_1cz08d6'],vertical:[{w:'full'},'n5ss70']}}});
+
+const CardImage = React.forwardRef(
+  ({ alt = "", asChild, children, className, src, ...props }, ref) => {
+    const { orientation } = useCardContext("CardImage");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        asChild: true,
+        ref,
+        ...cardImage({ orientation }, className),
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx("img", { alt, src })
+      }
+    );
+  }
+);
+CardImage.displayName = "@optiaxiom/react/CardImage";
+
+const CardLink = React.forwardRef(
+  ({ ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Link, { appearance: "subtle", overlay: true, ref, ...props });
+  }
+);
+CardLink.displayName = "@optiaxiom/react/CardLink";
+
+var cardOverflow = IconMagnifyingGlass.recipeRuntime({base:['_4cvjus',{alignSelf:'stretch'},'_16v3tvv'],variants:{orientation:{horizontal:['_1nxvpkj'],vertical:['_1npol7k']}}});
+
+const CardOverflow = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { orientation } = useCardContext("CardOverflow");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        ref,
+        ...cardOverflow({ orientation }, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CardOverflow.displayName = "@optiaxiom/react/CardOverflow";
+
+const CardTitle = React.forwardRef(
+  ({ asChild, children, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "h2";
+    const { labelId } = useCardContext("CardTitle");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Heading,
+      {
+        asChild: true,
+        fontSize: "md",
+        fontWeight: "500",
+        id: labelId,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { children })
+      }
+    );
+  }
+);
+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: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { children: ariaLabel }) }),
+    children
+  ] });
+});
+ComboboxDialogContent.displayName = "@optiaxiom/react/ComboboxDialogContent";
+
+function ComboboxPopover(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.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 });
+});
+ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
+
+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"])
+  };
+  for (const name of list) {
+    if (config[name] && matches[name]) {
+      return config[name];
+    }
+  }
+  return config.base;
+};
+
+function Combobox({
+  children,
+  defaultOpen = false,
+  isItemDisabled = () => false,
+  items,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  onInputValueChange,
+  onItemSelect,
+  onOpenChange,
+  open: openProp,
+  value: valueProp
+}) {
+  const components = useResponsiveMatches({
+    base: {
+      Content: ComboboxDialogContent,
+      Root: IconMagnifyingGlass.Dialog,
+      Trigger: IconMagnifyingGlass.DialogTrigger
+    },
+    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
+  });
+  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,
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      onInputValueChange,
+      onItemSelect,
+      open,
+      setOpen,
+      value,
+      children
+    }
+  ) });
+}
+Combobox.displayName = "@optiaxiom/react/Combobox";
+
+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(IconMagnifyingGlass.ListboxCheckboxItem, { children }) });
+});
+ComboboxCheckboxItem.displayName = "@optiaxiom/react/ComboboxCheckboxItem";
+
+const ComboboxContentImpl = React.forwardRef(({ children, ...props }, ref) => {
+  const { setPlaced } = useCommandContext("ComboboxContentImpl");
+  React.useEffect(() => {
+    setPlaced(true);
+  }, [setPlaced]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { ref, ...props, children });
+});
+ComboboxContentImpl.displayName = "@optiaxiom/react/ComboboxContentImpl";
+
+const ComboboxContent = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    const p = useResponsiveMatches({
+      base: "8",
+      sm: "4"
+    });
+    const { labelId } = IconMagnifyingGlass.useFieldContext();
+    const {
+      components,
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      onInputValueChange,
+      onItemSelect,
+      value
+    } = useComboboxContext("ComboboxContent");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.Content,
+      {
+        "aria-labelledby": labelId,
+        overflow: "hidden",
+        p,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Command,
+          {
+            isItemDisabled,
+            items,
+            itemToKey,
+            itemToString,
+            onInputValueChange,
+            onItemSelect,
+            open: true,
+            selectedItem: null,
+            stateReducer: (state, actionAndChanges) => {
+              const { changes, type } = actionAndChanges;
+              switch (type) {
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case downshift.useCombobox.stateChangeTypes.ItemClick:
+                  return {
+                    ...changes,
+                    /**
+                     * Keep the selected option highlighted rather than resetting to -1
+                     */
+                    highlightedIndex: state.highlightedIndex
+                  };
+                default:
+                  return changes;
+              }
+            },
+            value,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxContentImpl, { children })
+          }
+        )
+      }
+    );
+  }
+);
+ComboboxContent.displayName = "@optiaxiom/react/ComboboxContent";
+
+const ComboboxEmpty = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxEmpty, { ref, ...props });
+  }
+);
+ComboboxEmpty.displayName = "@optiaxiom/react/ComboboxEmpty";
+
+const ComboboxFooter = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxFooter, { ref, ...props });
+  }
+);
+ComboboxFooter.displayName = "@optiaxiom/react/ComboboxFooter";
+
+const ComboboxGroup = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxGroup, { ref, ...props });
+  }
+);
+ComboboxGroup.displayName = "@optiaxiom/react/ComboboxGroup";
+
+const ComboboxInput = React.forwardRef(
+  (props, ref) => {
+    const { downshift, highlightedItem } = useCommandContext("ComboboxInput");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CommandInput,
+      {
+        htmlSize: 1,
+        m: "4",
+        onKeyDown: (event) => {
+          if (event.key === " " && highlightedItem) {
+            event.preventDefault();
+            downshift.selectItem(highlightedItem);
+          }
+        },
+        ref,
+        ...props
+      }
+    );
+  }
+);
+ComboboxInput.displayName = "@optiaxiom/react/ComboboxInput";
+
+const ComboboxLabel = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.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 }) });
+});
+ComboboxRadioItem.displayName = "@optiaxiom/react/ComboboxRadioItem";
+
+const ComboboxScrollArea = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxScrollArea, { ref, ...props });
+});
+ComboboxScrollArea.displayName = "@optiaxiom/react/ComboboxScrollArea";
+
+const ComboboxSeparator = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSeparator, { ref, ...props });
+});
+ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
+
+const ComboboxTrigger = React.forwardRef(({ asChild, children, ...props }, outerRef) => {
+  const { components, setOpen } = useComboboxContext("ComboboxTrigger");
+  const buttonRef = React.useRef(null);
+  const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
+  const { labelId } = IconMagnifyingGlass.useFieldContext();
+  React.useEffect(() => {
+    if (!labelId || !buttonRef.current) {
+      return;
+    }
+    const button = buttonRef.current;
+    const label = document.getElementById(labelId);
+    if (!label) {
+      return;
+    }
+    const onLabelClick = () => button.focus();
+    label.addEventListener("click", onLabelClick);
+    return () => label.removeEventListener("click", onLabelClick);
+  }, [labelId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.Trigger,
+    {
+      "aria-labelledby": labelId,
+      asChild: true,
+      onKeyDown: (event) => {
+        switch (event.key) {
+          case "ArrowDown":
+          case "ArrowUp":
+            setOpen(true);
+        }
+      },
+      ref,
+      role: "combobox",
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.AngleMenuButton, { children })
+    }
+  );
+});
+ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
+
+const ComboboxValue = React.forwardRef(
+  ({ children, placeholder, ...props }, ref) => {
+    const { itemToString, value: valueContext } = useComboboxContext("ComboboxValue");
+    const value = React.useMemo(
+      () => 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: [
+      value.length,
+      " selected"
+    ] }) }) : placeholder });
+  }
+);
+ComboboxValue.displayName = "@optiaxiom/react/ComboboxValue";
+
+const IconSort = IconMagnifyingGlass.withIcon(
+  {
+    height: 12,
+    name: "IconSort",
+    width: 14
+  },
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M3.88274 5.25H10.0937C10.6562 5.25 10.9609 4.57031 10.539 4.14844L7.44524 0.960938C7.32805 0.820312 7.16399 0.75 6.99993 0.75C6.83586 0.75 6.64836 0.820312 6.53118 0.960938L3.43743 4.14844C3.01555 4.57031 3.32024 5.25 3.88274 5.25ZM10.0937 6.75H3.88274C3.32024 6.75 3.01555 7.45312 3.43743 7.875L6.53118 11.0625C6.64836 11.2031 6.81243 11.25 6.99993 11.25C7.16399 11.25 7.32805 11.2031 7.44524 11.0625L10.539 7.875C10.9609 7.45312 10.6562 6.75 10.0937 6.75Z",
+      fill: "currentColor"
+    }
+  )
+);
+
+const IconSortDown = IconMagnifyingGlass.withIcon(
+  {
+    height: 12,
+    name: "IconSortDown",
+    width: 14
+  },
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M10.5156 5.78906L7.53907 8.78906C7.375 8.92969 7.1875 9 7 9C6.78907 9 6.60157 8.92969 6.46094 8.78906L3.48438 5.78906C3.25 5.57812 3.17969 5.25 3.29688 4.96875C3.41407 4.6875 3.69532 4.5 4 4.5H9.97657C10.2813 4.5 10.5391 4.6875 10.6563 4.96875C10.7734 5.25 10.7266 5.57812 10.5156 5.78906Z",
+      fill: "currentColor"
+    }
+  )
+);
+
+const IconSortUp = IconMagnifyingGlass.withIcon(
+  {
+    height: 12,
+    name: "IconSortUp",
+    width: 14
+  },
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M3.46099 6.23438L6.43756 3.23438C6.60162 3.09375 6.78912 3 7.00006 3C7.18756 3 7.37506 3.09375 7.51568 3.23438L10.4922 6.23438C10.7032 6.44531 10.7735 6.77344 10.6563 7.05469C10.5391 7.33594 10.2813 7.5 9.97662 7.5H4.00006C3.69537 7.5 3.41412 7.33594 3.29693 7.05469C3.17974 6.77344 3.25006 6.44531 3.46099 6.23438Z",
+      fill: "currentColor"
+    }
+  )
+);
+
+var cell$2 = IconMagnifyingGlass.recipeRuntime({base:'_1pkyiu4'});
+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'},'_19se4n1']});
+
+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 }) }) }));
+TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
+
+var button = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'ka7ruu','toplv5']});
+var icon = IconMagnifyingGlass.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1yjmu2n'],variants:{active:{false:'_1oame5a',true:'_1e7j5ao'},muted:{false:{},true:'_1f00x7k'}}});
+
+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" : 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,
+        sortDir && /* @__PURE__ */ jsxRuntime.jsxs(reactVisuallyHidden.VisuallyHidden, { children: [
+          "sorted ",
+          sortDir === "asc" ? "ascending" : "descending"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Grid, { placeItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.Icon,
+            {
+              asChild: true,
+              ...icon({
+                active: sortDir === false,
+                muted: !sortDir
+              }),
+              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, {}) })
+        ] })
+      ] }) }) : children
+    }
+  );
+});
+DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
+
+var table$1 = IconMagnifyingGlass.recipeRuntime({base:[{color:'fg.default',fontSize:'md'},'tglhfi'],variants:{layout:{auto:[{w:'full'},'piil9h'],fixed:[{w:'fit'},'biihjo']}}});
+var wrapper = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'nlm2fw']});
+
+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 }) }) })
+);
+Table.displayName = "@optiaxiom/react/Table";
+
+var body = IconMagnifyingGlass.recipeRuntime({base:['zmgrgg']});
+
+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 }) })
+);
+TableBody.displayName = "@optiaxiom/react/TableBody";
+
+var cell$1 = IconMagnifyingGlass.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'dkboez']});
+
+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 }) });
+  }
+);
+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 }) }));
+TableHeader.displayName = "@optiaxiom/react/TableHeader";
+
+var row = IconMagnifyingGlass.recipeRuntime({base:['jpso76',{transition:'colors',w:'full'},'_1fa0y2h']});
+
+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 }) })
+);
+TableRow.displayName = "@optiaxiom/react/TableRow";
+
+var cell = IconMagnifyingGlass.recipeRuntime({base:['_9zg2pa'],variants:{pinned:{left:'u4bbji',right:'sdm6uy'},pinnedType:{body:'l1akui',header:{}}}});
+var cellOffsetVar = 'var(--_13mxk2m)';
+var cellSizeVar = 'var(--b669pf)';
+var header = IconMagnifyingGlass.recipeRuntime({base:['_183xdxw']});
+var leftTotalSizeVar = 'var(--_3gyhym)';
+var rightTotalSizeVar = 'var(--_14j1dyj)';
+var table = IconMagnifyingGlass.recipeRuntime({base:'d7848j',variants:{pinned:{both:'_1585f9r',left:'_1iclc34',none:{},right:'vk97ad'}}});
+
+const DataTable = React.forwardRef(
+  ({ table: table$1, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      IconMagnifyingGlass.Box,
+      {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        maxW: "full",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Table,
+            {
+              layout: "fixed",
+              style: dynamic.assignInlineVars({
+                [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
+                [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
+              }),
+              ...table({
+                pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
+              }),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
+                  DataTableHeaderCell,
+                  {
+                    header,
+                    style: {
+                      ...dynamic.assignInlineVars({
+                        [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                        [cellSizeVar]: `${header.getSize()}px`
+                      })
+                    },
+                    ...cell({
+                      pinned: header.column.getIsPinned() || void 0,
+                      pinnedType: header.column.getIsPinned() ? "header" : void 0
+                    }),
+                    children: header.isPlaceholder ? null : reactTable.flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )
+                  },
+                  header.id
+                )) }, 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`
+                        })
+                      },
+                      ...cell({
+                        pinned: cell$1.column.getIsPinned() || void 0,
+                        pinnedType: cell$1.column.getIsPinned() ? "body" : void 0
+                      }),
+                      children: reactTable.flexRender(
+                        cell$1.column.columnDef.cell,
+                        cell$1.getContext()
+                      )
+                    },
+                    cell$1.id
+                  );
+                }) }, row.id)) })
+              ]
+            }
+          ),
+          table$1.getPageCount() > 1 && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { mt: "8", children: /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.Pagination,
+            {
+              onPageChange: (newPage) => table$1.setPageIndex(newPage - 1),
+              page: table$1.getState().pagination.pageIndex + 1,
+              total: table$1.getPageCount()
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+DataTable.displayName = "@optiaxiom/react/DataTable";
+
+const IconCalendar = IconMagnifyingGlass.withIcon(
+  {
+    name: "IconCalendar"
+  },
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M13.5 0.5C13.5 0.223858 13.2761 0 13 0C12.7239 0 12.5 0.223858 12.5 0.5V2H7.5V0.5C7.5 0.223858 7.27614 0 7 0C6.72386 0 6.5 0.223858 6.5 0.5V2H5.33333C4.04467 2 3 3.04467 3 4.33333V13.6667C3 14.9553 4.04467 16 5.33333 16H14.6667C15.9553 16 17 14.9553 17 13.6667V4.33333C17 3.04467 15.9553 2 14.6667 2H13.5V0.5ZM5.33333 3H7H13H14.6667C15.403 3 16 3.59695 16 4.33333V5.16666H4V4.33333C4 3.59695 4.59695 3 5.33333 3ZM4 6.16666V13.6667C4 14.403 4.59695 15 5.33333 15H14.6667C15.403 15 16 14.403 16 13.6667V6.16666H4Z",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  )
+);
+
+const useCalendarSupported = () => {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  return mounted ? CSS.supports("selector(::-webkit-datetime-edit)") : null;
+};
+
+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) : void 0;
+  return isValidDate(rawDate) ? new Date(rawDate.getTime() + (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3) : void 0;
+}
+const isValidDate = (date) => date ? !isNaN(+date) : false;
+
+const DateInput = React.forwardRef(
+  ({ disabled, max, min, onChange, ...props }, outerRef) => {
+    const [open, setOpen] = React.useState(false);
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      defaultProp: props.defaultValue,
+      prop: props.value
+    });
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    const maxDate = max ? new Date(max) : void 0;
+    const minDate = min ? new Date(min) : void 0;
+    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,
+        {
+          addonAfter: !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.PopoverTrigger,
+            {
+              appearance: "subtle",
+              "aria-label": "Show date picker",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
+              size: "sm"
+            }
+          ),
+          disabled,
+          max,
+          min,
+          onChange: (event) => {
+            onChange?.(event);
+            setValue(event.target.value);
+          },
+          onClick: (e) => {
+            e.preventDefault();
+          },
+          onKeyDown: (e) => {
+            if (e.key === " ") {
+              e.preventDefault();
+              setOpen(true);
+            }
+          },
+          ref,
+          type: "date",
+          ...props
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.PopoverContent,
+        {
+          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)
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+DateInput.displayName = "@optiaxiom/react/DateInput";
+
+var mark = IconMagnifyingGlass.recipeRuntime({base:'_6rkrco'});
+
+const useHighlightedChunks = (content, query) => {
+  const terms = React.useMemo(
+    () => (Array.isArray(query) ? query : query ? [query] : []).map((q) => typeof q === "string" ? q.trim() : q).filter(Boolean),
+    [query]
+  );
+  if (terms.length === 0) {
+    return [{ chunk: content, highlighted: false }];
+  }
+  const pattern = new RegExp(
+    "(" + terms.map(
+      (term) => term instanceof RegExp ? term.source : `(?![^<>]*>)(^|\\b)(?=[^/.])${escapeRegExp(term)}`
+    ).join("|") + ")",
+    "gi"
+  );
+  return content.split(pattern).map((chunk) => ({ chunk, highlighted: pattern.test(chunk) }));
+};
+function escapeRegExp(string) {
+  return string.replace(/[/\-\\^$*+?.()|[\]{}]/g, "\\$&");
+}
+
+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 }) })
+    ) : chunk }, index)) });
+  }
+);
+Highlight.displayName = "@optiaxiom/react/Highlight";
+
+var editor = IconMagnifyingGlass.recipeRuntime({base:'_1u8my2m',variants:{empty:{false:{},true:'_44ar1f'}}});
+var input$1 = IconMagnifyingGlass.recipeRuntime({base:'rcxj6e'});
+
+const InlineInput = React.forwardRef(
+  ({
+    className,
+    defaultValue = "",
+    disabled,
+    label,
+    multiline,
+    onValueChange,
+    placeholder,
+    value: valueProp,
+    ...props
+  }, ref) => {
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+      prop: valueProp
+    });
+    const editorRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!editorRef.current) {
+        return;
+      }
+      const clippedValue = multiline || !value?.includes("\n") ? value : value?.slice(0, value.indexOf("\n"));
+      if (getText(editorRef.current) !== clippedValue) {
+        if (document.activeElement === editorRef.current) {
+          const selection = window.getSelection();
+          if (!selection) {
+            return;
+          }
+          selection.getRangeAt(0).selectNodeContents(editorRef.current);
+          document.execCommand("insertHTML", false, clippedValue);
+        } else {
+          editorRef.current.innerText = clippedValue ?? "null";
+        }
+      }
+    }, [multiline, value]);
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref, ...input$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        "aria-multiline": multiline,
+        "aria-readonly": disabled,
+        contentEditable: !disabled && "plaintext-only",
+        "data-placeholder": placeholder ?? label,
+        onInput: (event) => {
+          setValue(getText(event.currentTarget));
+        },
+        onKeyDown: (event) => {
+          if (!multiline && event.key === "Enter") {
+            event.preventDefault();
+          }
+        },
+        onPaste: (event) => {
+          const value2 = event.clipboardData.getData("text");
+          if (!multiline && value2.includes("\n")) {
+            event.preventDefault();
+            const clippedValue = value2.slice(0, value2.indexOf("\n"));
+            document.execCommand("insertHTML", false, clippedValue);
+            setValue(getText(event.currentTarget));
+          }
+        },
+        ref: editorRef,
+        role: "textbox",
+        spellCheck: "true",
+        ...label && { "aria-label": label },
+        ...editor({ empty: !value?.length })
+      }
+    ) });
+  }
+);
+InlineInput.displayName = "@optiaxiom/react/InlineInput";
+function getText(element) {
+  const text = element.innerText;
+  if (text.endsWith("\n")) {
+    return text.slice(0, -1);
+  }
+  return text;
+}
+
+const Layout = React.forwardRef(
+  ({ children, header, sidenav, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { gap: "0", h: "full", ref, ...props, children: [
+      header,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        IconMagnifyingGlass.Flex,
+        {
+          alignItems: "start",
+          flexDirection: "row",
+          gap: "0",
+          justifyContent: "start",
+          children: [
+            sidenav,
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.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,
+      {
+        alignItems: "stretch",
+        "aria-labelledby": props["aria-label"] ? void 0 : groupId,
+        asChild: true,
+        defaultOpen: true,
+        display: "flex",
+        flexDirection: "column",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("li", { ref, children })
+      }
+    ) });
+  }
+);
+NavGroup.displayName = "@optiaxiom/react/NavGroup";
+
+const NavGroupContent = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.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("NavGroupTrigger");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.DisclosureTrigger,
+      {
+        chevronPosition: "end",
+        color: "fg.tertiary",
+        fontSize: "sm",
+        h: "sm",
+        id,
+        mb: "4",
+        mt: "8",
+        px: "12",
+        ref,
+        w: "auto",
+        ...props,
+        children
+      }
+    );
+  }
+);
+NavGroupTrigger.displayName = "@optiaxiom/react/NavGroupTrigger";
+
+const NavSeparator = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Separator, { flex: "none", mx: "12", my: "8", ref, ...props })
+);
+NavSeparator.displayName = "@optiaxiom/react/NavSeparator";
+
+var pill = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'_1b0tcjt'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+
+const Pill = React.forwardRef(
+  ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        asChild: true,
+        "data-disabled": disabled ? "" : void 0,
+        ...pill({ size }, className),
+        ...boxProps,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { disabled, ref, ...restProps, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { fontSize: "inherit", truncate: true, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, h: "12", ml: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconX, {}) })
+        ] })
+      }
+    );
+  }
+);
+Pill.displayName = "@optiaxiom/react/Pill";
+
+const PillGroup = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "12", ref, ...props, children });
+  }
+);
+PillGroup.displayName = "@optiaxiom/react/PillGroup";
+
+const [SelectContextProvider, useSelectContext] = reactContext.createContext("Select");
+
+function Select({
+  children,
+  defaultOpen = false,
+  defaultValue,
+  disabled,
+  items,
+  itemToKey = (value2) => value2,
+  itemToString = (value2) => value2 ? String(value2) : "",
+  onOpenChange,
+  onValueChange,
+  open,
+  value,
+  ...props
+}) {
+  const [selectedItem, setSelectedItem] = reactUseControllableState.useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: value
+  });
+  const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: open
+  });
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    isOpen,
+    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
+  );
+  const downshift$1 = downshift.useSelect({
+    ...props,
+    highlightedIndex,
+    isOpen: placed,
+    items,
+    itemToKey,
+    itemToString,
+    onHighlightedIndexChange(changes) {
+      setHighlightedIndex(changes.highlightedIndex);
+    },
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      setIsOpen(isOpen2);
+    },
+    onSelectedItemChange({ selectedItem: selectedItem2 }) {
+      setSelectedItem(selectedItem2);
+    },
+    selectedItem: selectedItem ?? null
+  });
+  downshift$1.getMenuProps({}, { suppressRefError: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SelectContextProvider,
+    {
+      disabled,
+      downshift: downshift$1,
+      highlightedItem: items[highlightedIndex],
+      isOpen,
+      items,
+      itemToKey,
+      itemToString,
+      placed,
+      selectedItem,
+      setPlaced,
+      children
+    }
+  ) });
+}
+Select.displayName = "@optiaxiom/react/Select";
+
+var content = IconMagnifyingGlass.recipeRuntime({base:['_1yuh2lc']});
+
+const SelectContent = React.forwardRef(
+  ({
+    align = "start",
+    children,
+    className,
+    loading,
+    side = "bottom",
+    ...props
+  }, ref) => {
+    const { boxProps, restProps } = IconMagnifyingGlass.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,
+      {
+        asChild: true,
+        maxH: "sm",
+        minW: loading ? "trigger" : void 0,
+        provider: "popper",
+        ...content({}, className),
+        ...boxProps,
+        ...downshift.getMenuProps(
+          { ref, ...restProps },
+          { suppressRefError: !placed }
+        ),
+        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
+          }
+        )
+      }
+    ) }) });
+  }
+);
+SelectContent.displayName = "@optiaxiom/react/SelectContent";
+
+const SelectGroup = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxGroup, { ref, ...props });
+  }
+);
+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 });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-selected": selectedItem === item ? "" : void 0,
+        ref,
+        size,
+        ...itemProps,
+        children
+      }
+    );
+  }
+);
+SelectItem.displayName = "@optiaxiom/react/SelectItem";
+
+const SelectLabel = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.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 }) });
+  }
+);
+SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
+
+const SelectSeparator = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSeparator, { ref, ...props });
+  }
+);
+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 buttonRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!labelId || !buttonRef.current) {
+        return;
+      }
+      const button = buttonRef.current;
+      const label = document.getElementById(labelId);
+      if (!label) {
+        return;
+      }
+      const onLabelClick = () => button.focus();
+      label.addEventListener("click", onLabelClick);
+      return () => label.removeEventListener("click", onLabelClick);
+    }, [labelId]);
+    const [focusOnOpen] = React.useState(isOpen);
+    React.useEffect(
+      function() {
+        if (focusOnOpen && buttonRef.current) {
+          buttonRef.current.focus();
+        }
+      },
+      [focusOnOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactPopper.PopperAnchor,
+      {
+        asChild: true,
+        ...props,
+        ...downshift.getToggleButtonProps({
+          disabled,
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            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 }) })
+      }
+    );
+  }
+);
+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) });
+  }
+);
+SelectValue.displayName = "@optiaxiom/react/SelectValue";
+
+const [SpotlightContextProvider, useSpotlightContext] = reactContext.createContext("Spotlight");
+
+function Spotlight({
+  children,
+  defaultOpen = false,
+  inputValue,
+  isItemDisabled = () => false,
+  items,
+  itemToKey = (value) => value,
+  itemToString = (value) => value ? String(value) : "",
+  itemToSubItems,
+  onInputValueChange,
+  onItemSelect,
+  onOpenChange,
+  open: openProp
+}) {
+  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(IconMagnifyingGlass.Dialog, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SpotlightContextProvider,
+    {
+      inputValue,
+      isItemDisabled,
+      items,
+      itemToKey,
+      itemToString,
+      itemToSubItems,
+      onInputValueChange,
+      onItemSelect,
+      open,
+      setOpen,
+      children
+    }
+  ) });
+}
+Spotlight.displayName = "@optiaxiom/react/Spotlight";
+
+const SpotlightContent = React.forwardRef(({ "aria-label": ariaLabel, children, size: _size, ...props }, ref) => {
+  const {
+    inputValue,
+    isItemDisabled,
+    items,
+    itemToKey,
+    itemToString,
+    itemToSubItems,
+    onInputValueChange,
+    onItemSelect
+  } = useSpotlightContext("SpotlightContent");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    IconMagnifyingGlass.DialogContent,
+    {
+      gap: "0",
+      overflow: "hidden",
+      pb: "24",
+      ref,
+      transitionType: "pop",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Title, { children: ariaLabel ?? "Quick search" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Command,
+          {
+            inputValue,
+            isItemDisabled,
+            items,
+            itemToKey,
+            itemToString,
+            itemToSubItems,
+            onInputValueChange,
+            onItemSelect,
+            open: true,
+            selectedItem: null,
+            stateReducer: (state, actionAndChanges) => {
+              const { changes, type } = actionAndChanges;
+              switch (type) {
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case downshift.useCombobox.stateChangeTypes.ItemClick:
+                  return {
+                    ...changes,
+                    /**
+                     * Keep the selected option highlighted rather than resetting to -1
+                     */
+                    highlightedIndex: state.highlightedIndex
+                  };
+                default:
+                  return changes;
+              }
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(CommandListbox, { children })
+          }
+        )
+      ]
+    }
+  );
+});
+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 });
+  }
+);
+SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
+
+var input = IconMagnifyingGlass.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'slpxzp']});
+
+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.jsx(
+            IconMagnifyingGlass.DialogClose,
+            {
+              appearance: "default",
+              fontSize: "xs",
+              fontWeight: "500",
+              h: "xs",
+              size: "sm",
+              children: "ESC"
+            }
+          )
+        ] }),
+        addonBefore: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconMagnifyingGlass, {}),
+        ref,
+        size: "xl",
+        ...input({}, className),
+        ...props
+      }
+    );
+  }
+);
+SpotlightInput.displayName = "@optiaxiom/react/SpotlightInput";
+
+const SpotlightItem = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(CommandItem, { ref, ...props })
+);
+SpotlightItem.displayName = "@optiaxiom/react/SpotlightItem";
+
+const SpotlightLabel = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
+      {
+        color: "fg.default",
+        fontSize: "lg",
+        fontWeight: "600",
+        pb: "12",
+        pt: "16",
+        px: "24",
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
+
+var item$1 = IconMagnifyingGlass.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_3k35r8']});
+
+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,
+    {
+      addonAfter: addonAfter ?? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, {}),
+      description: description && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.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 }));
+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 }) });
+  }
+);
+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 }) });
+  }
+);
+SpotlightSub.displayName = "@optiaxiom/react/SpotlightSub";
+
+const CommandSubItem = React.forwardRef(
+  ({ children, item, onClick, onMouseDown, onMouseMove, selected, ...props }, outerRef) => {
+    const {
+      downshift,
+      highlightedItem,
+      highlightedSubIndex,
+      isItemDisabled,
+      items,
+      itemToSubItems,
+      setHighlightedIndex,
+      setHighlightedSubIndex,
+      value
+    } = useCommandContext("CommandSubItem");
+    const { item: parentItem } = useCommandSubContext("CommandSubItem");
+    const subItems = itemToSubItems?.(parentItem) ?? [];
+    const highlightedSubItem = highlightedItem === parentItem && highlightedSubIndex !== -1 ? subItems[highlightedSubIndex] : null;
+    const subIndex = subItems.indexOf(item);
+    const disabled = isItemDisabled(item, subIndex);
+    const highlighted = highlightedSubItem === item;
+    const isSelected = selected ?? value?.has(item);
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    React.useEffect(() => {
+      if (innerRef.current && isSelected) {
+        innerRef.current.scrollIntoView({ block: "nearest" });
+      }
+    }, [isSelected]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CommandFocusableItem,
+      {
+        "aria-disabled": disabled,
+        "aria-selected": isSelected,
+        "data-disabled": disabled ? "" : void 0,
+        "data-highlighted": highlighted ? "" : void 0,
+        onClick: (event) => {
+          onClick?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          event.preventDefault();
+          downshift.selectItem(item);
+        },
+        onMouseDown: (event) => {
+          onMouseDown?.(event);
+          event.preventDefault();
+        },
+        onMouseMove: (event) => {
+          onMouseMove?.(event);
+          if (event.defaultPrevented) {
+            return;
+          }
+          setHighlightedIndex(items.indexOf(parentItem), "pointer");
+          setHighlightedSubIndex(subIndex, "pointer");
+        },
+        ref,
+        role: "option",
+        ...props,
+        children
+      }
+    );
+  }
+);
+CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
+
+var item = IconMagnifyingGlass.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_12hxeib',true:'_1emi3z0'}}});
+
+const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CommandSubItem,
+    {
+      asChild: true,
+      ref,
+      selected,
+      ...item({ active: selected || false }, className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.Badge,
+        {
+          intent: selected ? "information" : "neutral",
+          variant: selected ? "strong" : "subtle",
+          children
+        }
+      )
+    }
+  );
+});
+SpotlightSubItem.displayName = "@optiaxiom/react/SpotlightSubItem";
+
+const DEFAULT_HOTKEY = "mod+K";
+const SpotlightTrigger = React.forwardRef(({ addonAfter, children, hotkey = DEFAULT_HOTKEY, ...props }, ref) => {
+  const { open, setOpen } = useSpotlightContext("SpotlightTrigger");
+  useHotkeys([[hotkey, () => setOpen(!open)]]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.DialogTrigger,
+    {
+      addonAfter,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconMagnifyingGlass, {}),
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.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'},'pmtq1l']});
+
+const SubNav = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Flex,
+      {
+        borderColor: "border.tertiary",
+        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,
+          {
+            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;
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
+exports.BreadcrumbItem = BreadcrumbItem;
+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;
+exports.ComboboxCheckboxItem = ComboboxCheckboxItem;
+exports.ComboboxContent = ComboboxContent;
+exports.ComboboxEmpty = ComboboxEmpty;
+exports.ComboboxFooter = ComboboxFooter;
+exports.ComboboxGroup = ComboboxGroup;
+exports.ComboboxInput = ComboboxInput;
+exports.ComboboxItem = ComboboxItem;
+exports.ComboboxLabel = ComboboxLabel;
+exports.ComboboxRadioItem = ComboboxRadioItem;
+exports.ComboboxScrollArea = ComboboxScrollArea;
+exports.ComboboxSeparator = ComboboxSeparator;
+exports.ComboboxTrigger = ComboboxTrigger;
+exports.ComboboxValue = ComboboxValue;
+exports.Command = Command;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandListbox = CommandListbox;
+exports.DataTable = DataTable;
+exports.DataTableHeaderCell = DataTableHeaderCell;
+exports.DateInput = DateInput;
+exports.Highlight = Highlight;
+exports.InlineInput = InlineInput;
+exports.Layout = Layout;
+exports.NavGroup = NavGroup;
+exports.NavGroupContent = NavGroupContent;
+exports.NavGroupTrigger = NavGroupTrigger;
+exports.NavSeparator = NavSeparator;
+exports.Pill = Pill;
+exports.PillGroup = PillGroup;
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectLabel = SelectLabel;
+exports.SelectRadioItem = SelectRadioItem;
+exports.SelectSeparator = SelectSeparator;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;
+exports.Spotlight = Spotlight;
+exports.SpotlightContent = SpotlightContent;
+exports.SpotlightEmpty = SpotlightEmpty;
+exports.SpotlightInput = SpotlightInput;
+exports.SpotlightItem = SpotlightItem;
+exports.SpotlightLabel = SpotlightLabel;
+exports.SpotlightRadioItem = SpotlightRadioItem;
+exports.SpotlightScrollArea = SpotlightScrollArea;
+exports.SpotlightSub = SpotlightSub;
+exports.SpotlightSubItem = SpotlightSubItem;
+exports.SpotlightTrigger = SpotlightTrigger;
+exports.SubNav = SubNav;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCell = TableCell;
+exports.TableHeader = TableHeader;
+exports.TableHeaderCell = TableHeaderCell;
+exports.TableRow = TableRow;