@sanity/ui 2.14.3 → 2.14.4-canary.0

package/dist/index.d.mts

@@ -2488,7 +2488,18 @@ export declare type ThemeShadow = ThemeShadow_2
  * @public
  */
 export declare function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      | 'as'
+      | 'height'
+      | 'ref'
+      | 'title'
+      | 'onAnimationStart'
+      | 'onDragStart'
+      | 'onDragEnd'
+      | 'onDrag'
+    >,
 ): React.JSX.Element
 
 export declare namespace Toast {
@@ -2503,6 +2514,17 @@ export declare interface ToastContextValue {
   push: (params: ToastParams) => string
 }
 
+/**
+ * @public
+ */
+declare interface ToastLayerProps {
+  children: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  gap?: number | number[]
+}
+
 /**
  * @public
  */
@@ -2522,11 +2544,12 @@ export declare interface ToastParams {
 export declare interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
-  onClose?: () => void
+  onClose: () => void
   radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
+  updatedAt?: number
 }
 
 /**
@@ -2541,11 +2564,8 @@ export declare namespace ToastProvider {
 /**
  * @public
  */
-export declare interface ToastProviderProps {
+export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
   zOffset?: number | number[]
 }
 

package/dist/index.d.ts

@@ -2488,7 +2488,18 @@ export declare type ThemeShadow = ThemeShadow_2
  * @public
  */
 export declare function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      | 'as'
+      | 'height'
+      | 'ref'
+      | 'title'
+      | 'onAnimationStart'
+      | 'onDragStart'
+      | 'onDragEnd'
+      | 'onDrag'
+    >,
 ): React.JSX.Element
 
 export declare namespace Toast {
@@ -2503,6 +2514,17 @@ export declare interface ToastContextValue {
   push: (params: ToastParams) => string
 }
 
+/**
+ * @public
+ */
+declare interface ToastLayerProps {
+  children: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  gap?: number | number[]
+}
+
 /**
  * @public
  */
@@ -2522,11 +2544,12 @@ export declare interface ToastParams {
 export declare interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
-  onClose?: () => void
+  onClose: () => void
   radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
+  updatedAt?: number
 }
 
 /**
@@ -2541,11 +2564,8 @@ export declare namespace ToastProvider {
 /**
  * @public
  */
-export declare interface ToastProviderProps {
+export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
   zOffset?: number | number[]
 }
 

package/dist/index.esm.js

@@ -1,13 +1,13 @@
-import { EMPTY_ARRAY, useElementSize, Code, isHTMLElement, isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, Box, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Button, Stack, Popover, TextInput, useClickOutsideEvent, _responsive, createGlobalScopedContext, Container, Flex, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, useTheme_v2, usePrefersReducedMotion, Portal, containsOrEqualsElement, Layer, responsivePaddingStyle, responsiveRadiusStyle, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, isRecord, _cardColorStyle, rem } from "./_legacy/_visual-editing.esm.js";
-import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Checkbox, ConditionalWrapper, ElementQuery, Grid, Heading, Hotkeys, Inline, KBD, Label, LayerProvider, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _isScrollable, createColorTheme, hexToRgb, hslToRgb, multiply, parseColor, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTooltipDelayGroup } from "./_legacy/_visual-editing.esm.js";
+import { EMPTY_ARRAY, useElementSize, Code, isHTMLElement, isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, Box, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Button, Stack, Popover, TextInput, useClickOutsideEvent, _responsive, createGlobalScopedContext, Container, Flex, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, useTheme_v2, usePrefersReducedMotion, Portal, containsOrEqualsElement, Layer, responsivePaddingStyle, responsiveRadiusStyle, Grid, LayerProvider, isRecord, _cardColorStyle, rem } from "./_legacy/_visual-editing.esm.js";
+import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Checkbox, ConditionalWrapper, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _isScrollable, createColorTheme, hexToRgb, hslToRgb, multiply, parseColor, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTooltipDelayGroup } from "./_legacy/_visual-editing.esm.js";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { SpinnerIcon, ChevronDownIcon, CloseIcon, ToggleArrowRightIcon } from "@sanity/icons";
-import { useState, useRef, useEffect, useImperativeHandle, Component, forwardRef, useReducer, useCallback, useMemo, cloneElement, Children, isValidElement, Fragment, useContext, useSyncExternalStore, startTransition, memo, useId } from "react";
+import { useState, useRef, useEffect, useImperativeHandle, Component, forwardRef, useReducer, useCallback, useMemo, cloneElement, Children, isValidElement, Fragment, useContext, useSyncExternalStore, memo, useId } from "react";
 import { styled, keyframes, css } from "styled-components";
 import { c } from "react-compiler-runtime";
 import { getTheme_v2 } from "@sanity/ui/theme";
+import { motion, AnimatePresence } from "framer-motion";
 import { getTheme_v2 as getTheme_v2$1 } from "./_legacy/getTheme_v2.esm.js";
-import { AnimatePresence, motion } from "framer-motion";
 function _getElements(element, elementsArg) {
   const ret = [element];
   for (const el of elementsArg)
@@ -390,7 +390,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
   }, [openButtonProps, dispatchOpen]), openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Open", disabled: expanded, fontSize, icon: ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsx(TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border, clearButton, customValidity, disabled, fontSize, icon, iconRight: loading && AnimatedSpinnerIcon, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: inputElementRef, role: "combobox", spellCheck: !1, suffix: suffix || openButtonNode, value: inputValue }), handleListBoxKeyDown = useCallback((event_5) => {
     event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
-  }, [listFocused]), content = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: filteredOptions.map((option_0) => {
+  }, [listFocused]), content2 = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: filteredOptions.map((option_0) => {
     const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
     return /* @__PURE__ */ jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: cloneElement(renderOption(option_0), {
       disabled: loading,
@@ -398,12 +398,12 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       tabIndex: listFocused && active ? 0 : -1
     }) }, option_0.value);
   }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = useMemo(() => renderPopover ? renderPopover({
-    content,
+    content: content2,
     hidden: !expanded,
     inputElement: inputElementRef.current,
     onMouseEnter: handlePopoverMouseEnter,
     onMouseLeave: handlePopoverMouseLeave
-  }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
+  }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content2, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
   return /* @__PURE__ */ jsxs(StyledAutocomplete, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
     input,
     results
@@ -715,7 +715,7 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
   }, t8 = [open], $[9] = open, $[10] = t7, $[11] = t8) : (t7 = $[10], t8 = $[11]), useEffect(t7, t8);
   let t9;
   $[12] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
-    setOpen(_temp$1), setShouldFocus(null);
+    setOpen(_temp$2), setShouldFocus(null);
   }, $[12] = t9) : t9 = $[12];
   const handleButtonClick = t9;
   let t10;
@@ -817,7 +817,7 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
   return $[57] !== menu || $[58] !== open || $[59] !== popoverProps || $[60] !== t25 ? (t26 = /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t25 }), $[57] = menu, $[58] = open, $[59] = popoverProps, $[60] = t25, $[61] = t26) : t26 = $[61], t26;
 });
 MenuButton.displayName = "ForwardRef(MenuButton)";
-function _temp$1(v) {
+function _temp$2(v) {
   return !v;
 }
 const keyframe = keyframes`
@@ -966,55 +966,7 @@ const TabPanel = forwardRef(function(props, ref) {
   return $[3] !== flex || $[4] !== props.children || $[5] !== ref || $[6] !== restProps || $[7] !== t0 ? (t1 = /* @__PURE__ */ jsx(Box, { "data-ui": "TabPanel", ...restProps, flex, ref, role: "tabpanel", tabIndex: t0, children: props.children }), $[3] = flex, $[4] = props.children, $[5] = ref, $[6] = restProps, $[7] = t0, $[8] = t1) : t1 = $[8], t1;
 });
 TabPanel.displayName = "ForwardRef(TabPanel)";
-const TextBox = styled(Flex).withConfig({
-  displayName: "TextBox",
-  componentId: "sc-1rr7rxo-0"
-})`overflow-x:auto;`, loadingAnimation = keyframes`
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-`, LOADING_BAR_HEIGHT = 2;
-function rootStyles(props) {
-  const {
-    color
-  } = getTheme_v2$1(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
-  return props.$duration ? css`
-    pointer-events: all;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    overflow: clip;
-    padding-bottom: ${LOADING_BAR_HEIGHT}px;
-    &::before {
-      content: '';
-      position: absolute;
-      bottom: 0px;
-      height: ${LOADING_BAR_HEIGHT}px;
-      background: ${loadingBarColor};
-      animation-name: ${loadingAnimation};
-      animation-duration: ${props.$duration}ms;
-      animation-fill-mode: both;
-      animation-timing-function: linear;
-      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-      will-change: width;
-    }
-
-    & > * {
-      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-      will-change: opacity;
-    }
-  ` : css`
-      pointer-events: all;
-      & > * {
-        opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        will-change: opacity;
-      }
-    `;
-}
-const STATUS_CARD_TONE = {
+const LOADING_BAR_HEIGHT = 2, STATUS_CARD_TONE = {
   error: "critical",
   warning: "caution",
   success: "positive",
@@ -1024,121 +976,170 @@ const STATUS_CARD_TONE = {
   warning: "caution",
   success: "positive",
   info: "neutral"
-}, ROLES = {
+}, TextBox = styled(Flex).withConfig({
+  displayName: "TextBox",
+  componentId: "sc-1rr7rxo-0"
+})`overflow-x:auto;`, StyledToast = styled(Card).withConfig({
+  displayName: "StyledToast",
+  componentId: "sc-1rr7rxo-1"
+})`pointer-events:all;width:100%;position:relative;overflow:hidden;overflow:clip;will-change:opacity,transform;&[data-has-duration]{padding-bottom:calc(${LOADING_BAR_HEIGHT}px / 2);}`, LoadingBar = styled.div.withConfig({
+  displayName: "LoadingBar",
+  componentId: "sc-1rr7rxo-2"
+})`display:flex;position:absolute;bottom:0px;top:0px;left:0px;right:0px;pointer-events:none;z-index:-1;overflow:hidden;overflow:clip;background:transparent;align-items:flex-end;will-change:opacity;`, LoadingBarProgress = styled(Card).withConfig({
+  displayName: "LoadingBarProgress",
+  componentId: "sc-1rr7rxo-3"
+})`display:block;height:100%;width:100%;transform-origin:0% 50%;background-color:${(props) => {
+  const {
+    color
+  } = getTheme_v2$1(props.theme);
+  return color.button.default[props.tone].enabled.bg;
+}};`, ROLES = {
   error: "alert",
   warning: "alert",
   success: "alert",
   info: "alert"
-}, StyledToast = /* @__PURE__ */ styled(Card).withConfig({
-  displayName: "StyledToast",
-  componentId: "sc-1icz8ea-0"
-})(rootStyles);
+};
 function Toast(props) {
-  const $ = c(30);
-  let closable, description, duration, onClose, restProps, status, t0, title;
-  $[0] !== props ? ({
+  const {
     closable,
     description,
     duration,
     onClose,
-    radius: t0,
+    radius = 3,
     title,
     status,
+    updatedAt,
     ...restProps
-  } = props, $[0] = props, $[1] = closable, $[2] = description, $[3] = duration, $[4] = onClose, $[5] = restProps, $[6] = status, $[7] = t0, $[8] = title) : (closable = $[1], description = $[2], duration = $[3], onClose = $[4], restProps = $[5], status = $[6], t0 = $[7], title = $[8]);
-  const radius = t0 === void 0 ? 3 : t0, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status";
-  let t1;
-  $[9] !== title ? (t1 = title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }), $[9] = title, $[10] = t1) : t1 = $[10];
-  let t2;
-  $[11] !== description ? (t2 = description && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: description }), $[11] = description, $[12] = t2) : t2 = $[12];
-  let t3;
-  $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsx(TextBox, { flex: 1, padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-    t1,
-    t2
-  ] }) }), $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15];
-  let t4;
-  $[16] !== buttonTone || $[17] !== closable || $[18] !== onClose ? (t4 = 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"
-  } }) }), $[16] = buttonTone, $[17] = closable, $[18] = onClose, $[19] = t4) : t4 = $[19];
-  let t5;
-  $[20] !== t3 || $[21] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Flex, { align: "flex-start", children: [
-    t3,
-    t4
-  ] }), $[20] = t3, $[21] = t4, $[22] = t5) : t5 = $[22];
-  let t6;
-  return $[23] !== cardTone || $[24] !== duration || $[25] !== radius || $[26] !== restProps || $[27] !== role || $[28] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledToast, { "data-ui": "Toast", role, ...restProps, marginTop: 3, radius, shadow: 2, tone: cardTone, $duration: duration, children: t5 }), $[23] = cardTone, $[24] = duration, $[25] = radius, $[26] = restProps, $[27] = role, $[28] = t5, $[29] = t6) : t6 = $[29], t6;
+  } = props, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status";
+  let visualDuration = usePrefersReducedMotion() ? 0 : 0.26;
+  const transition = visualDuration ? {
+    type: "spring",
+    visualDuration,
+    bounce: 0.25
+  } : {
+    duration: 0
+  }, hasDuration = duration && isFinite(duration);
+  return /* @__PURE__ */ jsxs(MotionToast, { "data-ui": "Toast", role, ...restProps, "data-has-duration": hasDuration ? "" : void 0, custom: visualDuration, radius, shadow: 2, tone: cardTone, forwardedAs: "li", layout: "position", variants: container, initial: ["hidden", "initial"], animate: ["visible", "slideIn"], exit: ["hidden", "slideOut"], transition, children: [
+    /* @__PURE__ */ jsxs(MotionFlex, { align: "flex-start", variants: content, transition, children: [
+      /* @__PURE__ */ jsx(TextBox, { flex: 1, padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }),
+        description && /* @__PURE__ */ jsx(MotionText, { muted: !0, size: 1, variants: content, transition, children: description })
+      ] }) }),
+      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"
+      } }) })
+    ] }),
+    hasDuration && /* @__PURE__ */ jsxs(MotionLoadiongBar, { variants: content, transition, children: [
+      /* @__PURE__ */ jsx(Card, { tone: cardTone, radius, style: {
+        position: "absolute",
+        right: -2,
+        left: -2,
+        top: 0,
+        bottom: 2,
+        zIndex: 1
+      } }),
+      /* @__PURE__ */ jsx(MotionLoadiongBarProgress, { tone: cardTone, initial: {
+        scaleX: 0
+      }, animate: {
+        scaleX: 1
+      }, transition: {
+        delay: visualDuration,
+        duration: duration / 1e3,
+        ease: "linear"
+      }, onAnimationComplete: onClose }, `${duration}-${updatedAt}`)
+    ] })
+  ] });
 }
 Toast.displayName = "Toast";
+const container = {
+  initial: {
+    y: 32,
+    scale: 0.5,
+    zIndex: 1
+  },
+  hidden: {
+    opacity: 0
+  },
+  visible: (visualDuration) => visualDuration ? {
+    opacity: 1,
+    transition: {
+      when: "beforeChildren",
+      staggerChildren: visualDuration / 3,
+      duration: visualDuration / 3
+    }
+  } : {
+    opacity: 1
+  },
+  slideIn: {
+    y: 0,
+    scale: 1
+  },
+  slideOut: {
+    zIndex: 0,
+    scale: 0.75
+  }
+}, content = {
+  hidden: {
+    opacity: 0
+  },
+  visible: {
+    opacity: 1
+  }
+}, MotionToast = motion.create(StyledToast), MotionFlex = motion.create(Flex), MotionText = motion.create(Text), MotionLoadiongBar = motion.create(LoadingBar), MotionLoadiongBarProgress = motion.create(LoadingBarProgress);
 function useMounted() {
-  return useSyncExternalStore(subscribe, _temp, _temp2);
+  return useSyncExternalStore(subscribe, _temp$1, _temp2);
 }
 function _temp2() {
   return !1;
 }
-function _temp() {
+function _temp$1() {
   return !0;
 }
 const subscribe = () => () => {
 }, ToastContext = createGlobalScopedContext("@sanity/ui/context/toast", null);
+function ToastLayer(props) {
+  const $ = c(9), {
+    children,
+    padding: t0,
+    paddingX,
+    paddingY,
+    gap: t1
+  } = props, padding = t0 === void 0 ? 4 : t0, gap = t1 === void 0 ? 3 : t1, {
+    zIndex
+  } = useLayer();
+  let t2;
+  $[0] !== zIndex ? (t2 = {
+    zIndex
+  }, $[0] = zIndex, $[1] = t2) : t2 = $[1];
+  let t3;
+  return $[2] !== children || $[3] !== gap || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledLayer, { forwardedAs: "ul", "data-ui": "ToastProvider", padding, paddingX, paddingY, gap, columns: 1, style: t2, children }), $[2] = children, $[3] = gap, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
+}
+ToastLayer.displayName = "ToastLayer";
+const StyledLayer = styled(Grid).withConfig({
+  displayName: "StyledLayer",
+  componentId: "sc-1tbwn58-0"
+})`box-sizing:border-box;position:fixed;right:0;bottom:0;list-style:none;pointer-events:none;max-width:420px;width:100%;`;
 let toastId = 0;
 function generateToastId() {
   return String(toastId++);
 }
-const StyledToastProvider = styled(Layer).withConfig({
-  displayName: "StyledToastProvider",
-  componentId: "sc-17mn6j-0"
-})`position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;`, ToastContainer = styled.div.withConfig({
-  displayName: "ToastContainer",
-  componentId: "sc-17mn6j-1"
-})`box-sizing:border-box;position:absolute;right:0;bottom:0;max-width:420px;width:100%;`;
 function ToastProvider(props) {
-  const $ = c(22), {
+  const $ = c(13), {
     children,
-    padding: t0,
+    padding,
     paddingX,
     paddingY,
-    zOffset
-  } = props, padding = t0 === void 0 ? 4 : t0;
+    gap,
+    zOffset: t0
+  } = props, zOffset = t0 === void 0 ? 1 : t0;
   let t1;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
-  const [state, _setState] = useState(t1);
-  let t2;
-  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[1] = t2) : t2 = $[1];
-  const toastsRef = useRef(t2), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion();
-  let t3, t4, t5, t6;
-  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t4 = {
-    opacity: 0,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
-    y: 32,
-    scale: 0.25,
-    willChange: "transform"
-  }, t5 = {
-    opacity: 2,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 1,
-    y: 0,
-    scale: 1
-  }, t6 = {
-    opacity: 0,
-    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: -1,
-    scale: 0.5
-  }, $[2] = t4, $[3] = t5, $[4] = t6) : (t4 = $[2], t5 = $[3], t6 = $[4]);
-  const t7 = prefersReducedMotion ? 0 : 0.2;
-  let t8;
-  $[5] !== t7 ? (t8 = {
-    initial: t4,
-    animate: t5,
-    exit: t6,
-    transition: {
-      duration: t7
-    }
-  }, $[5] = t7, $[6] = t8) : t8 = $[6], t3 = t8;
-  const variants = t3;
-  let t9, t10;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t10 = {
+  const [state, setState] = useState(t1), mounted = useMounted();
+  let t2, t3;
+  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
     version: 0,
     push: (params) => {
-      const setState = (state_0) => startTransition(() => _setState(state_0)), id = params.id || generateToastId(), duration = params.duration || 5e3, dismiss = () => {
-        const timeoutId = toastsRef.current[id]?.timeoutId;
+      const id = params.id || generateToastId(), duration = params.duration || 5e3, dismiss = () => {
         setState((prevState) => {
           const idx = prevState.findIndex((t) => t.id === id);
           if (idx > -1) {
@@ -1146,49 +1147,36 @@ function ToastProvider(props) {
             return toasts.splice(idx, 1), toasts;
           }
           return prevState;
-        }), timeoutId !== void 0 && (clearTimeout(timeoutId), delete toastsRef.current[id]);
+        });
       };
       return setState((prevState_0) => prevState_0.filter((t_0) => t_0.id !== id).concat([{
         dismiss,
         id,
+        updatedAt: Date.now(),
         params: {
           ...params,
           duration
         }
-      }])), toastsRef.current[id] && (clearTimeout(toastsRef.current[id].timeoutId), delete toastsRef.current[id]), toastsRef.current[id] = {
-        timeoutId: setTimeout(dismiss, duration)
-      }, id;
+      }])), id;
     }
-  }, $[7] = t10) : t10 = $[7], t9 = t10;
-  const value = t9;
-  let t11, t12;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t11 = () => () => {
-    for (const {
-      timeoutId: timeoutId_0
-    } of Object.values(toastsRef.current))
-      clearTimeout(timeoutId_0);
-    toastsRef.current = {};
-  }, t12 = [], $[8] = t11, $[9] = t12) : (t11 = $[8], t12 = $[9]), useEffect(t11, t12);
-  let t13;
-  $[10] !== mounted || $[11] !== padding || $[12] !== paddingX || $[13] !== paddingY || $[14] !== prefersReducedMotion || $[15] !== state || $[16] !== variants || $[17] !== zOffset ? (t13 = mounted && /* @__PURE__ */ jsx(StyledToastProvider, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsx(ToastContainer, { children: /* @__PURE__ */ jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, children: state.map((t142) => {
-    const {
-      dismiss: dismiss_0,
-      id: id_0,
-      params: params_0
-    } = t142;
-    return /* @__PURE__ */ jsx(motion.div, { layout: "position", initial: "initial", animate: "animate", exit: "exit", variants, transition: prefersReducedMotion ? {
-      duration: 0
-    } : {
-      type: "spring",
-      damping: 30,
-      stiffness: 400
-    }, children: /* @__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);
-  }) }) }) }) }), $[10] = mounted, $[11] = padding, $[12] = paddingX, $[13] = paddingY, $[14] = prefersReducedMotion, $[15] = state, $[16] = variants, $[17] = zOffset, $[18] = t13) : t13 = $[18];
-  let t14;
-  return $[19] !== children || $[20] !== t13 ? (t14 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+  }, $[1] = t3) : t3 = $[1], t2 = t3;
+  const value = t2;
+  let t4;
+  $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t4 = mounted && /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp) }) }) }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t4) : t4 = $[9];
+  let t5;
+  return $[10] !== children || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
-    t13
-  ] }), $[19] = children, $[20] = t13, $[21] = t14) : t14 = $[21], t14;
+    t4
+  ] }), $[10] = children, $[11] = t4, $[12] = t5) : t5 = $[12], t5;
+}
+function _temp(t0) {
+  const {
+    dismiss: dismiss_0,
+    id: id_0,
+    params: params_0,
+    updatedAt
+  } = 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);
 }
 ToastProvider.displayName = "ToastProvider";
 function useToast() {
@@ -1566,7 +1554,7 @@ const TreeGroup = memo(function(props) {
     if (rootRef.current)
       return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
   }, [expanded, itemPath, registerItem, selected]);
-  const content = /* @__PURE__ */ jsxs(Flex, { padding, children: [
+  const content2 = /* @__PURE__ */ jsxs(Flex, { padding, children: [
     /* @__PURE__ */ jsxs(Box, { marginRight: space, style: {
       visibility: IconComponent || children ? "visible" : "hidden",
       pointerEvents: "none"
@@ -1579,10 +1567,10 @@ const TreeGroup = memo(function(props) {
     /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text }) })
   ] });
   return href ? /* @__PURE__ */ jsxs(StyledTreeItem, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: rootRef, role: "none", children: [
-    /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }),
+    /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content2 }),
     /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }) })
   ] }) : /* @__PURE__ */ jsxs(StyledTreeItem, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
-    /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }),
+    /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content2 }),
     /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }) })
   ] });
 });