@optiaxiom/react 0.9.0 → 0.10.0

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

@@ -3,6 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Button } from '../button/Button.js';
 import { IconX } from '../icons/IconX.js';
 import { close } from './DialogHeader-css.js';

package/dist/packages/react/src/dialog-title/DialogTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-BYTSNFYm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-Dn_JURP7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'p4nshq']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1ff2aby']});
 
 export { title };

package/dist/packages/react/src/disclosure/Disclosure.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { DisclosureContextProvider } from '../disclosure-context/DisclosureContext.js';
 
 const Disclosure = forwardRef(

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CFl9bQXD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DaAN_Y5P.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_1pfvy0r']});
+var content = recipeRuntime({base:['_6lgpay']});
 
 export { content };

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

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js';
 import { content } from './DisclosureContent-css.js';
 

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-B2AxUXYe.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DWj2Guo6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1iqpti',start:'_12c8aso'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1197x96']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_10cnb7m',start:'ymvqs7'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1gww8hw']});
 
 export { icon, trigger };

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

@@ -3,13 +3,11 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js';
 import { Flex } from '../flex/Flex.js';
 import { IconAngleDown } from '../icons/IconAngleDown.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { trigger, icon } from './DisclosureTrigger-css.js';
 
 const DisclosureTrigger = forwardRef(
@@ -22,10 +20,10 @@ const DisclosureTrigger = forwardRef(
     ...props
   }, ref) => {
     useDisclosureContext("DisclosureTrigger");
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const startIcon = addonBefore || chevronPosition === "start" && !addonAfter && /* @__PURE__ */ jsx(IconAngleRight, {});
     const endIcon = addonAfter || chevronPosition === "end" && /* @__PURE__ */ jsx(IconAngleDown, {});
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger({}, className), ...boxProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
       startIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: startIcon }),
       /* @__PURE__ */ jsx(Box, { flex: "1", px: "4", children }),
       endIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: endIcon })

package/dist/packages/react/src/drawer-actions/DrawerActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-ByqBa1Sw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-r_hleTVk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_4kgoqj']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'b5eg42']});
 
 export { actions };

package/dist/packages/react/src/drawer-body/DrawerBody.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const DrawerBody = forwardRef(
   ({ children, ...props }, ref) => {

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-B-EGWoTb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-NHJHPwaW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1qj8i6u'],variants:{position:{bottom:[{borderT:'1'},'_1aex8bp'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1yexs3q'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1bm73cu']}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1quyfc1'],variants:{position:{bottom:[{borderT:'1'},'_1v68b7m'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1oms6iv'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1c04tom']}}});
 
 export { content };

package/dist/packages/react/src/drawer-description/DrawerDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-CB8-mW-z.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-Dst9oHvk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1os6dff']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'gbv27z']});
 
 export { description };

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

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const DrawerHeader = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/packages/react/src/drawer-title/DrawerTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-CbppEH-G.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-DEbk_nlk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'_1cyua2f']});
+var title = recipeRuntime({base:[{flex:'1'},'_1vny90j']});
 
 export { title };

package/dist/packages/react/src/dropdown-menu-content/DropdownMenuContent.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
 import { Spinner } from '../spinner/Spinner.js';

package/dist/packages/react/src/dropdown-menu-group/DropdownMenuGroup.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const DropdownMenuGroup = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/packages/react/src/dropdown-menu-label/DropdownMenuLabel.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const DropdownMenuLabel = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/packages/react/src/field/Field.js

@@ -3,6 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { FieldContext } from '../field-context/FieldContext.js';
 import { FieldLabel } from '../field-label/FieldLabel.js';
 import { Flex } from '../flex/Flex.js';

package/dist/packages/react/src/field-label/FieldLabel.js

@@ -5,6 +5,8 @@ import * as RadixLabel from '@radix-ui/react-label';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
 import { IconCircleQuestion } from '../icons/IconCircleQuestion.js';

package/dist/packages/react/src/grid/Grid.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const Grid = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Box, { display: "grid", gap: "16", gridTemplateColumns: "1", ref, ...props });

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CpDqZsEX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CSmxqdJn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'jjk0rt'});
+var mark = recipeRuntime({base:'wu2n89'});
 
 export { mark };

package/dist/packages/react/src/highlight/Highlight.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, Fragment } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { mark } from './Highlight-css.js';
 import { useHighlightedChunks } from './useHighlightedChunks.js';
 

package/dist/packages/react/src/icon/Icon.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const Icon = forwardRef(
   ({ children, ...props }, ref) => {

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-yqyoXdGL.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-lH4mRfRa.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'s0expt',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'ri30ci']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1564ksv']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'x6rbai'],variants:{offset:{false:'_9vt5wx',true:{}},position:{'bottom-right':'_13pgvmx','top-right':'q5qxcz'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'bfkrx5']});
+var badge = recipeRuntime({base:'_7qpmcb',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'lutr7r']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_2lpbk6']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'c8mva'],variants:{offset:{false:'_1jniw3q',true:{}},position:{'bottom-right':'jxbnno','top-right':'_1pj6n13'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1aqll49']});
 
 export { badge, floating, indicator };

package/dist/packages/react/src/indicator/Indicator.js

@@ -3,6 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Badge } from '../badge/Badge.js';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Flex } from '../flex/Flex.js';
 import { indicator, floating, badge } from './Indicator-css.js';
 

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-7r8ut9Qk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-B6qbDXX0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'_125fmoe',variants:{empty:{false:{},true:'y3898q'}}});
-var input = recipeRuntime({base:'j3b0sz'});
+var editor = recipeRuntime({base:'_1a4bnca',variants:{empty:{false:{},true:'_9ooao'}}});
+var input = recipeRuntime({base:'_4ei0v0'});
 
 export { editor, input };

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

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef, useRef, useEffect } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { input, editor } from './InlineInput-css.js';
 
 const InlineInput = forwardRef(

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

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

package/dist/packages/react/src/input/Input.js

@@ -2,12 +2,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
+import '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { InputAddon } from '../input-addon/InputAddon.js';
 import { InputControl } from '../input-control/InputControl.js';
 import { InputRoot } from '../input-root/InputRoot.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { root, addon, input } from './Input-css.js';
@@ -27,14 +26,14 @@ const Input = forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "input";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsxs(
       InputRoot,
       {
         addonPointerEvents,
         style,
         ...root({ size }, className),
-        ...sprinkleProps,
+        ...boxProps,
         children: [
           addonBefore && /* @__PURE__ */ jsx(InputAddon, { asChild: true, ...addon(), children: fallbackSpan(addonBefore) }),
           /* @__PURE__ */ jsx(

package/dist/packages/react/src/input-addon/InputAddon.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useInputContext } from '../input-context/InputContext.js';
 
 const InputAddon = forwardRef(

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CjU2Rdxm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DUbeUGGS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['iuyhkq',{bg:'transparent',flex:'auto',w:'full'},'_16cm039','_138lpna'],variants:{size:{md:{},lg:{},xl:['_1e3q0yw']}}});
+var control = recipeRuntime({base:['xfxe7c',{bg:'transparent',flex:'auto',w:'full'},'_1xdl0rg','_1tiab3u'],variants:{size:{md:{},lg:{},xl:['_1h46eis']}}});
 
 export { control };

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

@@ -5,12 +5,10 @@ import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
 import { useInputContext } from '../input-context/InputContext.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { control } from './InputControl-css.js';
 
 const InputControl = forwardRef(
@@ -21,7 +19,7 @@ const InputControl = forwardRef(
     const { descriptionId, error, errorId, inputId } = useFieldContext({
       error: errorProp
     });
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const { inputRef } = useInputContext("InputControl");
     const ref = useComposedRefs(inputRef, outerRef);
     return /* @__PURE__ */ jsx(
@@ -35,7 +33,7 @@ const InputControl = forwardRef(
         "data-invalid": error ? "" : undefined,
         "data-readonly": readOnly ? "" : undefined,
         ...control({ size }, className),
-        ...sprinkleProps,
+        ...boxProps,
         children: /* @__PURE__ */ jsx(Comp, { id: inputId, ref, ...restProps, children })
       }
     );

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CjU2Rdxm.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-Bn2BA_ZM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DUbeUGGS.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-DBa3xtou.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_2z60i2']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1szjwc2']});
 
 export { root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-CA_kba1R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-BLPj_gpK.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'},'_1tq5h90'],variants:{variant:{outline:{border:'1',borderB:'2',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = recipeRuntime({base:'e1jixi',variants:{variant:{outline:'_1rsd830',subtle:{}}}});
+var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_4gor0c'],variants:{variant:{outline:{border:'1',borderB:'2',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
+var keys = recipeRuntime({base:'_11yzyso',variants:{variant:{outline:'_1udni3k',subtle:{}}}});
 
 export { kbd, keys };

package/dist/packages/react/src/kbd/Kbd.js

@@ -2,6 +2,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { kbd, keys } from './Kbd-css.js';
 
 const mapKeyToCode = {

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._1lcqm4m';
-var reset = 'optiaxiom._1bcsvj8';
+var components = 'optiaxiom._14y547g';
+var reset = 'optiaxiom._133nbid';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-DkFNs5hx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-DV40SWxy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'nyjylt']});
-var link = recipeRuntime({base:['_1tdt4wh'],variants:{appearance:{'default':'txjd8f',inverse:'c1vsyt',subtle:'d6ng0i'},overlay:{false:{},true:'_1h796r2'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_22irgn']});
+var link = recipeRuntime({base:['_1cpgrj4'],variants:{appearance:{'default':'_6famgz',inverse:'_133ntfj',subtle:'meb158'},overlay:{false:{},true:'_3jlxaw'}}});
 
 export { icon, link };

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

@@ -3,10 +3,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { IconUpRightFromSquare } from '../icons/IconUpRightFromSquare.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import { link, icon } from './Link-css.js';
@@ -24,13 +22,13 @@ const Link = forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "a";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
         ...link({ appearance, overlay }, className),
-        ...sprinkleProps,
+        ...boxProps,
         children: /* @__PURE__ */ jsx(
           Comp,
           {

package/dist/packages/react/src/listbox/Listbox.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const Listbox = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/packages/react/src/listbox-empty/ListboxEmpty.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const ListboxEmpty = forwardRef(
   ({ children, ...props }, ref) => {

package/dist/packages/react/src/listbox-group/ListboxGroup.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { ListboxGroupContextProvider } from '../listbox-group-context/ListboxGroupContext.js';
 
 const ListboxGroup = forwardRef(

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-DTvaLDR_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-_aqZ2pey.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'xx38ut']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'g6xtmy'],variants:{intent:{danger:'_25b9kq',neutral:'_1s7ijnt'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'a0lnme']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1wqm5sk']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_159qncl'],variants:{intent:{danger:'_1co1luz',neutral:'_3x0t1c'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_1bsrkm4']});
 
 export { description, item, title };

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

@@ -4,6 +4,8 @@ import { useId } from '@radix-ui/react-id';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
 import { Text } from '../text/Text.js';

package/dist/packages/react/src/listbox-item-indicator/ListboxItemIndicator.js

@@ -2,15 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { IconCheck } from '../icons/IconCheck.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const ListboxItemIndicator = forwardRef(({ active, children, className, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { boxProps, restProps } = extractBoxProps(props);
   if (!active) {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, className, h: "0", w: "xs", ...sprinkleProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, className, h: "0", w: "xs", ...boxProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
   }
   return (
     // @ts-expect-error -- too complex

package/dist/packages/react/src/listbox-label/ListboxLabel.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useListboxGroupContext } from '../listbox-group-context/ListboxGroupContext.js';
 
 const ListboxLabel = forwardRef(