@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/index.js

@@ -21,6 +21,16 @@ function _interopDefaultCompat(e) {
 var ReactIs__default = /*#__PURE__*/_interopDefaultCompat(ReactIs);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 var Refractor__default = /*#__PURE__*/_interopDefaultCompat(Refractor);
+const createColorTheme = theme.createColorTheme;
+const hexToRgb = theme.hexToRgb;
+const hslToRgb = theme.hslToRgb;
+const multiply = theme.multiply;
+const parseColor = theme.parseColor;
+const rgbToHex = theme.rgbToHex;
+const rgbToHsl = theme.rgbToHsl;
+const rgba = theme.rgba;
+const screen = theme.screen;
+const studioTheme = theme.buildTheme();
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
 function _fillCSSObject(keys, value) {
@@ -1827,14 +1837,14 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = "online",
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props;
-  const as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div";
-  const size = useArrayProp(sizeProp);
   const {
     avatar
   } = useTheme_v2();
+  const as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div";
+  const size = useArrayProp(sizeProp);
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0];
   const _sizeRem = avatarSize.size;
   const _radius = _sizeRem / 2;
@@ -1856,7 +1866,12 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
       onImageLoadError(new Error("Avatar: the image failed to load"));
     }
   }, [onImageLoadError]);
-  const initialsSize = react.useMemo(() => size.map(s => s === 0 ? 0 : s * 2), [size]);
+  const initialsSize = react.useMemo(() => size.map(s => {
+    if (s === 1) return 1;
+    if (s === 2) return 3;
+    if (s === 3) return 5;
+    return 0;
+  }), [size]);
   return /* @__PURE__ */jsxRuntime.jsxs(Root$C, {
     as,
     "data-as": typeof as === "string" ? as : void 0,
@@ -1919,6 +1934,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
         children: /* @__PURE__ */jsxRuntime.jsx(InitialsLabel, {
           forwardedAs: "span",
           size: initialsSize,
+          weight: "medium",
           children: initials
         })
       })
@@ -1930,62 +1946,7 @@ var __defProp$B = Object.defineProperty;
 var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", {
   value: __freeze$A(raw || cooked.slice())
 }));
-var _a$A, _b$l, _c$a;
-function textBaseStyle(props) {
-  const {
-    $accent,
-    $muted
-  } = props;
-  const {
-    font
-  } = theme.getTheme_v2(props.theme);
-  return styled.css(_c$a || (_c$a = __template$A(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\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      color: var(--card-icon-color);\n\n      & path {\n        vector-effect: non-scaling-stroke !important;\n      }\n    }\n  "])), $accent && styled.css(_a$A || (_a$A = __template$A(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$l || (_b$l = __template$A(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.text.weights.bold);
-}
-var __freeze$z = Object.freeze;
-var __defProp$A = Object.defineProperty;
-var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
-  value: __freeze$z(raw || cooked.slice())
-}));
-var _a$z;
-const Root$B = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$1 = styled__default.default.span(_a$z || (_a$z = __template$z(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
-const Text = react.forwardRef(function Text2(props, ref) {
-  const {
-    accent = false,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props;
-  let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
-      children
-    });
-  }
-  return /* @__PURE__ */jsxRuntime.jsx(Root$B, {
-    "data-ui": "Text",
-    ...restProps,
-    $accent: accent,
-    $align: useArrayProp(align),
-    $muted: muted,
-    ref,
-    $size: useArrayProp(size),
-    $weight: weight,
-    children: /* @__PURE__ */jsxRuntime.jsx("span", {
-      children
-    })
-  });
-});
-var __freeze$y = Object.freeze;
-var __defProp$z = Object.defineProperty;
-var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
-  value: __freeze$y(raw || cooked.slice())
-}));
-var _a$y;
+var _a$A;
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
     avatar,
@@ -2005,23 +1966,28 @@ function _avatarCounterBaseStyle(props) {
   const {
     space
   } = theme.getTheme_v2(props.theme);
-  return styled.css(_a$y || (_a$y = __template$y(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(space[2]));
+  return styled.css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(space[2]));
 }
-const Root$A = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
+const Root$B = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
   const {
     count,
-    size: sizeProp = 0
+    size: sizeProp = 1
   } = props;
   const size = useArrayProp(sizeProp);
-  const counterSize = react.useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
-  return /* @__PURE__ */jsxRuntime.jsx(Root$A, {
+  const fontSize = react.useMemo(() => size.map(s => {
+    if (s === 1) return 1;
+    if (s === 2) return 3;
+    if (s === 3) return 5;
+    return 0;
+  }), [size]);
+  return /* @__PURE__ */jsxRuntime.jsx(Root$B, {
     $size: size,
     "data-ui": "AvatarCounter",
     ref,
-    children: /* @__PURE__ */jsxRuntime.jsx(Text, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Label, {
       as: "span",
-      size: counterSize,
+      size: fontSize,
       weight: "medium",
       children: count
     })
@@ -2031,13 +1997,13 @@ function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
   return childrenArray.filter(node => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node === "string");
 }
-var __freeze$x = Object.freeze;
-var __defProp$y = Object.defineProperty;
-var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
-  value: __freeze$x(raw || cooked.slice())
+var __freeze$z = Object.freeze;
+var __defProp$A = Object.defineProperty;
+var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
+  value: __freeze$z(raw || cooked.slice())
 }));
-var _a$x;
-const BASE_STYLES = styled.css(_a$x || (_a$x = __template$x(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+var _a$z;
+const BASE_STYLES = styled.css(_a$z || (_a$z = __template$z(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
 function avatarStackStyle() {
   return BASE_STYLES;
 }
@@ -2056,12 +2022,12 @@ function responsiveAvatarStackSizeStyle(props) {
     };
   });
 }
-const Root$z = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
+const Root$A = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
 const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props;
   const children = childrenToElementArray(childrenProp).filter(child => typeof child !== "string");
@@ -2071,14 +2037,15 @@ const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$z, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$A, {
     "data-ui": "AvatarStack",
     ...restProps,
     ref,
     $size: size,
     children: [len === 0 && /* @__PURE__ */jsxRuntime.jsx("div", {
       children: /* @__PURE__ */jsxRuntime.jsx(AvatarCounter, {
-        count: len
+        count: len,
+        size
       })
     }), len !== 0 && extraCount > 1 && /* @__PURE__ */jsxRuntime.jsx("div", {
       children: /* @__PURE__ */jsxRuntime.jsx(AvatarCounter, {
@@ -2092,7 +2059,7 @@ const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
     }, String(childIndex)))]
   });
 });
-const Root$y = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
+const Root$z = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 const Box = react.forwardRef(function Box2(props, ref) {
   const {
     as: asProp = "div",
@@ -2123,7 +2090,7 @@ const Box = react.forwardRef(function Box2(props, ref) {
     sizing,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$y, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$z, {
     "data-as": typeof asProp === "string" ? asProp : void 0,
     "data-ui": "Box",
     ...restProps,
@@ -2157,6 +2124,61 @@ const Box = react.forwardRef(function Box2(props, ref) {
     children: props.children
   });
 });
+var __freeze$y = Object.freeze;
+var __defProp$z = Object.defineProperty;
+var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
+  value: __freeze$y(raw || cooked.slice())
+}));
+var _a$y, _b$l, _c$a;
+function textBaseStyle(props) {
+  const {
+    $accent,
+    $muted
+  } = props;
+  const {
+    font
+  } = theme.getTheme_v2(props.theme);
+  return styled.css(_c$a || (_c$a = __template$y(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\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      color: var(--card-icon-color);\n\n      & path {\n        vector-effect: non-scaling-stroke !important;\n      }\n    }\n  "])), $accent && styled.css(_a$y || (_a$y = __template$y(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$l || (_b$l = __template$y(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.text.weights.bold);
+}
+var __freeze$x = Object.freeze;
+var __defProp$y = Object.defineProperty;
+var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
+  value: __freeze$x(raw || cooked.slice())
+}));
+var _a$x;
+const Root$y = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
+const SpanWithTextOverflow$1 = styled__default.default.span(_a$x || (_a$x = __template$x(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const Text = react.forwardRef(function Text2(props, ref) {
+  const {
+    accent = false,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props;
+  let children = childrenProp;
+  if (textOverflow === "ellipsis") {
+    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
+      children
+    });
+  }
+  return /* @__PURE__ */jsxRuntime.jsx(Root$y, {
+    "data-ui": "Text",
+    ...restProps,
+    $accent: accent,
+    $align: useArrayProp(align),
+    $muted: muted,
+    ref,
+    $size: useArrayProp(size),
+    $weight: weight,
+    children: /* @__PURE__ */jsxRuntime.jsx("span", {
+      children
+    })
+  });
+});
 function badgeStyle(props) {
   const {
     $tone
@@ -2990,7 +3012,7 @@ var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
 }));
 var _a$o;
 function kbdStyle() {
-  return styled.css(_a$o || (_a$o = __template$o(["\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_a$o || (_a$o = __template$o(["\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 const Root$m = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = react.forwardRef(function KBD2(props, ref) {
@@ -4788,7 +4810,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a2 = props.placement) != null ? _a2 : "bottom"],
-    padding = 3,
+    padding = 2,
     placement: placementProp = "bottom",
     portal: portalProp,
     radius = 2,
@@ -7617,222 +7639,6 @@ const TreeItem = react.memo(function TreeItem2(props) {
     })]
   });
 });
-Object.defineProperty(exports, 'COLOR_CONFIG_BLEND_KEYS', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_BLEND_KEYS;
-  }
-});
-Object.defineProperty(exports, 'COLOR_CONFIG_CARD_KEYS', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_CARD_KEYS;
-  }
-});
-Object.defineProperty(exports, 'COLOR_CONFIG_CARD_TONES', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_CARD_TONES;
-  }
-});
-Object.defineProperty(exports, 'COLOR_CONFIG_STATE_KEYS', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_STATE_KEYS;
-  }
-});
-Object.defineProperty(exports, 'COLOR_CONFIG_STATE_TONES', {
-  enumerable: true,
-  get: function () {
-    return theme.COLOR_CONFIG_STATE_TONES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_BLEND_MODES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_BLEND_MODES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_BUTTON_MODES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_BUTTON_MODES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_CARD_TONES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_CARD_TONES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_STATES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_STATES;
-  }
-});
-Object.defineProperty(exports, 'THEME_COLOR_STATE_TONES', {
-  enumerable: true,
-  get: function () {
-    return theme.THEME_COLOR_STATE_TONES;
-  }
-});
-Object.defineProperty(exports, 'buildTheme', {
-  enumerable: true,
-  get: function () {
-    return theme.buildTheme;
-  }
-});
-Object.defineProperty(exports, 'createColorTheme', {
-  enumerable: true,
-  get: function () {
-    return theme.createColorTheme;
-  }
-});
-Object.defineProperty(exports, 'hexToRgb', {
-  enumerable: true,
-  get: function () {
-    return theme.hexToRgb;
-  }
-});
-Object.defineProperty(exports, 'hslToRgb', {
-  enumerable: true,
-  get: function () {
-    return theme.hslToRgb;
-  }
-});
-Object.defineProperty(exports, 'isColorBlendModeValue', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorBlendModeValue;
-  }
-});
-Object.defineProperty(exports, 'isColorButtonMode', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorButtonMode;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigBaseKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigBaseKey;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigBaseTone', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigBaseTone;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigBlendKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigBlendKey;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigStateKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigStateKey;
-  }
-});
-Object.defineProperty(exports, 'isColorConfigStateTone', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorConfigStateTone;
-  }
-});
-Object.defineProperty(exports, 'isColorHueKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorHueKey;
-  }
-});
-Object.defineProperty(exports, 'isColorOpacityValue', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorOpacityValue;
-  }
-});
-Object.defineProperty(exports, 'isColorTintKey', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorTintKey;
-  }
-});
-Object.defineProperty(exports, 'isColorTokenValue', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorTokenValue;
-  }
-});
-Object.defineProperty(exports, 'isColorValue', {
-  enumerable: true,
-  get: function () {
-    return theme.isColorValue;
-  }
-});
-Object.defineProperty(exports, 'multiply', {
-  enumerable: true,
-  get: function () {
-    return theme.multiply;
-  }
-});
-Object.defineProperty(exports, 'parseColor', {
-  enumerable: true,
-  get: function () {
-    return theme.parseColor;
-  }
-});
-Object.defineProperty(exports, 'parseTokenKey', {
-  enumerable: true,
-  get: function () {
-    return theme.parseTokenKey;
-  }
-});
-Object.defineProperty(exports, 'parseTokenValue', {
-  enumerable: true,
-  get: function () {
-    return theme.parseTokenValue;
-  }
-});
-Object.defineProperty(exports, 'rgbToHex', {
-  enumerable: true,
-  get: function () {
-    return theme.rgbToHex;
-  }
-});
-Object.defineProperty(exports, 'rgbToHsl', {
-  enumerable: true,
-  get: function () {
-    return theme.rgbToHsl;
-  }
-});
-Object.defineProperty(exports, 'rgba', {
-  enumerable: true,
-  get: function () {
-    return theme.rgba;
-  }
-});
-Object.defineProperty(exports, 'rgbaToRGBA', {
-  enumerable: true,
-  get: function () {
-    return theme.rgbaToRGBA;
-  }
-});
-Object.defineProperty(exports, 'screen', {
-  enumerable: true,
-  get: function () {
-    return theme.screen;
-  }
-});
-Object.defineProperty(exports, 'studioTheme', {
-  enumerable: true,
-  get: function () {
-    return theme.defaultTheme;
-  }
-});
 exports.Arrow = Arrow;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
@@ -7909,8 +7715,11 @@ exports._raf2 = _raf2;
 exports._responsive = _responsive;
 exports.attemptFocus = attemptFocus;
 exports.containsOrEqualsElement = containsOrEqualsElement;
+exports.createColorTheme = createColorTheme;
 exports.focusFirstDescendant = focusFirstDescendant;
 exports.focusLastDescendant = focusLastDescendant;
+exports.hexToRgb = hexToRgb;
+exports.hslToRgb = hslToRgb;
 exports.isFocusable = isFocusable;
 exports.isHTMLAnchorElement = isHTMLAnchorElement;
 exports.isHTMLButtonElement = isHTMLButtonElement;
@@ -7918,12 +7727,19 @@ exports.isHTMLElement = isHTMLElement;
 exports.isHTMLInputElement = isHTMLInputElement;
 exports.isHTMLSelectElement = isHTMLSelectElement;
 exports.isHTMLTextAreaElement = isHTMLTextAreaElement;
+exports.multiply = multiply;
+exports.parseColor = parseColor;
 exports.rem = rem;
 exports.responsiveCodeFontStyle = responsiveCodeFontStyle;
 exports.responsiveHeadingFont = responsiveHeadingFont;
 exports.responsiveLabelFont = responsiveLabelFont;
 exports.responsiveTextAlignStyle = responsiveTextAlignStyle;
 exports.responsiveTextFont = responsiveTextFont;
+exports.rgbToHex = rgbToHex;
+exports.rgbToHsl = rgbToHsl;
+exports.rgba = rgba;
+exports.screen = screen;
+exports.studioTheme = studioTheme;
 exports.useArrayProp = useArrayProp;
 exports.useBoundaryElement = useBoundaryElement;
 exports.useClickOutside = useClickOutside;