@optiaxiom/react 0.7.8 → 0.8.1

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-DQRhP5hN.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-84_ku30Q.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1bfbbxc']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_9zu8hj']});
 
 export { description };

package/dist/packages/react/src/drawer-footer/DrawerFooter.js

@@ -10,9 +10,9 @@ const DrawerFooter = forwardRef(
       {
         borderT: "1",
         flexDirection: "row",
-        gap: "md",
+        gap: "16",
         justifyContent: "end",
-        p: "md",
+        p: "16",
         ref,
         ...props,
         children

package/dist/packages/react/src/drawer-header/DrawerHeader.js

@@ -10,9 +10,9 @@ const DrawerHeader = forwardRef(
       {
         display: "flex",
         flexWrap: "wrap",
-        gap: "xs",
-        p: "lg",
-        pb: "md",
+        gap: "8",
+        p: "24",
+        pb: "16",
         ref,
         ...props,
         children

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-DpGA96MF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-B0Gvt2zd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'_1v8245w']});
+var title = recipeRuntime({base:[{flex:'1'},'faxamk']});
 
 export { title };

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

@@ -6,18 +6,7 @@ import { Box } from '../box/Box.js';
 
 const DropdownMenuLabel = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        color: "fg.tertiary",
-        fontSize: "sm",
-        p: "xs",
-        ref,
-        ...props,
-        children: /* @__PURE__ */ jsx(RadixMenu.Label, { children })
-      }
-    );
+    return /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", fontSize: "sm", p: "8", ref, ...props, children: /* @__PURE__ */ jsx(RadixMenu.Label, { children }) });
   }
 );
 DropdownMenuLabel.displayName = "@optiaxiom/react/DropdownMenuLabel";

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

@@ -1,19 +1,12 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as RadixLabel from '@radix-ui/react-label';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { Button } from '../button/Button.js';
 import { FieldContext } from '../field-context/FieldContext.js';
+import { FieldLabel } from '../field-label/FieldLabel.js';
 import { Flex } from '../flex/Flex.js';
-import { HoverCard } from '../hover-card/HoverCard.js';
-import { HoverCardContent } from '../hover-card-content/HoverCardContent.js';
-import { HoverCardTrigger } from '../hover-card-trigger/HoverCardTrigger.js';
-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';
@@ -34,50 +27,16 @@ const Field = forwardRef(
     const errorId = useId();
     const labelId = useId();
     return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "4", ref, ...props, children: [
-      label && /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "4", children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            alignItems: "center",
-            asChild: true,
-            color: "fg.secondary",
-            display: "flex",
-            fontWeight: "400",
-            gap: "2",
-            children: /* @__PURE__ */ jsxs(RadixLabel.Root, { htmlFor: inputId, id: labelId, children: [
-              label,
-              required && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    "aria-hidden": "true",
-                    asChild: true,
-                    color: "fg.error",
-                    fontWeight: "400",
-                    children: /* @__PURE__ */ jsx("span", { children: "*" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(VisuallyHidden, { children: "Required" })
-              ] })
-            ] })
-          }
-        ),
-        info && /* @__PURE__ */ jsxs(HoverCard, { keepOpenOnActivation: true, children: [
-          /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-label": "Information hover",
-              border: "0",
-              color: "fg.secondary",
-              h: "16",
-              icon: /* @__PURE__ */ jsx(IconCircleQuestion, {}),
-              p: "0",
-              w: "16"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(HoverCardContent, { side: "top", sideOffset: 5, children: info })
-        ] })
-      ] }),
+      label && /* @__PURE__ */ jsx(
+        FieldLabel,
+        {
+          info,
+          inputId,
+          labelId,
+          required,
+          children: label
+        }
+      ),
       /* @__PURE__ */ jsx(
         FieldContext.Provider,
         {

package/dist/packages/react/src/field-label/FieldLabel.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as RadixLabel from '@radix-ui/react-label';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { Flex } from '../flex/Flex.js';
+import { HoverCard } from '../hover-card/HoverCard.js';
+import { HoverCardContent } from '../hover-card-content/HoverCardContent.js';
+import { HoverCardTrigger } from '../hover-card-trigger/HoverCardTrigger.js';
+import { IconCircleQuestion } from '../icons/IconCircleQuestion.js';
+import { Text } from '../text/Text.js';
+
+const FieldLabel = forwardRef(
+  ({
+    children,
+    info,
+    inputId: inputIdProp,
+    labelId: labelIdProp,
+    required,
+    ...props
+  }, ref) => {
+    const inputId = useId(inputIdProp);
+    const labelId = useId(labelIdProp);
+    return /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "4", ref, ...props, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          alignItems: "center",
+          asChild: true,
+          color: "fg.secondary",
+          display: "flex",
+          fontWeight: "400",
+          gap: "2",
+          children: /* @__PURE__ */ jsxs(RadixLabel.Root, { htmlFor: inputId, id: labelId, children: [
+            children,
+            required && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  "aria-hidden": "true",
+                  asChild: true,
+                  color: "fg.error",
+                  fontWeight: "400",
+                  children: /* @__PURE__ */ jsx("span", { children: "*" })
+                }
+              ),
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: "Required" })
+            ] })
+          ] })
+        }
+      ),
+      info && /* @__PURE__ */ jsxs(HoverCard, { keepOpenOnActivation: true, children: [
+        /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Information hover",
+            border: "0",
+            color: "fg.secondary",
+            h: "2xs",
+            icon: /* @__PURE__ */ jsx(IconCircleQuestion, {}),
+            p: "0",
+            w: "2xs"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(HoverCardContent, { side: "top", sideOffset: 5, children: info })
+      ] })
+    ] });
+  }
+);
+FieldLabel.displayName = "@optiaxiom/react/FieldLabel";
+
+export { FieldLabel };

package/dist/packages/react/src/flex/Flex.js

@@ -21,7 +21,7 @@ const Flex = forwardRef(
   ({
     alignItems,
     flexDirection = "column",
-    gap = "md",
+    gap = "16",
     justifyContent,
     ...props
   }, ref) => {

package/dist/packages/react/src/grid/Grid.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 
 const Grid = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Box, { display: "grid", gap: "md", gridTemplateColumns: "1", ref, ...props });
+  return /* @__PURE__ */ jsx(Box, { display: "grid", gap: "16", gridTemplateColumns: "1", ref, ...props });
 });
 Grid.displayName = "@optiaxiom/react/Grid";
 

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-lG8DRS9Z.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-Dj_t0SVY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1ua4f67'});
+var mark = recipeRuntime({base:'fbh2gj'});
 
 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-BHmPmZ47.css';
-import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-Dfr38yzi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-CfFcIchu.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm'},'_174oo2z']});
+var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',maxW:'xs',p:'12'},'_1hwgrqg']});
 
 export { content };

package/dist/packages/react/src/icon/Icon.js

@@ -5,7 +5,7 @@ import { Box } from '../box/Box.js';
 
 const Icon = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { h: "16", ref, w: "auto", ...props, children });
+    return /* @__PURE__ */ jsx(Box, { h: "2xs", ref, w: "auto", ...props, children });
   }
 );
 Icon.displayName = "@optiaxiom/react/Icon";

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-H6EPvfdG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-0CCBLcJo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'bcf6ae',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'gz7wa7']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'vil9lk']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'vlqpxs'],variants:{offset:{false:'z1cj0q',true:{}},position:{'bottom-right':'_1se107j','top-right':'d6sed5'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1rvq3dk']});
+var badge = recipeRuntime({base:'_6kjr2u',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_130yz1g']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'c5uput']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_3jf64z'],variants:{offset:{false:'nfth7h',true:{}},position:{'bottom-right':'_1jycj44','top-right':'_1rfwv8q'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'sjywuc']});
 
 export { badge, floating, indicator };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-BIlQgs5j.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DNsMpw9g.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'aoptuz',variants:{empty:{false:{},true:'aetgtn'}}});
-var input = recipeRuntime({base:'l0m2tr'});
+var editor = recipeRuntime({base:'_5h5fi5',variants:{empty:{false:{},true:'i08j0'}}});
+var input = recipeRuntime({base:'_1mo88jg'});
 
 export { editor, input };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 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'}}}});
+var input = recipeRuntime({variants:{appearance:{'default':{textAlign:'start'},number:{textAlign:'end'}},size:{md:{py:'4'},lg:{py:'8'},xl:{py:'12'}}}});
+var root = recipeRuntime({variants:{size:{md:{gap:'8',px:'8'},lg:{gap:'8',px:'8'},xl:{gap:'12',px:'12'}}}});
 
 export { addon, input, root };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CNxxA7Sx.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DM573qEj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['wbjn5t',{bg:'transparent',flex:'auto',w:'full'},'t4czqr','ncbpp'],variants:{size:{md:{},lg:{},'2xl':['_44bzdq']}}});
+var control = recipeRuntime({base:['nl8aub',{bg:'transparent',flex:'auto',w:'full'},'_1chqvqj','_19wr919'],variants:{size:{md:{},lg:{},xl:['_7q38up']}}});
 
 export { control };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-ulBg-QS9.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CNxxA7Sx.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-BjmkbICb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BYiv5uy5.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-DM573qEj.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-C18fyIEl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'wxh7ke']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'qhwhum']});
 
 export { root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-nzgUGyoo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DiiuMl2I.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:'_15c4pdw',variants:{variant:{outline:'_1mv5xxa',subtle:{}}}});
+var keys = recipeRuntime({base:'_11rqh9c',variants:{variant:{outline:'np97jf',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-BHmPmZ47.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._1my0jc';
-var reset = 'optiaxiom.uk6sll';
+var components = 'optiaxiom._1no99yr';
+var reset = 'optiaxiom._1qc7hop';
 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-BHmPmZ47.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-BOE0nNWg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-D97z3o__.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'uk6ufe']});
-var link = recipeRuntime({base:['_166to25'],variants:{appearance:{'default':'_1ligaw0',inverse:'at60od',subtle:'yn086d'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1bs3fnw']});
+var link = recipeRuntime({base:['_1lp5822'],variants:{appearance:{'default':'_83x6dq',inverse:'r2rajd',subtle:'_1ppd82y'}}});
 
 export { icon, link };

package/dist/packages/react/src/listbox-checkbox-item/ListboxCheckboxItem.js

@@ -10,7 +10,7 @@ const ListboxCheckboxItem = forwardRef(({ addonBefore, icon, ...props }, ref) =>
   return /* @__PURE__ */ jsx(
     ListboxItem,
     {
-      addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
+      addonBefore: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {

package/dist/packages/react/src/listbox-empty/ListboxEmpty.js

@@ -13,7 +13,7 @@ const ListboxEmpty = forwardRef(
         display: "flex",
         flexDirection: "column",
         fontSize: "md",
-        p: "md",
+        p: "16",
         ref,
         ...props,
         children: children || "No options"

package/dist/packages/react/src/listbox-footer/ListboxFooter.js

@@ -11,9 +11,9 @@ const ListboxFooter = forwardRef(
         borderColor: "border.secondary",
         borderT: "1",
         flexDirection: "row",
-        gap: "md",
+        gap: "16",
         justifyContent: "space-between",
-        p: "sm",
+        p: "12",
         ref,
         ...props,
         children

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-DPHlZNqv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-C5c9qoKI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'_1urj8j']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'xs',p:'xs',rounded:'sm',transition:'colors'},'_1onptp6'],variants:{intent:{danger:'_1tr8peh',neutral:'_74rcb2'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'xs'},'_1myvphd']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'ctnut7']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'g07y79'],variants:{intent:{danger:'d50mrn',neutral:'lake4s'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'qy92ot']});
 
 export { description, item, title };

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

@@ -42,7 +42,7 @@ const ListboxItem = forwardRef(
             /* @__PURE__ */ jsx(Flex, { 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) })
+          addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "8", children: fallbackSpan(addonAfter) })
         ] })) })
       }
     );

package/dist/packages/react/src/listbox-item-indicator/ListboxItemIndicator.js

@@ -10,7 +10,7 @@ import '../sprinkles/sprinklesMerge.js';
 const ListboxItemIndicator = forwardRef(({ active, children, ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
   if (!active) {
-    return /* @__PURE__ */ jsx(Box, { asChild: true, h: "0", w: "20", ...sprinkleProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
+    return /* @__PURE__ */ jsx(Box, { asChild: true, h: "0", w: "xs", ...sprinkleProps, children: /* @__PURE__ */ jsx("svg", { ref, ...restProps }) });
   }
   return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
 });

package/dist/packages/react/src/listbox-label/ListboxLabel.js

@@ -7,18 +7,7 @@ import { useListboxGroupContext } from '../listbox-group-context/ListboxGroupCon
 const ListboxLabel = forwardRef(
   ({ children, ...props }, ref) => {
     const { id } = useListboxGroupContext("ListboxLabel");
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        color: "fg.tertiary",
-        fontSize: "sm",
-        id,
-        p: "xs",
-        ref,
-        ...props,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", fontSize: "sm", id, p: "8", ref, ...props, children });
   }
 );
 ListboxLabel.displayName = "@optiaxiom/react/ListboxLabel";

package/dist/packages/react/src/listbox-radio-item/ListboxRadioItem.js

@@ -9,7 +9,7 @@ const ListboxRadioItem = forwardRef(({ addonAfter, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ListboxItem,
     {
-      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "xs", children: [
+      addonAfter: /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "8", children: [
         addonAfter,
         /* @__PURE__ */ jsx(ListboxItemIndicator, { active: Boolean(props["aria-selected"]) })
       ] }),

package/dist/packages/react/src/listbox-separator/ListboxSeparator.js

@@ -3,17 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Separator } from '../separator/Separator.js';
 
-const ListboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(
-  Separator,
-  {
-    bg: "border.secondary",
-    flex: "none",
-    mx: "8",
-    my: "4",
-    ref,
-    ...props
-  }
-));
+const ListboxSeparator = forwardRef((props, ref) => /* @__PURE__ */ jsx(Separator, { bg: "bg.tertiary", flex: "none", mx: "8", my: "4", ref, ...props }));
 ListboxSeparator.displayName = "@optiaxiom/react/ListboxSeparator";
 
 export { ListboxSeparator };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-CzRniOsZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-BMfTjUuG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_1c3nb88'],variants:{minW:{'0':{},trigger:'_1lho5op'},provider:{'dropdown-menu':'_1l8d0cb',popover:'rx2j09',popper:'_1dcrunq'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'ir5v3d'],variants:{minW:{'0':{},trigger:'_595kqk'},provider:{'dropdown-menu':'igz5d5',popover:'_1jgqvbi',popper:'we31z5'}}});
 
 export { listbox };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-D6HSizYZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-CeVy3QBJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'s15j55'});
-var cursor = recipeRuntime({base:[{z:'10'},'_1nqfv4w'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_1m9xp2h']});
+var button = recipeRuntime({base:'_12t0w0p'});
+var cursor = recipeRuntime({base:[{z:'10'},'_1ldqfi1'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_149a92t']});
 
 export { button, cursor, list };

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

@@ -1,6 +1,6 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.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'}}}});
+var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},drawer:{},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'}}}});
 
 export { paper };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/pill/Pill.css.ts.vanilla-BK0MvIm3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/pill/Pill.css.ts.vanilla-BvPwO-kb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'_15g5vxt'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
+var pill = recipeRuntime({base:[{bg:'bg.secondary',border:'0',fontSize:'sm',rounded:'md'},'ac4j4y'],variants:{size:{md:{h:'xs'},lg:{h:'sm'}}}});
 
 export { pill };

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

@@ -18,7 +18,7 @@ const PopoverContent = forwardRef(
       {
         asChild: true,
         onBlur: onReactSelectInputBlur,
-        p: "sm",
+        p: "12",
         provider: "popover",
         ...props,
         children: /* @__PURE__ */ jsxs(

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

@@ -1,6 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CXVxxEDz.css';
+import './../../../../assets/src/progress/Progress.css.ts.vanilla-CMLkfTv3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var indicator = recipeRuntime({base:[{h:'full',transition:'all'}],variants:{intent:{danger:{bg:'bg.error'},primary:{bg:'bg.accent'},success:{bg:'bg.success'}}}});
+var progress = recipeRuntime({base:[{bg:'bg.tertiary',overflow:'hidden',rounded:'full'},'_1yxgpg2']});
 
-export { indicator };
+export { indicator, progress };