@sanity/ui 2.0.13-alpha.2 → 2.0.14

package/dist/index.js

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styled = require("styled-components");
-require("@sanity/color");
-var getScopedTheme = require("./_chunks-cjs/getScopedTheme.js"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
-var ReactIs__default = /* @__PURE__ */ _interopDefaultCompat(ReactIs), styled__default = /* @__PURE__ */ _interopDefaultCompat(styled), Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor);
+var ReactIs__default = /* @__PURE__ */ _interopDefaultCompat(ReactIs), Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor);
 const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslToRgb = theme.hslToRgb, multiply = theme.multiply, parseColor = theme.parseColor, rgbToHex = theme.rgbToHex, rgbToHsl = theme.rgbToHsl, rgba = theme.rgba, screen = theme.screen, studioTheme = theme.buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
@@ -39,12 +37,12 @@ function _responsive(media, values, callback) {
 function _getArrayProp(val, defaultVal) {
   return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
 }
-function _getResponsiveSpace(theme2, props, spaceIndexes = EMPTY_ARRAY) {
+function _getResponsiveSpace(theme$1, props, spaceIndexes = EMPTY_ARRAY) {
   if (!Array.isArray(spaceIndexes))
     throw new Error("the property must be array of numbers");
   if (spaceIndexes.length === 0)
     return null;
-  const { media, space } = theme2.sanity.v2;
+  const { media, space } = theme.getTheme_v2(theme$1);
   return _responsive(
     media,
     spaceIndexes,
@@ -52,7 +50,7 @@ function _getResponsiveSpace(theme2, props, spaceIndexes = EMPTY_ARRAY) {
   );
 }
 function responsiveFont(fontKey, props) {
-  const { $size, $weight } = props, { font, media } = props.theme.sanity.v2, { family, sizes, weights } = font[fontKey], fontWeight = $weight && weights[$weight] || weights.regular, defaultSize = sizes[2], base = {
+  const { $size, $weight } = props, { font, media } = theme.getTheme_v2(props.theme), { family, sizes, weights } = font[fontKey], fontWeight = $weight && weights[$weight] || weights.regular, defaultSize = sizes[2], base = {
     position: "relative",
     fontFamily: family,
     fontWeight,
@@ -113,7 +111,7 @@ function responsiveLabelFont(props) {
   return responsiveFont("label", props);
 }
 function responsiveTextAlignStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$align, (textAlign) => ({ textAlign }));
 }
 function responsiveTextFont(props) {
@@ -530,8 +528,8 @@ function ThemeProvider(props) {
     theme: rootTheme,
     scheme,
     tone
-  } : null, [rootTheme, scheme, tone]), theme2 = react.useMemo(() => rootTheme ? getScopedTheme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
-  return theme2 ? theme2.sanity.v2 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styled.ThemeProvider, { theme: theme2, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme.sanity.v2" property in theme' }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
+  } : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
+  return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
 }
 function useRootTheme() {
   const value = react.useContext(ThemeContext);
@@ -544,10 +542,10 @@ function ThemeColorProvider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
 }
 function useTheme() {
-  return styled.useTheme();
+  return styledComponents.useTheme();
 }
 function useTheme_v2() {
-  return getScopedTheme.getTheme_v2(styled.useTheme());
+  return theme.getTheme_v2(styledComponents.useTheme());
 }
 const MEDIA_STORE_CACHE = /* @__PURE__ */ new WeakMap();
 function _getMediaQuery(media, index) {
@@ -644,7 +642,7 @@ function responsiveBorderStyle() {
 }
 function border(props) {
   var _a, _b;
-  const { card, media } = props.theme.sanity.v2, borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$border,
@@ -653,7 +651,7 @@ function border(props) {
 }
 function borderTop(props) {
   var _a, _b;
-  const { card, media } = props.theme.sanity.v2, borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderTop,
@@ -662,7 +660,7 @@ function borderTop(props) {
 }
 function borderRight(props) {
   var _a, _b;
-  const { card, media } = props.theme.sanity.v2, borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderRight,
@@ -671,7 +669,7 @@ function borderRight(props) {
 }
 function borderBottom(props) {
   var _a, _b;
-  const { card, media } = props.theme.sanity.v2, borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderBottom,
@@ -680,7 +678,7 @@ function borderBottom(props) {
 }
 function borderLeft(props) {
   var _a, _b;
-  const { card, media } = props.theme.sanity.v2, borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
   return _responsive(
     media,
     props.$borderLeft,
@@ -710,25 +708,25 @@ function responsiveBoxStyle() {
   ];
 }
 function responsiveBoxDisplayStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$display, (display) => ({
     "&:not([hidden])": { display }
   }));
 }
 function responsiveBoxSizingStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$sizing, (sizing) => ({
     boxSizing: BOX_SIZING[sizing]
   }));
 }
 function responsiveBoxHeightStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$height, (height) => ({
     height: BOX_HEIGHT[height]
   }));
 }
 function responsiveBoxOverflowStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$overflow, (overflow) => ({
     overflow
   }));
@@ -749,25 +747,25 @@ function responsiveFlexStyle() {
   ];
 }
 function responsiveFlexAlignStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$align, (align) => ({ alignItems: align }));
 }
 function responsiveFlexGapStyle(props) {
-  const { media, space } = props.theme.sanity.v2;
+  const { media, space } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$gap, (gap) => ({
     gap: gap ? rem(space[gap]) : void 0
   }));
 }
 function responsiveFlexWrapStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$wrap, (wrap) => ({ flexWrap: wrap }));
 }
 function responsiveFlexJustifyStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$justify, (justify) => ({ justifyContent: justify }));
 }
 function responsiveFlexDirectionStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$direction, (direction) => ({ flexDirection: direction }));
 }
 const BASE_STYLE$2 = {
@@ -778,7 +776,7 @@ function flexItemStyle() {
   return [BASE_STYLE$2, responsiveFlexItemStyle];
 }
 function responsiveFlexItemStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return props.$flex ? _responsive(media, props.$flex, (flex) => ({ flex })) : EMPTY_ARRAY;
 }
 function focusRingBorderStyle(border2) {
@@ -825,49 +823,49 @@ function responsiveGridStyle() {
   ];
 }
 function responsiveGridAutoFlowStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$autoFlow, (autoFlow) => ({
     gridAutoFlow: autoFlow
   }));
 }
 function responsiveGridAutoRowsStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$autoRows, (autoRows) => ({
     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
   }));
 }
 function responsiveGridAutoColsStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$autoCols, (autoCols) => ({
     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
   }));
 }
 function responsiveGridColumnsStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$columns, (columns) => ({
     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`
   }));
 }
 function responsiveGridRowsStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$rows, (rows) => ({
     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`
   }));
 }
 function responsiveGridGapStyle(props) {
-  const { media, space } = props.theme.sanity.v2;
+  const { media, space } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$gap, (gap) => ({
     gridGap: gap ? rem(space[gap]) : void 0
   }));
 }
 function responsiveGridGapXStyle(props) {
-  const { media, space } = props.theme.sanity.v2;
+  const { media, space } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$gapX, (gapX) => ({
     columnGap: gapX ? rem(space[gapX]) : void 0
   }));
 }
 function responsiveGridGapYStyle(props) {
-  const { media, space } = props.theme.sanity.v2;
+  const { media, space } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$gapY, (gapY) => ({
     rowGap: gapY ? rem(space[gapY]) : void 0
   }));
@@ -890,37 +888,37 @@ const GRID_ITEM_ROW = {
   full: "1 / -1"
 };
 function responsiveGridItemRowStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$row, (row) => typeof row == "number" ? { gridRow: `span ${row} / span ${row}` } : { gridRow: GRID_ITEM_ROW[row] });
 }
 function responsiveGridItemRowStartStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$rowStart, (rowStart) => ({
     gridRowStart: rowStart
   }));
 }
 function responsiveGridItemRowEndStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: rowEnd }));
 }
 function responsiveGridItemColumnStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$column, (column) => typeof column == "number" ? { gridColumn: `span ${column} / span ${column}` } : { gridColumn: GRID_ITEM_COLUMN[column] });
 }
 function responsiveGridItemColumnStartStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$columnStart, (columnStart) => ({
     gridColumnStart: columnStart
   }));
 }
 function responsiveGridItemColumnEndStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$columnEnd, (columnEnd) => ({
     gridColumnEnd: columnEnd
   }));
 }
 function responsiveInputPaddingStyle(props) {
-  const { $fontSize, $iconLeft, $iconRight, $padding, $space } = props, { font, media, space } = props.theme.sanity.v2, len = Math.max($padding.length, $space.length, $fontSize.length), _padding = [], _space = [], _fontSize = [];
+  const { $fontSize, $iconLeft, $iconRight, $padding, $space } = props, { font, media, space } = theme.getTheme_v2(props.theme), len = Math.max($padding.length, $space.length, $fontSize.length), _padding = [], _space = [], _fontSize = [];
   for (let i = 0; i < len; i += 1)
     _fontSize[i] = $fontSize[i] === void 0 ? _fontSize[i - 1] : $fontSize[i], _padding[i] = $padding[i] === void 0 ? _padding[i - 1] : $padding[i], _space[i] = $space[i] === void 0 ? _space[i - 1] : $space[i];
   return _responsive(media, _padding, (_, i) => {
@@ -936,7 +934,7 @@ function responsiveInputPaddingStyle(props) {
 function responsiveInputPaddingIconRightStyle(props) {
   return responsiveInputPaddingStyle({ ...props, $iconRight: !0 });
 }
-const ROOT_STYLE = styled.css`
+const ROOT_STYLE = styledComponents.css`
   &:not([hidden]) {
     display: flex;
   }
@@ -947,8 +945,8 @@ function textInputRootStyle() {
   return ROOT_STYLE;
 }
 function textInputBaseStyle(props) {
-  const { $scheme, $tone, $weight } = props, { color, font } = props.theme.sanity.v2;
-  return styled.css`
+  const { $scheme, $tone, $weight } = props, { color, font } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     appearance: none;
     background: none;
     border: 0;
@@ -1015,7 +1013,7 @@ function textInputBaseStyle(props) {
   `;
 }
 function textInputFontSizeStyle(props) {
-  const { font, media } = props.theme.sanity.v2;
+  const { font, media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$fontSize, (sizeIndex) => {
     const size2 = font.text.sizes[sizeIndex] || font.text.sizes[2];
     return {
@@ -1025,8 +1023,8 @@ function textInputFontSizeStyle(props) {
   });
 }
 function textInputRepresentationStyle(props) {
-  const { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props, { color, input } = props.theme.sanity.v2;
-  return styled.css`
+  const { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props, { color, input } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     --input-box-shadow: none;
 
     position: absolute;
@@ -1177,7 +1175,7 @@ function responsivePaddingStyle(props) {
   ].filter(Boolean);
 }
 function responsiveRadiusStyle(props) {
-  const { media, radius } = props.theme.sanity.v2;
+  const { media, radius } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$radius, (value) => {
     let borderRadius = 0;
     return typeof value == "number" && (borderRadius = rem(radius[value])), value === "full" && (borderRadius = "9999px"), { borderRadius };
@@ -1193,7 +1191,7 @@ function shadowStyle(shadow, outlineWidth = 1) {
   return { boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}` };
 }
 function responsiveShadowStyle(props) {
-  const { card, media, shadow } = props.theme.sanity.v2;
+  const { card, media, shadow } = theme.getTheme_v2(props.theme);
   return _responsive(
     media,
     props.$shadow,
@@ -1201,15 +1199,15 @@ function responsiveShadowStyle(props) {
   );
 }
 function labelBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
-  return styled.css`
+  const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     text-transform: uppercase;
 
-    ${$accent && styled.css`
+    ${$accent && styledComponents.css`
       color: var(--card-accent-fg-color);
     `}
 
-    ${$muted && styled.css`
+    ${$muted && styledComponents.css`
       color: var(--card-muted-fg-color);
     `}
 
@@ -1234,7 +1232,7 @@ function labelBaseStyle(props) {
     }
   `;
 }
-const Root$C = styled__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styled__default.default.span`
+const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styledComponents.styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1312,7 +1310,7 @@ function avatarArrowStyle() {
   };
 }
 function avatarRootStyle(props) {
-  const { $color } = props, { avatar } = props.theme.sanity.v2;
+  const { $color } = props, { avatar } = theme.getTheme_v2(props.theme);
   return {
     "--avatar-bg-color": `var(--card-avatar-${$color}-bg-color)`,
     "--avatar-fg-color": `var(--card-avatar-${$color}-fg-color)`,
@@ -1349,7 +1347,7 @@ function avatarRootStyle(props) {
   };
 }
 function responsiveAvatarSizeStyle(props) {
-  const { avatar, media } = props.theme.sanity.v2;
+  const { avatar, media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
     const avatarSize = avatar.sizes[size2] || avatar.sizes[0];
     return {
@@ -1400,12 +1398,12 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$B = styled__default.default.div(
+const Root$B = styledComponents.styled.div(
   responsiveAvatarSizeStyle,
   avatarStyle.root
-), Arrow$1 = styled__default.default.div(avatarStyle.arrow), BgStroke = styled__default.default.ellipse(avatarStyle.bgStroke), Stroke = styled__default.default.ellipse(avatarStyle.stroke), Initials = styled__default.default.div(avatarStyle.initials), InitialsLabel = styled__default.default(Label)({
+), Arrow$1 = styledComponents.styled.div(avatarStyle.arrow), BgStroke = styledComponents.styled.ellipse(avatarStyle.bgStroke), Stroke = styledComponents.styled.ellipse(avatarStyle.stroke), Initials = styledComponents.styled.div(avatarStyle.initials), InitialsLabel = styledComponents.styled(Label)({
   color: "inherit"
-}), Image = styled__default.default.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
+}), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
   const {
     __unstable_hideInnerStroke,
     as: asProp,
@@ -1496,7 +1494,7 @@ const Root$B = styled__default.default.div(
   );
 });
 function _responsiveAvatarCounterSizeStyle(props) {
-  const { avatar, media } = props.theme.sanity.v2;
+  const { avatar, media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
     const avatarSize = avatar.sizes[size2];
     return avatarSize ? {
@@ -1507,8 +1505,8 @@ function _responsiveAvatarCounterSizeStyle(props) {
   });
 }
 function _avatarCounterBaseStyle(props) {
-  const { space } = props.theme.sanity.v2;
-  return styled.css`
+  const { space } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -1526,7 +1524,7 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = styled__default.default.div(
+const Root$A = styledComponents.styled.div(
   _responsiveAvatarCounterSizeStyle,
   _avatarCounterBaseStyle
 ), AvatarCounter = react.forwardRef(function(props, ref) {
@@ -1541,7 +1539,7 @@ function childrenToElementArray(children) {
     (node) => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node == "string"
   );
 }
-const BASE_STYLES = styled.css`
+const BASE_STYLES = styledComponents.css`
   white-space: nowrap;
 
   & > div {
@@ -1556,7 +1554,7 @@ function avatarStackStyle() {
   return BASE_STYLES;
 }
 function responsiveAvatarStackSizeStyle(props) {
-  const { avatar, media } = props.theme.sanity.v2;
+  const { avatar, media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
     const avatarSize = avatar.sizes[size2];
     return avatarSize ? {
@@ -1566,7 +1564,7 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
+const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
@@ -1580,7 +1578,7 @@ const Root$z = styled__default.default.div(responsiveAvatarStackSizeStyle, avata
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
     visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, { size: size2 }) }, String(childIndex)))
   ] });
-}), Root$y = styled__default.default.div(
+}), Root$y = styledComponents.styled.div(
   boxStyle,
   flexItemStyle,
   responsiveBoxStyle,
@@ -1655,15 +1653,15 @@ const Root$z = styled__default.default.div(responsiveAvatarStackSizeStyle, avata
   );
 });
 function textBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
-  return styled.css`
+  const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     color: var(--card-fg-color);
 
-    ${$accent && styled.css`
+    ${$accent && styledComponents.css`
       color: var(--card-accent-fg-color);
     `}
 
-    ${$muted && styled.css`
+    ${$muted && styledComponents.css`
       color: var(--card-muted-fg-color);
     `}
 
@@ -1717,11 +1715,11 @@ function textBaseStyle(props) {
     }
   `;
 }
-const Root$x = styled__default.default.div(
+const Root$x = styledComponents.styled.div(
   responsiveTextFont,
   responsiveTextAlignStyle,
   textBaseStyle
-), SpanWithTextOverflow$1 = styled__default.default.span`
+), SpanWithTextOverflow$1 = styledComponents.styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -1767,7 +1765,7 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$w = styled__default.default(Box)(
+const Root$w = styledComponents.styled(Box)(
   responsiveRadiusStyle,
   badgeStyle
 ), Badge = react.forwardRef(function(props, ref) {
@@ -1793,7 +1791,7 @@ const Root$w = styled__default.default(Box)(
       children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children })
     }
   );
-}), Root$v = styled__default.default(Box)(
+}), Root$v = styledComponents.styled(Box)(
   flexItemStyle,
   responsiveFlexStyle
 ), Flex = react.forwardRef(function(props, ref) {
@@ -1812,7 +1810,7 @@ const Root$w = styled__default.default(Box)(
       ref
     }
   );
-}), rotate$1 = styled.keyframes`
+}), rotate$1 = styledComponents.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1820,7 +1818,7 @@ const Root$w = styled__default.default(Box)(
   to {
     transform: rotate(360deg);
   }
-`, Root$u = styled__default.default(Text)`
+`, Root$u = styledComponents.styled(Text)`
   & > span > svg {
     animation: ${rotate$1} 500ms linear infinite;
   }
@@ -1899,8 +1897,8 @@ function _cardColorStyle(base, color, checkered = !1) {
   };
 }
 function buttonBaseStyles(props) {
-  const { $width } = props, { style } = props.theme.sanity.v2;
-  return styled.css`
+  const { $width } = props, { style } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     ${style == null ? void 0 : style.button};
 
     -webkit-font-smoothing: inherit;
@@ -1921,7 +1919,7 @@ function buttonBaseStyles(props) {
     position: relative;
     vertical-align: top;
 
-    ${$width === "fill" && styled.css`
+    ${$width === "fill" && styledComponents.css`
       width: -moz-available;
       width: -webkit-fill-available;
       width: stretch;
@@ -1945,7 +1943,7 @@ function combineBoxShadow(...boxShadows) {
 }
 function buttonColorStyles(props) {
   var _a;
-  const { $mode } = props, { button, color: baseColor, style } = props.theme.sanity.v2, shadow = props.$mode === "ghost", mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border2 = {
+  const { $mode } = props, { button, color: baseColor, style } = theme.getTheme_v2(props.theme), shadow = props.$mode === "ghost", mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border2 = {
     width: button.border.width,
     color: "var(--card-border-color)"
   }, defaultBoxShadow = void 0;
@@ -1985,7 +1983,7 @@ function buttonColorStyles(props) {
     (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.root
   ].filter(Boolean);
 }
-const Root$t = styled__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled__default.default.div`
+const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -2084,9 +2082,9 @@ function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
 function cardBaseStyle(props) {
-  const { $checkered } = props, { space } = props.theme.sanity.v2;
-  return styled.css`
-    ${$checkered && styled.css`
+  const { $checkered } = props, { space } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
+    ${$checkered && styledComponents.css`
       background-size: ${space[3]}px ${space[3]}px;
       background-position: 50% 50%;
       background-image: var(--card-bg-image);
@@ -2118,8 +2116,8 @@ function cardBaseStyle(props) {
 }
 function cardColorStyle(props) {
   var _a;
-  const { $checkered, $focusRing } = props, { card, color, style } = props.theme.sanity.v2, border2 = { width: card.border.width, color: "var(--card-border-color)" };
-  return styled.css`
+  const { $checkered, $focusRing } = props, { card, color, style } = theme.getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
+  return styledComponents.css`
     color-scheme: ${color._dark ? "dark" : "light"};
 
     ${_cardColorStyle(color, color, $checkered)}
@@ -2206,7 +2204,7 @@ function cardColorStyle(props) {
     ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
   `;
 }
-const Root$s = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
+const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
   const {
     __unstable_checkered: checkered = !1,
     __unstable_focusRing: focusRing = !1,
@@ -2252,14 +2250,14 @@ const Root$s = styled__default.default(Box)(responsiveBorderStyle, responsiveRad
   ) });
 });
 function checkboxBaseStyles() {
-  return styled.css`
+  return styledComponents.css`
     position: relative;
     display: inline-block;
   `;
 }
 function inputElementStyles(props) {
-  const { color, input, radius } = props.theme.sanity.v2, { focusRing } = input.checkbox;
-  return styled.css`
+  const { color, input, radius } = theme.getTheme_v2(props.theme), { focusRing } = input.checkbox;
+  return styledComponents.css`
     position: absolute;
     top: 0;
     left: 0;
@@ -2370,7 +2368,7 @@ function inputElementStyles(props) {
     }
   `;
 }
-const Root$r = styled__default.default.div(checkboxBaseStyles), Input$5 = styled__default.default.input(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
+const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styledComponents.styled.input(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
   const {
     checked,
     className,
@@ -2403,8 +2401,10 @@ const Root$r = styled__default.default.div(checkboxBaseStyles), Input$5 = styled
     ] })
   ] });
 });
-function codeSyntaxHighlightingStyle({ theme: theme2 }) {
-  const color = theme2.sanity.v2.color.syntax;
+function codeSyntaxHighlightingStyle({ theme: theme$1 }) {
+  const {
+    color: { syntax: color }
+  } = theme.getTheme_v2(theme$1);
   return {
     "&.atrule": { color: color.atrule },
     "&.attr-name": { color: color.attrName },
@@ -2445,7 +2445,7 @@ function codeSyntaxHighlightingStyle({ theme: theme2 }) {
   };
 }
 function codeBaseStyle() {
-  return styled.css`
+  return styledComponents.css`
     color: var(--card-code-fg-color);
 
     & code {
@@ -2473,7 +2473,7 @@ function codeBaseStyle() {
     }
   `;
 }
-const Root$q = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
+const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
   const { children, language: languageProp, size: size2 = 2, weight, ...restProps } = props, language = typeof languageProp == "string" ? languageProp : void 0, registered = language ? Refractor__default.default.hasLanguage(language) : !1;
   return /* @__PURE__ */ jsxRuntime.jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: useArrayProp(size2), $weight: weight, ref, children: [
     !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }),
@@ -2487,12 +2487,12 @@ function containerBaseStyle() {
   return BASE_STYLE$1;
 }
 function responsiveContainerWidthStyle(props) {
-  const { container, media } = props.theme.sanity.v2;
+  const { container, media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$width, (val) => ({
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$p = styled__default.default(Box)(
+const Root$p = styledComponents.styled(Box)(
   containerBaseStyle,
   responsiveContainerWidthStyle
 ), Container = react.forwardRef(function(props, ref) {
@@ -2507,7 +2507,7 @@ const Root$p = styled__default.default(Box)(
       ref
     }
   );
-}), Root$o = styled__default.default(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
+}), Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
   const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$o,
@@ -2530,13 +2530,13 @@ const Root$p = styled__default.default(Box)(
   );
 });
 function headingBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
-  return styled.css`
-    ${$accent && styled.css`
+  const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
+    ${$accent && styledComponents.css`
       color: var(--card-accent-fg-color);
     `}
 
-    ${$muted && styled.css`
+    ${$muted && styledComponents.css`
       color: var(--card-muted-fg-color);
     `}
 
@@ -2583,7 +2583,7 @@ function headingBaseStyle(props) {
     }
   `;
 }
-const Root$n = styled__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styled__default.default.span`
+const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styledComponents.styled.span`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -2629,7 +2629,7 @@ function inlineBaseStyle() {
   };
 }
 function inlineSpaceStyle(props) {
-  const { media, space } = props.theme.sanity.v2;
+  const { media, space } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$space, (spaceIndex) => {
     const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex]);
     return {
@@ -2638,7 +2638,7 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$m = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
+const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
   const { as, children: childrenProp, space, ...restProps } = props, children = react.useMemo(
     () => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: child }, idx)),
     [childrenProp]
@@ -2656,7 +2656,7 @@ const Root$m = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle),
   );
 });
 function kbdStyle() {
-  return styled.css`
+  return styledComponents.css`
     --card-bg-color: var(--card-kbd-bg-color);
     --card-border-color: var(--card-kbd-border-color);
     --card-fg-color: var(--card-kbd-fg-color);
@@ -2672,7 +2672,7 @@ function kbdStyle() {
     }
   `;
 }
-const Root$l = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
+const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
   const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: useArrayProp(radius), ref, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
 }), origin = {
@@ -2733,8 +2733,8 @@ function getRoundedCommands(points) {
 function compileCommands(cmds) {
   return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
 }
-const Root$k = styled__default.default.div(
-  ({ $w: w }) => styled.css`
+const Root$k = styledComponents.styled.div(
+  ({ $w: w }) => styledComponents.css`
     position: absolute;
     width: ${w}px;
     height: ${w}px;
@@ -2781,9 +2781,9 @@ const Root$k = styled__default.default.div(
       }
     }
   `
-), StrokePath = styled__default.default.path`
+), StrokePath = styledComponents.styled.path`
   stroke: var(--card-shadow-outline-color);
-`, ShapePath = styled__default.default.path`
+`, ShapePath = styledComponents.styled.path`
   fill: var(--card-bg-color);
 `, Arrow = react.forwardRef(function(props, ref) {
   const { width: w, height: h, radius = 0, ...restProps } = props, { card } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, points = [
@@ -3027,7 +3027,7 @@ function LayerProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
 }
-const Root$j = styled__default.default.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, ref) {
+const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, ref) {
   const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), forwardedRef = useForwardedRef(ref), isTopLayerRef = react.useRef(isTopLayer);
   react.useEffect(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && (onActivate == null || onActivate({ activeElement: lastFocusedRef.current })), isTopLayerRef.current = isTopLayer;
@@ -3098,7 +3098,7 @@ function PortalProvider(props) {
   }), [boundaryElement, element, elements]);
   return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children });
 }
-const Root$i = styled__default.default.div`
+const Root$i = styledComponents.styled.div`
   display: block;
   width: 0;
   height: 0;
@@ -3108,9 +3108,9 @@ const Root$i = styled__default.default.div`
 `, SrOnly = react.forwardRef(function(props, ref) {
   const { as, children } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
-}), Root$h = styled__default.default.div`
+}), Root$h = styledComponents.styled.div`
   position: relative;
-`, ItemWrapper = styled__default.default.div`
+`, ItemWrapper = styledComponents.styled.div`
   position: absolute;
   left: 0;
   right: 0;
@@ -3211,7 +3211,7 @@ function calcMaxWidth(params) {
       (boundaryWidth || 1 / 0) - DEFAULT_POPOVER_PADDING * 2
     );
 }
-const MotionCard$1 = styled__default.default(framerMotion.motion(Card))`
+const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
   &:not([hidden]) {
     display: flex;
   }
@@ -3485,7 +3485,7 @@ const Popover = react.memo(
 );
 Popover.displayName = "Popover";
 function radioBaseStyle() {
-  return styled.css`
+  return styledComponents.css`
     position: relative;
 
     &:not([hidden]) {
@@ -3498,8 +3498,8 @@ function radioBaseStyle() {
   `;
 }
 function inputElementStyle(props) {
-  const { color, input } = props.theme.sanity.v2, dist = (input.radio.size - input.radio.markSize) / 2;
-  return styled.css`
+  const { color, input } = theme.getTheme_v2(props.theme), dist = (input.radio.size - input.radio.markSize) / 2;
+  return styledComponents.css`
     appearance: none;
     position: absolute;
     top: 0;
@@ -3592,7 +3592,7 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = styled__default.default.div(radioBaseStyle), Input$4 = styled__default.default.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
+const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComponents.styled.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
   const { className, disabled, style, customValidity, readOnly, ...restProps } = props, ref = useForwardedRef(forwardedRef);
   return useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3611,7 +3611,7 @@ const Root$g = styled__default.default.div(radioBaseStyle), Input$4 = styled__de
   ] });
 });
 function rootStyle() {
-  return styled.css`
+  return styledComponents.css`
     position: relative;
     width: -moz-available;
     width: -webkit-fill-available;
@@ -3623,8 +3623,8 @@ function rootStyle() {
   `;
 }
 function inputBaseStyle(props) {
-  const { font } = props.theme.sanity.v2;
-  return styled.css`
+  const { font } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     -webkit-font-smoothing: antialiased;
     appearance: none;
     border: 0;
@@ -3640,8 +3640,8 @@ function inputBaseStyle(props) {
   `;
 }
 function inputColorStyle(props) {
-  const { color, input } = props.theme.sanity.v2;
-  return styled.css`
+  const { color, input } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     /* enabled */
     background-color: ${color.input.default.enabled.bg};
     color: ${color.input.default.enabled.fg};
@@ -3695,7 +3695,7 @@ function textSize(size2) {
   return { fontSize: rem(size2.fontSize), lineHeight: rem(size2.lineHeight) };
 }
 function inputTextSizeStyle(props) {
-  const { $fontSize } = props, { font, media } = props.theme.sanity.v2;
+  const { $fontSize } = props, { font, media } = theme.getTheme_v2(props.theme);
   return _responsive(
     media,
     $fontSize,
@@ -3712,8 +3712,8 @@ function inputStyle() {
   ];
 }
 function iconBoxStyle(props) {
-  const { color } = props.theme.sanity.v2;
-  return styled.css`
+  const { color } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     pointer-events: none;
     position: absolute;
     top: 0;
@@ -3744,7 +3744,7 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = styled__default.default.div(selectStyle.root), Input$3 = styled__default.default.select(selectStyle.input), IconBox = styled__default.default(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
+}, Root$f = styledComponents.styled.div(selectStyle.root), Input$3 = styledComponents.styled.select(selectStyle.input), IconBox = styledComponents.styled(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
   const {
     children,
     customValidity,
@@ -3788,12 +3788,12 @@ function stackBaseStyle() {
   return BASE_STYLE;
 }
 function responsiveStackSpaceStyle(props) {
-  const { media, space } = props.theme.sanity.v2;
+  const { media, space } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$space, (spaceIndex) => ({
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$e = styled__default.default(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
+const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
   const { as, space, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$e,
@@ -3808,7 +3808,7 @@ const Root$e = styled__default.default(Box)(stackBaseStyle, responsiveStackSpace
   );
 });
 function switchBaseStyles() {
-  return styled.css`
+  return styledComponents.css`
     position: relative;
     &:not([hidden]) {
       display: inline-block;
@@ -3816,7 +3816,7 @@ function switchBaseStyles() {
   `;
 }
 function switchInputStyles() {
-  return styled.css`
+  return styledComponents.css`
     position: absolute;
     top: 0;
     right: 0;
@@ -3834,8 +3834,8 @@ function switchInputStyles() {
   `;
 }
 function switchRepresentationStyles(props) {
-  const { color, input } = props.theme.sanity.v2;
-  return styled.css`
+  const { color, input } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     --switch-bg-color: ${color.input.default.enabled.border};
     --switch-fg-color: ${color.input.default.enabled.bg};
     --switch-box-shadow: none;
@@ -3907,8 +3907,8 @@ function switchRepresentationStyles(props) {
   `;
 }
 function switchTrackStyles(props) {
-  const { input } = props.theme.sanity.v2;
-  return styled.css`
+  const { input } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     &:not([hidden]) {
       display: block;
     }
@@ -3922,8 +3922,8 @@ function switchTrackStyles(props) {
   `;
 }
 function switchThumbStyles(props) {
-  const { $indeterminate } = props, { input } = props.theme.sanity.v2, trackWidth = input.switch.width, trackHeight = input.switch.height, trackPadding = input.switch.padding, size2 = trackHeight - input.switch.padding * 2, checkedOffset = trackWidth - trackPadding * 2 - size2, indeterminateOffset = trackWidth / 2 - size2 / 2 - trackPadding, checked = $indeterminate !== !0 && props.$checked === !0;
-  return styled.css`
+  const { $indeterminate } = props, { input } = theme.getTheme_v2(props.theme), trackWidth = input.switch.width, trackHeight = input.switch.height, trackPadding = input.switch.padding, size2 = trackHeight - input.switch.padding * 2, checkedOffset = trackWidth - trackPadding * 2 - size2, indeterminateOffset = trackWidth / 2 - size2 / 2 - trackPadding, checked = $indeterminate !== !0 && props.$checked === !0;
+  return styledComponents.css`
     &:not([hidden]) {
       display: block;
     }
@@ -3940,16 +3940,16 @@ function switchThumbStyles(props) {
     transform: translate3d(0, 0, 0);
     box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
 
-    ${checked && styled.css`
+    ${checked && styledComponents.css`
       transform: translate3d(${checkedOffset}px, 0, 0);
     `}
 
-    ${$indeterminate && styled.css`
+    ${$indeterminate && styledComponents.css`
       transform: translate3d(${indeterminateOffset}px, 0, 0);
     `}
   `;
 }
-const Root$d = styled__default.default.span(switchBaseStyles), Input$2 = styled__default.default.input(switchInputStyles), Representation = styled__default.default.span(switchRepresentationStyles), Track = styled__default.default.span(switchTrackStyles), Thumb = styled__default.default.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
+const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledComponents.styled.input(switchInputStyles), Representation = styledComponents.styled.span(switchRepresentationStyles), Track = styledComponents.styled.span(switchTrackStyles), Thumb = styledComponents.styled.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
   const { checked, className, disabled, indeterminate, readOnly, style, ...restProps } = props, ref = useForwardedRef(forwardedRef);
   return react.useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
@@ -3970,16 +3970,16 @@ const Root$d = styled__default.default.span(switchBaseStyles), Input$2 = styled_
       /* @__PURE__ */ jsxRuntime.jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
     ] })
   ] });
-}), Root$c = styled__default.default.span(textInputRootStyle), InputRoot$1 = styled__default.default.span`
+}), Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = styledComponents.styled.span`
   flex: 1;
   min-width: 0;
   display: block;
   position: relative;
-`, Input$1 = styled__default.default.textarea(
+`, Input$1 = styledComponents.styled.textarea(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
   textInputFontSizeStyle
-), Presentation$1 = styled__default.default.div(
+), Presentation$1 = styledComponents.styled.div(
   responsiveRadiusStyle,
   textInputRepresentationStyle
 ), TextArea = react.forwardRef(function(props, forwardedRef) {
@@ -4023,12 +4023,12 @@ const Root$d = styled__default.default.span(switchBaseStyles), Input$2 = styled_
       }
     )
   ] }) });
-}), CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styled__default.default(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styled__default.default.span`
+}), CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, Root$b = styledComponents.styled(Card).attrs({ forwardedAs: "span" })(textInputRootStyle), InputRoot = styledComponents.styled.span`
   flex: 1;
   min-width: 0;
   display: block;
   position: relative;
-`, Prefix = styled__default.default(Card).attrs({ forwardedAs: "span" })`
+`, Prefix = styledComponents.styled(Card).attrs({ forwardedAs: "span" })`
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 
@@ -4036,7 +4036,7 @@ const Root$d = styled__default.default.span(switchBaseStyles), Input$2 = styled_
     display: block;
     margin: -1px;
   }
-`, Suffix = styled__default.default(Card).attrs({ forwardedAs: "span" })`
+`, Suffix = styledComponents.styled(Card).attrs({ forwardedAs: "span" })`
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 
@@ -4044,27 +4044,27 @@ const Root$d = styled__default.default.span(switchBaseStyles), Input$2 = styled_
     display: block;
     margin: -1px;
   }
-`, Input = styled__default.default.input(
+`, Input = styledComponents.styled.input(
   responsiveInputPaddingStyle,
   textInputBaseStyle,
   textInputFontSizeStyle
-), Presentation = styled__default.default.span(
+), Presentation = styledComponents.styled.span(
   responsiveRadiusStyle,
   textInputRepresentationStyle
-), LeftBox = styled__default.default(Box)`
+), LeftBox = styledComponents.styled(Box)`
   position: absolute;
   top: 0;
   left: 0;
-`, RightBox = styled__default.default(Box)`
+`, RightBox = styledComponents.styled(Box)`
   position: absolute;
   top: 0;
   right: 0;
-`, RightCard = styled__default.default(Card)`
+`, RightCard = styledComponents.styled(Card)`
   background-color: transparent;
   position: absolute;
   top: 0;
   right: 0;
-`, TextInputClearButton = styled__default.default(Button)({
+`, TextInputClearButton = styledComponents.styled(Button)({
   "&:not([hidden])": {
     display: "block"
   }
@@ -4244,7 +4244,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   right: ["right-end", "right-start", "left", "top", "bottom"],
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
-}, MotionCard = styled__default.default(framerMotion.motion(Card))`
+}, MotionCard = styledComponents.styled(framerMotion.motion(Card))`
   & > * {
     opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
     will-change: opacity;
@@ -4336,7 +4336,7 @@ function TooltipDelayGroupProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children });
 }
-const Root$a = styled__default.default(Layer)`
+const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
   max-width: ${({ $maxWidth }) => $maxWidth}px;
 `, Tooltip = react.forwardRef(function(props, ref) {
@@ -4358,13 +4358,18 @@ const Root$a = styled__default.default(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), forwardedRef = useForwardedRef(ref), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, tooltipWidth = react.useMemo(() => {
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), forwardedRef = useForwardedRef(ref), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = react.useSyncExternalStore(
+    emptySubscribe,
+    () => document.body.offsetWidth,
+    // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
+    () => 800
+  ), tooltipWidth = react.useMemo(() => {
     const availableWidths = [
       ...boundaryElement ? [boundaryElement.offsetWidth] : [],
-      (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth
+      (portalElement == null ? void 0 : portalElement.offsetWidth) || documentBodyOffsetWidth
     ];
     return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
-  }, [boundaryElement, portalElement == null ? void 0 : portalElement.offsetWidth]), middleware = react.useMemo(() => {
+  }, [boundaryElement, documentBodyOffsetWidth, portalElement == null ? void 0 : portalElement.offsetWidth]), middleware = react.useMemo(() => {
     const ret = [];
     return ret.push(
       reactDom$1.flip({
@@ -4544,15 +4549,16 @@ const Root$a = styled__default.default(Layer)`
     ),
     child
   ] });
-}), Root$9 = styled__default.default.div`
+}), emptySubscribe = () => () => {
+}, Root$9 = styledComponents.styled.div`
   line-height: 0;
-`, ListBox = styled__default.default(Box)`
+`, ListBox = styledComponents.styled(Box)`
   & > ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }
-`, rotate = styled.keyframes`
+`, rotate = styledComponents.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -4560,7 +4566,7 @@ const Root$a = styled__default.default(Layer)`
   to {
     transform: rotate(360deg);
   }
-`, AnimatedSpinnerIcon = styled__default.default(icons.SpinnerIcon)`
+`, AnimatedSpinnerIcon = styledComponents.styled(icons.SpinnerIcon)`
   animation: ${rotate} 500ms linear infinite;
 `;
 function AutocompleteOption(props) {
@@ -4943,7 +4949,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       ]
     }
   );
-}), Autocomplete = InnerAutocomplete, Root$8 = styled__default.default.ol`
+}), Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
   margin: 0;
   padding: 0;
   display: flex;
@@ -4951,7 +4957,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   align-items: center;
   white-space: nowrap;
   line-height: 0;
-`, ExpandButton = styled__default.default(Button)`
+`, ExpandButton = styledComponents.styled(Button)`
   appearance: none;
   margin: -4px;
 `, Breadcrumbs = react.forwardRef(function(props, ref) {
@@ -5000,8 +5006,8 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
   ] }, itemIndex)) });
 });
-function dialogStyle({ theme: theme2 }) {
-  const { color } = theme2.sanity.v2;
+function dialogStyle({ theme: theme$1 }) {
+  const { color } = theme.getTheme_v2(theme$1);
   return {
     "&:not([hidden])": {
       display: "flex"
@@ -5017,11 +5023,11 @@ function dialogStyle({ theme: theme2 }) {
   };
 }
 function responsiveDialogPositionStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$position, (position) => ({ "&&": { position } }));
 }
 function animationDialogStyle(props) {
-  return props.$animate ? styled.css`
+  return props.$animate ? styledComponents.css`
     @keyframes zoomIn {
       from {
         opacity: 0;
@@ -5046,7 +5052,7 @@ function animationDialogStyle(props) {
     & > [data-ui='DialogCard'] {
       animation: zoomIn 200ms ease-out;
     }
-  ` : styled.css``;
+  ` : styledComponents.css``;
 }
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
 globalScope[key$3] = globalScope[key$3] || react.createContext({ version: 0 });
@@ -5057,7 +5063,7 @@ function useDialog() {
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled__default.default(Container)`
+const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styledComponents.styled(Container)`
   &:not([hidden]) {
     display: flex;
   }
@@ -5066,7 +5072,7 @@ const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyl
   flex-direction: column;
   align-items: center;
   justify-content: center;
-`, DialogCardRoot = styled__default.default(Card)`
+`, DialogCardRoot = styledComponents.styled(Card)`
   &:not([hidden]) {
     display: flex;
   }
@@ -5075,19 +5081,19 @@ const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyl
   max-height: 100%;
   overflow: hidden;
   overflow: clip;
-`, DialogLayout = styled__default.default(Flex)`
+`, DialogLayout = styledComponents.styled(Flex)`
   flex: 1;
   min-height: 0;
   width: 100%;
-`, DialogHeader = styled__default.default(Box)`
+`, DialogHeader = styledComponents.styled(Box)`
   position: relative;
   z-index: 2;
-`, DialogContent = styled__default.default(Box)`
+`, DialogContent = styledComponents.styled(Box)`
   position: relative;
   z-index: 1;
   overflow: auto;
   outline: none;
-`, DialogFooter = styled__default.default(Box)`
+`, DialogFooter = styledComponents.styled(Box)`
   position: relative;
   z-index: 3;
 `, DialogCard = react.forwardRef(function(props, ref) {
@@ -5269,14 +5275,14 @@ function DialogProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children });
 }
-const Root$6 = styled__default.default.kbd`
+const Root$6 = styledComponents.styled.kbd`
   font: inherit;
   padding: 1px;
 
   &:not([hidden]) {
     display: block;
   }
-`, Key = styled__default.default(KBD)`
+`, Key = styledComponents.styled(KBD)`
   &:not([hidden]) {
     display: block;
   }
@@ -5441,7 +5447,7 @@ function useMenuController(props) {
     setRootElement
   };
 }
-const Root$5 = styled__default.default(Box)`
+const Root$5 = styledComponents.styled(Box)`
   outline: none;
   overflow: auto;
 `, Menu = react.forwardRef(function(props, ref) {
@@ -5665,14 +5671,14 @@ const Root$5 = styled__default.default(Box)`
     ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
-}), MenuDivider = styled__default.default.hr`
+}), MenuDivider = styledComponents.styled.hr`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);
   margin: 0;
 `;
 function selectableBaseStyle() {
-  return styled.css`
+  return styledComponents.css`
     background-color: inherit;
     color: inherit;
 
@@ -5696,8 +5702,8 @@ function selectableBaseStyle() {
 }
 function selectableColorStyle(props) {
   var _a;
-  const { $tone } = props, { color, style } = props.theme.sanity.v2, tone = color.selectable[$tone];
-  return styled.css`
+  const { $tone } = props, { color, style } = theme.getTheme_v2(props.theme), tone = color.selectable[$tone];
+  return styledComponents.css`
     ${_cardColorStyle(color, tone.enabled)}
 
     background-color: var(--card-bg-color);
@@ -5767,7 +5773,7 @@ function selectableColorStyle(props) {
     ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
   `;
 }
-const Selectable = styled__default.default(Box)(
+const Selectable = styledComponents.styled(Box)(
   responsiveRadiusStyle,
   selectableBaseStyle,
   selectableColorStyle
@@ -5980,14 +5986,14 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       ]
     }
   );
-}), keyframe = styled.keyframes`
+}), keyframe = styledComponents.keyframes`
   0% {
     background-position: 100%;
   }
   100% {
     background-position: -100%;
   }
-`, animation = styled.css`
+`, animation = styledComponents.css`
   background-image: linear-gradient(
     to right,
     var(--card-skeleton-color-from),
@@ -6003,12 +6009,12 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 2000ms;
-`, skeletonStyle = styled.css`
+`, skeletonStyle = styledComponents.css`
   opacity: ${({ $visible }) => $visible ? 1 : 0};
   transition: opacity 200ms ease-in;
 
   @media screen and (prefers-reduced-motion: no-preference) {
-    ${({ $animated }) => $animated ? animation : styled.css`
+    ${({ $animated }) => $animated ? animation : styledComponents.css`
             background-color: var(--card-skeleton-color-from);
           `}
   }
@@ -6016,7 +6022,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = styled__default.default(Box)(
+`, Root$4 = styledComponents.styled(Box)(
   responsiveRadiusStyle,
   skeletonStyle
 ), Skeleton = react.forwardRef(function(props, ref) {
@@ -6040,8 +6046,8 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       ref
     }
   );
-}), Root$3 = styled__default.default(Skeleton)((props) => {
-  const { $size, $style } = props, { font, media } = props.theme.sanity.v2, fontStyle = font[$style];
+}), Root$3 = styledComponents.styled(Skeleton)((props) => {
+  const { $size, $style } = props, { font, media } = theme.getTheme_v2(props.theme), fontStyle = font[$style];
   return _responsive(media, $size, (sizeIndex) => {
     const fontSize2 = fontStyle.sizes[sizeIndex];
     return { height: fontSize2.lineHeight - fontSize2.ascenderHeight - fontSize2.descenderHeight };
@@ -6058,7 +6064,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
 }), CodeSkeleton = react.forwardRef(function(props, ref) {
   const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
-}), CustomButton = styled__default.default(Button)`
+}), CustomButton = styledComponents.styled(Button)`
   max-width: 100%;
 `, Tab = react.forwardRef(function(props, forwardedRef) {
   const {
@@ -6110,7 +6116,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
 function _isReactElement(node) {
   return !!node;
 }
-const CustomInline = styled__default.default(Inline)`
+const CustomInline = styledComponents.styled(Inline)`
   & > div {
     display: inline-block;
     vertical-align: middle;
@@ -6172,13 +6178,13 @@ const CustomInline = styled__default.default(Inline)`
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = styled__default.default(Card)`
+}, Root$2 = styledComponents.styled(Card)`
   pointer-events: all;
   & > * {
     opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
     will-change: opacity;
   }
-`, TextBox = styled__default.default(Flex)`
+`, TextBox = styledComponents.styled(Flex)`
   overflow-x: auto;
 `;
 function Toast(props) {
@@ -6224,14 +6230,14 @@ function useMounted() {
 const subscribe = () => () => {
 }, key$1 = Symbol.for("@sanity/ui/context/toast");
 globalScope[key$1] = globalScope[key$1] || react.createContext(null);
-const ToastContext = globalScope[key$1], Root$1 = styled__default.default(Layer)`
+const ToastContext = globalScope[key$1], Root$1 = styledComponents.styled(Layer)`
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
-`, ToastContainer = styled__default.default.div`
+`, ToastContainer = styledComponents.styled.div`
   box-sizing: border-box;
   position: absolute;
   right: 0;
@@ -6508,7 +6514,7 @@ const TreeContext = globalScope[key], Tree = react.memo(
 );
 Tree.displayName = "Tree";
 function treeItemRootStyle() {
-  return styled.css`
+  return styledComponents.css`
     &[role='none'] > [role='treeitem'] {
       outline: none;
       cursor: default;
@@ -6540,8 +6546,8 @@ function treeItemRootStyle() {
   `;
 }
 function treeItemRootColorStyle(props) {
-  const $tone = "default", { color } = props.theme.sanity.v2, tone = color.selectable[$tone];
-  return styled.css`
+  const $tone = "default", { color } = theme.getTheme_v2(props.theme), tone = color.selectable[$tone];
+  return styledComponents.css`
     &[role='none'] {
       & > [role='treeitem'] {
         ${_cardColorStyle(color, tone.enabled)}
@@ -6584,8 +6590,8 @@ function treeItemRootColorStyle(props) {
   `;
 }
 function treeItemBoxStyle(props) {
-  const { $level } = props, { space } = props.theme.sanity.v2;
-  return styled.css`
+  const { $level } = props, { space } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
     padding-left: ${rem(space[2] * $level)};
 
     &[data-as='a'] {
@@ -6614,7 +6620,7 @@ const TreeGroup = react.memo(function(props) {
       children
     }
   );
-}), Root = react.memo(styled__default.default.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styled__default.default(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle), ToggleArrowText = styled__default.default(Text)`
+}), Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text)`
   & > svg {
     transition: transform 100ms;
   }