@optiaxiom/react 1.8.0 → 1.8.1

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.8.0";
+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-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/actions/ActionsContent.css.ts.vanilla-CIPKnVwJ.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'},'nsbmik'],variants:{visible:{always:'_12i0o00','if-needed':'_1ngayl3'}}});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.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:'_1i32x9l'});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/alert/Alert.css.ts.vanilla-B2feya8L.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',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'},'_17ufaog']});
+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-dialog/AlertDialogContent-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-DbH_XZ1B.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:'_1ospztu'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_15hffhp'],variants:{size:{sm:'qunocg',md:'ikxh40',lg:'js0mum'}}});
-var nestedDialogCountVar = 'var(--s5u39j)';
-var root = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'0',z:'popover'},'cthiln']});
+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/AlertDialogFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-DzPVUes3.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',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1ax7c37']});
+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/AlertDialogHeader-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-BEeG3LeL.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',gap:'8',p:'24',pb:'16',z:'10'},'demxki']});
+var header = recipeRuntime({base:[{bg:'bg.default',gap:'8',p:'24',pb:'16',z:'10'},'_1nzqpvn']});
 
 export { header };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-6C6pZtoC.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'},'_1jvbssy'],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'},'wb3ctc'],xs:[{fontWeight:'400',size:'xs'},'qrb3j9'],sm:[{size:'sm'},'hw58g1'],md:[{size:'md'},'ae7d43'],lg:[{size:'lg'},'_1ptrohs'],xl:[{size:'xl'},'_1weftay'],'3xl':[{size:'3xl'},'_1wdce50']}}});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.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:['st8ml2',{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-DRA_4QUJ.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CoojNkT3.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'},'_14vvjxa']});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-BRRJVWv8.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'},'_1vuww68'],variants:{intent:{danger:'_1utvw63',information:'_35r64j',neutral:'qt5a1r',primary:'_19dv6p5',success:'u2f0vs',warning:'u8mgsu'},variant:{strong:'_1kwqd94',subtle:'bi92e9'}}});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-DizDI6wf.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',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'},'_1vex4dl']});
+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/box/Box-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-BGzzfwpF.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-Dbo87Hg_.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:'_1fn2yl8'});
+var box = recipeRuntime({base:'_16yt15m'});
 
 export { box };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-4ARFLvzY.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:'_3y7y72'});
-var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_1hn2cty']});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-B3mCOuUI.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'},'uc0huh']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_19xilxq']});
 
 export { item };

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-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.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:'_164lvie'});
+var buttonGroup = recipeRuntime({base:'lohau6'});
 
 export { buttonGroup };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B39dsJVj.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-9-Q500PR.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'},'_1ykbd3p']});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-B39dsJVj.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:['_1dajkkn',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'flex-start',transition:'colors'},'_1o6hj36'],variants:{intent:{danger:'wpu8ka',neutral:'othj5r',primary:'_1ldskd1'},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:'b8gfb8','outline-opal':'i4to5w',strong:'xqv9zl','strong-opal':'mbe281',subtle:'_185v6hx'}},variantsCompounded:[{style:'a0cugw',variants:{size:['sm','md'],variant:['outline-opal','strong-opal']}},{style:{w:'sm'},variants:{size:'sm',square:true}},{style:'_10107el',variants:{size:'sm',square:false,variant:['outline','strong','subtle']}},{style:'ocwaea',variants:{size:'sm',square:false,variant:['outline-opal','strong-opal']}},{style:{w:'md'},variants:{size:'md',square:true}},{style:'td1236',variants:{size:'md',square:false}},{style:{w:'lg'},variants:{size:'lg',square:true}},{style:'_71fgvr',variants:{size:'lg',square:false}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'ed3yws']});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-CCWjYTzv.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:'hegz2g'}}});
+var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'_1bhsm8a'}}});
 
 export { picker };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-CaXsLGN4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-DQvNx7tA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_15tquye'],variants:{appearance:{'default':'gvhv4q',holiday:[{color:'fg.error'},'qhivh2'],range_middle:'xsqg16',selected:[{color:'fg.white'},'_1anm5rr'],weekend:[{color:'fg.tertiary'},'_1i5whfz']},range:{end:['etlkld'],middle:['rz1b8f'],start:['_13og2o1']}}});
-var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'vefahy']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1jugbj6'],variants:{appearance:{'default':'apzmtc',holiday:[{color:'fg.error'},'ha0flv'],range_middle:'ej2fd0',selected:[{color:'fg.white'},'_1dszu1b'],weekend:[{color:'fg.tertiary'},'srzdbh']},range:{end:['_2k7bn9'],middle:['_1d8ldm'],start:['_1p9jd6t']}}});
+var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'r1nnso']});
 
 export { button, today };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-CsU9y-Vq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-BrudO6CI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_16esce5']});
+var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_1cv8n04']});
 
 export { grid };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-DaXFFaYb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-zMAPAF3B.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',gap:'16'},'qsq877']});
+var months = recipeRuntime({base:[{alignItems:'start',gap:'16'},'lgbywt']});
 
 export { months };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-DKVUiRJa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-DJWNq4a-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_15ergqz'});
+var button = recipeRuntime({base:'_9mr1dn'});
 
 export { button };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-D5KcwPgq.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-BEXFVZCa.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_54xtg7'});
+var button = recipeRuntime({base:'tafzum'});
 
 export { button };

package/dist/esm/packages/react/src/card/Card-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-4DhuLKkI.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-bu_i0wI0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-UTrcK4Fi.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-CSbxEpUk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['_1eo5yn0',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',p:'16'},'_17le2ij']});
+var card = recipeRuntime({base:['_1fc1j8q',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',p:'16'},'_1wnd2hv']});
 
 export { card };

package/dist/esm/packages/react/src/card/CardCheckbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-pq9LIF-a.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-_R6ZH1Ik.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:['iqzc86']});
+var checkbox = recipeRuntime({base:['_13gmzz3']});
 
 export { checkbox };

package/dist/esm/packages/react/src/card/CardHeader-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-IPETcvMo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/card/CardHeader.css.ts.vanilla-nHVA2Bhp.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{flex:'none',gap:'8'}],variants:{slot:{after:'i3pqr8',before:'_63js3q'}}});
-var content = recipeRuntime({base:[{flex:'1'},'_1vh8hno']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',gap:'12',justifyContent:'space-between'},'_19zxp9d']});
+var addon = recipeRuntime({base:[{flex:'none',gap:'8'}],variants:{slot:{after:'_3qjrwu',before:'_1vl31w4'}}});
+var content = recipeRuntime({base:[{flex:'1'},'vftqbf']});
+var header = recipeRuntime({base:[{alignSelf:'stretch',gap:'12',justifyContent:'space-between'},'_12oqg9w']});
 
 export { addon, content, header };

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var image = recipeRuntime({base:{objectFit:'cover',rounded:'inherit',size:'full'}});

package/dist/esm/packages/react/src/card/CardPreview-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-y6szX9hK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/card/CardPreview.css.ts.vanilla-DwZX_RLV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_12qrlno']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'szjpnl']});
+var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'uu6rrb']});
+var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_169b7it']});
 
 export { overlay, preview };

package/dist/esm/packages/react/src/checkbox/Checkbox.js

@@ -1,12 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef } from 'react';
+import '../suggestion/Suggestion.js';
+import { SuggestionPopover } from '../suggestion/SuggestionPopover.js';
 import { CheckboxContent } from './CheckboxContent.js';
 import { CheckboxControl } from './CheckboxControl.js';
 import { CheckboxRoot } from './CheckboxRoot.js';
 
 const Checkbox = forwardRef(
-  ({ children, description, indeterminate, ...props }, ref) => {
+  ({ children, description, indeterminate, ...props }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
     return /* @__PURE__ */ jsxs(
       CheckboxRoot,
       {
@@ -21,7 +26,14 @@ const Checkbox = forwardRef(
               shift: Boolean(children)
             }
           ),
-          (children || description) && /* @__PURE__ */ jsx(CheckboxContent, { description, children })
+          (children || description) && /* @__PURE__ */ jsx(CheckboxContent, { description, children }),
+          props.checked !== void 0 && /* @__PURE__ */ jsx(
+            SuggestionPopover,
+            {
+              currentValue: props.checked,
+              style: { marginTop: -2 }
+            }
+          )
         ]
       }
     );

package/dist/esm/packages/react/src/checkbox/CheckboxControl-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DR0szHMw.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-FnNV3P-x.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CzOv6YKg.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-B_1qvg20.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'rwqowt'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_1lxac8g']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_17ettn3'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_1wjzp77']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
 
 export { control, icon, indicator };

package/dist/esm/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-B_SYV4kd.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-WpaSI5Z1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_2a54hf']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_1s3k2vc']});
 
 export { code };

package/dist/esm/packages/react/src/command/CommandItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/command/CommandItem.css.ts.vanilla-DMwQexME.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/command/CommandItem.css.ts.vanilla-BWEtopw1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var detail = recipeRuntime({base:[{color:'fg.secondary'},'iwwxzu']});
+var detail = recipeRuntime({base:[{color:'fg.secondary'},'_10d0b3r']});
 
 export { detail };

package/dist/esm/packages/react/src/command/CommandItem.js

@@ -2,10 +2,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
+import '../avatar/AvatarGroup.js';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
+import { filterSuggestionsBySurface } from '../surface/filterSuggestionsBySurface.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
@@ -40,6 +45,22 @@ const CommandItem = forwardRef(
       highlightedItem === item ? highlightedItemRef : void 0,
       outerRef
     );
+    const surface = useSurface();
+    const itemSuggestions = item.surface?.type === "property" ? filterSuggestionsBySurface(
+      surface?.suggestions.filter((s) => s.type === "value"),
+      surface?.path,
+      [
+        {
+          name: item.surface.name,
+          type: "property"
+        }
+      ]
+    ) : void 0;
+    const isSuggested = item.surface?.type === "property" && itemSuggestions?.some((s) => {
+      if (item.surface?.type !== "property")
+        return false;
+      return s.value === item.surface.value;
+    }) && !resolveItemProperty(item.selected);
     const itemProps = downshift.getItemProps({
       "aria-posinset": index + 1,
       "aria-selected": selected ?? resolveItemProperty(item.selected),
@@ -119,6 +140,7 @@ const CommandItem = forwardRef(
               /* @__PURE__ */ jsx(Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
             ] }),
             resolveItemProperty(item.label, { inputValue }),
+            isSuggested && /* @__PURE__ */ jsx(Avatar, { fallback: "opal", size: "2xs" }),
             detail$1 && /* @__PURE__ */ jsx(Text, { asChild: true, truncate: true, ...detail(), children: fallbackSpan(detail$1) })
           ] })
         )