@optiaxiom/react 1.7.13 → 1.8.0

package/dist/esm/packages/react/src/label-menu-button/LabelMenuButton.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { ButtonAddon } from '../button/ButtonAddon.js';
 import { ButtonRoot } from '../button/ButtonRoot.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { IconAngleDown } from '../icons/IconAngleDown.js';
 import { Text } from '../text/Text.js';
 import { button, label, content } from './LabelMenuButton-css.js';
@@ -26,10 +26,19 @@ const LabelMenuButton = forwardRef(
         ...button({}, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs(Flex, { gap: "0", overflow: "hidden", textAlign: "start", children: [
-            /* @__PURE__ */ jsx(Text, { asChild: true, id: labelId, truncate: true, ...label({ filled }), children: /* @__PURE__ */ jsx(Label, { children: label$1 }) }),
-            /* @__PURE__ */ jsx(Text, { id: valueId, truncate: true, ...content({ filled }), children: children ?? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) })
-          ] }),
+          /* @__PURE__ */ jsxs(
+            Group,
+            {
+              flexDirection: "column",
+              gap: "0",
+              overflow: "hidden",
+              textAlign: "start",
+              children: [
+                /* @__PURE__ */ jsx(Text, { asChild: true, id: labelId, truncate: true, ...label({ filled }), children: /* @__PURE__ */ jsx(Label, { children: label$1 }) }),
+                /* @__PURE__ */ jsx(Text, { id: valueId, truncate: true, ...content({ filled }), children: children ?? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: /* @__PURE__ */ jsx(IconAngleDown, {}) })
         ]
       }

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom.ck0coc';
-var reset = 'optiaxiom._6nhsee';
+var components = 'optiaxiom._1s54dki';
+var reset = 'optiaxiom.bxkjn6';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

package/dist/esm/packages/react/src/layout/Layout-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/layout/Layout.css.ts.vanilla-BtLFKPhV.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/layout/Layout.css.ts.vanilla-BW5mwK9Z.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'_10nm6wo'],variants:{size:{full:'cmt6ay',screen:'_1ue3s1q'}}});
+var layout = recipeRuntime({base:[{bg:'bg.page',display:'flex',flexDirection:'column',fontSize:'md'},'xkiurs'],variants:{size:{full:'dutng7',screen:'_1d08qqj'}}});
 
 export { layout };

package/dist/esm/packages/react/src/layout/LayoutContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/layout/LayoutContent.css.ts.vanilla-i5bvQLMy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/layout/LayoutContent.css.ts.vanilla-D_wPoB_R.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{overflow:'auto',px:'32',py:'24'},'_1krf3t8']});
+var content = recipeRuntime({base:[{flexDirection:'column',gap:'16',overflow:'auto',px:'32',py:'24'},'_1rw8ont']});
 
 export { content };

package/dist/esm/packages/react/src/layout/LayoutContent.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 { content } from './LayoutContent-css.js';
 
 const LayoutContent = forwardRef(
   ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
-      Flex,
+      Group,
       {
         ref,
         tabIndex: 0,

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-oS40S_Lw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-Dcr25brF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'wq50a0']});
-var link = recipeRuntime({base:['jadht0'],variants:{appearance:{'default':'xrml3m',inverse:'nctskm',subtle:'_16vvwtj'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1xjjibv']});
+var link = recipeRuntime({base:['_1le53hx'],variants:{appearance:{'default':'ug7hqo',inverse:'_26evhy',subtle:'_1bx37sz'}}});
 
 export { icon, link };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-nyytmiZt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-D2giTvo1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:[{display:'inline-flex'},'iolez1']});
+var checkbox = recipeRuntime({base:[{display:'inline-flex'},'ac5cnw']});
 
 export { checkbox };

package/dist/esm/packages/react/src/listbox/ListboxCheckboxItem.js

@@ -5,7 +5,7 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { Checkbox } from '../checkbox/Checkbox.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Icon } from '../icon/Icon.js';
 import { checkbox } from './ListboxCheckboxItem-css.js';
 import { ListboxItem } from './ListboxItem.js';
@@ -17,7 +17,7 @@ const ListboxCheckboxItem = forwardRef(({ addonBefore, icon, onCheckedChange, ..
   return /* @__PURE__ */ jsx(
     ListboxItem,
     {
-      addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
+      addonBefore: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
         /* @__PURE__ */ jsx(
           Box,
           {

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-0kdzL3J8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-DFaRN0Nu.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'8'},'_1m6flp0'],variants:{slot:{after:{ml:'8'},before:{}}}});
-var description = recipeRuntime({base:[{fontSize:'sm'},'xyuw4l']});
-var item = recipeRuntime({base:[{alignItems:'start',flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'d1ucb5'],variants:{intent:{danger:'t01c3w',neutral:'_1oz5tph'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_1d44m4e']});
+var addon = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'8'},'_12vw6c2'],variants:{slot:{after:{ml:'8'},before:{}}}});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1jeqhic']});
+var item = recipeRuntime({base:[{alignItems:'start',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1wtr4u2'],variants:{intent:{danger:'_1811gzj',neutral:'_1ahtxhg'}}});
+var title = recipeRuntime({base:[{alignItems:'center',gap:'8'},'f6m1vk']});
 
 export { addon, description, item, title };

package/dist/esm/packages/react/src/listbox/ListboxItem.js

@@ -6,7 +6,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 { Icon } from '../icon/Icon.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
@@ -32,7 +32,7 @@ const ListboxItem = forwardRef(
     const labelId = useId();
     const descriptionId = useId();
     return /* @__PURE__ */ jsx(
-      Flex,
+      Group,
       {
         "aria-describedby": description$1 ? descriptionId : void 0,
         "aria-labelledby": labelId,
@@ -45,8 +45,8 @@ const ListboxItem = forwardRef(
         },
         children: /* @__PURE__ */ jsx(Comp, { children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
           (addonBefore || icon) && /* @__PURE__ */ jsx(Box, { ...addon({ slot: "before" }), children: addonBefore ?? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }),
-          /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", maxW: "full", children: [
-            /* @__PURE__ */ jsx(Flex, { asChild: true, ...title(), id: labelId, children: fallbackSpan(children2) }),
+          /* @__PURE__ */ jsxs(Group, { flex: "1", flexDirection: "column", gap: "0", maxW: "full", children: [
+            /* @__PURE__ */ jsx(Group, { asChild: true, ...title(), id: labelId, children: fallbackSpan(children2) }),
             description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
           ] }),
           addonAfter && /* @__PURE__ */ jsx(Box, { ...addon({ slot: "after" }), children: addonAfter })

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-BEAEi1qp.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-DzM1XH0P.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['zfohy3'],variants:{active:{false:{},true:'_1xte79i'}}});
+var indicator = recipeRuntime({base:['_1579yu6'],variants:{active:{false:{},true:'vek75b'}}});
 
 export { indicator };

package/dist/esm/packages/react/src/listbox/ListboxRadioItem.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { ListboxItem } from './ListboxItem.js';
 import { ListboxItemIndicator } from './ListboxItemIndicator.js';
 
@@ -9,7 +9,7 @@ const ListboxRadioItem = forwardRef(({ addonAfter, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ListboxItem,
     {
-      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
+      addonAfter: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
         addonAfter,
         /* @__PURE__ */ jsx(
           ListboxItemIndicator,

package/dist/esm/packages/react/src/listbox/ListboxSwitchItem.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 { Switch } from '../switch/Switch.js';
 import { checkbox } from './ListboxCheckboxItem-css.js';
 import { ListboxItem } from './ListboxItem.js';
@@ -13,7 +13,7 @@ const ListboxSwitchItem = forwardRef(({ addonAfter, onCheckedChange, ...props },
   return /* @__PURE__ */ jsx(
     ListboxItem,
     {
-      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
+      addonAfter: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
         addonAfter,
         /* @__PURE__ */ jsx(
           Box,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-BqgCec2b.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-BRLuMF_D.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:'_1e1kypw'});
+var content = recipeRuntime({base:'klhdrl'});
 
 export { content };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-B6ye-LyC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-DAPWgXVs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_11jvkdy']}}});
+var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1w9g5v6']}}});
 
 export { input };

package/dist/esm/packages/react/src/modal/ModalListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-Bk6jM4ro.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-Bi3wP45X.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'vi39f6'],variants:{maxH:{xs:'knomr8',sm:'_1awrb8e',md:'nrdskt',lg:'_1uydy86',full:{}},minW:{'0':{},trigger:'uwv2ov'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_10edap5'],variants:{maxH:{xs:'fiip7',sm:'_1tgm3xn',md:'b4g2lw',lg:'_30mixj',full:{}},minW:{'0':{},trigger:'ipz57i'}}});
 
 export { listbox };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-MPkkq1hY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-851nutRz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_79uk4']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',flexDirection:'column',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1xuryp3']});
 
 export { nav };

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

@@ -1,7 +1,7 @@
 "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 { useSidebarContext } from '../sidebar/SidebarContext.js';
 import { nav } from './Nav-css.js';
 
@@ -9,15 +9,17 @@ const Nav = forwardRef(
   ({ children, ...props }, ref) => {
     const { expanded, navId } = useSidebarContext("@optiaxiom/react/Nav");
     return /* @__PURE__ */ jsx(
-      Flex,
+      Group,
       {
         borderColor: "border.tertiary",
         borderR: "1",
+        flexDirection: "column",
+        gap: "16",
         h: "full",
         ref,
         w: "fit",
         ...props,
-        children: /* @__PURE__ */ jsx(Flex, { asChild: true, id: navId, w: expanded ? "224" : "56", ...nav(), children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", children }) })
+        children: /* @__PURE__ */ jsx(Group, { asChild: true, id: navId, w: expanded ? "224" : "56", ...nav(), children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", children }) })
       }
     );
   }

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-CXsgSN5D.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-D9Dn2-3H.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_114w83',true:'_11s1cuu'}}});
+var item = recipeRuntime({base:{flex:'1',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'dpra76',true:'ff8fth'}}});
 
 export { item };

package/dist/esm/packages/react/src/nav/NavAccountItem.js

@@ -6,7 +6,7 @@ import '../avatar/AvatarGroup.js';
 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 { IconEllipsis } from '../icons/IconEllipsis.js';
 import { useSidebarContext } from '../sidebar/SidebarContext.js';
 import { Text } from '../text/Text.js';
@@ -14,37 +14,26 @@ import { item } from './NavAccountItem-css.js';
 
 const NavAccountItem = forwardRef(({ name, organization, src, ...props }, ref) => {
   const { expanded } = useSidebarContext("@optiaxiom/react/NavAccountItem");
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, my: "8", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-    Flex,
-    {
-      asChild: true,
-      flexDirection: "row",
-      gap: "8",
-      p: "4",
-      textAlign: "start",
-      ...props,
-      children: /* @__PURE__ */ jsxs("button", { ref, children: [
-        /* @__PURE__ */ jsx(
-          Avatar,
-          {
-            "aria-hidden": true,
-            flex: "none",
-            my: "2",
-            name,
-            rounded: "sm",
-            src
-          }
-        ),
-        /* @__PURE__ */ jsxs(Flex, { ...item({ expanded: Boolean(expanded) }), children: [
-          /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", overflowX: "hidden", children: [
-            /* @__PURE__ */ jsx(Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),
-            /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", truncate: true, children: organization })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(IconEllipsis, {}) })
-        ] })
-      ] })
-    }
-  ) }) });
+  return /* @__PURE__ */ jsx(Group, { asChild: true, flexDirection: "column", gap: "16", my: "8", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Group, { asChild: true, gap: "8", p: "4", textAlign: "start", ...props, children: /* @__PURE__ */ jsxs("button", { ref, children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        "aria-hidden": true,
+        flex: "none",
+        my: "2",
+        name,
+        rounded: "sm",
+        src
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { ...item({ expanded: Boolean(expanded) }), children: [
+      /* @__PURE__ */ jsxs(Group, { flex: "1", flexDirection: "column", gap: "0", overflowX: "hidden", children: [
+        /* @__PURE__ */ jsx(Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),
+        /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", truncate: true, children: organization })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(IconEllipsis, {}) })
+    ] })
+  ] }) }) }) });
 });
 NavAccountItem.displayName = "@optiaxiom/react/NavAccountItem";
 

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

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

package/dist/esm/packages/react/src/nav/NavBody.js

@@ -1,7 +1,7 @@
 "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 { useSidebarContext } from '../sidebar/SidebarContext.js';
 import { body } from './NavBody-css.js';
 
@@ -9,7 +9,7 @@ const NavBody = forwardRef(
   ({ children, className, ...props }, ref) => {
     const { expanded, spacing } = useSidebarContext("@optiaxiom/react/NavBody");
     return /* @__PURE__ */ jsx(
-      Flex,
+      Group,
       {
         px: spacing,
         ref,

package/dist/esm/packages/react/src/nav/NavFooter.js

@@ -1,15 +1,16 @@
 "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 { useSidebarContext } from '../sidebar/SidebarContext.js';
 
 const NavFooter = forwardRef(
   ({ children, ...props }, ref) => {
     const { spacing } = useSidebarContext("@optiaxiom/react/NavFooter");
     return /* @__PURE__ */ jsx(
-      Flex,
+      Group,
       {
+        flexDirection: "column",
         gap: "8",
         mt: "auto",
         overflowX: "hidden",

package/dist/esm/packages/react/src/nav/NavGroup.js

@@ -5,13 +5,13 @@ import { forwardRef } from 'react';
 import { Disclosure } from '../disclosure/Disclosure.js';
 import '../disclosure/DisclosureContent.js';
 import '../disclosure/DisclosureTrigger.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { NavGroupProvider } from './NavGroupContext.js';
 
 const NavGroup = forwardRef(
   ({ children, collapsible, defaultOpen = true, onOpenChange, open, ...props }, ref) => {
     const groupId = useId();
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavGroupProvider, { collapsible, id: groupId, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Group, { asChild: true, flexDirection: "column", gap: "16", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavGroupProvider, { collapsible, id: groupId, children: /* @__PURE__ */ jsx(
       Disclosure,
       {
         alignItems: "stretch",

package/dist/esm/packages/react/src/nav/NavHeader.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 { useSidebarContext } from '../sidebar/SidebarContext.js';
 
 const NavHeader = forwardRef(
   ({ children, ...props }, ref) => {
     const { spacing } = useSidebarContext("@optiaxiom/react/NavHeader");
-    return /* @__PURE__ */ jsx(Flex, { px: spacing, ref, ...props, children });
+    return /* @__PURE__ */ jsx(Group, { flexDirection: "column", gap: "16", px: spacing, ref, ...props, children });
   }
 );
 NavHeader.displayName = "@optiaxiom/react/NavHeader";

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

@@ -1,10 +1,10 @@
-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/nav/NavItem.css.ts.vanilla-DSm8Wc1Z.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/nav/NavItem.css.ts.vanilla-Dhg-aPVh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'_18kapw']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_1myawgj'],variants:{expanded:{false:'_177p0dj',true:'_1w1zw0'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'ueuia1']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_11eti22'],variants:{expanded:{false:'mbaa1m',true:'_10lpuib'}}});
 
 export { item, label };

package/dist/esm/packages/react/src/nav/NavItem.js

@@ -4,7 +4,7 @@ import { createSlot } from '@radix-ui/react-slot';
 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 { Icon } from '../icon/Icon.js';
 import { useSidebarContext } from '../sidebar/SidebarContext.js';
 import { Text } from '../text/Text.js';
@@ -45,7 +45,7 @@ const NavItem = forwardRef(
         ] })
       ] });
     });
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Group, { asChild: true, flexDirection: "column", gap: "16", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       Tooltip,
       {
         content: props["aria-label"] || tooltip,

package/dist/esm/packages/react/src/pagination/Pagination-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-ui11d4Jx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-BuVDLYmF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'eg1lsc']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_2od59'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1lhkify']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'b6t98x']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'moi3a0'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{gap:'2'},'_51icji']});
 
 export { button, cursor, list };

package/dist/esm/packages/react/src/pagination/Pagination.js

@@ -8,7 +8,7 @@ import '../sprinkles/sprinklesMerge.js';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 import { ButtonRoot } from '../button/ButtonRoot.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Icon } from '../icon/Icon.js';
 import { IconAngleLeft } from '../icons/IconAngleLeft.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
@@ -54,7 +54,7 @@ const Pagination = forwardRef(
       cursorRef.current.style.visibility = "visible";
       setTimeout(() => setAnimation(true), 150);
     }, [active]);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...list(), children: /* @__PURE__ */ jsxs("ul", { children: [
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...props, children: /* @__PURE__ */ jsx("nav", { "aria-label": "pagination", ref, children: /* @__PURE__ */ jsx(Group, { asChild: true, ...list(), children: /* @__PURE__ */ jsxs("ul", { children: [
       /* @__PURE__ */ jsx(
         ButtonRoot,
         {

package/dist/esm/packages/react/src/paper/Paper-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'},screen:{}}}});

package/dist/esm/packages/react/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-BWlC_xzj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-BtHGaqFW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',transition:'colors',whiteSpace:'nowrap'},'hk9y99'],variants:{interactive:{false:{},true:'owbgre'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'sm',gap:'4',px:'6',rounded:'md',transition:'colors',whiteSpace:'nowrap'},'_1mt82z9'],variants:{interactive:{false:{},true:'_7m0839'},size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/pill/PillGroup.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 
 const PillGroup = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexWrap: "wrap", gap: "8", ref, ...props, children });
+    return /* @__PURE__ */ jsx(Group, { flexWrap: "wrap", gap: "8", ref, ...props, children });
   }
 );
 PillGroup.displayName = "@optiaxiom/react/PillGroup";