@optiaxiom/react 0.3.4 → 0.4.0

package/dist/src/dialog-content/DialogContent-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DaJvHWQC.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/dialog-content/DialogContent.css.ts.vanilla-DysCGMhf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'ilucyq']});
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_1ikzjmp'],variants:{size:{sm:'ngq7pk',md:'_1878gj0',lg:'_1o0x2z5'}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1mktjk7']});
+var close = recipeRuntime({base:[{rounded:'full'},'_6hwd71']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_1m8vxn3'],variants:{size:{sm:'_1sypgvw',md:'o51tln',lg:'_2ex1yo',fullscreen:'p5jfb5'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'dfcztf']});
 
 export { close, content, overlay };

package/dist/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'md',justifyContent:'end',px:'lg',py:'20'}]});

package/dist/src/disclosure-content/DisclosureContent-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-BVqex_Uk.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DGvnwBsb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{overflow:'hidden'},'a4qsyj']});
+var content = recipeRuntime({base:[{overflow:'hidden'},'_1fj23l4']});
 
 export { content };

package/dist/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CGgZqHoR.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DztATFY8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'doj2rp',start:'tuy3fn'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_174z91b']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1fb7ux9',start:'_1aklwji'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'lby3t2']});
 
 export { icon, trigger };

package/dist/src/drawer/Drawer-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/drawer/Drawer.css.ts.vanilla-D1KjbYY2.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/drawer/Drawer.css.ts.vanilla-CnCA4xNN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var close = recipeRuntime({base:[{rounded:'full'},'_16imrgc']});
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'kpebdx'],variants:{position:{bottom:[{borderT:'1'},'epjf57'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_126ao3l'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1qc382x']}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1aqeavo']});
+var close = recipeRuntime({base:[{rounded:'full'},'_1jou5gp']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',shadow:'md',z:'popover'},'_1nkpfsz'],variants:{position:{bottom:[{borderT:'1'},'y1zfhf'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'jsr4f2'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'rzovp4']}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'apmcqz']});
 
 export { close, content, overlay };

package/dist/src/dropdown-menu-content/DropdownMenuContent.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
-import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+import { ListboxBase } from '../listbox-base/ListboxBase.js';
 
-const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 2, ...props }, ref) => {
+const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 4, ...props }, ref) => {
   const { open } = useDropdownMenuContext("DropdownMenuContent");
   return /* @__PURE__ */ jsx(
-    MenuContentBase,
+    ListboxBase,
     {
       enableExitAnimation: true,
       open,

package/dist/src/dropdown-menu-group/DropdownMenuGroup.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+
+const DropdownMenuGroup = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Group, { children }) });
+  }
+);
+DropdownMenuGroup.displayName = "@optiaxiom/react/DropdownMenuGroup";
+
+export { DropdownMenuGroup };

package/dist/src/dropdown-menu-item/DropdownMenuItem.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
+import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
 
 const DropdownMenuItem = forwardRef(({ children, onSelect, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(MenuItemBase, { ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
+  return /* @__PURE__ */ jsx(ListboxItemBase, { ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
 });
 DropdownMenuItem.displayName = "@optiaxiom/react/DropdownMenuItem";
 

package/dist/src/dropdown-menu-label/DropdownMenuLabel.js

@@ -9,9 +9,8 @@ const DropdownMenuLabel = forwardRef(
       Box,
       {
         asChild: true,
-        color: "fg.default",
-        fontSize: "md",
-        fontWeight: "600",
+        color: "fg.tertiary",
+        fontSize: "sm",
         p: "xs",
         ref,
         ...props,

package/dist/src/dropdown-menu-separator/DropdownMenuSeparator.js

@@ -3,7 +3,7 @@ import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { Separator } from '../separator/Separator.js';
 
-const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", mx: "-4", my: "2", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
+const DropdownMenuSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { asChild: true, bg: "border.secondary", flex: "none", mx: "8", my: "4", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Separator, { ref }) }));
 DropdownMenuSeparator.displayName = "@optiaxiom/react/DropdownMenuSeparator";
 
 export { DropdownMenuSeparator };

package/dist/src/dropdown-menu-sub-content/DropdownMenuSubContent.js

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
-import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+import { ListboxBase } from '../listbox-base/ListboxBase.js';
 
-const DropdownMenuSubContent = forwardRef(({ alignOffset = -4, children, sideOffset = 2, ...props }, ref) => {
+const DropdownMenuSubContent = forwardRef(({ alignOffset = -4, children, sideOffset = 0, ...props }, ref) => {
   const { open } = useDropdownMenuSubContext("DropdownMenuSubContent");
   return /* @__PURE__ */ jsx(
-    MenuContentBase,
+    ListboxBase,
     {
       enableExitAnimation: true,
       open,

package/dist/src/dropdown-menu-sub-trigger/DropdownMenuSubTrigger.js

@@ -2,10 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
-import { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
+import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
 
 const DropdownMenuSubTrigger = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(MenuItemBase, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });
+  return /* @__PURE__ */ jsx(ListboxItemBase, { addonAfter: /* @__PURE__ */ jsx(IconAngleRight, {}), ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubTrigger, { children }) });
 });
 DropdownMenuSubTrigger.displayName = "@optiaxiom/react/DropdownMenuSubTrigger";
 

package/dist/src/dropdown-menu-trigger/DropdownMenuTrigger.js

@@ -2,13 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { MenuButton } from '../menu-button/MenuButton.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const DropdownMenuTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { ...restProps, children }) });
+  return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children }) });
 });
 DropdownMenuTrigger.displayName = "@optiaxiom/react/DropdownMenuTrigger";
 

package/dist/src/hover-card-content/HoverCardContent-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-BNBQF_0T.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-B7Unn1_B.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'_11uxbov']});
+var content = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm',rounded:'lg',shadow:'md',z:'popover'},'_3l7pl7']});
 
 export { content };

package/dist/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/indicator/Indicator.css.ts.vanilla-B8unyh6v.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/indicator/Indicator.css.ts.vanilla-DT8h6YNZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_1afa6dq',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_1ocflgm']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1tzg6p3']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1vtodxc'],variants:{offset:{false:'_254wu5',true:{}},position:{'bottom-right':'oyxusw','top-right':'_1491pag'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1ivl5gu']});
+var badge = recipeRuntime({base:'_1m6jld1',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_1cn5d5d']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1tmq43t']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1vip953'],variants:{offset:{false:'_1qy7tev',true:{}},position:{'bottom-right':'_1wnigzz','top-right':'_19zbvim'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_3f1sdu']});
 
 export { badge, floating, indicator };

package/dist/src/input/Input-css.js

@@ -1,7 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/input/Input.css.ts.vanilla-BNBpG_wR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:{flex:'none'},variants:{position:{end:{mr:'8'},start:{ml:'8'}},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:{mr:'4'},variants:{position:'end',size:'sm'}},{style:{ml:'4'},variants:{position:'start',size:'sm'}}]});
+var addon = recipeRuntime({base:{flex:'none'},variants:{position:{end:'u2iwyl',start:'_15qqgxj'},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:'xdl54h',variants:{position:'end',size:'sm'}},{style:'rknk1b',variants:{position:'start',size:'sm'}}]});
 var input = recipeRuntime({variants:{appearance:{'default':{textAlign:'start'},number:{textAlign:'end'}}}});
 
 export { addon, input };

package/dist/src/input-base/InputBase-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-BMIhB2fq.css';
-import './../../assets/src/input-base/InputBase.css.ts.vanilla-D--9gOO1.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-g1JsQVd4.css';
+import './../../assets/src/input-base/InputBase.css.ts.vanilla-BRh6TDMo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:['_15ops76',{bg:'transparent',flex:'auto',w:'full'},'jxdtzg','_11c0la6'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
-var wrapper = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1iqsoh2']});
+var input = recipeRuntime({base:['ekct3w',{bg:'transparent',flex:'auto',w:'full'},'_11xlerj','h9piwq'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
+var wrapper = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1uptgoh']});
 
 export { input, wrapper };

package/dist/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/kbd/Kbd.css.ts.vanilla-DJDNR37v.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/kbd/Kbd.css.ts.vanilla-DI26I3lo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var kbd = recipeRuntime({base:{alignItems:'center',display:'inline-flex',flexDirection:'row',whiteSpace:'nowrap'},variants:{variant:{outline:{border:'1',borderB:'2',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = recipeRuntime({base:'_1cmltqa',variants:{variant:{outline:'_1r0cmnk',subtle:{}}}});
+var keys = recipeRuntime({base:'gkv87b',variants:{variant:{outline:'_18cbnur',subtle:{}}}});
 
 export { kbd, keys };

package/dist/src/layers/layers-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._8eawvo';
-var reset = 'optiaxiom.pk7zg3';
+var components = 'optiaxiom.z7nceq';
+var reset = 'optiaxiom.i2qz3s';
 
 export { axiom, base, components, reset };

package/dist/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/link/Link.css.ts.vanilla-CEocHXy8.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/link/Link.css.ts.vanilla-B1rm-mfe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_9mkqxp']});
-var link = recipeRuntime({base:['ewopst'],variants:{appearance:{'default':'_12h9jas',inverse:'_1wvmpu2',subtle:'av67p2'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'pzkhx5']});
+var link = recipeRuntime({base:['_1kl0dj6'],variants:{appearance:{'default':'njqkc5',inverse:'_7bak20',subtle:'rp2kni'}}});
 
 export { icon, link };

package/dist/src/listbox-base/ListboxBase-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/listbox-base/ListboxBase.css.ts.vanilla-OxyS0fbd.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'flex',flexDirection:'column',gap:'2',maxW:'xs',overflow:'auto',p:'4',rounded:'lg',shadow:'md',z:'popover'},'_1g9jprk'],variants:{minW:{'0':{},trigger:'rkbwjf'},provider:{'dropdown-menu':'xz7kio',popover:'r6x13q',popper:'_1d3jmpq'}}});
+
+export { content };

package/dist/src/{menu-content-base/MenuContentBase.js → listbox-base/ListboxBase.js}

@@ -6,14 +6,14 @@ import { forwardRef } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Box } from '../box/Box.js';
 import { Transition } from '../transition/Transition.js';
-import { content } from './MenuContentBase-css.js';
+import { content } from './ListboxBase-css.js';
 
 const mapProviderToPortal = {
   "dropdown-menu": DropdownMenuPortal,
   popover: PopoverPortal,
   popper: Portal
 };
-const MenuContentBase = forwardRef(
+const ListboxBase = forwardRef(
   ({
     children,
     className,
@@ -37,6 +37,6 @@ const MenuContentBase = forwardRef(
     return enableExitAnimation ? /* @__PURE__ */ jsx(AnimatePresence, { children: open && element }) : open && element;
   }
 );
-MenuContentBase.displayName = "@optiaxiom/react/MenuContentBase";
+ListboxBase.displayName = "@optiaxiom/react/ListboxBase";
 
-export { MenuContentBase };
+export { ListboxBase };

package/dist/src/listbox-item-base/ListboxItemBase-css.js

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/listbox-item-base/ListboxItemBase.css.ts.vanilla-2nkexoSY.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_45qcqv'],variants:{colorScheme:{danger:'_1gio6ec',neutral:'hu3pbs'}}});
+
+export { item };

package/dist/src/{menu-item-base/MenuItemBase.js → listbox-item-base/ListboxItemBase.js}

@@ -4,12 +4,13 @@ import { useId } from '@reach/auto-id';
 import { forwardRef, isValidElement, cloneElement } from 'react';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { item } from './MenuItemBase-css.js';
+import { item } from './ListboxItemBase-css.js';
 
-const MenuItemBase = forwardRef(
+const ListboxItemBase = forwardRef(
   ({
     addonAfter,
     addonBefore,
@@ -17,6 +18,7 @@ const MenuItemBase = forwardRef(
     className,
     colorScheme = "neutral",
     description,
+    icon,
     ...props
   }, ref) => {
     const labelId = useId();
@@ -40,7 +42,7 @@ const MenuItemBase = forwardRef(
         ...item({ colorScheme }, className),
         ...props,
         children: /* @__PURE__ */ jsxs(Slot, { children: [
-          addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, h: "16", w: "auto", children: fallbackSpan(addonBefore) }),
+          addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null,
           /* @__PURE__ */ jsx(Slottable, { children }),
           addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "xs", children: fallbackSpan(addonAfter) })
         ] })
@@ -48,6 +50,6 @@ const MenuItemBase = forwardRef(
     );
   }
 );
-MenuItemBase.displayName = "@optiaxiom/react/MenuItemBase";
+ListboxItemBase.displayName = "@optiaxiom/react/ListboxItemBase";
 
-export { MenuItemBase };
+export { ListboxItemBase };

package/dist/src/pagination/Pagination-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/pagination/Pagination.css.ts.vanilla-D-p7Hfvt.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/pagination/Pagination.css.ts.vanilla-BO2HXPXk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_18yhsib'});
+var button = recipeRuntime({base:'_1gihcra'});
 
 export { button };

package/dist/src/pagination/Pagination.js

@@ -5,6 +5,7 @@ import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
+import { ButtonBase } from '../button-base/ButtonBase.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
 import { IconAngleLeft } from '../icons/IconAngleLeft.js';
@@ -48,8 +49,8 @@ const Pagination = forwardRef(
           size: "md",
           children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconEllipsis, {}) })
         }
-      ) : /* @__PURE__ */ jsx(
-        Button,
+      ) : /* @__PURE__ */ jsxs(
+        ButtonBase,
         {
           appearance: "subtle",
           "aria-current": active === page ? "page" : void 0,
@@ -57,12 +58,12 @@ const Pagination = forwardRef(
           disabled,
           onClick: () => setPage(page),
           ...button(),
-          children: /* @__PURE__ */ jsxs(Box, { mx: "0", children: [
+          children: [
             /* @__PURE__ */ jsx(VisuallyHidden, { children: "page" }),
             " ",
             page,
             page === 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { children: "(first page)" }) : page === total ? /* @__PURE__ */ jsx(VisuallyHidden, { children: "(last page)" }) : null
-          ] })
+          ]
         }
       ) }, `${index}`)),
       /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Next", disabled: disabled || active === total, children: /* @__PURE__ */ jsx(

package/dist/src/pill/Pill-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/pill/Pill.css.ts.vanilla-DeCZ2_8Z.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/pill/Pill.css.ts.vanilla-DzzbV1Nh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_1vd8yow'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'u8mz3z'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
 
 export { pill };

package/dist/src/popover-content/PopoverContent.js

@@ -2,13 +2,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { theme } from '@optiaxiom/globals';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef } from 'react';
-import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+import { ListboxBase } from '../listbox-base/ListboxBase.js';
 import { usePopoverContext } from '../popover-context/PopoverContext.js';
 
 const PopoverContent = forwardRef(
   ({ align = "start", children, sideOffset = 2, withArrow, ...props }, ref) => {
     const { open } = usePopoverContext("PopoverContent");
-    return /* @__PURE__ */ jsx(MenuContentBase, { open, p: "sm", provider: "popover", ...props, children: /* @__PURE__ */ jsxs(RadixPopover.Content, { align, ref, sideOffset, children: [
+    return /* @__PURE__ */ jsx(ListboxBase, { open, p: "sm", provider: "popover", ...props, children: /* @__PURE__ */ jsxs(RadixPopover.Content, { align, ref, sideOffset, children: [
       children,
       withArrow && /* @__PURE__ */ jsx(RadixPopover.Arrow, { asChild: true, children: /* @__PURE__ */ jsxs(
         "svg",

package/dist/src/popover-trigger/PopoverTrigger.js

@@ -2,13 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { forwardRef } from 'react';
 import { MenuButton } from '../menu-button/MenuButton.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const PopoverTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { ...restProps, children }) });
+  return /* @__PURE__ */ jsx(RadixPopover.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children }) });
 });
 PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
 

package/dist/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-BMIhB2fq.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DiU1hVaB.css';
-import './../../assets/src/radio/Radio.css.ts.vanilla-DSIvoy-w.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-g1JsQVd4.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-B-y4RHi9.css';
+import './../../assets/src/radio/Radio.css.ts.vanilla-mURefw5x.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',mt:'2',p:'2',rounded:'full',size:'16'},'_1eqpunz']});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'swtdla']});
-var input = recipeRuntime({base:'y78luo'});
-var radio = recipeRuntime({base:'_1jxh72e'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',mt:'2',p:'2',rounded:'full',size:'16'},'_1t1kkjk']});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_1uzldgj']});
+var input = recipeRuntime({base:'_2uy7ho'});
+var radio = recipeRuntime({base:'az5sm2'});
 
 export { control, indicator, input, radio };

package/dist/src/search-input/SearchInput-css.js

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/search-input/SearchInput.css.ts.vanilla-lEdOzY9x.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/search-input/SearchInput.css.ts.vanilla-D53cHAo4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'su9ww3']});
-var search = recipeRuntime({base:'_1hwuw4i'});
+var clear = recipeRuntime({base:[{size:'sm'},'_12gma93']});
+var search = recipeRuntime({base:'abzwue'});
 
 export { clear, search };

package/dist/src/select-content/SelectContent-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/select-content/SelectContent.css.ts.vanilla-BNmH0vGS.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/select-content/SelectContent.css.ts.vanilla-MHnZ2e2d.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_1ooek3n']});
+var content = recipeRuntime({base:['lnkwn1']});
 
 export { content };

package/dist/src/select-content/SelectContent.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { PopperContent } from '@radix-ui/react-popper';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
+import { ListboxBase } from '../listbox-base/ListboxBase.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { content } from './SelectContent-css.js';
@@ -18,7 +18,7 @@ const SelectContent = forwardRef(
     ...props
   }, ref) => {
     const { downshift, isOpen } = useSelectContext("SelectContent");
-    return /* @__PURE__ */ jsx(MenuContentBase, { open: isOpen, provider: "popper", children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ListboxBase, { open: isOpen, provider: "popper", children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(
       PopperContent,
       {
         align,

package/dist/src/select-item/SelectItem.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
+import { ListboxItemBase } from '../listbox-item-base/ListboxItemBase.js';
 import { useSelectContext } from '../select-context/SelectContext.js';
 import { SelectItemContextProvider } from '../select-item-context/SelectItemContext.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
@@ -8,16 +8,17 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
 const SelectItem = forwardRef(
-  ({ addonAfter, addonBefore, children, description, item, ...props }, ref) => {
+  ({ addonAfter, addonBefore, children, description, icon, item, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const { downshift, highlightedItem, selectedItem } = useSelectContext("SelectItem");
     const itemProps = downshift.getItemProps({ item });
     return /* @__PURE__ */ jsx(SelectItemContextProvider, { active: selectedItem === item, children: /* @__PURE__ */ jsx(
-      MenuItemBase,
+      ListboxItemBase,
       {
         addonAfter,
         addonBefore,
         description,
+        icon,
         ...sprinkleProps,
         children: /* @__PURE__ */ jsx(
           "li",

package/dist/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/separator/Separator.css.ts.vanilla-GmmMa_6S.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/separator/Separator.css.ts.vanilla-N8U1QlYl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';
 
 var base = recipeRuntime({base:{bg:'border.default'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'wx7zqz',md:'_1r382mb',lg:'c1qha1',base:'ecdw7o'},defaultClass:'ecdw7o'},vertical:{conditions:{sm:'_1icdr18',md:'_98dtkn',lg:'um3qd2',base:'_18nwsq5'},defaultClass:'_18nwsq5'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'nxmmkh',md:'_109zf0m',lg:'djd7r8',base:'tqe2gd'},defaultClass:'tqe2gd'},vertical:{conditions:{sm:'_1wnalqk',md:'_13p4qzn',lg:'_1syceqv',base:'hrlzow'},defaultClass:'hrlzow'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };