@optiaxiom/react 1.6.6 → 1.6.8

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

@@ -1,53 +1,24 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import { useState } from 'react';
-import '../focus-bookmark/FocusBookmarkProvider.js';
-import { FocusBookmarkRestore } from '../focus-bookmark/FocusBookmarkRestore.js';
-import { NestedDialogProvider } from '../nested-dialog-context/NestedDialogContext.js';
-import { useNestedDialogCount } from '../nested-dialog-context/useNestedDialogCount.js';
-import { AlertDialogProvider } from './AlertDialogContext.js';
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { Dialog } from '../dialog/Dialog.js';
+import '../dialog/DialogBody.js';
+import '../dialog/DialogClose.js';
+import '../dialog/DialogContent.js';
+import '../dialog/DialogFooter.js';
+import '../dialog/DialogForm.js';
+import '../dialog/DialogHeader.js';
+import '../dialog/DialogTrigger.js';
+import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
+import '../dialog-kit/DialogKitProvider.js';
 
-function AlertDialog({
-  children,
-  defaultOpen = false,
-  onOpenChange,
-  open: openProp,
-  ...props
-}) {
-  const [open, setOpen] = useControllableState({
-    caller: "@optiaxiom/react/AlertDialog",
-    defaultProp: defaultOpen,
-    onChange: onOpenChange,
-    prop: openProp
-  });
-  const [presence, setPresence] = useState(false);
-  const [nestedDialogCount, setNestedDialogCount] = useNestedDialogCount(
-    "AlertDialog",
-    open
-  );
-  return /* @__PURE__ */ jsx(NestedDialogProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(
-    RadixAlertDialog.Root,
-    {
-      onOpenChange: setOpen,
-      open: open || presence,
-      ...props,
-      children: /* @__PURE__ */ jsxs(
-        AlertDialogProvider,
-        {
-          nestedDialogCount,
-          open,
-          presence,
-          setPresence,
-          children: [
-            /* @__PURE__ */ jsx(RadixAlertDialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(FocusBookmarkRestore, {}) }),
-            children
-          ]
-        }
-      )
-    }
-  ) });
+function AlertDialog(props) {
+  if (useContext(DialogKitContext)) {
+    throw new Error(
+      "`@optiaxiom/react/AlertDialog` should not be used explicitly in managed mode.\n\nPlease remove it and only use `@optiaxiom/react/AlertDialogContent` instead."
+    );
+  }
+  return /* @__PURE__ */ jsx(Dialog, { ...props });
 }
 AlertDialog.displayName = "@optiaxiom/react/AlertDialog";
 

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

@@ -1,12 +1,32 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
-import { forwardRef } from 'react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+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 AlertDialogAction = forwardRef(({ appearance = "danger", asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Action, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
+const AlertDialogAction = forwardRef(({ appearance = "danger", asChild, children, onClick, ...props }, ref) => {
+  const { onDismiss } = useContext(DialogKitContext) ?? {};
+  return /* @__PURE__ */ jsx(
+    RadixDialog.Close,
+    {
+      asChild: true,
+      onClick: (event) => {
+        if (onDismiss) {
+          onDismiss(event, "action");
+          if (event.defaultPrevented) {
+            return;
+          }
+        }
+        onClick?.(event);
+      },
+      ref,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children })
+    }
+  );
 });
 AlertDialogAction.displayName = "@optiaxiom/react/AlertDialogAction";
 

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 
@@ -16,7 +16,7 @@ const AlertDialogBody = forwardRef(
       ref,
       z: "0",
       ...props,
-      children: /* @__PURE__ */ jsx(RadixAlertDialog.Description, { asChild: true, children: /* @__PURE__ */ jsx("div", { children }) })
+      children: /* @__PURE__ */ jsx(RadixDialog.Description, { asChild: true, children: /* @__PURE__ */ jsx("div", { children }) })
     }
   )
 );

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

@@ -1,13 +1,41 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
-import { forwardRef } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import * as RadixDialog from '@radix-ui/react-dialog';
+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';
+import { useAlertDialogContext } from './AlertDialogContext.js';
 
-const AlertDialogCancel = forwardRef(({ appearance = "subtle", asChild, children = "Cancel", ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Cancel, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, children }) });
-});
+const AlertDialogCancel = forwardRef(
+  ({ appearance = "subtle", asChild, children = "Cancel", onClick, ...props }, outerRef) => {
+    const { cancelRef } = useAlertDialogContext(
+      "@optiaxiom/react/AlertDialogCancel"
+    );
+    const { onDismiss } = useContext(DialogKitContext) ?? {};
+    const ref = useComposedRefs(cancelRef, outerRef);
+    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 })
+      }
+    );
+  }
+);
 AlertDialogCancel.displayName = "@optiaxiom/react/AlertDialogCancel";
 
 export { AlertDialogCancel };

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

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-ByrRVma3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-DWLSQIjv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1sr5mu'}}});
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1dhfh6g'],variants:{size:{sm:'_1cjcgyv',md:'_1gewn57',lg:'_1pv2uxp'}}});
-var nestedDialogCountVar = 'var(--mt85xd)';
-var root = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'_20y5nn']});
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'_1d07anw'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column',overflow:'auto'},'_1nv20f0'],variants:{size:{sm:'sxgmlv',md:'y0qe7w',lg:'_18wjcpk'}}});
+var nestedDialogCountVar = 'var(--_18dpv95)';
+var root = recipeRuntime({base:[{alignItems:'center',gap:'0',z:'popover'},'ku9fv']});
 
 export { backdrop, content, nestedDialogCountVar, root };

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

@@ -1,13 +1,15 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 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 { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
+import { DialogKitContext } from '../dialog-kit/DialogKitContext.js';
+import '../dialog-kit/DialogKitProvider.js';
 import { Flex } from '../flex/Flex.js';
 import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
 import '../focus-bookmark/FocusBookmarkRestore.js';
@@ -20,61 +22,103 @@ import { TransitionGroup } from '../transition/TransitionGroup.js';
 import { backdrop, root, content, nestedDialogCountVar } from './AlertDialogContent-css.js';
 import { useAlertDialogContext } from './AlertDialogContext.js';
 
-const AlertDialogContent = forwardRef(({ children, size = "sm", style, ...props }, outerRef) => {
-  const { nestedDialogCount, open, presence, setPresence } = useAlertDialogContext("@optiaxiom/react/AlertDialogContent");
-  const innerRef = useRef(null);
-  const ref = useComposedRefs(innerRef, outerRef);
-  return /* @__PURE__ */ jsx(
-    TransitionGroup,
-    {
-      onPresenceChange: setPresence,
-      open,
-      presence,
-      children: /* @__PURE__ */ jsxs(Portal, { children: [
-        /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
-          Backdrop,
-          {
-            asChild: true,
-            onClick: () => {
-              innerRef.current?.animate(
-                [
-                  { translate: "6px" },
-                  { translate: "-4px" },
-                  { translate: "4px" }
-                ],
-                {
-                  duration: 150
-                }
-              );
-            },
-            ...backdrop({ hidden: nestedDialogCount > 0 }),
-            children: /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(Flex, { ...root(), children: [
-          /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
-          /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(
-            Paper,
+const AlertDialogContent = forwardRef(
+  ({
+    children,
+    onCloseAutoFocus,
+    onEscapeKeyDown,
+    onOpenAutoFocus,
+    size = "sm",
+    style,
+    ...props
+  }, outerRef) => {
+    const { cancelRef, nestedDialogCount, open, presence, setPresence } = useAlertDialogContext("@optiaxiom/react/AlertDialogContent");
+    const { onClose, onDismiss } = useContext(DialogKitContext) ?? {};
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
+    return /* @__PURE__ */ jsx(
+      TransitionGroup,
+      {
+        onPresenceChange: setPresence,
+        open,
+        presence,
+        children: /* @__PURE__ */ jsxs(Portal, { children: [
+          /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
+            Backdrop,
             {
               asChild: true,
-              elevation: "dialog",
-              style: {
-                ...assignInlineVars({
-                  [nestedDialogCountVar]: `${nestedDialogCount}`
-                }),
-                ...style
+              onClick: () => {
+                innerRef.current?.animate(
+                  [
+                    { translate: "6px" },
+                    { translate: "-4px" },
+                    { translate: "4px" }
+                  ],
+                  {
+                    duration: 150
+                  }
+                );
               },
-              ...content({ size }),
-              children: /* @__PURE__ */ jsx(RadixAlertDialog.Content, { ref, ...props, children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { containerRef: innerRef, children }) }) })
+              ...backdrop({ hidden: nestedDialogCount > 0 }),
+              children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {})
             }
           ) }),
-          /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
-          /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" })
+          /* @__PURE__ */ jsxs(Flex, { ...root(), children: [
+            /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
+            /* @__PURE__ */ jsx(Transition, { type: "pop", children: /* @__PURE__ */ jsx(
+              Paper,
+              {
+                asChild: true,
+                elevation: "dialog",
+                style: {
+                  ...assignInlineVars({
+                    [nestedDialogCountVar]: `${nestedDialogCount}`
+                  }),
+                  ...style
+                },
+                ...content({ size }),
+                children: /* @__PURE__ */ jsx(
+                  RadixDialog.Content,
+                  {
+                    onCloseAutoFocus: (event) => {
+                      onCloseAutoFocus?.(event);
+                      onClose?.();
+                    },
+                    onEscapeKeyDown: (event) => {
+                      if (onDismiss) {
+                        onDismiss(event, "cancel");
+                        if (event.defaultPrevented) {
+                          return;
+                        }
+                      }
+                      onEscapeKeyDown?.(event);
+                    },
+                    onOpenAutoFocus: (event) => {
+                      onOpenAutoFocus?.(event);
+                      if (event.defaultPrevented) {
+                        return;
+                      }
+                      event.preventDefault();
+                      cancelRef.current?.focus({ preventScroll: true });
+                    },
+                    ref,
+                    role: "alertdialog",
+                    ...props,
+                    onInteractOutside: (event) => event.preventDefault(),
+                    onPointerDownOutside: (event) => event.preventDefault(),
+                    children: /* @__PURE__ */ jsx(ModalProvider, { shardRef: innerRef, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { containerRef: innerRef, children }) })
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" }),
+            /* @__PURE__ */ jsx(Box, { flex: "1", pointerEvents: "none" })
+          ] })
         ] })
-      ] })
-    }
-  );
-});
+      }
+    );
+  }
+);
 AlertDialogContent.displayName = "@optiaxiom/react/AlertDialogContent";
 
 export { AlertDialogContent };

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

@@ -1,6 +1,6 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
+import { useDialogContext } from '../dialog/DialogContext.js';
 
-const [AlertDialogProvider, useAlertDialogContext] = createContext("@optiaxiom/react/AlertDialog");
+const useAlertDialogContext = useDialogContext;
 
-export { AlertDialogProvider, useAlertDialogContext };
+export { useAlertDialogContext };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-wSbAwpvr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/alert-dialog/AlertDialogFooter.css.ts.vanilla-B8pf4G3T.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'eo2thr']});
+var footer = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'16',justifyContent:'flex-end',px:'24',py:'20'},'_1liujpi']});
 
 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-CFmysNEj.css';
-import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-BM_C9Xe3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-CqIfnm3u.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'24',pb:'16',z:'10'},'i2gf3w']});
+var header = recipeRuntime({base:[{bg:'bg.default',flexDirection:'row',gap:'8',p:'24',pb:'16',z:'10'},'_17frxus']});
 
 export { header };

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { Heading } from '../heading/Heading.js';
@@ -13,7 +13,7 @@ import { header } from './AlertDialogHeader-css.js';
 const AlertDialogHeader = forwardRef(({ addonBefore, children, className, ...props }, ref) => {
   return /* @__PURE__ */ jsxs(Flex, { ref, ...header({}, className), ...props, children: [
     /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", children: addonBefore && fallbackSpan(addonBefore) }),
-    /* @__PURE__ */ jsx(Heading, { asChild: true, color: "fg.default", fontWeight: "500", level: "3", children: /* @__PURE__ */ jsx(RadixAlertDialog.Title, { children }) })
+    /* @__PURE__ */ jsx(Heading, { asChild: true, color: "fg.default", fontWeight: "500", level: "3", children: /* @__PURE__ */ jsx(RadixDialog.Title, { children }) })
   ] });
 });
 AlertDialogHeader.displayName = "@optiaxiom/react/AlertDialogHeader";

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 import '../button/ButtonGroup.js';
 
 const AlertDialogTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixAlertDialog.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+  return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
 });
 AlertDialogTrigger.displayName = "@optiaxiom/react/AlertDialogTrigger";
 

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Ciq9eYSG.css';
-import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-aeRpsAP7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CE59wkaF.css';
+import './../../../../assets/src/avatar/Avatar.css.ts.vanilla-CClY0-H6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'r15ri5'],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'},'oszbxe'],xs:[{fontWeight:'400',size:'xs'},'_1agbdpy'],sm:[{size:'sm'},'_1bixirr'],md:[{size:'md'},'thwt5r'],lg:[{size:'lg'},'_14e1pp5'],xl:[{size:'xl'},'isivey'],'3xl':[{size:'3xl'},'_1fk5euo']}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'_1k9v96b'],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'},'ekopt2'],xs:[{fontWeight:'400',size:'xs'},'iy99hj'],sm:[{size:'sm'},'fkmk6p'],md:[{size:'md'},'l689wo'],lg:[{size:'lg'},'_1txnjgk'],xl:[{size:'xl'},'_18p4pi0'],'3xl':[{size:'3xl'},'_1mqs2m9']}}});
 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-CFmysNEj.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Ciq9eYSG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CE59wkaF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatarGroup = recipeRuntime({base:['chvdk5',{display:'flex'}]});
+var avatarGroup = recipeRuntime({base:['_1iy29ef',{display:'flex'}]});
 
 export { avatarGroup };

package/dist/esm/packages/react/src/axiom-provider/AxiomProvider.js

@@ -3,6 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { AxiomVersionContext } from '@optiaxiom/globals';
 import { useContext } from 'react';
 import { version } from '../../package.json.js';
+import '../dialog-kit/DialogKitContext.js';
+import { DialogKitProvider } from '../dialog-kit/DialogKitProvider.js';
 import { FocusBookmarkProvider } from '../focus-bookmark/FocusBookmarkProvider.js';
 import '../focus-bookmark/FocusBookmarkRestore.js';
 import { ThemeProvider } from '../theme-provider/ThemeProvider.js';
@@ -18,6 +20,7 @@ import '../tooltip/TooltipTrigger.js';
 
 function AxiomProvider({
   children,
+  dialog,
   toast,
   tooltip
 }) {
@@ -28,7 +31,10 @@ function AxiomProvider({
       /* @__PURE__ */ jsx(ToastProvider, { ...toast })
     ] });
   }
-  return /* @__PURE__ */ jsx(AxiomVersionContext.Provider, { value: version, children: /* @__PURE__ */ jsx(TooltipProvider, { ...tooltip, children: /* @__PURE__ */ jsx(FocusBookmarkProvider, { children }) }) });
+  return /* @__PURE__ */ jsx(AxiomVersionContext.Provider, { value: version, children: /* @__PURE__ */ jsx(TooltipProvider, { ...tooltip, children: /* @__PURE__ */ jsxs(FocusBookmarkProvider, { children: [
+    children,
+    /* @__PURE__ */ jsx(DialogKitProvider, { ...dialog })
+  ] }) }) });
 }
 AxiomProvider.displayName = "@optiaxiom/react/AxiomProvider";
 

package/dist/esm/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-W8Y_vGJG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CdlSgP6W.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'l04o2j']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_69fbge']});
 
 export { backdrop };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-BMEYA4Ju.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-BEUr-i-M.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_1qb3jgf'],variants:{intent:{danger:'ljuf4v',information:'_13jlaqd',neutral:'_1l3slet',primary:'_1c2tril',success:'_1ffzfhb',warning:'j0z6qe'},variant:{strong:'_1v4gwin',subtle:'rhbr33'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'6',py:'2',rounded:'full'},'_1vbse7e'],variants:{intent:{danger:'_14jnbc6',information:'qmcdur',neutral:'_12t7xfi',primary:'c6inbx',success:'wp1hrj',warning:'_1n86e9k'},variant:{strong:'ziwc3m',subtle:'_1v1vatu'}}});
 
 export { badge };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/banner/Banner.css.ts.vanilla-C8PJYb4C.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/banner/Banner.css.ts.vanilla-B8p9YttE.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});
-var content = recipeRuntime({base:[{flex:'1',gap:'8',justifyContent:'center'},'pv9s0h']});
+var content = recipeRuntime({base:[{flex:'1',gap:'8',justifyContent:'center'},'b43kre']});
 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-CFmysNEj.css';
-import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-BvgxklSL.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-B5q50NA_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/sprinkles/properties.css.ts.vanilla-COU-1Dps.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-DVIjus-3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_1m3ae15'});
+var box = recipeRuntime({base:'fqbuqn'});
 
 export { box };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-CfvhfeVn.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/breadcrumb/Breadcrumb.css.ts.vanilla-obcOb9W0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:'kfvyyc'});
-var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_1ywifdn']});
+var link = recipeRuntime({base:'vg2s85'});
+var list = recipeRuntime({base:[{alignItems:'center',color:'fg.default',display:'flex',fontSize:'md',gap:'8'},'_12gttgr']});
 
 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-CFmysNEj.css';
-import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-DXcNINS0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/breadcrumb/BreadcrumbNode.css.ts.vanilla-Bg8lsw2T.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'m5jc8t']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',gap:'4',whiteSpace:'nowrap'},'_1t15rvu']});
 
 export { item };

package/dist/esm/packages/react/src/button/ButtonGroup-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-eQw5XlKc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CE59wkaF.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1kc4p3x'});
+var buttonGroup = recipeRuntime({base:'_1j51cry'});
 
 export { buttonGroup };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CFmysNEj.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-Ciq9eYSG.css';
-import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-sCwAkYb_.css';
-import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-DfEWrETJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-eQw5XlKc.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CE59wkaF.css';
+import './../../../../assets/src/button/ButtonRoot.css.ts.vanilla-BQ-MwkRO.css';
+import './../../../../assets/src/button/ButtonLoadable.css.ts.vanilla-BmyToVa2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_1wlrlzl']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1a5q4ng']});
 
 export { loadable };