@optiaxiom/react 1.3.6 → 1.4.1

package/dist/cjs/index.js

@@ -4,90 +4,109 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactId = require('@radix-ui/react-id');
 var React = require('react');
-var Skeleton = require('./Skeleton-CX8LlUgm.js');
-require('./assets/src/layers/layers.css.ts.vanilla-VxRPX4pc.css');
-require('./assets/src/alert/Alert.css.ts.vanilla-x5MBLJjV.css');
+var IconMagnifyingGlass = require('./IconMagnifyingGlass-BCpZ15FM.js');
+require('./assets/src/layers/layers.css.ts.vanilla-CN-ptlpS.css');
+require('./assets/src/alert/Alert.css.ts.vanilla-D8veuEgh.css');
 var RadixAlertDialog = require('@radix-ui/react-alert-dialog');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactContext = require('@radix-ui/react-context');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-DhDjcUKh.css');
-require('./assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-CuKYABvu.css');
+require('./assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-BVTQjFww.css');
+require('./assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-DbtOH5Y9.css');
 var RadixAvatar = require('@radix-ui/react-avatar');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-mPaslDnv.css');
-require('./assets/src/avatar/Avatar.css.ts.vanilla-BUjM4B0l.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CbMg3mAn.css');
+require('./assets/src/avatar/Avatar.css.ts.vanilla-DHdaU24C.css');
 var globals = require('@optiaxiom/globals');
 var RadixToast = require('@radix-ui/react-toast');
-require('./assets/src/toast/ToastProvider.css.ts.vanilla-DhuQQNh1.css');
-require('./assets/src/toast/Toast.css.ts.vanilla-xBmkp-cY.css');
-var reactPortal = require('@radix-ui/react-portal');
+require('./assets/src/toast/ToastProvider.css.ts.vanilla-2f0nruoM.css');
+require('./assets/src/toast/Toast.css.ts.vanilla-BsYn9LQw.css');
 var shim = require('use-sync-external-store/shim');
 var reactSlot = require('@radix-ui/react-slot');
-require('./assets/src/badge/Badge.css.ts.vanilla-BSKnicwL.css');
-require('./assets/src/banner/Banner.css.ts.vanilla-CfUWRA7l.css');
-require('./assets/src/code/Code.css.ts.vanilla-WtWBTYIX.css');
+require('./assets/src/badge/Badge.css.ts.vanilla-BNBal40N.css');
+require('./assets/src/banner/Banner.css.ts.vanilla-CxVlr8nN.css');
+require('./assets/src/code/Code.css.ts.vanilla-CWs0Ds6K.css');
+var reactTable = require('@tanstack/react-table');
+var reactVirtual = require('@tanstack/react-virtual');
+require('./assets/src/table/TableRow.css.ts.vanilla-y2sGvAVd.css');
+require('./assets/src/data-table/DataTableBody.css.ts.vanilla-B_BvVbLX.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-BQVW2oFL.css');
+require('./assets/src/data-table/DataTableFooter.css.ts.vanilla-Dfr-ZVsQ.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-Kyyq361k.css');
 var RadixCollapsible = require('@radix-ui/react-collapsible');
-require('./assets/src/disclosure/DisclosureContent.css.ts.vanilla-DPZl5rIE.css');
-require('./assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-C7s7QvBu.css');
+require('./assets/src/disclosure/DisclosureContent.css.ts.vanilla-C0URMyiR.css');
+require('./assets/src/disclosure/DisclosureTrigger.css.ts.vanilla-B7jh3O1M.css');
 var RadixMenu = require('@radix-ui/react-dropdown-menu');
 var RadixLabel = require('@radix-ui/react-label');
-require('./assets/src/indicator/Indicator.css.ts.vanilla-DsiB7ym7.css');
-require('./assets/src/kbd/Kbd.css.ts.vanilla-UZGrMytF.css');
-require('./assets/src/nav/Nav.css.ts.vanilla-Bvc0evh9.css');
-require('./assets/src/nav/NavAccountItem.css.ts.vanilla-mIEBuOeQ.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-mPaslDnv.css');
-require('./assets/src/button/ButtonRoot.css.ts.vanilla-Bd2dzV48.css');
-require('./assets/src/nav/NavItem.css.ts.vanilla-wxer8oAG.css');
+require('./assets/src/indicator/Indicator.css.ts.vanilla-DQHIlsmO.css');
+require('./assets/src/kbd/Kbd.css.ts.vanilla-EtR-xQEZ.css');
+var clsx = require('clsx');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CbMg3mAn.css');
+require('./assets/src/button/ButtonRoot.css.ts.vanilla-BSPjnfiO.css');
+require('./assets/src/label-menu-button/LabelMenuButton.css.ts.vanilla-BAbMKRAc.css');
+require('./assets/src/nav/Nav.css.ts.vanilla-CA3M5RMi.css');
+require('./assets/src/nav/NavAccountItem.css.ts.vanilla-DkOGnUhV.css');
+require('./assets/src/nav/NavItem.css.ts.vanilla-BmhlgdcD.css');
 var ProgressPrimitive = require('@radix-ui/react-progress');
-require('./assets/src/progress/Progress.css.ts.vanilla-CME4yWj8.css');
-require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-mPaslDnv.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-Byr6x4TG.css');
-require('./assets/src/radio/Radio.css.ts.vanilla-DSqYFSt3.css');
-require('./assets/src/search-input/SearchInput.css.ts.vanilla-DScYYTrA.css');
+require('./assets/src/progress/Progress.css.ts.vanilla-D-NgPzhe.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CbMg3mAn.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-tPLFf0il.css');
+require('./assets/src/radio/Radio.css.ts.vanilla-CZ_lX4GP.css');
+require('./assets/src/search-input/SearchInput.css.ts.vanilla-loiT8Xp2.css');
 var RadixSegmentedControl = require('@radix-ui/react-toggle-group');
-require('./assets/src/sub-nav/SubNav.css.ts.vanilla-Dys_SxLk.css');
+require('./assets/src/sub-nav/SubNav.css.ts.vanilla-B0gztfjn.css');
 var RadixTabs = require('@radix-ui/react-tabs');
-require('./assets/src/tabs/Tabs.css.ts.vanilla-1_GRnWes.css');
-require('./assets/src/tabs/TabsList.css.ts.vanilla-Dyu-fshE.css');
-require('./assets/src/tabs/TabsTrigger.css.ts.vanilla-BrmOiYio.css');
-require('./assets/src/textarea/TextareaAutosize.css.ts.vanilla-0DTaZIBY.css');
+require('./assets/src/tabs/Tabs.css.ts.vanilla-ClVFFFk0.css');
+require('./assets/src/tabs/TabsList.css.ts.vanilla-S7LQ-zuZ.css');
+require('./assets/src/tabs/TabsTrigger.css.ts.vanilla-Cy538bdm.css');
+require('./assets/src/textarea/TextareaAutosize.css.ts.vanilla-DvY4ySKA.css');
 var RadixToggle = require('@radix-ui/react-toggle');
-require('@radix-ui/react-dialog');
-require('./assets/src/dialog/DialogBody.css.ts.vanilla-Cdq4Tadx.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-B3yRYHiN.css');
-require('./assets/src/dialog/DialogContent.css.ts.vanilla-B-s0-vtH.css');
-require('./assets/src/dialog/DialogHeader.css.ts.vanilla-DWMzPbgh.css');
-require('clsx');
-require('./assets/src/input/InputControl.css.ts.vanilla-CBHllHS2.css');
-require('./assets/src/input/InputRoot.css.ts.vanilla-Lozs8z5D.css');
-require('./assets/src/cover/Cover.css.ts.vanilla-6gsANvu_.css');
-require('./assets/src/link/Link.css.ts.vanilla-CkvEyNoz.css');
+require('./assets/src/avatar/AvatarGroup.css.ts.vanilla-CbMg3mAn.css');
+require('./assets/src/actions/ActionsContent.css.ts.vanilla-PBTaIi8C.css');
+require('./assets/src/table/Table.css.ts.vanilla-BBOlyf5V.css');
+require('./assets/src/table/TableBody.css.ts.vanilla-BRWf3Zbv.css');
+require('./assets/src/table/TableCell.css.ts.vanilla-CqSzp-qS.css');
+require('./assets/src/table/TableHeaderCell.css.ts.vanilla-C0eIji4w.css');
+require('./assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-BDXyWNw-.css');
+require('react-day-picker');
+require('@radix-ui/react-popper');
+require('downshift');
 require('@radix-ui/react-tooltip');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-B3OXzCgC.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-C7HPKZUj.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-c1jPN1Np.css');
+require('./assets/src/calendar/CalendarNav.css.ts.vanilla-B4QSEvbK.css');
+require('./assets/src/input/InputControl.css.ts.vanilla-DbwVhapt.css');
+require('./assets/src/input/InputRoot.css.ts.vanilla-DM6baKq4.css');
 require('@radix-ui/react-popover');
+require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-CnU19Zsh.css');
+require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DDTXNzGl.css');
+require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-Dp-MSd5L.css');
+require('./assets/src/listbox/ListboxItem.css.ts.vanilla-7MEw3am_.css');
+require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CeKd3eGS.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-C-wdgTK4.css');
+require('@radix-ui/react-separator');
+require('./assets/src/separator/Separator.css.ts.vanilla-BJyGakBV.css');
+require('./assets/src/switch/Switch.css.ts.vanilla-BtNtEy94.css');
+require('./assets/src/modal/ModalListbox.css.ts.vanilla-BhmlfHSo.css');
+require('@radix-ui/react-dialog');
+require('./assets/src/dialog/DialogBody.css.ts.vanilla-uYY5DsHe.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-CYLY6W0b.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
-require('./assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-r2Ztxx8z.css');
+require('@radix-ui/react-portal');
+require('./assets/src/dialog/DialogContent.css.ts.vanilla-Ce79BS9p.css');
+require('./assets/src/text/Text.css.ts.vanilla-A81NL9nV.css');
 require('@radix-ui/react-visually-hidden');
-require('./assets/src/checkbox/CheckboxControl.css.ts.vanilla-DRdpVsTv.css');
-require('./assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-BJ2L8n3Y.css');
-require('./assets/src/text/Text.css.ts.vanilla-D9k0AUkV.css');
-require('./assets/src/listbox/ListboxItem.css.ts.vanilla-CIuGxGXM.css');
-require('./assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-CXPDyZdx.css');
-require('@tanstack/react-virtual');
-require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-C19bwsLd.css');
-require('./assets/src/switch/Switch.css.ts.vanilla-Bge3BDdC.css');
-require('./assets/src/modal/ModalListbox.css.ts.vanilla-D1q7bCk5.css');
-require('./assets/src/button/ButtonLoadable.css.ts.vanilla-BA6CMfjV.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-BUiI4yI-.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-BCBYncQ0.css');
+require('./assets/src/dialog/DialogHeader.css.ts.vanilla-D5qNkX1z.css');
+require('./assets/src/button/ButtonLoadable.css.ts.vanilla-BxRZfJ1-.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-BTsZSfas.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-DjOc5FtK.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-By86Ua1j.css');
-require('./assets/src/box/Box.css.ts.vanilla-BtJImGZv.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-BQkyIpyI.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-CXwvhHCM.css');
+require('./assets/src/box/Box.css.ts.vanilla-DdWp0jtH.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-doC_eyYQ.css');
+require('./assets/src/link/Link.css.ts.vanilla-DRwyALER.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -117,7 +136,7 @@ var RadixSegmentedControl__namespace = /*#__PURE__*/_interopNamespaceDefault(Rad
 var RadixTabs__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixTabs);
 var RadixToggle__namespace = /*#__PURE__*/_interopNamespaceDefault(RadixToggle);
 
-const IconCircleCheckSolid = Skeleton.withIcon(
+const IconCircleCheckSolid = IconMagnifyingGlass.withIcon(
   {
     name: "IconCircleCheckSolid",
     viewBox: "0 0 512 512"
@@ -132,7 +151,7 @@ const IconCircleCheckSolid = Skeleton.withIcon(
   )
 );
 
-const IconCircleExclamationSolid = Skeleton.withIcon(
+const IconCircleExclamationSolid = IconMagnifyingGlass.withIcon(
   {
     name: "IconCircleExclamationSolid",
     viewBox: "0 0 512 512"
@@ -147,7 +166,7 @@ const IconCircleExclamationSolid = Skeleton.withIcon(
   )
 );
 
-const IconCircleInfoSolid = Skeleton.withIcon(
+const IconCircleInfoSolid = IconMagnifyingGlass.withIcon(
   {
     name: "IconCircleInfoSolid",
     viewBox: "0 0 512 512"
@@ -162,7 +181,7 @@ const IconCircleInfoSolid = Skeleton.withIcon(
   )
 );
 
-const IconTriangleExclamationSolid = Skeleton.withIcon(
+const IconTriangleExclamationSolid = IconMagnifyingGlass.withIcon(
   {
     name: "IconTriangleExclamationSolid",
     viewBox: "0 0 512 512"
@@ -177,9 +196,9 @@ const IconTriangleExclamationSolid = Skeleton.withIcon(
   )
 );
 
-var alert = Skeleton.recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',justifyContent:'space-between',p:'12',pr:'16',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
-var content$3 = Skeleton.recipeRuntime({base:[{flex:'1',gap:'8'},'_1hdovt7']});
-var icon$4 = Skeleton.recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
+var alert = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',justifyContent:'space-between',p:'12',pr:'16',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
+var content$4 = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1',gap:'8'},'bz2fz1']});
+var icon$4 = IconMagnifyingGlass.recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 const mapIntentToIcon$2 = {
   danger: IconCircleExclamationSolid,
@@ -192,7 +211,7 @@ const Alert = React.forwardRef(
   ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
     const labelId = reactId.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.Flex,
+      IconMagnifyingGlass.Flex,
       {
         "aria-labelledby": labelId,
         ref,
@@ -200,16 +219,16 @@ const Alert = React.forwardRef(
         ...alert({ intent }, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, ...icon$4({ intent }), children: React.createElement(mapIntentToIcon$2[intent]) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { id: labelId, ...content$3(), children }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, ...icon$4({ intent }), children: React.createElement(mapIntentToIcon$2[intent]) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { id: labelId, ...content$4(), children }),
           !!onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.Button,
+            IconMagnifyingGlass.Button,
             {
               appearance: "subtle",
               "aria-label": "close",
               color: "fg.default",
               flex: "none",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}),
+              icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconX, {}),
               onClick: onDismiss,
               size: "sm"
             }
@@ -237,11 +256,11 @@ function AlertDialog({
     prop: openProp
   });
   const [presence, setPresence] = React.useState(false);
-  const [nestedDialogCount, setNestedDialogCount] = Skeleton.useNestedDialogCount(
+  const [nestedDialogCount, setNestedDialogCount] = IconMagnifyingGlass.useNestedDialogCount(
     "AlertDialog",
     open
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsxRuntime.jsx(
     RadixAlertDialog__namespace.Root,
     {
       onOpenChange: setOpen,
@@ -263,13 +282,13 @@ function AlertDialog({
 AlertDialog.displayName = "@optiaxiom/react/AlertDialog";
 
 const AlertDialogAction = React.forwardRef(({ appearance = "danger", asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Action, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Action, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Button, { appearance, children }) });
 });
 AlertDialogAction.displayName = "@optiaxiom/react/AlertDialogAction";
 
 const AlertDialogBody = React.forwardRef(
   ({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Flex,
+    IconMagnifyingGlass.Flex,
     {
       asChild: true,
       flex: "1",
@@ -287,38 +306,38 @@ const AlertDialogBody = React.forwardRef(
 AlertDialogBody.displayName = "@optiaxiom/react/AlertDialogBody";
 
 const AlertDialogCancel = React.forwardRef(({ appearance = "subtle", asChild, children = "Cancel", ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Cancel, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Cancel, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Button, { appearance, children }) });
 });
 AlertDialogCancel.displayName = "@optiaxiom/react/AlertDialogCancel";
 
-var backdrop = Skeleton.recipeRuntime({variants:{hidden:{false:{},true:'_1dfqf7i'}}});
-var content$2 = Skeleton.recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'r540t0'],variants:{size:{sm:'_1i61vqk',md:'tuo01o',lg:'_1dr729g'}}});
-var nestedDialogCountVar = 'var(--w3gmir)';
-var root$2 = Skeleton.recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_18p057a']});
+var backdrop = IconMagnifyingGlass.recipeRuntime({variants:{hidden:{false:{},true:'d8i7w5'}}});
+var content$3 = IconMagnifyingGlass.recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'xvfhg7'],variants:{size:{sm:'t0zp4m',md:'v52p3h',lg:'_1mrktry'}}});
+var nestedDialogCountVar = 'var(--wckbp8)';
+var root$2 = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'ibbfbi']});
 
 const AlertDialogContent = React.forwardRef(({ children, size = "sm", style, ...props }, outerRef) => {
   const { nestedDialogCount, open, presence, setPresence } = useAlertDialogContext("@optiaxiom/react/AlertDialogContent");
   const innerRef = React.useRef(null);
   const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.TransitionGroup,
+    IconMagnifyingGlass.TransitionGroup,
     {
       onPresenceChange: setPresence,
       open,
       presence,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RadixAlertDialog__namespace.Portal, { forceMount: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Transition, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.Backdrop,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Portal, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Transition, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconMagnifyingGlass.Backdrop,
           {
             asChild: true,
             ...backdrop({ hidden: nestedDialogCount > 0 }),
             children: /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Overlay, {})
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...root$2(), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { flex: "1", pointerEvents: "none" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.Paper,
+        /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { ...root$2(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { flex: "1", pointerEvents: "none" }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.Paper,
             {
               asChild: true,
               elevation: "dialog",
@@ -328,12 +347,12 @@ const AlertDialogContent = React.forwardRef(({ children, size = "sm", style, ...
                 }),
                 ...style
               },
-              ...content$2({ size }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Content, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalProvider, { shardRef: innerRef, children }) })
+              ...content$3({ size }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Content, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ModalProvider, { shardRef: innerRef, children }) })
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { flex: "1", pointerEvents: "none" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { flex: "1", pointerEvents: "none" })
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { flex: "1", pointerEvents: "none" }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { flex: "1", pointerEvents: "none" })
         ] })
       ] })
     }
@@ -341,27 +360,27 @@ const AlertDialogContent = React.forwardRef(({ children, size = "sm", style, ...
 });
 AlertDialogContent.displayName = "@optiaxiom/react/AlertDialogContent";
 
-var footer = Skeleton.recipeRuntime({base:[{flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1rf5q1m']});
+var footer = IconMagnifyingGlass.recipeRuntime({base:[{flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'qtfyh8']});
 
 const AlertDialogFooter = React.forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { ...footer({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ButtonProvider, { size: "lg", children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { ...footer({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ButtonProvider, { size: "lg", children }) });
 });
 AlertDialogFooter.displayName = "@optiaxiom/react/AlertDialogFooter";
 
 const AlertDialogHeader = React.forwardRef(({ addonBefore, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", gap: "8", p: "24", pb: "16", ref, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, color: "fg.error", children: addonBefore ? Skeleton.fallbackSpan(addonBefore) : /* @__PURE__ */ jsxRuntime.jsx(IconTriangleExclamationSolid, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Heading, { asChild: true, color: "fg.default", fontWeight: "500", level: "3", children: /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Title, { children }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "8", p: "24", pb: "16", ref, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, color: "fg.error", children: addonBefore ? IconMagnifyingGlass.fallbackSpan(addonBefore) : /* @__PURE__ */ jsxRuntime.jsx(IconTriangleExclamationSolid, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Heading, { asChild: true, color: "fg.default", fontWeight: "500", level: "3", children: /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Title, { children }) })
   ] });
 });
 AlertDialogHeader.displayName = "@optiaxiom/react/AlertDialogHeader";
 
 const AlertDialogTrigger = React.forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixAlertDialog__namespace.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Button, { children }) });
 });
 AlertDialogTrigger.displayName = "@optiaxiom/react/AlertDialogTrigger";
 
-const IconUserSolid = Skeleton.withIcon(
+const IconUserSolid = IconMagnifyingGlass.withIcon(
   {
     name: "IconUserSolid",
     viewBox: "0 0 448 512"
@@ -376,7 +395,7 @@ const IconUserSolid = Skeleton.withIcon(
   )
 );
 
-const IconUsersSolid = Skeleton.withIcon(
+const IconUsersSolid = IconMagnifyingGlass.withIcon(
   {
     name: "IconUsersSolid",
     viewBox: "0 0 640 512"
@@ -391,9 +410,9 @@ const IconUsersSolid = Skeleton.withIcon(
   )
 );
 
-var avatar = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1x6htna'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'_15rdzxc'],xs:[{fontWeight:'400',size:'xs'},'_1jzc08e'],sm:[{size:'sm'},'snlutx'],md:[{size:'md'},'_1df60nz'],lg:[{size:'lg'},'_173pbrz'],xl:[{size:'xl'},'aq2261'],'3xl':[{size:'3xl'},'_9oosv9']}}});
-var fallback = Skeleton.recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
-var icon$3 = Skeleton.recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
+var avatar = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1y9zz1k'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'_32tfjp'],xs:[{fontWeight:'400',size:'xs'},'_88qekp'],sm:[{size:'sm'},'_1pdfuoy'],md:[{size:'md'},'b1vgqx'],lg:[{size:'lg'},'fy66pg'],xl:[{size:'xl'},'rjeem3'],'3xl':[{size:'3xl'},'_79i8oj']}}});
+var fallback = IconMagnifyingGlass.recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
+var icon$3 = IconMagnifyingGlass.recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
 
 const [AvatarProvider, useAvatarContext] = reactContext.createContext("@optiaxiom/react/Avatar", { size: void 0 });
 
@@ -421,14 +440,14 @@ const Avatar = React.forwardRef(
     const context = useAvatarContext("@optiaxiom/react/Avatar");
     const size = sizeProp || context?.size || "md";
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+      IconMagnifyingGlass.Box,
       {
         asChild: true,
         ...avatar({ colorScheme, size }, className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsxs(RadixAvatar__namespace.Root, { ref, children: [
-          src && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsxRuntime.jsx(RadixAvatar__namespace.Image, { alt: name ?? "avatar", src }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsxRuntime.jsx(RadixAvatar__namespace.Fallback, { delayMs: src ? 600 : void 0, children: (children ?? (name ? getInitialsFromName(name) : void 0)) || /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...icon$3({ size }), children: mapFallbackToIcon[fallback$1] }) }) })
+          src && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsxRuntime.jsx(RadixAvatar__namespace.Image, { alt: name ?? "avatar", src }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsxRuntime.jsx(RadixAvatar__namespace.Fallback, { delayMs: src ? 600 : void 0, children: (children ?? (name ? getInitialsFromName(name) : void 0)) || /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...icon$3({ size }), children: mapFallbackToIcon[fallback$1] }) }) })
         ] })
       }
     );
@@ -436,19 +455,19 @@ const Avatar = React.forwardRef(
 );
 Avatar.displayName = "@optiaxiom/react/Avatar";
 
-var avatarGroup = Skeleton.recipeRuntime({base:['_1l93ean',{display:'flex'}]});
+var avatarGroup = IconMagnifyingGlass.recipeRuntime({base:['ap8aqz',{display:'flex'}]});
 
 const AvatarGroup = React.forwardRef(
   ({ children, className, size = "md", ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ref, ...avatarGroup({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(AvatarProvider, { size, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ref, ...avatarGroup({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(AvatarProvider, { size, children }) });
   }
 );
 AvatarGroup.displayName = "@optiaxiom/react/AvatarGroup";
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._1ir0uev';
-var reset = 'optiaxiom._1pqwav5';
+var components = 'optiaxiom._1oq02a0';
+var reset = 'optiaxiom.sltn0y';
 var theme = 'optiaxiom.theme';
 
 var layers_css = /*#__PURE__*/Object.freeze({
@@ -466,12 +485,18 @@ const lightColors = Object.fromEntries(
     v.slice(v.indexOf("(") + 1, v.indexOf(","))
   ])
 );
-function ThemeProvider({
-  children,
-  selector = ":root"
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+function ThemeProvider({ children }) {
+  const [container, setContainer] = React.useState();
+  const selector = typeof ShadowRoot !== "undefined" && container instanceof ShadowRoot ? ":host" : ":root";
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    const root = ref.current?.getRootNode();
+    if (root instanceof ShadowRoot) {
+      setContainer(root);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.PortalProvider, { container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { ref, children: `
         @layer ${theme} {
           ${selector} {
             ${dynamic.assignInlineVars(globals.theme, {
@@ -492,9 +517,9 @@ function ThemeProvider({
 }
 ThemeProvider.displayName = "@optiaxiom/react/ThemeProvider";
 
-var icon$2 = Skeleton.recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_1w9u57u']});
-var offsetVar = 'var(--vxg4va)';
-var root$1 = Skeleton.recipeRuntime({base:['_3xhos0',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',fontSize:'md',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_17rjy03'],variants:{intent:{danger:'_1gy4eru',information:'_1iz91rb',neutral:'_1g2x0eo',success:'m7fjkz',warning:'tko028'}}});
+var icon$2 = IconMagnifyingGlass.recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_1t32y5f']});
+var offsetVar = 'var(--_15fl4vp)';
+var root$1 = IconMagnifyingGlass.recipeRuntime({base:['_17876dy',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',fontSize:'md',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_1tx39bs'],variants:{intent:{danger:'_1idur6g',information:'_8tmcy6',neutral:'_1q0manw',success:'_1bruxuf',warning:'aec96v'}}});
 
 const mapIntentToIcon$1 = {
   danger: IconCircleExclamationSolid,
@@ -505,11 +530,11 @@ const mapIntentToIcon$1 = {
 };
 const Toast = React.forwardRef(
   ({ children, className, intent = "neutral", onOpenChange, style, ...props }, outerRef) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
     const context = globals.useToastProviderContext("@optiaxiom/react/Toast");
     const ref = reactComposeRefs.useComposedRefs(outerRef, context.toastRef);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+      IconMagnifyingGlass.Box,
       {
         asChild: true,
         style: {
@@ -532,14 +557,14 @@ const Toast = React.forwardRef(
             ref,
             ...restProps,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, ...icon$2(), children: React.createElement(mapIntentToIcon$1[intent]) }),
+              /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, ...icon$2(), children: React.createElement(mapIntentToIcon$1[intent]) }),
               children,
               /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Button,
+                IconMagnifyingGlass.Button,
                 {
                   appearance: "inverse",
                   "aria-label": "close",
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}),
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconX, {}),
                   size: "sm"
                 }
               ) })
@@ -555,19 +580,19 @@ Toast.displayName = "@optiaxiom/react/Toast";
 const ToastAction = React.forwardRef(
   ({ altText, appearance = "inverse", children, size = "sm", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Separator, { alignSelf: "center", h: "sm", ml: "12", orientation: "vertical" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { appearance, asChild: true, size, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { altText, ref, children }) })
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Separator, { alignSelf: "center", h: "sm", ml: "12", orientation: "vertical" }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Button, { appearance, asChild: true, size, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { altText, ref, children }) })
     ] });
   }
 );
 ToastAction.displayName = "@optiaxiom/react/ToastAction";
 
 var gap = '16';
-var viewport = Skeleton.recipeRuntime({base:[{gap:'16',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_1itqdnj'],variants:{position:{bottom:'_1yotykl','bottom-left':'_13g9ntj','bottom-right':'tytgvs',top:'_1otrjha','top-left':'_14uhf2s','top-right':'_1i06m02'}}});
+var viewport = IconMagnifyingGlass.recipeRuntime({base:[{gap:'16',justifyContent:'normal',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'zd3huu'],variants:{position:{bottom:'tmyg0z','bottom-left':'yb9vn7','bottom-right':'_1npugi4',top:'_6ei4m7','top-left':'dw4tmi','top-right':'_1s2tf8t'}}});
 
 const ToastTitle = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { asChild: true, flex: "1", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Title, { ref, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { asChild: true, flex: "1", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Title, { ref, children }) });
   }
 );
 ToastTitle.displayName = "@optiaxiom/react/ToastTitle";
@@ -623,7 +648,7 @@ const ToastProvider = React.forwardRef(
     toaster: toasterProp = globals.toaster,
     ...props
   }, outerRef) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
     const toasts = shim.useSyncExternalStore(...toasterProp.store);
     const innerRef = React.useRef(null);
     const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
@@ -665,8 +690,8 @@ const ToastProvider = React.forwardRef(
             },
             id
           )),
-          /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, container, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.Flex,
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Portal, { asChild: true, ...container && { container }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.Flex,
             {
               alignItems: position.endsWith("left") ? "start" : position.endsWith("right") ? "end" : "center",
               asChild: true,
@@ -693,14 +718,14 @@ function AxiomProvider({
   if (axiom) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(globals.AxiomVersionContext.Provider, { value: Skeleton.version, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.TooltipProvider, { ...tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs(ThemeProvider, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(globals.AxiomVersionContext.Provider, { value: IconMagnifyingGlass.version, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.TooltipProvider, { ...tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs(ThemeProvider, { children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(ToastProvider, { ...toast })
   ] }) }) });
 }
 AxiomProvider.displayName = "@optiaxiom/react/AxiomProvider";
 
-var badge$1 = Skeleton.recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_13q2yfv'],variants:{intent:{danger:'rn1uuj',information:'itiiu6',neutral:'_1dw3jh8',primary:'_1ff07af',success:'_12p8kb7',warning:'dwrxe7'},variant:{strong:'wtvk5h',subtle:'rw3pg3'}}});
+var badge$1 = IconMagnifyingGlass.recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'jga79j'],variants:{intent:{danger:'_5fynju',information:'_163ajn7',neutral:'_1c3ykx5',primary:'hitk11',success:'_1trqa45',warning:'_1044mid'},variant:{strong:'_4aur9q',subtle:'pxeofa'}}});
 
 const Slot$4 = reactSlot.createSlot("@optiaxiom/react/Badge");
 const Badge = React.forwardRef(
@@ -714,7 +739,7 @@ const Badge = React.forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot$4 : "span";
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Text,
+      IconMagnifyingGlass.Text,
       {
         asChild: true,
         ...badge$1({ intent, variant }, className),
@@ -726,9 +751,9 @@ const Badge = React.forwardRef(
 );
 Badge.displayName = "@optiaxiom/react/Badge";
 
-var banner = Skeleton.recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
-var content$1 = Skeleton.recipeRuntime({base:[{flex:'1',gap:'8'},'_1f4w4x3']});
-var icon$1 = Skeleton.recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
+var banner = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
+var content$2 = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1',gap:'8'},'_11vsqhn']});
+var icon$1 = IconMagnifyingGlass.recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 const mapIntentToIcon = {
   danger: IconCircleExclamationSolid,
@@ -741,7 +766,7 @@ const Banner = React.forwardRef(
   ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
     const labelId = reactId.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.Flex,
+      IconMagnifyingGlass.Flex,
       {
         "aria-labelledby": labelId,
         ref,
@@ -749,16 +774,16 @@ const Banner = React.forwardRef(
         ...banner({ intent }, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, ...icon$1({ intent }), children: React.createElement(mapIntentToIcon[intent]) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { id: labelId, ...content$1(), children }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, ...icon$1({ intent }), children: React.createElement(mapIntentToIcon[intent]) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { id: labelId, ...content$2(), children }),
           !!onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.Button,
+            IconMagnifyingGlass.Button,
             {
               appearance: "subtle",
               "aria-label": "close",
               color: "fg.default",
               flex: "none",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}),
+              icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconX, {}),
               onClick: onDismiss,
               size: "sm"
             }
@@ -770,18 +795,785 @@ const Banner = React.forwardRef(
 );
 Banner.displayName = "@optiaxiom/react/Banner";
 
-var code = Skeleton.recipeRuntime({base:[{fontWeight:'600'},'_1gsjub7']});
+var code = IconMagnifyingGlass.recipeRuntime({base:[{fontWeight:'600'},'_1se176y']});
 
 const Slot$3 = reactSlot.createSlot("@optiaxiom/react/Code");
 const Code = React.forwardRef(
   ({ asChild, children, className, ...props }, ref) => {
     const Comp = asChild ? Slot$3 : "code";
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...code({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, ...restProps, children }) });
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...code({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, ...restProps, children }) });
   }
 );
 Code.displayName = "@optiaxiom/react/Code";
 
+const [DataTableProvider, useDataTableContext] = reactContext.createContext("@optiaxiom/react/DataTable");
+
+const DataTable = React.forwardRef(
+  ({ children, table, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Flex,
+      {
+        gap: "8",
+        justifyContent: "flex-start",
+        maxH: "full",
+        maxW: "full",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(DataTableProvider, { table, children })
+      }
+    );
+  }
+);
+DataTable.displayName = "@optiaxiom/react/DataTable";
+
+var cell = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'start',display:'flex'},'v3vlox'],variants:{pinned:{left:'bphej6',right:'c2dkrb'},pinnedType:{body:'_1lohb6y',header:{}}}});
+var cellOffsetVar = 'var(--_1syaoi7)';
+var cellSizeVar = 'var(--_3mq2hn)';
+var header = IconMagnifyingGlass.recipeRuntime({base:[{display:'grid'},'_1l873up']});
+var leftTotalSizeVar = 'var(--_1k0eeyd)';
+var rightTotalSizeVar = 'var(--_3271g5)';
+var table = IconMagnifyingGlass.recipeRuntime({base:'bjb7aa',variants:{pinned:{both:'_1rx0mbq',left:'_2ky1n9',none:{},right:'ftpwb'}}});
+var totalSizeVar = 'var(--_19guvqp)';
+
+const COL_VIRTUALIZATION_THRESHOLD = 20;
+const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const DataTableBody = React.forwardRef(
+  ({ className, estimatedRowHeight = 52, loading, ...props }, outerRef) => {
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    const { table: table$1 } = useDataTableContext("@optiaxiom/react/DataTableBody");
+    const { rows } = table$1.getRowModel();
+    const centerColumns = table$1.getCenterVisibleLeafColumns();
+    const columnVirtualizer = reactVirtual.useVirtualizer({
+      count: centerColumns.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
+      estimateSize: (index) => centerColumns[index].getSize(),
+      getScrollElement: () => innerRef.current,
+      horizontal: true
+    });
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
+    const rowVirtualizer = reactVirtual.useVirtualizer({
+      count: rows.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
+      estimateSize: () => estimatedRowHeight,
+      getScrollElement: () => innerRef.current
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      IconMagnifyingGlass.Table,
+      {
+        layout: "fixed",
+        ref,
+        style: dynamic.assignInlineVars({
+          [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
+          [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`,
+          [totalSizeVar]: `${table$1.getTotalSize()}`
+        }),
+        ...table(
+          {
+            pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
+          },
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.DataTableHeaderCell,
+            {
+              header,
+              style: {
+                ...dynamic.assignInlineVars({
+                  [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                  [cellSizeVar]: `${header.getSize()}`
+                })
+              },
+              ...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(
+            IconMagnifyingGlass.TableBody,
+            {
+              display: "grid",
+              style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
+              children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
+                row: fakeRow(table$1, rowIndex),
+                virtualRow: void 0
+              })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
+                row: rows[virtualRow.index],
+                virtualRow
+              })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }) => /* @__PURE__ */ jsxRuntime.jsxs(
+                IconMagnifyingGlass.TableRow,
+                {
+                  "data-highlighted": row.getIsSelected() ? "" : void 0,
+                  "data-index": virtualRow?.index,
+                  display: "flex",
+                  ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                  style: virtualRow ? {
+                    minHeight: virtualRow.size,
+                    position: "absolute",
+                    transform: `translateY(${virtualRow.start}px)`
+                  } : void 0,
+                  children: [
+                    row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
+                      IconMagnifyingGlass.TableCell,
+                      {
+                        style: {
+                          ...dynamic.assignInlineVars({
+                            [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                            [cellSizeVar]: `${cell$1.column.getSize()}`
+                          })
+                        },
+                        ...cell({
+                          pinned: "left",
+                          pinnedType: "body"
+                        }),
+                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                      },
+                      cell$1.id
+                    )),
+                    columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.TableCell, { style: { width: virtualColumnsOffset } }),
+                    (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+                      const cells = row.getCenterVisibleCells();
+                      return cells[virtualCell.index];
+                    }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
+                      IconMagnifyingGlass.TableCell,
+                      {
+                        style: {
+                          ...dynamic.assignInlineVars({
+                            [cellSizeVar]: `${cell$1.column.getSize()}`
+                          })
+                        },
+                        ...cell(),
+                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                      },
+                      cell$1.id
+                    )),
+                    row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
+                      IconMagnifyingGlass.TableCell,
+                      {
+                        style: {
+                          ...dynamic.assignInlineVars({
+                            [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                            [cellSizeVar]: `${cell$1.column.getSize()}`
+                          })
+                        },
+                        ...cell({
+                          pinned: "right",
+                          pinnedType: "body"
+                        }),
+                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                      },
+                      cell$1.id
+                    ))
+                  ]
+                },
+                row.id
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
+const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
+  column,
+  getContext: () => ({}),
+  id: column.id + "-" + ["1/2", "full", "3/4"][(rowIndex + columnIndex) % 3]
+}));
+const fakeCellWidth = (id) => id.split("-")[1];
+const fakeRow = (table, rowIndex) => ({
+  getCenterVisibleCells: fakeCellsFactory(
+    table.getCenterVisibleLeafColumns(),
+    rowIndex
+  ),
+  getIsSelected: () => false,
+  getLeftVisibleCells: fakeCellsFactory(
+    table.getLeftVisibleLeafColumns(),
+    rowIndex
+  ),
+  getRightVisibleCells: fakeCellsFactory(
+    table.getRightVisibleLeafColumns(),
+    rowIndex
+  ),
+  id: "loading" + rowIndex
+});
+
+function useUncontrolled({
+  value,
+  defaultValue,
+  finalValue,
+  onChange = () => {
+  }
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    defaultValue !== void 0 ? defaultValue : finalValue
+  );
+  const handleUncontrolledChange = (val, ...payload) => {
+    setUncontrolledValue(val);
+    onChange?.(val, ...payload);
+  };
+  if (value !== void 0) {
+    return [value, onChange, true];
+  }
+  return [uncontrolledValue, handleUncontrolledChange, false];
+}
+
+function range(start, end) {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, index) => index + start);
+}
+const DOTS = "dots";
+function usePagination({
+  total,
+  siblings = 1,
+  boundaries = 1,
+  page,
+  initialPage = 1,
+  onChange
+}) {
+  const _total = Math.max(Math.trunc(total), 0);
+  const [activePage, setActivePage] = useUncontrolled({
+    value: page,
+    onChange,
+    defaultValue: initialPage,
+    finalValue: initialPage
+  });
+  const setPage = (pageNumber) => {
+    if (pageNumber <= 0) {
+      setActivePage(1);
+    } else if (pageNumber > _total) {
+      setActivePage(_total);
+    } else {
+      setActivePage(pageNumber);
+    }
+  };
+  const next = () => setPage(activePage + 1);
+  const previous = () => setPage(activePage - 1);
+  const first = () => setPage(1);
+  const last = () => setPage(_total);
+  const paginationRange = React.useMemo(() => {
+    const totalPageNumbers = siblings * 2 + 3 + boundaries * 2;
+    if (totalPageNumbers >= _total) {
+      return range(1, _total);
+    }
+    const leftSiblingIndex = Math.max(activePage - siblings, boundaries);
+    const rightSiblingIndex = Math.min(activePage + siblings, _total - boundaries);
+    const shouldShowLeftDots = leftSiblingIndex > boundaries + 2;
+    const shouldShowRightDots = rightSiblingIndex < _total - (boundaries + 1);
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = siblings * 2 + boundaries + 2;
+      return [...range(1, leftItemCount), DOTS, ...range(_total - (boundaries - 1), _total)];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = boundaries + 1 + 2 * siblings;
+      return [...range(1, boundaries), DOTS, ...range(_total - rightItemCount, _total)];
+    }
+    return [
+      ...range(1, boundaries),
+      DOTS,
+      ...range(leftSiblingIndex, rightSiblingIndex),
+      DOTS,
+      ...range(_total - boundaries + 1, _total)
+    ];
+  }, [_total, siblings, activePage]);
+  return {
+    range: paginationRange,
+    active: activePage,
+    setPage,
+    next,
+    previous,
+    first,
+    last
+  };
+}
+
+var button$1 = IconMagnifyingGlass.recipeRuntime({base:[{justifyContent:'center'},'hawvpe']});
+var cursor = IconMagnifyingGlass.recipeRuntime({base:[{justifyContent:'center',z:'10'},'rxh5kv'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list$1 = IconMagnifyingGlass.recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_11vt49a']});
+
+const Pagination = React.forwardRef(
+  ({
+    defaultPage = 1,
+    disabled,
+    onPageChange,
+    page: pageProp,
+    total,
+    ...props
+  }, ref) => {
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/Pagination",
+      defaultProp: defaultPage,
+      onChange: onPageChange,
+      prop: pageProp
+    });
+    const { active, next, previous, range, setPage } = usePagination({
+      onChange: setValue,
+      page: value,
+      siblings: 2,
+      total
+    });
+    const [animation, setAnimation] = React.useState(false);
+    const activeRef = React.useRef(null);
+    const cursorRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!activeRef.current || !cursorRef.current) {
+        return;
+      }
+      cursorRef.current.style.transform = `translateX(${activeRef.current.offsetLeft}px)`;
+      cursorRef.current.style.visibility = "visible";
+      setTimeout(() => setAnimation(true), 150);
+    }, [active]);
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, ...list$1(), children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.ButtonRoot,
+        {
+          appearance: "subtle",
+          "aria-hidden": true,
+          asChild: true,
+          "data-state": "active",
+          disabled,
+          ref: cursorRef,
+          ...cursor({ animation }),
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: active })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: "Prev", disabled: disabled || active === 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.Button,
+        {
+          appearance: "subtle",
+          "aria-label": "Previous page",
+          disabled: disabled || active === 1,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleLeft, {}),
+          onClick: previous
+        }
+      ) }) }),
+      range.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "li",
+        {
+          children: page === "dots" ? /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.Box,
+            {
+              alignItems: "stretch",
+              display: "flex",
+              justifyContent: "center",
+              px: "6",
+              py: "8",
+              size: "md",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                IconMagnifyingGlass.Icon,
+                {
+                  asChild: true,
+                  color: disabled ? "fg.disabled" : "fg.default",
+                  cursor: disabled ? "not-allowed" : "default",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconEllipsis, {})
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
+            IconMagnifyingGlass.ButtonRoot,
+            {
+              appearance: "subtle",
+              "aria-current": active === page ? "page" : void 0,
+              disabled,
+              onClick: () => setPage(page),
+              ref: active === page ? activeRef : void 0,
+              ...button$1(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { children: "page" }),
+                " ",
+                page,
+                page === 1 ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { children: "(first page)" }) : page === total ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { children: "(last page)" }) : null
+              ]
+            }
+          )
+        },
+        page === "dots" ? `${page}-${index < range.indexOf(active) ? "before" : "after"}` : page
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: "Next", disabled: disabled || active === total, children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.Button,
+        {
+          appearance: "subtle",
+          "aria-label": "Next page",
+          disabled: disabled || active === total,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, {}),
+          onClick: next
+        }
+      ) }) })
+    ] }) }) }) });
+  }
+);
+Pagination.displayName = "@optiaxiom/react/Pagination";
+
+var addon = IconMagnifyingGlass.recipeRuntime({base:'_38o68m',variants:{position:{end:{textAlign:'end'},start:{}}}});
+
+const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"].map((size) => ({
+  label: size,
+  value: size
+}));
+const DataTableFooter = React.forwardRef(
+  ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
+    const { table } = useDataTableContext("@optiaxiom/react/DataTableFooter");
+    const { pagination } = table.getState();
+    const pageSizeId = reactId.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      IconMagnifyingGlass.Flex,
+      {
+        alignSelf: "stretch",
+        flexDirection: "row",
+        fontSize: "md",
+        justifyContent: "space-between",
+        mt: "auto",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ...addon({ position: "start" }), children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { color: "fg.secondary", id: pageSizeId, children: "Page Size" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              IconMagnifyingGlass.Select,
+              {
+                onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
+                options: pageSizeOptions,
+                value: pagination.pageSize.toString(),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    IconMagnifyingGlass.SelectTrigger,
+                    {
+                      appearance: "subtle",
+                      "aria-labelledby": pageSizeId
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.SelectContent, {})
+                ]
+              }
+            )
+          ] }) }),
+          table.getPageCount() > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            Pagination,
+            {
+              onPageChange: (newPage) => table.setPageIndex(newPage - 1),
+              page: pagination.pageIndex + 1,
+              total: table.getPageCount()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { ...addon({ position: "end" }), children: table.getRowCount() > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            pagination.pageIndex * pagination.pageSize + 1,
+            " -",
+            " ",
+            Math.min(
+              (pagination.pageIndex + 1) * pagination.pageSize,
+              table.getRowCount()
+            ),
+            " ",
+            "of ",
+            table.getRowCount()
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+DataTableFooter.displayName = "@optiaxiom/react/DataTableFooter";
+
+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"
+    }
+  )
+);
+
+var clear$1 = IconMagnifyingGlass.recipeRuntime({base:[{size:'sm'},'_4oj1c1']});
+var date = IconMagnifyingGlass.recipeRuntime({base:'_1vr3os2'});
+var input$2 = IconMagnifyingGlass.recipeRuntime({base:'s354nb'});
+var picker = IconMagnifyingGlass.recipeRuntime({base:'_14h9pme'});
+
+const DateInput = React.forwardRef(
+  ({
+    className,
+    disabled,
+    holiday,
+    max,
+    min,
+    onChange,
+    step,
+    type = "date",
+    weekend,
+    ...props
+  }, outerRef) => {
+    const [open, setOpen] = React.useState(false);
+    const hasInteractedOutsideRef = React.useRef(false);
+    const pickerRef = React.useRef(null);
+    const innerRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(innerRef, outerRef);
+    const [value, setValue] = reactUseControllableState.useControllableState({
+      caller: "@optiaxiom/react/DateInput",
+      defaultProp: props.defaultValue,
+      prop: props.value
+    });
+    const forceValueChange = IconMagnifyingGlass.useObserveValue(innerRef, setValue);
+    const instant = typeof value === "string" ? IconMagnifyingGlass.toInstant(value) ?? null : null;
+    const [month, setMonth] = React.useState(instant ?? void 0);
+    const maxDate = max ? IconMagnifyingGlass.toInstant(max) : void 0;
+    const minDate = min ? IconMagnifyingGlass.toInstant(min) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Popover, { onOpenChange: setOpen, open: !disabled && open, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.Input,
+        {
+          addonAfter: value && !props.required && /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.Button,
+            {
+              appearance: "subtle",
+              "aria-label": "Clear",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconX, {}),
+              onPointerDown: (event) => {
+                event.preventDefault();
+                forceValueChange("");
+              },
+              tabIndex: -1,
+              ...clear$1()
+            }
+          ),
+          addonBefore: /* @__PURE__ */ jsxRuntime.jsx(
+            IconMagnifyingGlass.PopoverTrigger,
+            {
+              "aria-label": "Show date picker",
+              asChild: true,
+              hasCustomAnchor: true,
+              ref: pickerRef,
+              role: "img",
+              ...picker(),
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {})
+            }
+          ),
+          asChild: true,
+          disabled,
+          max,
+          min,
+          onChange: (event) => {
+            onChange?.(event);
+            setValue(event.target.value);
+            setMonth(IconMagnifyingGlass.toInstant(event.target.value));
+          },
+          onClick: (e) => {
+            if (CSS.supports("selector(::-webkit-datetime-edit)")) {
+              e.preventDefault();
+            }
+          },
+          onKeyDown: (e) => {
+            if (CSS.supports("selector(::-webkit-datetime-edit)")) {
+              if (e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                setOpen(false);
+              }
+            }
+          },
+          ref,
+          step,
+          type,
+          ...date({}, className),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx("input", { ...input$2() })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        IconMagnifyingGlass.PopoverContent,
+        {
+          gap: "8",
+          onCloseAutoFocus: (event) => {
+            if (hasInteractedOutsideRef.current) {
+              hasInteractedOutsideRef.current = false;
+            } else {
+              event.preventDefault();
+              innerRef.current?.focus();
+            }
+          },
+          onInteractOutside: (event) => {
+            if (!(event.target instanceof Node && pickerRef.current?.contains(event.target))) {
+              hasInteractedOutsideRef.current = true;
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              IconMagnifyingGlass.Calendar,
+              {
+                holiday,
+                max: maxDate,
+                min: minDate,
+                month,
+                onMonthChange: setMonth,
+                onValueChange: (date) => {
+                  if (!date) {
+                    return;
+                  }
+                  forceValueChange(
+                    type === "datetime-local" ? IconMagnifyingGlass.toPlainDateTime(date) : IconMagnifyingGlass.toPlainDate(date)
+                  );
+                  if (type === "date") {
+                    setOpen(false);
+                  }
+                },
+                step,
+                type,
+                value: instant,
+                weekend
+              }
+            ),
+            type === "datetime-local" && /* @__PURE__ */ jsxRuntime.jsx(
+              IconMagnifyingGlass.Button,
+              {
+                flex: "none",
+                justifyContent: "center",
+                onClick: () => setOpen(false),
+                children: "Done"
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+DateInput.displayName = "@optiaxiom/react/DateInput";
+
+const [DateRangePickerProvider, useDateRangePickerContext] = reactContext.createContext("@optiaxiom/react/DateRangePicker");
+
+function DateRangePicker({
+  children,
+  defaultOpen = false,
+  defaultValue = null,
+  disabled,
+  onOpenChange,
+  onValueChange,
+  open: openProp,
+  value: valueProp,
+  ...props
+}) {
+  const [open, setOpen] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/DateRangePicker",
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: openProp
+  });
+  const [value, setValue] = reactUseControllableState.useControllableState({
+    caller: "@optiaxiom/react/DateRangePicker",
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: valueProp
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    DateRangePickerProvider,
+    {
+      disabled,
+      setOpen,
+      setValue,
+      value,
+      children
+    }
+  ) });
+}
+DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
+
+var panels = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});
+
+const DateRangePickerContent = React.forwardRef(
+  ({
+    addonAfter,
+    addonBefore,
+    children,
+    holiday,
+    max,
+    min,
+    today,
+    weekend,
+    ...props
+  }, ref) => {
+    const { setOpen, setValue, value } = useDateRangePickerContext(
+      "@optiaxiom/react/DateRangePickerContent"
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.PopoverContent, { gap: "8", maxW: void 0, ref, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { ...panels(), children: [
+        addonBefore,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconMagnifyingGlass.Calendar,
+          {
+            alignSelf: "start",
+            holiday,
+            max,
+            min,
+            mode: "range",
+            onValueChange: (value2) => {
+              setValue(value2);
+              setOpen(false);
+            },
+            today,
+            value,
+            weekend
+          }
+        ),
+        addonAfter
+      ] }),
+      children
+    ] });
+  }
+);
+DateRangePickerContent.displayName = "@optiaxiom/react/DateRangePickerContent";
+
+const dateFormatter = new Intl.DateTimeFormat(void 0, {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+});
+const DateRangePickerTrigger = React.forwardRef(
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    children,
+    formatRange,
+    placeholder = "Pick a date",
+    ...props
+  }, outerRef) => {
+    const { disabled, value } = useDateRangePickerContext(
+      "@optiaxiom/react/DateRangePickerTrigger"
+    );
+    const formatter = formatRange ? { formatRange } : dateFormatter;
+    const buttonRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
+    const labelId = IconMagnifyingGlass.useFieldLabelTrigger(buttonRef, ariaLabelledBy);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.PopoverTrigger,
+      {
+        "aria-labelledby": labelId,
+        disabled,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
+        ref,
+        ...props,
+        children: children ?? (value ? formatter.formatRange(value.from, value.to) : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { color: "fg.tertiary", children: placeholder }))
+      }
+    );
+  }
+);
+DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
+
 const [DisclosureProvider, useDisclosureContext] = reactContext.createContext("@optiaxiom/react/Disclosure");
 
 const Disclosure = React.forwardRef(
@@ -799,7 +1591,7 @@ const Disclosure = React.forwardRef(
       onChange: onOpenChange,
       prop: openProp
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(DisclosureProvider, { open, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, color: "fg.default", fontSize: "md", ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(DisclosureProvider, { open, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, color: "fg.default", fontSize: "md", ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
       RadixCollapsible__namespace.Root,
       {
         asChild,
@@ -812,8 +1604,8 @@ const Disclosure = React.forwardRef(
 );
 Disclosure.displayName = "@optiaxiom/react/Disclosure";
 
-var inner = Skeleton.recipeRuntime({base:['in4jc8']});
-var outer = Skeleton.recipeRuntime({base:[{display:'grid'},'egevmr']});
+var inner = IconMagnifyingGlass.recipeRuntime({base:['n7xyrd']});
+var outer = IconMagnifyingGlass.recipeRuntime({base:[{display:'grid'},'_1q9vbt1']});
 
 const DisclosureContent = React.forwardRef(({ children, transitionType = "slide", ...props }, ref) => {
   const { open } = useDisclosureContext("@optiaxiom/react/DisclosureContent");
@@ -823,21 +1615,21 @@ const DisclosureContent = React.forwardRef(({ children, transitionType = "slide"
       requestAnimationFrame(() => setSkipAnimations(false));
     }
   }, [skipAnimations]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.TransitionGroup, { open, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Transition,
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.TransitionGroup, { open, children: /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Transition,
     {
       "data-side": "bottom",
       skipAnimations,
       type: transitionType,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...outer(), children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...inner(), children: /* @__PURE__ */ jsxRuntime.jsx(RadixCollapsible__namespace.Content, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { pb: "8", pt: "4", ref, ...props, children }) }) }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ...outer(), children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...inner(), children: /* @__PURE__ */ jsxRuntime.jsx(RadixCollapsible__namespace.Content, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { pb: "8", pt: "4", ref, ...props, children }) }) }) })
     }
   ) });
 });
 DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
 
-var icon = Skeleton.recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'qul032',start:'_1taon2q'}}});
-var root = Skeleton.recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'xid362']});
-var trigger$1 = Skeleton.recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_1odnipx']});
+var icon = IconMagnifyingGlass.recipeRuntime({base:[{flex:'none',transition:'transform'}],variants:{chevronPosition:{end:'_12zs6fx',start:'_220i6g'}}});
+var root = IconMagnifyingGlass.recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',py:'8',transition:'colors'},'_18iv6vr']});
+var trigger$1 = IconMagnifyingGlass.recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'m8jaw0']});
 
 const DisclosureTrigger = React.forwardRef(
   ({
@@ -849,12 +1641,12 @@ const DisclosureTrigger = React.forwardRef(
     ...props
   }, ref) => {
     useDisclosureContext("@optiaxiom/react/DisclosureTrigger");
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ref, ...root({}, className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { ref, ...root({}, className), ...props, children: [
       addonBefore,
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...trigger$1(), children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Cover, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixCollapsible__namespace.Trigger, { children: [
-        chevronPosition === "start" && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { flex: "1", overflow: "hidden", children }),
-        chevronPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleLeft, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, ...trigger$1(), children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Cover, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixCollapsible__namespace.Trigger, { children: [
+        chevronPosition === "start" && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { flex: "1", overflow: "hidden", children }),
+        chevronPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleLeft, {}) })
       ] }) }) }),
       addonAfter
     ] });
@@ -894,7 +1686,7 @@ function DropdownMenu({
 DropdownMenu.displayName = "@optiaxiom/react/DropdownMenu";
 
 const DropdownMenuCheckboxItem = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.CheckboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSwitchItem, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.CheckboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSwitchItem, { children }) });
 });
 DropdownMenuCheckboxItem.displayName = "@optiaxiom/react/DropdownMenuCheckboxItem";
 
@@ -903,13 +1695,13 @@ const DropdownMenuContent = React.forwardRef(({ align = "start", children, loadi
     "@optiaxiom/react/DropdownMenuContent"
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.TransitionGroup,
+    IconMagnifyingGlass.TransitionGroup,
     {
       onPresenceChange: setPresence,
       open,
       presence,
-      children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Skeleton.ModalListbox,
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.ModalListbox,
         {
           asChild: true,
           minW: loading ? "trigger" : void 0,
@@ -926,7 +1718,7 @@ const DropdownMenuContent = React.forwardRef(({ align = "start", children, loadi
               },
               ref,
               sideOffset: 4,
-              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Spinner, {}) }) : children
             }
           )
         }
@@ -936,16 +1728,14 @@ const DropdownMenuContent = React.forwardRef(({ align = "start", children, loadi
 });
 DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
 
-const DropdownMenuGroup = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Group, { children }) });
-  }
-);
+const DropdownMenuGroup = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Group, { children }) });
+});
 DropdownMenuGroup.displayName = "@optiaxiom/react/DropdownMenuGroup";
 
 const DropdownMenuItem = React.forwardRef(({ asChild, children, onSelect, ...props }, ref) => {
   const { open } = useDropdownMenuContext("@optiaxiom/react/DropdownMenuItem");
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     RadixMenu__namespace.Item,
     {
       asChild,
@@ -966,14 +1756,12 @@ const DropdownMenuItem = React.forwardRef(({ asChild, children, onSelect, ...pro
 });
 DropdownMenuItem.displayName = "@optiaxiom/react/DropdownMenuItem";
 
-const DropdownMenuLabel = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", p: "8", ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Label, { children }) });
-  }
-);
+const DropdownMenuLabel = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", p: "8", ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Label, { children }) });
+});
 DropdownMenuLabel.displayName = "@optiaxiom/react/DropdownMenuLabel";
 
-const DropdownMenuSeparator = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Separator, { ref }) }));
+const DropdownMenuSeparator = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxSeparator, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Separator, { ref }) }));
 DropdownMenuSeparator.displayName = "@optiaxiom/react/DropdownMenuSeparator";
 
 const [DropdownMenuSubProvider, useDropdownMenuSubContext] = reactContext.createContext("@optiaxiom/react/DropdownMenuSub");
@@ -1016,8 +1804,8 @@ const DropdownMenuSubContent = React.forwardRef(({ asChild, children, ...props }
   const { open, setPresence } = useDropdownMenuSubContext(
     "@optiaxiom/react/DropdownMenuSubContent"
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.ModalListbox,
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.TransitionGroup, { onPresenceChange: setPresence, open, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.ModalListbox,
     {
       asChild: true,
       minW: "trigger",
@@ -1039,16 +1827,16 @@ const DropdownMenuSubContent = React.forwardRef(({ asChild, children, ...props }
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 
 const DropdownMenuSubTrigger = React.forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxItem, { addonAfter: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconAngleRight, {}), asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.SubTrigger, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ListboxItem, { addonAfter: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleRight, {}), asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.SubTrigger, { children }) });
 });
 DropdownMenuSubTrigger.displayName = "@optiaxiom/react/DropdownMenuSubTrigger";
 
 const DropdownMenuTrigger = React.forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixMenu__namespace.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.AngleMenuButton, { children }) });
 });
 DropdownMenuTrigger.displayName = "@optiaxiom/react/DropdownMenuTrigger";
 
-const IconEllipsisSolid = Skeleton.withIcon(
+const IconEllipsisSolid = IconMagnifyingGlass.withIcon(
   {
     name: "IconEllipsisSolid",
     viewBox: "0 0 448 512"
@@ -1065,7 +1853,7 @@ const IconEllipsisSolid = Skeleton.withIcon(
 
 const EllipsisMenuButton = React.forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Button,
+    IconMagnifyingGlass.Button,
     {
       icon: /* @__PURE__ */ jsxRuntime.jsx(IconEllipsisSolid, {}),
       iconPosition: "end",
@@ -1077,7 +1865,7 @@ const EllipsisMenuButton = React.forwardRef(({ children, ...props }, ref) => {
 });
 EllipsisMenuButton.displayName = "@optiaxiom/react/EllipsisMenuButton";
 
-const IconTriangleExclamation = Skeleton.withIcon(
+const IconTriangleExclamation = IconMagnifyingGlass.withIcon(
   {
     name: "IconTriangleExclamation",
     viewBox: "0 0 20 16"
@@ -1093,7 +1881,7 @@ const IconTriangleExclamation = Skeleton.withIcon(
   )
 );
 
-const IconCircleQuestion = Skeleton.withIcon(
+const IconCircleQuestion = IconMagnifyingGlass.withIcon(
   {
     fill: "none",
     name: "IconCircleQuestion"
@@ -1120,9 +1908,9 @@ const FieldLabel = React.forwardRef(
   }, ref) => {
     const inputId = reactId.useId(inputIdProp);
     const labelId = reactId.useId(labelIdProp);
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", gap: "4", ref, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "4", ref, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Skeleton.Text,
+        IconMagnifyingGlass.Text,
         {
           alignItems: "center",
           asChild: true,
@@ -1135,7 +1923,7 @@ const FieldLabel = React.forwardRef(
             children,
             required && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Text,
+                IconMagnifyingGlass.Text,
                 {
                   "aria-hidden": "true",
                   asChild: true,
@@ -1144,19 +1932,19 @@ const FieldLabel = React.forwardRef(
                   children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "*" })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.VisuallyHidden, { children: "Required" })
+              /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.VisuallyHidden, { children: "Required" })
             ] })
           ] })
         }
       ),
-      info && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Tooltip, { content: info, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Skeleton.Button,
+      info && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Tooltip, { content: info, children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconMagnifyingGlass.Button,
         {
           "aria-label": "Information hover",
           border: "0",
           color: "fg.secondary",
           h: "2xs",
-          icon: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, flex: "initial", children: /* @__PURE__ */ jsxRuntime.jsx(IconCircleQuestion, {}) }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, flex: "initial", children: /* @__PURE__ */ jsxRuntime.jsx(IconCircleQuestion, {}) }),
           onClick: (event) => {
             event.currentTarget.focus();
             event.preventDefault();
@@ -1191,7 +1979,7 @@ const Field = React.forwardRef(
     const errorId = reactId.useId();
     const labelId = reactId.useId(labelIdProp);
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.Flex,
+      IconMagnifyingGlass.Flex,
       {
         flexDirection: "column",
         gap: "4",
@@ -1210,7 +1998,7 @@ const Field = React.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.FieldProvider,
+            IconMagnifyingGlass.FieldProvider,
             {
               descriptionId: description ? descriptionId : void 0,
               error: !!error,
@@ -1221,7 +2009,7 @@ const Field = React.forwardRef(
             }
           ),
           error && error !== true && /* @__PURE__ */ jsxRuntime.jsxs(
-            Skeleton.Flex,
+            IconMagnifyingGlass.Flex,
             {
               alignItems: "start",
               color: "fg.error",
@@ -1231,7 +2019,7 @@ const Field = React.forwardRef(
               id: errorId,
               role: "alert",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, flex: "none", mt: "2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, flex: "none", mt: "2", children: /* @__PURE__ */ jsxRuntime.jsx(
                   IconTriangleExclamation,
                   {
                     "aria-label": "Error",
@@ -1243,7 +2031,7 @@ const Field = React.forwardRef(
               ]
             }
           ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: Skeleton.fallbackSpan(description) })
+          description && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: IconMagnifyingGlass.fallbackSpan(description) })
         ]
       }
     );
@@ -1252,13 +2040,13 @@ const Field = React.forwardRef(
 Field.displayName = "@optiaxiom/react/Field";
 
 const Grid = React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "grid", gap: "16", gridTemplateColumns: "1", ref, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { display: "grid", gap: "16", gridTemplateColumns: "1", ref, ...props });
 });
 Grid.displayName = "@optiaxiom/react/Grid";
 
-var badge = Skeleton.recipeRuntime({base:'_1f09n3q',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'nii4k5']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_145s4ox']}}});
-var floating = Skeleton.recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_12bwm0p'],variants:{offset:{false:'cmqi33',true:{}},position:{'bottom-right':'_1lu8xbu','top-right':'_1ywi5u4'}}});
-var indicator$2 = Skeleton.recipeRuntime({base:[{display:'inline-flex'},'_82idl6']});
+var badge = IconMagnifyingGlass.recipeRuntime({base:'_1uakron',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_1cmiyl']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'nwqn3y']}}});
+var floating = IconMagnifyingGlass.recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'wknt49'],variants:{offset:{false:'_1i7t42',true:{}},position:{'bottom-right':'_1anl54s','top-right':'hp4zd1'}}});
+var indicator$2 = IconMagnifyingGlass.recipeRuntime({base:[{display:'inline-flex'},'kzbyal']});
 
 const Indicator = React.forwardRef(
   ({
@@ -1274,9 +2062,9 @@ const Indicator = React.forwardRef(
     variant,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ref, ...indicator$2({}, className), ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { ref, ...indicator$2({}, className), ...props, children: [
       children,
-      !disabled && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { ...floating({ offset, position }), children: [
+      !disabled && /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...floating({ offset, position }), children: [
         ping && /* @__PURE__ */ jsxRuntime.jsx(
           Badge,
           {
@@ -1304,8 +2092,8 @@ const Indicator = React.forwardRef(
 );
 Indicator.displayName = "@optiaxiom/react/Indicator";
 
-var kbd = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_1qmtoiw'],variants:{variant:{outline:{border:'1',borderB:'2',borderColor:'border.tertiary',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = Skeleton.recipeRuntime({base:'_1npwgms',variants:{variant:{outline:'_1okdy3b',subtle:{}}}});
+var kbd = IconMagnifyingGlass.recipeRuntime({base:{alignItems:'center',color:'fg.secondary',display:'inline-flex',flexDirection:'row',fontFamily:'sans',gap:'2',whiteSpace:'nowrap'},variants:{variant:{outline:[{bg:'bg.secondary',border:'1',borderB:'2',borderColor:'border.secondary',px:'6',rounded:'sm'},'_1iwluyt'],subtle:{}}}});
+var keys = IconMagnifyingGlass.recipeRuntime({base:'_1wday1q'});
 
 const mapKeyToCode = {
   command: "\u2318",
@@ -1324,23 +2112,54 @@ const mapKeyToCode = {
 };
 const Kbd = React.forwardRef(
   ({ children, className, keys: keys$1, variant = "outline", ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...kbd({ variant }, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("kbd", { ref, children: [
-      keys$1 && (Array.isArray(keys$1) ? keys$1 : [keys$1]).map((key) => /* @__PURE__ */ jsxRuntime.jsx("abbr", { title: key, ...keys({ variant }), children: mapKeyToCode[key] }, key)),
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...kbd({ variant }, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("kbd", { ref, children: [
+      keys$1 && (Array.isArray(keys$1) ? keys$1 : [keys$1]).map((key) => /* @__PURE__ */ jsxRuntime.jsx("abbr", { "aria-label": key, title: key, ...keys(), children: mapKeyToCode[key] }, key)),
       children
     ] }) });
   }
 );
 Kbd.displayName = "@optiaxiom/react/Kbd";
 
+var button = IconMagnifyingGlass.recipeRuntime({base:[{justifyContent:'space-between'},'_1kpuxgi']});
+var content$1 = IconMagnifyingGlass.recipeRuntime({base:[{fontSize:'sm',transition:'all'}],variants:{filled:{false:{h:'0'},true:{h:'16'}}}});
+var label$1 = IconMagnifyingGlass.recipeRuntime({base:[{color:'fg.secondary',cursor:'pointer',maxW:'full',transition:'all'}],variants:{filled:{false:{fontSize:'md'},true:{fontSize:'xs'}}}});
+
+const LabelMenuButton = React.forwardRef(
+  ({ "aria-labelledby": ariaLabelledBy, children, className, label, ...props }, ref) => {
+    const filled = String(props["aria-expanded"]) === "true" || Boolean(children);
+    const labelId = reactId.useId();
+    const valueId = reactId.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      IconMagnifyingGlass.ButtonRoot,
+      {
+        "aria-labelledby": ariaLabelledBy ? clsx(labelId, ariaLabelledBy) : clsx(labelId, children && valueId),
+        "data-filled": filled ? "" : void 0,
+        ref,
+        size: "lg",
+        ...button({}, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { gap: "0", overflow: "hidden", textAlign: "start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { asChild: true, id: labelId, truncate: true, ...label$1({ filled }), children: /* @__PURE__ */ jsxRuntime.jsx(RadixLabel.Label, { children: label }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { id: valueId, truncate: true, ...content$1({ filled }), children: children ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\xA0" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ButtonAddon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconAngleDown, {}) })
+        ]
+      }
+    );
+  }
+);
+LabelMenuButton.displayName = "@optiaxiom/react/LabelMenuButton";
+
 const [SidebarProvider, useSidebarContext] = reactContext.createContext("@optiaxiom/react/Sidebar");
 
-var nav$1 = Skeleton.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_4y16n']});
+var nav$1 = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_90mwug']});
 
 const Nav = React.forwardRef(
   ({ children, ...props }, ref) => {
     const { expanded, navId } = useSidebarContext("@optiaxiom/react/Nav");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Flex,
+      IconMagnifyingGlass.Flex,
       {
         borderColor: "border.tertiary",
         borderR: "1",
@@ -1348,19 +2167,19 @@ const Nav = React.forwardRef(
         ref,
         w: "fit",
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, id: navId, w: expanded ? "224" : "56", ...nav$1(), children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", children }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, id: navId, w: expanded ? "224" : "56", ...nav$1(), children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Main", children }) })
       }
     );
   }
 );
 Nav.displayName = "@optiaxiom/react/Nav";
 
-var item$1 = Skeleton.recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_4rddii',true:'asapti'}}});
+var item$1 = IconMagnifyingGlass.recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_1w1lfph',true:'wwsj29'}}});
 
 const NavAccountItem = React.forwardRef(({ name, organization, src, ...props }, ref) => {
   const { expanded } = useSidebarContext("@optiaxiom/react/NavAccountItem");
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, my: "8", children: /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-    Skeleton.Flex,
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, my: "8", children: /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    IconMagnifyingGlass.Flex,
     {
       asChild: true,
       flexDirection: "row",
@@ -1380,12 +2199,12 @@ const NavAccountItem = React.forwardRef(({ name, organization, src, ...props },
             src
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...item$1({ expanded: Boolean(expanded) }), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flex: "1", gap: "0", overflowX: "hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.tertiary", fontSize: "sm", truncate: true, children: organization })
+        /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { ...item$1({ expanded: Boolean(expanded) }), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { flex: "1", gap: "0", overflowX: "hidden", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { color: "fg.tertiary", fontSize: "sm", truncate: true, children: organization })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconEllipsis, {}) })
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconEllipsis, {}) })
         ] })
       ] })
     }
@@ -1393,13 +2212,13 @@ const NavAccountItem = React.forwardRef(({ name, organization, src, ...props },
 });
 NavAccountItem.displayName = "@optiaxiom/react/NavAccountItem";
 
-var body = Skeleton.recipeRuntime({base:[{flex:'1',gap:'4',justifyContent:'flex-start',overflowX:'hidden',py:'8',w:'full'}],variants:{expanded:{false:{overflowY:'hidden'},true:{overflowY:'auto'}}}});
+var body = IconMagnifyingGlass.recipeRuntime({base:[{flex:'1',gap:'4',justifyContent:'flex-start',overflowX:'hidden',py:'8',w:'full'}],variants:{expanded:{false:{overflowY:'hidden'},true:{overflowY:'auto'}}}});
 
 const NavBody = React.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { expanded, spacing } = useSidebarContext("@optiaxiom/react/NavBody");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Flex,
+      IconMagnifyingGlass.Flex,
       {
         px: spacing,
         ref,
@@ -1416,7 +2235,7 @@ const NavFooter = React.forwardRef(
   ({ children, ...props }, ref) => {
     const { spacing } = useSidebarContext("@optiaxiom/react/NavFooter");
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Flex,
+      IconMagnifyingGlass.Flex,
       {
         gap: "8",
         mt: "auto",
@@ -1500,13 +2319,13 @@ NavGroupTrigger.displayName = "@optiaxiom/react/NavGroupTrigger";
 const NavHeader = React.forwardRef(
   ({ children, ...props }, ref) => {
     const { spacing } = useSidebarContext("@optiaxiom/react/NavHeader");
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { px: spacing, ref, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { px: spacing, ref, ...props, children });
   }
 );
 NavHeader.displayName = "@optiaxiom/react/NavHeader";
 
-var item = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'dzr8ct']});
-var label = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'wt9x17'],variants:{expanded:{false:'_1brzd7n',true:'a8cy2r'}}});
+var item = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'h0tdfa']});
+var label = IconMagnifyingGlass.recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_3lvnig'],variants:{expanded:{false:'_1ty8ba',true:'_64rvma'}}});
 
 const Slot$2 = reactSlot.createSlot("@optiaxiom/react/NavItem");
 const NavItem = React.forwardRef(
@@ -1521,27 +2340,27 @@ const NavItem = React.forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot$2 : "button";
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
     const { expanded } = useSidebarContext("@optiaxiom/react/NavItem");
     let tooltip = null;
-    children = Skeleton.decorateChildren({ asChild, children }, (children2) => {
+    children = IconMagnifyingGlass.decorateChildren({ asChild, children }, (children2) => {
       tooltip = children2;
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "grid", flex: "none", placeItems: "center", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Icon, { asChild: true, children: icon }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { ...label({ expanded: Boolean(expanded) }), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { truncate: true, children: children2 }),
-          addonAfter && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, display: "flex", flex: "none", children: Skeleton.fallbackSpan(addonAfter) })
+        /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { display: "grid", flex: "none", placeItems: "center", size: "lg", children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Icon, { asChild: true, children: icon }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...label({ expanded: Boolean(expanded) }), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Text, { truncate: true, children: children2 }),
+          addonAfter && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, display: "flex", flex: "none", children: IconMagnifyingGlass.fallbackSpan(addonAfter) })
         ] })
       ] });
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Tooltip,
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Tooltip,
       {
         content: props["aria-label"] || tooltip,
         disabled: expanded,
         side: "right",
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.Box,
+          IconMagnifyingGlass.Box,
           {
             asChild: true,
             "data-disabled": disabled ? "" : void 0,
@@ -1564,7 +2383,7 @@ const NavList = React.forwardRef(
       throw new Error("huh");
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+      IconMagnifyingGlass.Box,
       {
         asChild: true,
         display: "flex",
@@ -1580,19 +2399,19 @@ const NavList = React.forwardRef(
 NavList.displayName = "@optiaxiom/react/NavList";
 
 const NavSeparator = React.forwardRef(
-  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Separator, { flex: "none", mx: "12", my: "8", ref, ...props })
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Separator, { flex: "none", mx: "12", my: "8", ref, ...props })
 );
 NavSeparator.displayName = "@optiaxiom/react/NavSeparator";
 
-var indicator$1 = Skeleton.recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = Skeleton.recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1i4t48l']});
+var indicator$1 = IconMagnifyingGlass.recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
+var progress = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1nn21mo']});
 
 const Progress = React.forwardRef(
   ({ className, intent = "primary", ...props }, ref) => {
     const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
     const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...progress({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ProgressPrimitive__namespace.Root, { ref, children: isValidValue && /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...progress({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ProgressPrimitive__namespace.Root, { ref, children: isValidValue && /* @__PURE__ */ jsxRuntime.jsx(
+      IconMagnifyingGlass.Box,
       {
         asChild: true,
         style: {
@@ -1609,10 +2428,10 @@ const Progress = React.forwardRef(
 const DEFAULT_MAX = 100;
 Progress.displayName = "@optiaxiom/react/Progress";
 
-var control = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'n927td'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = Skeleton.recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1fzpzfi']});
-var input$1 = Skeleton.recipeRuntime({base:'czx1ek'});
-var radio = Skeleton.recipeRuntime({base:'h9bxwe'});
+var control = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'wud470'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = IconMagnifyingGlass.recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1tbg9c3']});
+var input$1 = IconMagnifyingGlass.recipeRuntime({base:'_1lwhhnc'});
+var radio = IconMagnifyingGlass.recipeRuntime({base:'zaxvr5'});
 
 const [RadioGroupProvider, useRadioGroupContext] = reactContext.createContext("@optiaxiom/react/RadioGroup", null);
 
@@ -1627,7 +2446,7 @@ const Radio = React.forwardRef(
     onChange,
     ...props
   }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
     const groupContext = useRadioGroupContext("@optiaxiom/react/Radio");
     if (groupContext) {
       if ("checked" in props) {
@@ -1642,14 +2461,14 @@ const Radio = React.forwardRef(
       }
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.ToggleInput,
+      IconMagnifyingGlass.ToggleInput,
       {
         description: !!description,
         ...radio({}, className),
         ...boxProps,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.ToggleInputHiddenInput,
+            IconMagnifyingGlass.ToggleInputHiddenInput,
             {
               checked: groupContext?.value !== void 0 ? groupContext.value === props.value : void 0,
               defaultChecked: groupContext?.defaultValue !== void 0 ? groupContext.defaultValue === props.value : void 0,
@@ -1663,10 +2482,10 @@ const Radio = React.forwardRef(
               ...restProps
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ToggleInputControl, { ...control({ shift: Boolean(children) }), children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...indicator() }) }),
-          (children || description) && /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.ToggleInputContent, { children: [
-            children && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ToggleInputLabel, { children }),
-            description && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ToggleInputDescription, { children: description })
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ToggleInputControl, { ...control({ shift: Boolean(children) }), children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ...indicator() }) }),
+          (children || description) && /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.ToggleInputContent, { children: [
+            children && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ToggleInputLabel, { children }),
+            description && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.ToggleInputDescription, { children: description })
           ] })
         ]
       }
@@ -1707,11 +2526,11 @@ const RadioGroup = React.forwardRef(
         },
         value,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.Flex,
+          IconMagnifyingGlass.Flex,
           {
             flexDirection,
             fontSize: "md",
-            gap: Skeleton.mapResponsiveValue(
+            gap: IconMagnifyingGlass.mapResponsiveValue(
               flexDirection,
               (value2) => mapGapToOrientation[value2]
             ),
@@ -1726,9 +2545,9 @@ const RadioGroup = React.forwardRef(
 );
 RadioGroup.displayName = "@optiaxiom/react/RadioGroup";
 
-var clear = Skeleton.recipeRuntime({base:[{size:'sm'},'nkiuea']});
-var input = Skeleton.recipeRuntime({base:'qwtjyq'});
-var search = Skeleton.recipeRuntime({base:'_96kbwp'});
+var clear = IconMagnifyingGlass.recipeRuntime({base:[{size:'sm'},'_4bo8f0']});
+var input = IconMagnifyingGlass.recipeRuntime({base:'o6vhxh'});
+var search = IconMagnifyingGlass.recipeRuntime({base:'ucu5bx'});
 
 const SearchInput = React.forwardRef(
   ({ addonBefore, className, onChange, onValueClear, ...props }, outerRef) => {
@@ -1739,27 +2558,27 @@ const SearchInput = React.forwardRef(
       defaultProp: props.defaultValue,
       prop: props.value
     });
-    const forceValueChange = Skeleton.useObserveValue(innerRef, setValue);
+    const forceValueChange = IconMagnifyingGlass.useObserveValue(innerRef, setValue);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Input,
+      IconMagnifyingGlass.Input,
       {
         addonAfter: value && /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.Button,
+          IconMagnifyingGlass.Button,
           {
             appearance: "subtle",
             "aria-label": "Clear",
-            icon: value && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconX, {}),
-            onClick: () => {
+            icon: value && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconX, {}),
+            onPointerDown: (event) => {
+              event.preventDefault();
               forceValueChange("");
-              innerRef.current?.focus();
               onValueClear?.();
             },
             tabIndex: -1,
             ...clear()
           }
         ),
-        addonBefore: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { flexDirection: "row", gap: "8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.IconMagnifyingGlass, {}),
+        addonBefore: /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { flexDirection: "row", gap: "8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.IconMagnifyingGlass, {}),
           addonBefore
         ] }),
         addonPointerEvents: "none",
@@ -1783,7 +2602,7 @@ SearchInput.displayName = "@optiaxiom/react/SearchInput";
 const [SegmentedControlProvider, useSegmentedControlContext] = reactContext.createContext("@optiaxiom/react/SegmentedControl");
 
 const SegmentedControl = React.forwardRef(({ children, type = "single", ...props }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, flexDirection: "row", gap: "0", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixSegmentedControl__namespace.Root, { ref, type, children: /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlProvider, { children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, flexDirection: "row", gap: "0", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixSegmentedControl__namespace.Root, { ref, type, children: /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlProvider, { children }) }) });
 });
 SegmentedControl.displayName = "@optiaxiom/react/SegmentedControl";
 
@@ -1796,7 +2615,7 @@ const SegmentedControlItem = React.forwardRef(({ children, ...props }, ref) => {
       asChild: true,
       ref,
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Button, { children })
     }
   );
 });
@@ -1824,7 +2643,7 @@ const Sidebar = React.forwardRef(
         onExpandedChange: setExpanded,
         spacing: "8",
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Skeleton.Box,
+          IconMagnifyingGlass.Box,
           {
             alignItems: "stretch",
             display: "flex",
@@ -1852,7 +2671,6 @@ const SidebarToggle = React.forwardRef(
         "aria-controls": navId,
         "aria-expanded": expanded ? "true" : "false",
         "aria-label": ariaLabel || (expanded ? "Collapse" : "Expand"),
-        fontWeight: "400",
         onClick: () => onExpandedChange(!expanded),
         ref,
         ...props,
@@ -1863,12 +2681,12 @@ const SidebarToggle = React.forwardRef(
 );
 SidebarToggle.displayName = "@optiaxiom/react/SidebarToggle";
 
-var nav = Skeleton.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',py:'16'},'vtoog1']});
+var nav = IconMagnifyingGlass.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',py:'16'},'vk84k3']});
 
 const SubNav = React.forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Flex,
+      IconMagnifyingGlass.Flex,
       {
         borderColor: "border.tertiary",
         borderR: "1",
@@ -1876,7 +2694,7 @@ const SubNav = React.forwardRef(
         ref,
         w: "fit",
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Secondary", children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Flex, { asChild: true, ...nav(), children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Secondary", children: /* @__PURE__ */ jsxRuntime.jsx(
           SidebarProvider,
           {
             expanded: true,
@@ -1893,39 +2711,39 @@ const SubNav = React.forwardRef(
 );
 SubNav.displayName = "@optiaxiom/react/SubNav";
 
-var tabs = Skeleton.recipeRuntime({base:[{display:'flex'},'a46eog']});
+var tabs = IconMagnifyingGlass.recipeRuntime({base:[{display:'flex'},'cep9fp']});
 
 const Tabs = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...tabs({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Root, { ref, ...restProps, children }) });
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...tabs({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Root, { ref, ...restProps, children }) });
   }
 );
 Tabs.displayName = "@optiaxiom/react/Tabs";
 
 const TabsContent = React.forwardRef(
   ({ children, value, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, flex: "1", ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.TabsContent, { value, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, flex: "1", ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.TabsContent, { value, children }) });
   }
 );
 TabsContent.displayName = "@optiaxiom/react/TabsContent";
 
-var list = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'_13wuoek']});
+var list = IconMagnifyingGlass.recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'zr8w81']});
 
 const TabsList = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...list({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.List, { ref, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...list({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.List, { ref, children }) });
   }
 );
 TabsList.displayName = "@optiaxiom/react/TabsList";
 
-var content = Skeleton.recipeRuntime({base:[{flexDirection:'row',gap:'8',justifyContent:['center','flex-start'],py:'6',rounded:'sm',transition:'colors'},'v9pok4']});
-var trigger = Skeleton.recipeRuntime({base:['_15v5csm',{flex:['1','initial'],fontSize:'md',fontWeight:'500',py:'4',transition:'colors'},'_1b22fid']});
+var content = IconMagnifyingGlass.recipeRuntime({base:[{flexDirection:'row',gap:'8',justifyContent:['center','flex-start'],py:'6',rounded:'sm',transition:'colors'},'_1opdjtp']});
+var trigger = IconMagnifyingGlass.recipeRuntime({base:['te1loa',{flex:['1','initial'],fontSize:'md',fontWeight:'500',py:'4',transition:'colors'},'zexj43']});
 
 const TabsTrigger = React.forwardRef(
   ({ addonAfter, addonBefore, children, className, value, ...props }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...trigger({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { ref, value, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Flex, { ...content(), children: [
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...trigger({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { ref, value, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Flex, { ...content(), children: [
       addonBefore,
       children,
       addonAfter
@@ -1934,9 +2752,9 @@ const TabsTrigger = React.forwardRef(
 );
 TabsTrigger.displayName = "@optiaxiom/react/TabsTrigger";
 
-var shadow = Skeleton.recipeRuntime({base:['_1cg98tz','_5q9e7f']});
-var textarea = Skeleton.recipeRuntime({base:['_1cg98tz','k5k5n2']});
-var wrapper = Skeleton.recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['_4wfsja','_1vfzcg1'],'2':['_4wfsja','_1wk4xrj'],'3':['_4wfsja','yb0wbw'],'4':['_4wfsja','ovnzz6'],'5':['_4wfsja','_6j7we8']},resize:{auto:{},none:{},vertical:'_176yv6b'}}});
+var shadow = IconMagnifyingGlass.recipeRuntime({base:['sj8xgy','_1cjzg7y']});
+var textarea = IconMagnifyingGlass.recipeRuntime({base:['sj8xgy','hzhjvv']});
+var wrapper = IconMagnifyingGlass.recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['ciefk0','_1xs10s3'],'2':['ciefk0','zs4k39'],'3':['ciefk0','_1ouif1a'],'4':['ciefk0','_1m71tm9'],'5':['ciefk0','_1q1771r']},resize:{auto:{},none:{},vertical:'qtsxey'}}});
 
 const Slot$1 = reactSlot.createSlot("@optiaxiom/react/TextareaAutosize");
 const TextareaAutosize = React.forwardRef(
@@ -1950,14 +2768,14 @@ const TextareaAutosize = React.forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot$1 : "textarea";
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
     const [value, setValue] = reactUseControllableState.useControllableState({
       caller: "@optiaxiom/react/TextareaAutosize",
       defaultProp: props.defaultValue,
       prop: props.value
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs(Skeleton.Box, { ...wrapper({ maxRows, resize }), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...textarea({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(IconMagnifyingGlass.Box, { ...wrapper({ maxRows, resize }), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { asChild: true, ...textarea({}, className), ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsx(
         Comp,
         {
           onChange: (event) => {
@@ -1969,7 +2787,7 @@ const TextareaAutosize = React.forwardRef(
           children
         }
       ) }),
-      resize === "auto" && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...shadow({}, className), ...boxProps, children: (value ?? "") + " " })
+      resize === "auto" && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Box, { ...shadow({}, className), ...boxProps, children: (value ?? "") + " " })
     ] });
   }
 );
@@ -1988,9 +2806,9 @@ const Textarea = React.forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : TextareaAutosize;
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { boxProps, restProps } = IconMagnifyingGlass.extractBoxProps(props);
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.InputRoot,
+      IconMagnifyingGlass.InputRoot,
       {
         addonPointerEvents,
         className,
@@ -1998,9 +2816,9 @@ const Textarea = React.forwardRef(
         style,
         ...boxProps,
         children: [
-          addonBefore && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.InputAddon, { asChild: true, children: Skeleton.fallbackSpan(addonBefore) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.InputControl, { asChild: true, p: "8", size: "lg", ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, rows: props.rows ?? 3, children }) }),
-          addonAfter && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.InputAddon, { asChild: true, children: Skeleton.fallbackSpan(addonAfter) })
+          addonBefore && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.InputAddon, { asChild: true, children: IconMagnifyingGlass.fallbackSpan(addonBefore) }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.InputControl, { asChild: true, p: "8", size: "lg", ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, rows: props.rows ?? 3, children }) }),
+          addonAfter && /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.InputAddon, { asChild: true, children: IconMagnifyingGlass.fallbackSpan(addonAfter) })
         ]
       }
     );
@@ -2010,71 +2828,80 @@ Textarea.displayName = "@optiaxiom/react/Textarea";
 
 const ToggleButton = React.forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Button, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixToggle__namespace.Root, { ref, children }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(IconMagnifyingGlass.Button, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RadixToggle__namespace.Root, { ref, children }) });
   }
 );
 ToggleButton.displayName = "@optiaxiom/react/ToggleButton";
 
-exports.AngleMenuButton = Skeleton.AngleMenuButton;
-exports.Box = Skeleton.Box;
-exports.Button = Skeleton.Button;
-exports.ButtonGroup = Skeleton.ButtonGroup;
-exports.Checkbox = Skeleton.Checkbox;
-exports.Dialog = Skeleton.Dialog;
-exports.DialogBody = Skeleton.DialogBody;
-exports.DialogClose = Skeleton.DialogClose;
-exports.DialogContent = Skeleton.DialogContent;
-exports.DialogFooter = Skeleton.DialogFooter;
-exports.DialogForm = Skeleton.DialogForm;
-exports.DialogHeader = Skeleton.DialogHeader;
-exports.DialogTrigger = Skeleton.DialogTrigger;
-exports.Flex = Skeleton.Flex;
-exports.Heading = Skeleton.Heading;
-exports.Input = Skeleton.Input;
-exports.InputAddon = Skeleton.InputAddon;
-exports.InputControl = Skeleton.InputControl;
-exports.InputRoot = Skeleton.InputRoot;
-exports.Link = Skeleton.Link;
-exports.Listbox = Skeleton.Listbox;
-exports.ListboxCheckboxItem = Skeleton.ListboxCheckboxItem;
-exports.ListboxEmpty = Skeleton.ListboxEmpty;
-exports.ListboxFooter = Skeleton.ListboxFooter;
-exports.ListboxGroup = Skeleton.ListboxGroup;
-exports.ListboxItem = Skeleton.ListboxItem;
-exports.ListboxItemIndicator = Skeleton.ListboxItemIndicator;
-exports.ListboxItemized = Skeleton.ListboxItemized;
-exports.ListboxLabel = Skeleton.ListboxLabel;
-exports.ListboxRadioItem = Skeleton.ListboxRadioItem;
-exports.ListboxSeparator = Skeleton.ListboxSeparator;
-exports.ListboxSwitchItem = Skeleton.ListboxSwitchItem;
-exports.ListboxVirtualized = Skeleton.ListboxVirtualized;
-exports.ModalLayer = Skeleton.ModalLayer;
-exports.ModalProvider = Skeleton.ModalProvider;
-exports.Pagination = Skeleton.Pagination;
-exports.Paper = Skeleton.Paper;
-exports.Popover = Skeleton.Popover;
-exports.PopoverAnchor = Skeleton.PopoverAnchor;
-exports.PopoverContent = Skeleton.PopoverContent;
-exports.PopoverTrigger = Skeleton.PopoverTrigger;
-exports.Separator = Skeleton.Separator;
-exports.Skeleton = Skeleton.Skeleton;
-exports.Spinner = Skeleton.Spinner;
-exports.Switch = Skeleton.Switch;
-exports.Text = Skeleton.Text;
-exports.Tooltip = Skeleton.Tooltip;
-exports.TooltipContent = Skeleton.TooltipContent;
-exports.TooltipProvider = Skeleton.TooltipProvider;
-exports.TooltipRoot = Skeleton.TooltipRoot;
-exports.TooltipTrigger = Skeleton.TooltipTrigger;
-exports.Transition = Skeleton.Transition;
-exports.TransitionGlobalConfig = Skeleton.TransitionGlobalConfig;
-exports.TransitionGroup = Skeleton.TransitionGroup;
-exports.extractBoxProps = Skeleton.extractBoxProps;
-exports.mapResponsiveValue = Skeleton.mapResponsiveValue;
-exports.sprinkles = Skeleton.sprinkles;
-exports.sprinklesMerge = Skeleton.sprinklesMerge;
-exports.useModalContext = Skeleton.useModalContext;
-exports.vars = Skeleton.vars;
+exports.AngleMenuButton = IconMagnifyingGlass.AngleMenuButton;
+exports.Box = IconMagnifyingGlass.Box;
+exports.Button = IconMagnifyingGlass.Button;
+exports.ButtonGroup = IconMagnifyingGlass.ButtonGroup;
+exports.Checkbox = IconMagnifyingGlass.Checkbox;
+exports.Cover = IconMagnifyingGlass.Cover;
+exports.Dialog = IconMagnifyingGlass.Dialog;
+exports.DialogBody = IconMagnifyingGlass.DialogBody;
+exports.DialogClose = IconMagnifyingGlass.DialogClose;
+exports.DialogContent = IconMagnifyingGlass.DialogContent;
+exports.DialogFooter = IconMagnifyingGlass.DialogFooter;
+exports.DialogForm = IconMagnifyingGlass.DialogForm;
+exports.DialogHeader = IconMagnifyingGlass.DialogHeader;
+exports.DialogTrigger = IconMagnifyingGlass.DialogTrigger;
+exports.Flex = IconMagnifyingGlass.Flex;
+exports.Heading = IconMagnifyingGlass.Heading;
+exports.Input = IconMagnifyingGlass.Input;
+exports.InputAddon = IconMagnifyingGlass.InputAddon;
+exports.InputControl = IconMagnifyingGlass.InputControl;
+exports.InputRoot = IconMagnifyingGlass.InputRoot;
+exports.Link = IconMagnifyingGlass.Link;
+exports.Listbox = IconMagnifyingGlass.Listbox;
+exports.ListboxCheckboxItem = IconMagnifyingGlass.ListboxCheckboxItem;
+exports.ListboxEmpty = IconMagnifyingGlass.ListboxEmpty;
+exports.ListboxFooter = IconMagnifyingGlass.ListboxFooter;
+exports.ListboxGroup = IconMagnifyingGlass.ListboxGroup;
+exports.ListboxItem = IconMagnifyingGlass.ListboxItem;
+exports.ListboxItemIndicator = IconMagnifyingGlass.ListboxItemIndicator;
+exports.ListboxItemized = IconMagnifyingGlass.ListboxItemized;
+exports.ListboxLabel = IconMagnifyingGlass.ListboxLabel;
+exports.ListboxRadioItem = IconMagnifyingGlass.ListboxRadioItem;
+exports.ListboxSeparator = IconMagnifyingGlass.ListboxSeparator;
+exports.ListboxSwitchItem = IconMagnifyingGlass.ListboxSwitchItem;
+exports.ModalLayer = IconMagnifyingGlass.ModalLayer;
+exports.ModalProvider = IconMagnifyingGlass.ModalProvider;
+exports.Paper = IconMagnifyingGlass.Paper;
+exports.Popover = IconMagnifyingGlass.Popover;
+exports.PopoverAnchor = IconMagnifyingGlass.PopoverAnchor;
+exports.PopoverContent = IconMagnifyingGlass.PopoverContent;
+exports.PopoverTrigger = IconMagnifyingGlass.PopoverTrigger;
+exports.Select = IconMagnifyingGlass.Select;
+exports.SelectContent = IconMagnifyingGlass.SelectContent;
+exports.SelectTrigger = IconMagnifyingGlass.SelectTrigger;
+exports.Separator = IconMagnifyingGlass.Separator;
+exports.Skeleton = IconMagnifyingGlass.Skeleton;
+exports.Spinner = IconMagnifyingGlass.Spinner;
+exports.Switch = IconMagnifyingGlass.Switch;
+exports.Table = IconMagnifyingGlass.Table;
+exports.TableAction = IconMagnifyingGlass.TableAction;
+exports.TableBody = IconMagnifyingGlass.TableBody;
+exports.TableCell = IconMagnifyingGlass.TableCell;
+exports.TableHeader = IconMagnifyingGlass.TableHeader;
+exports.TableHeaderCell = IconMagnifyingGlass.TableHeaderCell;
+exports.TableRow = IconMagnifyingGlass.TableRow;
+exports.Text = IconMagnifyingGlass.Text;
+exports.Tooltip = IconMagnifyingGlass.Tooltip;
+exports.TooltipContent = IconMagnifyingGlass.TooltipContent;
+exports.TooltipProvider = IconMagnifyingGlass.TooltipProvider;
+exports.TooltipRoot = IconMagnifyingGlass.TooltipRoot;
+exports.TooltipTrigger = IconMagnifyingGlass.TooltipTrigger;
+exports.Transition = IconMagnifyingGlass.Transition;
+exports.TransitionGlobalConfig = IconMagnifyingGlass.TransitionGlobalConfig;
+exports.TransitionGroup = IconMagnifyingGlass.TransitionGroup;
+exports.extractBoxProps = IconMagnifyingGlass.extractBoxProps;
+exports.mapResponsiveValue = IconMagnifyingGlass.mapResponsiveValue;
+exports.sprinkles = IconMagnifyingGlass.sprinkles;
+exports.sprinklesMerge = IconMagnifyingGlass.sprinklesMerge;
+exports.useModalContext = IconMagnifyingGlass.useModalContext;
+exports.vars = IconMagnifyingGlass.vars;
 Object.defineProperty(exports, "createToaster", {
   enumerable: true,
   get: function () { return globals.createToaster; }
@@ -2106,6 +2933,13 @@ exports.AxiomProvider = AxiomProvider;
 exports.Badge = Badge;
 exports.Banner = Banner;
 exports.Code = Code;
+exports.DataTable = DataTable;
+exports.DataTableBody = DataTableBody;
+exports.DataTableFooter = DataTableFooter;
+exports.DateInput = DateInput;
+exports.DateRangePicker = DateRangePicker;
+exports.DateRangePickerContent = DateRangePickerContent;
+exports.DateRangePickerTrigger = DateRangePickerTrigger;
 exports.Disclosure = Disclosure;
 exports.DisclosureContent = DisclosureContent;
 exports.DisclosureTrigger = DisclosureTrigger;
@@ -2126,6 +2960,7 @@ exports.FieldLabel = FieldLabel;
 exports.Grid = Grid;
 exports.Indicator = Indicator;
 exports.Kbd = Kbd;
+exports.LabelMenuButton = LabelMenuButton;
 exports.Nav = Nav;
 exports.NavAccountItem = NavAccountItem;
 exports.NavBody = NavBody;
@@ -2137,6 +2972,7 @@ exports.NavHeader = NavHeader;
 exports.NavItem = NavItem;
 exports.NavList = NavList;
 exports.NavSeparator = NavSeparator;
+exports.Pagination = Pagination;
 exports.Progress = Progress;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;