@optiaxiom/react 0.1.0 → 0.2.0

package/dist/src/alert/Alert.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createElement } from 'react';
-import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
 import { IconCircleCheckFilled } from '../icons/IconCircleCheckFilled.js';
 import { IconCircleExclamationFilled } from '../icons/IconCircleExclamationFilled.js';
 import { IconCircleInfoFilled } from '../icons/IconCircleInfoFilled.js';
@@ -20,8 +20,8 @@ const iconMap = {
 const Alert = forwardRef(
   ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(Flex, { ref, ...alert({ colorScheme }, className), ...props, children: [
-      /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
-      /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", mt: "2", children }),
+      /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+      /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", my: "2", children }),
       !!onClose && /* @__PURE__ */ jsx(
         Button,
         {

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

@@ -1,8 +1,8 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-CVfLPfsi.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/alert-dialog-content/AlertDialogContent.css.ts.vanilla-8Sww1h8x.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{bg:'bg.default',rounded:'lg',shadow:'md',z:'popover'},'h94vfc'],variants:{size:{sm:'afsf6p',md:'_187szzo',lg:'zg5ax9'}}});
-var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_41kthm']});
+var content = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexDirection:'column',rounded:'lg',shadow:'md',z:'popover'},'_1epzhm4'],variants:{size:{sm:'mfy55r',md:'fjdv6n',lg:'_1blgaqq'}}});
+var overlay = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_37by2q']});
 
 export { content, overlay };

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

@@ -1,7 +1,6 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/alert-dialog-description/AlertDialogDescription.css.ts.vanilla-ByU_MbAC.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{fontSize:'md',overflow:'auto',px:'24',py:'16'},'f0xktp']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',overflow:'auto',px:'24',py:'16'}]});
 
 export { body };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-DMG9lF3W.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/alert-dialog-footer/AlertDialogFooter.css.ts.vanilla-BCpY-gV3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_136w7ru']});
+var footer = recipeRuntime({base:[{flexDirection:['column-reverse','row'],gap:'md',justifyContent:'end',px:'24',py:'20'},'_1e6e5t']});
 
 export { footer };

package/dist/src/alert-dialog-title/AlertDialogTitle.js

@@ -1,22 +1,33 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import { forwardRef } from 'react';
+import { Flex } from '../flex/Flex.js';
 import { Heading } from '../heading/Heading.js';
+import { Icon } from '../icon/Icon.js';
+import { IconTriangleExclamation } from '../icons/IconTriangleExclamation.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
 
-const AlertDialogTitle = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    Heading,
-    {
-      asChild: true,
-      fontWeight: "500",
-      level: "3",
-      p: "lg",
-      pb: "md",
-      ref,
-      ...props,
-      children: /* @__PURE__ */ jsx(RadixAlertDialog.Title, { children })
-    }
-  );
+const AlertDialogTitle = forwardRef(({ addonBefore, children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
+  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "md", p: "lg", pb: "md", ...sprinkleProps, children: [
+    /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", children: addonBefore ? fallbackSpan(addonBefore) : /* @__PURE__ */ jsx(IconTriangleExclamation, {}) }),
+    /* @__PURE__ */ jsx(
+      Heading,
+      {
+        asChild: true,
+        color: "fg.default",
+        fontWeight: "500",
+        level: "3",
+        ref,
+        ...restProps,
+        children: /* @__PURE__ */ jsx(RadixAlertDialog.Title, { children })
+      }
+    )
+  ] });
 });
 AlertDialogTitle.displayName = "@optiaxiom/react/AlertDialogTitle";
 

package/dist/src/autocomplete/Autocomplete.js

@@ -1,33 +1,40 @@
 import { jsx } from 'react/jsx-runtime';
+import { Popper } from '@radix-ui/react-popper';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useCombobox } from 'downshift';
 import { useState, useEffect } from 'react';
 import { AutocompleteContextProvider } from '../autocomplete-context/AutocompleteContext.js';
+import { useCombobox } from '../downshift/useCombobox.js';
+import 'downshift';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
-import { Popover } from '../popover/Popover.js';
 import { useEffectEvent } from '../use-event/useEffectEvent.js';
-import { useDelayedState } from './useDelayedState.js';
 
 function Autocomplete({
   children,
+  defaultOpen = false,
   defaultValue,
   disabled,
   items,
   itemToKey = (value2) => value2,
   itemToString = (value2) => value2 ? String(value2) : "",
   onInputValueChange,
+  onOpenChange,
   onValueChange,
+  open,
   value,
   ...props
 }) {
-  const { id: inputId } = useFieldContext({});
+  const { inputId } = useFieldContext({});
   const [selectedItem, setSelectedItem] = useControllableState({
     defaultProp: defaultValue,
     onChange: onValueChange,
     prop: value
   });
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+    prop: open
+  });
   const [inputValue, setInputValue] = useState(
     itemToString(selectedItem ?? null)
   );
@@ -37,19 +44,14 @@ function Autocomplete({
       setInputValue(itemToStringStable(selectedItem ?? null));
     }
   }, [isOpen, itemToStringStable, selectedItem]);
-  const [highlightedIndex, setHighlightedIndex] = useDelayedState(-1, isOpen);
   const downshift = useCombobox({
     ...props,
-    highlightedIndex,
     inputId,
     inputValue,
     isOpen,
     items,
     itemToKey,
     itemToString,
-    onHighlightedIndexChange({ highlightedIndex: highlightedIndex2 }) {
-      setHighlightedIndex(highlightedIndex2);
-    },
     onInputValueChange({ inputValue: inputValue2, isOpen: isOpen2 }) {
       if (isOpen2) {
         onInputValueChange?.(inputValue2);
@@ -66,12 +68,13 @@ function Autocomplete({
     },
     selectedItem: selectedItem ?? null
   });
-  return /* @__PURE__ */ jsx(Popover, { open: isOpen, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Popper, { children: /* @__PURE__ */ jsx(
     AutocompleteContextProvider,
     {
       disabled,
       downshift,
       highlightedItem: items[downshift.highlightedIndex],
+      isOpen,
       items,
       itemToKey,
       setInputValue,

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

@@ -1,8 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-okSbnsG8.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/autocomplete-content/AutocompleteContent.css.ts.vanilla-CS3SCfDf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{p:'4'},'_1rj0pf1']});
-var list = recipeRuntime({base:['_1nvlns4','_1tqgytl']});
+var content = recipeRuntime({base:[{p:'4'},'_1vpj8gf']});
 
-export { content, list };
+export { content };

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

@@ -1,37 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useEffect } from 'react';
+import { PopperContent } from '@radix-ui/react-popper';
+import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
 import { Box } from '../box/Box.js';
-import { PopoverContent } from '../popover-content/PopoverContent.js';
-import { usePopoverContext } from '../popover-context/PopoverContext.js';
+import { MenuContentBase } from '../menu-content-base/MenuContentBase.js';
 import { Spinner } from '../spinner/Spinner.js';
-import { content, list } from './AutocompleteContent-css.js';
+import { content } from './AutocompleteContent-css.js';
 
-const AutocompleteContent = forwardRef(({ children, className, loading, ...props }, ref) => {
-  const { downshift } = useAutocompleteContext("AutocompleteContent");
-  const { open } = usePopoverContext("AutocompleteContent");
-  const isOpenRef = useRef(open);
-  useEffect(() => {
-    isOpenRef.current = open;
-  });
-  return /* @__PURE__ */ jsx(
-    PopoverContent,
-    {
-      align: "center",
-      onMouseMoveCapture: (event) => {
-        if (!isOpenRef.current) {
-          event.stopPropagation();
-        }
-      },
-      onOpenAutoFocus: (event) => event.preventDefault(),
-      ref,
-      sideOffset: 5,
-      ...content({}, className),
-      ...props,
-      children: /* @__PURE__ */ jsx(Box, { asChild: true, ...list(), children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({}, { suppressRefError: true }), children: loading ? /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Spinner, {}) }) }) : children }) })
-    }
-  );
-});
+const AutocompleteContent = forwardRef(
+  ({
+    align = "center",
+    children,
+    className,
+    loading,
+    sideOffset = 5,
+    ...props
+  }, ref) => {
+    const { downshift, isOpen } = useAutocompleteContext("AutocompleteContent");
+    return /* @__PURE__ */ jsx(MenuContentBase, { minW: "trigger", open: isOpen, provider: "popper", children: /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(PopperContent, { align, asChild: true, sideOffset, children: /* @__PURE__ */ jsx("ul", { ...downshift.getMenuProps({}, { suppressRefError: true }), children: loading ? /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Spinner, {}) }) }) : children }) }) }) });
+  }
+);
 AutocompleteContent.displayName = "@optiaxiom/react/AutocompleteContent";
 
 export { AutocompleteContent };

package/dist/src/autocomplete-item/AutocompletItem.js

@@ -1,36 +1,38 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
 import { useAutocompleteListContext } from '../autocomplete-list-context/AutocompleteListContext.js';
-import { Flex } from '../flex/Flex.js';
-import { Icon } from '../icon/Icon.js';
+import { MenuItemBase } from '../menu-item-base/MenuItemBase.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import '../utils/conditions.js';
-import { fallbackSpan } from '../utils/fallbackSpan.js';
-import { item } from './AutocompleteItem-css.js';
 
-const AutocompleteItem = forwardRef(({ addonBefore, children, ...props }, ref) => {
+const AutocompleteItem = forwardRef(({ addonAfter, addonBefore, children, description, ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
   const { downshift, highlightedItem } = useAutocompleteContext("AutocompleteItem");
-  const { item: item$1 } = useAutocompleteListContext("AutocompleteItem");
-  const itemProps = downshift.getItemProps({ item: item$1 });
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, ...item(), ...sprinkleProps, children: /* @__PURE__ */ jsxs(
-    "li",
+  const { item } = useAutocompleteListContext("AutocompleteItem");
+  const itemProps = downshift.getItemProps({ item });
+  return /* @__PURE__ */ jsx(
+    MenuItemBase,
     {
-      "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-      "data-highlighted": highlightedItem === item$1 ? "" : void 0,
-      "data-selected": downshift.selectedItem === item$1 ? "" : void 0,
-      ref,
-      ...restProps,
-      ...itemProps,
-      children: [
-        addonBefore && /* @__PURE__ */ jsx(Icon, { children: fallbackSpan(addonBefore) }),
-        children
-      ]
+      addonAfter,
+      addonBefore,
+      description,
+      ...sprinkleProps,
+      children: /* @__PURE__ */ jsx(
+        "li",
+        {
+          "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+          "data-highlighted": highlightedItem === item ? "" : void 0,
+          "data-selected": downshift.selectedItem === item ? "" : void 0,
+          ref,
+          ...restProps,
+          ...itemProps,
+          children
+        }
+      )
     }
-  ) });
+  );
 });
 AutocompleteItem.displayName = "@optiaxiom/react/AutocompleteItem";
 

package/dist/src/autocomplete-item-indicator/AutocompleteItemIndicator.js

@@ -1,14 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useAutocompleteListContext } from '../autocomplete-list-context/AutocompleteListContext.js';
+import { Box } from '../box/Box.js';
 import { IconCheck } from '../icons/IconCheck.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
-const AutocompleteItemIndicator = forwardRef(({ ...props }, ref) => {
+const AutocompleteItemIndicator = forwardRef(({ children, ...props }, ref) => {
+  const { restProps, sprinkleProps } = extractSprinkles(props);
   const { active } = useAutocompleteListContext("AutocompleteItemIndicator");
   if (!active) {
-    return null;
+    return /* @__PURE__ */ jsx(Box, { w: "12" });
   }
-  return /* @__PURE__ */ jsx(IconCheck, { ref, ...props });
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: children ?? /* @__PURE__ */ jsx(IconCheck, { ref, ...restProps }) });
 });
 AutocompleteItemIndicator.displayName = "@optiaxiom/react/AutocompleteItemIndicator";
 

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

@@ -1,8 +1,13 @@
-import { jsx } from 'react/jsx-runtime';
-import { PopoverAnchor, PopoverTrigger } from '@radix-ui/react-popover';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PopperAnchor } from '@radix-ui/react-popper';
 import { forwardRef } from 'react';
 import { useAutocompleteContext } from '../autocomplete-context/AutocompleteContext.js';
-import { SearchInput } from '../search-input/SearchInput.js';
+import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
+import { IconAngleDown } from '../icons/IconAngleDown.js';
+import { IconX } from '../icons/IconX.js';
+import { Input } from '../input/Input.js';
+import { Separator } from '../separator/Separator.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
@@ -10,23 +15,35 @@ import '../sprinkles/sprinklesMerge.js';
 const AutocompleteTrigger = forwardRef(({ ...props }, ref) => {
   const { restProps, sprinkleProps } = extractSprinkles(props);
   const { disabled, downshift, setInputValue } = useAutocompleteContext("AutocompleteInput");
-  return (
-    // https://github.com/radix-ui/primitives/issues/1461
-    /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, type: void 0, ...sprinkleProps, children: /* @__PURE__ */ jsx(
-      SearchInput,
-      {
-        addonBefore: null,
-        ...!downshift.selectedItem && { addonAfter: null },
-        onValueClear: () => downshift.reset(),
-        ref,
-        ...downshift.getInputProps({
-          ...restProps,
-          disabled,
-          onChange: (event) => setInputValue("value" in event.target ? event.target.value : "")
-        })
-      }
-    ) }) })
-  );
+  return /* @__PURE__ */ jsx(PopperAnchor, { children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      addonAfter: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          alignItems: "stretch",
+          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" }),
+            /* @__PURE__ */ jsx(Flex, { onClick: downshift.getToggleButtonProps().onClick, w: "32", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: /* @__PURE__ */ jsx(IconAngleDown, { "aria-hidden": true, focusable: false }) }) })
+          ]
+        }
+      ),
+      ...sprinkleProps,
+      ...downshift.getInputProps({
+        ...restProps,
+        disabled,
+        onChange: (event) => {
+          setInputValue("value" in event.target ? event.target.value : "");
+        },
+        ref
+      })
+    }
+  ) });
 });
 AutocompleteTrigger.displayName = "@optiaxiom/react/AutocompleteTrigger";
 

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

@@ -1,9 +1,9 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-9uH71Yf6.css';
-import './../../assets/src/avatar/Avatar.css.ts.vanilla-ClN9p8wH.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/avatar/Avatar.css.ts.vanilla-Cc1W2rt5.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'},'_1driqhx'],variants:{colorScheme:{blue:{bg:'blue.500',color:'neutral.00'},brand:{bg:'brand.500',color:'neutral.00'},green:{bg:'green.500',color:'neutral.00'},magenta:{bg:'magenta.500',color:'neutral.00'},neutral:{bg:'neutral.150',color:'bg.default.inverse'},purple:{bg:'purple.500',color:'neutral.00'},red:{bg:'red.500',color:'neutral.00'},yellow:{bg:'yellow.500',color:'neutral.00'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'_10mjc47'],sm:[{fontSize:'xs',size:'sm'},'alm6mv'],md:[{fontSize:'md',size:'md'},'y323y2'],lg:[{fontSize:'lg',size:'lg'},'_167f6vh'],xl:[{fontSize:'2xl',size:'xl'},'snfe6k'],'5xl':[{fontSize:'4xl',size:'5xl'},'pacjxx']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_3ghmrm'],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'},'senq3l'],sm:[{fontSize:'xs',size:'sm'},'y46ckq'],md:[{fontSize:'md',size:'md'},'_1iee1na'],lg:[{fontSize:'lg',size:'lg'},'_1b1qw8b'],xl:[{fontSize:'2xl',size:'xl'},'h421z4'],'5xl':[{fontSize:'4xl',size:'5xl'},'_41jyrc']}}});
 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-KObJMImw.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-9uH71Yf6.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_4179lf',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['ncz9ng',{display:'flex'}]});
 
 export { avatarGroup };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/badge/Badge.css.ts.vanilla-Bo5IfsM_.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/badge/Badge.css.ts.vanilla-B0wZYAIY.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'},'_1d1tnm9'],variants:{colorScheme:{danger:'bovtoq',information:'cp8uza',neutral:'ujksuy',primary:'_4m5h0q',success:'c6wuop',warning:'_14jjzph'},variant:{light:'v8db6t',solid:'y3iidn'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'xs',py:'2',rounded:'full'},'_1qklq0'],variants:{colorScheme:{danger:'_12fe138',information:'_8n41pk',neutral:'_1hzm8zd',primary:'_1yry1mi',success:'lrkd3c',warning:'_1hj560k'},variant:{light:'_10ttap0',solid:'ainpn7'}}});
 
 export { badge };

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var banner = recipeRuntime({base:[{alignItems:'start',flexDirection:'row',fontSize:'md',gap:'xs',justifyContent:'space-between',p:'md'}],variants:{colorScheme:{danger:{bg:'red.200'},information:{bg:'brand.200'},neutral:{bg:'bg.tertiary'},success:{bg:'green.200'},warning:{bg:'yellow.200'}}}});
-var icon = recipeRuntime({base:[{color:'bg.default.inverse',h:'16',mt:'4',w:'auto'}]});
+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'}}}});
 
 export { banner, icon };

package/dist/src/banner/Banner.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, createElement } from 'react';
-import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
 import { IconCircleCheckFilled } from '../icons/IconCircleCheckFilled.js';
 import { IconCircleExclamationFilled } from '../icons/IconCircleExclamationFilled.js';
 import { IconCircleInfoFilled } from '../icons/IconCircleInfoFilled.js';
@@ -20,8 +20,8 @@ const iconMap = {
 const Banner = forwardRef(
   ({ children, className, colorScheme = "neutral", onClose, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(Flex, { ref, ...banner({ colorScheme }, className), ...props, children: [
-      /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({}), children: createElement(iconMap[colorScheme]) }),
-      /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "xs", mt: "2", children }),
+      /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ colorScheme }), children: createElement(iconMap[colorScheme]) }),
+      /* @__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-KObJMImw.css';
-import './../../assets/src/box/Box.css.ts.vanilla-B8q6Oyuj.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/box/Box.css.ts.vanilla-CJfUe_xA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'fech8q'});
+var box = recipeRuntime({base:'_1jzx1ia'});
 
 export { box };

package/dist/src/button/Button-css.js

@@ -1,12 +1,12 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-9uH71Yf6.css';
-import './../../assets/src/button/Button.css.ts.vanilla-BDZg-A0O.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
+import './../../assets/src/button/Button.css.ts.vanilla-f0BfuF2p.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{transition:'opacity'},'hu6u33']});
-var button = recipeRuntime({base:['_1euikzm',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'gdcwtt'],variants:{colorScheme:{danger:'amkvqb',neutral:'_1lpwxfn',primary:'oawihm'},iconOnly:{false:'vgctca',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1vafzkp',solid:'_1fghhh6',subtle:'_190xska'}},variantsCompounded:[{style:'lpuiwj',variants:{iconOnly:true,size:'sm'}},{style:'awbsra',variants:{iconOnly:false,size:'sm'}},{style:'_1gbiub',variants:{iconOnly:true,size:'md'}},{style:'gohaac',variants:{iconOnly:false,size:'md'}},{style:'_1mwxxxz',variants:{iconOnly:true,size:'lg'}},{style:'_2mlqdl',variants:{iconOnly:false,size:'lg'}}]});
-var icon = recipeRuntime({base:[{h:'auto',w:'20'},{transition:'opacity'},'hu6u33']});
-var label = recipeRuntime({base:[{flexDirection:'row',gap:'4',mx:'4'},{transition:'opacity'},'hu6u33']});
-var spinner = recipeRuntime({base:'_13f61or'});
+var addon = recipeRuntime({base:[{transition:'opacity'},'_30lma4']});
+var button = recipeRuntime({base:['p2cmh6',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_3fpl1h'],variants:{colorScheme:{danger:'buk0vy',neutral:'phwgl6',primary:'l4irbb'},iconOnly:{false:'_9un8j1',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1oaiof',solid:'mtgnq7',subtle:'_1xgtzxc'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_17x7nto',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_1o604va',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'wumzna',variants:{iconOnly:false,size:'lg'}}]});
+var icon = recipeRuntime({base:[{transition:'opacity'},'_30lma4']});
+var label = recipeRuntime({base:[{flexDirection:'row',gap:'4',mx:'4'},{transition:'opacity'},'_30lma4']});
+var spinner = recipeRuntime({base:'msudw5'});
 
 export { addon, button, icon, label, spinner };

package/dist/src/button/Button.js

@@ -4,11 +4,11 @@ import { forwardRef, isValidElement, cloneElement, useEffect } from 'react';
 import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
 import { Spinner } from '../spinner/Spinner.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { Transition } from '../transition/Transition.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import { icon, label, button, spinner, addon } from './Button-css.js';
@@ -48,16 +48,16 @@ const Button = forwardRef(
       children = newElement ? cloneElement(
         newElement,
         void 0,
-        isIconOnly ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(newElement.props.children) })
+        isIconOnly ? /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(newElement.props.children) })
       ) : children;
     } else {
-      children = isIconOnly ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(children) });
+      children = isIconOnly ? /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(children) });
     }
     if (icon$1 && !isIconOnly) {
       if (iconPosition === "start") {
-        addonBefore = /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: icon$1 });
+        addonBefore = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon$1 });
       } else if (iconPosition === "end") {
-        addonAfter = /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: icon$1 });
+        addonAfter = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon$1 });
       }
     }
     const isIconMissingAriaLabel = isIconOnly && !props["aria-label"];
@@ -86,12 +86,15 @@ const Button = forwardRef(
         ),
         ...sprinkleProps,
         children: /* @__PURE__ */ jsxs(Comp, { disabled: disabled || loading, ref, ...restProps, children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(Transition, { duration: "sm", children: /* @__PURE__ */ jsx(Box, { "aria-hidden": "true", ...spinner(), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
             Spinner,
             {
-              colorScheme: variant === "solid" ? "inverse" : "default"
+              "aria-hidden": "true",
+              colorScheme: variant === "solid" ? "inverse" : "default",
+              size: "2xs",
+              ...spinner()
             }
-          ) }) }) }),
+          ) }),
           addonBefore && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon(), children: fallbackSpan(addonBefore) }),
           /* @__PURE__ */ jsx(Slottable, { children }),
           addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, ...addon(), children: fallbackSpan(addonAfter) })

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

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-KObJMImw.css';
-import './../../assets/src/table-row/TableRow.css.ts.vanilla-9uH71Yf6.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-79mCcHcb.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-BwAVjqZ1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'w156xz'});
+var buttonGroup = recipeRuntime({base:'kx0qtf'});
 
 export { buttonGroup };