@optiaxiom/react 1.9.26 → 3.0.0-next.1

package/dist/esm/packages/react/src/alert/Alert.js

@@ -1,26 +1,22 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { IconWarning, IconCheckCircle, IconInfo, IconError, IconClose } from '@optiaxiom/icons';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef, createElement } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 import { Group } from '../group/Group.js';
 import { Icon } from '../icon/Icon.js';
-import { IconCircleCheckSolid } from '../icons/IconCircleCheckSolid.js';
-import { IconCircleExclamationSolid } from '../icons/IconCircleExclamationSolid.js';
-import { IconCircleInfoSolid } from '../icons/IconCircleInfoSolid.js';
 import { IconOpal } from '../icons/IconOpal.js';
-import { IconTriangleExclamationSolid } from '../icons/IconTriangleExclamationSolid.js';
-import { IconX } from '../icons/IconX.js';
 import { icon, content, alert } from './Alert-css.js';
 
 const mapIntentToIcon = {
-  danger: IconCircleExclamationSolid,
-  information: IconCircleInfoSolid,
-  neutral: IconCircleInfoSolid,
+  danger: IconError,
+  information: IconInfo,
+  neutral: IconInfo,
   opal: IconOpal,
-  success: IconCircleCheckSolid,
-  warning: IconTriangleExclamationSolid
+  success: IconCheckCircle,
+  warning: IconWarning
 };
 const Alert = forwardRef(
   ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
@@ -34,7 +30,7 @@ const Alert = forwardRef(
         ...alert({ intent }, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: intent === "opal" ? /* @__PURE__ */ jsx(IconOpal, {}) : createElement(mapIntentToIcon[intent], { filled: true }) }),
           /* @__PURE__ */ jsx(Group, { id: labelId, ...content(), children }),
           !!onDismiss && /* @__PURE__ */ jsx(
             Button,
@@ -43,7 +39,7 @@ const Alert = forwardRef(
               "aria-label": "close",
               color: "fg.default",
               flex: "none",
-              icon: /* @__PURE__ */ jsx(IconX, {}),
+              icon: /* @__PURE__ */ jsx(IconClose, {}),
               onClick: onDismiss,
               size: "sm"
             }

package/dist/esm/packages/react/src/alert-dialog/AlertDialogContent-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-BEkR9cyr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-C2GirC54.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_582r8u'}}});
-var content$4 = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'ldxtfq'],variants:{size:{sm:'_1ea0hql',md:'tetdsv',lg:'_1grxwvy'}}});
-var nestedDialogCountVar = 'var(--qgag63)';
-var root$4 = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'0',z:'popover'},'_1nox1tl']});
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'qlqsie'}}});
+var content$4 = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'kfwld2'],variants:{size:{sm:'orudni',md:'_1dyee63',lg:'_1e4vlxy'}}});
+var nestedDialogCountVar = 'var(--_1umrpdf)';
+var root$4 = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'0',z:'popover'},'_3puhta']});
 
 export { backdrop, content$4 as content, nestedDialogCountVar, root$4 as root };

package/dist/esm/packages/react/src/alert-dialog/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-DEZDpCZq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-w4KStk8R.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1knwr3e']});
+var footer = recipeRuntime({base:[{bg:'bg.default',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'rxgfus']});
 
 export { footer };

package/dist/esm/packages/react/src/alert-dialog/AlertDialogHeader-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-D6mGSdyc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-BfI8qX_l.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header$1 = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'24',pb:'16',z:'10'},'_1109v96']});
+var header$1 = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'24',pb:'16',z:'10'},'_1g88k8g']});
 
 export { header$1 as header };

package/dist/esm/packages/react/src/angle-menu-button/AngleMenuButton.js

@@ -1,12 +1,21 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { IconKeyboardArrowDown } from '@optiaxiom/icons';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
-import { IconAngleDown } from '../icons/IconAngleDown.js';
 
 const AngleMenuButton = forwardRef(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconAngleDown, {}), iconPosition: "end", ref, ...props, children });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: /* @__PURE__ */ jsx(IconKeyboardArrowDown, {}),
+      iconPosition: "end",
+      ref,
+      ...props,
+      children
+    }
+  );
 });
 AngleMenuButton.displayName = "@optiaxiom/react/AngleMenuButton";
 

package/dist/esm/packages/react/src/avatar/Avatar-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-YgV0ZPi4.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-DZYRRFiA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BYV2kEqW.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-D_HUx7nL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flex:'none',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1lx6wmg'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'_1jheaph'],xs:[{fontWeight:'400',size:'xs'},'_13v6qug'],sm:[{size:'sm'},'_1rhhs2s'],md:[{size:'md'},'_8v3jq6'],lg:[{size:'lg'},'_1uh43ys'],xl:[{size:'xl'},'bnyhoq'],'3xl':[{size:'3xl'},'_1b5sbeh']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flex:'none',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_19balii'],variants:{colorScheme:{neutral:{bg:'bg.avatar.neutral',color:'fg.avatar.neutral'},purple:{bg:'bg.avatar.purple',color:'fg.avatar.purple'}},size:{'2xs':[{fontWeight:'400',size:'2xs'},'dx45w'],xs:[{fontWeight:'400',size:'xs'},'_1fmd3it'],sm:[{size:'sm'},'_1urx9i5'],md:[{size:'md'},'_19tsgs8'],lg:[{size:'lg'},'_1ec3fv7'],xl:[{size:'xl'},'_13tl6ca'],'3xl':[{size:'3xl'},'_1x3bo5j']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
-var icon$2 = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'10'},xs:{h:'10'},sm:{h:'12'},md:{h:'12'},lg:{h:'2xs'},xl:{h:'2xs'},'3xl':{h:'sm'}}}});
+var icon$2 = recipeRuntime({base:[{w:'auto'}],variants:{size:{'2xs':{h:'12'},xs:[{h:'16'},'_1bbmq0f'],sm:{h:'16'},md:{h:'xs'},lg:{h:'sm'},xl:{h:'sm'},'3xl':{h:'lg'}}}});
 
 export { avatar, fallback, icon$2 as icon };

package/dist/esm/packages/react/src/avatar/Avatar.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconPerson, IconGroups } from '@optiaxiom/icons';
 import * as RadixAvatar from '@radix-ui/react-avatar';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { IconOpal } from '../icons/IconOpal.js';
-import { IconUserSolid } from '../icons/IconUserSolid.js';
-import { IconUsersSolid } from '../icons/IconUsersSolid.js';
 import { icon, fallback, avatar } from './Avatar-css.js';
 import { useAvatarContext } from './AvatarContext.js';
 
@@ -19,8 +18,8 @@ function getInitialsFromName(name) {
 }
 const mapFallbackToIcon = {
   opal: null,
-  team: /* @__PURE__ */ jsx(IconUsersSolid, {}),
-  user: /* @__PURE__ */ jsx(IconUserSolid, {})
+  team: /* @__PURE__ */ jsx(IconGroups, {}),
+  user: /* @__PURE__ */ jsx(IconPerson, { filled: true })
 };
 const Avatar = forwardRef(
   ({

package/dist/esm/packages/react/src/avatar/AvatarGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-YgV0ZPi4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BYV2kEqW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_14us3tj',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['_12ncf1n',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/esm/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DvZRiel2.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-DXDzFiFr.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop$2 = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1tnnvuz']});
+var backdrop$2 = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_14kqu9j']});
 
 export { backdrop$2 as backdrop };

package/dist/esm/packages/react/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-C1DggkSh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-OjtEM4Uu.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge$1 = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_1r0vm96'],variants:{intent:{danger:'_1ib25tf',information:'z7jpfg',neutral:'gpwjuz',primary:'_1pz05e5',success:'_8m3kis',warning:'gvulp7'},variant:{strong:'ysxuav',subtle:'_1rf5s0n'}}});
+var badge$1 = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontFamily:'mono',fontSize:'sm',fontWeight:'400',justifyContent:'center',px:'6',py:'2',rounded:'full',textTransform:'uppercase'},'daq4sr'],variants:{intent:{danger:'_3tru3p',information:'_1eu5b2r',neutral:'hdqmv2',primary:'_1l48qwa',success:'s0zk0n',warning:'_1g85c4m'},variant:{strong:'_4i4jec',subtle:'sotwoc'}}});
 
 export { badge$1 as badge };

package/dist/esm/packages/react/src/banner/Banner-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-o_BfZjQu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-Dan-h9Cw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],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 content$3 = recipeRuntime({base:[{flex:'1',flexDirection:'column',gap:'8',justifyContent:'center'},'emwgsf']});
+var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
+var content$3 = recipeRuntime({base:[{flex:'1',flexDirection:'column',gap:'8',justifyContent:'center'},'_1spzvo5']});
 var icon$2 = 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, content$3 as content, icon$2 as icon };

package/dist/esm/packages/react/src/banner/Banner.js

@@ -1,24 +1,20 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { IconWarning, IconCheckCircle, IconInfo, IconError, IconClose } from '@optiaxiom/icons';
 import { useId } from '@radix-ui/react-id';
 import { forwardRef, createElement } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 import { Group } from '../group/Group.js';
 import { Icon } from '../icon/Icon.js';
-import { IconCircleCheckSolid } from '../icons/IconCircleCheckSolid.js';
-import { IconCircleExclamationSolid } from '../icons/IconCircleExclamationSolid.js';
-import { IconCircleInfoSolid } from '../icons/IconCircleInfoSolid.js';
-import { IconTriangleExclamationSolid } from '../icons/IconTriangleExclamationSolid.js';
-import { IconX } from '../icons/IconX.js';
 import { icon, content, banner } from './Banner-css.js';
 
 const mapIntentToIcon = {
-  danger: IconCircleExclamationSolid,
-  information: IconCircleInfoSolid,
-  neutral: IconCircleInfoSolid,
-  success: IconCircleCheckSolid,
-  warning: IconTriangleExclamationSolid
+  danger: IconError,
+  information: IconInfo,
+  neutral: IconInfo,
+  success: IconCheckCircle,
+  warning: IconWarning
 };
 const Banner = forwardRef(
   ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
@@ -32,7 +28,7 @@ const Banner = forwardRef(
         ...banner({ intent }, className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
+          /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent], { filled: true }) }),
           /* @__PURE__ */ jsx(Group, { id: labelId, ...content(), children }),
           !!onDismiss && /* @__PURE__ */ jsx(
             Button,
@@ -41,7 +37,7 @@ const Banner = forwardRef(
               "aria-label": "close",
               color: "fg.default",
               flex: "none",
-              icon: /* @__PURE__ */ jsx(IconX, {}),
+              icon: /* @__PURE__ */ jsx(IconClose, {}),
               onClick: onDismiss,
               size: "sm"
             }

package/dist/esm/packages/react/src/box/Box-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-DFs_evze.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-9wtN5c0B.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-6WgI5BV7.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-BwcfIzcL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'o8b9qs'});
+var box = recipeRuntime({base:'_1akda24'});
 
 export { box };

package/dist/esm/packages/react/src/breadcrumb/Breadcrumb-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-MIZ9S0KG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-rjaJoKix.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:'muof7f'});
-var list$2 = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_11wr4ti']});
+var link = recipeRuntime({base:'_15amt1k'});
+var list$2 = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'hej5cr']});
 
 export { link, list$2 as list };

package/dist/esm/packages/react/src/breadcrumb/Breadcrumb.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconMoreHoriz } from '@optiaxiom/icons';
 import { forwardRef, Fragment } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
-import { IconEllipsisSolid } from '../icons/IconEllipsisSolid.js';
 import { Link } from '../link/Link.js';
 import { Menu } from '../menu/Menu.js';
 import { MenuContent } from '../menu/MenuContent.js';
@@ -59,7 +59,7 @@ const renderItems = (items, limit = items.length, renderItem) => {
         {
           appearance: "subtle",
           "aria-label": "More items",
-          icon: /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", children: /* @__PURE__ */ jsx(IconEllipsisSolid, {}) })
+          icon: /* @__PURE__ */ jsx(Box, { asChild: true, color: "fg.tertiary", children: /* @__PURE__ */ jsx(IconMoreHoriz, {}) })
         }
       ),
       /* @__PURE__ */ jsx(MenuContent, {})

package/dist/esm/packages/react/src/breadcrumb/BreadcrumbNode-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-CECmrwxH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-UkEvdkMb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item$2 = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'t1199l']});
+var item$2 = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_18k2sxm']});
 
 export { item$2 as item };

package/dist/esm/packages/react/src/button/Button.js

@@ -1,8 +1,7 @@
 "use client";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef, useEffect } from 'react';
-import { Icon } from '../icon/Icon.js';
 import '@optiaxiom/globals';
 import { useSurface } from '../surface/useSurface.js';
 import '../utils/conditions.js';
@@ -11,6 +10,7 @@ import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
 import { ButtonAddon } from './ButtonAddon.js';
 import { useButtonContext } from './ButtonContext.js';
+import { ButtonIcon } from './ButtonIcon.js';
 import { ButtonLabel } from './ButtonLabel.js';
 import { ButtonLoadable } from './ButtonLoadable.js';
 import { ButtonRoot } from './ButtonRoot.js';
@@ -41,14 +41,30 @@ const Button = forwardRef(
       }
       if (icon && !isIconOnly) {
         if (iconPosition === "start") {
-          addonBefore = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon });
+          addonBefore = /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              addon: true,
+              inverse: props.appearance === "primary",
+              size,
+              children: icon
+            }
+          );
         } else if (iconPosition === "end") {
-          addonAfter = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon });
+          addonAfter = /* @__PURE__ */ jsx(
+            ButtonIcon,
+            {
+              addon: true,
+              inverse: props.appearance === "primary",
+              size,
+              children: icon
+            }
+          );
         }
       }
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         addonBefore && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonBefore) }),
-        square ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: children2 ? fallbackSpan(children2) : /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }) : /* @__PURE__ */ jsx(ButtonLabel, { children: children2 }),
+        square ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: children2 ? fallbackSpan(children2) : /* @__PURE__ */ jsx(ButtonIcon, { size, children: icon }) }) : /* @__PURE__ */ jsx(ButtonLabel, { size, children: children2 }),
         addonAfter && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonAfter) })
       ] });
     });

package/dist/esm/packages/react/src/button/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-YgV0ZPi4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BYV2kEqW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1u4wcr4'});
+var buttonGroup = recipeRuntime({base:'_1s0cwly'});
 
 export { buttonGroup };

package/dist/esm/packages/react/src/button/ButtonIcon-css.js

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BYV2kEqW.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-C_lSJukO.css';
+import './../../../../assets/src/button/ButtonIcon.css.ts.vanilla-p_UxYEUC.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon$4 = recipeRuntime({variants:{addon:{false:{size:'sm'},true:{}},inverse:{false:{},true:{}},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:'_164y9i0',variants:{addon:true,size:'sm'}},{style:'eg6coi',variants:{addon:true,size:'md'}},{style:'edunm2',variants:{addon:true,size:'lg'}},{style:[{h:'sm',p:'4',rounded:'sm'},'qtak99'],variants:{inverse:true,size:'lg'}}]});
+
+export { icon$4 as icon };

package/dist/esm/packages/react/src/button/ButtonIcon.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Icon } from '../icon/Icon.js';
+import { icon } from './ButtonIcon-css.js';
+
+const ButtonIcon = forwardRef(
+  ({ addon, children, className, inverse = false, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        asChild: true,
+        ref,
+        ...icon({ addon, inverse, size }, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonIcon.displayName = "@optiaxiom/react/ButtonIcon";
+
+export { ButtonIcon };

package/dist/esm/packages/react/src/button/ButtonLabel.js

@@ -4,9 +4,14 @@ import { forwardRef } from 'react';
 import { Text } from '../text/Text.js';
 import { ButtonLoadable } from './ButtonLoadable.js';
 
+const mapSizeToMargin = {
+  sm: "4",
+  md: "6",
+  lg: "6"
+};
 const ButtonLabel = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Text, { asChild: true, mx: "4", truncate: true, children: /* @__PURE__ */ jsx("div", { ref, ...props, children }) }) });
+  ({ children, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Text, { asChild: true, mx: mapSizeToMargin[size], truncate: true, children: /* @__PURE__ */ jsx("div", { ref, ...props, children }) }) });
   }
 );
 ButtonLabel.displayName = "@optiaxiom/react/ButtonLabel";

package/dist/esm/packages/react/src/button/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-YgV0ZPi4.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-Ct7VHHem.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-pqWf-FQn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BYV2kEqW.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-C_lSJukO.css';
+import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-Dgmw6D4x.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1jdcqtq']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1vqa540']});
 
 export { loadable };

package/dist/esm/packages/react/src/button/ButtonRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-YgV0ZPi4.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-Ct7VHHem.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-BYV2kEqW.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-C_lSJukO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_194syf2',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_1924vwp'],variants:{intent:{danger:'_1v60al0',neutral:'_1tfh9jk',primary:'_1a3k55q'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},square:{false:{},true:{}},variant:{outline:'bofg7j','outline-opal':'_1i8isea',strong:'jjr8to','strong-opal':'_78hcy9',subtle:'_5cpj6a'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'qd23dx',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'o3fk0x',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1f3oxd4',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'abjd85',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'_1i2ofhi']});
+var buttonBase = recipeRuntime({base:['s57c14',{alignItems:'center',display:'inline-flex',flexDirection:'row',fontWeight:'500',justifyContent:'flex-start',transition:'colors'},'_5p301j'],variants:{intent:{danger:'swgqbh',neutral:'_1gdj0cg',primary:'_12p53cr'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',h:'md'},lg:{fontSize:'lg',h:'lg'}},square:{false:{},true:{}},variant:{outline:'q0ll6n','outline-opal':'j1hh3k',strong:'_10m2clh','strong-opal':'_1y28uya',subtle:'b4oy0j'}},variantsCompounded:[{style:[{pl:'6'},'nmxax3'],variants:{intent:'primary',size:'lg',variant:'strong'}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'zsqe2z',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'_1rojgcj',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_2a9oy4',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_3janen',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'de18pv']});
 
 export { buttonBase, spinner };

package/dist/esm/packages/react/src/button/ButtonRoot.js

@@ -58,7 +58,7 @@ const ButtonRoot = forwardRef(
           /* @__PURE__ */ jsx(TransitionGroup, { open: loading, children: /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
             Spinner,
             {
-              appearance: variant === "strong" || variant === "strong-opal" ? "inverse" : "default",
+              appearance: variant === "strong" && intent !== "primary" || variant === "strong-opal" ? "inverse" : "default",
               "aria-hidden": "true",
               ...spinner()
             }

package/dist/esm/packages/react/src/calendar/Calendar-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-C45LtqwZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-Cn3iSAW1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'_10lz5zc'}}});
+var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'_18vg8sx'}}});
 
 export { picker };

package/dist/esm/packages/react/src/calendar/CalendarCaptionLabel.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { IconKeyboardArrowDown } from '@optiaxiom/icons';
 import { CaptionLabel } from 'react-day-picker';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
-import { IconAngleDown } from '../icons/IconAngleDown.js';
 import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { useCalendarContext } from './CalendarContext.js';
 
@@ -18,7 +18,7 @@ function CalendarCaptionLabel({
     Button,
     {
       appearance: "subtle",
-      icon: /* @__PURE__ */ jsx(IconAngleDown, {}),
+      icon: /* @__PURE__ */ jsx(IconKeyboardArrowDown, {}),
       iconPosition: "end",
       onClick: () => {
         if (view === "month") {

package/dist/esm/packages/react/src/calendar/CalendarChevron.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { IconAngleLeft } from '../icons/IconAngleLeft.js';
-import { IconAngleRight } from '../icons/IconAngleRight.js';
+import { IconChevronLeft, IconChevronRight } from '@optiaxiom/icons';
 
 function CalendarChevron({
   orientation,
   ...props
 }) {
-  return orientation === "left" ? /* @__PURE__ */ jsx(IconAngleLeft, { ...props }) : /* @__PURE__ */ jsx(IconAngleRight, { ...props });
+  return orientation === "left" ? /* @__PURE__ */ jsx(IconChevronLeft, { ...props }) : /* @__PURE__ */ jsx(IconChevronRight, { ...props });
 }
 CalendarChevron.displayName = "@optiaxiom/react/CalendarChevron";
 

package/dist/esm/packages/react/src/calendar/CalendarDayButton-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-CQ99OV8P.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-F4yZU6uB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button$2 = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1si3656'],variants:{appearance:{'default':'_156gw6e',holiday:[{color:'fg.error'},'_1q0kgcf'],range_middle:'_1oic4mj',selected:[{color:'fg.white'},'_4v8spq'],weekend:[{color:'fg.tertiary'},'_1nez4wk']},range:{end:['_1cj84cs'],middle:['seojdx'],start:['xfyd89']}}});
-var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'_1ap3a5v']});
+var button$2 = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_14ppajp'],variants:{appearance:{'default':'uuoadb',holiday:[{color:'fg.error'},'_2hnfb5'],range_middle:'_12tuuk1',selected:['d0nufr'],weekend:[{color:'fg.tertiary'},'_1fh0xgl']},range:{end:['_1fx288b'],middle:['_1ckfays'],start:['risboc']}}});
+var today = recipeRuntime({base:[{mx:'auto',rounded:'full'},'_11yq1wi']});
 
 export { button$2 as button, today };

package/dist/esm/packages/react/src/calendar/CalendarGrid-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-Bn0FIviU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-DKnd3c_D.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var grid$1 = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_1ulexuo']});
+var grid$1 = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_1ycnphy']});
 
 export { grid$1 as grid };

package/dist/esm/packages/react/src/calendar/CalendarMonths-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-BNdDrfsD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-GLCgvc8P.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',gap:'16'},'_1unc42j']});
+var months = recipeRuntime({base:[{alignItems:'start',gap:'16'},'c4ltgd']});
 
 export { months };

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-RAdWmDOg.css';
-import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-fenGc7Bz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-DtGY3B09.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-CueGXK1Y.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button$1 = recipeRuntime({base:'_3kfpib'});
+var button$1 = recipeRuntime({base:'zg63bq'});
 
 export { button$1 as button };