@optiaxiom/react 0.8.2 → 0.9.0

package/dist/packages/react/src/dialog-description/DialogDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-DBsIX9-a.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-BrEQiniF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_14kfu0q']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'e4ko7d']});
 
 export { description };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'end',px:'24',py:'20'}]});

package/dist/packages/react/src/dialog-form/DialogForm.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+const DialogForm = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        className,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "auto",
+        ...sprinkleProps,
+        children: /* @__PURE__ */ jsx("form", { ref, ...restProps, children })
+      }
+    );
+  }
+);
+DialogForm.displayName = "@optiaxiom/react/DialogForm";
+
+export { DialogForm };

package/dist/packages/react/src/dialog-header/DialogHeader-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-BfciLqUy.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var close = recipeRuntime({base:['_1chgoms']});
+
+export { close };

package/dist/packages/react/src/dialog-header/DialogHeader.js

@@ -1,11 +1,15 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { IconX } from '../icons/IconX.js';
+import { close } from './DialogHeader-css.js';
 
 const DialogHeader = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       Box,
       {
         display: "flex",
@@ -15,7 +19,20 @@ const DialogHeader = forwardRef(
         pb: "16",
         ref,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "subtle",
+              "aria-label": "Close",
+              asChild: true,
+              icon: /* @__PURE__ */ jsx(IconX, {}),
+              ...close(),
+              children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
+            }
+          ),
+          children
+        ]
       }
     );
   }

package/dist/packages/react/src/dialog-title/DialogTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-Bu0LwmUW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-BYTSNFYm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_16spgfe']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'p4nshq']});
 
 export { title };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-CFl9bQXD.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:['_1pfvy0r']});
+
+export { content };

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

@@ -4,10 +4,11 @@ import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js';
+import { content } from './DisclosureContent-css.js';
 
-const DisclosureContent = forwardRef(({ children, ...props }, ref) => {
+const DisclosureContent = forwardRef(({ children, className, ...props }, ref) => {
   useDisclosureContext("DisclosureContent");
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "8", pt: "0", children }) }) });
+  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: "8", 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-DKTSleIR.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-0YP3mnr3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-B2AxUXYe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1r8fwxq',start:'ekaqth'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1524a9']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1iqpti',start:'_12c8aso'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1197x96']});
 
 export { icon, trigger };

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

@@ -13,12 +13,19 @@ import '../sprinkles/sprinklesMerge.js';
 import { trigger, icon } from './DisclosureTrigger-css.js';
 
 const DisclosureTrigger = forwardRef(
-  ({ addonAfter, addonBefore, chevronPosition = "start", children, ...props }, ref) => {
+  ({
+    addonAfter,
+    addonBefore,
+    chevronPosition = "start",
+    children,
+    className,
+    ...props
+  }, ref) => {
     useDisclosureContext("DisclosureTrigger");
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const startIcon = addonBefore || chevronPosition === "start" && !addonAfter && /* @__PURE__ */ jsx(IconAngleRight, {});
     const endIcon = addonAfter || chevronPosition === "end" && /* @__PURE__ */ jsx(IconAngleDown, {});
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger(), ...sprinkleProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
       startIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: startIcon }),
       /* @__PURE__ */ jsx(Box, { flex: "1", px: "4", children }),
       endIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: endIcon })

package/dist/packages/react/src/downshift/useDelayedState.js

@@ -4,16 +4,16 @@ function useDelayedState(defaultValue, state) {
   const [value, setValue] = useState(defaultValue);
   const valueRef = useRef();
   useEffect(() => {
-    if (valueRef.current !== void 0) {
+    if (valueRef.current !== undefined) {
       setValue(valueRef.current);
-      valueRef.current = void 0;
+      valueRef.current = undefined;
     }
   }, [state]);
   return [
     value,
     (value2) => {
       if (state) {
-        valueRef.current = void 0;
+        valueRef.current = undefined;
         setValue(value2);
       } else {
         valueRef.current = value2;

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-COIV9W5_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-ByqBa1Sw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_1eahh9h']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_4kgoqj']});
 
 export { actions };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-CKt-20Xo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/drawer-content/DrawerContent.css.ts.vanilla-B-EGWoTb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'wbhi0k'],variants:{position:{bottom:[{borderT:'1'},'auv5im'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1tmqdca'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_3f85qm']}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1qj8i6u'],variants:{position:{bottom:[{borderT:'1'},'_1aex8bp'],left:[{borderR:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1yexs3q'],right:[{borderL:'1',h:'full',maxW:['full','lg'],w:['full','3/4']},'_1bm73cu']}}});
 
 export { content };

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

@@ -2,11 +2,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { useDrawerContext } from '../drawer-context/DrawerContext.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
@@ -20,7 +20,7 @@ const mapPositionToTransitionSide = {
 const DrawerContent = forwardRef(
   ({ children, position = "right", ...props }, ref) => {
     const { open } = useDrawerContext("DrawerContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
       /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
       /* @__PURE__ */ jsx(
         Transition,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-BJ9DFLKX.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-CB8-mW-z.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_148ohci']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1os6dff']});
 
 export { description };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-5j36Dxkc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-CbppEH-G.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'r17zcx']});
+var title = recipeRuntime({base:[{flex:'1'},'_1cyua2f']});
 
 export { title };

package/dist/packages/react/src/dropdown-menu-content/DropdownMenuContent.js

@@ -2,13 +2,24 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
+import { Box } from '../box/Box.js';
 import { useDropdownMenuContext } from '../dropdown-menu-context/DropdownMenuContext.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { Spinner } from '../spinner/Spinner.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
-const DropdownMenuContent = forwardRef(({ align = "start", children, sideOffset = 4, ...props }, ref) => {
+const DropdownMenuContent = forwardRef(({ align = "start", children, loading, ...props }, ref) => {
   const { open } = useDropdownMenuContext("DropdownMenuContent");
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset, children }) }) }) });
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(
+    MenuListbox,
+    {
+      asChild: true,
+      minW: loading ? "trigger" : undefined,
+      provider: "dropdown-menu",
+      ...props,
+      children: /* @__PURE__ */ jsx(RadixMenu.Content, { align, ref, sideOffset: 4, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children })
+    }
+  ) }) });
 });
 DropdownMenuContent.displayName = "@optiaxiom/react/DropdownMenuContent";
 

package/dist/packages/react/src/dropdown-menu-sub-content/DropdownMenuSubContent.js

@@ -2,21 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { useDropdownMenuSubContext } from '../dropdown-menu-sub-context/DropdownMenuSubContext.js';
 import { MenuListbox } from '../menu-listbox/MenuListbox.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 
-const DropdownMenuSubContent = forwardRef(({ alignOffset = -4, children, sideOffset = 0, ...props }, ref) => {
+const DropdownMenuSubContent = forwardRef(({ children, ...props }, ref) => {
   const { open } = useDropdownMenuSubContext("DropdownMenuSubContent");
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(
-    RadixMenu.SubContent,
-    {
-      alignOffset,
-      ref,
-      sideOffset,
-      children
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsx(RadixMenu.Portal, { forceMount: true, children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "dropdown-menu", ...props, children: /* @__PURE__ */ jsx(RadixMenu.SubContent, { alignOffset: -4, ref, sideOffset: 0, children }) }) }) });
 });
 DropdownMenuSubContent.displayName = "@optiaxiom/react/DropdownMenuSubContent";
 

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

@@ -1,6 +1,6 @@
 "use client";
 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 { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { FieldContext } from '../field-context/FieldContext.js';
@@ -41,11 +41,11 @@ const Field = forwardRef(
         FieldContext.Provider,
         {
           value: {
-            descriptionId: description ? descriptionId : void 0,
+            descriptionId: description ? descriptionId : undefined,
             error: !!error,
-            errorId: error ? errorId : void 0,
+            errorId: error ? errorId : undefined,
             inputId,
-            labelId: label ? labelId : void 0
+            labelId: label ? labelId : undefined
           },
           children
         }

package/dist/packages/react/src/field-context/FieldContext.js

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
 
-const FieldContext = createContext(void 0);
+const FieldContext = createContext(undefined);
 
 export { FieldContext };

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
 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 { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-B9a92xor.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-CpDqZsEX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_14j6iqu'});
+var mark = recipeRuntime({base:'jjk0rt'});
 
 export { mark };

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

@@ -1,21 +1,18 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Fragment } from 'react';
+import { forwardRef, Fragment } from 'react';
 import { Box } from '../box/Box.js';
 import { mark } from './Highlight-css.js';
 import { useHighlightedChunks } from './useHighlightedChunks.js';
 
-function Highlight({
-  children = (chunk) => chunk,
-  content,
-  query,
-  ...props
-}) {
-  const chunks = useHighlightedChunks(content || "", query);
-  return /* @__PURE__ */ jsx(Box, { ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsx(Fragment, { children: highlighted ? children(
-    /* @__PURE__ */ jsx(Box, { asChild: true, ...mark(), children: /* @__PURE__ */ jsx("mark", { children: chunk }) })
-  ) : chunk }, index)) });
-}
+const Highlight = forwardRef(
+  ({ children = (chunk) => chunk, content, query, ...props }, ref) => {
+    const chunks = useHighlightedChunks(content || "", query);
+    return /* @__PURE__ */ jsx(Box, { ref, ...props, children: chunks.map(({ chunk, highlighted }, index) => /* @__PURE__ */ jsx(Fragment, { children: highlighted ? children(
+      /* @__PURE__ */ jsx(Box, { asChild: true, ...mark(), children: /* @__PURE__ */ jsx("mark", { children: chunk }) })
+    ) : chunk }, index)) });
+  }
+);
 Highlight.displayName = "@optiaxiom/react/Highlight";
 
 export { Highlight };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-B3weDxFS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-yqyoXdGL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'_142mgqj',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'dodr6']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1k0om5h']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_190unt6'],variants:{offset:{false:'_1jyy332',true:{}},position:{'bottom-right':'_12ew5qz','top-right':'_1nh8eqi'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'_11gc524']});
+var badge = recipeRuntime({base:'s0expt',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'ri30ci']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1564ksv']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'x6rbai'],variants:{offset:{false:'_9vt5wx',true:{}},position:{'bottom-right':'_13pgvmx','top-right':'q5qxcz'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'bfkrx5']});
 
 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-DKTSleIR.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-C_M4a6Dd.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-7r8ut9Qk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'_1t8wppd',variants:{empty:{false:{},true:'_151aqv6'}}});
-var input = recipeRuntime({base:'_147e0iq'});
+var editor = recipeRuntime({base:'_125fmoe',variants:{empty:{false:{},true:'y3898q'}}});
+var input = recipeRuntime({base:'j3b0sz'});
 
 export { editor, input };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.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-DKTSleIR.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-C__QDDJj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CjU2Rdxm.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_100g3j',{bg:'transparent',flex:'auto',w:'full'},'_1tz96dq','_10frt7q'],variants:{size:{md:{},lg:{},xl:['q8x6br']}}});
+var control = recipeRuntime({base:['iuyhkq',{bg:'transparent',flex:'auto',w:'full'},'_16cm039','_138lpna'],variants:{size:{md:{},lg:{},xl:['_1e3q0yw']}}});
 
 export { control };

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

@@ -14,7 +14,7 @@ import '../sprinkles/sprinklesMerge.js';
 import { control } from './InputControl-css.js';
 
 const InputControl = forwardRef(
-  ({ asChild, children, error: errorProp, size = "md", ...props }, outerRef) => {
+  ({ asChild, children, className, error: errorProp, size = "md", ...props }, outerRef) => {
     const Comp = asChild ? Slot : "input";
     const disabled = props.disabled;
     const readOnly = props.readOnly;
@@ -27,14 +27,14 @@ const InputControl = forwardRef(
     return /* @__PURE__ */ jsx(
       Box,
       {
-        "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : void 0,
+        "aria-describedby": errorId || descriptionId ? clsx(errorId, descriptionId) : undefined,
         "aria-disabled": disabled,
-        "aria-invalid": error ? true : void 0,
+        "aria-invalid": error ? true : undefined,
         asChild: true,
-        "data-disabled": disabled ? "" : void 0,
-        "data-invalid": error ? "" : void 0,
-        "data-readonly": readOnly ? "" : void 0,
-        ...control({ size }),
+        "data-disabled": disabled ? "" : undefined,
+        "data-invalid": error ? "" : undefined,
+        "data-readonly": readOnly ? "" : undefined,
+        ...control({ size }, className),
         ...sprinkleProps,
         children: /* @__PURE__ */ jsx(Comp, { id: inputId, ref, ...restProps, children })
       }

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-C__QDDJj.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-C6lD1LYe.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BbzMTUzd.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CjU2Rdxm.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-Bn2BA_ZM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_46r9e9']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_2z60i2']});
 
 export { root };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DAhSs3L3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-CA_kba1R.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:'_1a6hhim',variants:{variant:{outline:'m0gnl9',subtle:{}}}});
+var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_1tq5h90'],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:'e1jixi',variants:{variant:{outline:'_1rsd830',subtle:{}}}});
 
 export { kbd, keys };

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Code } from '../code/Code.js';
+import { Box } from '../box/Box.js';
 import { kbd, keys } from './Kbd-css.js';
 
 const mapKeyToCode = {
@@ -21,7 +21,7 @@ const mapKeyToCode = {
 };
 const Kbd = forwardRef(
   ({ children, className, keys: keys$1, variant = "outline", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Code, { asChild: true, ...kbd({ variant }, className), ...props, children: /* @__PURE__ */ jsxs("kbd", { ref, children: [
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...kbd({ variant }, className), ...props, children: /* @__PURE__ */ jsxs("kbd", { ref, children: [
       keys$1 && (Array.isArray(keys$1) ? keys$1 : [keys$1]).map((key) => /* @__PURE__ */ jsx("abbr", { title: key, ...keys({ variant }), children: mapKeyToCode[key] }, key)),
       children
     ] }) });

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._12gtxoh';
-var reset = 'optiaxiom._1tjdkji';
+var components = 'optiaxiom._1lcqm4m';
+var reset = 'optiaxiom._1bcsvj8';
 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-DKTSleIR.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-Cak55t6b.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DdXJhhdi.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-DkFNs5hx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_9hlqgo']});
-var link = recipeRuntime({base:['_1osykz9'],variants:{appearance:{'default':'_1fjpd0h',inverse:'_15of2q4',subtle:'n6ewnx'},overlay:{false:{},true:'_25lp5x'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'nyjylt']});
+var link = recipeRuntime({base:['_1tdt4wh'],variants:{appearance:{'default':'txjd8f',inverse:'c1vsyt',subtle:'d6ng0i'},overlay:{false:{},true:'_1h796r2'}}});
 
 export { icon, link };

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

@@ -35,13 +35,13 @@ const Link = forwardRef(
           Comp,
           {
             "aria-disabled": disabled,
-            "data-disabled": disabled ? "" : void 0,
+            "data-disabled": disabled ? "" : undefined,
             href,
             ref,
             ...external && { rel: "noopener noreferrer", target: "_blank" },
             ...restProps,
             ...disabled && {
-              href: void 0,
+              href: undefined,
               role: "link"
             },
             children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { 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 '../../../../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 { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { ListboxGroupContextProvider } from '../listbox-group-context/ListboxGroupContext.js';

package/dist/packages/react/src/listbox-group-context/ListboxGroupContext.js

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