@optiaxiom/react 3.0.0-next.0 → 3.0.0-next.2

package/dist/esm/packages/react/src/actions/ActionsRoot-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cmtjywky.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzZ8okVZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:'_10gfv9b'});
+var root = recipeRuntime({base:'_1xccb3'});
 
 export { root };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cmtjywky.css';
-import './../../../../assets/src/alert/Alert.css.ts.vanilla-jch1SynC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/alert/Alert.css.ts.vanilla-Cj-43OHe.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',fontSize:'md',fontWeight:'500',gap:'8',justifyContent:'space-between',p:'12',pr:'16',rounded:'md'}],variants:{intent:{danger:{bg:'bg.error.subtle'},information:{bg:'bg.information.subtle'},neutral:{bg:'bg.secondary'},opal:{backgroundImage:'gradient.opal'},success:{bg:'bg.success.subtle'},warning:{bg:'bg.warning.subtle'}}}});
-var content = recipeRuntime({base:[{flex:'1',flexDirection:'column',gap:'8',justifyContent:'center'},'im3393']});
-var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},opal:{h:'xs',mt:'2'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
+var content$6 = recipeRuntime({base:[{flex:'1',flexDirection:'column',gap:'8',justifyContent:'center'},'pfghb8']});
+var icon$3 = recipeRuntime({base:[{mt:'2'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},opal:{h:'xs'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
-export { alert, content, icon };
+export { alert, content$6 as content, icon$3 as icon };

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

@@ -1,26 +1,22 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { IconTriangleExclamation, IconCheckCircleSolid, IconCircleInfo, IconCircleExclamation, IconXmark } 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 { alert, icon, content } from './Alert-css.js';
+import { icon, content, alert } from './Alert-css.js';
 
 const mapIntentToIcon = {
-  danger: IconCircleExclamationSolid,
-  information: IconCircleInfoSolid,
-  neutral: IconCircleInfoSolid,
+  danger: IconCircleExclamation,
+  information: IconCircleInfo,
+  neutral: IconCircleInfo,
   opal: IconOpal,
-  success: IconCircleCheckSolid,
-  warning: IconTriangleExclamationSolid
+  success: IconCheckCircleSolid,
+  warning: IconTriangleExclamation
 };
 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(IconXmark, {}),
               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-Cmtjywky.css';
-import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-CdFKl0AD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-NXhVULRJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'s7wndh'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'i33y8q'],variants:{size:{sm:'_1mj9kio',md:'zdiwu3',lg:'_3mo5en'}}});
-var nestedDialogCountVar = 'var(--w4aal5)';
-var root = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'0',z:'popover'},'mp9q2z']});
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1kqwak4'}}});
+var content$4 = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_60tyaa'],variants:{size:{sm:'_1mf1msc',md:'_1665y2w',lg:'_1rneih'}}});
+var nestedDialogCountVar = 'var(--_1y56oea)';
+var root$4 = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'0',z:'popover'},'p8b6hy']});
 
-export { backdrop, content, nestedDialogCountVar, root };
+export { backdrop, content$4 as content, nestedDialogCountVar, root$4 as root };

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

@@ -18,7 +18,7 @@ import { Paper } from '../paper/Paper.js';
 import { Portal } from '../portal/Portal.js';
 import { Transition } from '../transition/Transition.js';
 import { TransitionGroup } from '../transition/TransitionGroup.js';
-import { backdrop, root, content, nestedDialogCountVar } from './AlertDialogContent-css.js';
+import { backdrop, content, nestedDialogCountVar, root } from './AlertDialogContent-css.js';
 import { useAlertDialogContext } from './AlertDialogContext.js';
 
 const AlertDialogContent = forwardRef(

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cmtjywky.css';
-import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-BG0jLxCo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-DsyGBMi2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'veexlf']});
+var footer = recipeRuntime({base:[{bg:'bg.default',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1b1txo4']});
 
 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-Cmtjywky.css';
-import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-QgTkZHWl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-yjnMd_eL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'24',pb:'16',z:'10'},'_193lyvp']});
+var header$1 = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'24',pb:'16',z:'10'},'pr9vjc']});
 
-export { header };
+export { header$1 as header };

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

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { IconAngleDown } 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 });

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cmtjywky.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzZ8okVZ.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-CMfGdrTS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-CLs037UM.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'},'_1fm3nyp'],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'},'_1b52q2y'],xs:[{fontWeight:'400',size:'xs'},'dp6a'],sm:[{size:'sm'},'i5lqa3'],md:[{size:'md'},'r6u8aj'],lg:[{size:'lg'},'rxhu8e'],xl:[{size:'xl'},'ov4viw'],'3xl':[{size:'3xl'},'_7y5da0']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flex:'none',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1a0bjhh'],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'},'_1hozhjm'],xs:[{fontWeight:'400',size:'xs'},'_16v1dq2'],sm:[{size:'sm'},'_1oia5an'],md:[{size:'md'},'md84uh'],lg:[{size:'lg'},'_18dws5e'],xl:[{size:'xl'},'bteelf'],'3xl':[{size:'3xl'},'_1sfpycq']}}});
 var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
-var icon = 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'},'hldh04'],sm:{h:'16'},md:{h:'xs'},lg:{h:'sm'},xl:{h:'sm'},'3xl':{h:'lg'}}}});
 
-export { avatar, fallback, icon };
+export { avatar, fallback, icon$2 as icon };

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

@@ -1,14 +1,13 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { IconUser, IconUserGroup } 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 { avatar, fallback, icon } from './Avatar-css.js';
+import { icon, fallback, avatar } from './Avatar-css.js';
 import { useAvatarContext } from './AvatarContext.js';
 
 function getInitialsFromName(name) {
@@ -19,8 +18,8 @@ function getInitialsFromName(name) {
 }
 const mapFallbackToIcon = {
   opal: null,
-  team: /* @__PURE__ */ jsx(IconUsersSolid, {}),
-  user: /* @__PURE__ */ jsx(IconUserSolid, {})
+  team: /* @__PURE__ */ jsx(IconUserGroup, {}),
+  user: /* @__PURE__ */ jsx(IconUser, { 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-Cmtjywky.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzZ8okVZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_1rdw8wx',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['xnvlmt',{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-Cmtjywky.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-gBMAQQoi.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-D8Z_m5kh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'oqtou0']});
+var backdrop$2 = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1ril0rt']});
 
-export { backdrop };
+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-Cmtjywky.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-BgoV-2rb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-DTVNMu_y.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_1ylqd38'],variants:{intent:{danger:'govvet',information:'_1hcx3g8',neutral:'f9ofp2',primary:'_1huf65i',success:'_17mccwr',warning:'o3bdng'},variant:{strong:'z13ns7',subtle:'_1kt6oio'}}});
+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'},'xccipj'],variants:{intent:{danger:'_15nyapi',information:'_1375gu6',neutral:'_1gpavfp',primary:'_1gxr7a',success:'lvjnce',warning:'ivwc9v'},variant:{strong:'uxq4r0',subtle:'ywj37q'}}});
 
-export { badge };
+export { badge$1 as badge };

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

@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { Text } from '../text/Text.js';
 import { badge } from './Badge-css.js';
 
-const Slot = createSlot("@optiaxiom/react/Badge");
+const Slot$8 = createSlot("@optiaxiom/react/Badge");
 const Badge = forwardRef(
   ({
     asChild,
@@ -15,7 +15,7 @@ const Badge = forwardRef(
     variant = "subtle",
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot : "span";
+    const Comp = asChild ? Slot$8 : "span";
     return /* @__PURE__ */ jsx(
       Text,
       {

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cmtjywky.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-ACa7k2uu.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-CInwWDbL.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 = recipeRuntime({base:[{flex:'1',flexDirection:'column',gap:'8',justifyContent:'center'},'_1izoev7']});
-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'}}}});
+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'},'wgjyd4']});
+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, icon };
+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 { IconTriangleExclamation, IconCheckCircleSolid, IconCircleInfo, IconCircleExclamation, IconXmark } 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 { banner, icon, content } from './Banner-css.js';
+import { icon, content, banner } from './Banner-css.js';
 
 const mapIntentToIcon = {
-  danger: IconCircleExclamationSolid,
-  information: IconCircleInfoSolid,
-  neutral: IconCircleInfoSolid,
-  success: IconCircleCheckSolid,
-  warning: IconTriangleExclamationSolid
+  danger: IconCircleExclamation,
+  information: IconCircleInfo,
+  neutral: IconCircleInfo,
+  success: IconCheckCircleSolid,
+  warning: IconTriangleExclamation
 };
 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(IconXmark, {}),
               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-Cmtjywky.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-GdL3Ix17.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-CN5wNauw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-CnCa-4tV.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-D9S-5aMb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_4o68r6'});
+var box = recipeRuntime({base:'_18wg58x'});
 
 export { box };

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

@@ -9,10 +9,10 @@ import { sprinklesMerge } from '../sprinkles/sprinklesMerge.js';
 import { box } from './Box-css.js';
 import { extractBoxProps } from './extractBoxProps.js';
 
-const Slot = createSlot("@optiaxiom/react/Box");
+const Slot$f = createSlot("@optiaxiom/react/Box");
 const Box = forwardRef(
   ({ asChild, className, style, ...props }, ref) => {
-    const Comp = asChild ? Slot : "div";
+    const Comp = asChild ? Slot$f : "div";
     const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
       Comp,

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cmtjywky.css';
-import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-DIcrnXLg.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-DarTdFX1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:'_5hs6wa'});
-var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_1od185e']});
+var link = recipeRuntime({base:'_1imu50u'});
+var list$2 = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_78pml7']});
 
-export { link, list };
+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 { IconEllipsisStroke } 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(IconEllipsisStroke, {}) })
         }
       ),
       /* @__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-Cmtjywky.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-CGTch8Fa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-CPX6cLj2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_1f4n4p4']});
+var item$2 = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'u2m9rp']});
 
-export { item };
+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,16 +10,12 @@ 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';
 
-const Slot = createSlot("@optiaxiom/react/Button");
-const iconSizeMap = {
-  sm: "2xs",
-  md: "xs",
-  lg: "sm"
-};
+const Slot$b = createSlot("@optiaxiom/react/Button");
 const Button = forwardRef(
   ({
     addonAfter,
@@ -34,7 +29,7 @@ const Button = forwardRef(
     square,
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot$b : "button";
     const context = useButtonContext("@optiaxiom/react/Button");
     const surface = useSurface("action");
     const size = sizeProp || context.size || "md";
@@ -46,14 +41,30 @@ const Button = forwardRef(
       }
       if (icon && !isIconOnly) {
         if (iconPosition === "start") {
-          addonBefore = /* @__PURE__ */ jsx(Icon, { asChild: true, h: iconSizeMap[size], 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, h: iconSizeMap[size], 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, h: iconSizeMap[size], 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-Cmtjywky.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzZ8okVZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1nlco36'});
+var buttonGroup = recipeRuntime({base:'_1k7fv9m'});
 
 export { buttonGroup };

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

@@ -0,0 +1,9 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BAmCsSGt.css';
+import './../../../../assets/src/button/ButtonIcon.css.ts.vanilla-Dq5PvxSU.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var icon$4 = recipeRuntime({variants:{addon:{false:'a36mq3',true:{}},inverse:{false:{},true:{}},size:{sm:{},md:{},lg:{}}},variantsCompounded:[{style:'a71y09',variants:{addon:true,size:'sm'}},{style:'rhvj90',variants:{addon:true,size:'md'}},{style:'zkdv8n',variants:{addon:true,size:'lg'}},{style:[{rounded:'sm'},'_12yh0k2'],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: "8", 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-Cmtjywky.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzZ8okVZ.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DZrGLbKa.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-BkGVjV7D.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BAmCsSGt.css';
+import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-Di_XYSJU.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'sdjz3t']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1vcbo1v']});
 
 export { loadable };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Cmtjywky.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DzZ8okVZ.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DZrGLbKa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-CjfsrNSJ.css';
+import './../../../../assets/src/avatar/AvatarGroup.css.ts.vanilla-aK308P49.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BAmCsSGt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_15v0299',{alignItems:'center',display:'inline-flex',flexDirection:'row',fontWeight:'500',justifyContent:'flex-start',transition:'colors'},'_1oz6gxm'],variants:{intent:{danger:'_1xhzgdw',neutral:'tma593',primary:'_1bv967g'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',h:'md'},lg:{fontSize:'lg',h:'lg'}},square:{false:{},true:{}},variant:{outline:'_2vqrxv','outline-opal':'_1p146ow',strong:'jd9xqi','strong-opal':'_1pyq9id',subtle:'_1oa1cnz'}},variantsCompounded:[{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'t4psfo',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'_1uzrfni',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_167gqfk',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_18a65or',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'j2zk8m']});
+var buttonBase = recipeRuntime({base:['is8xcs',{alignItems:'center',display:'inline-flex',flexDirection:'row',fontWeight:'500',justifyContent:'flex-start',transition:'colors'},'_1pmidff'],variants:{intent:{danger:'_1t92tbc',neutral:'_1ekr0wz',primary:'z9l255'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',h:'md'},lg:{fontSize:'lg',h:'lg'}},square:{false:{},true:{}},variant:{outline:'rp9z99','outline-opal':'_183hoyc',strong:'_1li977x','strong-opal':'sgllj2',subtle:'_5qhk0t'}},variantsCompounded:[{style:[{pl:'6'},'_1jzrlbu'],variants:{intent:'primary',size:'lg',variant:'strong'}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_1o3jbf9',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'bxwfdd',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1h6zsnw',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'qm0ken',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'l7u4e2']});
 
 export { buttonBase, spinner };

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

@@ -12,7 +12,7 @@ import { decorateChildren } from '../utils/decorateChildren.js';
 import '../utils/isHoverSupported.js';
 import { buttonBase, spinner } from './ButtonRoot-css.js';
 
-const Slot = createSlot("@optiaxiom/react/ButtonRoot");
+const Slot$c = createSlot("@optiaxiom/react/ButtonRoot");
 const appearances = {
   danger: { intent: "danger", variant: "strong" },
   "danger-outline": { intent: "danger", variant: "outline" },
@@ -35,7 +35,7 @@ const ButtonRoot = forwardRef(
     square,
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot$c : "button";
     const { boxProps, restProps } = extractBoxProps(props);
     const { intent, variant } = appearances[appearance];
     return /* @__PURE__ */ jsx(