@optiaxiom/react 0.11.0 → 0.12.0

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-CsXPUf8s.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-COUckmC-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_1iopg12'],variants:{intent:{danger:'_1qoirdp',information:'_14wrdhz',neutral:'ouf8tn',primary:'_1m13e0a',success:'_1v2wqwt',warning:'l8e1r8'},variant:{light:'_1umyje3',solid:'tb3ede'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_3p6lo7'],variants:{intent:{danger:'_1oge57o',information:'r4hfnp',neutral:'_1mjqgua',primary:'_1hkfltl',success:'_144p78s',warning:'_1up9d85'},variant:{light:'_68bru9',solid:'e7mx75'}}});
 
 export { badge };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.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'}}}});

package/dist/packages/react/src/banner/Banner.js

@@ -20,7 +20,7 @@ const mapIntentToIcon = {
   warning: IconTriangleExclamationSolid
 };
 const Banner = forwardRef(
-  ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
+  ({ children, className, intent = "neutral", onDismiss, ...props }, ref) => {
     const labelId = useId();
     return /* @__PURE__ */ jsxs(
       Flex,
@@ -33,7 +33,7 @@ const Banner = forwardRef(
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
           /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", id: labelId, my: "2", children }),
-          !!onClose && /* @__PURE__ */ jsx(
+          !!onDismiss && /* @__PURE__ */ jsx(
             Button,
             {
               appearance: "subtle",
@@ -41,7 +41,7 @@ const Banner = forwardRef(
               color: "fg.default",
               flex: "none",
               icon: /* @__PURE__ */ jsx(IconX, {}),
-              onClick: onClose,
+              onClick: onDismiss,
               size: "sm"
             }
           )

package/dist/packages/react/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-fznZO42_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-Bza2cQ35.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'_66kv7y'});
+var box = recipeRuntime({base:'_11i0ktz'});
 
 export { box };

package/dist/packages/react/src/breadcrumb-item/BreadcrumbItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-Y4GzbMc-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-BerEUeXB.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_6xz0dl']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_1s04riu']});
 
 export { item };

package/dist/packages/react/src/breadcrumb-link/BreadcrumbLink-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-KAHpj_cl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-U8K4USWH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_5krxxz']});
+var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_1ki8f66']});
 
 export { link };

package/dist/packages/react/src/button/Button.js

@@ -26,6 +26,9 @@ const Button = forwardRef(
     let isIconOnly = false;
     children = decorateChildren({ asChild, children }, (children2) => {
       isIconOnly = Boolean(!children2 && icon);
+      if (isIconOnly) {
+        iconOnly = true;
+      }
       if (icon && !isIconOnly) {
         if (iconPosition === "start") {
           addonBefore = /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon });
@@ -35,7 +38,7 @@ const Button = forwardRef(
       }
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         addonBefore && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonBefore) }),
-        isIconOnly ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }) : /* @__PURE__ */ jsx(ButtonLabel, { children: children2 }),
+        iconOnly ? /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon ?? children2 }) }) : /* @__PURE__ */ jsx(ButtonLabel, { children: children2 }),
         addonAfter && /* @__PURE__ */ jsx(ButtonAddon, { asChild: true, children: fallbackSpan(addonAfter) })
       ] });
     });
@@ -51,10 +54,10 @@ const Button = forwardRef(
       ButtonBase,
       {
         asChild: true,
-        iconOnly: isIconOnly || iconOnly,
+        iconOnly,
         ref,
         ...props,
-        ...(isIconOnly || iconOnly) && {
+        ...iconOnly && {
           justifyContent: "center"
         },
         children: /* @__PURE__ */ jsx(Comp, { children })

package/dist/packages/react/src/button-base/ButtonBase-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-kCeuibvy.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DXgNKbzo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DasptH10.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_1cjb1bn',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1tact6z'],variants:{iconOnly:{false:'_1ypk26u',true:{}},intent:{danger:'_1txum27',neutral:'_161iyro',primary:'_1yqkzf9'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1fj4vvu',solid:'_9owsny',subtle:'vg17pe'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_7uh925',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'rxp9k5',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1bglw3f',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'myhak0']});
+var buttonBase = recipeRuntime({base:['_1hiarqc',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'start',transition:'colors'},'_18h1an1'],variants:{iconOnly:{false:'xkgj4h',true:{}},intent:{danger:'_1770xs7',neutral:'loao0b',primary:'l3fnc1'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'lonjyh',solid:'jtcokr',subtle:'_18p5twm'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_1vgkvpq',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'ffdbh1',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1qdgoas',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'_4h9j5o']});
 
 export { buttonBase, spinner };

package/dist/packages/react/src/button-base/ButtonBase.js

@@ -5,6 +5,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Spinner } from '../spinner/Spinner.js';
+import { Transition } from '../transition/Transition.js';
 import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
@@ -51,14 +52,14 @@ const ButtonBase = forwardRef(
         ),
         ...boxProps,
         children: /* @__PURE__ */ jsx(Comp, { disabled, ref, ...restProps, children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(TransitionGroup, { open: loading, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TransitionGroup, { open: loading, children: /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
             Spinner,
             {
               appearance: variant === "solid" ? "inverse" : "default",
               "aria-hidden": "true",
               ...spinner()
             }
-          ) }),
+          ) }) }),
           children2
         ] })) })
       }

package/dist/packages/react/src/button-group/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-kCeuibvy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'_1w7o8rk'});
+var buttonGroup = recipeRuntime({base:'lofb6q'});
 
 export { buttonGroup };

package/dist/packages/react/src/button-label/ButtonLabel.js

@@ -6,7 +6,7 @@ import { Flex } from '../flex/Flex.js';
 
 const ButtonLabel = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "4", mx: "4", ref, ...props, children }) });
+    return /* @__PURE__ */ jsx(ButtonLoadable, { asChild: true, children: /* @__PURE__ */ jsx(Flex, { flex: "1", flexDirection: "row", gap: "4", mx: "4", ref, ...props, children }) });
   }
 );
 ButtonLabel.displayName = "@optiaxiom/react/ButtonLabel";

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-kCeuibvy.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DXgNKbzo.css';
-import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BCu0H89V.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DasptH10.css';
+import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-CrkKtOoA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'_16wzyrd']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_1dzsvcg']});
 
 export { loadable };

package/dist/packages/react/src/checkbox/Checkbox-css.js

@@ -1,13 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-kCeuibvy.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-NA6rjZ8N.css';
-import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-CN8hLoWD.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BNzQxjeW.css';
+import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-B65xAICN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'lf0qvy'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1ggiubo'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_1ujbiba']});
+var checkbox = recipeRuntime({base:'nfr1nl'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_6r4dr9'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_37biaf']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'_1ty571l'});
+var input = recipeRuntime({base:'gx7gpu'});
 
 export { checkbox, control, icon, indicator, input };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-B0ic9Q_W.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-BXlzYIyA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'_3nux8w']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'nyrbee']});
 
 export { code };

package/dist/packages/react/src/combobox-content/ComboboxContent.js

@@ -4,10 +4,10 @@ import { useCombobox } from 'downshift';
 import { forwardRef } from 'react';
 import { useComboboxContext } from '../combobox-context/ComboboxContext.js';
 import { Command } from '../command/Command.js';
-import { CommandListbox } from '../command-listbox/CommandListbox.js';
 import '../field-context/FieldContext.js';
 import { useFieldContext } from '../field-context/useFieldContext.js';
 import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
+import { ComboboxContentImpl } from './ComboboxContentImpl.js';
 
 const ComboboxContent = forwardRef(
   ({ children, ...props }, ref) => {
@@ -62,7 +62,7 @@ const ComboboxContent = forwardRef(
               }
             },
             value,
-            children: /* @__PURE__ */ jsx(CommandListbox, { children })
+            children: /* @__PURE__ */ jsx(ComboboxContentImpl, { children })
           }
         )
       }

package/dist/packages/react/src/combobox-content/ComboboxContentImpl.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { useCommandContext } from '../command-context/CommandContext.js';
+import { CommandListbox } from '../command-listbox/CommandListbox.js';
+
+const ComboboxContentImpl = forwardRef(({ children, ...props }, ref) => {
+  const { setPlaced } = useCommandContext("ComboboxContentImpl");
+  useEffect(() => {
+    setPlaced(true);
+  }, [setPlaced]);
+  return /* @__PURE__ */ jsx(CommandListbox, { ref, ...props, children });
+});
+ComboboxContentImpl.displayName = "@optiaxiom/react/ComboboxContentImpl";
+
+export { ComboboxContentImpl };

package/dist/packages/react/src/combobox-context/ComboboxContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [ComboboxContextProvider, useComboboxContext] = createContext("Combobox");

package/dist/packages/react/src/command/Command.js

@@ -19,6 +19,7 @@ function Command({
   onItemSelect,
   onOpenChange,
   open,
+  selectedItem,
   value: valueProp,
   ...props
 }) {
@@ -32,14 +33,17 @@ function Command({
     prop: inputValueProp
   });
   const [lastInteractionSource, setLastInteractionSource] = useState("pointer");
-  const [highlightedIndex, setHighlightedIndex] = usePortalPatch(open);
+  const [highlightedIndex, setHighlightedIndex, placed, setPlaced] = usePortalPatch(
+    open,
+    selectedItem ? items.findIndex((item) => itemToKey(selectedItem) === itemToKey(item)) : -1
+  );
   const [highlightedSubIndex, setHighlightedSubIndex] = useState(-1);
   const downshift = useCombobox({
     ...props,
     highlightedIndex: highlightedIndex === -1 && isHoverSupported ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
     inputValue,
     isItemDisabled,
-    isOpen: open,
+    isOpen: placed,
     items,
     itemToKey,
     itemToString,
@@ -61,18 +65,19 @@ function Command({
     onIsOpenChange({ isOpen, type }) {
       onOpenChange?.(isOpen);
       if (isOpen) {
-        if (type === useCombobox.stateChangeTypes.InputClick) {
+        if (type === useCombobox.stateChangeTypes.InputClick || type === useCombobox.stateChangeTypes.ToggleButtonClick) {
           setLastInteractionSource("pointer");
         } else {
           setLastInteractionSource("keyboard");
         }
       }
     },
-    onSelectedItemChange({ selectedItem, type }) {
+    onSelectedItemChange({ selectedItem: selectedItem2, type }) {
       if (type !== useCombobox.stateChangeTypes.InputBlur) {
-        onItemSelect?.(selectedItem);
+        onItemSelect?.(selectedItem2);
       }
-    }
+    },
+    selectedItem
   });
   downshift.getMenuProps({}, { suppressRefError: true });
   return /* @__PURE__ */ jsx(
@@ -94,6 +99,7 @@ function Command({
         setLastInteractionSource(source);
       },
       setInputValue,
+      setPlaced,
       value,
       children
     }

package/dist/packages/react/src/command-context/CommandContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [CommandContextProvider, useCommandContext] = createContext("Command");

package/dist/packages/react/src/command-focusable-item/CommandFocusableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-BKbkF5Ef.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-Detvcg4P.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'u2ocfs'});
+var item = recipeRuntime({base:'_1ncyxii'});
 
 export { item };

package/dist/packages/react/src/command-sub-context/CommandSubContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [CommandSubContextProvider, useCommandSubContext] = createContext("CommandSub");

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

@@ -1,14 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DVzADbjg.css';
-import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-CKlsmPnV.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-D4UKMjb1.css';
+import './../../../../assets/src/data-table/DataTable.css.ts.vanilla-C9XygBIH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:['cw9ysw'],variants:{pinned:{left:'_1p1wv10',right:'_15r6kq1'},pinnedType:{body:'_1o6cvq8',header:{}}}});
-var cellOffsetVar = 'var(--_1dxj7hh)';
-var cellSizeVar = 'var(--_129bj5n)';
-var header = recipeRuntime({base:['_1e897x7']});
-var leftTotalSizeVar = 'var(--_1fbgzh5)';
-var rightTotalSizeVar = 'var(--zkgowy)';
-var table = recipeRuntime({base:'_1pbe52v',variants:{pinned:{both:'eaud6w',left:'_1b0fgfk',none:{},right:'_6attwa'}}});
+var cell = recipeRuntime({base:['_1nzag3n'],variants:{pinned:{left:'_1bnu03o',right:'_10mxbf2'},pinnedType:{body:'_1my72b4',header:{}}}});
+var cellOffsetVar = 'var(--efrrql)';
+var cellSizeVar = 'var(--_1vyyhnm)';
+var header = recipeRuntime({base:['ql4xvg']});
+var leftTotalSizeVar = 'var(--_1lf6yyx)';
+var rightTotalSizeVar = 'var(--_1lrm1a3)';
+var table = recipeRuntime({base:'nn08cv',variants:{pinned:{both:'_1yj37ux',left:'_18d4p1z',none:{},right:'_1e6th1o'}}});
 
 export { cell, cellOffsetVar, cellSizeVar, header, leftTotalSizeVar, rightTotalSizeVar, table };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-Ch_6anL7.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/data-table-header-cell/DataTableHeaderCell.css.ts.vanilla-b6PXu6yy.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'},'_14ra8dw','z9w5xi']});
-var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'_13sig83'],variants:{active:{false:'_127n589',true:'_1k6rp08'},muted:{false:{},true:'_4zhtel'}}});
+var button = recipeRuntime({base:[{alignItems:'center',display:'flex',gap:'4',justifyContent:'start',textAlign:'start',transition:'colors',w:'full'},'l2wxe2','_1hdrfbd']});
+var icon = recipeRuntime({base:[{h:'12',mx:'2',transition:'opacity'},'zbsuo6'],variants:{active:{false:'_1pquptj',true:'ldfyoa'},muted:{false:{},true:'lmgqte'}}});
 
 export { button, icon };

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

@@ -18,11 +18,13 @@ function Dialog({
     onChange: onOpenChange,
     prop: openProp
   });
-  const [isRootDialog, nestedDialogCount, setNestedDialogCount] = useNestedDialogCount("Dialog", open);
+  const [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

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

@@ -1,8 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-fsB1doE8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/dialog-content/DialogContent.css.ts.vanilla-CpyLSTLv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'k0w7vm'],variants:{size:{sm:'_7hzov7',md:'_1iib3gg',lg:'_1if8rmd',fullscreen:'_16u6xjz'}}});
-var nestedDialogCountVar = 'var(--yn140d)';
+var backdrop = recipeRuntime({variants:{hidden:{false:{},true:'pvdziy'}}});
+var content = recipeRuntime({base:[{color:'fg.default',display:'flex',flexDirection:'column'},'_1skr6b9'],variants:{size:{sm:'bvhydr',md:'k8oeag',lg:'_12k9f02',fullscreen:'w1wppg'}}});
+var nestedDialogCountVar = 'var(--kwq160)';
 
-export { content, nestedDialogCountVar };
+export { backdrop, content, nestedDialogCountVar };

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

@@ -1,7 +1,6 @@
 "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 { Backdrop } from '../backdrop/Backdrop.js';
@@ -12,7 +11,7 @@ import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import '@radix-ui/react-slot';
 import { onReactSelectInputBlur } from '../utils/onReactSelectInputBlur.js';
-import { nestedDialogCountVar, content } from './DialogContent-css.js';
+import { backdrop, nestedDialogCountVar, content } from './DialogContent-css.js';
 
 const DialogContent = forwardRef(
   ({
@@ -23,10 +22,16 @@ const DialogContent = forwardRef(
     transitionType = "fade",
     ...props
   }, ref) => {
-    const { isRootDialog, nestedDialogCount, open } = useDialogContext("DialogContent");
-    const BackdropContainer = isRootDialog ? Transition : VisuallyHidden;
+    const { nestedDialogCount, open } = useDialogContext("DialogContent");
     return /* @__PURE__ */ jsx(TransitionGroup, { open, children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { forceMount: true, children: [
-      /* @__PURE__ */ jsx(BackdropContainer, { children: /* @__PURE__ */ jsx(Backdrop, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {}) }) }),
+      /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(
+        Backdrop,
+        {
+          asChild: true,
+          ...backdrop({ hidden: nestedDialogCount > 0 }),
+          children: /* @__PURE__ */ jsx(RadixDialog.Overlay, {})
+        }
+      ) }),
       /* @__PURE__ */ jsx(Transition, { "data-side": "bottom", type: transitionType, children: /* @__PURE__ */ jsx(
         Paper,
         {
@@ -41,10 +46,7 @@ const DialogContent = forwardRef(
           },
           ...content({ size }, className),
           ...props,
-          children: /* @__PURE__ */ jsxs(RadixDialog.Content, { ref, children: [
-            children,
-            nestedDialogCount > 0 && /* @__PURE__ */ jsx(Transition, { children: /* @__PURE__ */ jsx(Backdrop, { rounded: "inherit" }) })
-          ] })
+          children: /* @__PURE__ */ jsx(RadixDialog.Content, { ref, children })
         }
       ) })
     ] }) });

package/dist/packages/react/src/dialog-context/DialogContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [DialogContextProvider, useDialogContext] = createContext("Dialog");

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.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-header/DialogHeader-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-BrWgYLNy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/dialog-header/DialogHeader.css.ts.vanilla-DzTg90Ah.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'en88hi']});
-var close = recipeRuntime({base:['_92z8q6']});
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_195lsq8']});
-var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_16g0uhb']});
+var actions = recipeRuntime({base:[{flexDirection:'row',gap:'8'},'_1h2h64o']});
+var close = recipeRuntime({base:['_1ieh5fg']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'sqp5d5']});
+var title = recipeRuntime({base:[{flex:'1',fontWeight:'500'},'_1yr7lzn']});
 
 export { actions, close, description, title };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-BgkqwFZz.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/disclosure-content/DisclosureContent.css.ts.vanilla-C5BQR6xg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['kusyzf']});
+var content = recipeRuntime({base:['xtlzji']});
 
 export { content };

package/dist/packages/react/src/disclosure-context/DisclosureContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from '@radix-ui/react-context';
 
 const [DisclosureContextProvider, useDisclosureContext] = createContext("Disclosure");

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-egRPA66m.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/disclosure-trigger/DisclosureTrigger.css.ts.vanilla-CLB2lqLn.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'_1d74iwm',start:'_1ntyewo'}}});
-var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1f9c33p']});
+var icon = recipeRuntime({base:[{transition:'transform'}],variants:{chevronPosition:{end:'ll8jzi',start:'_1dmdf1j'}}});
+var trigger = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'4',p:'8',px:'4',rounded:'md',textAlign:'start',w:'full'},'_1ha78yx']});
 
 export { icon, trigger };

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

@@ -1,10 +1,28 @@
-import { useDelayedState } from './useDelayedState.js';
-import { useForceRerender } from './useForceRerender.js';
+"use client";
+import { useState, useEffect } from 'react';
 
-function usePortalPatch(open) {
-  const [highlightedIndex, setHighlightedIndex] = useDelayedState(-1, open);
-  useForceRerender(open);
-  return [highlightedIndex, setHighlightedIndex];
+function usePortalPatch(open, initialHighlightedIndex = -1) {
+  const [placed, setPlaced] = useState(false);
+  useEffect(() => {
+    return () => setPlaced(false);
+  }, [open]);
+  const [highlightedIndex, setHighlightedIndex] = useState(
+    initialHighlightedIndex
+  );
+  return [
+    /**
+     * Downshift attempts to scroll to the currently selected item when the menu
+     * opens. But since we don't render the menu until it is open the `ref` will
+     * not be available yet.
+     *
+     * So we only return the index when it has been placed and return -1
+     * otherwise.
+     */
+    placed ? highlightedIndex : -1,
+    setHighlightedIndex,
+    placed,
+    setPlaced
+  ];
 }
 
 export { usePortalPatch };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-ChC54CMt.css';
-import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-DJfxhWbE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/drawer-actions/DrawerActions.css.ts.vanilla-D-zF-Km-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_16a8qf2']});
+var actions = recipeRuntime({base:[{flexDirection:'row-reverse',gap:'8'},'_1mbx0n5']});
 
 export { actions };