@optiaxiom/react 1.7.13 → 1.8.0

package/dist/esm/packages/react/src/alert-dialog/AlertDialogBody.js

@@ -2,15 +2,17 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 
 const AlertDialogBody = forwardRef(
   ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
-    Flex,
+    Group,
     {
       asChild: true,
       flex: "1",
+      flexDirection: "column",
       fontSize: "md",
+      gap: "16",
       px: "24",
       py: "16",
       ref,

package/dist/esm/packages/react/src/alert-dialog/AlertDialogContent-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-BnElOmOC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-DbH_XZ1B.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1ggo5h8'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'rje61q'],variants:{size:{sm:'_1a2g1gl',md:'_1fde9wh',lg:'_1q429pv'}}});
-var nestedDialogCountVar = 'var(--_12mgu31)';
-var root = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_15q2nrg']});
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1ospztu'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_15hffhp'],variants:{size:{sm:'qunocg',md:'ikxh40',lg:'js0mum'}}});
+var nestedDialogCountVar = 'var(--s5u39j)';
+var root = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'0',z:'popover'},'cthiln']});
 
 export { backdrop, content, nestedDialogCountVar, root };

package/dist/esm/packages/react/src/alert-dialog/AlertDialogContent.js

@@ -11,9 +11,9 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
 import '../dialog-kit/DialogKitProvider.js';
-import { Flex } from '../flex/Flex.js';
 import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
 import '../focus-bookmark/FocusBookmarkRestore.js';
+import { Group } from '../group/Group.js';
 import { Paper } from '../paper/Paper.js';
 import { Portal } from '../portal/Portal.js';
 import { Transition } from '../transition/Transition.js';
@@ -62,7 +62,7 @@ const AlertDialogContent = forwardRef(
               children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {})
             }
           ) }),
-          /* @__PURE__ */ jsxs(Flex, { ...root(), children: [
+          /* @__PURE__ */ jsxs(Group, { ...root(), children: [
             /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
             /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(
               Paper,

package/dist/esm/packages/react/src/alert-dialog/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-CpCp6rFA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-DzPVUes3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'gxnk44']});
+var footer = recipeRuntime({base:[{bg:'bg.default',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1ax7c37']});
 
 export { footer };

package/dist/esm/packages/react/src/alert-dialog/AlertDialogFooter.js

@@ -2,11 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { ButtonProvider } from '../button/ButtonContext.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { footer } from './AlertDialogFooter-css.js';
 
 const AlertDialogFooter = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsx(Flex, { ...footer({}, className), ref, ...props, children }) });
+  return /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsx(Group, { ...footer({}, className), ref, ...props, children }) });
 });
 AlertDialogFooter.displayName = "@optiaxiom/react/AlertDialogFooter";
 

package/dist/esm/packages/react/src/alert-dialog/AlertDialogHeader-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-BEK85f-5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-BEeG3LeL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'24',pb:'16',z:'10'},'_15ex5rr']});
+var header = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'24',pb:'16',z:'10'},'demxki']});
 
 export { header };

package/dist/esm/packages/react/src/alert-dialog/AlertDialogHeader.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Heading } from '../heading/Heading.js';
 import { Icon } from '../icon/Icon.js';
 import '../utils/conditions.js';
@@ -11,7 +11,7 @@ import '../utils/isHoverSupported.js';
 import { header } from './AlertDialogHeader-css.js';
 
 const AlertDialogHeader = forwardRef(({ addonBefore, children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(Flex, { ref, ...header({}, className), ...props, children: [
+  return /* @__PURE__ */ jsxs(Group, { ref, ...header({}, className), ...props, children: [
     /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", children: addonBefore && fallbackSpan(addonBefore) }),
     /* @__PURE__ */ jsx(Heading, { asChild: true, color: "fg.default", fontWeight: "500", level: "3", children: /* @__PURE__ */ jsx(RadixDialog.Title, { children }) })
   ] });

package/dist/esm/packages/react/src/avatar/Avatar-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-BBotg2z_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-6C6pZtoC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flex:'none',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'qrpvza'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'m8n1fv'],xs:[{fontWeight:'400',size:'xs'},'fw3j4i'],sm:[{size:'sm'},'_106v254'],md:[{size:'md'},'ruc6yj'],lg:[{size:'lg'},'_17p4xtx'],xl:[{size:'xl'},'u5obl1'],'3xl':[{size:'3xl'},'_1ljwf6b']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flex:'none',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1jvbssy'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'wb3ctc'],xs:[{fontWeight:'400',size:'xs'},'qrb3j9'],sm:[{size:'sm'},'hw58g1'],md:[{size:'md'},'ae7d43'],lg:[{size:'lg'},'_1ptrohs'],xl:[{size:'xl'},'_1weftay'],'3xl':[{size:'3xl'},'_1wdce50']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
 

package/dist/esm/packages/react/src/avatar/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_1qr6lcd',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['st8ml2',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/esm/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-BRUq7Gcb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CoojNkT3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1pqamiu']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_14vvjxa']});
 
 export { backdrop };

package/dist/esm/packages/react/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-CNh3dzY4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-BRRJVWv8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'elh5bu'],variants:{intent:{danger:'dln8lz',information:'zljm90',neutral:'g70r8s',primary:'_134kcxj',success:'dmqxrg',warning:'_1ha4g2i'},variant:{strong:'_1kg33fe',subtle:'_14feb6o'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_1vuww68'],variants:{intent:{danger:'_1utvw63',information:'_35r64j',neutral:'qt5a1r',primary:'_19dv6p5',success:'u2f0vs',warning:'u8mgsu'},variant:{strong:'_1kwqd94',subtle:'bi92e9'}}});
 
 export { badge };

package/dist/esm/packages/react/src/banner/Banner-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-CnROvbAQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-DizDI6wf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
-var content = recipeRuntime({base:[{flex:'1',gap:'8',justifyContent:'center'},'tal4d0']});
+var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
+var content = recipeRuntime({base:[{flex:'1',flexDirection:'column',gap:'8',justifyContent:'center'},'_1vex4dl']});
 var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { banner, content, icon };

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

@@ -4,7 +4,7 @@ import { useId } from '@radix-ui/react-id';
 import { forwardRef, createElement } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Icon } from '../icon/Icon.js';
 import { IconCircleCheckSolid } from '../icons/IconCircleCheckSolid.js';
 import { IconCircleExclamationSolid } from '../icons/IconCircleExclamationSolid.js';
@@ -24,7 +24,7 @@ const Banner = forwardRef(
   ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
     const labelId = useId();
     return /* @__PURE__ */ jsxs(
-      Flex,
+      Group,
       {
         "aria-labelledby": labelId,
         ref,
@@ -33,7 +33,7 @@ const Banner = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
-          /* @__PURE__ */ jsx(Flex, { id: labelId, ...content(), children }),
+          /* @__PURE__ */ jsx(Group, { id: labelId, ...content(), children }),
           !!onDismiss && /* @__PURE__ */ jsx(
             Button,
             {

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-Dk5sE9z0.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-Bp7c1dm4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-BGzzfwpF.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-Dbo87Hg_.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'slmaeh'});
+var box = recipeRuntime({base:'_1fn2yl8'});
 
 export { box };

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

@@ -11,7 +11,7 @@ import { extractBoxProps } from './extractBoxProps.js';
 
 const Slot = createSlot("@optiaxiom/react/Box");
 const Box = forwardRef(
-  ({ asChild, className, ...props }, ref) => {
+  ({ asChild, className, style, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
     const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
@@ -19,6 +19,7 @@ const Box = forwardRef(
       {
         "data-axiom": version,
         ref,
+        style,
         ...box({}, sprinklesMerge(className, sprinkles(boxProps))),
         ...restProps
       }

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

@@ -5,7 +5,7 @@ function extractBoxProps(props) {
   const boxProps = {};
   const restProps = {};
   for (const [name, value] of Object.entries(props)) {
-    if (name === "className" || name === "styles" || sprinkles.properties.has(name)) {
+    if (name === "className" || name === "style" || sprinkles.properties.has(name)) {
       if (value !== null && value !== void 0) {
         boxProps[name] = value;
       }

package/dist/esm/packages/react/src/breadcrumb/Breadcrumb-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-Bckkqizl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-4ARFLvzY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:'qb6cet'});
-var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'n33xj6']});
+var link = recipeRuntime({base:'_3y7y72'});
+var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_1hn2cty']});
 
 export { link, list };

package/dist/esm/packages/react/src/breadcrumb/BreadcrumbNode-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-CgW5pwLh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-B3mCOuUI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'ybyryp']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'uc0huh']});
 
 export { item };

package/dist/esm/packages/react/src/breadcrumb/BreadcrumbNode.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
@@ -14,7 +14,7 @@ const BreadcrumbNode = forwardRef(
     const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(Box, { asChild: true, ...item({}, className), ...boxProps, children: /* @__PURE__ */ jsxs("li", { ref, ...restProps, children: [
       children,
-      addonAfter && /* @__PURE__ */ jsx(Flex, { asChild: true, flex: "none", flexDirection: "row", gap: "4", children: fallbackSpan(addonAfter) })
+      addonAfter && /* @__PURE__ */ jsx(Group, { asChild: true, flex: "none", gap: "4", children: fallbackSpan(addonAfter) })
     ] }) });
   }
 );

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1a405fv'});
+var buttonGroup = recipeRuntime({base:'_164lvie'});
 
 export { buttonGroup };

package/dist/esm/packages/react/src/button/ButtonGroup.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { buttonGroup } from './ButtonGroup-css.js';
 
 const ButtonGroup = forwardRef(
   ({ children, className, gap = "0", orientation = "horizontal", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
-      Flex,
+      Group,
       {
         "data-orientation": gap === "0" ? orientation : void 0,
         flexDirection: orientation === "vertical" ? "column" : "row",

package/dist/esm/packages/react/src/button/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-D_lkRk1X.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-BPd-X2i3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B39dsJVj.css';
+import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-9-Q500PR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'wtgsqm']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1ykbd3p']});
 
 export { loadable };

package/dist/esm/packages/react/src/button/ButtonRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-D_lkRk1X.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B39dsJVj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['es8q60',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_1yiyvam'],variants:{intent:{danger:'_1y52cs8',neutral:'_1sgepua',primary:'_166voj1'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:{},true:{}},variant:{outline:'_147ip66','outline-opal':'_1dc5hiv',strong:'ng3vsx','strong-opal':'_14feluo',subtle:'g3yz3a'}},variantsCompounded:[{style:'twrqhz',variants:{size:['sm','md'],variant:['outline-opal','strong-opal']}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'phrdp5',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'_3av8wd',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1xk1zlq',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_9uom00',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'_14v1lwb']});
+var buttonBase = recipeRuntime({base:['_1dajkkn',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_1o6hj36'],variants:{intent:{danger:'wpu8ka',neutral:'othj5r',primary:'_1ldskd1'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:{},true:{}},variant:{outline:'b8gfb8','outline-opal':'i4to5w',strong:'xqv9zl','strong-opal':'mbe281',subtle:'_185v6hx'}},variantsCompounded:[{style:'a0cugw',variants:{size:['sm','md'],variant:['outline-opal','strong-opal']}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_10107el',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'ocwaea',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'td1236',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_71fgvr',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'ed3yws']});
 
 export { buttonBase, spinner };

package/dist/esm/packages/react/src/calendar/Calendar-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-BREYfr6S.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-CCWjYTzv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'mkqg8d'}}});
+var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'hegz2g'}}});
 
 export { picker };

package/dist/esm/packages/react/src/calendar/Calendar.js

@@ -8,7 +8,7 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { Clock } from '../clock/Clock.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { usePopoverContentContext } from '../popover/PopoverContentContext.js';
 import '../popover/PopoverContext.js';
 import { Text } from '../text/Text.js';
@@ -93,14 +93,15 @@ const Calendar = forwardRef(
         setView,
         view,
         children: /* @__PURE__ */ jsxs(
-          Flex,
+          Group,
           {
             bg: "bg.default",
             color: "fg.default",
+            flexDirection: "column",
             fontSize: "md",
             gap: "4",
-            ref,
             ...props,
+            ref,
             children: [
               /* @__PURE__ */ jsx(Box, { asChild: true, ...picker({ side }), children: mode === "single" ? /* @__PURE__ */ jsx(
                 DayPicker,
@@ -169,7 +170,7 @@ const Calendar = forwardRef(
                   today
                 }
               ) }),
-              type === "datetime-local" && mode == "single" && /* @__PURE__ */ jsxs(Flex, { gap: "8", mt: "8", children: [
+              type === "datetime-local" && mode == "single" && /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "8", mt: "8", children: [
                 /* @__PURE__ */ jsx(
                   Clock,
                   {

package/dist/esm/packages/react/src/calendar/CalendarDayButton-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-3XOtsElU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-CaXsLGN4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'rb6n69'],variants:{appearance:{'default':'_12tbs1i',holiday:[{color:'fg.error'},'hbs6ji'],range_middle:'_927cs3',selected:[{color:'fg.white'},'ty54hh'],weekend:[{color:'fg.tertiary'},'bv5lsk']},range:{end:['_18ui53u'],middle:['_1uamn19'],start:['pt5l4w']}}});
-var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'a7ijod']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_15tquye'],variants:{appearance:{'default':'gvhv4q',holiday:[{color:'fg.error'},'qhivh2'],range_middle:'xsqg16',selected:[{color:'fg.white'},'_1anm5rr'],weekend:[{color:'fg.tertiary'},'_1i5whfz']},range:{end:['etlkld'],middle:['rz1b8f'],start:['_13og2o1']}}});
+var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'vefahy']});
 
 export { button, today };

package/dist/esm/packages/react/src/calendar/CalendarGrid-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-OdTHHjog.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-CsU9y-Vq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'hl9hjf']});
+var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_16esce5']});
 
 export { grid };

package/dist/esm/packages/react/src/calendar/CalendarMonths-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-B5DUmXkm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-DaXFFaYb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'zfh6se']});
+var months = recipeRuntime({base:[{alignItems:'start',gap:'16'},'qsq877']});
 
 export { months };

package/dist/esm/packages/react/src/calendar/CalendarMonths.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Months } from 'react-day-picker';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { months } from './CalendarMonths-css.js';
 
 function CalendarMonths({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, ...months(), children: /* @__PURE__ */ jsx(Months, { ...props, children }) });
+  return /* @__PURE__ */ jsx(Group, { asChild: true, ...months(), children: /* @__PURE__ */ jsx(Months, { ...props, children }) });
 }
 CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
 

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-Wfpn5Fkc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-DKVUiRJa.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'jlr8ix'});
+var button = recipeRuntime({base:'_15ergqz'});
 
 export { button };

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-iXXrhens.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-D5KcwPgq.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_15gsr4s'});
+var button = recipeRuntime({base:'_54xtg7'});
 
 export { button };

package/dist/esm/packages/react/src/card/Card-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-CmnHkNLK.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-Cka8vu_w.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-4DhuLKkI.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-bu_i0wI0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['mz1hvu',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_1286h4']});
+var card = recipeRuntime({base:['_1eo5yn0',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',p:'16'},'_17le2ij']});
 
 export { card };

package/dist/esm/packages/react/src/card/Card.js

@@ -4,7 +4,7 @@ import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import '../actions/ActionsContent.js';
 import { ActionsRoot } from '../actions/ActionsRoot.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { card } from './Card-css.js';
 import { CardProvider } from './CardContext.js';
 
@@ -12,7 +12,7 @@ const Card = forwardRef(
   ({ children, className, ...props }, ref) => {
     const descriptionId = useId();
     const labelId = useId();
-    return /* @__PURE__ */ jsx(CardProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(Flex, { ref, ...card({}, className), ...props, children }) }) });
+    return /* @__PURE__ */ jsx(CardProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(Group, { ref, ...card({}, className), ...props, children }) }) });
   }
 );
 Card.displayName = "@optiaxiom/react/Card";

package/dist/esm/packages/react/src/card/CardCheckbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-bAKNcI_h.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-pq9LIF-a.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:['_15wumcg']});
+var checkbox = recipeRuntime({base:['iqzc86']});
 
 export { checkbox };

package/dist/esm/packages/react/src/card/CardHeader-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-C2AqvXW8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/card/CardHeader.css.ts.vanilla-IPETcvMo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'ftl8h3',before:'zznslz'}}});
-var content = recipeRuntime({base:[{flex:'1'},'_1k258gj']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'mt2n56']});
+var addon = recipeRuntime({base:[{flex:'none',gap:'8'}],variants:{slot:{after:'i3pqr8',before:'_63js3q'}}});
+var content = recipeRuntime({base:[{flex:'1'},'_1vh8hno']});
+var header = recipeRuntime({base:[{alignSelf:'stretch',gap:'12',justifyContent:'space-between'},'_19zxp9d']});
 
 export { addon, content, header };

package/dist/esm/packages/react/src/card/CardHeader.js

@@ -4,7 +4,7 @@ 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 { Group } from '../group/Group.js';
 import { Heading } from '../heading/Heading.js';
 import { useCardContext } from './CardContext.js';
 import { header, content, addon } from './CardHeader-css.js';
@@ -14,13 +14,13 @@ const CardHeader = forwardRef(
     const { descriptionId, labelId } = useCardContext(
       "@optiaxiom/react/CardHeader"
     );
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...header({}, className), ...props, children: [
+    return /* @__PURE__ */ jsxs(Group, { ref, ...header({}, className), ...props, children: [
       /* @__PURE__ */ jsxs(Box, { ...content(), children: [
         /* @__PURE__ */ jsx(Heading, { fontSize: "md", fontWeight: "500", id: labelId, level: "2", children }),
         description && /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: description })
       ] }),
-      addonBefore && /* @__PURE__ */ jsx(Flex, { ...addon({ slot: "before" }), children: addonBefore }),
-      addonAfter && /* @__PURE__ */ jsx(Flex, { ...addon({ slot: "after" }), children: addonAfter })
+      addonBefore && /* @__PURE__ */ jsx(Group, { ...addon({ slot: "before" }), children: addonBefore }),
+      addonAfter && /* @__PURE__ */ jsx(Group, { ...addon({ slot: "after" }), children: addonAfter })
     ] });
   }
 );