@base-ui/react 1.7.0 → 1.8.0

package/toast/createToastManager.d.ts

@@ -1,4 +1,4 @@
-import type { ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions } from "./useToastManager.js";
+import type { ToastObject, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions } from "./useToastManager.js";
 /**
  * Creates a new toast manager.
  */
@@ -7,7 +7,7 @@ export interface ToastManager<Data extends object = any> {
   ' subscribe': (listener: (data: ToastManagerEvent) => void) => () => void;
   add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
   close: (id?: string) => void;
-  update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T>) => void;
+  update: <T extends Data = Data>(id: string, updates: ToastManagerUpdateOptions<T> | ((prevToast: ToastObject<T>) => ToastManagerUpdateOptions<T>)) => void;
   promise: <Value, T extends Data = Data>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 }
 export interface ToastManagerEvent {

package/toast/createToastManager.js

@@ -47,8 +47,8 @@ function createToastManager() {
       emit({
         action: 'update',
         options: {
-          ...updates,
-          id
+          id,
+          updates
         }
       });
     },

package/toast/createToastManager.mjs

@@ -41,8 +41,8 @@ export function createToastManager() {
       emit({
         action: 'update',
         options: {
-          ...updates,
-          id
+          id,
+          updates
         }
       });
     },

package/toast/description/ToastDescriptionDataAttributes.d.mts

@@ -1,7 +1,5 @@
-export declare enum ToastDescriptionDataAttributes {
-  /**
-   * The type of the toast.
-   * @type {string}
-   */
-  type = "data-type",
-}
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export declare const type = "data-type";

package/toast/description/ToastDescriptionDataAttributes.d.ts

@@ -1,7 +1,5 @@
-export declare enum ToastDescriptionDataAttributes {
-  /**
-   * The type of the toast.
-   * @type {string}
-   */
-  type = "data-type",
-}
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export declare const type = "data-type";

package/toast/description/ToastDescriptionDataAttributes.js

@@ -3,12 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastDescriptionDataAttributes = void 0;
-let ToastDescriptionDataAttributes = exports.ToastDescriptionDataAttributes = /*#__PURE__*/function (ToastDescriptionDataAttributes) {
-  /**
-   * The type of the toast.
-   * @type {string}
-   */
-  ToastDescriptionDataAttributes["type"] = "data-type";
-  return ToastDescriptionDataAttributes;
-}({});
+exports.type = void 0;
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+const type = exports.type = 'data-type';

package/toast/description/ToastDescriptionDataAttributes.mjs

@@ -1,8 +1,5 @@
-export let ToastDescriptionDataAttributes = /*#__PURE__*/function (ToastDescriptionDataAttributes) {
-  /**
-   * The type of the toast.
-   * @type {string}
-   */
-  ToastDescriptionDataAttributes["type"] = "data-type";
-  return ToastDescriptionDataAttributes;
-}({});
+/**
+ * The type of the toast.
+ * @type {string}
+ */
+export const type = 'data-type';

package/toast/positioner/ToastPositioner.js

@@ -16,6 +16,7 @@ var _floatingUiReact = require("../../floating-ui-react");
 var _noop = require("../../internals/noop");
 var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _usePositioner = require("../../utils/usePositioner");
+var ToastRootCssVars = _interopRequireWildcard(require("../root/ToastRootCssVars"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the toast against the anchor.
@@ -85,7 +86,7 @@ const ToastPositioner = exports.ToastPositioner = /*#__PURE__*/React.forwardRef(
   const element = (0, _usePositioner.usePositioner)(componentProps, state, {
     styles: {
       ...positioning.positionerStyles,
-      ['--toast-index']: toast.transitionStatus === 'ending' ? domIndex : visibleIndex
+      [ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex
     },
     transitionStatus: toast.transitionStatus,
     props: elementProps,

package/toast/positioner/ToastPositioner.mjs

@@ -10,6 +10,7 @@ import { useFloatingRootContext } from "../../floating-ui-react/index.mjs";
 import { NOOP } from "../../internals/noop.mjs";
 import { useToastProviderContext } from "../provider/ToastProviderContext.mjs";
 import { usePositioner } from "../../utils/usePositioner.mjs";
+import * as ToastRootCssVars from "../root/ToastRootCssVars.mjs";
 
 /**
  * Positions the toast against the anchor.
@@ -80,7 +81,7 @@ export const ToastPositioner = /*#__PURE__*/React.forwardRef(function ToastPosit
   const element = usePositioner(componentProps, state, {
     styles: {
       ...positioning.positionerStyles,
-      ['--toast-index']: toast.transitionStatus === 'ending' ? domIndex : visibleIndex
+      [ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex
     },
     transitionStatus: toast.transitionStatus,
     props: elementProps,

package/toast/positioner/ToastPositionerCssVars.d.mts

@@ -1,27 +1,25 @@
-export declare enum ToastPositionerCssVars {
-  /**
-   * The available width between the anchor and the edge of the viewport.
-   * @type {number}
-   */
-  availableWidth = "--available-width",
-  /**
-   * The available height between the anchor and the edge of the viewport.
-   * @type {number}
-   */
-  availableHeight = "--available-height",
-  /**
-   * The anchor's width.
-   * @type {number}
-   */
-  anchorWidth = "--anchor-width",
-  /**
-   * The anchor's height.
-   * @type {number}
-   */
-  anchorHeight = "--anchor-height",
-  /**
-   * The coordinates that this element is anchored to. Used for animations and transitions.
-   * @type {string}
-   */
-  transformOrigin = "--transform-origin",
-}
+/**
+ * The available width between the anchor and the edge of the viewport.
+ * @type {number}
+ */
+export declare const availableWidth = "--available-width";
+/**
+ * The available height between the anchor and the edge of the viewport.
+ * @type {number}
+ */
+export declare const availableHeight = "--available-height";
+/**
+ * The anchor's width.
+ * @type {number}
+ */
+export declare const anchorWidth = "--anchor-width";
+/**
+ * The anchor's height.
+ * @type {number}
+ */
+export declare const anchorHeight = "--anchor-height";
+/**
+ * The coordinates that this element is anchored to. Used for animations and transitions.
+ * @type {string}
+ */
+export declare const transformOrigin = "--transform-origin";

package/toast/positioner/ToastPositionerCssVars.d.ts

@@ -1,27 +1,25 @@
-export declare enum ToastPositionerCssVars {
-  /**
-   * The available width between the anchor and the edge of the viewport.
-   * @type {number}
-   */
-  availableWidth = "--available-width",
-  /**
-   * The available height between the anchor and the edge of the viewport.
-   * @type {number}
-   */
-  availableHeight = "--available-height",
-  /**
-   * The anchor's width.
-   * @type {number}
-   */
-  anchorWidth = "--anchor-width",
-  /**
-   * The anchor's height.
-   * @type {number}
-   */
-  anchorHeight = "--anchor-height",
-  /**
-   * The coordinates that this element is anchored to. Used for animations and transitions.
-   * @type {string}
-   */
-  transformOrigin = "--transform-origin",
-}
+/**
+ * The available width between the anchor and the edge of the viewport.
+ * @type {number}
+ */
+export declare const availableWidth = "--available-width";
+/**
+ * The available height between the anchor and the edge of the viewport.
+ * @type {number}
+ */
+export declare const availableHeight = "--available-height";
+/**
+ * The anchor's width.
+ * @type {number}
+ */
+export declare const anchorWidth = "--anchor-width";
+/**
+ * The anchor's height.
+ * @type {number}
+ */
+export declare const anchorHeight = "--anchor-height";
+/**
+ * The coordinates that this element is anchored to. Used for animations and transitions.
+ * @type {string}
+ */
+export declare const transformOrigin = "--transform-origin";

package/toast/positioner/ToastPositionerCssVars.js

@@ -3,32 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastPositionerCssVars = void 0;
-let ToastPositionerCssVars = exports.ToastPositionerCssVars = /*#__PURE__*/function (ToastPositionerCssVars) {
-  /**
-   * The available width between the anchor and the edge of the viewport.
-   * @type {number}
-   */
-  ToastPositionerCssVars["availableWidth"] = "--available-width";
-  /**
-   * The available height between the anchor and the edge of the viewport.
-   * @type {number}
-   */
-  ToastPositionerCssVars["availableHeight"] = "--available-height";
-  /**
-   * The anchor's width.
-   * @type {number}
-   */
-  ToastPositionerCssVars["anchorWidth"] = "--anchor-width";
-  /**
-   * The anchor's height.
-   * @type {number}
-   */
-  ToastPositionerCssVars["anchorHeight"] = "--anchor-height";
-  /**
-   * The coordinates that this element is anchored to. Used for animations and transitions.
-   * @type {string}
-   */
-  ToastPositionerCssVars["transformOrigin"] = "--transform-origin";
-  return ToastPositionerCssVars;
-}({});
+exports.transformOrigin = exports.availableWidth = exports.availableHeight = exports.anchorWidth = exports.anchorHeight = void 0;
+/**
+ * The available width between the anchor and the edge of the viewport.
+ * @type {number}
+ */
+const availableWidth = exports.availableWidth = '--available-width';
+/**
+ * The available height between the anchor and the edge of the viewport.
+ * @type {number}
+ */
+const availableHeight = exports.availableHeight = '--available-height';
+/**
+ * The anchor's width.
+ * @type {number}
+ */
+const anchorWidth = exports.anchorWidth = '--anchor-width';
+/**
+ * The anchor's height.
+ * @type {number}
+ */
+const anchorHeight = exports.anchorHeight = '--anchor-height';
+/**
+ * The coordinates that this element is anchored to. Used for animations and transitions.
+ * @type {string}
+ */
+const transformOrigin = exports.transformOrigin = '--transform-origin';

package/toast/positioner/ToastPositionerCssVars.mjs

@@ -1,28 +1,25 @@
-export let ToastPositionerCssVars = /*#__PURE__*/function (ToastPositionerCssVars) {
-  /**
-   * The available width between the anchor and the edge of the viewport.
-   * @type {number}
-   */
-  ToastPositionerCssVars["availableWidth"] = "--available-width";
-  /**
-   * The available height between the anchor and the edge of the viewport.
-   * @type {number}
-   */
-  ToastPositionerCssVars["availableHeight"] = "--available-height";
-  /**
-   * The anchor's width.
-   * @type {number}
-   */
-  ToastPositionerCssVars["anchorWidth"] = "--anchor-width";
-  /**
-   * The anchor's height.
-   * @type {number}
-   */
-  ToastPositionerCssVars["anchorHeight"] = "--anchor-height";
-  /**
-   * The coordinates that this element is anchored to. Used for animations and transitions.
-   * @type {string}
-   */
-  ToastPositionerCssVars["transformOrigin"] = "--transform-origin";
-  return ToastPositionerCssVars;
-}({});
+/**
+ * The available width between the anchor and the edge of the viewport.
+ * @type {number}
+ */
+export const availableWidth = '--available-width';
+/**
+ * The available height between the anchor and the edge of the viewport.
+ * @type {number}
+ */
+export const availableHeight = '--available-height';
+/**
+ * The anchor's width.
+ * @type {number}
+ */
+export const anchorWidth = '--anchor-width';
+/**
+ * The anchor's height.
+ * @type {number}
+ */
+export const anchorHeight = '--anchor-height';
+/**
+ * The coordinates that this element is anchored to. Used for animations and transitions.
+ * @type {string}
+ */
+export const transformOrigin = '--transform-origin';

package/toast/positioner/ToastPositionerDataAttributes.d.mts

@@ -1,16 +1,14 @@
-export declare enum ToastPositionerDataAttributes {
-  /**
-   * Present when the anchor is hidden.
-   */
-  anchorHidden = "data-anchor-hidden",
-  /**
-   * Indicates which side the toast is positioned relative to the trigger.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  side = "data-side",
-  /**
-   * Indicates how the toast is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  align = "data-align",
-}
+/**
+ * Present when the anchor is hidden.
+ */
+export declare const anchorHidden = "data-anchor-hidden";
+/**
+ * Indicates which side the toast is positioned relative to the trigger.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export declare const side = "data-side";
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export declare const align = "data-align";

package/toast/positioner/ToastPositionerDataAttributes.d.ts

@@ -1,16 +1,14 @@
-export declare enum ToastPositionerDataAttributes {
-  /**
-   * Present when the anchor is hidden.
-   */
-  anchorHidden = "data-anchor-hidden",
-  /**
-   * Indicates which side the toast is positioned relative to the trigger.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  side = "data-side",
-  /**
-   * Indicates how the toast is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  align = "data-align",
-}
+/**
+ * Present when the anchor is hidden.
+ */
+export declare const anchorHidden = "data-anchor-hidden";
+/**
+ * Indicates which side the toast is positioned relative to the trigger.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export declare const side = "data-side";
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export declare const align = "data-align";

package/toast/positioner/ToastPositionerDataAttributes.js

@@ -3,22 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastPositionerDataAttributes = void 0;
+exports.side = exports.anchorHidden = exports.align = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
-let ToastPositionerDataAttributes = exports.ToastPositionerDataAttributes = function (ToastPositionerDataAttributes) {
-  /**
-   * Present when the anchor is hidden.
-   */
-  ToastPositionerDataAttributes[ToastPositionerDataAttributes["anchorHidden"] = _popupStateMapping.CommonPopupDataAttributes.anchorHidden] = "anchorHidden";
-  /**
-   * Indicates which side the toast is positioned relative to the trigger.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  ToastPositionerDataAttributes[ToastPositionerDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
-  /**
-   * Indicates how the toast is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  ToastPositionerDataAttributes[ToastPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
-  return ToastPositionerDataAttributes;
-}({});
+/**
+ * Present when the anchor is hidden.
+ */
+const anchorHidden = exports.anchorHidden = _popupStateMapping.CommonPopupDataAttributes.anchorHidden;
+/**
+ * Indicates which side the toast is positioned relative to the trigger.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+const side = exports.side = _popupStateMapping.CommonPopupDataAttributes.side;
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+const align = exports.align = _popupStateMapping.CommonPopupDataAttributes.align;

package/toast/positioner/ToastPositionerDataAttributes.mjs

@@ -1,18 +1,16 @@
 import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.mjs";
-export let ToastPositionerDataAttributes = function (ToastPositionerDataAttributes) {
-  /**
-   * Present when the anchor is hidden.
-   */
-  ToastPositionerDataAttributes[ToastPositionerDataAttributes["anchorHidden"] = CommonPopupDataAttributes.anchorHidden] = "anchorHidden";
-  /**
-   * Indicates which side the toast is positioned relative to the trigger.
-   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  ToastPositionerDataAttributes[ToastPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
-  /**
-   * Indicates how the toast is aligned relative to specified side.
-   * @type {'start' | 'center' | 'end'}
-   */
-  ToastPositionerDataAttributes[ToastPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
-  return ToastPositionerDataAttributes;
-}({});
+
+/**
+ * Present when the anchor is hidden.
+ */
+export const anchorHidden = CommonPopupDataAttributes.anchorHidden;
+/**
+ * Indicates which side the toast is positioned relative to the trigger.
+ * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export const side = CommonPopupDataAttributes.side;
+/**
+ * Indicates how the toast is aligned relative to specified side.
+ * @type {'start' | 'center' | 'end'}
+ */
+export const align = CommonPopupDataAttributes.align;

package/toast/provider/ToastProvider.js

@@ -48,7 +48,7 @@ const ToastProvider = exports.ToastProvider = function ToastProvider(props) {
       if (action === 'promise' && options.promise) {
         store.promiseToast(options.promise, options);
       } else if (action === 'update' && id) {
-        store.updateToast(id, options);
+        store.updateToast(id, options.updates);
       } else if (action === 'close') {
         store.closeToast(id);
       } else {

package/toast/provider/ToastProvider.mjs

@@ -43,7 +43,7 @@ export const ToastProvider = function ToastProvider(props) {
       if (action === 'promise' && options.promise) {
         store.promiseToast(options.promise, options);
       } else if (action === 'update' && id) {
-        store.updateToast(id, options);
+        store.updateToast(id, options.updates);
       } else if (action === 'close') {
         store.closeToast(id);
       } else {

package/toast/root/ToastRoot.js

@@ -21,12 +21,15 @@ var _useRenderElement = require("../../internals/useRenderElement");
 var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 var _constants = require("../../internals/constants");
 var _useSwipeDismiss = require("../../utils/useSwipeDismiss");
+var _getElementTransform = require("../../utils/getElementTransform");
+var ToastRootCssVars = _interopRequireWildcard(require("./ToastRootCssVars"));
+var ToastRootDataAttributes = _interopRequireWildcard(require("./ToastRootDataAttributes"));
 var _jsxRuntime = require("react/jsx-runtime");
 const toastRootStateAttributesMapping = exports.toastRootStateAttributesMapping = {
   ..._stateAttributesMapping.transitionStatusMapping,
   swipeDirection(value) {
     return value ? {
-      'data-swipe-direction': value
+      [ToastRootDataAttributes.swipeDirection]: value
     } : null;
   }
 };
@@ -246,7 +249,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     };
     swipeCancelBaselineRef.current = dragStartPosRef.current;
     const element = event.currentTarget;
-    const transform = (0, _useSwipeDismiss.getElementTransform)(element);
+    const transform = (0, _getElementTransform.getElementTransform)(element);
     initialTransformRef.current = transform;
     setInitialTransform(transform);
     setResolvedDragOffset({
@@ -411,8 +414,8 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
       transform: isSwiping ? `translateX(${dragOffset.x}px) translateY(${dragOffset.y}px) scale(${initialTransform.scale})` : undefined,
-      ['--toast-swipe-movement-x']: `${deltaX}px`,
-      ['--toast-swipe-movement-y']: `${deltaY}px`
+      [ToastRootCssVars.swipeMovementX]: `${deltaX}px`,
+      [ToastRootCssVars.swipeMovementY]: `${deltaY}px`
     };
   }
   const isHighPriority = toast.priority === 'high';
@@ -431,9 +434,9 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     inert: (0, _inertValue.inertValue)(toast.limited),
     style: {
       ...getDragStyles(),
-      ['--toast-index']: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
-      ['--toast-offset-y']: `${offsetY}px`,
-      ['--toast-height']: toast.height ? `${toast.height}px` : undefined
+      [ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
+      [ToastRootCssVars.offsetY]: `${offsetY}px`,
+      [ToastRootCssVars.height]: toast.height ? `${toast.height}px` : undefined
     }
   };
   const toastRoot = React.useMemo(() => ({

package/toast/root/ToastRoot.mjs

@@ -14,13 +14,16 @@ import { useToastProviderContext } from "../provider/ToastProviderContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
 import { BASE_UI_SWIPE_IGNORE_SELECTOR, LEGACY_SWIPE_IGNORE_SELECTOR } from "../../internals/constants.mjs";
-import { getDisplacement, getElementTransform } from "../../utils/useSwipeDismiss.mjs";
+import { getDisplacement } from "../../utils/useSwipeDismiss.mjs";
+import { getElementTransform } from "../../utils/getElementTransform.mjs";
+import * as ToastRootCssVars from "./ToastRootCssVars.mjs";
+import * as ToastRootDataAttributes from "./ToastRootDataAttributes.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const toastRootStateAttributesMapping = {
   ...transitionStatusMapping,
   swipeDirection(value) {
     return value ? {
-      'data-swipe-direction': value
+      [ToastRootDataAttributes.swipeDirection]: value
     } : null;
   }
 };
@@ -405,8 +408,8 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       // While swiping, freeze the element at its current visual transform so it doesn't snap to the
       // end position.
       transform: isSwiping ? `translateX(${dragOffset.x}px) translateY(${dragOffset.y}px) scale(${initialTransform.scale})` : undefined,
-      ['--toast-swipe-movement-x']: `${deltaX}px`,
-      ['--toast-swipe-movement-y']: `${deltaY}px`
+      [ToastRootCssVars.swipeMovementX]: `${deltaX}px`,
+      [ToastRootCssVars.swipeMovementY]: `${deltaY}px`
     };
   }
   const isHighPriority = toast.priority === 'high';
@@ -425,9 +428,9 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     inert: inertValue(toast.limited),
     style: {
       ...getDragStyles(),
-      ['--toast-index']: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
-      ['--toast-offset-y']: `${offsetY}px`,
-      ['--toast-height']: toast.height ? `${toast.height}px` : undefined
+      [ToastRootCssVars.index]: toast.transitionStatus === 'ending' ? domIndex : visibleIndex,
+      [ToastRootCssVars.offsetY]: `${offsetY}px`,
+      [ToastRootCssVars.height]: toast.height ? `${toast.height}px` : undefined
     }
   };
   const toastRoot = React.useMemo(() => ({