@optiaxiom/react 1.6.5 → 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-D_rF7ERt.css';
-import './../../../../assets/src/calendar/Calendar.css.ts.vanilla-C2wwR-w9.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:'_13htzl6'}}});
+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-D_rF7ERt.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-DNh6Q1-u.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'},'_1r0exzb'],variants:{appearance:{'default':'fv2dm4',holiday:[{color:'fg.error'},'_5m2ll9'],range_middle:'_7ph9cg',selected:[{color:'fg.white'},'_1f1ugpi'],weekend:[{color:'fg.tertiary'},'_19agszd']},range:{end:['lsez7b'],middle:['_1kg2i7n'],start:['mxx4tf']}}});
-var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'_1h18i7v']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-CHMs9jPU.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'},'emycd9']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-BvYdwRbs.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'},'_1r7y963']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-BTF5n5wA.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:'bjxilv'});
+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-D_rF7ERt.css';
-import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-DnqppYzX.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:'bbiau9'});
+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-D_rF7ERt.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-DVpB-ZyQ.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-DZiXEb1p.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:['_1ujtu6l',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_1eync2m']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-B8gdU-Ha.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:['_18zrm1j']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-CTlGHaCX.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:'_1xpwn6p',before:'_1kql3f8'}}});
-var content = recipeRuntime({base:[{flex:'1'},'toh2vu']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'lj5rcu']});
+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-D_rF7ERt.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-D_rF7ERt.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-D2lgjD-W.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'},'e2yu8n']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_14xru08']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DCAitvuu.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CawzUOob.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-CEjpaJ7e.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'},'l9yaxw'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_1mtei3u']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-Bx9kiLKR.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'},'lolzyy']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-DVpB-ZyQ.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:['yt9rgv','_1cvy6k8'],true:{}},inset:{false:'oet6ho',true:'u34bzt'}}});
+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-D_rF7ERt.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-B_IsO6Ga.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-_ycVurHJ.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'},'_1kuv00h'],variants:{pinned:{left:'i8onsp',right:'_13utppu'},pinnedType:{body:'_1jizlx3',header:{}}}});
-var cellOffsetVar = 'var(--_1f9vr11)';
-var cellSizeVar = 'var(--_1kw4r4m)';
-var leftTotalSizeVar = 'var(--se64m5)';
-var rightTotalSizeVar = 'var(--_33uvoi)';
-var totalSizeVar = 'var(--_1hkc5xo)';
+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-D_rF7ERt.css';
-import './../../../../assets/src/data-table/DataTableFooter.css.ts.vanilla-BlMzntAm.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:'nmvltj',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-D_rF7ERt.css';
-import './../../../../assets/src/data-table/DataTableHeaderCell.css.ts.vanilla-DtlTU0j_.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'},'_7g3j3u']});
-var handle = recipeRuntime({base:[{h:'full',z:'10'},'m555oo'],variants:{resizing:{false:{},true:{borderColor:'border.focus'}}}});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'aa0ju3'],variants:{active:{false:'ck85zu',true:'_1wr4h5o'}}});
+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-D_rF7ERt.css';
-import './../../../../assets/src/date-input/DateInput.css.ts.vanilla-CXKEWItH.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'},'_1m7zxe4']});
-var date = recipeRuntime({base:'_8q3tph'});
-var input = recipeRuntime({base:'_1f0azl7'});
-var picker = recipeRuntime({base:'_1q3q2xb'});
+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/DateRangePicker.js

@@ -2,14 +2,16 @@
 import { jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useRef, useState, useEffect } from 'react';
-import { Popover } from '../popover/Popover.js';
-import '../popover/PopoverAnchor.js';
-import '../popover/PopoverContent.js';
-import '../popover/PopoverTrigger.js';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
 import '../utils/conditions.js';
 import '../utils/isHoverSupported.js';
 import { toInstant } from '../utils/toInstant.js';
 import { toPlainDate } from '../utils/toPlainDate.js';
+import { Popover } from '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import '../popover/PopoverContent.js';
+import '../popover/PopoverTrigger.js';
 import { DateRangePickerProvider } from './DateRangePickerContext.js';
 
 function DateRangePicker({
@@ -37,6 +39,7 @@ function DateRangePicker({
     onChange: onValueChange,
     prop: valueProp
   });
+  const setValueStable = useEffectEvent(setValue);
   useEffect(() => {
     if (open) {
       setFrom(void 0);
@@ -46,10 +49,10 @@ function DateRangePicker({
     if (!open && from) {
       const end = toInstant(toPlainDate(from) + "T23:59:59.999");
       if (end) {
-        setValue({ from, to: end });
+        setValueStable({ from, to: end });
       }
     }
-  }, [from, open, setValue]);
+  }, [from, open, setValueStable]);
   return /* @__PURE__ */ jsx(Popover, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
     DateRangePickerProvider,
     {

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-D_rF7ERt.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-D_rF7ERt.css';
-import './../../../../assets/src/details-panel/DetailsPanel.css.ts.vanilla-DslhovVY.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'},'ig3qax']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/details-panel/DetailsPanelFooter.css.ts.vanilla-ByfFopQ4.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'},'_1f3k8vd']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/details-panel/DetailsPanelHeader.css.ts.vanilla-BcyOPkHB.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'},'_10n9gb1']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DCAitvuu.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'},'_1u8vzxb']});
+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-D_rF7ERt.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-DCAitvuu.css';
-import './../../../../assets/src/dialog/DialogContent.css.ts.vanilla-cb81-k2A.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:'_1ooff1h'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1c373c6'],variants:{size:{sm:'_10u6h9b',md:'_1gihh4m',lg:'_18vlcmw',fullscreen:'_1bctt2c'}}});
-var nestedDialogCountVar = 'var(--uzwlkp)';
-var scrollPaddingBottomVar = 'var(--_14qx4tr)';
-var scrollPaddingTopVar = 'var(--u9bzxh)';
+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 };