@sanity/ui 3.0.0-static.28 → 3.0.0-static.29

package/dist/index.d.cts

@@ -76,6 +76,7 @@ import {RGB as RGB_2} from '@sanity/ui/theme'
 import {rgba as rgba_2} from '@sanity/ui/theme'
 import {rgbToHex as rgbToHex_2} from '@sanity/ui/theme'
 import {rgbToHsl as rgbToHsl_2} from '@sanity/ui/theme'
+import {RootStyleProps} from '@sanity/ui/css'
 import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
 import {screen as screen_3} from '@sanity/ui/theme'
 import {SelectableStyleProps} from '@sanity/ui/css'
@@ -916,6 +917,9 @@ export declare const DEFAULT_POPOVER_ELEMENT = 'div'
 /** @public */
 export declare const DEFAULT_RADIO_ELEMENT = 'input'
 
+/** @public */
+export declare const DEFAULT_ROOT_ELEMENT = 'html'
+
 /** @public */
 export declare const DEFAULT_SELECT_ELEMENT = 'select'
 
@@ -958,7 +962,7 @@ export declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
 /** @beta */
 export declare const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
 
-/** @public */
+/** @internal */
 export declare const DEFAULT_TOAST_ELEMENT = 'li'
 
 /** @public */
@@ -2140,6 +2144,24 @@ export declare const rgbToHex: typeof rgbToHex_2
  */
 export declare const rgbToHsl: typeof rgbToHsl_2
 
+/**
+ * The `Root` component.
+ *
+ * @public
+ */
+export declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
+  props: RootProps<E>,
+): JSX.Element
+
+/** @public */
+export declare type RootElementType = 'html' | 'body' | 'div'
+
+/** @public */
+export declare interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
+
+/** @public */
+export declare type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
+
 /**
  * @public
  * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
@@ -2720,9 +2742,9 @@ export declare type ThemeShadow = ThemeShadow_2
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
  *
- * @public
+ * @internal
  */
 export declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
   props: ToastProps<E>,
@@ -2740,7 +2762,7 @@ export declare interface ToastContextValue {
   push: (params: ToastParams) => string
 }
 
-/** @public */
+/** @internal */
 export declare type ToastElementType = 'li' | ComponentType
 
 /** @internal */
@@ -2755,17 +2777,14 @@ declare type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElement
   E
 >
 
-/** @public */
+/** @internal */
 export declare type ToastOwnProps = RadiusStyleProps & {
   closable?: boolean
   description?: ReactNode
   onClose?: () => void
   title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
-  /** @deprecated */
   duration?: number
-  /** @deprecated */
-  updatedAt?: number
 }
 
 /** @public */
@@ -2779,7 +2798,7 @@ export declare interface ToastParams {
   status?: 'error' | 'warning' | 'success' | 'info'
 }
 
-/** @public */
+/** @internal */
 export declare type ToastProps<E extends ToastElementType = ToastElementType> = Props<
   ToastOwnProps,
   E

package/dist/index.d.ts

@@ -76,6 +76,7 @@ import {RGB as RGB_2} from '@sanity/ui/theme'
 import {rgba as rgba_2} from '@sanity/ui/theme'
 import {rgbToHex as rgbToHex_2} from '@sanity/ui/theme'
 import {rgbToHsl as rgbToHsl_2} from '@sanity/ui/theme'
+import {RootStyleProps} from '@sanity/ui/css'
 import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
 import {screen as screen_3} from '@sanity/ui/theme'
 import {SelectableStyleProps} from '@sanity/ui/css'
@@ -916,6 +917,9 @@ export declare const DEFAULT_POPOVER_ELEMENT = 'div'
 /** @public */
 export declare const DEFAULT_RADIO_ELEMENT = 'input'
 
+/** @public */
+export declare const DEFAULT_ROOT_ELEMENT = 'html'
+
 /** @public */
 export declare const DEFAULT_SELECT_ELEMENT = 'select'
 
@@ -958,7 +962,7 @@ export declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
 /** @beta */
 export declare const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
 
-/** @public */
+/** @internal */
 export declare const DEFAULT_TOAST_ELEMENT = 'li'
 
 /** @public */
@@ -2140,6 +2144,24 @@ export declare const rgbToHex: typeof rgbToHex_2
  */
 export declare const rgbToHsl: typeof rgbToHsl_2
 
+/**
+ * The `Root` component.
+ *
+ * @public
+ */
+export declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
+  props: RootProps<E>,
+): JSX.Element
+
+/** @public */
+export declare type RootElementType = 'html' | 'body' | 'div'
+
+/** @public */
+export declare interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
+
+/** @public */
+export declare type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
+
 /**
  * @public
  * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
@@ -2720,9 +2742,9 @@ export declare type ThemeShadow = ThemeShadow_2
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
  *
- * @public
+ * @internal
  */
 export declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
   props: ToastProps<E>,
@@ -2740,7 +2762,7 @@ export declare interface ToastContextValue {
   push: (params: ToastParams) => string
 }
 
-/** @public */
+/** @internal */
 export declare type ToastElementType = 'li' | ComponentType
 
 /** @internal */
@@ -2755,17 +2777,14 @@ declare type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElement
   E
 >
 
-/** @public */
+/** @internal */
 export declare type ToastOwnProps = RadiusStyleProps & {
   closable?: boolean
   description?: ReactNode
   onClose?: () => void
   title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
-  /** @deprecated */
   duration?: number
-  /** @deprecated */
-  updatedAt?: number
 }
 
 /** @public */
@@ -2779,7 +2798,7 @@ export declare interface ToastParams {
   status?: 'error' | 'warning' | 'success' | 'info'
 }
 
-/** @public */
+/** @internal */
 export declare type ToastProps<E extends ToastElementType = ToastElementType> = Props<
   ToastOwnProps,
   E

package/dist/index.js

@@ -1,11 +1,11 @@
 import { createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1 } from "@sanity/ui/theme";
-import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, BoundaryElementContext, _isEnterToClickElement, Card, Text, useResponsiveProp, EMPTY_ARRAY, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, createGlobalScopedContext, usePrefersReducedMotion, Portal, Z_OFFSETS, Layer, Grid, LayerProvider, isRecord, Selectable, _getArrayProp, useCustomValidity, useDelayedState, TooltipDelayGroupContext } from "./_chunks-es/_visual-editing.js";
-import { Arrow, CardProvider, DEFAULT_ARROW_ELEMENT, DEFAULT_BOX_ELEMENT, DEFAULT_BUTTON_ELEMENT, DEFAULT_CARD_ELEMENT, DEFAULT_FLEX_ELEMENT, DEFAULT_GRID_ELEMENT, DEFAULT_HOTKEYS_ELEMENT, DEFAULT_KBD_ELEMENT, DEFAULT_LAYER_ELEMENT, DEFAULT_MENU_DIVIDER_ELEMENT, DEFAULT_MENU_ELEMENT, DEFAULT_MENU_GROUP_ELEMENT, DEFAULT_MENU_ITEM_ELEMENT, DEFAULT_POPOVER_ELEMENT, DEFAULT_SELECTABLE_ELEMENT, DEFAULT_SPINNER_ELEMENT, DEFAULT_STACK_ELEMENT, DEFAULT_TAB_ELEMENT, DEFAULT_TAB_LIST_ELEMENT, DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_INPUT_ELEMENT, DEFAULT_TOOLTIP_ELEMENT, Hotkeys, KBD, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Spinner, Tab, TabList, ThemeColorProvider, ThemeProvider, Tooltip, _getResponsiveProp, useCard, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.js";
+import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, BoundaryElementContext, _isEnterToClickElement, Selectable, Text, useResponsiveProp, EMPTY_ARRAY, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, Card, createGlobalScopedContext, usePrefersReducedMotion, Portal, Z_OFFSETS, Layer, Grid, LayerProvider, isRecord, _getArrayProp, useCustomValidity, PortalProvider, CardProvider, useDelayedState, TooltipDelayGroupContext } from "./_chunks-es/_visual-editing.js";
+import { Arrow, DEFAULT_ARROW_ELEMENT, DEFAULT_BOX_ELEMENT, DEFAULT_BUTTON_ELEMENT, DEFAULT_CARD_ELEMENT, DEFAULT_FLEX_ELEMENT, DEFAULT_GRID_ELEMENT, DEFAULT_HOTKEYS_ELEMENT, DEFAULT_KBD_ELEMENT, DEFAULT_LAYER_ELEMENT, DEFAULT_MENU_DIVIDER_ELEMENT, DEFAULT_MENU_ELEMENT, DEFAULT_MENU_GROUP_ELEMENT, DEFAULT_MENU_ITEM_ELEMENT, DEFAULT_POPOVER_ELEMENT, DEFAULT_SELECTABLE_ELEMENT, DEFAULT_SPINNER_ELEMENT, DEFAULT_STACK_ELEMENT, DEFAULT_TAB_ELEMENT, DEFAULT_TAB_LIST_ELEMENT, DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_INPUT_ELEMENT, DEFAULT_TOOLTIP_ELEMENT, Hotkeys, KBD, Menu, MenuDivider, MenuGroup, MenuItem, Spinner, Tab, TabList, ThemeColorProvider, ThemeProvider, Tooltip, _getResponsiveProp, useCard, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.js";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { ChevronDownIcon, CloseIcon, ToggleArrowRightIcon, CheckmarkIcon, RemoveIcon } from "@sanity/icons";
 import { useReducer, useCallback, useRef, useImperativeHandle, useMemo, useEffect, cloneElement, useState, Children, isValidElement, Fragment, useContext, useSyncExternalStore, startTransition, memo, useId, lazy, Suspense, Component } from "react";
 import { c } from "react/compiler-runtime";
-import { breadcrumbs, container as container$1, dialogCard, dialogHeader, dialogContent, dialogScrollerShadowTop, dialogScroller, dialogScrollerShadowBottom, dialogFooter, dialog, dialogContainer, toast, toastLayer, treeItem, vars, label, textOverflow, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, code, heading, radio, radioInput, radioPresentation, select, _inputElement, selectPresentation, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, srOnly, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, _inputPresentation, BREAKPOINTS } from "@sanity/ui/css";
+import { breadcrumbs, container as container$1, dialogCard, dialogHeader, dialogContent, dialogScrollerShadowTop, dialogScroller, dialogScrollerShadowBottom, dialogFooter, dialog, dialogContainer, toast, toastLayer, treeItem, vars, label, textOverflow, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, code, heading, radio, radioInput, radioPresentation, box, root, select, _inputElement, selectPresentation, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, srOnly, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, _inputPresentation, BREAKPOINTS } from "@sanity/ui/css";
 import { px, rem } from "@sanity/ui/css";
 import { motion, AnimatePresence } from "framer-motion";
 import { ResizeObserver } from "@juggle/resize-observer";
@@ -185,7 +185,7 @@ function Autocomplete(props) {
     value
   } = state, defaultRenderOption = useCallback(({
     value: value_0
-  }) => /* @__PURE__ */ jsx(Card, { as: "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) }), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
+  }) => /* @__PURE__ */ jsx(Selectable, { as: "button", padding: paddingProp, radius: 2, children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) }), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
   useImperativeHandle(forwardedRef, () => inputElementRef.current);
   const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useResponsiveProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
     setTimeout(() => {
@@ -751,7 +751,7 @@ function TabPanel(props) {
   let t3;
   return $[5] !== as || $[6] !== children || $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "TabPanel", ...rest, as, role: "tabpanel", tabIndex: t2, children }), $[5] = as, $[6] = children, $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
-const DEFAULT_TOAST_ELEMENT = "li", ROLES = {
+const DEFAULT_TOAST_ELEMENT = "li", LONG_ENOUGH_BUT_NOT_TOO_LONG = 1e3 * 60 * 60 * 24 * 24, ROLES = {
   error: "alert",
   warning: "alert",
   success: "alert",
@@ -768,65 +768,61 @@ const DEFAULT_TOAST_ELEMENT = "li", ROLES = {
   info: "neutral"
 };
 function Toast(props) {
-  const $ = c(40), t0 = props;
-  let closable, description, onClose, rest, status, t1, t2, title;
-  if ($[0] !== t0) {
-    const {
-      as: t32,
-      closable: t42,
-      description: t52,
-      duration,
-      onClose: t62,
-      radius: t72,
-      title: t82,
-      status: t92,
-      updatedAt,
-      ...t102
-    } = t0;
-    t1 = t32, closable = t42, description = t52, onClose = t62, t2 = t72, title = t82, status = t92, rest = t102, $[0] = t0, $[1] = closable, $[2] = description, $[3] = onClose, $[4] = rest, $[5] = status, $[6] = t1, $[7] = t2, $[8] = title;
-  } else
-    closable = $[1], description = $[2], onClose = $[3], rest = $[4], status = $[5], t1 = $[6], t2 = $[7], title = $[8];
+  const $ = c(42), t0 = props;
+  let closable, description, duration, onClose, rest, status, t1, t2, title;
+  $[0] !== t0 ? ({
+    as: t1,
+    closable,
+    description,
+    duration,
+    onClose,
+    radius: t2,
+    title,
+    status,
+    ...rest
+  } = t0, $[0] = t0, $[1] = closable, $[2] = description, $[3] = duration, $[4] = onClose, $[5] = rest, $[6] = status, $[7] = t1, $[8] = t2, $[9] = title) : (closable = $[1], description = $[2], duration = $[3], onClose = $[4], rest = $[5], status = $[6], t1 = $[7], t2 = $[8], title = $[9]);
   const as = t1 === void 0 ? DEFAULT_TOAST_ELEMENT : t1, radius = t2 === void 0 ? 3 : t2, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status", visualDuration = usePrefersReducedMotion() ? 0 : 0.26;
   let t3;
-  $[9] !== visualDuration ? (t3 = visualDuration ? {
+  $[10] !== visualDuration ? (t3 = visualDuration ? {
     type: "spring",
     visualDuration,
     bounce: 0.25
   } : {
     duration: 0
-  }, $[9] = visualDuration, $[10] = t3) : t3 = $[10];
-  const transition = t3;
+  }, $[10] = visualDuration, $[11] = t3) : t3 = $[11];
+  const transition = t3, hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG;
   let t4;
-  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t4 = ["hidden", "initial"], $[11] = t4) : t4 = $[11];
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t4 = ["hidden", "initial"], $[12] = t4) : t4 = $[12];
   const initial = t4;
   let t5;
-  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t5 = ["visible", "slideIn"], $[12] = t5) : t5 = $[12];
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t5 = ["visible", "slideIn"], $[13] = t5) : t5 = $[13];
   const animate = t5;
   let t6;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t6 = ["hidden", "slideOut"], $[13] = t6) : t6 = $[13];
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t6 = ["hidden", "slideOut"], $[14] = t6) : t6 = $[14];
   const exit = t6;
   let t7;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = toast(), $[14] = t7) : t7 = $[14];
-  let t8;
-  $[15] !== title ? (t8 = title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }), $[15] = title, $[16] = t8) : t8 = $[16];
+  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t7 = toast(), $[15] = t7) : t7 = $[15];
+  const t8 = hasDuration ? "" : void 0;
   let t9;
-  $[17] !== description || $[18] !== transition ? (t9 = description && /* @__PURE__ */ jsx(MotionText, { muted: !0, size: 1, variants: content, transition, children: description }), $[17] = description, $[18] = transition, $[19] = t9) : t9 = $[19];
+  $[16] !== title ? (t9 = title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }), $[16] = title, $[17] = t9) : t9 = $[17];
   let t10;
-  $[20] !== t8 || $[21] !== t9 ? (t10 = /* @__PURE__ */ jsx(Flex, { flex: 1, overflowX: "auto", padding: 3, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-    t8,
-    t9
-  ] }) }), $[20] = t8, $[21] = t9, $[22] = t10) : t10 = $[22];
+  $[18] !== description || $[19] !== transition ? (t10 = description && /* @__PURE__ */ jsx(MotionText, { muted: !0, size: 1, variants: content, transition, children: description }), $[18] = description, $[19] = transition, $[20] = t10) : t10 = $[20];
   let t11;
-  $[23] !== buttonTone || $[24] !== closable || $[25] !== onClose ? (t11 = closable && /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Button, { as: "button", icon: CloseIcon, mode: "bleed", padding: 2, tone: buttonTone, onClick: onClose, style: {
-    verticalAlign: "top"
-  } }) }), $[23] = buttonTone, $[24] = closable, $[25] = onClose, $[26] = t11) : t11 = $[26];
+  $[21] !== t10 || $[22] !== t9 ? (t11 = /* @__PURE__ */ jsx(Flex, { flex: 1, overflowX: "auto", padding: 3, children: /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    t9,
+    t10
+  ] }) }), $[21] = t10, $[22] = t9, $[23] = t11) : t11 = $[23];
   let t12;
-  $[27] !== t10 || $[28] !== t11 || $[29] !== transition ? (t12 = /* @__PURE__ */ jsxs(MotionFlex, { align: "flex-start", variants: content, transition, children: [
-    t10,
-    t11
-  ] }), $[27] = t10, $[28] = t11, $[29] = transition, $[30] = t12) : t12 = $[30];
+  $[24] !== buttonTone || $[25] !== closable || $[26] !== onClose ? (t12 = closable && /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Button, { as: "button", icon: CloseIcon, mode: "bleed", padding: 2, tone: buttonTone, onClick: onClose, style: {
+    verticalAlign: "top"
+  } }) }), $[24] = buttonTone, $[25] = closable, $[26] = onClose, $[27] = t12) : t12 = $[27];
   let t13;
-  return $[31] !== as || $[32] !== cardTone || $[33] !== radius || $[34] !== rest || $[35] !== role || $[36] !== t12 || $[37] !== transition || $[38] !== visualDuration ? (t13 = /* @__PURE__ */ jsx(MotionCard, { as, className: t7, "data-ui": "Toast", role, ...rest, custom: visualDuration, radius, shadow: 2, tone: cardTone, layout: "position", variants: container, initial, animate, exit, transition, position: "relative", children: t12 }), $[31] = as, $[32] = cardTone, $[33] = radius, $[34] = rest, $[35] = role, $[36] = t12, $[37] = transition, $[38] = visualDuration, $[39] = t13) : t13 = $[39], t13;
+  $[28] !== t11 || $[29] !== t12 || $[30] !== transition ? (t13 = /* @__PURE__ */ jsxs(MotionFlex, { align: "flex-start", variants: content, transition, children: [
+    t11,
+    t12
+  ] }), $[28] = t11, $[29] = t12, $[30] = transition, $[31] = t13) : t13 = $[31];
+  let t14;
+  return $[32] !== as || $[33] !== cardTone || $[34] !== radius || $[35] !== rest || $[36] !== role || $[37] !== t13 || $[38] !== t8 || $[39] !== transition || $[40] !== visualDuration ? (t14 = /* @__PURE__ */ jsx(MotionCard, { as, className: t7, "data-ui": "Toast", role, ...rest, custom: visualDuration, "data-has-duration": t8, radius, shadow: 2, tone: cardTone, layout: "position", variants: container, initial, animate, exit, transition, position: "relative", children: t13 }), $[32] = as, $[33] = cardTone, $[34] = radius, $[35] = rest, $[36] = role, $[37] = t13, $[38] = t8, $[39] = transition, $[40] = visualDuration, $[41] = t14) : t14 = $[41], t14;
 }
 const container = {
   initial: {
@@ -917,16 +913,19 @@ function ToastProvider(props) {
   $[1] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
     version: 0,
     push: (params) => {
-      const id = params.id || generateToastId(), duration = params.duration || 5e3;
+      const id = params.id ?? generateToastId(), duration = params.duration ?? 5e3;
       return startTransition(() => {
         setState((prevState) => {
           if (duration === 0.01)
             return prevState.filter((toast2) => toast2.id !== id);
-          const dismiss = () => startTransition(() => setState((currentState) => currentState.filter((toast_0) => toast_0.id !== id)));
+          const dismiss = () => {
+            startTransition(() => {
+              timeoutId && clearTimeout(timeoutId), setState((currentState) => currentState.filter((toast_0) => toast_0.id !== id));
+            });
+          }, timeoutId = setTimeout(dismiss, duration);
           return [...prevState.filter((toast_1) => toast_1.id !== id), {
             dismiss,
             id,
-            updatedAt: Date.now(),
             params: {
               ...params,
               duration
@@ -949,10 +948,9 @@ function _temp$2(t0) {
   const {
     dismiss: dismiss_0,
     id: id_0,
-    params: params_0,
-    updatedAt
+    params: params_0
   } = t0;
-  return /* @__PURE__ */ jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title, duration: params_0.duration, updatedAt }, id_0);
+  return /* @__PURE__ */ jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title, duration: params_0.duration }, id_0);
 }
 function useToast() {
   const value = useContext(ToastContext);
@@ -1872,6 +1870,62 @@ function Radio(props) {
     t9
   ] }), $[21] = style, $[22] = t3, $[23] = t8, $[24] = t10) : t10 = $[24], t10;
 }
+const DEFAULT_ROOT_ELEMENT = "html";
+function Root(props) {
+  const $ = c(39), t0 = props;
+  let children, className, forwardedRef, rest, t1, t2, t3, t4;
+  $[0] !== t0 ? ({
+    as: t1,
+    children,
+    className,
+    height: t2,
+    ref: forwardedRef,
+    scheme: t3,
+    tone: t4,
+    ...rest
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = rest, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4) : (children = $[1], className = $[2], forwardedRef = $[3], rest = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8]);
+  const as = t1 === void 0 ? DEFAULT_ROOT_ELEMENT : t1, height = t2 === void 0 ? "fill" : t2, scheme = t3 === void 0 ? "light" : t3, tone = t4 === void 0 ? "transparent" : t4, ref = useRef(null);
+  let t5;
+  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[9] = t5) : t5 = $[9], useImperativeHandle(forwardedRef, t5);
+  const [portalElement, setPortalElement] = useState(null), [boundaryElement, setBoundaryElement] = useState(null);
+  let t6;
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t6 = (el) => {
+    setBoundaryElement(el), ref.current = el;
+  }, $[10] = t6) : t6 = $[10];
+  const handleRef = t6;
+  let t7;
+  $[11] !== children || $[12] !== portalElement ? (t7 = /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children }), $[11] = children, $[12] = portalElement, $[13] = t7) : t7 = $[13];
+  let t8;
+  $[14] !== boundaryElement || $[15] !== t7 ? (t8 = /* @__PURE__ */ jsx(BoundaryElementProvider, { element: boundaryElement, children: t7 }), $[14] = boundaryElement, $[15] = t7, $[16] = t8) : t8 = $[16];
+  let t9;
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx("div", { "data-portal": "", ref: setPortalElement }), $[17] = t9) : t9 = $[17];
+  let t10;
+  $[18] !== t8 ? (t10 = /* @__PURE__ */ jsxs(ToastProvider, { children: [
+    t8,
+    t9
+  ] }), $[18] = t8, $[19] = t10) : t10 = $[19];
+  let t11;
+  $[20] !== scheme || $[21] !== t10 || $[22] !== tone ? (t11 = /* @__PURE__ */ jsx(LayerProvider, { children: /* @__PURE__ */ jsx(CardProvider, { scheme, tone, children: t10 }) }), $[20] = scheme, $[21] = t10, $[22] = tone, $[23] = t11) : t11 = $[23];
+  let node = t11;
+  if (as === "html") {
+    let t122;
+    $[24] !== height ? (t122 = box({
+      height,
+      margin: 0
+    }), $[24] = height, $[25] = t122) : t122 = $[25];
+    let t132;
+    $[26] !== node || $[27] !== t122 ? (t132 = /* @__PURE__ */ jsx("body", { className: t122, children: node }), $[26] = node, $[27] = t122, $[28] = t132) : t132 = $[28], node = t132;
+  }
+  let t12;
+  $[29] !== className || $[30] !== height || $[31] !== scheme || $[32] !== tone ? (t12 = root({
+    className,
+    height,
+    scheme,
+    tone
+  }), $[29] = className, $[30] = height, $[31] = scheme, $[32] = tone, $[33] = t12) : t12 = $[33];
+  let t13;
+  return $[34] !== as || $[35] !== node || $[36] !== rest || $[37] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, { as, "data-ui": "Root", ...rest, className: t12, ref: handleRef, children: node }), $[34] = as, $[35] = node, $[36] = rest, $[37] = t12, $[38] = t13) : t13 = $[38], t13;
+}
 const DEFAULT_SELECT_ELEMENT = "select";
 function Select(props) {
   const $ = c(38), t0 = props;
@@ -2274,6 +2328,7 @@ export {
   DEFAULT_MENU_ITEM_ELEMENT,
   DEFAULT_POPOVER_ELEMENT,
   DEFAULT_RADIO_ELEMENT,
+  DEFAULT_ROOT_ELEMENT,
   DEFAULT_SELECTABLE_ELEMENT,
   DEFAULT_SELECT_ELEMENT,
   DEFAULT_SKELETON_ELEMENT,
@@ -2318,6 +2373,7 @@ export {
   Portal,
   PortalProvider,
   Radio,
+  Root,
   Select,
   Selectable,
   Skeleton,