@optiaxiom/react 1.7.12 → 1.8.0

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-hv-MqqZg.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-Bh8rmUc4.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'},'_55mng1']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'whs5e2'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1epsv97']});
+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-hv-MqqZg.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-hv-MqqZg.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-BM62LPOD.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'},'_1uyt0bt'],variants:{interactive:{false:{},true:'_139rfvq'},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";

package/dist/esm/packages/react/src/pill-menu/PillMenuPill.js

@@ -5,6 +5,11 @@ import { useCommandContext, resolveItemProperty } from '../command/CommandContex
 import { useMenuContext } from '../menu/MenuContext.js';
 import { Pill } from '../pill/Pill.js';
 import '../pill/PillGroup.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContent.js';
+import '../tooltip/TooltipProvider.js';
+import '../tooltip/TooltipRoot.js';
+import '../tooltip/TooltipTrigger.js';
 import { usePillMenuContext } from './PillMenuContext.js';
 
 const PillMenuPill = forwardRef(
@@ -14,7 +19,7 @@ const PillMenuPill = forwardRef(
     const { inputValue } = useCommandContext("@optiaxiom/react/PillMenuPill");
     const index = options.indexOf(item);
     const hasInteractedInsideRef = useRef(false);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Tooltip, { content: resolveItemProperty(item.disabledReason), children: /* @__PURE__ */ jsx(
       Pill,
       {
         onClick: () => {
@@ -26,6 +31,9 @@ const PillMenuPill = forwardRef(
         },
         onKeyDown: (event) => {
           if (event.key === "Backspace") {
+            if (resolveItemProperty(item.disabledReason)) {
+              return;
+            }
             if (index === 0 || index !== options.length - 1) {
               event.key = index > 0 ? "ArrowLeft" : "ArrowRight";
             }
@@ -40,7 +48,7 @@ const PillMenuPill = forwardRef(
         ...props,
         children: resolveItemProperty(item.label, { inputValue })
       }
-    );
+    ) });
   }
 );
 PillMenuPill.displayName = "@optiaxiom/react/PillMenuPill";

package/dist/esm/packages/react/src/pill-menu/PillMenuTrigger.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixRovingFocus from '@radix-ui/react-roving-focus';
 import { forwardRef, useRef } from 'react';
-import { useCommandContext } from '../command/CommandContext.js';
+import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
 import { IconPlus } from '../icons/IconPlus.js';
 import '../menu/Menu.js';
 import '../menu/MenuContent.js';
@@ -29,7 +29,9 @@ const PillMenuTrigger = forwardRef(({ children, onKeyDown, ...props }, outerRef)
         if (event.key === "Backspace") {
           if (options.length) {
             const last = options.length - 1;
-            options[last].execute?.({ dismiss: false, inputValue });
+            if (!resolveItemProperty(options[last].disabledReason)) {
+              options[last].execute?.({ dismiss: false, inputValue });
+            }
           }
         }
       },

package/dist/esm/packages/react/src/progress/Progress-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-DDrg1p63.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-DnpG8mth.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var indicator = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'_1hxkf8x',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'xq3wes']});
+var indicator = recipeRuntime({base:[{h:'full',rounded:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},opal:'_1firq8a',primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_17c2f2']});
 
 export { indicator, progress };

package/dist/esm/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Dsi4In3Z.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CxYCkM69.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-CRlpi7Wt.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/toggle-input/ToggleInput.css.ts.vanilla-DR0szHMw.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-CJ79FKil.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1bhb1ia'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1uir4rp']});
-var input = recipeRuntime({base:'_1qms8n'});
-var radio = recipeRuntime({base:'_1safll3'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_17nyl75'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1kmtm9j']});
+var input = recipeRuntime({base:'_1ogwqlh'});
+var radio = recipeRuntime({base:'_1sjxd3d'});
 
 export { control, indicator, input, radio };

package/dist/esm/packages/react/src/radio/RadioGroup.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 { mapResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { RadioGroupProvider } from './RadioGroupContext.js';
@@ -38,7 +38,7 @@ const RadioGroup = forwardRef(
         },
         value,
         children: /* @__PURE__ */ jsx(
-          Flex,
+          Group,
           {
             flexDirection,
             fontSize: "md",

package/dist/esm/packages/react/src/range/Range-css.js

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/range/Range.css.ts.vanilla-BzRDjq38.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/range/Range.css.ts.vanilla-BC-GeMQC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'transparent'},'veo2z3']});
-var fillValue = 'var(--jmczfe)';
-var mark = recipeRuntime({base:[{transition:'colors'},'_9uf283'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
-var markValue = 'var(--lyt04q)';
-var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'qz14ts']});
-var root = recipeRuntime({base:['afo83h',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'_1fa5vxl'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
-var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'ko0t24']});
-var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'_115o875']});
+var control = recipeRuntime({base:[{bg:'transparent'},'ry13e2']});
+var fillValue = 'var(--_1wwwl8l)';
+var mark = recipeRuntime({base:[{transition:'colors'},'_1f2yjgj'],variants:{active:{false:{color:'fg.secondary'},true:{}}}});
+var markValue = 'var(--wxjcsj)';
+var range = recipeRuntime({base:[{h:'full',rounded:'inherit'},'_1gh6inu']});
+var root = recipeRuntime({base:['_14qnpzv',{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',w:'full'},'d4ysek'],variants:{marks:{false:{},true:{mb:'24'}},size:{md:{h:'md'},lg:{h:'lg'}}}});
+var thumb = recipeRuntime({base:[{border:'1',rounded:'full',shadow:'sm',size:'xs'},'_1nnmax4']});
+var track = recipeRuntime({base:[{display:'flex',flex:'1',rounded:'full'},'_5iociz']});
 
 export { control, fillValue, mark, markValue, range, root, thumb, track };

package/dist/esm/packages/react/src/resizable/ResizableHandle-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-qm3VdDRD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/resizable/ResizableHandle.css.ts.vanilla-Be-XUYFT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'_1w2r7zi']});
-var root = recipeRuntime({base:[{justifyContent:'center',rounded:'sm',z:'10'},'_1f544c']});
+var handle = recipeRuntime({base:[{border:'1',h:'56',rounded:'sm',w:'12'},'zgy7oz']});
+var root = recipeRuntime({base:[{flexDirection:'column',gap:'16',justifyContent:'center',rounded:'sm',z:'10'},'_1v3m5s3']});
 
 export { handle, root };

package/dist/esm/packages/react/src/resizable/ResizableHandle.js

@@ -4,11 +4,11 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 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 { root, handle } from './ResizableHandle-css.js';
 
 const ResizableHandle = (props) => {
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, ...root(), children: /* @__PURE__ */ jsx(ResizablePrimitive.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsx(Box, { ...handle() }) }) });
+  return /* @__PURE__ */ jsx(Group, { asChild: true, ...root(), children: /* @__PURE__ */ jsx(ResizablePrimitive.PanelResizeHandle, { ...props, children: /* @__PURE__ */ jsx(Box, { ...handle() }) }) });
 };
 ResizableHandle.displayName = "@optiaxiom/react/ResizableHandle";
 

package/dist/esm/packages/react/src/search-input/SearchInput-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DdHfHjyz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-a7yaBnaN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'_4te1ga']});
-var input = recipeRuntime({base:'_1bcl3oq'});
-var search = recipeRuntime({base:'_14tifhg'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1gnl2hg']});
+var input = recipeRuntime({base:'_8lqd9s'});
+var search = recipeRuntime({base:'kx6ra7'});
 
 export { clear, input, search };

package/dist/esm/packages/react/src/search-input/SearchInput.js

@@ -5,7 +5,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef, useRef } 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 '../field/FieldContext.js';
 import { useObserveValue } from '../hooks/useObserveValue.js';
 import '../utils/conditions.js';
@@ -46,7 +46,7 @@ const SearchInput = forwardRef(
             ...clear()
           }
         ),
-        addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
+        addonBefore: /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
           /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
           addonBefore
         ] }),

package/dist/esm/packages/react/src/segmented-control/SegmentedControl.js

@@ -2,11 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixSegmentedControl from '@radix-ui/react-toggle-group';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { SegmentedControlProvider } from './SegmentedControlContext.js';
 
 const SegmentedControl = forwardRef(({ children, type = "single", ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, flexDirection: "row", gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children: /* @__PURE__ */ jsx(SegmentedControlProvider, { children }) }) });
+  return /* @__PURE__ */ jsx(Group, { asChild: true, gap: "0", ...props, children: /* @__PURE__ */ jsx(RadixSegmentedControl.Root, { ref, type, children: /* @__PURE__ */ jsx(SegmentedControlProvider, { children }) }) });
 });
 SegmentedControl.displayName = "@optiaxiom/react/SegmentedControl";
 

package/dist/esm/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-QHdOaSGP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-DY6wwOcC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createAtomsFn as createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.5_patch_hash_530004842e1937cf2ffe2728e2a18629c5dd638aa44_ff29e2a63cc347b263901e6ac2d561ef/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 var base = recipeRuntime({base:{borderColor:'border.secondary'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'fb2wl2',md:'oowpg',base:'_1903fkz'},defaultClass:'_1903fkz'},vertical:{conditions:{sm:'_7tvewo',md:'_1kbl28',base:'tkqpqm'},defaultClass:'tkqpqm'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1inco0r',md:'jjrugo',base:'_6e8lm4'},defaultClass:'_6e8lm4'},vertical:{conditions:{sm:'_5g7638',md:'_8yxidz',base:'_3t8v5w'},defaultClass:'_3t8v5w'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/esm/packages/react/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-6d1zNZZ_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CqxpPZZK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_1a3jaxi']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_17tln3a']});
 
 export { skeleton };

package/dist/esm/packages/react/src/skeleton/Skeleton.js

@@ -9,12 +9,12 @@ import { skeleton } from './Skeleton-css.js';
 
 const Slot = createSlot("@optiaxiom/react/Skeleton");
 const Skeleton = forwardRef(
-  ({ asChild = true, children, circle, className, rounded, ...props }, ref) => {
+  ({ asChild = true, children, circle, className, rounded = "sm", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
       {
         asChild,
-        rounded: circle || rounded === "full" ? "full" : rounded ?? "sm",
+        rounded: circle || rounded === "full" ? "full" : rounded,
         ...skeleton({}, className),
         ...props,
         children: /* @__PURE__ */ jsx(Slot, { ref, children: children ? children : /* @__PURE__ */ jsx("span", {}) })

package/dist/esm/packages/react/src/sortable/Sortable.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { move } from '@dnd-kit/helpers';
 import { DragDropProvider } from '@dnd-kit/react';
 import { forwardRef, useState, useRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { SortableProvider } from './SortableContext.js';
 
 const Sortable = forwardRef(
@@ -38,7 +38,7 @@ const Sortable = forwardRef(
         onDragStart: () => {
           setItemsState(itemsProp ?? []);
         },
-        children: /* @__PURE__ */ jsx(SortableProvider, { cacheRef, isSorting: itemsState !== null, children: /* @__PURE__ */ jsx(Flex, { ref, ...props, children: children?.(items) }) })
+        children: /* @__PURE__ */ jsx(SortableProvider, { cacheRef, isSorting: itemsState !== null, children: /* @__PURE__ */ jsx(Group, { flexDirection: "column", gap: "16", ...props, ref, children: children?.(items) }) })
       }
     );
   }

package/dist/esm/packages/react/src/sortable/SortableGroup.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useDroppable } from '@dnd-kit/react';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef, useState } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { SortableGroupProvider } from './SortableGroupContext.js';
 
 const SortableGroup = forwardRef(
@@ -16,7 +16,7 @@ const SortableGroup = forwardRef(
       type: "group"
     });
     const ref = useComposedRefs(innerRef, outerRef);
-    return /* @__PURE__ */ jsx(SortableGroupProvider, { id, setHasDropTarget, children: /* @__PURE__ */ jsx(Flex, { ref, ...props, children: typeof children === "function" ? children(isDropTarget || hasDropTarget) : children }) });
+    return /* @__PURE__ */ jsx(SortableGroupProvider, { id, setHasDropTarget, children: /* @__PURE__ */ jsx(Group, { flexDirection: "column", gap: "16", ref, ...props, children: typeof children === "function" ? children(isDropTarget || hasDropTarget) : children }) });
   }
 );
 SortableGroup.displayName = "@optiaxiom/react/SortableGroup";

package/dist/esm/packages/react/src/sortable/SortableHandle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-KaEA0qPc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-DiiCKH8L.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var handle = recipeRuntime({base:'kk3tmm'});
+var handle = recipeRuntime({base:'_1xfjv4u'});
 
 export { handle };

package/dist/esm/packages/react/src/sortable/SortableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/sortable/SortableItem.css.ts.vanilla-sRuH65Df.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/sortable/SortableItem.css.ts.vanilla-Qw_DSSvk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'rdsu3e',variants:{handle:{false:{},true:'_1pg1nnd'}}});
+var item = recipeRuntime({base:'_1osl2r8',variants:{handle:{false:{},true:'_35dp03'}}});
 
 export { item };

package/dist/esm/packages/react/src/spinner/Spinner-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-hv-MqqZg.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-DlwCCUEr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-DCtjkPl0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'_1xsaqcd',inverse:'ym85uf'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'_1va9c2u',inverse:'g21ywb'}}});
 
 export { track };

package/dist/esm/packages/react/src/spinner/Spinner.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 { track } from './Spinner-css.js';
 
 const mapAppearanceToFg = {
@@ -12,16 +12,28 @@ const mapAppearanceToFg = {
   inverse: "fg.spinner.inverse"
 };
 const Spinner = forwardRef(
-  ({ appearance = "default", children, size = "md", ...props }, ref) => {
+  ({
+    alignItems = "center",
+    appearance = "default",
+    "aria-label": ariaLabel = "Loading",
+    children,
+    display = "inline-flex",
+    justifyContent = "center",
+    role = "status",
+    size = "md",
+    ...props
+  }, ref) => {
     return /* @__PURE__ */ jsxs(
-      Flex,
+      Group,
       {
-        alignItems: "center",
-        "aria-label": "Loading",
-        display: "inline-flex",
-        justifyContent: "center",
+        alignItems,
+        "aria-label": ariaLabel,
+        display,
+        flexDirection: "column",
+        gap: "16",
+        justifyContent,
         ref,
-        role: "status",
+        role,
         ...props,
         children: [
           /* @__PURE__ */ jsx(Box, { animation: "spin", asChild: true, size, children: /* @__PURE__ */ jsxs(