@optiaxiom/react 1.5.7 → 1.5.9

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

@@ -1,28 +1,42 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 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 { Icon } from '../icon/Icon.js';
 import { Switch } from '../switch/Switch.js';
+import { checkbox } from './ListboxCheckboxItem-css.js';
 import { ListboxItem } from './ListboxItem.js';
 
-const ListboxSwitchItem = forwardRef(({ addonBefore, icon, ...props }, ref) => {
+const ListboxSwitchItem = forwardRef(({ addonAfter, onCheckedChange, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ListboxItem,
     {
-      addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
+      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
+        addonAfter,
         /* @__PURE__ */ jsx(
-          Switch,
+          Box,
           {
-            checked: Boolean(
-              props[props["role"] === "option" ? "aria-selected" : "aria-checked"]
-            ),
-            hidden: true,
-            pointerEvents: "none",
-            tabIndex: -1
+            onClick: onCheckedChange ? (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              onCheckedChange(true);
+            } : void 0,
+            ...checkbox(),
+            children: /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: Boolean(
+                  props[props["role"] === "option" ? "aria-selected" : "aria-checked"]
+                ),
+                hidden: true,
+                pointerEvents: "none",
+                tabIndex: -1
+              }
+            )
           }
-        ),
-        addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null
+        )
       ] }),
       ref,
       ...props

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

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef, useRef, useEffect } from 'react';
 import { useCommandContext } from '../command/CommandContext.js';
+import { Spinner } from '../spinner/Spinner.js';
 import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { useMenuContext } from './MenuContext.js';
 import { MenuDialogContent } from './MenuDialogContent.js';
@@ -45,12 +46,18 @@ const MenuContent = forwardRef(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsx(MenuInput, { placeholder }) }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { disabled: inputVisible, children: /* @__PURE__ */ jsx(
+            MenuInput,
+            {
+              addonAfter: (loading === "both" || loading === "spinner") && /* @__PURE__ */ jsx(Spinner, { size: "2xs" }),
+              placeholder
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             MenuListbox,
             {
               empty,
-              loading,
+              loading: loading === true ? "both" : loading || void 0,
               onScroll: () => setOpen(false),
               p: size === "lg" ? "6" : "0",
               children

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-DdNGYk5F.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/menu/MenuDialogContent.css.ts.vanilla-cZVGhcw3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:'_1bmf7it'});
+var content = recipeRuntime({base:'x4klq0'});
 
 export { content };

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

@@ -21,6 +21,7 @@ const MenuDialogContent = forwardRef(
     "aria-label": ariaLabel,
     children,
     className,
+    minW: _minW,
     side: _side,
     sideOffset: _sideOffset,
     ...props

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-BCBcmGyg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/menu/MenuInput.css.ts.vanilla-Bf6pAFWt.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'},'bp8kf8']}}});
+var input = recipeRuntime({variants:{size:{sm:{m:'4'},lg:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_1qskfih']}}});
 
 export { input };

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

@@ -34,6 +34,7 @@ import { MenuRadioItem } from './MenuRadioItem.js';
 import { MenuSubContent } from './MenuSubContent.js';
 import { useMenuSubContext } from './MenuSubContext.js';
 import { MenuSubTrigger } from './MenuSubTrigger.js';
+import { MenuSwitchItem } from './MenuSwitchItem.js';
 
 const MenuListbox = forwardRef(
   ({ children, ...props }, ref) => {
@@ -42,7 +43,7 @@ const MenuListbox = forwardRef(
     const { open } = useMenuSubContext("@optiaxiom/react/MenuListbox");
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(CommandListbox, { ref, ...props, children: children ?? ((item, index, prevItem) => {
-        const Comp = typeof item.subOptions === "function" || item.subOptions?.length ? size === "sm" ? MenuSubTrigger : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : MenuRadioItem : MenuItem;
+        const Comp = typeof item.subOptions === "function" || item.subOptions?.length ? size === "sm" ? MenuSubTrigger : MenuItem : "selected" in item ? item.multi ? MenuCheckboxItem : item.switch ? MenuSwitchItem : MenuRadioItem : MenuItem;
         const group = item.group;
         return /* @__PURE__ */ jsxs(Fragment, { children: [
           shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../command/Command.js';
+import '../command/CommandInput.js';
+import { CommandItem } from '../command/CommandItem.js';
+import '../command/CommandListbox.js';
+import { useCommandContext, resolveItemProperty } from '../command/CommandContext.js';
+import '../listbox/Listbox.js';
+import '../listbox/ListboxCheckboxItem.js';
+import '../listbox/ListboxEmpty.js';
+import '../listbox/ListboxGroup.js';
+import '../listbox/ListboxItem.js';
+import '../listbox/ListboxItemIndicator.js';
+import '../listbox/ListboxItemized.js';
+import '../listbox/ListboxLabel.js';
+import '../listbox/ListboxRadioItem.js';
+import '../listbox/ListboxSeparator.js';
+import { ListboxSwitchItem } from '../listbox/ListboxSwitchItem.js';
+
+const MenuSwitchItem = forwardRef(
+  ({ children, ...props }, ref) => {
+    const Comp = props.item.href ? "a" : "div";
+    const { inputValue } = useCommandContext("@optiaxiom/react/MenuSwitchItem");
+    return /* @__PURE__ */ jsx(CommandItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(
+      ListboxSwitchItem,
+      {
+        addonBefore: props.item.addon,
+        asChild: true,
+        description: props.item.description,
+        onCheckedChange: () => !resolveItemProperty(props.item.disabledReason) && props.item.execute?.({ dismiss: false, inputValue }),
+        children: /* @__PURE__ */ jsx(Comp, { ...props.item.href && { href: props.item.href }, children })
+      }
+    ) });
+  }
+);
+MenuSwitchItem.displayName = "@optiaxiom/react/MenuSwitchItem";
+
+export { MenuSwitchItem };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-ZzU49MIC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/modal/ModalListbox.css.ts.vanilla-vJ4ibcUx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'tvd8j'],variants:{maxH:{xs:'ggr4ky',sm:'_1qx8u0l',md:'_1chtpka',lg:'_1sma6k0',full:{}},minW:{'0':{},trigger:'yq4p0l'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1gth1ez'],variants:{maxH:{xs:'_56kqvx',sm:'_1dt456q',md:'s5wk4w',lg:'_1d4jumh',full:{}},minW:{'0':{},trigger:'_13cs2w3'}}});
 
 export { listbox };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/nav/Nav.css.ts.vanilla-GBXf6G0D.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-Dv6yb2Y9.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'},'_147yypj']});
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_17f43xk']});
 
 export { nav };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-kvmw9WM9.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/nav/NavAccountItem.css.ts.vanilla-DJRmqqAr.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:'_1f86836',true:'fr1t5k'}}});
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',fontSize:'md',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'u0b104',true:'ci8c87'}}});
 
 export { item };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.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'}}}});

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

@@ -34,7 +34,9 @@ const NavGroupTrigger = forwardRef(
     ) : /* @__PURE__ */ jsx(
       Box,
       {
+        alignItems: "center",
         color: "fg.tertiary",
+        display: "flex",
         fontSize: "sm",
         h: "sm",
         id,

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-Dd4mtFDn.css';
-import './../../../../assets/src/nav/NavItem.css.ts.vanilla-B6en78yi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BGkDreBM.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BZilmyUD.css';
+import './../../../../assets/src/nav/NavItem.css.ts.vanilla-CYJdJuW3.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'},'_5scrfs']});
-var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'oocssu'],variants:{expanded:{false:'z2lom6',true:'_127koqr'}}});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors'},'olkitg']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'n272zu'],variants:{expanded:{false:'bhr6jj',true:'_7lrpo4'}}});
 
 export { item, label };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-CADK5dA-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-PckXtUsk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'vreown']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_1fyal0p'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'n6owh4']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'_1r9tdp8']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'qde4yw'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'etot4y']});
 
 export { button, cursor, list };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.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-CoWjorU5.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-CtZnQgDv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-DF8TRDwX.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',whiteSpace:'nowrap'},'_10jr6bf'],variants:{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',whiteSpace:'nowrap'},'yjgp0o'],variants:{size:{xs:{h:'xs'},sm:{h:'sm'}}}});
 
 export { pill };

package/dist/esm/packages/react/src/popover/Popover.js

@@ -8,9 +8,9 @@ import { PopoverProvider } from './PopoverContext.js';
 function Popover({
   children,
   defaultOpen = false,
+  modal,
   onOpenChange,
-  open: openProp,
-  ...props
+  open: openProp
 }) {
   const [open, setOpen] = useControllableState({
     caller: "@optiaxiom/react/Popover",
@@ -19,23 +19,16 @@ function Popover({
     prop: openProp
   });
   const [presence, setPresence] = useState(false);
-  return /* @__PURE__ */ jsx(
-    RadixPopover.Root,
+  return /* @__PURE__ */ jsx(RadixPopover.Root, { modal, onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
+    PopoverProvider,
     {
-      onOpenChange: setOpen,
-      open: open || presence,
-      ...props,
-      children: /* @__PURE__ */ jsx(
-        PopoverProvider,
-        {
-          open,
-          presence,
-          setPresence,
-          children
-        }
-      )
+      modal,
+      open,
+      presence,
+      setPresence,
+      children
     }
-  );
+  ) });
 }
 Popover.displayName = "@optiaxiom/react/Popover";
 

package/dist/esm/packages/react/src/popover/PopoverContent.js

@@ -13,8 +13,15 @@ import { PopoverContentImpl } from './PopoverContentImpl.js';
 import { usePopoverContext } from './PopoverContext.js';
 
 const PopoverContent = forwardRef(
-  ({ align = "start", asChild, children, sideOffset = 4, ...props }, ref) => {
-    const { open, presence, setPresence } = usePopoverContext(
+  ({
+    align = "start",
+    asChild,
+    children,
+    onCloseAutoFocus,
+    sideOffset = 4,
+    ...props
+  }, ref) => {
+    const { modal, open, presence, setPresence } = usePopoverContext(
       "@optiaxiom/react/PopoverContent"
     );
     return /* @__PURE__ */ jsx(
@@ -36,6 +43,17 @@ const PopoverContent = forwardRef(
                 align,
                 asChild: true,
                 collisionPadding: 16,
+                "data-state": presence ? "open" : "closed",
+                forceMount: true,
+                onCloseAutoFocus: (event) => {
+                  onCloseAutoFocus?.(event);
+                  if (event.defaultPrevented) {
+                    return;
+                  }
+                  if (modal && document.activeElement !== document.body) {
+                    event.preventDefault();
+                  }
+                },
                 ref,
                 sideOffset,
                 children: /* @__PURE__ */ jsx(PopoverContentImpl, { asChild, children })

package/dist/esm/packages/react/src/popover/PopoverTrigger.js

@@ -4,15 +4,29 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef, useState, useEffect } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
+import { usePopoverContext } from './PopoverContext.js';
 
 const PopoverTrigger = forwardRef(({ asChild, children, hasCustomAnchor, ...props }, ref) => {
+  const { open, presence } = usePopoverContext(
+    "@optiaxiom/react/PopoverTrigger"
+  );
   const [shouldRender, setShouldRender] = useState(!hasCustomAnchor);
   useEffect(() => {
     if (!shouldRender) {
       setShouldRender(true);
     }
   }, [shouldRender]);
-  return shouldRender && /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+  return shouldRender && /* @__PURE__ */ jsx(
+    RadixPopover.Trigger,
+    {
+      "aria-expanded": open || presence,
+      asChild: true,
+      "data-state": open || presence ? "open" : "closed",
+      ref,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx(Button, { children })
+    }
+  );
 });
 PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
 

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/progress/Progress.css.ts.vanilla-CqzQ4gnm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-DnfSCDeY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
-var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'d4o23a']});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_412l73']});
 
 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-CoWjorU5.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-0EgqGIul.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-SpZDsPH1.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-D0Nfm2Aw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BGkDreBM.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-C3Eyp63O.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-8thMEsOS.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_13tj24e'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1wu3jpw']});
-var input = recipeRuntime({base:'k21kvl'});
-var radio = recipeRuntime({base:'_13c6hvs'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'_1h6msx6'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full',transition:'transform'},'_1cis57h']});
+var input = recipeRuntime({base:'kvfutf'});
+var radio = recipeRuntime({base:'j72sz9'});
 
 export { control, indicator, input, radio };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DUSHD_wh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-CY0VF-F6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'yzkg31']});
-var input = recipeRuntime({base:'_4scn26'});
-var search = recipeRuntime({base:'_48hxqb'});
+var clear = recipeRuntime({base:[{size:'sm'},'e8ccmq']});
+var input = recipeRuntime({base:'_1yszh6y'});
+var search = recipeRuntime({base:'_1fg27jb'});
 
 export { clear, input, search };

package/dist/esm/packages/react/src/select/SelectContent.js

@@ -88,7 +88,7 @@ const SelectContent = forwardRef(
                 highlightedItem,
                 items,
                 itemToKey: (item) => item.value,
-                loading,
+                loading: loading ? "placeholder" : void 0,
                 onPlacedChange: (placed2) => {
                   setPlaced(placed2);
                   if (placed2 && highlightedItemRef.current) {

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-2m7n0NDy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-Bysb5ICL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.4_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_asf7eqp3jdj5gfnzqmvududbgm/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:'wpx49g',md:'ezniu3',base:'_1twahtx'},defaultClass:'_1twahtx'},vertical:{conditions:{sm:'_18igik1',md:'_1iood5r',base:'_1tgpry0'},defaultClass:'_1tgpry0'}},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:'_1sk1dpx',md:'_11sv6s6',base:'_1jrpb6p'},defaultClass:'_1jrpb6p'},vertical:{conditions:{sm:'_1tfcrjf',md:'_10cioqb',base:'_1e0sthn'},defaultClass:'_1e0sthn'}},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-CoWjorU5.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CHqwUT0f.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-DKfCsVm2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'csqo7j']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.avatar.neutral',color:'fg.default.inverse',display:'block'},'_115wwny']});
 
 export { skeleton };

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

@@ -16,7 +16,7 @@ const SortableGroup = forwardRef(
       type: "group"
     });
     const ref = useComposedRefs(innerRef, outerRef);
-    return /* @__PURE__ */ jsx(SortableGroupProvider, { id, setHasDropTarget, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-start", ref, ...props, children: typeof children === "function" ? children(isDropTarget || hasDropTarget) : children }) });
+    return /* @__PURE__ */ jsx(SortableGroupProvider, { id, setHasDropTarget, children: /* @__PURE__ */ jsx(Flex, { 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-CoWjorU5.css';
-import './../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-jo0CyuY5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/sortable/SortableHandle.css.ts.vanilla-DSLCmr1W.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var handle = recipeRuntime({base:'_1ekdc2e'});
+var handle = recipeRuntime({base:'_6s2cl5'});
 
 export { handle };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/sortable/SortableItem.css.ts.vanilla-BnPen3f6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/sortable/SortableItem.css.ts.vanilla-DrojkcgI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_11iqij5',variants:{handle:{false:{},true:'abrsb6'}}});
+var item = recipeRuntime({base:'t995ym',variants:{handle:{false:{},true:'sk3r4u'}}});
 
 export { item };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CoWjorU5.css';
-import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-SZfW2-MF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Bn_VRXY4.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-C9Tu4ZkQ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var track = recipeRuntime({variants:{appearance:{'default':'_1trif00',inverse:'cs2l1z'}}});
+var track = recipeRuntime({variants:{appearance:{'default':'snuykg',inverse:'jlfsi1'}}});
 
 export { track };

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

@@ -19,6 +19,7 @@ const Spinner = forwardRef(
         alignItems: "center",
         "aria-label": "Loading",
         display: "inline-flex",
+        justifyContent: "center",
         ref,
         role: "status",
         ...props,