@optiaxiom/react 0.3.3 → 0.3.5

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-C7QPdQL4.css';
-import './../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-C69OVRIH.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-lySj_lUQ.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'},'_13j3zug']});
+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'},'zo27ke']});
 
 export { content };

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/indicator/Indicator.css.ts.vanilla-blbpbaAA.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/indicator/Indicator.css.ts.vanilla-BB2KNGqT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_6q78ul',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_13mhffq']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'pn209r']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1m0bvq2'],variants:{offset:{false:'aufvnw',true:{}},position:{'bottom-right':'_1wf0lr1','top-right':'_1tctkbq'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_578504']});
+var badge = recipeRuntime({base:'_4flbqp',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'gyrm1o']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_168mkfn']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1c052wi'],variants:{offset:{false:'foo2u',true:{}},position:{'bottom-right':'uoxakl','top-right':'_1a7gcnu'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1ntuxgm']});
 
 export { badge, floating, indicator };

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

@@ -1,7 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/input/Input.css.ts.vanilla-BmTJx0jV.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:'_1u3ec8h',start:'rqm0i2'},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:'_5og24j',variants:{position:'end',size:'sm'}},{style:'_1ue62av',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-C7QPdQL4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DtdkkHE5.css';
-import './../../assets/src/input-base/InputBase.css.ts.vanilla-zp6VL08A.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
+import './../../assets/src/input-base/InputBase.css.ts.vanilla-DFLR3BqU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:['_4h9ea0',{bg:'transparent',flex:'auto',w:'full'},'_1htjpm1','to5n27'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
-var wrapper = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'r45873']});
+var input = recipeRuntime({base:['_1icixo7',{bg:'transparent',flex:'auto',w:'full'},'p4ivl5','f9ia0k'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
+var wrapper = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_18am2vp']});
 
 export { input, wrapper };

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/kbd/Kbd.css.ts.vanilla-B2knVFJF.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/kbd/Kbd.css.ts.vanilla-DGV6V8U_.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:'_1cdomji',variants:{variant:{outline:'_1n3b826',subtle:{}}}});
+var keys = recipeRuntime({base:'_1v1hbs9',variants:{variant:{outline:'_1g5g9r7',subtle:{}}}});
 
 export { kbd, keys };

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom.rzssx9';
-var reset = 'optiaxiom._150bg43';
+var components = 'optiaxiom._1uoxjkg';
+var reset = 'optiaxiom._1fsvo5r';
 
 export { axiom, base, components, reset };

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/link/Link.css.ts.vanilla-BwyvAiBb.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/link/Link.css.ts.vanilla-aDd_bw53.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'e99d6b']});
-var link = recipeRuntime({base:['sxxieb'],variants:{appearance:{'default':'_1f4lqsf',inverse:'rxmy2g',subtle:'_1ryg8gu'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1rfbz2c']});
+var link = recipeRuntime({base:['ig96aq'],variants:{appearance:{'default':'vtcv7l',inverse:'xpbj78',subtle:'b4vdhe'}}});
 
 export { icon, link };

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

@@ -0,0 +1,7 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/listbox-base/ListboxBase.css.ts.vanilla-DGeZ_R0t.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'},'_1j3pkre'],variants:{minW:{'0':{},trigger:'_1iy81rd'},provider:{'dropdown-menu':'_1rw89zc',popover:'_12780y0',popper:'_7hp7zi'}}});
+
+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-BQxl5Oc4.css';
+import './../../assets/src/listbox-item-base/ListboxItemBase.css.ts.vanilla-C1JB1FI6.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_6n6uno'],variants:{colorScheme:{danger:'_1gqnodb',neutral:'_91nkow'}}});
+
+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-C7QPdQL4.css';
-import './../../assets/src/pagination/Pagination.css.ts.vanilla-Ck4A0tXZ.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/pagination/Pagination.css.ts.vanilla-DbNkwf0Z.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'l7mp3g'});
+var button = recipeRuntime({base:'hxk07w'});
 
 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-C7QPdQL4.css';
-import './../../assets/src/pill/Pill.css.ts.vanilla-DfZxbJYE.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/pill/Pill.css.ts.vanilla-BhiphgSM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_10nbcse'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'xm865d'],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-C7QPdQL4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DtdkkHE5.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DEHzszBc.css';
-import './../../assets/src/radio/Radio.css.ts.vanilla-COjZu2QD.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CYG8X4be.css';
+import './../../assets/src/radio/Radio.css.ts.vanilla-B-Wp17XI.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'},'_1tt9x6b']});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_1tzjqzd']});
-var input = recipeRuntime({base:'_1buc7we'});
-var radio = recipeRuntime({base:'_13ven43'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',mt:'2',p:'2',rounded:'full',size:'16'},'_1sjfmjk']});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_15doob9']});
+var input = recipeRuntime({base:'k8rsev'});
+var radio = recipeRuntime({base:'_1oclwmx'});
 
 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-C7QPdQL4.css';
-import './../../assets/src/search-input/SearchInput.css.ts.vanilla-CjaWjHFP.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/search-input/SearchInput.css.ts.vanilla-oc3OrG46.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'d12wkh']});
-var search = recipeRuntime({base:'nf73nr'});
+var clear = recipeRuntime({base:[{size:'sm'},'_1t89cq']});
+var search = recipeRuntime({base:'_4vcoc8'});
 
 export { clear, search };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/select-content/SelectContent.css.ts.vanilla-sakBlypk.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/select-content/SelectContent.css.ts.vanilla-VyK_Ftq8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_1m069gz']});
+var content = recipeRuntime({base:['_16dw7hh']});
 
 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-C7QPdQL4.css';
-import './../../assets/src/separator/Separator.css.ts.vanilla-p-KdqYLU.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/separator/Separator.css.ts.vanilla-BFxuHRr5.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:'_1ro7x6d',md:'ztzpje',lg:'_8v6pft',base:'_1mi562a'},defaultClass:'_1mi562a'},vertical:{conditions:{sm:'hceqx2',md:'_3d0lis',lg:'na88xb',base:'_18fse9t'},defaultClass:'_18fse9t'}},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:'_1d29cwa',md:'_10ug2sg',lg:'_1vp924y',base:'_3vzxe'},defaultClass:'_3vzxe'},vertical:{conditions:{sm:'_4nu195',md:'_1j0uuhe',lg:'_11h9epo',base:'_11wc3x5'},defaultClass:'_11wc3x5'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/src/side-nav-account-item/SideNavAccountItem.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, isValidElement, cloneElement } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
@@ -20,7 +20,7 @@ const SideNavAccountItem = forwardRef(({ avatar, name, organization, ...props },
       textAlign: "start",
       ...props,
       children: /* @__PURE__ */ jsxs("button", { ref, children: [
-        /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", my: "2", children: isValidElement(avatar) && cloneElement(avatar, { rounded: "sm" }) }),
+        /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", my: "2", rounded: "sm", children: avatar }),
         expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsxs(Flex, { flex: "1", flexDirection: "row", gap: "xs", overflowX: "hidden", children: [
           /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", overflowX: "hidden", children: [
             /* @__PURE__ */ jsx(Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),

package/dist/src/side-nav-item/SideNavItem-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-DtdkkHE5.css';
-import './../../assets/src/button/Button.css.ts.vanilla-DW2Pv0jL.css';
-import './../../assets/src/side-nav-item/SideNavItem.css.ts.vanilla-DTNJWyy-.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DkygPBaI.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-BHtcSNLa.css';
+import './../../assets/src/side-nav-item/SideNavItem.css.ts.vanilla-BPtTByKU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'dgv6c8']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'_10nf0nc']});
 
 export { item };

package/dist/src/side-nav-item/SideNavItem.js

@@ -6,6 +6,8 @@ import { Flex } from '../flex/Flex.js';
 import { useSideNavContext } from '../side-nav-context/SideNavContext.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { Transition } from '../transition/Transition.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { item } from './SideNavItem-css.js';
 
 const SideNavItem = forwardRef(
@@ -18,10 +20,10 @@ const SideNavItem = forwardRef(
       children = newElement ? cloneElement(
         newElement,
         void 0,
-        expanded && /* @__PURE__ */ jsx(Flex, { flex: "1", children: /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children: newElement.props.children }) }) })
+        expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children: newElement.props.children }) })
       ) : children;
     } else {
-      children = expanded && /* @__PURE__ */ jsx(Flex, { flex: "1", children: /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children }) }) });
+      children = expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children }) });
     }
     return /* @__PURE__ */ jsx(Flex, { asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       Tooltip,
@@ -31,7 +33,7 @@ const SideNavItem = forwardRef(
         children: /* @__PURE__ */ jsx(
           Button,
           {
-            addonAfter: expanded && addonAfter,
+            addonAfter: expanded && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "auto", children: fallbackSpan(addonAfter) }),
             appearance: "subtle",
             asChild,
             "data-state": active ? "active" : void 0,

package/dist/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C7QPdQL4.css';
-import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-DuMdgSS2.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-BQxl5Oc4.css';
+import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-B2F2J-1K.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'inq77i']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_14wtmgf']});
 
 export { skeleton };