@optiaxiom/react 0.4.2 → 0.5.0

package/dist/src/hover-card-trigger/HoverCardTrigger.js

@@ -3,13 +3,9 @@ import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import { forwardRef } from 'react';
 import { useHoverCardContext } from '../hover-card-context/HoverCardContext.js';
 import { Link } from '../link/Link.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
-const HoverCardTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
+const HoverCardTrigger = forwardRef(({ asChild, children, cursor = "pointer", ...props }, ref) => {
   const { keepOpenOnActivation, setOpen } = useHoverCardContext("HoverCardTrigger");
-  const { restProps, sprinkleProps } = extractSprinkles(props);
   return /* @__PURE__ */ jsx(
     RadixHoverCard.Trigger,
     {
@@ -19,8 +15,8 @@ const HoverCardTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
         setOpen(true);
       } : void 0,
       ref,
-      ...sprinkleProps,
-      children: asChild ? children : /* @__PURE__ */ jsx(Link, { cursor: "pointer", ...restProps, children })
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx(Link, { cursor, children })
     }
   );
 });

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/indicator/Indicator.css.ts.vanilla-D3ExxWPL.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/indicator/Indicator.css.ts.vanilla-BgVBs5x3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'t9zqqf',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_1vml7ve']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1ri7qfh']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1jrruoh'],variants:{offset:{false:'xborgg',true:{}},position:{'bottom-right':'_5h8ga7','top-right':'igloj6'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_14i829k']});
+var badge = recipeRuntime({base:'_98lcyr',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'_1hw36fp']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1rdapeb']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'_1wp9i8p'],variants:{offset:{false:'iuszk3',true:{}},position:{'bottom-right':'wiuzw0','top-right':'_18236vo'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1dsqg92']});
 
 export { badge, floating, indicator };

package/dist/src/indicator/Indicator.js

@@ -10,9 +10,9 @@ const Indicator = forwardRef(
     asChild,
     children,
     className,
-    colorScheme,
     content,
     disabled,
+    intent,
     offset = true,
     ping,
     position = "top-right",
@@ -27,7 +27,7 @@ const Indicator = forwardRef(
           {
             "aria-hidden": "true",
             asChild,
-            colorScheme,
+            intent,
             variant,
             ...badge({ offset, ping: true }),
             children: content
@@ -37,7 +37,7 @@ const Indicator = forwardRef(
           Badge,
           {
             asChild,
-            colorScheme,
+            intent,
             variant,
             ...badge({ offset }),
             children: content

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/input/Input.css.ts.vanilla-qUnBToWI.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:{flex:'none'},variants:{position:{end:'giti2e',start:'_1ow2vnw'},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:'_10ia7il',variants:{position:'end',size:'sm'}},{style:'_8hur7n',variants:{position:'start',size:'sm'}}]});
-var input = recipeRuntime({variants:{appearance:{'default':{textAlign:'start'},number:{textAlign:'end'}}}});
+var addon = recipeRuntime({base:{display:'flex',flex:'none'}});
+var input = recipeRuntime({variants:{appearance:{'default':{textAlign:'start'},number:{textAlign:'end'}},size:{md:{py:'4'},lg:{py:'xs'},'2xl':{py:'md'}}}});
+var root = recipeRuntime({variants:{size:{md:{gap:'xs',px:'xs'},lg:{gap:'xs',px:'xs'},'2xl':{gap:'md',px:'md'}}}});
 
-export { addon, input };
+export { addon, input, root };

package/dist/src/input/Input.js

@@ -5,7 +5,7 @@ import { Box } from '../box/Box.js';
 import { InputBase } from '../input-base/InputBase.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { addon, input } from './Input-css.js';
+import { addon, root, input } from './Input-css.js';
 
 const Input = forwardRef(
   ({
@@ -14,6 +14,7 @@ const Input = forwardRef(
     appearance = "default",
     asChild,
     children,
+    className,
     size = "md",
     ...props
   }, ref) => {
@@ -21,11 +22,12 @@ const Input = forwardRef(
     return /* @__PURE__ */ jsx(
       InputBase,
       {
-        addonAfter: addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon({ position: "end", size }), children: fallbackSpan(addonAfter) }),
-        addonBefore: addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon({ position: "start", size }), children: fallbackSpan(addonBefore) }),
+        addonAfter: addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon(), children: fallbackSpan(addonAfter) }),
+        addonBefore: addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon(), children: fallbackSpan(addonBefore) }),
         size,
+        ...root({ size }, className),
         ...props,
-        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input({ appearance }), children: /* @__PURE__ */ jsx(Comp, { ref, children }) })
+        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...input({ appearance, size }), children: /* @__PURE__ */ jsx(Comp, { ref, children }) })
       }
     );
   }

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/input-base/InputBase.css.ts.vanilla-Qg9a2v5X.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DvaqTswf.css';
+import './../../assets/src/input-base/InputBase.css.ts.vanilla-BbTdXMpr.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:['ao5u3w',{bg:'transparent',flex:'auto',w:'full'},'_1chsibp','x4w1s5'],variants:{size:{md:{px:'8',py:'4'},lg:{p:'8'}}}});
-var wrapper = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_13wvoz6']});
+var input = recipeRuntime({base:['_1k9b3nw',{bg:'transparent',flex:'auto',w:'full'},'_117tlk5','sgl097'],variants:{size:{md:{},lg:{},'2xl':['_7741n4']}}});
+var wrapper = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_156widb']});
 
 export { input, wrapper };

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

@@ -10,7 +10,6 @@ import { Flex } from '../flex/Flex.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { wrapper, input } from './InputBase-css.js';
@@ -34,8 +33,9 @@ const InputBase = forwardRef(
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
-    const addonProps = addonPointerEvents === "none" && {
+    const addonProps = addonPointerEvents === "none" ? {
       cursor: "text",
+      fontSize: "md",
       onMouseDown: (event) => {
         if (event.target !== event.currentTarget) {
           return;
@@ -44,6 +44,8 @@ const InputBase = forwardRef(
         event.stopPropagation();
         innerRef.current?.focus();
       }
+    } : {
+      fontSize: "md"
     };
     return /* @__PURE__ */ jsxs(
       Flex,
@@ -54,7 +56,7 @@ const InputBase = forwardRef(
         ...wrapper({}, className),
         ...sprinkleProps,
         children: [
-          addonBefore && /* @__PURE__ */ jsx(Text, { asChild: true, ...addonProps, children: fallbackSpan(addonBefore) }),
+          addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, ...addonProps, children: fallbackSpan(addonBefore) }),
           /* @__PURE__ */ jsx(
             Box,
             {
@@ -69,7 +71,7 @@ const InputBase = forwardRef(
               children: /* @__PURE__ */ jsx(Slot, { id: inputId, ref, ...restProps, children })
             }
           ),
-          addonAfter && /* @__PURE__ */ jsx(Text, { asChild: true, ...addonProps, children: fallbackSpan(addonAfter) })
+          addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ...addonProps, children: fallbackSpan(addonAfter) })
         ]
       }
     );

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/kbd/Kbd.css.ts.vanilla-CJhUGxYX.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/kbd/Kbd.css.ts.vanilla-B-Je22yQ.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:'_1kk1ggm',variants:{variant:{outline:'_1djkhs',subtle:{}}}});
+var keys = recipeRuntime({base:'_15w0tnd',variants:{variant:{outline:'oa3qb1',subtle:{}}}});
 
 export { kbd, keys };

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._1na4eli';
-var reset = 'optiaxiom.opvcqa';
+var components = 'optiaxiom._186z7zz';
+var reset = 'optiaxiom._11ixw9w';
 
 export { axiom, base, components, reset };

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/link/Link.css.ts.vanilla-DZR3tQvl.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/link/Link.css.ts.vanilla-CsWw-ZX-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'gk0w0z']});
-var link = recipeRuntime({base:['_1841c9m'],variants:{appearance:{'default':'_19x9l5w',inverse:'_8l0dq5',subtle:'_1kys7ny'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'s8e0j8']});
+var link = recipeRuntime({base:['_51r2fq'],variants:{appearance:{'default':'_6nsjpm',inverse:'_12n7h6b',subtle:'u4kpof'}}});
 
 export { icon, link };

package/dist/src/link/Link.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slottable, Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { IconUpRightFromSquare } from '../icons/IconUpRightFromSquare.js';
@@ -10,6 +11,7 @@ import { link, icon } from './Link-css.js';
 const Link = forwardRef(
   ({
     appearance = "default",
+    asChild,
     children,
     className,
     disabled,
@@ -17,6 +19,7 @@ const Link = forwardRef(
     href,
     ...props
   }, ref) => {
+    const Comp = asChild ? Slot : "a";
     const { restProps, sprinkleProps } = extractSprinkles(props);
     return /* @__PURE__ */ jsx(
       Box,
@@ -25,7 +28,7 @@ const Link = forwardRef(
         ...link({ appearance }, className),
         ...sprinkleProps,
         children: /* @__PURE__ */ jsxs(
-          "a",
+          Comp,
           {
             "aria-disabled": disabled,
             "data-disabled": disabled ? "" : void 0,
@@ -38,7 +41,7 @@ const Link = forwardRef(
               role: "link"
             },
             children: [
-              children,
+              /* @__PURE__ */ jsx(Slottable, { children }),
               external && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: /* @__PURE__ */ jsx(IconUpRightFromSquare, {}) })
             ]
           }

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/listbox-base/ListboxBase.css.ts.vanilla-DKxtbiF8.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/listbox-base/ListboxBase.css.ts.vanilla-CcOKCDfK.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'},'gm73kz'],variants:{minW:{'0':{},trigger:'rypucf'},provider:{'dropdown-menu':'hgktua',popover:'rqsaga',popper:'_13unw08'}}});
+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'},'l76cjw'],variants:{minW:{'0':{},trigger:'fwpaax'},provider:{'dropdown-menu':'_1tc6tty',popover:'fcuswj',popper:'j6rwtq'}}});
 
 export { content };

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

@@ -1,7 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/listbox-item-base/ListboxItemBase.css.ts.vanilla-BVQ-U1yL.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/listbox-item-base/ListboxItemBase.css.ts.vanilla-kR17suV0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'j3381y'],variants:{colorScheme:{danger:'_1e7n5tv',neutral:'_1tctlfu'}}});
+var description = recipeRuntime({base:[{fontSize:'sm'},'nw9ht8']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_157tetk'],variants:{intent:{danger:'dwr71f',neutral:'_18ja1vt'}}});
+var title = recipeRuntime({base:['_1ypz3so']});
 
-export { item };
+export { description, item, title };

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

@@ -8,7 +8,7 @@ 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 './ListboxItemBase-css.js';
+import { title, description, item } from './ListboxItemBase-css.js';
 
 const ListboxItemBase = forwardRef(
   ({
@@ -16,9 +16,9 @@ const ListboxItemBase = forwardRef(
     addonBefore,
     children,
     className,
-    colorScheme = "neutral",
-    description,
+    description: description$1,
     icon,
+    intent = "neutral",
     ...props
   }, ref) => {
     const labelId = useId();
@@ -27,19 +27,19 @@ const ListboxItemBase = forwardRef(
     children = newElement ? cloneElement(
       newElement,
       void 0,
-      /* @__PURE__ */ jsxs(Box, { flex: "1", children: [
-        /* @__PURE__ */ jsx(Box, { asChild: true, id: labelId, children: fallbackSpan(newElement.props.children) }),
-        description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: description })
+      /* @__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;
     return /* @__PURE__ */ jsx(
       Flex,
       {
-        "aria-describedby": description ? descriptionId : void 0,
+        "aria-describedby": description$1 ? descriptionId : void 0,
         "aria-labelledby": labelId,
         asChild: true,
         ref,
-        ...item({ colorScheme }, className),
+        ...item({ intent }, className),
         ...props,
         children: /* @__PURE__ */ jsxs(Slot, { children: [
           addonBefore ? addonBefore : icon ? /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) : null,

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/pagination/Pagination.css.ts.vanilla-BIEvtX5-.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/pagination/Pagination.css.ts.vanilla-OJC3D9A-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_1anneil'});
+var button = recipeRuntime({base:'_140cusr'});
 
 export { button };

package/dist/src/pagination/Pagination.js

@@ -38,34 +38,48 @@ const Pagination = forwardRef(
           onClick: previous
         }
       ) }) }),
-      range.map((page, index) => /* @__PURE__ */ jsx("li", { children: page === "dots" ? /* @__PURE__ */ jsx(
-        Box,
+      range.map((page, index) => /* @__PURE__ */ jsx(
+        "li",
         {
-          alignItems: "stretch",
-          display: "flex",
-          justifyContent: "center",
-          px: "6",
-          py: "8",
-          size: "md",
-          children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconEllipsis, {}) })
-        }
-      ) : /* @__PURE__ */ jsxs(
-        ButtonBase,
-        {
-          appearance: "subtle",
-          "aria-current": active === page ? "page" : void 0,
-          "data-state": active === page ? "active" : void 0,
-          disabled,
-          onClick: () => setPage(page),
-          ...button(),
-          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}`)),
+          children: page === "dots" ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              alignItems: "stretch",
+              display: "flex",
+              justifyContent: "center",
+              px: "6",
+              py: "8",
+              size: "md",
+              children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  asChild: true,
+                  color: disabled ? "fg.disabled" : "fg.default",
+                  cursor: disabled ? "not-allowed" : "default",
+                  children: /* @__PURE__ */ jsx(IconEllipsis, {})
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxs(
+            ButtonBase,
+            {
+              appearance: "subtle",
+              "aria-current": active === page ? "page" : void 0,
+              "data-state": active === page ? "active" : void 0,
+              disabled,
+              onClick: () => setPage(page),
+              ...button(),
+              children: [
+                /* @__PURE__ */ jsx(VisuallyHidden, { children: "page" }),
+                " ",
+                page,
+                page === 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { children: "(first page)" }) : page === total ? /* @__PURE__ */ jsx(VisuallyHidden, { children: "(last page)" }) : null
+              ]
+            }
+          )
+        },
+        page === "dots" ? `${page}-${index < range.indexOf(active) ? "before" : "after"}` : page
+      )),
       /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: "Next", disabled: disabled || active === total, children: /* @__PURE__ */ jsx(
         Button,
         {

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/pill/Pill.css.ts.vanilla-CRxFu2K1.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/pill/Pill.css.ts.vanilla-BVjnxRo2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_11c96bk'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'sblcsz'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
 
 export { pill };

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

@@ -1,12 +1,12 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-C8nEvBep.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-B5zW77Q6.css';
-import './../../assets/src/radio/Radio.css.ts.vanilla-DWN9BvL_.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DvaqTswf.css';
+import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-B1MlqPk7.css';
+import './../../assets/src/radio/Radio.css.ts.vanilla-5NaLXI__.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'16'},'o7h88l'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_15rquqn']});
-var input = recipeRuntime({base:'_1vlq8xo'});
-var radio = recipeRuntime({base:'ogmfxd'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'16'},'_5bflgv'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_1rhw7hc']});
+var input = recipeRuntime({base:'bkwocm'});
+var radio = recipeRuntime({base:'_1etdcd4'});
 
 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-C0SoXsdY.css';
-import './../../assets/src/search-input/SearchInput.css.ts.vanilla-DyfBXRnr.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/search-input/SearchInput.css.ts.vanilla-DhJbKnJ1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'mnapno']});
-var search = recipeRuntime({base:'umfkvb'});
+var clear = recipeRuntime({base:[{my:'-2',size:'sm'},'flwr54']});
+var search = recipeRuntime({base:'_13e94ex'});
 
 export { clear, search };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/select-content/SelectContent.css.ts.vanilla-DzQIYsrh.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/select-content/SelectContent.css.ts.vanilla-07wZOK8y.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_10n4e6r']});
+var content = recipeRuntime({base:['dc9dw3']});
 
 export { content };

package/dist/src/select-group/SelectGroup.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '@reach/auto-id';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { SelectGroupContextProvider } from '../select-group-context/SelectGroupContext.js';
+
+const SelectGroup = forwardRef(
+  ({ children, ...props }, ref) => {
+    const groupId = useId();
+    return /* @__PURE__ */ jsx(SelectGroupContextProvider, { id: groupId, children: /* @__PURE__ */ jsx(Box, { "aria-labelledby": groupId, ref, role: "group", ...props, children }) });
+  }
+);
+SelectGroup.displayName = "@optiaxiom/react/SelectGroup";
+
+export { SelectGroup };

package/dist/src/select-group-context/SelectGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [SelectGroupContextProvider, useSelectGroupContext] = createContext("SelectGroup", { id: void 0 });
+
+export { SelectGroupContextProvider, useSelectGroupContext };

package/dist/src/select-label/SelectLabel.js

@@ -1,15 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { useSelectGroupContext } from '../select-group-context/SelectGroupContext.js';
 
 const SelectLabel = forwardRef(
   ({ children, ...props }, ref) => {
+    const { id } = useSelectGroupContext("SelectLabel");
     return /* @__PURE__ */ jsx(
       Box,
       {
-        color: "fg.default",
-        fontSize: "md",
-        fontWeight: "600",
+        color: "fg.tertiary",
+        fontSize: "sm",
+        id,
         p: "xs",
         ref,
         ...props,

package/dist/src/select-separator/SelectSeparator.js

@@ -9,7 +9,17 @@ import '../sprinkles/sprinklesMerge.js';
 const SelectSeparator = forwardRef(
   ({ children, ...props }, ref) => {
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...sprinkleProps, children: /* @__PURE__ */ jsx(Separator, { ...restProps, children }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...sprinkleProps, children: /* @__PURE__ */ jsx(
+      Separator,
+      {
+        bg: "border.secondary",
+        flex: "none",
+        mx: "8",
+        my: "4",
+        ...restProps,
+        children
+      }
+    ) });
   }
 );
 SelectSeparator.displayName = "@optiaxiom/react/SelectSeparator";

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-C0SoXsdY.css';
-import './../../assets/src/separator/Separator.css.ts.vanilla-BxkwM7qo.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/separator/Separator.css.ts.vanilla-BM1zMvsd.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:'udihy9',md:'jq4ek',lg:'_6i7rex',base:'_1v20naw'},defaultClass:'_1v20naw'},vertical:{conditions:{sm:'_1sgsbrx',md:'_1je9cxo',lg:'_1x1t5hn',base:'_134hss3'},defaultClass:'_134hss3'}},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:'_1bomho9',md:'ge33m7',lg:'_10vakmh',base:'_1xal2v'},defaultClass:'_1xal2v'},vertical:{conditions:{sm:'fb6v98',md:'yfe4pn',lg:'o846ij',base:'yhf3gr'},defaultClass:'yhf3gr'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/src/sidenav/Sidenav.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Flex } from '../flex/Flex.js';
@@ -6,8 +6,6 @@ import { SidenavContextProvider } from '../sidenav-context/SidenavContext.js';
 
 const Sidenav = forwardRef(
   ({
-    addonAfter,
-    addonBefore,
     children,
     defaultExpanded,
     expanded: expandedProp,
@@ -46,24 +44,7 @@ const Sidenav = forwardRef(
             pt: "md",
             transition: animations ? "all" : void 0,
             w: expanded ? "224" : "56",
-            children: /* @__PURE__ */ jsxs("nav", { "aria-label": "Main", ref, children: [
-              addonBefore,
-              /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  asChild: true,
-                  flex: "1",
-                  gap: "4",
-                  justifyContent: "start",
-                  overflowX: "hidden",
-                  overflowY: "auto",
-                  py: "xs",
-                  w: "full",
-                  children: /* @__PURE__ */ jsx("ul", { children })
-                }
-              ),
-              addonAfter && /* @__PURE__ */ jsx(Flex, { asChild: true, gap: "xs", mt: "auto", overflowX: "hidden", py: "xs", children: /* @__PURE__ */ jsx("ul", { children: addonAfter }) })
-            ] })
+            children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", ref, children })
           }
         ) })
       }