@optiaxiom/react 0.8.2 → 0.10.0

package/dist/packages/react/src/command-listbox/CommandListbox.js

@@ -3,22 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { Listbox } from '../listbox/Listbox.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const CommandListbox = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ children, size, ...props }, ref) => {
     const { downshift } = useCommandContext("CommandList");
-    return /* @__PURE__ */ jsx(
-      Listbox,
-      {
-        ...sprinkleProps,
-        ...downshift.getMenuProps({ ref, ...restProps }),
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx(Listbox, { size, ...downshift.getMenuProps({ ref, ...props }), children });
   }
 );
 CommandListbox.displayName = "@optiaxiom/react/CommandListbox";

package/dist/packages/react/src/command-sub/CommandSub.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { CommandSubContextProvider } from '../command-sub-context/CommandSubContext.js';
 
 const CommandSub = forwardRef(

package/dist/packages/react/src/command-sub-item/CommandSubItem.js

@@ -38,8 +38,8 @@ const CommandSubItem = forwardRef(
       {
         "aria-disabled": disabled,
         "aria-selected": isSelected,
-        "data-disabled": disabled ? "" : void 0,
-        "data-highlighted": highlighted ? "" : void 0,
+        "data-disabled": disabled ? "" : undefined,
+        "data-highlighted": highlighted ? "" : undefined,
         onClick: (event) => {
           onClick?.(event);
           if (event.defaultPrevented) {

package/dist/packages/react/src/command-toggle-button/CommandToggleButton.js

@@ -2,15 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { useCommandContext } from '../command-context/CommandContext.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
-const CommandToggleButton = forwardRef(({ children, ...props }, ref) => {
-  const { restProps, sprinkleProps } = extractSprinkles(props);
+const CommandToggleButton = forwardRef(({ children, className, ...props }, ref) => {
+  const { boxProps, restProps } = extractBoxProps(props);
   const { downshift } = useCommandContext("CommandToggleButton");
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx("button", { ref, ...downshift.getToggleButtonProps(restProps), children }) });
+  return /* @__PURE__ */ jsx(Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsx("button", { ref, ...downshift.getToggleButtonProps(restProps), children }) });
 });
 CommandToggleButton.displayName = "@optiaxiom/react/CommandToggleButton";
 

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-BP46h_xl.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-D-Y37ogI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DXrWEyC2.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-ucEO_Lf0.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:['_3xycix'],variants:{pinned:{left:'_1o96dum',right:'p9tjnr'},pinnedType:{body:'_1s0hb48',header:{}}}});
-var cellOffsetVar = 'var(--k97bpv)';
-var cellSizeVar = 'var(--_1ezzrud)';
-var header = recipeRuntime({base:['ibbf5n']});
-var leftTotalSizeVar = 'var(--_1n5796e)';
-var rightTotalSizeVar = 'var(--_1vghd3a)';
-var table = recipeRuntime({base:'_11ek117',variants:{pinned:{both:'zqte4b',left:'s7h2ib',none:{},right:'_1fov8wc'}}});
+var cell = recipeRuntime({base:['_1eq3361'],variants:{pinned:{left:'_3lg9mi',right:'jlzhjt'},pinnedType:{body:'_83uxs2',header:{}}}});
+var cellOffsetVar = 'var(--rmpuvm)';
+var cellSizeVar = 'var(--yhoi1h)';
+var header = recipeRuntime({base:['_1etwszl']});
+var leftTotalSizeVar = 'var(--ne2aup)';
+var rightTotalSizeVar = 'var(--_1a0pj6j)';
+var table = recipeRuntime({base:'_44oyyl',variants:{pinned:{both:'_89nkte',left:'fveeg',none:{},right:'_1sm2ebu'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

package/dist/packages/react/src/data-table/DataTable.js

@@ -4,6 +4,8 @@ import { flexRender } from '@tanstack/react-table';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { DataTableHeaderCell } from '../data-table-header-cell/DataTableHeaderCell.js';
 import { Pagination } from '../pagination/Pagination.js';
 import { Table } from '../table/Table.js';
@@ -15,25 +17,13 @@ import { leftTotalSizeVar, rightTotalSizeVar, table, header, cellOffsetVar, cell
 
 const DataTable = forwardRef(
   ({ table: table$1, ...props }, ref) => {
-    let offsetLeft = 0;
-    let offsetRight = table$1.getTotalSize();
-    const offsets = Object.fromEntries(
-      table$1.getAllColumns().flatMap((column) => [
-        [
-          column.id,
-          {
-            left: (offsetLeft += column.getSize()) - column.getSize(),
-            right: offsetRight -= column.getSize()
-          }
-        ]
-      ])
-    );
     return /* @__PURE__ */ jsxs(
       Box,
       {
         alignItems: "center",
         display: "flex",
         flexDirection: "column",
+        maxW: "full",
         ref,
         ...props,
         children: [
@@ -55,15 +45,15 @@ const DataTable = forwardRef(
                     header,
                     style: {
                       ...assignInlineVars({
-                        [cellOffsetVar]: `${offsets[header.column.id][header.column.getIsPinned() || "left"]}px`,
+                        [cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || "left")}px`,
                         [cellSizeVar]: `${header.getSize()}px`
                       })
                     },
                     ...cell({
-                      pinned: header.column.getIsPinned() || void 0,
-                      pinnedType: header.column.getIsPinned() ? "header" : void 0
+                      pinned: header.column.getIsPinned() || undefined,
+                      pinnedType: header.column.getIsPinned() ? "header" : undefined
                     }),
-                    children: flexRender(
+                    children: header.isPlaceholder ? null : flexRender(
                       header.column.columnDef.header,
                       header.getContext()
                     )
@@ -76,13 +66,13 @@ const DataTable = forwardRef(
                     {
                       style: {
                         ...assignInlineVars({
-                          [cellOffsetVar]: `${offsets[cell$1.column.id][cell$1.column.getIsPinned() || "left"]}px`,
+                          [cellOffsetVar]: `${cell$1.column.getStart(cell$1.column.getIsPinned() || "left")}px`,
                           [cellSizeVar]: `${cell$1.column.getSize()}px`
                         })
                       },
                       ...cell({
-                        pinned: cell$1.column.getIsPinned() || void 0,
-                        pinnedType: cell$1.column.getIsPinned() ? "body" : void 0
+                        pinned: cell$1.column.getIsPinned() || undefined,
+                        pinnedType: cell$1.column.getIsPinned() ? "body" : undefined
                       }),
                       children: flexRender(
                         cell$1.column.columnDef.cell,

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DAaoRros.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-DJoq_AGx.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'_1p42j9r','_91sku7']});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_1g6wuc7'],variants:{active:{false:'d4q77i',true:'il8kvh'},muted:{false:{},true:'_1i4wjq1'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'xa7pby','rpjxky']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_26umyo'],variants:{active:{false:'fi0drb',true:'_1r6u35z'},muted:{false:{},true:'bvtcl4'}}});
 
 export { button, icon };

package/dist/packages/react/src/data-table-header-cell/DataTableHeaderCell.js

@@ -3,6 +3,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { Grid } from '../grid/Grid.js';
 import { Icon } from '../icon/Icon.js';
 import { IconSort } from '../icons/IconSort.js';
@@ -11,12 +13,14 @@ import { IconSortUp } from '../icons/IconSortUp.js';
 import { TableHeaderCell } from '../table-header-cell/TableHeaderCell.js';
 import { button, icon } from './DataTableHeaderCell-css.js';
 
-const DataTableHeaderCell = forwardRef(({ children, header, ...props }) => {
+const DataTableHeaderCell = forwardRef(({ children, header, ...props }, ref) => {
   const sortDir = header.column.getIsSorted();
   return /* @__PURE__ */ jsx(
     TableHeaderCell,
     {
-      "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : void 0,
+      "aria-sort": header.column.columnDef.enableSorting ? sortDir === false ? "none" : sortDir === "asc" ? "ascending" : "descending" : undefined,
+      colSpan: header.colSpan,
+      ref,
       ...props,
       children: header.column.columnDef.enableSorting ? /* @__PURE__ */ jsx(Box, { asChild: true, ...button(), children: /* @__PURE__ */ jsxs("button", { onClick: () => header.column.toggleSorting(), children: [
         children,

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

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { DialogContextProvider } from '../dialog-context/DialogContext.js';
+import { NestedDialogContextProvider } from '../nested-dialog-context/NestedDialogContext.js';
+import { useNestedDialogCount } from '../nested-dialog-context/useNestedDialogCount.js';
 
 function Dialog({
   children,
@@ -16,7 +18,16 @@ function Dialog({
     onChange: onOpenChange,
     prop: openProp
   });
-  return /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(DialogContextProvider, { open, children }) });
+  const [isRootDialog, nestedDialogCount, setNestedDialogCount] = useNestedDialogCount("Dialog", open);
+  return /* @__PURE__ */ jsx(NestedDialogContextProvider, { onCountChange: setNestedDialogCount, children: /* @__PURE__ */ jsx(RadixDialog.Root, { onOpenChange: setOpen, open, ...props, children: /* @__PURE__ */ jsx(
+    DialogContextProvider,
+    {
+      isRootDialog,
+      nestedDialogCount,
+      open,
+      children
+    }
+  ) }) });
 }
 Dialog.displayName = "@optiaxiom/react/Dialog";
 

package/dist/packages/react/src/dialog-actions/DialogActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-DmqGyOti.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/dialog-actions/DialogActions.css.ts.vanilla-DZaMrkyd.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_1abmlif']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'k7enfq']});
 
 export { actions };

package/dist/packages/react/src/dialog-actions/DialogActions.js

@@ -1,18 +1,12 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as RadixDialog from '@radix-ui/react-dialog';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
-import { IconX } from '../icons/IconX.js';
 import { actions } from './DialogActions-css.js';
 
 const DialogActions = forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...actions({}, className), ...props, children: [
-      /* @__PURE__ */ jsx(Button, { appearance: "subtle", "aria-label": "Close", asChild: true, icon: /* @__PURE__ */ jsx(IconX, {}), children: /* @__PURE__ */ jsx(RadixDialog.Close, {}) }),
-      /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", children })
-    ] });
+    return /* @__PURE__ */ jsx(Flex, { ref, ...actions({}, className), ...props, children });
   }
 );
 DialogActions.displayName = "@optiaxiom/react/DialogActions";

package/dist/packages/react/src/dialog-body/DialogBody.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
 
 const DialogBody = forwardRef(
   ({ children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
-      Box,
+      Flex,
       {
         flex: "1",
         fontSize: "md",
+        justifyContent: "start",
         overflow: "auto",
         px: "24",
         py: "16",

package/dist/packages/react/src/dialog-close/DialogClose.js

@@ -5,8 +5,8 @@ import { forwardRef } from 'react';
 import { Button } from '../button/Button.js';
 
 const DialogClose = forwardRef(
-  ({ asChild, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { children }) });
+  ({ appearance = "subtle", asChild, children, size = "lg", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(Button, { appearance, size, children }) });
   }
 );
 DialogClose.displayName = "@optiaxiom/react/DialogClose";

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

@@ -1,7 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-C5RktqfT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-BqiYTk0E.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'hamf0t'],variants:{size:{sm:'_1cylg9q',md:'zwpeau',lg:'x15bml',fullscreen:'_198uxws'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'ofou4z'],variants:{size:{sm:'_1eopr8g',md:'dk7czk',lg:'kw100q',fullscreen:'q7r2p3'}}});
+var nestedDialogCountVar = 'var(--_7yb9ob)';
 
-export { content };
+export { content, nestedDialogCountVar };

package/dist/packages/react/src/dialog-content/DialogContent.js

@@ -1,31 +1,50 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Backdrop } from '../backdrop/Backdrop.js';
 import { useDialogContext } from '../dialog-context/DialogContext.js';
 import { Paper } from '../paper/Paper.js';
 import { Transition } from '../transition/Transition.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
-import { content } from './DialogContent-css.js';
+import { nestedDialogCountVar, content } from './DialogContent-css.js';
 
 const DialogContent = forwardRef(
-  ({ children, className, size = "md", transitionType = "fade", ...props }, ref) => {
-    const { open } = useDialogContext("DialogContent");
-    return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
-      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+  ({
+    children,
+    className,
+    size = "md",
+    style,
+    transitionType = "fade",
+    ...props
+  }, ref) => {
+    const { isRootDialog, nestedDialogCount, open } = useDialogContext("DialogContent");
+    return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
+      isRootDialog && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
       /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: transitionType, children: /* @__PURE__ */ jsx(
         Paper,
         {
           asChild: true,
           elevation: size === "fullscreen" ? "drawer" : "dialog",
           onBlur: onReactSelectInputBlur,
+          style: {
+            ...assignInlineVars({
+              [nestedDialogCountVar]: `${nestedDialogCount}`
+            }),
+            ...style
+          },
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children })
+          children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, children: [
+            children,
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(RadixDialog.Description, {}) }),
+            nestedDialogCount > 0 && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { rounded: "inherit" }) })
+          ] })
         }
       ) })
     ] }) });

package/dist/packages/react/src/dialog-description/DialogDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-DBsIX9-a.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/dialog-description/DialogDescription.css.ts.vanilla-D3hYTBlh.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_14kfu0q']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_1urkuys']});
 
 export { description };

package/dist/packages/react/src/dialog-footer/DialogFooter-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var footer = recipeRuntime({base:[{borderColor:'border.secondary',borderT:'1',flexDirection:'row',gap:'16',justifyContent:'end',px:'24',py:'20'}]});

package/dist/packages/react/src/dialog-form/DialogForm.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
+
+const DialogForm = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        className,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "auto",
+        ...boxProps,
+        children: /* @__PURE__ */ jsx("form", { ref, ...restProps, children })
+      }
+    );
+  }
+);
+DialogForm.displayName = "@optiaxiom/react/DialogForm";
+
+export { DialogForm };

package/dist/packages/react/src/dialog-header/DialogHeader-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-Be3bVJNE.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var close = recipeRuntime({base:['_1806yvf']});
+
+export { close };

package/dist/packages/react/src/dialog-header/DialogHeader.js

@@ -1,11 +1,17 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+import { Button } from '../button/Button.js';
+import { IconX } from '../icons/IconX.js';
+import { close } from './DialogHeader-css.js';
 
 const DialogHeader = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
       Box,
       {
         display: "flex",
@@ -15,7 +21,20 @@ const DialogHeader = forwardRef(
         pb: "16",
         ref,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "subtle",
+              "aria-label": "Close",
+              asChild: true,
+              icon: /* @__PURE__ */ jsx(IconX, {}),
+              ...close(),
+              children: /* @__PURE__ */ jsx(RadixDialog.Close, {})
+            }
+          ),
+          children
+        ]
       }
     );
   }

package/dist/packages/react/src/dialog-title/DialogTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-Bu0LwmUW.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/dialog-title/DialogTitle.css.ts.vanilla-Dn_JURP7.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_16spgfe']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1ff2aby']});
 
 export { title };

package/dist/packages/react/src/disclosure/Disclosure.js

@@ -3,6 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { DisclosureContextProvider } from '../disclosure-context/DisclosureContext.js';
 
 const Disclosure = forwardRef(

package/dist/packages/react/src/disclosure-content/DisclosureContent-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-DaAN_Y5P.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var content = recipeRuntime({base:['_6lgpay']});
+
+export { content };

package/dist/packages/react/src/disclosure-content/DisclosureContent.js

@@ -3,11 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js';
+import { content } from './DisclosureContent-css.js';
 
-const DisclosureContent = forwardRef(({ children, ...props }, ref) => {
+const DisclosureContent = forwardRef(({ children, className, ...props }, ref) => {
   useDisclosureContext("DisclosureContent");
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "8", pt: "0", children }) }) });
+  return /* @__PURE__ */ jsx(Box, { asChild: true, ref, ...content({}, className), ...props, children: /* @__PURE__ */ jsx(RadixCollapsible.Content, { children: /* @__PURE__ */ jsx(Box, { color: "fg.default", fontSize: "md", p: "8", pt: "0", children }) }) });
 });
 DisclosureContent.displayName = "@optiaxiom/react/DisclosureContent";
 

package/dist/packages/react/src/disclosure-trigger/DisclosureTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-0YP3mnr3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-DWj2Guo6.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1r8fwxq',start:'ekaqth'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1524a9']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_10cnb7m',start:'ymvqs7'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1gww8hw']});
 
 export { icon, trigger };

package/dist/packages/react/src/disclosure-trigger/DisclosureTrigger.js

@@ -3,22 +3,27 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { useDisclosureContext } from '../disclosure-context/DisclosureContext.js';
 import { Flex } from '../flex/Flex.js';
 import { IconAngleDown } from '../icons/IconAngleDown.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { trigger, icon } from './DisclosureTrigger-css.js';
 
 const DisclosureTrigger = forwardRef(
-  ({ addonAfter, addonBefore, chevronPosition = "start", children, ...props }, ref) => {
+  ({
+    addonAfter,
+    addonBefore,
+    chevronPosition = "start",
+    children,
+    className,
+    ...props
+  }, ref) => {
     useDisclosureContext("DisclosureTrigger");
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const startIcon = addonBefore || chevronPosition === "start" && !addonAfter && /* @__PURE__ */ jsx(IconAngleRight, {});
     const endIcon = addonAfter || chevronPosition === "end" && /* @__PURE__ */ jsx(IconAngleDown, {});
-    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger(), ...sprinkleProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
+    return /* @__PURE__ */ jsx(Flex, { asChild: true, ...trigger({}, className), ...boxProps, children: /* @__PURE__ */ jsxs(RadixCollapsible.Trigger, { ref, ...restProps, children: [
       startIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: startIcon }),
       /* @__PURE__ */ jsx(Box, { flex: "1", px: "4", children }),
       endIcon && /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ chevronPosition }), children: endIcon })

package/dist/packages/react/src/downshift/useDelayedState.js

@@ -4,16 +4,16 @@ function useDelayedState(defaultValue, state) {
   const [value, setValue] = useState(defaultValue);
   const valueRef = useRef();
   useEffect(() => {
-    if (valueRef.current !== void 0) {
+    if (valueRef.current !== undefined) {
       setValue(valueRef.current);
-      valueRef.current = void 0;
+      valueRef.current = undefined;
     }
   }, [state]);
   return [
     value,
     (value2) => {
       if (state) {
-        valueRef.current = void 0;
+        valueRef.current = undefined;
         setValue(value2);
       } else {
         valueRef.current = value2;

package/dist/packages/react/src/drawer-actions/DrawerActions-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-COIV9W5_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-r_hleTVk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_1eahh9h']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'b5eg42']});
 
 export { actions };

package/dist/packages/react/src/drawer-body/DrawerBody.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const DrawerBody = forwardRef(
   ({ children, ...props }, ref) => {