@optiaxiom/react 0.9.0 → 0.10.1

package/dist/packages/react/src/banner/Banner.js

@@ -1,8 +1,7 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef, createElement } from 'react';
-import { BannerContextProvider } from '../banner-context/BannerContext.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
@@ -22,12 +21,10 @@ const mapIntentToIcon = {
 };
 const Banner = forwardRef(
   ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
-    const descriptionId = useId();
     const labelId = useId();
-    return /* @__PURE__ */ jsx(BannerContextProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(
       Flex,
       {
-        "aria-describedby": descriptionId,
         "aria-labelledby": labelId,
         ref,
         role: "alert",
@@ -35,7 +32,7 @@ const Banner = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
-          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", my: "2", children }),
+          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", id: labelId, my: "2", children }),
           !!onClose && /* @__PURE__ */ jsx(
             Button,
             {
@@ -50,7 +47,7 @@ const Banner = forwardRef(
           )
         ]
       }
-    ) });
+    );
   }
 );
 Banner.displayName = "@optiaxiom/react/Banner";

package/dist/packages/react/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-DIKXfgB7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-Dkipogqc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'uogfqd'});
+var box = recipeRuntime({base:'l8e98j'});
 
 export { box };

package/dist/packages/react/src/box/Box.js

@@ -4,21 +4,21 @@ import '@optiaxiom/globals/fonts';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { version } from '../../package.json.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import { sprinkles } from '../sprinkles/sprinkles.js';
 import { sprinklesMerge } from '../sprinkles/sprinklesMerge.js';
 import { box } from './Box-css.js';
+import { extractBoxProps } from './extractBoxProps.js';
 
 const Box = forwardRef(
   ({ asChild, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
       Comp,
       {
         "data-axiom": version,
         ref,
-        ...box({}, sprinklesMerge(className, sprinkles(sprinkleProps))),
+        ...box({}, sprinklesMerge(className, sprinkles(boxProps))),
         ...restProps
       }
     );

package/dist/packages/react/src/box/extractBoxProps.js

@@ -0,0 +1,19 @@
+import { sprinkles } from '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function extractBoxProps(props) {
+  const boxProps = {};
+  const restProps = {};
+  for (const [name, value] of Object.entries(props)) {
+    if (sprinkles.properties.has(name)) {
+      if (value !== null && value !== undefined) {
+        boxProps[name] = value;
+      }
+    } else {
+      restProps[name] = value;
+    }
+  }
+  return { boxProps, restProps };
+}
+
+export { extractBoxProps };

package/dist/packages/react/src/breadcrumb/Breadcrumb.js

@@ -2,14 +2,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 
 const Breadcrumb = forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, className, ...sprinkleProps, children: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsx(Box, { alignItems: "center", asChild: true, display: "flex", gap: "8", children: /* @__PURE__ */ jsx("ol", { children }) }) }) });
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsx(Box, { alignItems: "center", asChild: true, display: "flex", gap: "8", children: /* @__PURE__ */ jsx("ol", { children }) }) }) });
   }
 );
 Breadcrumb.displayName = "@optiaxiom/react/Breadcrumb";

package/dist/packages/react/src/breadcrumb-ellipsis/BreadcrumbEllipsis.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 
 function BreadcrumbEllipsis({ ...props }) {

package/dist/packages/react/src/breadcrumb-item/BreadcrumbItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DKiGgQaa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-DFabxttg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'ei15i8']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1jhulyh']});
 
 export { item };

package/dist/packages/react/src/breadcrumb-item/BreadcrumbItem.js

@@ -2,15 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { item } from './BreadcrumbItem-css.js';
 
 const BreadcrumbItem = forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...item({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children }) });
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...item({}, className), ...boxProps, children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children }) });
   }
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";

package/dist/packages/react/src/breadcrumb-link/BreadcrumbLink-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-Dba3cqM2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-CNGxep8k.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'igp2ld']});
+var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1slvib9']});
 
 export { link };

package/dist/packages/react/src/breadcrumb-page/BreadcrumbPage.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 BreadcrumbPage = forwardRef(
   ({ ...props }, ref) => {

package/dist/packages/react/src/button-addon/ButtonAddon.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 { ButtonLoadable } from '../button-loadable/ButtonLoadable.js';
 
 const ButtonAddon = forwardRef(

package/dist/packages/react/src/button-base/ButtonBase-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/button-base/ButtonBase.css.ts.vanilla-CrqPWBsM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B3OIhiFl.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-B8btnEyN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_15m7x0z',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1po00ao'],variants:{iconOnly:{false:'yrj1xf',true:{}},intent:{danger:'_6t8e9e',neutral:'jhmgkb',primary:'_8466a3'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'s7w5h1',solid:'fpw45',subtle:'_1wcb5mc'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'rt633a',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'w4w2l0',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1mm8xp6',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'y66v4x']});
+var buttonBase = recipeRuntime({base:['_1hndcdj',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1rftbz1'],variants:{iconOnly:{false:'_131ql1w',true:{}},intent:{danger:'_1x0e2vu',neutral:'_1gd82tn',primary:'_1v7331j'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'yiontd',solid:'_13lofge',subtle:'_18vsaza'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_1dvs0k4',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'mq70fm',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'n9u0o9',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'osy9fe']});
 
 export { buttonBase, spinner };

package/dist/packages/react/src/button-base/ButtonBase.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 { Spinner } from '../spinner/Spinner.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
@@ -33,7 +31,7 @@ const ButtonBase = forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const { intent, variant } = appearances[appearance];
     return /* @__PURE__ */ jsx(
       Box,
@@ -51,7 +49,7 @@ const ButtonBase = forwardRef(
           },
           className
         ),
-        ...sprinkleProps,
+        ...boxProps,
         children: /* @__PURE__ */ jsx(Comp, { disabled, ref, ...restProps, children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(TransitionGroup, { open: loading, children: /* @__PURE__ */ jsx(
             Spinner,

package/dist/packages/react/src/button-group/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B3OIhiFl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1y076oe'});
+var buttonGroup = recipeRuntime({base:'ofgdvx'});
 
 export { buttonGroup };

package/dist/packages/react/src/button-loadable/ButtonLoadable-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/button-base/ButtonBase.css.ts.vanilla-CrqPWBsM.css';
-import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BGUfLaAx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B3OIhiFl.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-B8btnEyN.css';
+import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-pVOYDFHd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1nfe9uj']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1m6b138']});
 
 export { loadable };

package/dist/packages/react/src/button-loadable/ButtonLoadable.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 { loadable } from './ButtonLoadable-css.js';
 
 const ButtonLoadable = forwardRef(

package/dist/packages/react/src/checkbox/Checkbox-css.js

@@ -1,13 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BgMgylht.css';
-import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-CxccT3Rg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B3OIhiFl.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DmAbWBYz.css';
+import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-Cyih3Sjg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'gd9sx4'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_9gdsfl'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'uouv7i']});
+var checkbox = recipeRuntime({base:'_1l1dymz'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1hl9hri'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_1jo8e1v']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'_1ywtts4'});
+var input = recipeRuntime({base:'_12oy30x'});
 
 export { checkbox, control, icon, indicator, input };

package/dist/packages/react/src/checkbox/Checkbox.js

@@ -2,11 +2,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { CheckboxCheck } from '../icons/CheckboxCheck.js';
 import { IconMinus } from '../icons/IconMinus.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { ToggleInput } from '../toggle-input/ToggleInput.js';
 import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
 import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
@@ -17,13 +15,13 @@ import { checkbox, input, control, indicator, icon } from './Checkbox-css.js';
 
 const Checkbox = forwardRef(
   ({ children, className, description, indeterminate, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsxs(
       ToggleInput,
       {
         description: !!description,
         ...checkbox({}, className),
-        ...sprinkleProps,
+        ...boxProps,
         children: [
           /* @__PURE__ */ jsx(ToggleInputHiddenInput, { ref, ...input(), ...restProps }),
           /* @__PURE__ */ jsx(ToggleInputControl, { ...control({ shift: Boolean(children) }), children: /* @__PURE__ */ jsx(Box, { ...indicator(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(CheckboxCheck, {}) }) }) }),

package/dist/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-B9UeDgSL.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-C4nWXaib.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'n6drj0']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'eufli1']});
 
 export { code };

package/dist/packages/react/src/code/Code.js

@@ -3,16 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { code } from './Code-css.js';
 
 const Code = forwardRef(
   ({ asChild, children, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "code";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...code({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) });
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...code({}, className), ...boxProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) });
   }
 );
 Code.displayName = "@optiaxiom/react/Code";

package/dist/packages/react/src/command-focusable-item/CommandFocusableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BnQBFIMz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-h6oir49o.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_17rdj5q'});
+var item = recipeRuntime({base:'_1g23o6j'});
 
 export { item };

package/dist/packages/react/src/command-focusable-item/CommandFocusableItem.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 { useCommandContext } from '../command-context/CommandContext.js';
 import { item } from './CommandFocusableItem-css.js';
 

package/dist/packages/react/src/command-sub/CommandSub.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 { CommandSubContextProvider } from '../command-sub-context/CommandSubContext.js';
 
 const CommandSub = forwardRef(

package/dist/packages/react/src/command-toggle-button/CommandToggleButton.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 { useCommandContext } from '../command-context/CommandContext.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const CommandToggleButton = forwardRef(({ children, className, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
+  const { boxProps, restProps } = extractBoxProps(props);
   const { downshift } = useCommandContext("CommandToggleButton");
-  return /* @__PURE__ */ jsx(Box, { asChild: true, className, ...sprinkleProps, children: /* @__PURE__ */ jsx("button", { ref, ...downshift.getToggleButtonProps(restProps), children }) });
+  return /* @__PURE__ */ jsx(Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsx("button", { ref, ...downshift.getToggleButtonProps(restProps), children }) });
 });
 CommandToggleButton.displayName = "@optiaxiom/react/CommandToggleButton";
 

package/dist/packages/react/src/data-table/DataTable-css.js

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-zPkQonIM.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-BIy4QD6j.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BSOiJ87j.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-DVtuEnvA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:['sbddr5'],variants:{pinned:{left:'_94bvde',right:'_16fx1r8'},pinnedType:{body:'ejd7ig',header:{}}}});
-var cellOffsetVar = 'var(--_8uf644)';
-var cellSizeVar = 'var(--_1khgkbw)';
-var header = recipeRuntime({base:['sbivds']});
-var leftTotalSizeVar = 'var(--_145iq7e)';
-var rightTotalSizeVar = 'var(--_1c6o47h)';
-var table = recipeRuntime({base:'_4g7wai',variants:{pinned:{both:'dphpfc',left:'_1tcbiza',none:{},right:'itfwd6'}}});
+var cell = recipeRuntime({base:['tqqzwb'],variants:{pinned:{left:'ctcmvr',right:'_8qytdz'},pinnedType:{body:'xjoy1p',header:{}}}});
+var cellOffsetVar = 'var(--f6twk5)';
+var cellSizeVar = 'var(--tznsh9)';
+var header = recipeRuntime({base:['_1uzcgvl']});
+var leftTotalSizeVar = 'var(--_13g4k8u)';
+var rightTotalSizeVar = 'var(--oyx43y)';
+var table = recipeRuntime({base:'_3gtjpy',variants:{pinned:{both:'_1w863jx',left:'eziy1k',none:{},right:'ofi8oy'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

package/dist/packages/react/src/data-table/DataTable.js

@@ -4,6 +4,8 @@ import { flexRender } from '@tanstack/react-table';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { DataTableHeaderCell } from '../data-table-header-cell/DataTableHeaderCell.js';
 import { Pagination } from '../pagination/Pagination.js';
 import { Table } from '../table/Table.js';

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-CgeIKahI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-D6dvnKG6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'l6w6ad','ncxitn']});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1p4j215'],variants:{active:{false:'_1g49bjw',true:'_1htoupv'},muted:{false:{},true:'_1lei0y7'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'_1ov946t','_1wagayx']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1pz9y3v'],variants:{active:{false:'ibckby',true:'_1gkhnw8'},muted:{false:{},true:'_1436inn'}}});
 
 export { button, icon };

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

@@ -3,6 +3,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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 { Grid } from '../grid/Grid.js';
 import { Icon } from '../icon/Icon.js';
 import { IconSort } from '../icons/IconSort.js';

package/dist/packages/react/src/dialog-actions/DialogActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-DNIzS9xQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-CT3NJrRJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'hvvat9']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_10rhglt']});
 
 export { actions };

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

@@ -1,15 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
 
 const DialogBody = forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
-      Box,
+      Flex,
       {
         flex: "1",
         fontSize: "md",
+        justifyContent: "start",
         overflow: "auto",
         px: "24",
         py: "16",

package/dist/packages/react/src/dialog-close/DialogClose.js

@@ -5,8 +5,8 @@ import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 
 const DialogClose = forwardRef(
-  ({ asChild, children, size = "lg", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { size, children }) });
+  ({ appearance = "subtle", asChild, children, size = "lg", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, size, children }) });
   }
 );
 DialogClose.displayName = "@optiaxiom/react/DialogClose";

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DZSpp9WD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DdJyaFVH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1umrefv'],variants:{size:{sm:'_1l3sknl',md:'_1agwhja',lg:'_1mktp5b',fullscreen:'_1kwyy6f'}}});
-var nestedDialogCountVar = 'var(--_1f5zfqa)';
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1ujsa0g'],variants:{size:{sm:'_1tinaqh',md:'xxdlh9',lg:'_1inzdfk',fullscreen:'lysf06'}}});
+var nestedDialogCountVar = 'var(--zhcrxm)';
 
 export { content, nestedDialogCountVar };

package/dist/packages/react/src/dialog-description/DialogDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-BrEQiniF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-D5BySVdt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'e4ko7d']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_15thpfi']});
 
 export { description };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.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/packages/react/src/dialog-form/DialogForm.js

@@ -2,13 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 
 const DialogForm = forwardRef(
   ({ children, className, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -17,7 +15,7 @@ const DialogForm = forwardRef(
         display: "flex",
         flexDirection: "column",
         overflow: "auto",
-        ...sprinkleProps,
+        ...boxProps,
         children: /* @__PURE__ */ jsx("form", { ref, ...restProps, children })
       }
     );

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-BfciLqUy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Ts7m4Zbq.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-xR0OKf_L.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:['_1chgoms']});
+var close = recipeRuntime({base:['ispwia']});
 
 export { close };