@optiaxiom/react 0.13.3 → 0.13.5

package/dist/esm/packages/react/src/data-table-header-cell/DataTableHeaderCell.js

@@ -9,40 +9,58 @@ import { Icon } from '../icon/Icon.js';
 import { IconSort } from '../icons/IconSort.js';
 import { IconSortDown } from '../icons/IconSortDown.js';
 import { IconSortUp } from '../icons/IconSortUp.js';
+import { Separator } from '../separator/Separator.js';
 import { TableHeaderCell } from '../table-header-cell/TableHeaderCell.js';
-import { button, icon } from './DataTableHeaderCell-css.js';
+import { handle, button, icon } from './DataTableHeaderCell-css.js';
 
 const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsxs(
     TableHeaderCell,
     {
       "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : void 0,
       colSpan: header.colSpan,
       ref,
       ...props,
-      children: header.column.columnDef.enableSorting ? /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(Cover, { asChild: true, inset: true, ...button(), children: /* @__PURE__ */ jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
-        children,
-        sortDir && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-          "sorted ",
-          sortDir === "asc" ? "ascending" : "descending"
-        ] }),
-        /* @__PURE__ */ jsxs(
-          ActionsContent,
+      children: [
+        header.column.columnDef.enableResizing && /* @__PURE__ */ jsx(ActionsContent, { visible: header.column.getIsResizing(), children: /* @__PURE__ */ jsx(
+          Separator,
           {
-            display: "grid",
-            placeItems: "center",
-            visible: !!sortDir,
-            children: [
-              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === false }), children: /* @__PURE__ */ jsx(IconSort, {}) }),
-              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsx(IconSortUp, {}) }),
-              /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "desc" }), children: /* @__PURE__ */ jsx(IconSortDown, {}) })
-            ]
+            onDoubleClick: () => header.column.resetSize(),
+            onMouseDown: header.getResizeHandler(),
+            onTouchStart: header.getResizeHandler(),
+            orientation: "vertical",
+            style: {
+              transform: header.getContext().table.options.columnResizeMode === "onEnd" && header.column.getIsResizing() ? `translateX(${header.getContext().table.getState().columnSizingInfo.deltaOffset}px)` : ""
+            },
+            ...handle({
+              resizing: header.column.getIsResizing()
+            })
           }
-        )
-      ] }) }) }) : children
+        ) }),
+        header.column.columnDef.enableSorting ? /* @__PURE__ */ jsx(Cover, { asChild: true, inset: true, ...button(), children: /* @__PURE__ */ jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
+          children,
+          sortDir && /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+            "sorted ",
+            sortDir === "asc" ? "ascending" : "descending"
+          ] }),
+          /* @__PURE__ */ jsxs(
+            ActionsContent,
+            {
+              display: "grid",
+              placeItems: "center",
+              visible: !!sortDir,
+              children: [
+                /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === false }), children: /* @__PURE__ */ jsx(IconSort, {}) }),
+                /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "asc" }), children: /* @__PURE__ */ jsx(IconSortUp, {}) }),
+                /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ active: sortDir === "desc" }), children: /* @__PURE__ */ jsx(IconSortDown, {}) })
+              ]
+            }
+          )
+        ] }) }) : children
+      ]
     }
-  );
+  ) });
 });
 DataTableHeaderCell.displayName = "@optiaxiom/react/DataTableHeaderCell";
 

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-CcT7icXP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-B4zY8GST.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({base:'_1f5x40f'});
+var picker = recipeRuntime({base:'xfiugo'});
 
 export { picker };

package/dist/esm/packages/react/src/dialog-body/DialogBody-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/dialog-body/DialogBody.css.ts.vanilla-Dm0YAf3k.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',justifyContent:'start',overflow:'auto',px:'24',py:'16'},'_104a55z']});
+
+export { body };

package/dist/esm/packages/react/src/dialog-body/DialogBody.js

@@ -2,23 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
+import { body } from './DialogBody-css.js';
 
 const DialogBody = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Flex,
-      {
-        flex: "1",
-        fontSize: "md",
-        justifyContent: "start",
-        overflow: "auto",
-        px: "24",
-        py: "16",
-        ref,
-        ...props,
-        children
-      }
-    );
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Flex, { ref, ...body({}, className), ...props, children });
   }
 );
 DialogBody.displayName = "@optiaxiom/react/DialogBody";

package/dist/esm/packages/react/src/dialog-content/DialogContent-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-WsyKdQl9.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-BFjQQ3wr.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'pyj0j5'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1qgrwol'],variants:{size:{sm:'_18xod3t',md:'_18jzl67',lg:'oezawi',fullscreen:'_1cni2zp'}}});
-var nestedDialogCountVar = 'var(--le1pje)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'ayncfe'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_13zanij'],variants:{size:{sm:'_1qup7o0',md:'_18ypdfz',lg:'_149pbt4',fullscreen:'_15dfpq5'}}});
+var nestedDialogCountVar = 'var(--ios1he)';
 
 export { backdrop, content, nestedDialogCountVar };

package/dist/esm/packages/react/src/dialog-content/DialogContent.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { useDialogContext } from '../dialog-context/DialogContext.js';
 import { ModalContextProvider } from '../modal-context/ModalContext.js';
@@ -22,8 +23,10 @@ const DialogContent = forwardRef(
     style,
     transitionType = "fade",
     ...props
-  }, ref) => {
+  }, outerRef) => {
     const { nestedDialogCount, open } = useDialogContext("DialogContent");
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
     return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
       /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
         Backdrop,
@@ -47,7 +50,7 @@ const DialogContent = forwardRef(
           },
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children: /* @__PURE__ */ jsx(ModalContextProvider, { enabled: true, children }) })
+          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children: /* @__PURE__ */ jsx(ModalContextProvider, { shardRef: innerRef, children }) })
         }
       ) })
     ] }) });

package/dist/esm/packages/react/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'end',px:'24',py:'20'}]});

package/dist/esm/packages/react/src/dialog-header/DialogHeader-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-CUkMUdmf.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-CwS4vVfx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_17yzxb5']});
-var close = recipeRuntime({base:['_13utuj2']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1rh7dj7']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1nlzzma']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'mxzlqt']});
+var close = recipeRuntime({base:['_122mz7v']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_13xvwgq']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'s3kulg']});
 
 export { actions, close, description, title };

package/dist/esm/packages/react/src/disclosure-content/DisclosureContent-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-Br0LaPeF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DwpFRrqe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var inner = recipeRuntime({base:['jvb9o0']});
-var outer = recipeRuntime({base:[{display:'grid'},'_1h2lq5b']});
+var inner = recipeRuntime({base:['_1at1o0m']});
+var outer = recipeRuntime({base:[{display:'grid'},'zwfqca']});
 
 export { inner, outer };

package/dist/esm/packages/react/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,8 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CMtNYLN6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-C-ik3QxZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1wferkd',start:'qx72g4'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',h:'lg',px:'8',transition:'colors'},'_8ilq54']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1y9nqqe',start:'_1khcdoe'}}});
+var root = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'8',p:'8',transition:'colors'},'_1uozo1n']});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'inherit',fontWeight:'inherit',gap:'4',rounded:'md',textAlign:'start',w:'full'},'_6r08h6']});
 
-export { icon, trigger };
+export { icon, root, trigger };

package/dist/esm/packages/react/src/disclosure-trigger/DisclosureTrigger.js

@@ -10,7 +10,7 @@ import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js
 import { Flex } from '../flex/Flex.js';
 import { IconAngleLeft } from '../icons/IconAngleLeft.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
-import { trigger, icon } from './DisclosureTrigger-css.js';
+import { root, trigger, icon } from './DisclosureTrigger-css.js';
 
 const DisclosureTrigger = forwardRef(
   ({
@@ -22,25 +22,13 @@ const DisclosureTrigger = forwardRef(
     ...props
   }, ref) => {
     useDisclosureContext("DisclosureTrigger");
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...trigger({}, className), ...props, children: [
+    return /* @__PURE__ */ jsxs(Flex, { ref, ...root({}, className), ...props, children: [
       addonBefore,
-      /* @__PURE__ */ jsx(
-        Flex,
-        {
-          asChild: true,
-          flexDirection: "row",
-          fontWeight: "inherit",
-          gap: "4",
-          rounded: "md",
-          textAlign: "start",
-          w: "full",
-          children: /* @__PURE__ */ jsx(Cover, { asChild: true, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { children: [
-            chevronPosition === "start" && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsx(IconAngleRight, {}) }),
-            /* @__PURE__ */ jsx(Box, { flex: "1", children }),
-            chevronPosition === "end" && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsx(IconAngleLeft, {}) })
-          ] }) })
-        }
-      ),
+      /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger(), children: /* @__PURE__ */ jsx(Cover, { asChild: true, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { children: [
+        chevronPosition === "start" && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsx(IconAngleRight, {}) }),
+        /* @__PURE__ */ jsx(Box, { flex: "1", children }),
+        chevronPosition === "end" && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: /* @__PURE__ */ jsx(IconAngleLeft, {}) })
+      ] }) }) }),
       addonAfter
     ] });
   }

package/dist/esm/packages/react/src/drawer-content/DrawerContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-CIyJ6so8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-aQXscn3O.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1f9dpll'],variants:{position:{bottom:[{borderT:'1'},'_1jypnij'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_4io4h3'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'dqvctn']}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'us63is'],variants:{position:{bottom:[{borderT:'1'},'_105qmzd'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_11c5wtj'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1af7yqa']}}});
 
 export { content };

package/dist/esm/packages/react/src/drawer-content/DrawerContent.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixDialog from '@radix-ui/react-dialog';
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { useDrawerContext } from '../drawer-context/DrawerContext.js';
 import { ModalContextProvider } from '../modal-context/ModalContext.js';
@@ -19,8 +20,10 @@ const mapPositionToTransitionSide = {
   right: "left"
 };
 const DrawerContent = forwardRef(
-  ({ children, position = "right", ...props }, ref) => {
+  ({ children, position = "right", ...props }, outerRef) => {
     const { open } = useDrawerContext("DrawerContent");
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
     return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
       /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
       /* @__PURE__ */ jsx(
@@ -35,7 +38,7 @@ const DrawerContent = forwardRef(
               elevation: "drawer",
               onBlur: onReactSelectInputBlur,
               ...content({ position }),
-              children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(ModalContextProvider, { enabled: true, children }) })
+              children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(ModalContextProvider, { shardRef: innerRef, children }) })
             }
           )
         }

package/dist/esm/packages/react/src/drawer-header/DrawerHeader-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/drawer-header/DrawerHeader.css.ts.vanilla-CUEjr8R4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/drawer-header/DrawerHeader.css.ts.vanilla-DxeK1by4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1flu4he']});
-var close = recipeRuntime({base:['_1s9g0d8']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_16qk9el']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'c3kc2g']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'xvtknv']});
+var close = recipeRuntime({base:['cvy7qt']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1ceqz39']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'p2gox3']});
 
 export { actions, close, description, title };

package/dist/esm/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-BksLzXB6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-Ql0bUqC5.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1wj1us8'});
+var mark = recipeRuntime({base:'_1vo9hz4'});
 
 export { mark };

package/dist/esm/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-CJg2GJ4t.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-C6hE8sQm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_12xa35a',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_18sx6ue']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_153r5s4']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1ano4zw'],variants:{offset:{false:'_17pgoxk',true:{}},position:{'bottom-right':'evp7ak','top-right':'ypvsed'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'tx84iv']});
+var badge = recipeRuntime({base:'_10xbs9a',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'dkqikl']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'wz1mmy']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1r75ky6'],variants:{offset:{false:'_1tzg20',true:{}},position:{'bottom-right':'_1srstkn','top-right':'c020y4'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'d20ooy']});
 
 export { badge, floating, indicator };

package/dist/esm/packages/react/src/inline-input/InlineInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DYLXKhyJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-Bu69qMCO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'_1s00z5h',variants:{empty:{false:{},true:'_1wumxxz'}}});
-var input = recipeRuntime({base:'_2p9zh3'});
+var editor = recipeRuntime({base:'f1757a',variants:{empty:{false:{},true:'q3cnf'}}});
+var input = recipeRuntime({base:'p6lyit'});
 
 export { editor, input };

package/dist/esm/packages/react/src/input/Input-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

package/dist/esm/packages/react/src/input-control/InputControl-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-BTzKwlXr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-Coaams4S.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['z6eq3',{bg:'transparent',flex:'auto',w:'full'},'_1t2v3q2','_28k6r0'],variants:{size:{md:{},lg:{},xl:['_3965yc']}}});
+var control = recipeRuntime({base:['vxajvx',{bg:'transparent',flex:'auto',w:'full'},'topng','_1l93yto'],variants:{size:{md:{},lg:{},xl:['_1umof0v']}}});
 
 export { control };

package/dist/esm/packages/react/src/input-root/InputRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-Dfk5YZBS.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-BTzKwlXr.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-Cg01OK6w.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/actions-root/ActionsRoot.css.ts.vanilla-CnoocOUG.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-Coaams4S.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-DaaV21PL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1i0rc5i']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_68rn9p']});
 
 export { root };

package/dist/esm/packages/react/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-w_n0HaYc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DX8ivcvU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_1fz4pio'],variants:{variant:{outline:{border:'1',borderB:'2',borderColor:'border.tertiary',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = recipeRuntime({base:'_1eul3ey',variants:{variant:{outline:'_93nml8',subtle:{}}}});
+var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'hk1hbv'],variants:{variant:{outline:{border:'1',borderB:'2',borderColor:'border.tertiary',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
+var keys = recipeRuntime({base:'zjr9im',variants:{variant:{outline:'_14omt34',subtle:{}}}});
 
 export { kbd, keys };

package/dist/esm/packages/react/src/layers/layers-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._1bu6yhw';
-var reset = 'optiaxiom._1d4s1ug';
+var components = 'optiaxiom._8k4b2z';
+var reset = 'optiaxiom._1m9kadp';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

package/dist/esm/packages/react/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-c1m61on1.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-BpMg120i.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'oc13o5']});
-var link = recipeRuntime({base:['ulctin','_1s92vn7'],variants:{appearance:{'default':'_12gbh4k',inverse:'_415bgs',subtle:'yaaqax'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1txr56f']});
+var link = recipeRuntime({base:['a9pxaq','_1aw9tq'],variants:{appearance:{'default':'_17pxl0',inverse:'xzmlu4',subtle:'vhc4ig'}}});
 
 export { icon, link };

package/dist/esm/packages/react/src/link/Link.js

@@ -18,12 +18,13 @@ const Link = forwardRef(
     className,
     disabled,
     external,
+    inset,
     overlay,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "a";
     const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...link({ appearance }, className), ...boxProps, children: /* @__PURE__ */ jsx(Cover, { asChild: true, disabled: !overlay, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...link({ appearance }, className), ...boxProps, children: /* @__PURE__ */ jsx(Cover, { asChild: true, disabled: !overlay, inset, children: /* @__PURE__ */ jsx(
       Comp,
       {
         "aria-disabled": disabled,

package/dist/esm/packages/react/src/listbox-item/ListboxItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-D4eCpgBT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-BXEeUFyj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'_1b2h8xt']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'e3vk9g'],variants:{intent:{danger:'s909qk',neutral:'_5nos58'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'lsyqp']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'obwo0q']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1clz5x7'],variants:{intent:{danger:'jzjm01',neutral:'u6a4kr'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'r9z6ot']});
 
 export { description, item, title };

package/dist/esm/packages/react/src/menu-listbox/MenuListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-BgSCCJmL.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-DPV029Nl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1go1rsn'],variants:{maxH:{xs:'_1hzlwcl',sm:'_15fh51f',md:'dsdoqv',lg:'_5anoup',full:{}},minW:{'0':{},trigger:'_19njpm9'},provider:{'dropdown-menu':'_1dmv3to',popover:'_8ojy1t',popper:'v2y5l1'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_15pstdz'],variants:{maxH:{xs:'rmjpgo',sm:'_19jl4hd',md:'okgrta',lg:'_4yn054',full:{}},minW:{'0':{},trigger:'_1exfxno'},provider:{'dropdown-menu':'t742us',popover:'pl2093',popper:'puto2y'}}});
 
 export { listbox };

package/dist/esm/packages/react/src/modal-context/ModalContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { createContext } from '@radix-ui/react-context';
 
-const [ModalContextProvider, useModalContext] = createContext("Modal", { enabled: false });
+const [ModalContextProvider, useModalContext] = createContext("Modal", { shardRef: { current: null } });
 
 export { ModalContextProvider, useModalContext };

package/dist/esm/packages/react/src/modal-layer/ModalLayer.js

@@ -9,17 +9,17 @@ import { useModalContext } from '../modal-context/ModalContext.js';
 
 const ModalLayer = forwardRef(
   ({ asChild, children, ...props }, ref) => {
-    const { enabled } = useModalContext("ModalLayer");
+    const { shardRef } = useModalContext("ModalLayer");
     const [locked] = useState(() => document.body.dataset.scrollLocked);
     const [guards] = useState(
       () => document.querySelector("[data-radix-focus-guard]")
     );
-    if (!enabled) {
+    if (!shardRef.current) {
       return asChild ? /* @__PURE__ */ jsx(Slot, { ref, ...props, children }) : /* @__PURE__ */ jsx(Fragment, { children });
     }
     let result = /* @__PURE__ */ jsx(DismissableLayer, { asChild, ref, ...props, children });
     if (locked) {
-      result = /* @__PURE__ */ jsx(RemoveScroll, { allowPinchZoom: true, as: Slot, children: result });
+      result = /* @__PURE__ */ jsx(RemoveScroll, { allowPinchZoom: true, as: Slot, shards: [shardRef], children: result });
     }
     if (guards) {
       result = /* @__PURE__ */ jsx(FocusGuards, { children: result });

package/dist/esm/packages/react/src/nav/Nav-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-DLgUCbvW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-pFdiUexo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_189hg5']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1xcax50']});
 
 export { nav };

package/dist/esm/packages/react/src/nav-account-item/NavAccountItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
-import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-Bq8qoQpb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
+import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-DlEWtoEm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:{flex:'1',flexDirection:'row',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'cwt6xn',true:'_1fdoxh7'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'dy9khn',true:'hisacu'}}});
 
 export { item };

package/dist/esm/packages/react/src/nav-body/NavBody-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BSdkAYOS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B7C-Rlf1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',gap:'4',justifyContent:'start',overflowX:'hidden',py:'8',w:'full'}],variants:{expanded:{false:{overflowY:'hidden'},true:{overflowY:'auto'}}}});

package/dist/esm/packages/react/src/nav-group-trigger/NavGroupTrigger.js

@@ -17,6 +17,7 @@ const NavGroupTrigger = forwardRef(
         id,
         mb: "4",
         mt: "8",
+        p: "0",
         px: "12",
         ref,
         w: "auto",