@optiaxiom/react 1.7.13 → 1.8.1

package/dist/esm/node_modules/.pnpm/@mantine_hooks@8.2.5_react@18.3.1/node_modules/@mantine/hooks/esm/use-debounced-callback/use-debounced-callback.js

@@ -0,0 +1,93 @@
+"use client";
+import { useRef, useMemo, useEffect } from 'react';
+import { useCallbackRef } from '../utils/use-callback-ref/use-callback-ref.js';
+
+function useDebouncedCallback(callback, options) {
+  const { delay, flushOnUnmount, leading } = { delay: options, flushOnUnmount: false, leading: false } ;
+  const handleCallback = useCallbackRef(callback);
+  const debounceTimerRef = useRef(0);
+  const lastCallback = useMemo(() => {
+    const currentCallback = Object.assign(
+      (...args) => {
+        window.clearTimeout(debounceTimerRef.current);
+        const isFirstCall = currentCallback._isFirstCall;
+        currentCallback._isFirstCall = false;
+        function clearTimeoutAndLeadingRef() {
+          window.clearTimeout(debounceTimerRef.current);
+          debounceTimerRef.current = 0;
+          currentCallback._isFirstCall = true;
+        }
+        if (leading && isFirstCall) {
+          handleCallback(...args);
+          const resetLeadingState = () => {
+            clearTimeoutAndLeadingRef();
+          };
+          const flush2 = () => {
+            if (debounceTimerRef.current !== 0) {
+              clearTimeoutAndLeadingRef();
+              handleCallback(...args);
+            }
+          };
+          const cancel2 = () => {
+            clearTimeoutAndLeadingRef();
+          };
+          currentCallback.flush = flush2;
+          currentCallback.cancel = cancel2;
+          debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);
+          return;
+        }
+        if (leading && !isFirstCall) {
+          const flush2 = () => {
+            if (debounceTimerRef.current !== 0) {
+              clearTimeoutAndLeadingRef();
+              handleCallback(...args);
+            }
+          };
+          const cancel2 = () => {
+            clearTimeoutAndLeadingRef();
+          };
+          currentCallback.flush = flush2;
+          currentCallback.cancel = cancel2;
+          const resetLeadingState = () => {
+            clearTimeoutAndLeadingRef();
+          };
+          debounceTimerRef.current = window.setTimeout(resetLeadingState, delay);
+          return;
+        }
+        const flush = () => {
+          if (debounceTimerRef.current !== 0) {
+            clearTimeoutAndLeadingRef();
+            handleCallback(...args);
+          }
+        };
+        const cancel = () => {
+          clearTimeoutAndLeadingRef();
+        };
+        currentCallback.flush = flush;
+        currentCallback.cancel = cancel;
+        debounceTimerRef.current = window.setTimeout(flush, delay);
+      },
+      {
+        flush: () => {
+        },
+        cancel: () => {
+        },
+        _isFirstCall: true
+      }
+    );
+    return currentCallback;
+  }, [handleCallback, delay, leading]);
+  useEffect(
+    () => () => {
+      if (flushOnUnmount) {
+        lastCallback.flush();
+      } else {
+        lastCallback.cancel();
+      }
+    },
+    [lastCallback, flushOnUnmount]
+  );
+  return lastCallback;
+}
+
+export { useDebouncedCallback };

package/dist/esm/node_modules/.pnpm/@mantine_hooks@8.2.5_react@18.3.1/node_modules/@mantine/hooks/esm/utils/use-callback-ref/use-callback-ref.js

@@ -0,0 +1,12 @@
+"use client";
+import { useRef, useEffect, useMemo } from 'react';
+
+function useCallbackRef(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return useMemo(() => (...args) => callbackRef.current?.(...args), []);
+}
+
+export { useCallbackRef };

package/dist/esm/packages/react/package.json.js

@@ -1,3 +1,3 @@
-var version = "1.7.13";
+var version = "1.8.1";
 
 export { version };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/actions/ActionsContent.css.ts.vanilla-xcTzrEuj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/actions/ActionsContent.css.ts.vanilla-B5DCuqsb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'space-between'},'u4kkku'],variants:{visible:{always:'_1clbfyu','if-needed':'_151l1dt'}}});
+var content = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'space-between'},'_13gdn3d'],variants:{visible:{always:'_11dds98','if-needed':'_3rhh2z'}}});
 
 export { content };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:'_17gl504'});
+var root = recipeRuntime({base:'_19zxffw'});
 
 export { root };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/alert/Alert.css.ts.vanilla-D1EWFUSM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/alert/Alert.css.ts.vanilla-AeFnPihO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var alert = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',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',gap:'8',justifyContent:'center'},'_1q5j698']});
+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'},'_1svi0ie']});
 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'}}}});
 
 export { alert, content, icon };

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

@@ -4,7 +4,7 @@ import { useId } from '@radix-ui/react-id';
 import { forwardRef, createElement } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
-import { Flex } from '../flex/Flex.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';
@@ -26,7 +26,7 @@ const Alert = forwardRef(
   ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
     const labelId = useId();
     return /* @__PURE__ */ jsxs(
-      Flex,
+      Group,
       {
         "aria-labelledby": labelId,
         ref,
@@ -35,7 +35,7 @@ const Alert = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
-          /* @__PURE__ */ jsx(Flex, { id: labelId, ...content(), children }),
+          /* @__PURE__ */ jsx(Group, { id: labelId, ...content(), children }),
           !!onDismiss && /* @__PURE__ */ jsx(
             Button,
             {

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

@@ -2,15 +2,17 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 
 const AlertDialogBody = forwardRef(
   ({ children, ...props }, ref) => /* @__PURE__ */ jsx(
-    Flex,
+    Group,
     {
       asChild: true,
       flex: "1",
+      flexDirection: "column",
       fontSize: "md",
+      gap: "16",
       px: "24",
       py: "16",
       ref,

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-BnElOmOC.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-BDrpUAjw.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1ggo5h8'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'rje61q'],variants:{size:{sm:'_1a2g1gl',md:'_1fde9wh',lg:'_1q429pv'}}});
-var nestedDialogCountVar = 'var(--_12mgu31)';
-var root = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_15q2nrg']});
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1vef9yd'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'mvfr6h'],variants:{size:{sm:'_1j4p05h',md:'_3yf0b6',lg:'_1m52uj6'}}});
+var nestedDialogCountVar = 'var(--eula73)';
+var root = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'0',z:'popover'},'_11vw2f8']});
 
 export { backdrop, content, nestedDialogCountVar, root };

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

@@ -11,9 +11,9 @@ import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
 import '../dialog-kit/DialogKitProvider.js';
-import { Flex } from '../flex/Flex.js';
 import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
 import '../focus-bookmark/FocusBookmarkRestore.js';
+import { Group } from '../group/Group.js';
 import { Paper } from '../paper/Paper.js';
 import { Portal } from '../portal/Portal.js';
 import { Transition } from '../transition/Transition.js';
@@ -62,7 +62,7 @@ const AlertDialogContent = forwardRef(
               children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {})
             }
           ) }),
-          /* @__PURE__ */ jsxs(Flex, { ...root(), children: [
+          /* @__PURE__ */ jsxs(Group, { ...root(), children: [
             /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
             /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(
               Paper,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-CpCp6rFA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-BFnEMPVA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'gxnk44']});
+var footer = recipeRuntime({base:[{bg:'bg.default',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'azzjnz']});
 
 export { footer };

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

@@ -2,11 +2,11 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { ButtonProvider } from '../button/ButtonContext.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { footer } from './AlertDialogFooter-css.js';
 
 const AlertDialogFooter = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsx(Flex, { ...footer({}, className), ref, ...props, children }) });
+  return /* @__PURE__ */ jsx(ButtonProvider, { size: "lg", children: /* @__PURE__ */ jsx(Group, { ...footer({}, className), ref, ...props, children }) });
 });
 AlertDialogFooter.displayName = "@optiaxiom/react/AlertDialogFooter";
 

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-BEK85f-5.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-Dib8qJEt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'24',pb:'16',z:'10'},'_15ex5rr']});
+var header = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'24',pb:'16',z:'10'},'_1nzqpvn']});
 
 export { header };

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

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Heading } from '../heading/Heading.js';
 import { Icon } from '../icon/Icon.js';
 import '../utils/conditions.js';
@@ -11,7 +11,7 @@ import '../utils/isHoverSupported.js';
 import { header } from './AlertDialogHeader-css.js';
 
 const AlertDialogHeader = forwardRef(({ addonBefore, children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(Flex, { ref, ...header({}, className), ...props, children: [
+  return /* @__PURE__ */ jsxs(Group, { ref, ...header({}, className), ...props, children: [
     /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", children: addonBefore && fallbackSpan(addonBefore) }),
     /* @__PURE__ */ jsx(Heading, { asChild: true, color: "fg.default", fontWeight: "500", level: "3", children: /* @__PURE__ */ jsx(RadixDialog.Title, { children }) })
   ] });

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-BBotg2z_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-Bi5TvME6.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'},'qrpvza'],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'},'m8n1fv'],xs:[{fontWeight:'400',size:'xs'},'fw3j4i'],sm:[{size:'sm'},'_106v254'],md:[{size:'md'},'ruc6yj'],lg:[{size:'lg'},'_17p4xtx'],xl:[{size:'xl'},'u5obl1'],'3xl':[{size:'3xl'},'_1ljwf6b']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flex:'none',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1gdx57p'],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'},'_1f5rafo'],xs:[{fontWeight:'400',size:'xs'},'_1otywmi'],sm:[{size:'sm'},'_1xsomnn'],md:[{size:'md'},'qxefm6'],lg:[{size:'lg'},'_1y9p1r2'],xl:[{size:'xl'},'_1sixhws'],'3xl':[{size:'3xl'},'_1nvn40p']}}});
 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'}}}});
 

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['_1qr6lcd',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['t5we1t',{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-Dql4wsub.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-BRUq7Gcb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CH0AOIxR.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1pqamiu']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'yuy1ac']});
 
 export { backdrop };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-CNh3dzY4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-ClO_9IeE.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'},'elh5bu'],variants:{intent:{danger:'dln8lz',information:'zljm90',neutral:'g70r8s',primary:'_134kcxj',success:'dmqxrg',warning:'_1ha4g2i'},variant:{strong:'_1kg33fe',subtle:'_14feb6o'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',flex:'none',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_1s6zu04'],variants:{intent:{danger:'fa76y4',information:'_1b6emai',neutral:'_1wixw7z',primary:'kzh8fi',success:'_1q2c65n',warning:'_1o8xsgc'},variant:{strong:'_1uc5l57',subtle:'kfsfs'}}});
 
 export { badge };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-CnROvbAQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-CW2pUndj.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',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',gap:'8',justifyContent:'center'},'tal4d0']});
+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'},'_1g3ehcc']});
 var icon = recipeRuntime({base:[{mt:'4'}],variants:{intent:{danger:{color:'fg.error.strong'},information:{color:'fg.information.strong'},neutral:{color:'fg.tertiary'},success:{color:'fg.success.strong'},warning:{color:'fg.warning.strong'}}}});
 
 export { banner, content, icon };

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

@@ -4,7 +4,7 @@ import { useId } from '@radix-ui/react-id';
 import { forwardRef, createElement } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
-import { Flex } from '../flex/Flex.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';
@@ -24,7 +24,7 @@ const Banner = forwardRef(
   ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
     const labelId = useId();
     return /* @__PURE__ */ jsxs(
-      Flex,
+      Group,
       {
         "aria-labelledby": labelId,
         ref,
@@ -33,7 +33,7 @@ const Banner = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
-          /* @__PURE__ */ jsx(Flex, { id: labelId, ...content(), children }),
+          /* @__PURE__ */ jsx(Group, { id: labelId, ...content(), children }),
           !!onDismiss && /* @__PURE__ */ jsx(
             Button,
             {

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-Dk5sE9z0.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-Bp7c1dm4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-BB7CYd5B.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-ClZDfclT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'slmaeh'});
+var box = recipeRuntime({base:'_16yt15m'});
 
 export { box };

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

@@ -11,7 +11,7 @@ import { extractBoxProps } from './extractBoxProps.js';
 
 const Slot = createSlot("@optiaxiom/react/Box");
 const Box = forwardRef(
-  ({ asChild, className, ...props }, ref) => {
+  ({ asChild, className, style, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
     const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
@@ -19,6 +19,7 @@ const Box = forwardRef(
       {
         "data-axiom": version,
         ref,
+        style,
         ...box({}, sprinklesMerge(className, sprinkles(boxProps))),
         ...restProps
       }

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

@@ -5,7 +5,7 @@ function extractBoxProps(props) {
   const boxProps = {};
   const restProps = {};
   for (const [name, value] of Object.entries(props)) {
-    if (name === "className" || name === "styles" || sprinkles.properties.has(name)) {
+    if (name === "className" || name === "style" || sprinkles.properties.has(name)) {
       if (value !== null && value !== void 0) {
         boxProps[name] = value;
       }

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-Bckkqizl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-B1Xlkfp7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:'qb6cet'});
-var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'n33xj6']});
+var link = recipeRuntime({base:'_1mnsfsi'});
+var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_1galurm']});
 
 export { link, list };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-CgW5pwLh.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-BmM3aiVW.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'ybyryp']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_19xilxq']});
 
 export { item };

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

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
@@ -14,7 +14,7 @@ const BreadcrumbNode = forwardRef(
     const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(Box, { asChild: true, ...item({}, className), ...boxProps, children: /* @__PURE__ */ jsxs("li", { ref, ...restProps, children: [
       children,
-      addonAfter && /* @__PURE__ */ jsx(Flex, { asChild: true, flex: "none", flexDirection: "row", gap: "4", children: fallbackSpan(addonAfter) })
+      addonAfter && /* @__PURE__ */ jsx(Group, { asChild: true, flex: "none", gap: "4", children: fallbackSpan(addonAfter) })
     ] }) });
   }
 );

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

@@ -3,6 +3,8 @@ import { jsxs, Fragment, jsx } 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';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
@@ -22,12 +24,14 @@ const Button = forwardRef(
     children,
     icon,
     iconPosition = "start",
+    onClick,
     size: sizeProp,
     square,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
     const context = useButtonContext("@optiaxiom/react/Button");
+    const surface = useSurface("action");
     const size = sizeProp || context.size || "md";
     let isIconOnly = false;
     children = decorateChildren({ asChild, children }, (children2) => {
@@ -61,6 +65,12 @@ const Button = forwardRef(
       {
         asChild: true,
         justifyContent: square ? "center" : iconPosition === "end" ? "space-between" : "flex-start",
+        onClick: (event) => {
+          onClick?.(event);
+          if (surface) {
+            surface.track({ name: "invoked" });
+          }
+        },
         ref,
         size,
         square,

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1a405fv'});
+var buttonGroup = recipeRuntime({base:'lohau6'});
 
 export { buttonGroup };

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

@@ -1,13 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { buttonGroup } from './ButtonGroup-css.js';
 
 const ButtonGroup = forwardRef(
   ({ children, className, gap = "0", orientation = "horizontal", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
-      Flex,
+      Group,
       {
         "data-orientation": gap === "0" ? orientation : void 0,
         flexDirection: orientation === "vertical" ? "column" : "row",

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-D_lkRk1X.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-BPd-X2i3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DFcg7Xy4.css';
+import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-OmydsJ52.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'wtgsqm']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1rb4hso']});
 
 export { loadable };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-D_lkRk1X.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-DFcg7Xy4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['es8q60',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_1yiyvam'],variants:{intent:{danger:'_1y52cs8',neutral:'_1sgepua',primary:'_166voj1'},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:'_147ip66','outline-opal':'_1dc5hiv',strong:'ng3vsx','strong-opal':'_14feluo',subtle:'g3yz3a'}},variantsCompounded:[{style:'twrqhz',variants:{size:['sm','md'],variant:['outline-opal','strong-opal']}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'phrdp5',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'_3av8wd',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1xk1zlq',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_9uom00',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'_14v1lwb']});
+var buttonBase = recipeRuntime({base:['un8x29',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_15wqmn0'],variants:{intent:{danger:'_6l6tpz',neutral:'rt37g8',primary:'ggdbll'},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:'_5hwwus','outline-opal':'i40lbo',strong:'_1w8bl07','strong-opal':'dlr6xb',subtle:'i350jb'}},variantsCompounded:[{style:'_7393ku',variants:{size:['sm','md'],variant:['outline-opal','strong-opal']}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_5c48cm',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'p1u1fr',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'_1fg0cnx',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'n6szhs',variants:{size:'lg',square:false}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'_1tqbyd4']});
 
 export { buttonBase, spinner };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-BREYfr6S.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-BmKLCWYL.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'mkqg8d'}}});
+var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'_1bhsm8a'}}});
 
 export { picker };