@optiaxiom/react 0.4.1 → 0.5.0

package/dist/src/alert/Alert-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'xs',justifyContent:'space-between',p:'sm',pr:'md',rounded:'md'}],variants:{colorScheme:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
-var icon = recipeRuntime({base:[{mt:'4'}],variants:{colorScheme:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
+var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'xs',justifyContent:'space-between',p:'sm',pr:'md',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
+var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { alert, icon };

package/dist/src/alert/Alert.js

@@ -12,7 +12,7 @@ import { IconTriangleExclamationFilled } from '../icons/IconTriangleExclamationF
 import { IconX } from '../icons/IconX.js';
 import { alert, icon } from './Alert-css.js';
 
-const iconMap = {
+const mapIntentToIcon = {
   danger: IconCircleExclamationFilled,
   information: IconCircleInfoFilled,
   neutral: IconCircleInfoFilled,
@@ -20,7 +20,7 @@ const iconMap = {
   warning: IconTriangleExclamationFilled
 };
 const Alert = forwardRef(
-  ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
+  ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
     const descriptionId = useId();
     const labelId = useId();
     return /* @__PURE__ */ jsx(AlertContextProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxs(
@@ -30,10 +30,10 @@ const Alert = forwardRef(
         "aria-labelledby": labelId,
         ref,
         role: "alert",
-        ...alert({ colorScheme }, className),
+        ...alert({ intent }, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
           /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
           !!onClose && /* @__PURE__ */ jsx(
             Button,

package/dist/src/alert-dialog-action/AlertDialogAction.js

@@ -2,13 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
-const AlertDialogAction = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance: "danger", ...restProps, children }) });
+const AlertDialogAction = forwardRef(({ appearance = "danger", asChild, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
 });
 AlertDialogAction.displayName = "@optiaxiom/react/AlertDialogAction";
 

package/dist/src/alert-dialog-cancel/AlertDialogCancel.js

@@ -2,13 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
-const AlertDialogCancel = forwardRef(({ asChild, children = "Cancel", ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance: "subtle", ...restProps, children }) });
+const AlertDialogCancel = forwardRef(({ appearance = "subtle", asChild, children = "Cancel", ...props }, ref) => {
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
 });
 AlertDialogCancel.displayName = "@optiaxiom/react/AlertDialogCancel";
 

package/dist/src/alert-dialog-content/AlertDialogContent-css.js

@@ -1,8 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-BjsLbBg2.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-BfmlokwX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_1i0a9f5'],variants:{size:{sm:'jya1qw',md:'_1594x77',lg:'_14kfg6p'}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'ysrx6o']});
+var container = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'q439sg']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md'},'n0a0oe'],variants:{size:{sm:'_1jmu7qj',md:'_1tzske6',lg:'pb9ltf'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1c5omd8']});
 
-export { content, overlay };
+export { container, content, overlay };

package/dist/src/alert-dialog-content/AlertDialogContent.js

@@ -4,14 +4,20 @@ import { forwardRef } from 'react';
 import { useAlertDialogContext, AlertDialogContextProvider } from '../alert-dialog-context/AlertDialogContext.js';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
 import { Transition } from '../transition/Transition.js';
-import { overlay, content } from './AlertDialogContent-css.js';
+import { overlay, container, content } from './AlertDialogContent-css.js';
 
 const AlertDialogContent = forwardRef(({ children, size = "sm", ...props }, ref) => {
   const { open } = useAlertDialogContext("AlertDialogContent");
   return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixAlertDialog.Portal, { forceMount: true, children: [
     /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Box, { asChild: true, ...overlay(), children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {}) }) }),
-    /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsx(RadixAlertDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(AlertDialogContextProvider, { open, children }) }) }) })
+    /* @__PURE__ */ jsxs(Flex, { ...container(), children: [
+      /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: "fade", children: /* @__PURE__ */ jsx(Box, { asChild: true, ...content({ size }), children: /* @__PURE__ */ jsx(RadixAlertDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(AlertDialogContextProvider, { open, children }) }) }) }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" })
+    ] })
   ] }) });
 });
 AlertDialogContent.displayName = "@optiaxiom/react/AlertDialogContent";

package/dist/src/alert-dialog-description/AlertDialogDescription-css.js

@@ -1,4 +1,4 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',px:'24',py:'16'}]});

package/dist/src/alert-dialog-footer/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-Dkx8GuIM.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-BDRTGojK.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_16pfkr']});
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_1e9ksp0']});
 
 export { footer };

package/dist/src/alert-dialog-trigger/AlertDialogTrigger.js

@@ -2,13 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const AlertDialogTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Trigger, { asChild: true, ref, ...sprinkleProps, children: asChild ? children : /* @__PURE__ */ jsx(Button, { ...restProps, children }) });
+  return /* @__PURE__ */ jsx(RadixAlertDialog.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
 });
 AlertDialogTrigger.displayName = "@optiaxiom/react/AlertDialogTrigger";
 

package/dist/src/autocomplete-content/AutocompleteContent-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-D2q7OmFt.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-CNiZbeAp.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{p:'4'},'xqgcm5']});
+var content = recipeRuntime({base:[{p:'4'},'_1suko12']});
 
 export { content };

package/dist/src/autocomplete-empty/AutocompleteEmpty.js

@@ -2,12 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const AutocompleteEmpty = forwardRef(({ children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
   const { items } = useAutocompleteContext("AutocompleteEmpty");
   if (items.length > 0) {
     return null;
@@ -15,14 +11,15 @@ const AutocompleteEmpty = forwardRef(({ children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      asChild: true,
+      alignItems: "center",
       color: "fg.disabled",
       display: "flex",
+      flexDirection: "column",
       fontSize: "md",
-      justifyContent: "center",
       p: "md",
-      ...sprinkleProps,
-      children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children: children || "No options" })
+      ref,
+      ...props,
+      children: children || "No options"
     }
   );
 });

package/dist/src/autocomplete-trigger/AutocompleteTrigger.js

@@ -25,7 +25,6 @@ const AutocompleteTrigger = forwardRef(({ ...props }, ref) => {
           alignSelf: "stretch",
           flexDirection: "row",
           gap: "0",
-          mr: "0",
           children: [
             downshift.selectedItem && /* @__PURE__ */ jsx(Flex, { onClick: () => downshift.reset(), w: "32", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconX, { "aria-hidden": true, focusable: false }) }) }),
             /* @__PURE__ */ jsx(Separator, { my: "xs", orientation: "vertical" }),
@@ -33,6 +32,7 @@ const AutocompleteTrigger = forwardRef(({ ...props }, ref) => {
           ]
         }
       ),
+      pr: "0",
       ...sprinkleProps,
       ...downshift.getInputProps({
         ...restProps,

package/dist/src/avatar/Avatar-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-CBiq1NLv.css';
-import './../../assets/src/avatar/Avatar.css.ts.vanilla-D7MGa7gZ.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/avatar/Avatar.css.ts.vanilla-DIWg9fd0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1szi2lk'],variants:{colorScheme:{blue:{bg:'avatar.bg.blue',color:'avatar.fg.blue'},cyan:{bg:'avatar.bg.cyan',color:'avatar.fg.cyan'},green:{bg:'avatar.bg.green',color:'avatar.fg.green'},magenta:{bg:'avatar.bg.magenta',color:'avatar.fg.magenta'},neutral:{bg:'bg.secondary',color:'fg.default'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'},red:{bg:'bg.error.subtle',color:'fg.error.strong'},yellow:{bg:'avatar.bg.yellow',color:'avatar.fg.yellow'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_1akvnwz'],sm:[{fontSize:'xs',size:'sm'},'_1j90cq5'],md:[{fontSize:'md',size:'md'},'_1nj1kkj'],lg:[{fontSize:'lg',size:'lg'},'_1a0lrgy'],xl:[{fontSize:'2xl',size:'xl'},'_1bgtg5l'],'5xl':[{fontSize:'4xl',size:'5xl'},'_7aupqs']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden'},'_1750v50'],variants:{colorScheme:{blue:{bg:'avatar.bg.blue',color:'avatar.fg.blue'},cyan:{bg:'avatar.bg.cyan',color:'avatar.fg.cyan'},green:{bg:'avatar.bg.green',color:'avatar.fg.green'},magenta:{bg:'avatar.bg.magenta',color:'avatar.fg.magenta'},neutral:{bg:'bg.secondary',color:'fg.default'},purple:{bg:'avatar.bg.purple',color:'avatar.fg.purple'},red:{bg:'bg.error.subtle',color:'fg.error.strong'},yellow:{bg:'avatar.bg.yellow',color:'avatar.fg.yellow'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'nia70v'],sm:[{fontSize:'xs',size:'sm'},'_1pgnx44'],md:[{fontSize:'md',size:'md'},'_113im4m'],lg:[{fontSize:'lg',size:'lg'},'_13aqa04'],xl:[{fontSize:'2xl',size:'xl'},'i5gogn'],'5xl':[{fontSize:'4xl',size:'5xl'},'_103q0db']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
 var icon = recipeRuntime({base:[{h:'auto'}],variants:{size:{xs:{w:'12'},sm:{w:'12'},md:{w:'16'},lg:{w:'20'},xl:{w:'20'},'5xl':{w:'32'}}}});
 

package/dist/src/avatar-group/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-CBiq1NLv.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DvaqTswf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_7pyxaz',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['d5qt7j',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/badge/Badge.css.ts.vanilla-BA6Q7BZT.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/badge/Badge.css.ts.vanilla-D0wmnkUW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_1a4cfo'],variants:{colorScheme:{danger:'e950cv',information:'_1lgdxp2',neutral:'hhz5xa',primary:'djva03',success:'_4e26lv',warning:'_1821ybr'},variant:{light:'ijd6d0',solid:'j3n8w5'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'r7nf7b'],variants:{intent:{danger:'_1qonq7',information:'_8bb6fm',neutral:'mo4pz6',primary:'_1f3jhqm',success:'_1ap1iob',warning:'_1pl2cn7'},variant:{light:'_6rb6z2',solid:'_1nbtmty'}}});
 
 export { badge };

package/dist/src/badge/Badge.js

@@ -9,7 +9,7 @@ const Badge = forwardRef(
     asChild,
     children,
     className,
-    colorScheme = "neutral",
+    intent = "neutral",
     variant = "light",
     ...props
   }, ref) => {
@@ -19,7 +19,7 @@ const Badge = forwardRef(
       {
         asChild: true,
         role: "presentation",
-        ...badge({ colorScheme, variant }, className),
+        ...badge({ intent, variant }, className),
         ...props,
         children: /* @__PURE__ */ jsx(Comp, { ref, children })
       }

package/dist/src/banner/Banner-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{colorScheme:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
-var icon = recipeRuntime({base:[{mt:'4'}],variants:{colorScheme:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
+var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'sm',justifyContent:'space-between',px:'lg',py:'sm'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
+var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { banner, icon };

package/dist/src/banner/Banner.js

@@ -12,7 +12,7 @@ import { IconTriangleExclamationFilled } from '../icons/IconTriangleExclamationF
 import { IconX } from '../icons/IconX.js';
 import { banner, icon } from './Banner-css.js';
 
-const iconMap = {
+const mapIntentToIcon = {
   danger: IconCircleExclamationFilled,
   information: IconCircleInfoFilled,
   neutral: IconCircleInfoFilled,
@@ -20,7 +20,7 @@ const iconMap = {
   warning: IconTriangleExclamationFilled
 };
 const Banner = forwardRef(
-  ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
+  ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
     const descriptionId = useId();
     const labelId = useId();
     return /* @__PURE__ */ jsx(BannerContextProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxs(
@@ -30,10 +30,10 @@ const Banner = forwardRef(
         "aria-labelledby": labelId,
         ref,
         role: "alert",
-        ...banner({ colorScheme }, className),
+        ...banner({ intent }, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
           /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
           !!onClose && /* @__PURE__ */ jsx(
             Button,

package/dist/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/box/Box.css.ts.vanilla-CfkLnGor.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/box/Box.css.ts.vanilla-DBfxVKih.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1vr4k9q'});
+var box = recipeRuntime({base:'_1htux16'});
 
 export { box };

package/dist/src/box/Box.js

@@ -17,7 +17,7 @@ const Box = forwardRef(
       {
         "data-axiom": version,
         ref,
-        ...box({}, sprinklesMerge(sprinkles(sprinkleProps), className)),
+        ...box({}, sprinklesMerge(className, sprinkles(sprinkleProps))),
         ...restProps
       }
     );

package/dist/src/button/Button.js

@@ -1,10 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
 import { forwardRef, isValidElement, cloneElement, useEffect } from 'react';
+import { ButtonAddon } from '../button-addon/ButtonAddon.js';
 import { ButtonBase } from '../button-base/ButtonBase.js';
 import { ButtonLabel } from '../button-label/ButtonLabel.js';
 import { ButtonLoadable } from '../button-loadable/ButtonLoadable.js';
 import { Icon } from '../icon/Icon.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
 
 const Button = forwardRef(
   ({
@@ -52,11 +55,13 @@ const Button = forwardRef(
         iconOnly: isIconOnly || iconOnly,
         ref,
         ...props,
-        ...(isIconOnly || iconOnly) && { justifyContent: "center" },
+        ...(isIconOnly || iconOnly || props.loading) && {
+          justifyContent: "center"
+        },
         children: /* @__PURE__ */ jsxs(Comp, { children: [
-          addonBefore && /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: addonBefore }),
+          addonBefore && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonBefore) }),
           /* @__PURE__ */ jsx(Slottable, { children }),
-          addonAfter && /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: addonAfter })
+          addonAfter && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonAfter) })
         ] })
       }
     );

package/dist/src/button-addon/ButtonAddon.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { ButtonLoadable } from '../button-loadable/ButtonLoadable.js';
+
+const ButtonAddon = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Box, { display: "flex", flex: "none", ref, ...props, children }) });
+  }
+);
+ButtonAddon.displayName = "@optiaxiom/react/ButtonAddon";
+
+export { ButtonAddon };

package/dist/src/button-base/ButtonBase-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-CBiq1NLv.css';
-import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-Ck0aWKM6.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/button-base/ButtonBase.css.ts.vanilla-B3E46v7K.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_1xguw4a',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1uj9ghf'],variants:{colorScheme:{danger:'_1krjk9t',neutral:'_7ymcgj',primary:'cgluc7'},iconOnly:{false:'_152x9dc',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'wtky8q',solid:'d71udw',subtle:'_1ig1tyy'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_2uqul0',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_1jzddv0',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'m0rlnd',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:'_1aorbxq'});
+var buttonBase = recipeRuntime({base:['cc6363',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'m1ojb4'],variants:{iconOnly:{false:'_1ozvedk',true:{}},intent:{danger:'_19g3fw0',neutral:'_4osacy',primary:'_3u5k5d'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'s40ph6',solid:'_1c0q32t',subtle:'_14wiz9k'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'pxpmj9',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_31dhmc',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1hlpdji',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:'osd323'});
 
 export { buttonBase, spinner };

package/dist/src/button-base/ButtonBase.js

@@ -10,12 +10,12 @@ import '../sprinkles/sprinklesMerge.js';
 import { buttonBase, spinner } from './ButtonBase-css.js';
 
 const appearances = {
-  danger: { colorScheme: "danger", variant: "solid" },
-  "danger-outline": { colorScheme: "danger", variant: "outline" },
-  default: { colorScheme: "neutral", variant: "outline" },
-  inverse: { colorScheme: "neutral", variant: "solid" },
-  primary: { colorScheme: "primary", variant: "solid" },
-  subtle: { colorScheme: "neutral", variant: "subtle" }
+  danger: { intent: "danger", variant: "solid" },
+  "danger-outline": { intent: "danger", variant: "outline" },
+  default: { intent: "neutral", variant: "outline" },
+  inverse: { intent: "neutral", variant: "solid" },
+  primary: { intent: "primary", variant: "solid" },
+  subtle: { intent: "neutral", variant: "subtle" }
 };
 const ButtonBase = forwardRef(
   ({
@@ -31,32 +31,30 @@ const ButtonBase = forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot : "button";
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    const presetProps = appearances[appearance];
-    const colorScheme = presetProps.colorScheme;
-    const variant = presetProps.variant;
+    const { intent, variant } = appearances[appearance];
     return /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
-        cursor: disabled || loading ? "not-allowed" : "pointer",
+        cursor: disabled ? "not-allowed" : "pointer",
         "data-disabled": disabled ? "" : void 0,
         "data-loading": loading ? "" : void 0,
         ...buttonBase(
           {
-            colorScheme,
             iconOnly: Boolean(iconOnly),
+            intent,
             size,
             variant
           },
           className
         ),
         ...sprinkleProps,
-        children: /* @__PURE__ */ jsxs(Comp, { disabled: disabled || loading, ref, ...restProps, children: [
+        children: /* @__PURE__ */ jsxs(Comp, { disabled, ref, ...restProps, children: [
           /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
             Spinner,
             {
+              appearance: variant === "solid" ? "inverse" : "default",
               "aria-hidden": "true",
-              colorScheme: variant === "solid" ? "inverse" : "default",
               size: "2xs",
               ...spinner()
             }

package/dist/src/button-group/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-CBiq1NLv.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-DvaqTswf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1fa19a5'});
+var buttonGroup = recipeRuntime({base:'_1remjsm'});
 
 export { buttonGroup };

package/dist/src/button-loadable/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-CBiq1NLv.css';
-import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-Ck0aWKM6.css';
-import './../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-CmKkqT9H.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/button-base/ButtonBase.css.ts.vanilla-B3E46v7K.css';
+import './../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BtxvqRzj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'ahy3jn']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1rozewy']});
 
 export { loadable };

package/dist/src/checkbox/Checkbox-css.js

@@ -1,13 +1,13 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-CBiq1NLv.css';
-import './../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-D5-kSVrB.css';
-import './../../assets/src/checkbox/Checkbox.css.ts.vanilla-D0ZR8bIj.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/checkbox/Checkbox.css.ts.vanilla-DigB5kPU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'_15slc10'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'16'},'_1qjmzts'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:['tiur9w']});
+var checkbox = recipeRuntime({base:'jsyb4q'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'16'},'_15j77rf'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:['_1ug155r']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'_1i94cx7'});
+var input = recipeRuntime({base:'rms7so'});
 
 export { checkbox, control, icon, indicator, input };

package/dist/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-CJGLgFlR.css';
-import './../../assets/src/code/Code.css.ts.vanilla-D0vmN0zX.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-D2CmRaCx.css';
+import './../../assets/src/code/Code.css.ts.vanilla-D3uI46K3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_3i1djd']});
+var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'_107jeoe']});
 
 export { code };

package/dist/src/combobox/Combobox.js

@@ -1,32 +1,72 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useMemo, useEffect } from 'react';
 import { ComboboxContextProvider } from '../combobox-context/ComboboxContext.js';
+import { Dialog } from '../dialog/Dialog.js';
+import { DialogContent } from '../dialog-content/DialogContent.js';
+import { DialogTrigger } from '../dialog-trigger/DialogTrigger.js';
 import { Popover } from '../popover/Popover.js';
+import { PopoverContent } from '../popover-content/PopoverContent.js';
+import { PopoverTrigger } from '../popover-trigger/PopoverTrigger.js';
+import { useEffectEvent } from '../use-event/useEffectEvent.js';
+import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
 
 function Combobox({
   children,
   defaultOpen = false,
   isItemDisabled = () => false,
+  items,
   itemToKey = (value) => value,
   itemToString = (value) => value ? String(value) : "",
+  onInputValueChange,
+  onItemSelect,
   onOpenChange,
   open: openProp,
-  ...props
+  value: valueProp
 }) {
+  const components = useResponsiveMatches({
+    base: {
+      Content: DialogContent,
+      Root: Dialog,
+      Trigger: DialogTrigger
+    },
+    sm: {
+      Content: PopoverContent,
+      Root: Popover,
+      Trigger: PopoverTrigger
+    }
+  });
+  const value = useMemo(
+    () => Array.isArray(valueProp) ? new Set(valueProp) : valueProp,
+    [valueProp]
+  );
   const [open, setOpen] = useControllableState({
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
+  const onInputValueChangeStable = useEffectEvent(
+    onInputValueChange ?? (() => {
+    })
+  );
+  useEffect(() => {
+    if (!open) {
+      onInputValueChangeStable("");
+    }
+  }, [open, onInputValueChangeStable]);
+  return /* @__PURE__ */ jsx(components.Root, { onOpenChange: setOpen, open, children: /* @__PURE__ */ jsx(
     ComboboxContextProvider,
     {
+      components,
       isItemDisabled,
+      items,
       itemToKey,
       itemToString,
+      onInputValueChange,
+      onItemSelect,
       open,
       setOpen,
-      ...props,
+      value,
       children
     }
   ) });