@sanity/ui 2.0.13-alpha.1 → 2.0.13

package/dist/index.js

@@ -1,8 +1,6 @@
 "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"), styledComponents = 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 };
 }
@@ -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(styledComponents.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);
@@ -547,7 +545,7 @@ function useTheme() {
   return styledComponents.useTheme();
 }
 function useTheme_v2() {
-  return getScopedTheme.getTheme_v2(styledComponents.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) => {
@@ -947,7 +945,7 @@ function textInputRootStyle() {
   return ROOT_STYLE;
 }
 function textInputBaseStyle(props) {
-  const { $scheme, $tone, $weight } = props, { color, font } = props.theme.sanity.v2;
+  const { $scheme, $tone, $weight } = props, { color, font } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     appearance: none;
     background: none;
@@ -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,7 +1023,7 @@ function textInputFontSizeStyle(props) {
   });
 }
 function textInputRepresentationStyle(props) {
-  const { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props, { color, input } = props.theme.sanity.v2;
+  const { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props, { color, input } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     --input-box-shadow: none;
 
@@ -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,7 +1199,7 @@ function responsiveShadowStyle(props) {
   );
 }
 function labelBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
+  const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     text-transform: uppercase;
 
@@ -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 {
@@ -1496,7 +1494,7 @@ const Root$B = styledComponents.styled.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,7 +1505,7 @@ function _responsiveAvatarCounterSizeStyle(props) {
   });
 }
 function _avatarCounterBaseStyle(props) {
-  const { space } = props.theme.sanity.v2;
+  const { space } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     align-items: center;
     justify-content: center;
@@ -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 ? {
@@ -1655,7 +1653,7 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
   );
 });
 function textBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
+  const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     color: var(--card-fg-color);
 
@@ -1899,7 +1897,7 @@ function _cardColorStyle(base, color, checkered = !1) {
   };
 }
 function buttonBaseStyles(props) {
-  const { $width } = props, { style } = props.theme.sanity.v2;
+  const { $width } = props, { style } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     ${style == null ? void 0 : style.button};
 
@@ -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;
@@ -2084,7 +2082,7 @@ function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
 function cardBaseStyle(props) {
-  const { $checkered } = props, { space } = props.theme.sanity.v2;
+  const { $checkered } = props, { space } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     ${$checkered && styledComponents.css`
       background-size: ${space[3]}px ${space[3]}px;
@@ -2118,7 +2116,7 @@ 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)" };
+  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"};
 
@@ -2258,7 +2256,7 @@ function checkboxBaseStyles() {
   `;
 }
 function inputElementStyles(props) {
-  const { color, input, radius } = props.theme.sanity.v2, { focusRing } = input.checkbox;
+  const { color, input, radius } = theme.getTheme_v2(props.theme), { focusRing } = input.checkbox;
   return styledComponents.css`
     position: absolute;
     top: 0;
@@ -2403,8 +2401,10 @@ const Root$r = styledComponents.styled.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 },
@@ -2487,7 +2487,7 @@ 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])
   }));
@@ -2530,7 +2530,7 @@ const Root$p = styledComponents.styled(Box)(
   );
 });
 function headingBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
+  const { $accent, $muted } = props, { font } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     ${$accent && styledComponents.css`
       color: var(--card-accent-fg-color);
@@ -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 {
@@ -3498,7 +3498,7 @@ function radioBaseStyle() {
   `;
 }
 function inputElementStyle(props) {
-  const { color, input } = props.theme.sanity.v2, dist = (input.radio.size - input.radio.markSize) / 2;
+  const { color, input } = theme.getTheme_v2(props.theme), dist = (input.radio.size - input.radio.markSize) / 2;
   return styledComponents.css`
     appearance: none;
     position: absolute;
@@ -3623,7 +3623,7 @@ function rootStyle() {
   `;
 }
 function inputBaseStyle(props) {
-  const { font } = props.theme.sanity.v2;
+  const { font } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     -webkit-font-smoothing: antialiased;
     appearance: none;
@@ -3640,7 +3640,7 @@ function inputBaseStyle(props) {
   `;
 }
 function inputColorStyle(props) {
-  const { color, input } = props.theme.sanity.v2;
+  const { color, input } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     /* enabled */
     background-color: ${color.input.default.enabled.bg};
@@ -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,7 +3712,7 @@ function inputStyle() {
   ];
 }
 function iconBoxStyle(props) {
-  const { color } = props.theme.sanity.v2;
+  const { color } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     pointer-events: none;
     position: absolute;
@@ -3788,7 +3788,7 @@ 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])
   }));
@@ -3834,7 +3834,7 @@ function switchInputStyles() {
   `;
 }
 function switchRepresentationStyles(props) {
-  const { color, input } = props.theme.sanity.v2;
+  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};
@@ -3907,7 +3907,7 @@ function switchRepresentationStyles(props) {
   `;
 }
 function switchTrackStyles(props) {
-  const { input } = props.theme.sanity.v2;
+  const { input } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     &:not([hidden]) {
       display: block;
@@ -3922,7 +3922,7 @@ 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;
+  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;
@@ -5000,8 +5000,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,7 +5017,7 @@ 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) {
@@ -5696,7 +5696,7 @@ function selectableBaseStyle() {
 }
 function selectableColorStyle(props) {
   var _a;
-  const { $tone } = props, { color, style } = props.theme.sanity.v2, tone = color.selectable[$tone];
+  const { $tone } = props, { color, style } = theme.getTheme_v2(props.theme), tone = color.selectable[$tone];
   return styledComponents.css`
     ${_cardColorStyle(color, tone.enabled)}
 
@@ -6041,7 +6041,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     }
   );
 }), Root$3 = styledComponents.styled(Skeleton)((props) => {
-  const { $size, $style } = props, { font, media } = props.theme.sanity.v2, fontStyle = font[$style];
+  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 };
@@ -6540,7 +6540,7 @@ function treeItemRootStyle() {
   `;
 }
 function treeItemRootColorStyle(props) {
-  const $tone = "default", { color } = props.theme.sanity.v2, tone = color.selectable[$tone];
+  const $tone = "default", { color } = theme.getTheme_v2(props.theme), tone = color.selectable[$tone];
   return styledComponents.css`
     &[role='none'] {
       & > [role='treeitem'] {
@@ -6584,7 +6584,7 @@ function treeItemRootColorStyle(props) {
   `;
 }
 function treeItemBoxStyle(props) {
-  const { $level } = props, { space } = props.theme.sanity.v2;
+  const { $level } = props, { space } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
     padding-left: ${rem(space[2] * $level)};