@optiaxiom/react 1.6.6 → 1.6.7

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

@@ -17,9 +17,10 @@ const appearances = {
   danger: { intent: "danger", variant: "strong" },
   "danger-outline": { intent: "danger", variant: "outline" },
   default: { intent: "neutral", variant: "outline" },
+  "default-opal": { intent: "neutral", variant: "outline-opal" },
   inverse: { intent: "neutral", variant: "strong" },
   primary: { intent: "primary", variant: "strong" },
-  "primary-opal": { intent: "primary", variant: "opal" },
+  "primary-opal": { intent: "primary", variant: "strong-opal" },
   subtle: { intent: "neutral", variant: "subtle" }
 };
 const ButtonRoot = forwardRef(
@@ -57,7 +58,7 @@ const ButtonRoot = forwardRef(
           /* @__PURE__ */ jsx(TransitionGroup, { open: loading, children: /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
             Spinner,
             {
-              appearance: variant === "strong" || variant === "opal" ? "inverse" : "default",
+              appearance: variant === "strong" || variant === "strong-opal" ? "inverse" : "default",
               "aria-hidden": "true",
               ...spinner()
             }

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-Cq4dI3JI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-DTaI_UUt.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'_57qe9z'}}});
+var picker = recipeRuntime({variants:{side:{bottom:{},left:{},right:{},top:'gjy5ze'}}});
 
 export { picker };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-xTPhlU2F.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-C2gaglWJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_8aur6b'],variants:{appearance:{'default':'si0ehz',holiday:[{color:'fg.error'},'vt2a8c'],range_middle:'y5ogak',selected:[{color:'fg.white'},'_1dpmtt5'],weekend:[{color:'fg.tertiary'},'_1egb69s']},range:{end:['_3biwj0'],middle:['_1up9txu'],start:['_1ndvu2o']}}});
-var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'t484wy']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'ivpkis'],variants:{appearance:{'default':'h3zpvx',holiday:[{color:'fg.error'},'_1kfnrx2'],range_middle:'vksmv7',selected:[{color:'fg.white'},'_15xes1k'],weekend:[{color:'fg.tertiary'},'_1fhk83m']},range:{end:['s76qvp'],middle:['_6iv3s3'],start:['_1pd6aea']}}});
+var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'_1qvfg14']});
 
 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-CFmysNEj.css';
-import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-CZ-gsEXF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-DCQV9hMs.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_1cy38w2']});
+var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'fvsxc8']});
 
 export { grid };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-wzHSMD6F.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-4MZpfiv-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_86efmw']});
+var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'_1vefs1r']});
 
 export { months };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-mofFnFLD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-rgCLIQZi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_1dskxo3'});
+var button = recipeRuntime({base:'r520g6'});
 
 export { button };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-CIs1ARXw.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-B7DSX7GF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_13rrbg5'});
+var button = recipeRuntime({base:'_1r16jvz'});
 
 export { button };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-BxK1B0uK.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-DBZPMCIo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-RmCQvM0v.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-CLRiwAbl.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['_1ry2905',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'t0cjzk']});
+var card = recipeRuntime({base:['uefepq',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_1wlml2f']});
 
 export { card };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-CFtpYunH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-nzWIl32m.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:['_1sw05ut']});
+var checkbox = recipeRuntime({base:['_131cs9h']});
 
 export { checkbox };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-QksYl29R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/card/CardHeader.css.ts.vanilla-BzjcqmMI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_4godc4',before:'qtge76'}}});
-var content = recipeRuntime({base:[{flex:'1'},'wcxnzo']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'_1x3hou7']});
+var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'_1xb5aft',before:'kv2x9p'}}});
+var content = recipeRuntime({base:[{flex:'1'},'_9thzhc']});
+var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'a5cw6u']});
 
 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-CFmysNEj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.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-CFmysNEj.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-uPNxq7kb.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/card/CardPreview.css.ts.vanilla-WPkVxAla.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_14908az']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'jv74v4']});
+var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'_1yxrt40']});
+var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_1m6lwyw']});
 
 export { overlay, preview };

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

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Ciq9eYSG.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BYhX0tpR.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-BoIueJFE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-a23vAAu3.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-C_JzcDjn.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-DL-Xiihi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_71bmxw'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_923jkr']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'nsvn59'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'l680f2']});
 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-CFmysNEj.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-DPZSXq5F.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-B1mlSR58.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_1gmpyef']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_14lbm4i']});
 
 export { code };

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

@@ -55,14 +55,18 @@ const CommandInput = forwardRef(
               return;
             }
             const selectedWithSpace = !event.target.value && event.key === " ";
-            if (highlightedItemRef.current instanceof HTMLAnchorElement && (selectedWithSpace || event.key === "Enter")) {
+            if (highlightedItemRef.current instanceof HTMLAnchorElement && !highlightedItem.execute && (selectedWithSpace || event.key === "Enter")) {
               const { view: _view, ...eventInit } = event;
               event.preventDefault();
               Object.assign(event, { preventDownshiftDefault: true });
+              if (highlightedItem.external) {
+                eventInit.metaKey = true;
+              }
               preventDownshiftBlurRef.current = true;
               highlightedItemRef.current.dispatchEvent(
                 new MouseEvent("click", eventInit)
               );
+              downshift.selectItem(highlightedItem);
             } else if (selectedWithSpace) {
               event.preventDefault();
               downshift.selectItem(highlightedItem);

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/command/CommandItem.css.ts.vanilla-DJXpD-UY.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var detail = recipeRuntime({base:[{color:'fg.secondary'},'n8i25r']});
+
+export { detail };

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

@@ -12,6 +12,7 @@ import { decorateChildren } from '../utils/decorateChildren.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
 import { useCommandContext, resolveItemProperty } from './CommandContext.js';
+import { detail } from './CommandItem-css.js';
 
 const CommandItem = forwardRef(
   ({
@@ -97,7 +98,7 @@ const CommandItem = forwardRef(
       ref,
       ...props
     });
-    const detail = resolveItemProperty(item.detail, { inputValue });
+    const detail$1 = resolveItemProperty(item.detail, { inputValue });
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -118,7 +119,7 @@ const CommandItem = forwardRef(
               /* @__PURE__ */ jsx(Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
             ] }),
             resolveItemProperty(item.label, { inputValue }),
-            detail && /* @__PURE__ */ jsx(Text, { asChild: true, color: "fg.secondary", flex: "1", children: fallbackSpan(detail) })
+            detail$1 && /* @__PURE__ */ jsx(Text, { asChild: true, truncate: true, ...detail(), children: fallbackSpan(detail$1) })
           ] })
         )
       }

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-BxK1B0uK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-RmCQvM0v.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['zytc6y','i7jl5b'],true:{}},inset:{false:'_15s6arp',true:'_1ccche4'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['bj0ri4','_1u4t2sy'],true:{}},inset:{false:'ef5blp',true:'_1di4zi8'}}});
 
 export { cover };

package/dist/esm/packages/react/src/data-table/DataTableBody-css.js

@@ -1,13 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-Ch_QNw3Y.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-806hR9ZD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-C09g72DC.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-HH-Cx_wO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_3vo69j'],variants:{pinned:{left:'bibwgm',right:'_1dyviva'},pinnedType:{body:'_11z8cyu',header:{}}}});
-var cellOffsetVar = 'var(--_1n42q5j)';
-var cellSizeVar = 'var(--_12uz0dv)';
-var leftTotalSizeVar = 'var(--o4jtwn)';
-var rightTotalSizeVar = 'var(--hdgj2h)';
-var totalSizeVar = 'var(--_1xk6jiv)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'wuszaw'],variants:{pinned:{left:'_1ncn7jb',right:'meeqm1'},pinnedType:{body:'tg85km',header:{}}}});
+var cellOffsetVar = 'var(--bu1d2t)';
+var cellSizeVar = 'var(--q6f0tr)';
+var leftTotalSizeVar = 'var(--o33cit)';
+var rightTotalSizeVar = 'var(--e0c1ld)';
+var totalSizeVar = 'var(--_1fauz5x)';
 
 export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, totalSizeVar };

package/dist/esm/packages/react/src/data-table/DataTableFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-CzER9DvK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-C-cBij_X.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:'_1m87ce6',variants:{position:{end:{textAlign:'end'},start:{}}}});
+var addon = recipeRuntime({base:'_44c4dt',variants:{position:{end:{textAlign:'end'},start:{}}}});
 
 export { addon };

package/dist/esm/packages/react/src/data-table/DataTableHeaderCell-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-FZGB5CLP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DQWYoxRo.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'_1b3x1qm']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'_14hmmyk'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'t659hv'],variants:{active:{false:'be0jjr',true:'_1efuoed'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'flex-start',rounded:'md',textAlign:'start',transition:'colors',w:'full'},'yoztbz']});
+var handle = recipeRuntime({base:[{h:'full',z:'10'},'_1ege5qv'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_9e04by'],variants:{active:{false:'cqh2nh',true:'_1r3p8ov'}}});
 
 export { button, handle, icon };

package/dist/esm/packages/react/src/date-input/DateInput-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-C3ZyTMSZ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-CCcPLlJb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{size:'sm'},'kof84b']});
-var date = recipeRuntime({base:'_1pjoljy'});
-var input = recipeRuntime({base:'_5nj1yy'});
-var picker = recipeRuntime({base:'_1oxnexy'});
+var clear = recipeRuntime({base:[{size:'sm'},'nw5iz2']});
+var date = recipeRuntime({base:'q4gwi8'});
+var input = recipeRuntime({base:'l84blp'});
+var picker = recipeRuntime({base:'_2twwey'});
 
 export { clear, date, input, picker };

package/dist/esm/packages/react/src/date-range-picker/DateRangePickerContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var panels = recipeRuntime({base:[{alignItems:'stretch',flexDirection:'row',gap:'0'}]});

package/dist/esm/packages/react/src/details-panel/DetailsPanel-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-Du_FIvUa.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-BUWHppdP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'j63220']});
+var root = recipeRuntime({base:[{bg:'bg.default',borderColor:'border.secondary',borderL:'1',color:'fg.default',display:'flex',flexDirection:'column',h:'full',overflow:'auto'},'_1hcxqan']});
 
 export { root };

package/dist/esm/packages/react/src/details-panel/DetailsPanelFooter-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-CCsMu3pP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-L9E0C1Bb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'_1a6jup7']});
+var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'16',pt:'8'},'_1y13asy']});
 
 export { footer };

package/dist/esm/packages/react/src/details-panel/DetailsPanelHeader-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-De7lIweT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-BBiD3ubf.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'_1cicgo3']});
+var header = recipeRuntime({base:[{bg:'bg.default',display:'flex',flexWrap:'wrap',p:'16',pb:'8'},'_1vn882c']});
 
 export { header };

package/dist/esm/packages/react/src/dialog/Dialog.js

@@ -2,7 +2,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useRef } from 'react';
+import { useContext, useState, useRef } from 'react';
+import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
+import '../dialog-kit/DialogKitProvider.js';
 import '../focus-bookmark/FocusBookmarkProvider.js';
 import { FocusBookmarkRestore } from '../focus-bookmark/FocusBookmarkRestore.js';
 import { NestedDialogProvider } from '../nested-dialog-context/NestedDialogContext.js';
@@ -16,31 +18,49 @@ function Dialog({
   open: openProp,
   ...props
 }) {
+  if (useContext(DialogKitContext)) {
+    throw new Error(
+      "`@optiaxiom/react/Dialog` should not be used explicitly in managed mode.\n\nPlease remove it and only use `@optiaxiom/react/DialogContent` instead."
+    );
+  }
   const [open, setOpen] = useControllableState({
     caller: "@optiaxiom/react/Dialog",
     defaultProp: defaultOpen,
     onChange: onOpenChange,
     prop: openProp
   });
+  const [presence, setPresence] = useState(false);
   const [nestedDialogCount, setNestedDialogCount] = useNestedDialogCount(
     "Dialog",
     open
   );
+  const cancelRef = useRef(null);
   const headerRef = useRef(null);
   const footerRef = useRef(null);
-  return /* @__PURE__ */ jsx(NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsxs(
-    DialogProvider,
+  return /* @__PURE__ */ jsx(NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(
+    RadixDialog.Root,
     {
-      footerRef,
-      headerRef,
-      nestedDialogCount,
-      open,
-      children: [
-        /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(FocusBookmarkRestore, {}) }),
-        children
-      ]
+      onOpenChange: setOpen,
+      open: open || presence,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        DialogProvider,
+        {
+          cancelRef,
+          footerRef,
+          headerRef,
+          nestedDialogCount,
+          open,
+          presence,
+          setPresence,
+          children: [
+            /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(FocusBookmarkRestore, {}) }),
+            children
+          ]
+        }
+      )
     }
-  ) }) });
+  ) });
 }
 Dialog.displayName = "@optiaxiom/react/Dialog";
 

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Ciq9eYSG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-a23vAAu3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1mbv1ua']});
+var body = recipeRuntime({base:[{flex:'1',fontSize:'md',px:'24',py:'16',z:'0'},'_1czijrf']});
 
 export { body };

package/dist/esm/packages/react/src/dialog/DialogClose.js

@@ -1,13 +1,33 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
+import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
+import '../dialog-kit/DialogKitProvider.js';
 
 const DialogClose = forwardRef(
-  ({ appearance = "subtle", asChild, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
+  ({ appearance = "subtle", asChild, children, onClick, ...props }, ref) => {
+    const { onDismiss } = useContext(DialogKitContext) ?? {};
+    return /* @__PURE__ */ jsx(
+      RadixDialog.Close,
+      {
+        asChild: true,
+        onClick: (event) => {
+          if (onDismiss) {
+            onDismiss(event, "cancel");
+            if (event.defaultPrevented) {
+              return;
+            }
+          }
+          onClick?.(event);
+        },
+        ref,
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children })
+      }
+    );
   }
 );
 DialogClose.displayName = "@optiaxiom/react/DialogClose";

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

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Ciq9eYSG.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-BxM25C6B.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-C4q1Lh94.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-a23vAAu3.css';
+import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-CL_ZiWzz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1bn7g7c'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'cju0g4'],variants:{size:{sm:'_722lzz',md:'_1ovcvx5',lg:'_1f63n95',fullscreen:'f7dqy5'}}});
-var nestedDialogCountVar = 'var(--_1o7dvun)';
-var scrollPaddingBottomVar = 'var(--_8g4c0u)';
-var scrollPaddingTopVar = 'var(--eyhow9)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_15gi7tt'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'k676pr'],variants:{size:{sm:'feq0nd',md:'r11221',lg:'uewxf8',fullscreen:'fwe75x'}}});
+var nestedDialogCountVar = 'var(--uuiukt)';
+var scrollPaddingBottomVar = 'var(--xsdenq)';
+var scrollPaddingTopVar = 'var(--_16m393m)';
 
 export { backdrop, content, nestedDialogCountVar, scrollPaddingBottomVar, scrollPaddingTopVar };

package/dist/esm/packages/react/src/dialog/DialogContent.js

@@ -3,8 +3,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useContext, useRef } from 'react';
 import { Backdrop } from '../backdrop/Backdrop.js';
+import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
+import '../dialog-kit/DialogKitProvider.js';
 import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
 import '../focus-bookmark/FocusBookmarkRestore.js';
 import { ModalProvider } from '../modal/ModalContext.js';
@@ -21,10 +23,20 @@ import { DialogContentImpl } from './DialogContentImpl.js';
 import { useDialogContext } from './DialogContext.js';
 
 const DialogContent = forwardRef(
-  ({ children, className, size = "md", style, ...props }, outerRef) => {
+  ({
+    children,
+    className,
+    onCloseAutoFocus,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    size = "md",
+    style,
+    ...props
+  }, outerRef) => {
     const { nestedDialogCount, open } = useDialogContext(
       "@optiaxiom/react/DialogContent"
     );
+    const { onClose, onDismiss } = useContext(DialogKitContext) ?? {};
     const innerRef = useRef(null);
     const ref = useComposedRefs(innerRef, outerRef);
     return /* @__PURE__ */ jsxs(TransitionGroup, { open, children: [
@@ -50,7 +62,40 @@ const DialogContent = forwardRef(
           },
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsx(RadixDialog.Content, { asChild: true, forceMount: true, ref, children: /* @__PURE__ */ jsx(DialogContentImpl, { children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { containerRef: innerRef, children }) }) }) })
+          children: /* @__PURE__ */ jsx(
+            RadixDialog.Content,
+            {
+              asChild: true,
+              forceMount: true,
+              onCloseAutoFocus: (event) => {
+                onCloseAutoFocus?.(event);
+                onClose?.();
+              },
+              onEscapeKeyDown: (event) => {
+                if (onDismiss) {
+                  onDismiss(event, "cancel");
+                  if (event.defaultPrevented) {
+                    return;
+                  }
+                }
+                onEscapeKeyDown?.(event);
+              },
+              onPointerDownOutside: onPointerDownOutside ? (event) => {
+                onPointerDownOutside(event);
+                if (event.defaultPrevented) {
+                  return;
+                }
+                if (onDismiss) {
+                  onDismiss(event, "cancel");
+                  if (event.defaultPrevented) {
+                    return;
+                  }
+                }
+              } : (event) => event.preventDefault(),
+              ref,
+              children: /* @__PURE__ */ jsx(DialogContentImpl, { children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { containerRef: innerRef, children }) }) })
+            }
+          )
         }
       ) }) })
     ] });