@sanity/ui 2.0.0-beta.8 → 2.0.0-gamma.1

package/dist/index.esm.js

@@ -1,6 +1,7 @@
 import { buildTheme, 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, getTheme_v2, getScopedTheme } from '@sanity/ui/theme';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
+import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
 import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
@@ -17,363 +18,25 @@ const rgbToHsl = rgbToHsl$1;
 const rgba = rgba$1;
 const screen = screen$1;
 const studioTheme = buildTheme();
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-var reactIs = {
-  exports: {}
-};
-var reactIs_development = {};
-
-/**
- * @license React
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_development;
-function requireReactIs_development() {
-  if (hasRequiredReactIs_development) return reactIs_development;
-  hasRequiredReactIs_development = 1;
-  if (process.env.NODE_ENV !== "production") {
-    (function () {
-      // ATTENTION
-      // When adding new symbols to this file,
-      // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-      // The Symbol used to tag the ReactElement-like types.
-      var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-      var REACT_PORTAL_TYPE = Symbol.for('react.portal');
-      var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-      var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-      var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-      var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-      var REACT_CONTEXT_TYPE = Symbol.for('react.context');
-      var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-      var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-      var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-      var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-      var REACT_MEMO_TYPE = Symbol.for('react.memo');
-      var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-      var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
-
-      // -----------------------------------------------------------------------------
-
-      var enableScopeAPI = false; // Experimental Create Event Handle API.
-      var enableCacheElement = false;
-      var enableTransitionTracing = false; // No known bugs, but needs performance testing
-
-      var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
-      // stuff. Intended to enable React core members to more easily debug scheduling
-      // issues in DEV builds.
-
-      var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
-
-      var REACT_MODULE_REFERENCE;
-      {
-        REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-      }
-      function isValidElementType(type) {
-        if (typeof type === 'string' || typeof type === 'function') {
-          return true;
-        } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
-
-        if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing) {
-          return true;
-        }
-        if (typeof type === 'object' && type !== null) {
-          if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE ||
-          // This needs to include all possible module reference object
-          // types supported by any Flight configuration anywhere since
-          // we don't know which Flight build this will end up being used
-          // with.
-          type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
-            return true;
-          }
-        }
-        return false;
-      }
-      function typeOf(object) {
-        if (typeof object === 'object' && object !== null) {
-          var $$typeof = object.$$typeof;
-          switch ($$typeof) {
-            case REACT_ELEMENT_TYPE:
-              var type = object.type;
-              switch (type) {
-                case REACT_FRAGMENT_TYPE:
-                case REACT_PROFILER_TYPE:
-                case REACT_STRICT_MODE_TYPE:
-                case REACT_SUSPENSE_TYPE:
-                case REACT_SUSPENSE_LIST_TYPE:
-                  return type;
-                default:
-                  var $$typeofType = type && type.$$typeof;
-                  switch ($$typeofType) {
-                    case REACT_SERVER_CONTEXT_TYPE:
-                    case REACT_CONTEXT_TYPE:
-                    case REACT_FORWARD_REF_TYPE:
-                    case REACT_LAZY_TYPE:
-                    case REACT_MEMO_TYPE:
-                    case REACT_PROVIDER_TYPE:
-                      return $$typeofType;
-                    default:
-                      return $$typeof;
-                  }
-              }
-            case REACT_PORTAL_TYPE:
-              return $$typeof;
-          }
-        }
-        return undefined;
-      }
-      var ContextConsumer = REACT_CONTEXT_TYPE;
-      var ContextProvider = REACT_PROVIDER_TYPE;
-      var Element = REACT_ELEMENT_TYPE;
-      var ForwardRef = REACT_FORWARD_REF_TYPE;
-      var Fragment = REACT_FRAGMENT_TYPE;
-      var Lazy = REACT_LAZY_TYPE;
-      var Memo = REACT_MEMO_TYPE;
-      var Portal = REACT_PORTAL_TYPE;
-      var Profiler = REACT_PROFILER_TYPE;
-      var StrictMode = REACT_STRICT_MODE_TYPE;
-      var Suspense = REACT_SUSPENSE_TYPE;
-      var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-      var hasWarnedAboutDeprecatedIsAsyncMode = false;
-      var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
-
-      function isAsyncMode(object) {
-        {
-          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-          }
-        }
-        return false;
-      }
-      function isConcurrentMode(object) {
-        {
-          if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
-            hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
-
-            console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-          }
-        }
-        return false;
-      }
-      function isContextConsumer(object) {
-        return typeOf(object) === REACT_CONTEXT_TYPE;
-      }
-      function isContextProvider(object) {
-        return typeOf(object) === REACT_PROVIDER_TYPE;
-      }
-      function isElement(object) {
-        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-      }
-      function isForwardRef(object) {
-        return typeOf(object) === REACT_FORWARD_REF_TYPE;
-      }
-      function isFragment(object) {
-        return typeOf(object) === REACT_FRAGMENT_TYPE;
-      }
-      function isLazy(object) {
-        return typeOf(object) === REACT_LAZY_TYPE;
-      }
-      function isMemo(object) {
-        return typeOf(object) === REACT_MEMO_TYPE;
-      }
-      function isPortal(object) {
-        return typeOf(object) === REACT_PORTAL_TYPE;
-      }
-      function isProfiler(object) {
-        return typeOf(object) === REACT_PROFILER_TYPE;
-      }
-      function isStrictMode(object) {
-        return typeOf(object) === REACT_STRICT_MODE_TYPE;
-      }
-      function isSuspense(object) {
-        return typeOf(object) === REACT_SUSPENSE_TYPE;
-      }
-      function isSuspenseList(object) {
-        return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
-      }
-      reactIs_development.ContextConsumer = ContextConsumer;
-      reactIs_development.ContextProvider = ContextProvider;
-      reactIs_development.Element = Element;
-      reactIs_development.ForwardRef = ForwardRef;
-      reactIs_development.Fragment = Fragment;
-      reactIs_development.Lazy = Lazy;
-      reactIs_development.Memo = Memo;
-      reactIs_development.Portal = Portal;
-      reactIs_development.Profiler = Profiler;
-      reactIs_development.StrictMode = StrictMode;
-      reactIs_development.Suspense = Suspense;
-      reactIs_development.SuspenseList = SuspenseList;
-      reactIs_development.isAsyncMode = isAsyncMode;
-      reactIs_development.isConcurrentMode = isConcurrentMode;
-      reactIs_development.isContextConsumer = isContextConsumer;
-      reactIs_development.isContextProvider = isContextProvider;
-      reactIs_development.isElement = isElement;
-      reactIs_development.isForwardRef = isForwardRef;
-      reactIs_development.isFragment = isFragment;
-      reactIs_development.isLazy = isLazy;
-      reactIs_development.isMemo = isMemo;
-      reactIs_development.isPortal = isPortal;
-      reactIs_development.isProfiler = isProfiler;
-      reactIs_development.isStrictMode = isStrictMode;
-      reactIs_development.isSuspense = isSuspense;
-      reactIs_development.isSuspenseList = isSuspenseList;
-      reactIs_development.isValidElementType = isValidElementType;
-      reactIs_development.typeOf = typeOf;
-    })();
-  }
-  return reactIs_development;
-}
-var reactIs_production_min = {};
-
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_production_min;
-function requireReactIs_production_min() {
-  if (hasRequiredReactIs_production_min) return reactIs_production_min;
-  hasRequiredReactIs_production_min = 1;
-  var b = Symbol.for("react.element"),
-    c = Symbol.for("react.portal"),
-    d = Symbol.for("react.fragment"),
-    e = Symbol.for("react.strict_mode"),
-    f = Symbol.for("react.profiler"),
-    g = Symbol.for("react.provider"),
-    h = Symbol.for("react.context"),
-    k = Symbol.for("react.server_context"),
-    l = Symbol.for("react.forward_ref"),
-    m = Symbol.for("react.suspense"),
-    n = Symbol.for("react.suspense_list"),
-    p = Symbol.for("react.memo"),
-    q = Symbol.for("react.lazy"),
-    t = Symbol.for("react.offscreen"),
-    u;
-  u = Symbol.for("react.module.reference");
-  function v(a) {
-    if ("object" === typeof a && null !== a) {
-      var r = a.$$typeof;
-      switch (r) {
-        case b:
-          switch (a = a.type, a) {
-            case d:
-            case f:
-            case e:
-            case m:
-            case n:
-              return a;
-            default:
-              switch (a = a && a.$$typeof, a) {
-                case k:
-                case h:
-                case l:
-                case q:
-                case p:
-                case g:
-                  return a;
-                default:
-                  return r;
-              }
-          }
-        case c:
-          return r;
-      }
-    }
-  }
-  reactIs_production_min.ContextConsumer = h;
-  reactIs_production_min.ContextProvider = g;
-  reactIs_production_min.Element = b;
-  reactIs_production_min.ForwardRef = l;
-  reactIs_production_min.Fragment = d;
-  reactIs_production_min.Lazy = q;
-  reactIs_production_min.Memo = p;
-  reactIs_production_min.Portal = c;
-  reactIs_production_min.Profiler = f;
-  reactIs_production_min.StrictMode = e;
-  reactIs_production_min.Suspense = m;
-  reactIs_production_min.SuspenseList = n;
-  reactIs_production_min.isAsyncMode = function () {
-    return !1;
-  };
-  reactIs_production_min.isConcurrentMode = function () {
-    return !1;
-  };
-  reactIs_production_min.isContextConsumer = function (a) {
-    return v(a) === h;
-  };
-  reactIs_production_min.isContextProvider = function (a) {
-    return v(a) === g;
-  };
-  reactIs_production_min.isElement = function (a) {
-    return "object" === typeof a && null !== a && a.$$typeof === b;
-  };
-  reactIs_production_min.isForwardRef = function (a) {
-    return v(a) === l;
-  };
-  reactIs_production_min.isFragment = function (a) {
-    return v(a) === d;
-  };
-  reactIs_production_min.isLazy = function (a) {
-    return v(a) === q;
-  };
-  reactIs_production_min.isMemo = function (a) {
-    return v(a) === p;
-  };
-  reactIs_production_min.isPortal = function (a) {
-    return v(a) === c;
-  };
-  reactIs_production_min.isProfiler = function (a) {
-    return v(a) === f;
-  };
-  reactIs_production_min.isStrictMode = function (a) {
-    return v(a) === e;
-  };
-  reactIs_production_min.isSuspense = function (a) {
-    return v(a) === m;
-  };
-  reactIs_production_min.isSuspenseList = function (a) {
-    return v(a) === n;
-  };
-  reactIs_production_min.isValidElementType = function (a) {
-    return "string" === typeof a || "function" === typeof a || a === d || a === f || a === e || a === m || a === n || a === t || "object" === typeof a && null !== a && (a.$$typeof === q || a.$$typeof === p || a.$$typeof === g || a.$$typeof === h || a.$$typeof === l || a.$$typeof === u || void 0 !== a.getModuleId) ? !0 : !1;
-  };
-  reactIs_production_min.typeOf = v;
-  return reactIs_production_min;
-}
-if (process.env.NODE_ENV === 'production') {
-  reactIs.exports = requireReactIs_production_min();
-} else {
-  reactIs.exports = requireReactIs_development();
-}
-var reactIsExports = reactIs.exports;
-var ReactIs = /*@__PURE__*/getDefaultExportFromCjs(reactIsExports);
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
+const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity";
 const POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
-    scale: 0.97
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+    scale: 0.97,
+    willChange: "transform"
   },
   animate: {
-    opacity: 1,
+    opacity: [null, 1, 1],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, null, 1],
     scale: 1
   },
   exit: {
-    opacity: 0,
+    // @ts-expect-error -- passing null a second time is valid: https://github.com/framer/motion/blob/b9ce4c42914c3916ea523609c5b032dfc72718bb/packages/framer-motion/src/animation/utils/keyframes.ts#L34C22-L34C22
+    opacity: [null, null, 0],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, 0, 0],
     scale: 0.97
   },
   transition: {
@@ -872,7 +535,7 @@ var gatherActiveObservationsAtDepth = function (depth) {
     });
   });
 };
-var process$1 = function () {
+var process = function () {
   var depth = 0;
   gatherActiveObservationsAtDepth(depth);
   while (hasActiveObservations()) {
@@ -953,7 +616,7 @@ var Scheduler = function () {
     queueResizeObserver(function () {
       var elementsHaveResized = false;
       try {
-        elementsHaveResized = process$1();
+        elementsHaveResized = process();
       } finally {
         scheduled = false;
         timeout = until - time();
@@ -1886,7 +1549,7 @@ function textInputRepresentationStyle(props) {
     color,
     input
   } = getTheme_v2(props.theme);
-  return css(_c$c || (_c$c = __template$F(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+  return css(_c$c || (_c$c = __template$F(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:not(:invalid):disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      *:invalid:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:not(:invalid):read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      *:invalid:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:invalid:not(:disabled):not(:read-only):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
   }), color.input.invalid.enabled.bg, color.input.invalid.enabled.fg, focusRingBorderStyle({
@@ -1900,12 +1563,18 @@ function textInputRepresentationStyle(props) {
     focusRing: input.text.focusRing
   }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     focusRing: input.text.focusRing
-  }), color.input.default.disabled.bg, color.input.default.disabled.fg, focusRingBorderStyle({
+  }), color.input.default.disabled.bg, color.input.default.disabled.fg, color.input.default.disabled.fg, focusRingBorderStyle({
     color: color.input.default.disabled.border,
     width: input.border.width
-  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, focusRingBorderStyle({
+  }), color.input.invalid.disabled.bg, color.input.invalid.disabled.fg, color.input.invalid.disabled.fg, focusRingBorderStyle({
+    color: color.input.invalid.disabled.border,
+    width: input.border.width
+  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.invalid.readOnly.bg, color.input.invalid.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, color.input.invalid.hovered.bg, color.input.invalid.hovered.fg, focusRingBorderStyle({
     color: color.input.default.hovered.border,
     width: input.border.width
+  }), focusRingBorderStyle({
+    color: color.input.invalid.hovered.border,
+    width: input.border.width
   }));
 }
 function responsiveMarginStyle(props) {
@@ -2343,7 +2012,7 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
 });
 function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
-  return childrenArray.filter(node => reactIsExports.isElement(node) || reactIsExports.isFragment(node) || typeof node === "string");
+  return childrenArray.filter(node => isElement$1(node) || isFragment(node) || typeof node === "string");
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -2828,20 +2497,17 @@ const Button = forwardRef(function Button2(props, ref) {
         gap: space,
         children: [icon && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
-        }), text && /* @__PURE__ */jsx(Box, {
-          flex: iconRight ? 1 : void 0,
-          children: /* @__PURE__ */jsx(Text, {
-            muted,
-            align: textAlign,
-            size: fontSize,
-            textOverflow: "ellipsis",
-            weight: button.textWeight,
-            children: text
-          })
+          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+        }), text && /* @__PURE__ */jsx(Text, {
+          muted,
+          align: textAlign,
+          size: fontSize,
+          textOverflow: "ellipsis",
+          weight: button.textWeight,
+          children: text
         }), iconRight && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
+          children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
         })]
       })
     }), children && /* @__PURE__ */jsx(Box, {
@@ -2913,7 +2579,7 @@ const Card = forwardRef(function Card2(props, ref) {
     tone: toneProp = "default",
     ...restProps
   } = props;
-  const as = reactIsExports.isValidElementType(asProp) ? asProp : "div";
+  const as = isValidElementType(asProp) ? asProp : "div";
   const rootTheme = useRootTheme();
   const tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
   return /* @__PURE__ */jsx(ThemeColorProvider, {
@@ -3265,7 +2931,7 @@ function headingBaseStyle(props) {
   const {
     font
   } = getTheme_v2(props.theme);
-  return css(_c$8 || (_c$8 = __template$s(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
+  return css(_c$8 || (_c$8 = __template$s(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.heading.weights.bold);
 }
 var __freeze$r = Object.freeze;
 var __defProp$s = Object.defineProperty;
@@ -4282,7 +3948,7 @@ var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
   value: __freeze$m(raw || cooked.slice())
 }));
 var _a$m;
-const MotionCard$1 = styled(motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n"])));
+const MotionCard$1 = styled(motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
@@ -4322,8 +3988,9 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     top: y,
     width,
     zIndex,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, strategy, style, width, x, y, zIndex]);
+  }), [animate, originX, originY, strategy, style, width, x, y, zIndex]);
   const arrowStyle = useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -4835,9 +4502,9 @@ function switchRepresentationStyles(props) {
     color,
     input
   } = getTheme_v2(props.theme);
-  return css(_c$5 || (_c$5 = __template$j(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return css(_c$5 || (_c$5 = __template$j(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input:checked[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing: input.switch.focusRing
-  }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg);
+  }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.readOnly.bg);
 }
 function switchTrackStyles(props) {
   const {
@@ -5052,13 +4719,13 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
       padding,
       children: /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
+        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
       })
     }), !$hasClearButton && iconRight && /* @__PURE__ */jsx(RightBox, {
       padding,
       children: /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
+        children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
       })
     })]
   }), [__unstable_disableFocusRing, border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
@@ -5170,7 +4837,7 @@ var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
   value: __freeze$g(raw || cooked.slice())
 }));
 var _a$g;
-const MotionCard = styled(motion(Card))(_a$g || (_a$g = __template$g([""])));
+const MotionCard = styled(motion(Card))(_a$g || (_a$g = __template$g(["\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TooltipCard = memo(forwardRef(function TooltipCard2(props, ref) {
   const {
     animate,
@@ -5192,8 +4859,9 @@ const TooltipCard = memo(forwardRef(function TooltipCard2(props, ref) {
   const rootStyle = useMemo(() => ({
     originX,
     originY,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, style]);
+  }), [animate, originX, originY, style]);
   const arrowStyle = useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -6151,7 +5819,7 @@ function responsiveDialogPositionStyle(props) {
   }));
 }
 function animationDialogStyle(props) {
-  if (!props.animate) return css(_a$c || (_a$c = __template$c([""])));
+  if (!props.$animate) return css(_a$c || (_a$c = __template$c([""])));
   return css(_b$7 || (_b$7 = __template$c(["\n    @keyframes zoomIn {\n      from {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n    @keyframes fadeIn {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    animation: fadeIn 200ms ease-out;\n    // Animates the dialog card.\n    & > [data-ui='DialogCard'] {\n      animation: zoomIn 200ms ease-out;\n    }\n  "])));
 }
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
@@ -6374,6 +6042,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
     __unstable_name: portalProp,
     children: /* @__PURE__ */jsxs(Root$7, {
       ...restProps,
+      $animate: animate,
       $padding: padding,
       $position: position,
       "aria-labelledby": labelId,
@@ -6386,7 +6055,6 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
       ref,
       role: "dialog",
       zOffset,
-      animate,
       children: [/* @__PURE__ */jsx("div", {
         ref: preDivRef,
         tabIndex: 0
@@ -6862,7 +6530,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     registerElement,
     shouldFocus
   }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]);
-  const menu = reactIsExports.isElement(menuProp) ? cloneElement(menuProp, menuProps) : null;
+  const menu = isElement$1(menuProp) ? cloneElement(menuProp, menuProps) : null;
   const setButtonRef = useCallback(el => {
     if (typeof ref === "function") {
       ref(el);
@@ -6871,7 +6539,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     }
     setButtonElement(el);
   }, [ref]);
-  const button = useMemo(() => reactIsExports.isElement(buttonProp) ? cloneElement(buttonProp, {
+  const button = useMemo(() => isElement$1(buttonProp) ? cloneElement(buttonProp, {
     "data-ui": "MenuButton",
     id,
     onClick: handleButtonClick,
@@ -7058,7 +6726,7 @@ function MenuGroup(props) {
         padding,
         children: [icon && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
+          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
         }), /* @__PURE__ */jsx(Box, {
           flex: 1,
           children: /* @__PURE__ */jsx(Text, {
@@ -7161,7 +6829,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
       ...paddingProps,
       children: [icon && /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
+        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
       }), text && /* @__PURE__ */jsx(Box, {
         flex: 1,
         children: /* @__PURE__ */jsx(Text, {
@@ -7179,7 +6847,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
         }
       }), iconRight && /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
+        children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
       })]
     }), children && /* @__PURE__ */jsx(Box, {
       as: "span",
@@ -7436,13 +7104,19 @@ const STATUS_CARD_TONE = {
   success: "positive",
   info: "primary"
 };
+const BUTTON_TONE = {
+  error: "critical",
+  warning: "caution",
+  success: "positive",
+  info: "primary"
+};
 const ROLES = {
   error: "alert",
   warning: "alert",
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n"])));
+const Root$2 = styled(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TextBox = styled(Flex)(_b$2 || (_b$2 = __template$3(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
@@ -7455,6 +7129,7 @@ function Toast(props) {
     ...restProps
   } = props;
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
+  const buttonTone = status ? BUTTON_TONE[status] : "default";
   const role = status ? ROLES[status] : "status";
   return /* @__PURE__ */jsx(Root$2, {
     "data-ui": "Toast",
@@ -7488,6 +7163,7 @@ function Toast(props) {
           icon: CloseIcon,
           mode: "bleed",
           padding: 2,
+          tone: buttonTone,
           onClick: onClose,
           style: {
             verticalAlign: "top"
@@ -7597,12 +7273,14 @@ function ToastProvider(props) {
               } = _ref12;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
-                  opacity: 1,
+                  opacity: [0, 1, 1],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
                   y: 0,
                   scale: 1
                 },
                 exit: {
-                  opacity: 0,
+                  opacity: [1, 1, 0],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
                   scale: 0.5,
                   transition: {
                     duration: 0.2
@@ -7610,8 +7288,10 @@ function ToastProvider(props) {
                 },
                 initial: {
                   opacity: 0,
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
                   y: 32,
-                  scale: 0.25
+                  scale: 0.25,
+                  willChange: "transform"
                 },
                 layout: "position",
                 transition: {