@sanity/ui 2.0.0-beta.5 → 2.0.0-beta.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Sanity.io
+Copyright (c) 2023–2024 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -6,7 +6,7 @@ The Sanity UI components.
 npm install @sanity/ui
 
 # Install peer dependencies
-npm install react react-dom react-is styled-components
+npm install react react-dom styled-components
 ```
 
 [![npm version](https://img.shields.io/npm/v/@sanity/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui)
@@ -14,12 +14,15 @@ npm install react react-dom react-is styled-components
 ## Usage
 
 ```jsx
-import {Button, ThemeProvider, studioTheme} from '@sanity/ui'
+import {Button, ThemeProvider} from '@sanity/ui'
+import {buildTheme} from '@sanity/ui/theme'
 import {createRoot} from 'react-dom/client'
 
 const root = createRoot(document.getElementById('root'))
+const theme = buildTheme()
+
 root.render(
-  <ThemeProvider theme={studioTheme}>
+  <ThemeProvider theme={theme}>
     <Button text="Hello, world" />
   </ThemeProvider>,
 )

package/dist/index.esm.js

@@ -1,7 +1,6 @@
 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';
@@ -18,6 +17,350 @@ 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_PROPS = {
@@ -529,7 +872,7 @@ var gatherActiveObservationsAtDepth = function (depth) {
     });
   });
 };
-var process = function () {
+var process$1 = function () {
   var depth = 0;
   gatherActiveObservationsAtDepth(depth);
   while (hasActiveObservations()) {
@@ -610,7 +953,7 @@ var Scheduler = function () {
     queueResizeObserver(function () {
       var elementsHaveResized = false;
       try {
-        elementsHaveResized = process();
+        elementsHaveResized = process$1();
       } finally {
         scheduled = false;
         timeout = until - time();
@@ -2000,7 +2343,7 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
 });
 function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
-  return childrenArray.filter(node => isElement$1(node) || isFragment(node) || typeof node === "string");
+  return childrenArray.filter(node => reactIsExports.isElement(node) || reactIsExports.isFragment(node) || typeof node === "string");
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -2220,7 +2563,6 @@ const Badge = forwardRef(function Badge2(props, ref) {
     ref,
     children: /* @__PURE__ */jsx(Text, {
       size: fontSize,
-      weight: "medium",
       children
     })
   });
@@ -2268,6 +2610,7 @@ function _cardColorStyle(base, color) {
   let checkered = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return {
     // from base
+    "--card-backdrop-color": base.backdrop,
     "--card-focus-ring-color": base.focusRing,
     "--card-shadow-outline-color": base.shadow.outline,
     "--card-shadow-umbra-color": base.shadow.umbra,
@@ -2485,7 +2828,7 @@ const Button = forwardRef(function Button2(props, ref) {
         gap: space,
         children: [icon && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+          children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
         }), text && /* @__PURE__ */jsx(Box, {
           flex: iconRight ? 1 : void 0,
           children: /* @__PURE__ */jsx(Text, {
@@ -2498,7 +2841,7 @@ const Button = forwardRef(function Button2(props, ref) {
           })
         }), iconRight && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+          children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
         })]
       })
     }), children && /* @__PURE__ */jsx(Box, {
@@ -2570,7 +2913,7 @@ const Card = forwardRef(function Card2(props, ref) {
     tone: toneProp = "default",
     ...restProps
   } = props;
-  const as = isValidElementType(asProp) ? asProp : "div";
+  const as = reactIsExports.isValidElementType(asProp) ? asProp : "div";
   const rootTheme = useRootTheme();
   const tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
   return /* @__PURE__ */jsx(ThemeColorProvider, {
@@ -4408,7 +4751,7 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
     disabled,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     readOnly,
     space = 3,
     ...restProps
@@ -4709,13 +5052,13 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
       padding,
       children: /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+        children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
       })
     }), !$hasClearButton && iconRight && /* @__PURE__ */jsx(RightBox, {
       padding,
       children: /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+        children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
       })
     })]
   }), [__unstable_disableFocusRing, border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
@@ -6519,7 +6862,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     registerElement,
     shouldFocus
   }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]);
-  const menu = isElement$1(menuProp) ? cloneElement(menuProp, menuProps) : null;
+  const menu = reactIsExports.isElement(menuProp) ? cloneElement(menuProp, menuProps) : null;
   const setButtonRef = useCallback(el => {
     if (typeof ref === "function") {
       ref(el);
@@ -6528,7 +6871,7 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     }
     setButtonElement(el);
   }, [ref]);
-  const button = useMemo(() => isElement$1(buttonProp) ? cloneElement(buttonProp, {
+  const button = useMemo(() => reactIsExports.isElement(buttonProp) ? cloneElement(buttonProp, {
     "data-ui": "MenuButton",
     id,
     onClick: handleButtonClick,
@@ -6715,7 +7058,7 @@ function MenuGroup(props) {
         padding,
         children: [icon && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
-          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+          children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
         }), /* @__PURE__ */jsx(Box, {
           flex: 1,
           children: /* @__PURE__ */jsx(Text, {
@@ -6818,7 +7161,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
       ...paddingProps,
       children: [icon && /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+        children: [isValidElement(icon) && icon, reactIsExports.isValidElementType(icon) && createElement(icon)]
       }), text && /* @__PURE__ */jsx(Box, {
         flex: 1,
         children: /* @__PURE__ */jsx(Text, {
@@ -6836,7 +7179,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
         }
       }), iconRight && /* @__PURE__ */jsxs(Text, {
         size: fontSize,
-        children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+        children: [isValidElement(iconRight) && iconRight, reactIsExports.isValidElementType(iconRight) && createElement(iconRight)]
       })]
     }), children && /* @__PURE__ */jsx(Box, {
       as: "span",