@optiaxiom/react 0.13.7 → 0.13.8

package/dist/cjs/unstable.js

@@ -3,87 +3,87 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var Skeleton = require('./Skeleton-BX-5xDjv.js');
-require('./assets/src/layers/layers.css.ts.vanilla-C-QEP-4X.css');
-require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-mobQ2Aeg.css');
-require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-Da4A-tvG.css');
+var Skeleton = require('./Skeleton-CEOU4Zwk.js');
+require('./assets/src/layers/layers.css.ts.vanilla-DEV62wR-.css');
+require('./assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-djfHO0lO.css');
+require('./assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-BhST5G2X.css');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var reactDayPicker = require('react-day-picker');
-require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-TTwSNxPR.css');
-require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-gP6lzvag.css');
-require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-DDtFvlWH.css');
-require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-cwj_jtqC.css');
+require('./assets/src/calendar/CalendarDayButton.css.ts.vanilla-CjcpxGTk.css');
+require('./assets/src/calendar/CalendarMonths.css.ts.vanilla-CTl7Uukg.css');
+require('./assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-B3kKznVU.css');
+require('./assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-j3r1dy1Q.css');
 var reactId = require('@radix-ui/react-id');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BFdKnI61.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-D1P2CJ-m.css');
 var reactContext = require('@radix-ui/react-context');
-require('./assets/src/cover/Cover.css.ts.vanilla-FrtpOm9L.css');
-require('./assets/src/link/Link.css.ts.vanilla-BSfDX2Vd.css');
-require('./assets/src/card/Card.css.ts.vanilla-DhS76prH.css');
-require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-B6KitfzJ.css');
-require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-wdn_zgqd.css');
-require('./assets/src/card-actions/CardActions.css.ts.vanilla-B6CYMOIy.css');
+require('./assets/src/cover/Cover.css.ts.vanilla-DoeQeAaT.css');
+require('./assets/src/link/Link.css.ts.vanilla-DUaOxDe1.css');
+require('./assets/src/card/Card.css.ts.vanilla-BXBR2rA1.css');
+require('./assets/src/actions-content/ActionsContent.css.ts.vanilla-BmaT_Ukz.css');
+require('./assets/src/card-overflow/CardOverflow.css.ts.vanilla-D3DKk9Hn.css');
+require('./assets/src/card-actions/CardActions.css.ts.vanilla-CMjew0RS.css');
 var reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
 var clsx = require('clsx');
-require('./assets/src/card-image/CardImage.css.ts.vanilla-BhF2wUtp.css');
+require('./assets/src/card-image/CardImage.css.ts.vanilla-SZ-EmrDz.css');
 var reactSlot = require('@radix-ui/react-slot');
 var RadixDialog = require('@radix-ui/react-dialog');
-require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-NOpp2Cio.css');
+require('./assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-Co-JRL9u.css');
 var downshift = require('downshift');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactTable = require('@tanstack/react-table');
 var dynamic = require('@vanilla-extract/dynamic');
-require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-C-rtHhn0.css');
-require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-BjOnpX9U.css');
-require('./assets/src/table/Table.css.ts.vanilla-YtPjNeQb.css');
-require('./assets/src/table-body/TableBody.css.ts.vanilla-BrUKq_5S.css');
-require('./assets/src/table-row/TableRow.css.ts.vanilla-JPngxdFG.css');
-require('./assets/src/table-cell/TableCell.css.ts.vanilla-DceEY38p.css');
-require('./assets/src/data-table/DataTable.css.ts.vanilla-HESVV2TO.css');
-require('./assets/src/date-input/DateInput.css.ts.vanilla-bxzaBZC2.css');
-require('./assets/src/highlight/Highlight.css.ts.vanilla-GdlluXgm.css');
-require('./assets/src/inline-input/InlineInput.css.ts.vanilla-DY6Ty-PU.css');
-require('./assets/src/pill/Pill.css.ts.vanilla-DCdjHZ3C.css');
+require('./assets/src/table-header-cell/TableHeaderCell.css.ts.vanilla-CRA84QYu.css');
+require('./assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-B4SwGoqq.css');
+require('./assets/src/table/Table.css.ts.vanilla-DOX13PvH.css');
+require('./assets/src/table-body/TableBody.css.ts.vanilla-BvvuNaI4.css');
+require('./assets/src/table-row/TableRow.css.ts.vanilla-BmmNePA-.css');
+require('./assets/src/table-cell/TableCell.css.ts.vanilla-BCwZlSnh.css');
+require('./assets/src/data-table-body/DataTableBody.css.ts.vanilla-uUstIJUJ.css');
 var reactPopper = require('@radix-ui/react-popper');
 var reactPortal = require('@radix-ui/react-portal');
-require('./assets/src/select-content/SelectContent.css.ts.vanilla-C4rrY6kS.css');
-require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-CcHtNdkF.css');
-require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-CpH9uz2U.css');
-require('./assets/src/badge/Badge.css.ts.vanilla-D8p2bFHU.css');
-require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-C_DITi8K.css');
-require('./assets/src/sub-nav/SubNav.css.ts.vanilla-BdY3YT5s.css');
-require('./assets/src/backdrop/Backdrop.css.ts.vanilla-GYFDehZN.css');
-require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-C0BHGIaG.css');
+require('./assets/src/select-content/SelectContent.css.ts.vanilla-B4V5YxS0.css');
+require('./assets/src/date-input/DateInput.css.ts.vanilla-D1MMMFvP.css');
+require('./assets/src/highlight/Highlight.css.ts.vanilla-5Bk3kmtQ.css');
+require('./assets/src/inline-input/InlineInput.css.ts.vanilla-BoipjMpY.css');
+require('./assets/src/pill/Pill.css.ts.vanilla-CG_KXCL_.css');
+require('./assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-KA_BbZY-.css');
+require('./assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-BWT-Z56m.css');
+require('./assets/src/badge/Badge.css.ts.vanilla-Ca022JuU.css');
+require('./assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-CP_Cz_Zv.css');
+require('./assets/src/sub-nav/SubNav.css.ts.vanilla-Blr62PcO.css');
+require('./assets/src/backdrop/Backdrop.css.ts.vanilla-FgHAlzuA.css');
+require('./assets/src/dialog-content/DialogContent.css.ts.vanilla-C-g4SchC.css');
 require('@radix-ui/react-collapsible');
-require('./assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DkQqQuTv.css');
-require('./assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CXBlDYb7.css');
+require('./assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-cCeSyIu6.css');
+require('./assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-U4k8Ssru.css');
 require('@radix-ui/react-separator');
-require('./assets/src/separator/Separator.css.ts.vanilla-gNIAoaDz.css');
-require('./assets/src/input-control/InputControl.css.ts.vanilla-DSqAOG6B.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BFdKnI61.css');
-require('./assets/src/input-root/InputRoot.css.ts.vanilla-x27uyvJ4.css');
-require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-BFdKnI61.css');
-require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-BE8saPrQ.css');
-require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-CS6Ycwii.css');
-require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-BmSQQ3iX.css');
-require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-CzVN7vtb.css');
+require('./assets/src/separator/Separator.css.ts.vanilla-BlVPxbcs.css');
+require('./assets/src/input-control/InputControl.css.ts.vanilla-CkqfoDNr.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-D1P2CJ-m.css');
+require('./assets/src/input-root/InputRoot.css.ts.vanilla-Bv61Oz25.css');
+require('./assets/src/actions-root/ActionsRoot.css.ts.vanilla-D1P2CJ-m.css');
+require('./assets/src/toggle-input/ToggleInput.css.ts.vanilla-DYEsxCyA.css');
+require('./assets/src/toggle-input-control/ToggleInputControl.css.ts.vanilla-H5HdpK7V.css');
+require('./assets/src/checkbox-control/CheckboxControl.css.ts.vanilla-DWMmjn7y.css');
+require('./assets/src/listbox-item/ListboxItem.css.ts.vanilla-BguEnodW.css');
 require('@radix-ui/react-dismissable-layer');
 require('@radix-ui/react-focus-guards');
 require('react-remove-scroll');
 require('@optiaxiom/globals');
 require('@radix-ui/react-tooltip');
-require('./assets/src/text/Text.css.ts.vanilla-CfUD-kwc.css');
-require('./assets/src/pagination/Pagination.css.ts.vanilla-DVCM2PPJ.css');
+require('./assets/src/text/Text.css.ts.vanilla-C_yWs3Sh.css');
+require('./assets/src/pagination/Pagination.css.ts.vanilla-BMlLQEEt.css');
 require('@radix-ui/react-popover');
-require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-BuXIZ4bQ.css');
-require('./assets/src/button-base/ButtonBase.css.ts.vanilla-C4a6aR2U.css');
-require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-5RLtCvom.css');
-require('./assets/src/spinner/Spinner.css.ts.vanilla-p0zt0Gl6.css');
-require('./assets/src/transition/Transition.css.ts.vanilla-B4ez9Q_d.css');
+require('./assets/src/menu-listbox/MenuListbox.css.ts.vanilla-Coaojr0d.css');
+require('./assets/src/button-base/ButtonBase.css.ts.vanilla-CTg6l_A2.css');
+require('./assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-DkFBETIx.css');
+require('./assets/src/spinner/Spinner.css.ts.vanilla-o73txbUM.css');
+require('./assets/src/transition/Transition.css.ts.vanilla-C_fZUuae.css');
 require('@optiaxiom/globals/fonts');
-require('./assets/src/sprinkles/properties.css.ts.vanilla-Cj69hGSa.css');
-require('./assets/src/box/Box.css.ts.vanilla-CjGIStIi.css');
-require('./assets/src/skeleton/Skeleton.css.ts.vanilla-uzVrrBZJ.css');
+require('./assets/src/sprinkles/properties.css.ts.vanilla-nQew7yX0.css');
+require('./assets/src/box/Box.css.ts.vanilla-C3s71NEW.css');
+require('./assets/src/skeleton/Skeleton.css.ts.vanilla-YV7BM8eV.css');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -235,7 +235,7 @@ function BreadcrumbEllipsis({ ...props }) {
 }
 BreadcrumbEllipsis.displayName = "@optiaxiom/react/BreadcrumbEllipsis";
 
-var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'zluknq']});
+var item$3 = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1cphol7']});
 
 const BreadcrumbItem = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -245,7 +245,7 @@ const BreadcrumbItem = React.forwardRef(
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";
 
-var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1ltwr4x']});
+var link = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1wy19yt']});
 
 const BreadcrumbLink = React.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Link, { ...link({}, className), ref, ...props });
@@ -272,7 +272,7 @@ function CalendarDay({ children, ...props }) {
 }
 CalendarDay.displayName = "@optiaxiom/react/CalendarDay";
 
-var button$3 = Skeleton.recipeRuntime({base:{mt:'8'},variants:{outside:{false:{},true:'_18yo9o8'}}});
+var button$3 = Skeleton.recipeRuntime({base:{mt:'8'},variants:{outside:{false:{},true:'_8wbcvu'}}});
 
 function CalendarDayButton({
   children,
@@ -332,14 +332,14 @@ function CalendarMonthGrid({
 }
 CalendarMonthGrid.displayName = "@optiaxiom/react/CalendarMonthGrid";
 
-var months = Skeleton.recipeRuntime({base:'zh39fv'});
+var months = Skeleton.recipeRuntime({base:'dwt6g5'});
 
 function CalendarMonths({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...months(), children: /* @__PURE__ */ jsxRuntime.jsx(reactDayPicker.Months, { ...props, children }) });
 }
 CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
 
-var button$2 = Skeleton.recipeRuntime({base:'_1v8316i'});
+var button$2 = Skeleton.recipeRuntime({base:'qncfl'});
 
 function CalendarNextMonthButton({
   children,
@@ -361,7 +361,7 @@ function CalendarNextMonthButton({
 }
 CalendarNextMonthButton.displayName = "@optiaxiom/react/CalendarNextMonthButton";
 
-var button$1 = Skeleton.recipeRuntime({base:'iuhthx'});
+var button$1 = Skeleton.recipeRuntime({base:'okt8ca'});
 
 function CalendarPreviousMonthButton({
   children,
@@ -444,7 +444,7 @@ const Calendar = React.forwardRef(
 );
 Calendar.displayName = "@optiaxiom/react/Calendar";
 
-var root = Skeleton.recipeRuntime({base:'_1r7o4gd'});
+var root = Skeleton.recipeRuntime({base:'fvlgad'});
 
 const ActionsRoot = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -455,7 +455,7 @@ ActionsRoot.displayName = "@optiaxiom/react/ActionsRoot";
 
 const [CardContextProvider, useCardContext] = reactContext.createContext("Card");
 
-var card = Skeleton.recipeRuntime({base:['nz3lli',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_7xq91']});
+var card = Skeleton.recipeRuntime({base:['dzgz59',{border:'1',borderColor:'border.tertiary',color:'fg.default',gap:'12',p:'16',transition:'transform'},'_8yiznv']});
 
 const mapOrientationToFlexDirection = {
   horizontal: "row",
@@ -487,7 +487,7 @@ const Card = React.forwardRef(
 );
 Card.displayName = "@optiaxiom/react/Card";
 
-var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'_1es09w3'],variants:{visible:{false:'plqaox',true:'_7ok6io'}}});
+var content$2 = Skeleton.recipeRuntime({base:[{display:'flex',justifyContent:'space-between'},'csqlb8'],variants:{visible:{false:'_1omwmzn',true:'_1o6ssd7'}}});
 
 const ActionsContent = React.forwardRef(
   ({ children, className, visible = false, ...props }, ref) => {
@@ -496,7 +496,7 @@ const ActionsContent = React.forwardRef(
 );
 ActionsContent.displayName = "@optiaxiom/react/ActionsContent";
 
-var actions = Skeleton.recipeRuntime({base:['_1eo9es0']});
+var actions = Skeleton.recipeRuntime({base:['qusn7j']});
 
 const CardActions = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -566,7 +566,7 @@ const CardDescription = React.forwardRef(({ children, ...props }, ref) => {
 });
 CardDescription.displayName = "@optiaxiom/react/CardDescription";
 
-var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1f1479u'],variants:{orientation:{horizontal:[{w:'auto'},'_1qp2ur'],vertical:[{w:'full'},'_1jrmqbz']}}});
+var cardImage = Skeleton.recipeRuntime({base:[{h:'full',rounded:'inherit'},'_6g81rb'],variants:{orientation:{horizontal:[{w:'auto'},'_12m8bta'],vertical:[{w:'full'},'_122p0c8']}}});
 
 const CardImage = React.forwardRef(
   ({ alt = "", asChild, children, className, src, ...props }, ref) => {
@@ -592,7 +592,7 @@ const CardLink = React.forwardRef(
 );
 CardLink.displayName = "@optiaxiom/react/CardLink";
 
-var cardOverflow = Skeleton.recipeRuntime({base:['_1p6mdzb',{alignSelf:'stretch'},'_1lox5jt'],variants:{orientation:{horizontal:['_10vww8x'],vertical:['usgbho']}}});
+var cardOverflow = Skeleton.recipeRuntime({base:['_1gjulgx',{alignSelf:'stretch'},'_176a3cp'],variants:{orientation:{horizontal:['ukzeov'],vertical:['t5bstn']}}});
 
 const CardOverflow = React.forwardRef(
   ({ children, className, ...props }, ref) => {
@@ -741,7 +741,7 @@ Combobox.displayName = "@optiaxiom/react/Combobox";
 
 const [CommandContextProvider, useCommandContext] = reactContext.createContext("Command");
 
-var item$2 = Skeleton.recipeRuntime({base:'_1w0i7ib'});
+var item$2 = Skeleton.recipeRuntime({base:'hs4x9b'});
 
 const CommandFocusableItem = React.forwardRef(({ children, className, ...props }, ref) => {
   const { lastInteractionSource } = useCommandContext("CommandFocusableItem");
@@ -1126,43 +1126,45 @@ const ComboboxSeparator = React.forwardRef((props, ref) => {
 });
 ComboboxSeparator.displayName = "@optiaxiom/react/ComboboxSeparator";
 
-const ComboboxTrigger = React.forwardRef(({ asChild, children, ...props }, outerRef) => {
-  const { components, setOpen } = useComboboxContext("ComboboxTrigger");
-  const buttonRef = React.useRef(null);
-  const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
-  const { labelId } = Skeleton.useFieldContext();
-  React.useEffect(() => {
-    if (!labelId || !buttonRef.current) {
-      return;
-    }
-    const button = buttonRef.current;
-    const label = document.getElementById(labelId);
-    if (!label) {
-      return;
-    }
-    const onLabelClick = () => button.focus();
-    label.addEventListener("click", onLabelClick);
-    return () => label.removeEventListener("click", onLabelClick);
-  }, [labelId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    components.Trigger,
-    {
-      "aria-labelledby": labelId,
-      asChild: true,
-      onKeyDown: (event) => {
-        switch (event.key) {
-          case "ArrowDown":
-          case "ArrowUp":
-            setOpen(true);
-        }
-      },
-      ref,
-      role: "combobox",
-      ...props,
-      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
-    }
-  );
-});
+const ComboboxTrigger = React.forwardRef(
+  ({ "aria-labelledby": ariaLabelledBy, asChild, children, ...props }, outerRef) => {
+    const { components, setOpen } = useComboboxContext("ComboboxTrigger");
+    const buttonRef = React.useRef(null);
+    const ref = reactComposeRefs.useComposedRefs(outerRef, buttonRef);
+    const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
+    React.useEffect(() => {
+      if (!labelId || !buttonRef.current) {
+        return;
+      }
+      const button = buttonRef.current;
+      const label = document.getElementById(labelId);
+      if (!label) {
+        return;
+      }
+      const onLabelClick = () => button.focus();
+      label.addEventListener("click", onLabelClick);
+      return () => label.removeEventListener("click", onLabelClick);
+    }, [labelId]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.Trigger,
+      {
+        "aria-labelledby": labelId,
+        asChild: true,
+        onKeyDown: (event) => {
+          switch (event.key) {
+            case "ArrowDown":
+            case "ArrowUp":
+              setOpen(true);
+          }
+        },
+        ref,
+        role: "combobox",
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { children })
+      }
+    );
+  }
+);
 ComboboxTrigger.displayName = "@optiaxiom/react/ComboboxTrigger";
 
 const ComboboxValue = React.forwardRef(
@@ -1228,6 +1230,15 @@ const ComboboxVirtualized = React.forwardRef(({ children, items, ...props }, out
 });
 ComboboxVirtualized.displayName = "@optiaxiom/react/ComboboxVirtualized";
 
+const [DataTableContextProvider, useDataTableContext] = reactContext.createContext("DataTable");
+
+const DataTable = React.forwardRef(
+  ({ children, table, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { alignItems: "start", gap: "8", maxW: "full", ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableContextProvider, { table, children }) });
+  }
+);
+DataTable.displayName = "@optiaxiom/react/DataTable";
+
 const IconSort = Skeleton.withIcon(
   {
     height: 12,
@@ -1273,15 +1284,15 @@ const IconSortUp = Skeleton.withIcon(
   )
 );
 
-var cell$2 = Skeleton.recipeRuntime({base:'_1xpuzkx'});
-var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',px:'16',py:'12',size:'full'},'_1h2p18j']});
+var cell$2 = Skeleton.recipeRuntime({base:'_1wb3kaz'});
+var content$1 = Skeleton.recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',px:'16',py:'12',size:'full'},'wzcpak']});
 
 const TableHeaderCell = React.forwardRef(({ children, className, colSpan, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...cell$2({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...content$1(), children }) }) }));
 TableHeaderCell.displayName = "@optiaxiom/react/TableHeaderCell";
 
-var button = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1u1vg3x']});
-var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_1cqfb0o'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_3qfsao'],variants:{active:{false:'lli230',true:'_1oyvjvj'}}});
+var button = Skeleton.recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'ql5m7w']});
+var handle = Skeleton.recipeRuntime({base:[{h:'full',z:'10'},'_1vmum53'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = Skeleton.recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1qaw493'],variants:{active:{false:'lqoft',true:'jjz7si'}}});
 
 const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
@@ -1334,22 +1345,22 @@ const DataTableHeaderCell = React.forwardRef(({ children, header, ...props }, re
 });
 DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
 
-var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md'},'iqd2m5'],variants:{layout:{auto:[{w:'full'},'grtl1j'],fixed:[{display:'grid',w:'fit'},'_1yxk1dj']}}});
-var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'_1b5qp60']});
+var table$1 = Skeleton.recipeRuntime({base:[{color:'fg.default',fontSize:'md'},'_1a95ksj'],variants:{layout:{auto:[{w:'full'},'_1apbdxk'],fixed:[{display:'grid',w:'fit'},'_1oufhjf']}}});
+var wrapper = Skeleton.recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'k9jdme']});
 
 const Table = React.forwardRef(
   ({ children, className, layout = "auto", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...wrapper({}, className), ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...table$1({ layout }), children: /* @__PURE__ */ jsxRuntime.jsx("table", { children }) }) })
 );
 Table.displayName = "@optiaxiom/react/Table";
 
-var body = Skeleton.recipeRuntime({base:['rnckus']});
+var body = Skeleton.recipeRuntime({base:['_1vqzo45']});
 
 const TableBody = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...body({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, children }) })
 );
 TableBody.displayName = "@optiaxiom/react/TableBody";
 
-var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1ngr9tt']});
+var cell$1 = Skeleton.recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1tnweiw']});
 
 const TableCell = React.forwardRef(
   ({ children, className, colSpan, ...props }, ref) => {
@@ -1361,33 +1372,35 @@ TableCell.displayName = "@optiaxiom/react/TableCell";
 const TableHeader = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, children }) }));
 TableHeader.displayName = "@optiaxiom/react/TableHeader";
 
-var row = Skeleton.recipeRuntime({base:['skjco2',{transition:'colors',w:'full'},'_19hs0h6']});
+var row = Skeleton.recipeRuntime({base:['_1d6io6s',{transition:'colors',w:'full'},'t5nsew']});
 
 const TableRow = React.forwardRef(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { asChild: true, ...row({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, children }) }) })
 );
 TableRow.displayName = "@optiaxiom/react/TableRow";
 
-var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1lgjjon'],variants:{pinned:{left:'_1a8t8ji',right:'iwr73o'},pinnedType:{body:'_15u3t1s',header:{}}}});
-var cellOffsetVar = 'var(--cq09lo)';
-var cellSizeVar = 'var(--_1tqp1zk)';
-var header = Skeleton.recipeRuntime({base:[{display:'grid'},'g8oqry']});
-var leftTotalSizeVar = 'var(--ec58eq)';
-var rightTotalSizeVar = 'var(--_1shna82)';
-var table = Skeleton.recipeRuntime({base:'_310nqy',variants:{pinned:{both:'pcm1yj',left:'_691536',none:{},right:'_1b3m771'}}});
+var cell = Skeleton.recipeRuntime({base:[{alignItems:'start',display:'flex'},'ntq9ga'],variants:{pinned:{left:'zgsyjz',right:'_1sz1kwm'},pinnedType:{body:'sq2m94',header:{}}}});
+var cellOffsetVar = 'var(--jabh0m)';
+var cellSizeVar = 'var(--uzup92)';
+var header = Skeleton.recipeRuntime({base:[{display:'grid'},'eb11ai']});
+var leftTotalSizeVar = 'var(--au6a8r)';
+var rightTotalSizeVar = 'var(--ge1nff)';
+var table = Skeleton.recipeRuntime({base:'_21dycs',variants:{pinned:{both:'_113hicb',left:'_2tc7zg',none:{},right:'euk9u9'}}});
 
 const COL_VIRTUALIZATION_THRESHOLD = 20;
 const ROW_VIRTUALIZATION_THRESHOLD = 20;
-const DataTable = React.forwardRef(
-  ({ estimatedRowHeight = 52, loading, table: table$1, ...props }, ref) => {
-    const tableRef = React.useRef(null);
+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("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: () => tableRef.current,
+      getScrollElement: () => innerRef.current,
       horizontal: true
     });
     const virtualColumns = columnVirtualizer.getVirtualItems();
@@ -1396,150 +1409,133 @@ const DataTable = React.forwardRef(
       count: rows.length,
       enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD || rows.length > ROW_VIRTUALIZATION_THRESHOLD,
       estimateSize: () => estimatedRowHeight,
-      getScrollElement: () => tableRef.current
+      getScrollElement: () => innerRef.current
     });
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      Skeleton.Box,
+      Table,
       {
-        alignItems: "start",
-        display: "flex",
-        flexDirection: "column",
-        maxW: "full",
+        layout: "fixed",
         ref,
+        style: dynamic.assignInlineVars({
+          [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
+          [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
+        }),
+        ...table(
+          {
+            pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
+          },
+          className
+        ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Table,
+          /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
+            DataTableHeaderCell,
             {
-              layout: "fixed",
-              ref: tableRef,
-              style: dynamic.assignInlineVars({
-                [leftTotalSizeVar]: `${table$1.getLeftTotalSize()}px`,
-                [rightTotalSizeVar]: `${table$1.getRightTotalSize()}px`
-              }),
-              ...table({
-                pinned: table$1.getLeftTotalSize() > 0 && table$1.getRightTotalSize() > 0 ? "both" : table$1.getLeftTotalSize() > 0 ? "left" : table$1.getRightTotalSize() > 0 ? "right" : "none"
+              header,
+              style: {
+                ...dynamic.assignInlineVars({
+                  [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
+                  [cellSizeVar]: `${header.getSize()}px`
+                })
+              },
+              ...cell({
+                pinned: header.column.getIsPinned() || void 0,
+                pinnedType: header.column.getIsPinned() ? "header" : void 0
               }),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { ...header(), children: table$1.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { display: "flex", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
-                  DataTableHeaderCell,
-                  {
-                    header,
-                    style: {
-                      ...dynamic.assignInlineVars({
-                        [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
-                        [cellSizeVar]: `${header.getSize()}px`
-                      })
-                    },
-                    ...cell({
-                      pinned: header.column.getIsPinned() || void 0,
-                      pinnedType: header.column.getIsPinned() ? "header" : void 0
-                    }),
-                    children: header.isPlaceholder ? null : reactTable.flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  },
-                  header.id
-                )) }, headerGroup.id)) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  TableBody,
-                  {
-                    display: "grid",
-                    style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
-                    children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
-                      row: fakeRow(table$1, rowIndex),
-                      virtualRow: void 0
-                    })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
-                      row: rows[virtualRow.index],
-                      virtualRow
-                    })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      TableRow,
+              children: header.isPlaceholder ? null : reactTable.flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          )) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TableBody,
+            {
+              display: "grid",
+              style: rowVirtualizer.options.enabled ? { height: `${rowVirtualizer.getTotalSize()}px` } : void 0,
+              children: (loading ? Array.from({ length: 10 }, (_, rowIndex) => ({
+                row: fakeRow(table$1, rowIndex),
+                virtualRow: void 0
+              })) : rowVirtualizer.options.enabled ? rowVirtualizer.getVirtualItems().map((virtualRow) => ({
+                row: rows[virtualRow.index],
+                virtualRow
+              })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }) => /* @__PURE__ */ jsxRuntime.jsxs(
+                TableRow,
+                {
+                  "data-highlighted": row.getIsSelected() ? "" : void 0,
+                  "data-index": virtualRow?.index,
+                  display: "flex",
+                  ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                  style: virtualRow ? {
+                    minHeight: virtualRow.size,
+                    position: "absolute",
+                    transform: `translateY(${virtualRow.start}px)`
+                  } : void 0,
+                  children: [
+                    row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
+                      TableCell,
+                      {
+                        style: {
+                          ...dynamic.assignInlineVars({
+                            [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                          })
+                        },
+                        ...cell({
+                          pinned: "left",
+                          pinnedType: "body"
+                        }),
+                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                      },
+                      cell$1.id
+                    )),
+                    columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { style: { width: virtualColumnsOffset } }),
+                    (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+                      const cells = row.getCenterVisibleCells();
+                      return cells[virtualCell.index];
+                    }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
+                      TableCell,
+                      {
+                        style: {
+                          ...dynamic.assignInlineVars({
+                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                          })
+                        },
+                        ...cell(),
+                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
+                      },
+                      cell$1.id
+                    )),
+                    row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
+                      TableCell,
                       {
-                        "data-highlighted": row.getIsSelected() ? "" : void 0,
-                        "data-index": virtualRow?.index,
-                        display: "flex",
-                        ref: virtualRow ? rowVirtualizer.measureElement : void 0,
-                        style: virtualRow ? {
-                          minHeight: virtualRow.size,
-                          position: "absolute",
-                          transform: `translateY(${virtualRow.start}px)`
-                        } : void 0,
-                        children: [
-                          row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
-                            TableCell,
-                            {
-                              style: {
-                                ...dynamic.assignInlineVars({
-                                  [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
-                                })
-                              },
-                              ...cell({
-                                pinned: "left",
-                                pinnedType: "body"
-                              }),
-                              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                            },
-                            cell$1.id
-                          )),
-                          columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { style: { width: virtualColumnsOffset } }),
-                          (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
-                            const cells = row.getCenterVisibleCells();
-                            return cells[virtualCell.index];
-                          }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
-                            TableCell,
-                            {
-                              style: {
-                                ...dynamic.assignInlineVars({
-                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
-                                })
-                              },
-                              ...cell(),
-                              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                            },
-                            cell$1.id
-                          )),
-                          row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsxRuntime.jsx(
-                            TableCell,
-                            {
-                              style: {
-                                ...dynamic.assignInlineVars({
-                                  [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
-                                  [cellSizeVar]: `${cell$1.column.getSize()}px`
-                                })
-                              },
-                              ...cell({
-                                pinned: "right",
-                                pinnedType: "body"
-                              }),
-                              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                            },
-                            cell$1.id
-                          ))
-                        ]
+                        style: {
+                          ...dynamic.assignInlineVars({
+                            [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                            [cellSizeVar]: `${cell$1.column.getSize()}px`
+                          })
+                        },
+                        ...cell({
+                          pinned: "right",
+                          pinnedType: "body"
+                        }),
+                        children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { w: fakeCellWidth(cell$1.id) }) : reactTable.flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                       },
-                      row.id
+                      cell$1.id
                     ))
-                  }
-                )
-              ]
-            }
-          ),
-          table$1.getPageCount() > 1 && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { mt: "8", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.Pagination,
-            {
-              onPageChange: (newPage) => table$1.setPageIndex(newPage - 1),
-              page: table$1.getState().pagination.pageIndex + 1,
-              total: table$1.getPageCount()
+                  ]
+                },
+                row.id
+              ))
             }
-          ) })
+          )
         ]
       }
     );
   }
 );
-DataTable.displayName = "@optiaxiom/react/DataTable";
+DataTableBody.displayName = "@optiaxiom/react/DataTableBody";
 const fakeCellsFactory = (columns, rowIndex) => () => columns.map((column, columnIndex) => ({
   column,
   getContext: () => ({}),
@@ -1563,6 +1559,262 @@ const fakeRow = (table, rowIndex) => ({
   id: "loading" + rowIndex
 });
 
+const [SelectContextProvider, useSelectContext] = reactContext.createContext("Select");
+
+function Select({
+  children,
+  defaultOpen = false,
+  defaultValue,
+  disabled,
+  items,
+  itemToKey = (value2) => value2,
+  itemToString = (value2) => value2 ? String(value2) : "",
+  onOpenChange,
+  onValueChange,
+  open,
+  value,
+  ...props
+}) {
+  const [selectedItem, setSelectedItem] = reactUseControllableState.useControllableState({
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+    prop: value
+  });
+  const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: open
+  });
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    isOpen,
+    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
+  );
+  const downshift$1 = downshift.useSelect({
+    ...props,
+    highlightedIndex,
+    isOpen: placed,
+    items,
+    itemToKey,
+    itemToString,
+    onHighlightedIndexChange(changes) {
+      setHighlightedIndex(changes.highlightedIndex);
+    },
+    onIsOpenChange({ isOpen: isOpen2 }) {
+      setIsOpen(isOpen2);
+    },
+    onSelectedItemChange({ selectedItem: selectedItem2 }) {
+      setSelectedItem(selectedItem2);
+    },
+    selectedItem: selectedItem ?? null
+  });
+  downshift$1.getMenuProps({}, { suppressRefError: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SelectContextProvider,
+    {
+      disabled,
+      downshift: downshift$1,
+      highlightedItem: items[highlightedIndex],
+      isOpen,
+      items,
+      itemToKey,
+      itemToString,
+      placed,
+      selectedItem,
+      setPlaced,
+      children
+    }
+  ) });
+}
+Select.displayName = "@optiaxiom/react/Select";
+
+var content = Skeleton.recipeRuntime({base:['lma52j']});
+
+const SelectContent = React.forwardRef(
+  ({
+    align = "start",
+    children,
+    className,
+    loading,
+    side = "bottom",
+    ...props
+  }, ref) => {
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { downshift, isOpen, placed, setPlaced } = useSelectContext("SelectContent");
+    return isOpen && /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.MenuListbox,
+      {
+        asChild: true,
+        maxH: "sm",
+        minW: loading ? "trigger" : void 0,
+        provider: "popper",
+        ...content({}, className),
+        ...boxProps,
+        ...downshift.getMenuProps(
+          { ref, ...restProps },
+          { suppressRefError: !placed }
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactPopper.PopperContent,
+          {
+            align,
+            onPlaced: () => setPlaced(true),
+            side,
+            sideOffset: 5,
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children
+          }
+        )
+      }
+    ) }) });
+  }
+);
+SelectContent.displayName = "@optiaxiom/react/SelectContent";
+
+const SelectItem = React.forwardRef(
+  ({ children, item, size, ...props }, ref) => {
+    const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
+    const itemProps = downshift.getItemProps({ item, ref, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Box,
+      {
+        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-selected": selectedItem === item ? "" : void 0,
+        size,
+        ...itemProps,
+        children
+      }
+    );
+  }
+);
+SelectItem.displayName = "@optiaxiom/react/SelectItem";
+
+const SelectRadioItem = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
+  }
+);
+SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
+
+const SelectTrigger = React.forwardRef(
+  ({
+    "aria-labelledby": ariaLabelledBy,
+    asChild,
+    children,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const { disabled, downshift, isOpen } = useSelectContext("SelectTrigger");
+    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
+    const { labelId = ariaLabelledBy } = Skeleton.useFieldContext();
+    const buttonRef = React.useRef(null);
+    React.useEffect(() => {
+      if (!labelId || !buttonRef.current) {
+        return;
+      }
+      const button = buttonRef.current;
+      const label = document.getElementById(labelId);
+      if (!label) {
+        return;
+      }
+      const onLabelClick = () => button.focus();
+      label.addEventListener("click", onLabelClick);
+      return () => label.removeEventListener("click", onLabelClick);
+    }, [labelId]);
+    const [focusOnOpen] = React.useState(isOpen);
+    React.useEffect(
+      function() {
+        if (focusOnOpen && buttonRef.current) {
+          buttonRef.current.focus();
+        }
+      },
+      [focusOnOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactPopper.PopperAnchor,
+      {
+        asChild: true,
+        ...boxProps,
+        ...downshift.getToggleButtonProps({
+          ...restProps,
+          "aria-labelledby": labelId,
+          disabled,
+          onKeyDown: (event) => {
+            onKeyDown?.(event);
+            document.dispatchEvent(new Event("tooltip.open"));
+          }
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { ref: buttonRef, children }) })
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
+
+const SelectValue = React.forwardRef(
+  ({ children, placeholder, ...props }, ref) => {
+    const { itemToString, selectedItem } = useSelectContext("SelectValue");
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...props, ref, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) });
+  }
+);
+SelectValue.displayName = "@optiaxiom/react/SelectValue";
+
+const DEFAULT_PAGE_SIZES = ["10", "20", "30", "50", "100"];
+const DataTableFooter = React.forwardRef(
+  ({ pageSizeOptions = DEFAULT_PAGE_SIZES, showPageSizeOptions, ...props }, ref) => {
+    const { table } = useDataTableContext("DataTableFooter");
+    const { pagination } = table.getState();
+    const pageSizeId = reactId.useId();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Skeleton.Flex,
+      {
+        alignSelf: "stretch",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Flex, { flexDirection: "row", gap: "8", children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { color: "fg.secondary", id: pageSizeId, children: "Page Size" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Select,
+              {
+                items: pageSizeOptions,
+                onValueChange: (value) => value && table.setPageSize(parseFloat(value)),
+                value: pagination.pageSize.toString(),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { appearance: "subtle", "aria-labelledby": pageSizeId, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: pageSizeOptions.map((rows) => /* @__PURE__ */ jsxRuntime.jsx(SelectRadioItem, { item: rows, children: rows }, rows)) })
+                ]
+              }
+            )
+          ] }) }),
+          table.getPageCount() > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            Skeleton.Pagination,
+            {
+              onPageChange: (newPage) => table.setPageIndex(newPage - 1),
+              page: pagination.pageIndex + 1,
+              total: table.getPageCount()
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Text, { 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 = Skeleton.withIcon(
   {
     name: "IconCalendar"
@@ -1578,7 +1830,7 @@ const IconCalendar = Skeleton.withIcon(
   )
 );
 
-var picker = Skeleton.recipeRuntime({base:'_1pzvmwa'});
+var picker = Skeleton.recipeRuntime({base:'_1rbnf1h'});
 
 function format(date) {
   return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).toISOString().split("T")[0];
@@ -1683,7 +1935,7 @@ const DateInput = React.forwardRef(
 );
 DateInput.displayName = "@optiaxiom/react/DateInput";
 
-var mark = Skeleton.recipeRuntime({base:'qg0ji5'});
+var mark = Skeleton.recipeRuntime({base:'_15man6o'});
 
 const useHighlightedChunks = (content, query) => {
   const terms = React.useMemo(
@@ -1715,8 +1967,8 @@ const Highlight = React.forwardRef(
 );
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
-var editor = Skeleton.recipeRuntime({base:'v7mcf8',variants:{empty:{false:{},true:'_1sgl8fk'}}});
-var input$1 = Skeleton.recipeRuntime({base:'kt472w'});
+var editor = Skeleton.recipeRuntime({base:'_1vp28rp',variants:{empty:{false:{},true:'_1aiodzu'}}});
+var input$1 = Skeleton.recipeRuntime({base:'_1ob4yek'});
 
 const InlineInput = React.forwardRef(
   ({
@@ -1885,7 +2137,7 @@ const NavSeparator = React.forwardRef(
 );
 NavSeparator.displayName = "@optiaxiom/react/NavSeparator";
 
-var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'haaqgl'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = Skeleton.recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',whiteSpace:'nowrap'},'c9zf4r'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 const Pill = React.forwardRef(
   ({ asChild, children, className, disabled, size = "sm", ...props }, ref) => {
@@ -1915,116 +2167,6 @@ const PillGroup = React.forwardRef(
 );
 PillGroup.displayName = "@optiaxiom/react/PillGroup";
 
-const [SelectContextProvider, useSelectContext] = reactContext.createContext("Select");
-
-function Select({
-  children,
-  defaultOpen = false,
-  defaultValue,
-  disabled,
-  items,
-  itemToKey = (value2) => value2,
-  itemToString = (value2) => value2 ? String(value2) : "",
-  onOpenChange,
-  onValueChange,
-  open,
-  value,
-  ...props
-}) {
-  const [selectedItem, setSelectedItem] = reactUseControllableState.useControllableState({
-    defaultProp: defaultValue,
-    onChange: onValueChange,
-    prop: value
-  });
-  const [isOpen, setIsOpen] = reactUseControllableState.useControllableState({
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: open
-  });
-  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
-    isOpen,
-    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
-  );
-  const downshift$1 = downshift.useSelect({
-    ...props,
-    highlightedIndex,
-    isOpen: placed,
-    items,
-    itemToKey,
-    itemToString,
-    onHighlightedIndexChange(changes) {
-      setHighlightedIndex(changes.highlightedIndex);
-    },
-    onIsOpenChange({ isOpen: isOpen2 }) {
-      setIsOpen(isOpen2);
-    },
-    onSelectedItemChange({ selectedItem: selectedItem2 }) {
-      setSelectedItem(selectedItem2);
-    },
-    selectedItem: selectedItem ?? null
-  });
-  downshift$1.getMenuProps({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsxRuntime.jsx(reactPopper.Popper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    SelectContextProvider,
-    {
-      disabled,
-      downshift: downshift$1,
-      highlightedItem: items[highlightedIndex],
-      isOpen,
-      items,
-      itemToKey,
-      itemToString,
-      placed,
-      selectedItem,
-      setPlaced,
-      children
-    }
-  ) });
-}
-Select.displayName = "@optiaxiom/react/Select";
-
-var content = Skeleton.recipeRuntime({base:['_14acgzp']});
-
-const SelectContent = React.forwardRef(
-  ({
-    align = "start",
-    children,
-    className,
-    loading,
-    side = "bottom",
-    ...props
-  }, ref) => {
-    const { boxProps, restProps } = Skeleton.extractBoxProps(props);
-    const { downshift, isOpen, placed, setPlaced } = useSelectContext("SelectContent");
-    return isOpen && /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ModalLayer, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.MenuListbox,
-      {
-        asChild: true,
-        maxH: "sm",
-        minW: loading ? "trigger" : void 0,
-        provider: "popper",
-        ...content({}, className),
-        ...boxProps,
-        ...downshift.getMenuProps(
-          { ref, ...restProps },
-          { suppressRefError: !placed }
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactPopper.PopperContent,
-          {
-            align,
-            onPlaced: () => setPlaced(true),
-            side,
-            sideOffset: 5,
-            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Spinner, {}) }) : children
-          }
-        )
-      }
-    ) }) });
-  }
-);
-SelectContent.displayName = "@optiaxiom/react/SelectContent";
-
 const SelectGroup = React.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxGroup, { ref, ...props });
@@ -2032,25 +2174,6 @@ const SelectGroup = React.forwardRef(
 );
 SelectGroup.displayName = "@optiaxiom/react/SelectGroup";
 
-const SelectItem = React.forwardRef(
-  ({ children, item, size, ...props }, ref) => {
-    const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
-    const itemProps = downshift.getItemProps({ item, ref, ...props });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Box,
-      {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        "data-selected": selectedItem === item ? "" : void 0,
-        size,
-        ...itemProps,
-        children
-      }
-    );
-  }
-);
-SelectItem.displayName = "@optiaxiom/react/SelectItem";
-
 const SelectLabel = React.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxLabel, { ref, ...props });
@@ -2058,13 +2181,6 @@ const SelectLabel = React.forwardRef(
 );
 SelectLabel.displayName = "@optiaxiom/react/SelectLabel";
 
-const SelectRadioItem = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxRadioItem, { children }) });
-  }
-);
-SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
-
 const SelectSeparator = React.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.ListboxSeparator, { ref, ...props });
@@ -2072,60 +2188,6 @@ const SelectSeparator = React.forwardRef(
 );
 SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";
 
-const SelectTrigger = React.forwardRef(
-  ({ asChild, children, onKeyDown, ...props }, ref) => {
-    const { disabled, downshift, isOpen } = useSelectContext("SelectTrigger");
-    const { labelId } = Skeleton.useFieldContext();
-    const buttonRef = React.useRef(null);
-    React.useEffect(() => {
-      if (!labelId || !buttonRef.current) {
-        return;
-      }
-      const button = buttonRef.current;
-      const label = document.getElementById(labelId);
-      if (!label) {
-        return;
-      }
-      const onLabelClick = () => button.focus();
-      label.addEventListener("click", onLabelClick);
-      return () => label.removeEventListener("click", onLabelClick);
-    }, [labelId]);
-    const [focusOnOpen] = React.useState(isOpen);
-    React.useEffect(
-      function() {
-        if (focusOnOpen && buttonRef.current) {
-          buttonRef.current.focus();
-        }
-      },
-      [focusOnOpen]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactPopper.PopperAnchor,
-      {
-        asChild: true,
-        ...props,
-        ...downshift.getToggleButtonProps({
-          disabled,
-          onKeyDown: (event) => {
-            onKeyDown?.(event);
-            document.dispatchEvent(new Event("tooltip.open"));
-          }
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Skeleton.AngleMenuButton, { "aria-labelledby": labelId, ref: buttonRef, children }) })
-      }
-    );
-  }
-);
-SelectTrigger.displayName = "@optiaxiom/react/SelectTrigger";
-
-const SelectValue = React.forwardRef(
-  ({ children, placeholder, ...props }, ref) => {
-    const { itemToString, selectedItem } = useSelectContext("SelectValue");
-    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Box, { ...props, ref, children: children ?? (selectedItem ? itemToString(selectedItem) : placeholder) });
-  }
-);
-SelectValue.displayName = "@optiaxiom/react/SelectValue";
-
 const [SpotlightContextProvider, useSpotlightContext] = reactContext.createContext("Spotlight");
 
 function Spotlight({
@@ -2242,7 +2304,7 @@ const SpotlightEmpty = React.forwardRef(
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";
 
-var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'woofmc']});
+var input = Skeleton.recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'fm8904']});
 
 const SpotlightInput = React.forwardRef(
   ({ addonAfter, className, ...props }, ref) => {
@@ -2299,7 +2361,7 @@ const SpotlightLabel = React.forwardRef(
 );
 SpotlightLabel.displayName = "@optiaxiom/react/SpotlightLabel";
 
-var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_118f3v0']});
+var item$1 = Skeleton.recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'yz4sit']});
 
 const SpotlightRadioItem = React.forwardRef(({ addonAfter, children, className, description, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SpotlightItem, { asChild: true, ref, ...item$1({}, className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2396,7 +2458,7 @@ const CommandSubItem = React.forwardRef(
 );
 CommandSubItem.displayName = "@optiaxiom/react/CommandSubItem";
 
-var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'t9pj6j',true:'o9imvy'}}});
+var item = Skeleton.recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_13t8sg9',true:'_1w5udjt'}}});
 
 const SpotlightSubItem = React.forwardRef(({ children, className, selected, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2437,7 +2499,7 @@ const SpotlightTrigger = React.forwardRef(({ addonAfter, children, hotkey = DEFA
 });
 SpotlightTrigger.displayName = "@optiaxiom/react/SpotlightTrigger";
 
-var nav = Skeleton.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',py:'16'},'spgzp9']});
+var nav = Skeleton.recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',py:'16'},'_16yl120']});
 
 const SubNav = React.forwardRef(
   ({ children, ...props }, ref) => {
@@ -2509,7 +2571,8 @@ exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
 exports.CommandListbox = CommandListbox;
 exports.DataTable = DataTable;
-exports.DataTableHeaderCell = DataTableHeaderCell;
+exports.DataTableBody = DataTableBody;
+exports.DataTableFooter = DataTableFooter;
 exports.DateInput = DateInput;
 exports.Highlight = Highlight;
 exports.InlineInput = InlineInput;