@optiaxiom/react 0.7.2 → 0.7.4

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.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/packages/react/src/dialog-title/DialogTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-CJ0AmbT6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-CD3TirI2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'u2ie6n']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'zrq3x3']});
 
 export { title };

package/dist/packages/react/src/disclosure-content/DisclosureContent.js

@@ -2,10 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { content } from './DisclosureContent-css.js';
 
-const DisclosureContent = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "xs", pt: "0", children }) }) });
+const DisclosureContent = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "xs", pt: "0", children }) }) });
 });
 DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
 

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-D0wWJS80.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-W5--Hw71.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_12xgu6o',start:'sav27y'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_9vnl5g']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_2tdco5',start:'_3bb9ou'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'xs',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1st23n4']});
 
 export { icon, trigger };

package/dist/packages/react/src/drawer-actions/DrawerActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-DsEnvnzr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-DhewRjjY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'xs'},'_1353pmb']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'xs'},'_9h6ivk']});
 
 export { actions };

package/dist/packages/react/src/drawer-content/DrawerContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-B96rWc4V.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-0masIjKi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'w66f88'],variants:{position:{bottom:[{borderT:'1'},'bphr2s'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1lv0zvd'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'zci3ui']}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_38w734'],variants:{position:{bottom:[{borderT:'1'},'_1rey9sj'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1ik665q'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'bqfgk1']}}});
 
 export { content };

package/dist/packages/react/src/drawer-description/DrawerDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-CiNUNM4E.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-DqOQ2nmW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'qui14q']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'o3zua1']});
 
 export { description };

package/dist/packages/react/src/drawer-title/DrawerTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-DIGNhU5H.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-6H7xncrV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'t0m9l0']});
+var title = recipeRuntime({base:[{flex:'1'},'plm66o']});
 
 export { title };

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

@@ -3,8 +3,8 @@ import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import { ListboxItem } from '../listbox-item/ListboxItem.js';
 
-const DropdownMenuItem = forwardRef(({ children, onSelect, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ListboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { onSelect, children }) });
+const DropdownMenuItem = forwardRef(({ asChild, children, onSelect, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(ListboxItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Item, { asChild, onSelect, children }) });
 });
 DropdownMenuItem.displayName = "@optiaxiom/react/DropdownMenuItem";
 

package/dist/packages/react/src/field/Field.js

@@ -14,6 +14,7 @@ import { IconCircleQuestion } from '../icons/IconCircleQuestion.js';
 import { IconTriangleExclamation } from '../icons/IconTriangleExclamation.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
+import '@radix-ui/react-slot';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 
 const Field = forwardRef(

package/dist/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-Dpxqae0e.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-Yi-m2i-h.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_7lm7pq'});
+var mark = recipeRuntime({base:'bltofi'});
 
 export { mark };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-DhWBXzZu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-B-nTBpwR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm'},'z5nv6p']});
+var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm'},'_535vzg']});
 
 export { content };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-CuwC_3B7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-MHk7pvVA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_1slyhim',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_1p8xt3r']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'l6m8zo']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1819j0r'],variants:{offset:{false:'_1li7877',true:{}},position:{'bottom-right':'_5m2npk','top-right':'va22o5'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'atjq6o']});
+var badge = recipeRuntime({base:'_3buuvo',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'v5ehp4']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'ict18u']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_18qwu0l'],variants:{offset:{false:'iy02o5',true:{}},position:{'bottom-right':'x8f9h3','top-right':'_32kock'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'pndpdl']});
 
 export { badge, floating, indicator };

package/dist/packages/react/src/inline-input/InlineInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-Cg3eTEP_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-BEcoUQ6q.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:'ohikpk'});
+var input = recipeRuntime({base:'_66a328'});
 
 export { input };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

package/dist/packages/react/src/input-control/InputControl-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-eXgbdVoj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DCf0g8ht.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_87dutc',{bg:'transparent',flex:'auto',w:'full'},'c3xs5o','xsjuuh'],variants:{size:{md:{},lg:{},'2xl':['_1aqzay2']}}});
+var control = recipeRuntime({base:['_1oixdj3',{bg:'transparent',flex:'auto',w:'full'},'_1yvkhsv','_1c8c3z8'],variants:{size:{md:{},lg:{},'2xl':['_1un9ygx']}}});
 
 export { control };

package/dist/packages/react/src/input-root/InputRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-C_d2Dp5h.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-eXgbdVoj.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-CItDecac.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-CtkrjUKf.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DCf0g8ht.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-C6huAyYx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1psv2l4']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_4mtwbh']});
 
 export { root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-CYGa2SEk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-KCVdkoN3.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:'_1bt9psn',variants:{variant:{outline:'vzu8yx',subtle:{}}}});
+var keys = recipeRuntime({base:'_16ooler',variants:{variant:{outline:'_1wujs29',subtle:{}}}});
 
 export { kbd, keys };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._1kl235h';
-var reset = 'optiaxiom._1hfzq2l';
+var components = 'optiaxiom._186epw8';
+var reset = 'optiaxiom.tlzsm7';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-BMXieisA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-0xsKAVy8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'uuess4']});
-var link = recipeRuntime({base:['kzsntm'],variants:{appearance:{'default':'h45cfc',inverse:'an10j9',subtle:'bkhcw3'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'t83239']});
+var link = recipeRuntime({base:['_1h201x1'],variants:{appearance:{'default':'_115eu5b',inverse:'_1spwhs5',subtle:'_13ifno4'}}});
 
 export { icon, link };

package/dist/packages/react/src/link/Link.js

@@ -1,11 +1,13 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Slottable, Slot } from '@radix-ui/react-slot';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { IconUpRightFromSquare } from '../icons/IconUpRightFromSquare.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import '../utils/conditions.js';
+import { decorateChildren } from '../utils/decorateChildren.js';
 import { link, icon } from './Link-css.js';
 
 const Link = forwardRef(
@@ -27,7 +29,7 @@ const Link = forwardRef(
         asChild: true,
         ...link({ appearance }, className),
         ...sprinkleProps,
-        children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(
           Comp,
           {
             "aria-disabled": disabled,
@@ -40,10 +42,10 @@ const Link = forwardRef(
               href: void 0,
               role: "link"
             },
-            children: [
-              /* @__PURE__ */ jsx(Slottable, { children }),
+            children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              children2,
               external && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: /* @__PURE__ */ jsx(IconUpRightFromSquare, {}) })
-            ]
+            ] }))
           }
         )
       }

package/dist/packages/react/src/listbox-item/ListboxItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-U70R-Uj7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-BnQh0brI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'_1nqib2x']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'e071b'],variants:{intent:{danger:'_27q6g6',neutral:'xr1yjb'}}});
-var title = recipeRuntime({base:['_1cl1qtn']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1b9uih3']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'pl7ee7'],variants:{intent:{danger:'_1k3056r',neutral:'n5erx3'}}});
+var title = recipeRuntime({base:['_13gfwao']});
 
 export { description, item, title };

package/dist/packages/react/src/listbox-item/ListboxItem.js

@@ -1,14 +1,15 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Slottable, Slot } from '@radix-ui/react-slot';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { useId } from '@reach/auto-id';
-import { forwardRef, isValidElement, cloneElement } from 'react';
+import { forwardRef } 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 { decorateChildren } from '../utils/decorateChildren.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { title, description, item } from './ListboxItem-css.js';
+import { item, title, description } from './ListboxItem-css.js';
 
 const ListboxItem = forwardRef(
   ({
@@ -25,22 +26,6 @@ const ListboxItem = forwardRef(
     const Comp = asChild ? Slot : "div";
     const labelId = useId();
     const descriptionId = useId();
-    if (asChild) {
-      const newElement = isValidElement(children) ? children : null;
-      children = newElement ? cloneElement(
-        newElement,
-        void 0,
-        /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(newElement.props.children) }),
-          description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
-        ] })
-      ) : children;
-    } else {
-      children = /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
-        /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(children) }),
-        description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
-      ] });
-    }
     return /* @__PURE__ */ jsx(
       Flex,
       {
@@ -50,11 +35,14 @@ const ListboxItem = forwardRef(
         ref,
         ...item({ intent }, className),
         ...props,
-        children: /* @__PURE__ */ jsxs(Comp, { children: [
+        children: /* @__PURE__ */ jsx(Comp, { children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
           addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null,
-          /* @__PURE__ */ jsx(Slottable, { children }),
+          /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", children: [
+            /* @__PURE__ */ jsx(Box, { asChild: true, ...title(), id: labelId, children: fallbackSpan(children2) }),
+            description$1 && /* @__PURE__ */ jsx(Text, { asChild: true, ...description(), id: descriptionId, children: fallbackSpan(description$1) })
+          ] }),
           addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "xs", children: fallbackSpan(addonAfter) })
-        ] })
+        ] })) })
       }
     );
   }

package/dist/packages/react/src/menu-listbox/MenuListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-C2WQ9xfE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-CCdCnNQz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1c6nd7q'],variants:{minW:{'0':{},trigger:'_34gj4s'},provider:{'dropdown-menu':'s616yk',popover:'_1lb06pc',popper:'_1xtd1ut'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_166r79c'],variants:{minW:{'0':{},trigger:'ompuba'},provider:{'dropdown-menu':'_1jtjntb',popover:'lr5jmp',popper:'_1il0hl2'}}});
 
 export { listbox };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-CwKtn6zS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-BLThWGZY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_19nokre'});
-var cursor = recipeRuntime({base:[{z:'10'},'h3vyd2'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1xx96pd']});
+var button = recipeRuntime({base:'nposc0'});
+var cursor = recipeRuntime({base:[{z:'10'},'_1525t78'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1wk4bid']});
 
 export { button, cursor, list };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},drawer:{},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'}}}});

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-DY17U4wY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-K-DXXl8m.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_115l48c'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'cgt9y3'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
 
 export { pill };

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

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

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

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-C_d2Dp5h.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-pCGq_jox.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-fdVhNcaU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-CtkrjUKf.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-UGTfac3G.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-pvc6MIbc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'16'},'_1awod9n'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_1rb59g1']});
-var input = recipeRuntime({base:'_1p9v5qi'});
-var radio = recipeRuntime({base:'_7ks7n9'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'16'},'_1tg8m7'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_6yjisb']});
+var input = recipeRuntime({base:'_1ei852k'});
+var radio = recipeRuntime({base:'d0c08k'});
 
 export { control, indicator, input, radio };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-DRci-vNV.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-D18cD4Mj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{my:'-2',size:'sm'},'_1bnm5yz']});
-var search = recipeRuntime({base:'kysonk'});
+var clear = recipeRuntime({base:[{my:'-2',size:'sm'},'_16uanmn']});
+var search = recipeRuntime({base:'i18la'});
 
 export { clear, search };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-D6OMFbOn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-WcPwQ1cj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_16bedi9']});
+var content = recipeRuntime({base:['_1wj2h8w']});
 
 export { content };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-jowLE-ih.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-NX4_lESf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-import { createSprinkles } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';
+import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1.16.0/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
 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:'wggogv',md:'_2pol37',lg:'b5a4un',base:'qget3k'},defaultClass:'qget3k'},vertical:{conditions:{sm:'_1w18cyq',md:'_4ow9av',lg:'ttbfba',base:'_1vvklcp'},defaultClass:'_1vvklcp'}},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:'gnwgr6',md:'_1mho4cp',lg:'_1d4r34z',base:'_346qb9'},defaultClass:'_346qb9'},vertical:{conditions:{sm:'nz74h2',md:'pkiooe',lg:'_1nom46',base:'tylz2q'},defaultClass:'tylz2q'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/packages/react/src/sidenav-item/SidenavItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-C_d2Dp5h.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-BIJoN1-n.css';
-import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-DAW0vJ67.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-CtkrjUKf.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CNVMJ2-K.css';
+import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-CmgpHIqK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'_1ukhp3i']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'zeqr5v']});
 
 export { item };

package/dist/packages/react/src/sidenav-item/SidenavItem.js

@@ -7,6 +7,7 @@ import { useSidenavContext } from '../sidenav-context/SidenavContext.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { Transition } from '../transition/Transition.js';
 import '../utils/conditions.js';
+import '@radix-ui/react-slot';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { item } from './SidenavItem-css.js';
 

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-BMHpE2PR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-CeeWwr54.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_1hxxma4']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_1kc1cd']});
 
 export { skeleton };

package/dist/packages/react/src/spotlight-input/SpotlightInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-DpyJ-4d3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-Bo0uA33d.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'_3tp6cc']});
+var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'d5mtyw']});
 
 export { input };

package/dist/packages/react/src/spotlight-radio-item/SpotlightRadioItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-BPKCT0n9.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-C56n6Id1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'lg',px:'md',py:'sm'},'_4g5u0h']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'lg',px:'md',py:'sm'},'_1nwr2yz']});
 
 export { item };

package/dist/packages/react/src/spotlight-sub-item/SpotlightSubItem-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-XUGlhnOn.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-afQz8aOg.css';
-import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-DuGzW4vn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CpOBJFHL.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-JeWad4NR.css';
+import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-BZ02nYW2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_14goyn5',true:'tfmutn'}}});
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'cy4fd',true:'nur49g'}}});
 
 export { item };

package/dist/packages/react/src/spotlight-trigger/SpotlightTrigger.js

@@ -6,6 +6,7 @@ import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { useSpotlightContext } from '../spotlight-context/SpotlightContext.js';
 import '../utils/conditions.js';
+import '@radix-ui/react-slot';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 
 const DEFAULT_HOTKEY = "mod+K";