@optiaxiom/react 1.7.13 → 1.8.1

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-BqIfkBSM.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-DM1UPhpg.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'},'_1yn6cch']});
+var link = recipeRuntime({base:['_6pfe4f'],variants:{appearance:{'default':'_3yri38',inverse:'_1qsk31r',subtle:'viga3'}}});
 
 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-BqIfkBSM.css';
+import './../../../../assets/src/listbox/ListboxCheckboxItem.css.ts.vanilla-Bj5Fxqi3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:[{display:'inline-flex'},'iolez1']});
+var checkbox = recipeRuntime({base:[{display:'inline-flex'},'gqkxno']});
 
 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-BqIfkBSM.css';
+import './../../../../assets/src/listbox/ListboxItem.css.ts.vanilla-DIDl3Kx9.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'},'ggeyjo'],variants:{slot:{after:{ml:'8'},before:{}}}});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1iapmls']});
+var item = recipeRuntime({base:[{alignItems:'start',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1b1hmrr'],variants:{intent:{danger:'q835p3',neutral:'_1925809'}}});
+var title = recipeRuntime({base:[{alignItems:'center',gap:'8'},'_18b1cq']});
 
 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-BqIfkBSM.css';
+import './../../../../assets/src/listbox/ListboxItemIndicator.css.ts.vanilla-73AUe7Bx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:['zfohy3'],variants:{active:{false:{},true:'_1xte79i'}}});
+var indicator = recipeRuntime({base:['h5ip9e'],variants:{active:{false:{},true:'_1p1ugos'}}});
 
 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/Menu.js

@@ -20,6 +20,7 @@ import { useResponsiveMatches } from '../hooks/useResponsiveMatches.js';
 import { MenuProvider } from './MenuContext.js';
 import { MenuPopover } from './MenuPopover.js';
 import { MenuSubProvider } from './MenuSubContext.js';
+import { useMenuSurface } from './useMenuSurface.js';
 
 function Menu({
   children,
@@ -39,6 +40,7 @@ function Menu({
     sm: sizeProp ?? "sm"
   });
   const Comp = size === "sm" ? MenuPopover : Dialog;
+  const track = useMenuSurface();
   const [open, setOpen] = useControllableState({
     caller: "@optiaxiom/react/Menu",
     defaultProp: defaultOpen,
@@ -127,6 +129,7 @@ function Menu({
       inputRef,
       inputVisible,
       onSelect: (item, { dismiss }) => {
+        track(item);
         item.execute?.({ dismiss, inputValue });
         if (typeof openProp === "undefined" && dismiss) {
           setOpen(false);
@@ -160,6 +163,7 @@ function Menu({
                 setSubMenuOpen(true);
               }
             } else {
+              track(item);
               item.execute?.({ dismiss, inputValue });
               if (typeof openProp === "undefined" && dismiss) {
                 setOpen(false);

package/dist/esm/packages/react/src/menu/MenuCheckboxItem.js

@@ -17,10 +17,12 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import '../listbox/ListboxSwitchItem.js';
+import { useMenuSurface } from './useMenuSurface.js';
 
 const MenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
   const Comp = props.item.href ? "a" : "div";
   const { inputValue } = useCommandContext("@optiaxiom/react/MenuCheckboxItem");
+  const track = useMenuSurface();
   return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
     ListboxCheckboxItem,
     {
@@ -29,7 +31,12 @@ const MenuCheckboxItem = forwardRef(({ children, ...props }, ref) => {
       description: resolveItemProperty(props.item.description, {
         inputValue
       }),
-      onCheckedChange: () => !resolveItemProperty(props.item.disabledReason) && props.item.execute?.({ dismiss: false, inputValue }),
+      onCheckedChange: () => {
+        if (!resolveItemProperty(props.item.disabledReason)) {
+          track(props.item);
+          props.item.execute?.({ dismiss: false, inputValue });
+        }
+      },
       children: /* @__PURE__ */ jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
     }
   ) });

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-BqIfkBSM.css';
+import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-DxmfK7Uv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:'_1e1kypw'});
+var content = recipeRuntime({base:'jzeqkx'});
 
 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-BqIfkBSM.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-fh1HIdfy.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'},'_16xjk1v']}}});
 
 export { input };

package/dist/esm/packages/react/src/menu/MenuSwitchItem.js

@@ -17,11 +17,13 @@ import '../listbox/ListboxLabel.js';
 import '../listbox/ListboxRadioItem.js';
 import '../listbox/ListboxSeparator.js';
 import { ListboxSwitchItem } from '../listbox/ListboxSwitchItem.js';
+import { useMenuSurface } from './useMenuSurface.js';
 
 const MenuSwitchItem = forwardRef(
   ({ children, ...props }, ref) => {
     const Comp = props.item.href ? "a" : "div";
     const { inputValue } = useCommandContext("@optiaxiom/react/MenuSwitchItem");
+    const track = useMenuSurface();
     return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
       ListboxSwitchItem,
       {
@@ -30,7 +32,12 @@ const MenuSwitchItem = forwardRef(
         description: resolveItemProperty(props.item.description, {
           inputValue
         }),
-        onCheckedChange: () => !resolveItemProperty(props.item.disabledReason) && props.item.execute?.({ dismiss: false, inputValue }),
+        onCheckedChange: () => {
+          if (!resolveItemProperty(props.item.disabledReason)) {
+            track(props.item);
+            props.item.execute?.({ dismiss: false, inputValue });
+          }
+        },
         children: /* @__PURE__ */ jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
       }
     ) });

package/dist/esm/packages/react/src/menu/useMenuSurface.js

@@ -0,0 +1,73 @@
+import { resolveItemProperty } from '../command/CommandContext.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
+import { filterSuggestionsBySurface } from '../surface/filterSuggestionsBySurface.js';
+
+function useMenuSurface() {
+  const surface = useSurface();
+  return (item) => {
+    if (!item.surface || !surface) {
+      return;
+    }
+    const allSuggestions = surface.suggestions?.filter(
+      (s) => s.type === "value"
+    );
+    const itemSurface = item.surface;
+    if (itemSurface.type === "property") {
+      const itemSuggestions = filterSuggestionsBySurface(
+        allSuggestions,
+        surface.path,
+        [
+          {
+            name: itemSurface.name,
+            type: "property"
+          }
+        ]
+      );
+      const matchingSuggestion = itemSuggestions?.find(
+        (s) => s.value === itemSurface.value
+      );
+      if (item.multi || item.switch) {
+        surface.track(
+          {
+            checked: !resolveItemProperty(item.selected),
+            name: "toggled"
+          },
+          {
+            [itemSurface.name]: {
+              data: itemSurface.data,
+              type: "property"
+            }
+          }
+        );
+      } else if ("selected" in item) {
+        surface.track(
+          {
+            name: "changed",
+            value: itemSurface.value
+          },
+          {
+            [itemSurface.name]: {
+              data: itemSurface.data,
+              type: "property"
+            }
+          }
+        );
+      }
+      if (matchingSuggestion) {
+        surface.accept(matchingSuggestion.id);
+      }
+    } else if (itemSurface.type === "action") {
+      surface.track(
+        { name: "invoked" },
+        {
+          [itemSurface.name]: {
+            type: "action"
+          }
+        }
+      );
+    }
+  };
+}
+
+export { useMenuSurface };

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-BqIfkBSM.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-BtqqaOEn.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'},'_12j86kw'],variants:{maxH:{xs:'z0yz6l',sm:'_18h51d4',md:'rw4m4o',lg:'_1vwgbzg',full:{}},minW:{'0':{},trigger:'_17luz50'}}});
 
 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-BqIfkBSM.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-DhmGLvAY.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'},'_1j6hp97']});
 
 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-BqIfkBSM.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-b7B5YJcO.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:'_1n6doi9',true:'iev13w'}}});
 
 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-BqIfkBSM.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-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DFcg7Xy4.css';
+import './../../../../assets/src/nav/NavItem.css.ts.vanilla-4_CR-2Za.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'},'h1csgr']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'_2a9wp5'],variants:{expanded:{false:'fonqct',true:'_1k8rg9i'}}});
 
 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-BqIfkBSM.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-DZrYbTKw.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'},'utlj8n']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_542uzt'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{gap:'2'},'xzwxml']});
 
 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,
         {