@optiaxiom/react 0.8.2 → 0.10.0

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-CKt-20Xo.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'},'wbhi0k'],variants:{position:{bottom:[{borderT:'1'},'auv5im'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1tmqdca'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_3f85qm']}}});
+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-content/DrawerContent.js

@@ -2,11 +2,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { useDrawerContext } from '../drawer-context/DrawerContext.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
@@ -20,7 +20,7 @@ const mapPositionToTransitionSide = {
 const DrawerContent = forwardRef(
   ({ children, position = "right", ...props }, ref) => {
     const { open } = useDrawerContext("DrawerContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+    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(
         Transition,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-BJ9DFLKX.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'},'_148ohci']});
+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-DKTSleIR.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-5j36Dxkc.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'},'r17zcx']});
+var title = recipeRuntime({base:[{flex:'1'},'_1vny90j']});
 
 export { title };

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

@@ -2,13 +2,26 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+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';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
-const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 4, ...props }, ref) => {
+const DropdownMenuContent = forwardRef(({ align = "start", children, loading, ...props }, ref) => {
   const { open } = useDropdownMenuContext("DropdownMenuContent");
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children }) }) }) });
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+    MenuListbox,
+    {
+      asChild: true,
+      minW: loading ? "trigger" : undefined,
+      provider: "dropdown-menu",
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset: 4, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children })
+    }
+  ) }) });
 });
 DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
 

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/dropdown-menu-sub-content/DropdownMenuSubContent.js

@@ -2,21 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
-const DropdownMenuSubContent = forwardRef(({ alignOffset = -4, children, sideOffset = 0, ...props }, ref) => {
+const DropdownMenuSubContent = forwardRef(({ children, ...props }, ref) => {
   const { open } = useDropdownMenuSubContext("DropdownMenuSubContent");
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(
-    RadixMenu.SubContent,
-    {
-      alignOffset,
-      ref,
-      sideOffset,
-      children
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubContent, { alignOffset: -4, ref, sideOffset: 0, children }) }) }) });
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 

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

@@ -1,8 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
+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';
@@ -41,11 +43,11 @@ const Field = forwardRef(
         FieldContext.Provider,
         {
           value: {
-            descriptionId: description ? descriptionId : void 0,
+            descriptionId: description ? descriptionId : undefined,
             error: !!error,
-            errorId: error ? errorId : void 0,
+            errorId: error ? errorId : undefined,
             inputId,
-            labelId: label ? labelId : void 0
+            labelId: label ? labelId : undefined
           },
           children
         }

package/dist/packages/react/src/field-context/FieldContext.js

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 
-const FieldContext = createContext(void 0);
+const FieldContext = createContext(undefined);
 
 export { FieldContext };

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

@@ -1,10 +1,12 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
 import * as RadixLabel from '@radix-ui/react-label';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
 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-DKTSleIR.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-B9a92xor.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:'_14j6iqu'});
+var mark = recipeRuntime({base:'wu2n89'});
 
 export { mark };

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

@@ -1,21 +1,20 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Fragment } from 'react';
+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';
 
-function Highlight({
-  children = (chunk) => chunk,
-  content,
-  query,
-  ...props
-}) {
-  const chunks = useHighlightedChunks(content || "", query);
-  return /* @__PURE__ */ jsx(Box, { ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsx(Fragment, { children: highlighted ? children(
-    /* @__PURE__ */ jsx(Box, { asChild: true, ...mark(), children: /* @__PURE__ */ jsx("mark", { children: chunk }) })
-  ) : chunk }, index)) });
-}
+const Highlight = forwardRef(
+  ({ children = (chunk) => chunk, content, query, ...props }, ref) => {
+    const chunks = useHighlightedChunks(content || "", query);
+    return /* @__PURE__ */ jsx(Box, { ref, ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsx(Fragment, { children: highlighted ? children(
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...mark(), children: /* @__PURE__ */ jsx("mark", { children: chunk }) })
+    ) : chunk }, index)) });
+  }
+);
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
 export { Highlight };

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-DKTSleIR.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-B3weDxFS.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:'_142mgqj',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'dodr6']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1k0om5h']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_190unt6'],variants:{offset:{false:'_1jyy332',true:{}},position:{'bottom-right':'_12ew5qz','top-right':'_1nh8eqi'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_11gc524']});
+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-DKTSleIR.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-C_M4a6Dd.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:'_1t8wppd',variants:{empty:{false:{},true:'_151aqv6'}}});
-var input = recipeRuntime({base:'_147e0iq'});
+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-DKTSleIR.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-DKTSleIR.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-C__QDDJj.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:['_100g3j',{bg:'transparent',flex:'auto',w:'full'},'_1tz96dq','_10frt7q'],variants:{size:{md:{},lg:{},xl:['q8x6br']}}});
+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,37 +5,35 @@ 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(
-  ({ asChild, children, error: errorProp, size = "md", ...props }, outerRef) => {
+  ({ asChild, children, className, error: errorProp, size = "md", ...props }, outerRef) => {
     const Comp = asChild ? Slot : "input";
     const disabled = props.disabled;
     const readOnly = props.readOnly;
     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(
       Box,
       {
-        "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
+        "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : undefined,
         "aria-disabled": disabled,
-        "aria-invalid": error ? true : void 0,
+        "aria-invalid": error ? true : undefined,
         asChild: true,
-        "data-disabled": disabled ? "" : void 0,
-        "data-invalid": error ? "" : void 0,
-        "data-readonly": readOnly ? "" : void 0,
-        ...control({ size }),
-        ...sprinkleProps,
+        "data-disabled": disabled ? "" : undefined,
+        "data-invalid": error ? "" : undefined,
+        "data-readonly": readOnly ? "" : undefined,
+        ...control({ size }, className),
+        ...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-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-C__QDDJj.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-C6lD1LYe.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'},'_46r9e9']});
+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-DKTSleIR.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DAhSs3L3.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',display:'inline-flex',flexDirection:'row',whiteSpace:'nowrap'},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:'_1a6hhim',variants:{variant:{outline:'m0gnl9',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

@@ -1,7 +1,9 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Code } from '../code/Code.js';
+import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { kbd, keys } from './Kbd-css.js';
 
 const mapKeyToCode = {
@@ -21,7 +23,7 @@ const mapKeyToCode = {
 };
 const Kbd = forwardRef(
   ({ children, className, keys: keys$1, variant = "outline", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Code, { asChild: true, ...kbd({ variant }, className), ...props, children: /* @__PURE__ */ jsxs("kbd", { ref, children: [
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...kbd({ variant }, className), ...props, children: /* @__PURE__ */ jsxs("kbd", { ref, children: [
       keys$1 && (Array.isArray(keys$1) ? keys$1 : [keys$1]).map((key) => /* @__PURE__ */ jsx("abbr", { title: key, ...keys({ variant }), children: mapKeyToCode[key] }, key)),
       children
     ] }) });

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._12gtxoh';
-var reset = 'optiaxiom._1tjdkji';
+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-DKTSleIR.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-Cak55t6b.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'},'_9hlqgo']});
-var link = recipeRuntime({base:['_1osykz9'],variants:{appearance:{'default':'_1fjpd0h',inverse:'_15of2q4',subtle:'n6ewnx'},overlay:{false:{},true:'_25lp5x'}}});
+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,24 +22,24 @@ 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,
           {
             "aria-disabled": disabled,
-            "data-disabled": disabled ? "" : void 0,
+            "data-disabled": disabled ? "" : undefined,
             href,
             ref,
             ...external && { rel: "noopener noreferrer", target: "_blank" },
             ...restProps,
             ...disabled && {
-              href: void 0,
+              href: undefined,
               role: "link"
             },
             children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1,8 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
+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-group-context/ListboxGroupContext.js

@@ -1,5 +1,5 @@
 import { createContext } from '@radix-ui/react-context';
 
-const [ListboxGroupContextProvider, useListboxGroupContext] = createContext("ListboxGroup", { id: void 0 });
+const [ListboxGroupContextProvider, useListboxGroupContext] = createContext("ListboxGroup", { id: undefined });
 
 export { ListboxGroupContextProvider, useListboxGroupContext };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-X6F67MiY.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'},'_1kw6123']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'pgk1e6'],variants:{intent:{danger:'sanift',neutral:'k4l3dd'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_6o3f4b']});
+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 };