@optiaxiom/react 0.7.7 → 0.8.0

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-wEvUFA1y.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-BzDsbaHE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-UNer3vRC.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'_1091plh']});
+var title = recipeRuntime({base:[{flex:'1'},'my2fag']});
 
 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 { useId } from '@reach/auto-id';
+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,
         {
@@ -91,7 +50,7 @@ const Field = forwardRef(
           children
         }
       ),
-      error && /* @__PURE__ */ jsxs(
+      error && error !== true && /* @__PURE__ */ jsxs(
         Flex,
         {
           alignItems: "start",

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-wEvUFA1y.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-BXFWF6EY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-BRiToqte.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1qn5uge'});
+var mark = recipeRuntime({base:'s4sq1q'});
 
 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-wEvUFA1y.css';
-import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-BUpOuujK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/hover-card-content/HoverCardContent.css.ts.vanilla-AsCBxmqx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',p:'sm'},'_9evkxy']});
+var content = recipeRuntime({base:[{display:'flex',flexDirection:'column',fontSize:'md',gap:'2',maxW:'xs',p:'12'},'lzk5yu']});
 
 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/icons/{IconCircleCheckFilled.js → IconCircleCheckSolid.js}

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { withIcon } from './withIcon.js';
 
-const IconCircleCheckFilled = withIcon(
+const IconCircleCheckSolid = withIcon(
   {
-    name: "IconCircleCheckFilled",
+    name: "IconCircleCheckSolid",
     viewBox: "0 0 512 512"
   },
   // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
@@ -17,4 +17,4 @@ const IconCircleCheckFilled = withIcon(
   )
 );
 
-export { IconCircleCheckFilled };
+export { IconCircleCheckSolid };

package/dist/packages/react/src/icons/{IconCircleExclamationFilled.js → IconCircleExclamationSolid.js}

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { withIcon } from './withIcon.js';
 
-const IconCircleExclamationFilled = withIcon(
+const IconCircleExclamationSolid = withIcon(
   {
-    name: "IconCircleExclamationFilled",
+    name: "IconCircleExclamationSolid",
     viewBox: "0 0 512 512"
   },
   // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
@@ -17,4 +17,4 @@ const IconCircleExclamationFilled = withIcon(
   )
 );
 
-export { IconCircleExclamationFilled };
+export { IconCircleExclamationSolid };

package/dist/packages/react/src/icons/{IconCircleInfoFilled.js → IconCircleInfoSolid.js}

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { withIcon } from './withIcon.js';
 
-const IconCircleInfoFilled = withIcon(
+const IconCircleInfoSolid = withIcon(
   {
-    name: "IconCircleInfoFilled",
+    name: "IconCircleInfoSolid",
     viewBox: "0 0 512 512"
   },
   // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
@@ -17,4 +17,4 @@ const IconCircleInfoFilled = withIcon(
   )
 );
 
-export { IconCircleInfoFilled };
+export { IconCircleInfoSolid };

package/dist/packages/react/src/icons/{IconTriangleExclamationFilled.js → IconTriangleExclamationSolid.js}

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { withIcon } from './withIcon.js';
 
-const IconTriangleExclamationFilled = withIcon(
+const IconTriangleExclamationSolid = withIcon(
   {
-    name: "IconTriangleExclamationFilled",
+    name: "IconTriangleExclamationSolid",
     viewBox: "0 0 512 512"
   },
   // <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
@@ -17,4 +17,4 @@ const IconTriangleExclamationFilled = withIcon(
   )
 );
 
-export { IconTriangleExclamationFilled };
+export { IconTriangleExclamationSolid };

package/dist/packages/react/src/icons/IconUserSolid.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconUserSolid = withIcon(
+  {
+    name: "IconUserSolid",
+    viewBox: "0 0 448 512"
+  },
+  // <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconUserSolid };

package/dist/packages/react/src/icons/IconUsersSolid.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconUsersSolid = withIcon(
+  {
+    name: "IconUsersSolid",
+    viewBox: "0 0 640 512"
+  },
+  // <!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0L21.3 320C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3l-213.3 0zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352l117.3 0C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7l-330.7 0c-14.7 0-26.7-11.9-26.7-26.7z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconUsersSolid };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-1vXu38rT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-DCsHFPig.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_1z0ouo2',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'6'},'cuxgjk']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_137zygk']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',z:'10'},'pcok8q'],variants:{offset:{false:'_154wjt8',true:{}},position:{'bottom-right':'zoze4i','top-right':'_1dcaa28'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1hye2ha']});
+var badge = recipeRuntime({base:'q0xwvi',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'cfgs9g']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1t7l0ok']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_82q500'],variants:{offset:{false:'_1w1zyca',true:{}},position:{'bottom-right':'_3i8eyt','top-right':'soyrv9'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_9cqo33']});
 
 export { badge, floating, indicator };

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

@@ -1,6 +1,5 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Badge } from '../badge/Badge.js';
 import { Box } from '../box/Box.js';
@@ -11,6 +10,7 @@ const Indicator = forwardRef(
   ({
     asChild,
     children,
+    className,
     content,
     disabled,
     intent,
@@ -20,8 +20,8 @@ const Indicator = forwardRef(
     variant,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs(Flex, { ...indicator(), children: [
-      /* @__PURE__ */ jsx(Slot, { ref, ...props, children }),
+    return /* @__PURE__ */ jsxs(Flex, { ref, ...indicator({}, className), ...props, children: [
+      children,
       !disabled && /* @__PURE__ */ jsxs(Box, { ...floating({ offset, position }), children: [
         ping && /* @__PURE__ */ jsx(
           Badge,

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-Dp_ef77u.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-COlRBMzI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'d0hliv',variants:{empty:{false:{},true:'_4xhhs2'}}});
-var input = recipeRuntime({base:'m85bii'});
+var editor = recipeRuntime({base:'_2tdhgb',variants:{empty:{false:{},true:'_10mjrdy'}}});
+var input = recipeRuntime({base:'qi0iwu'});
 
 export { editor, input };

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

@@ -28,7 +28,7 @@ const InlineInput = forwardRef(
         return;
       }
       const clippedValue = multiline || !value?.includes("\n") ? value : value?.slice(0, value.indexOf("\n"));
-      if (editorRef.current.textContent !== clippedValue) {
+      if (getText(editorRef.current) !== clippedValue) {
         if (document.activeElement === editorRef.current) {
           const selection = window.getSelection();
           if (!selection) {
@@ -37,7 +37,7 @@ const InlineInput = forwardRef(
           selection.getRangeAt(0).selectNodeContents(editorRef.current);
           document.execCommand("insertHTML", false, clippedValue);
         } else {
-          editorRef.current.textContent = clippedValue ?? null;
+          editorRef.current.innerText = clippedValue ?? "null";
         }
       }
     }, [multiline, value]);
@@ -49,7 +49,7 @@ const InlineInput = forwardRef(
         contentEditable: !disabled && "plaintext-only",
         "data-placeholder": placeholder ?? label,
         onInput: (event) => {
-          setValue(event.currentTarget.textContent ?? "");
+          setValue(getText(event.currentTarget));
         },
         onKeyDown: (event) => {
           if (!multiline && event.key === "Enter") {
@@ -62,7 +62,7 @@ const InlineInput = forwardRef(
             event.preventDefault();
             const clippedValue = value2.slice(0, value2.indexOf("\n"));
             document.execCommand("insertHTML", false, clippedValue);
-            setValue(event.currentTarget.textContent ?? "");
+            setValue(getText(event.currentTarget));
           }
         },
         ref: editorRef,
@@ -75,5 +75,12 @@ const InlineInput = forwardRef(
   }
 );
 InlineInput.displayName = "@optiaxiom/react/InlineInput";
+function getText(element) {
+  const text = element.innerText;
+  if (text.endsWith("\n")) {
+    return text.slice(0, -1);
+  }
+  return text;
+}
 
 export { InlineInput };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.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-wEvUFA1y.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-BRP-9Ti9.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-BZed36O0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_1ucwy3t',{bg:'transparent',flex:'auto',w:'full'},'_1w67d6k','n7gwvk'],variants:{size:{md:{},lg:{},'2xl':['gco5i8']}}});
+var control = recipeRuntime({base:['_3vsb5j',{bg:'transparent',flex:'auto',w:'full'},'utafhq','_2367ov'],variants:{size:{md:{},lg:{},xl:['_1j0o6m4']}}});
 
 export { control };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DPVF9K5Q.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-BRP-9Ti9.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-C2V3NFOQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DQf8X4KK.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-BZed36O0.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-BaFX-Fw7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'vm87va']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'s470i2']});
 
 export { root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-wEvUFA1y.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-BuJHYVlI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-BEpVelEW.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:'_1995ovd',variants:{variant:{outline:'_1ydi030',subtle:{}}}});
+var keys = recipeRuntime({base:'_1t08nns',variants:{variant:{outline:'_2w2mlk',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-wEvUFA1y.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._12pgibx';
-var reset = 'optiaxiom._1y14oqf';
+var components = 'optiaxiom.nb83ax';
+var reset = 'optiaxiom._3kmspc';
 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-wEvUFA1y.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-CYGVnxkD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-CfDPGQ1C.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'nosh9w']});
-var link = recipeRuntime({base:['_1ahx50t'],variants:{appearance:{'default':'_1ye253o',inverse:'_1elvb14',subtle:'zzh4ty'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'qfzbeb']});
+var link = recipeRuntime({base:['_1p06ffr'],variants:{appearance:{'default':'_73bnpr',inverse:'_175hlky',subtle:'_13ep35c'}}});
 
 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-group/ListboxGroup.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId } from '@reach/auto-id';
+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 { ListboxGroupContextProvider } from '../listbox-group-context/ListboxGroupContext.js';