@sanity/ui 2.0.13-alpha.2 → 2.0.14

package/dist/index.d.mts

@@ -24,7 +24,7 @@ import {RefCallback} from 'react'
 import {RGB as RGB_2} from '@sanity/ui/theme'
 import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
 import {Theme as Theme_2} from '@sanity/ui/theme'
-import type {Theme_v2} from '@sanity/ui/theme'
+import {Theme_v2} from '@sanity/ui/theme'
 import {ThemeAvatar} from '@sanity/ui/theme'
 import {ThemeBoxShadow} from '@sanity/ui/theme'
 import {ThemeColor} from '@sanity/ui/theme'
@@ -1387,7 +1387,7 @@ export declare interface MenuGroupProps {
  */
 export declare const MenuItem: ForwardRefExoticComponent<
   MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'selected' | 'ref' | 'as'> &
+    Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'ref' | 'as' | 'selected'> &
     RefAttributes<HTMLDivElement>
 >
 

package/dist/index.d.ts

@@ -24,7 +24,7 @@ import {RefCallback} from 'react'
 import {RGB as RGB_2} from '@sanity/ui/theme'
 import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
 import {Theme as Theme_2} from '@sanity/ui/theme'
-import type {Theme_v2} from '@sanity/ui/theme'
+import {Theme_v2} from '@sanity/ui/theme'
 import {ThemeAvatar} from '@sanity/ui/theme'
 import {ThemeBoxShadow} from '@sanity/ui/theme'
 import {ThemeColor} from '@sanity/ui/theme'
@@ -1387,7 +1387,7 @@ export declare interface MenuGroupProps {
  */
 export declare const MenuItem: ForwardRefExoticComponent<
   MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'selected' | 'ref' | 'as'> &
+    Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'ref' | 'as' | 'selected'> &
     RefAttributes<HTMLDivElement>
 >
 

package/dist/index.esm.js

@@ -1,10 +1,8 @@
-import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1 } from "@sanity/ui/theme";
+import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from "react-is";
-import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from "styled-components";
-import "@sanity/color";
-import { g as getScopedTheme, a as getTheme_v2 } from "./_legacy/getScopedTheme.esm.js";
+import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
 import Refractor from "react-refractor";
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
@@ -47,7 +45,7 @@ function _getResponsiveSpace(theme, props, spaceIndexes = EMPTY_ARRAY) {
     throw new Error("the property must be array of numbers");
   if (spaceIndexes.length === 0)
     return null;
-  const { media, space } = theme.sanity.v2;
+  const { media, space } = getTheme_v2(theme);
   return _responsive(
     media,
     spaceIndexes,
@@ -55,7 +53,7 @@ function _getResponsiveSpace(theme, 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 } = getTheme_v2(props.theme), { family, sizes, weights } = font[fontKey], fontWeight = $weight && weights[$weight] || weights.regular, defaultSize = sizes[2], base = {
     position: "relative",
     fontFamily: family,
     fontWeight,
@@ -116,7 +114,7 @@ function responsiveLabelFont(props) {
   return responsiveFont("label", props);
 }
 function responsiveTextAlignStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$align, (textAlign) => ({ textAlign }));
 }
 function responsiveTextFont(props) {
@@ -534,7 +532,7 @@ function ThemeProvider(props) {
     scheme,
     tone
   } : null, [rootTheme, scheme, tone]), theme = useMemo(() => rootTheme ? getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
-  return theme ? theme.sanity.v2 ? /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children }) }) : /* @__PURE__ */ jsx("pre", { children: 'ThemeProvider: no "theme.sanity.v2" property in theme' }) : /* @__PURE__ */ jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
+  return theme ? /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children }) }) : /* @__PURE__ */ jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
 }
 function useRootTheme() {
   const value = useContext(ThemeContext);
@@ -647,7 +645,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 } = 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,
@@ -656,7 +654,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 } = 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,
@@ -665,7 +663,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 } = 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,
@@ -674,7 +672,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 } = 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,
@@ -683,7 +681,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 } = 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,
@@ -713,25 +711,25 @@ function responsiveBoxStyle() {
   ];
 }
 function responsiveBoxDisplayStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$display, (display) => ({
     "&:not([hidden])": { display }
   }));
 }
 function responsiveBoxSizingStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = 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 } = 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 } = getTheme_v2(props.theme);
   return _responsive(media, props.$overflow, (overflow) => ({
     overflow
   }));
@@ -752,25 +750,25 @@ function responsiveFlexStyle() {
   ];
 }
 function responsiveFlexAlignStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = 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 } = 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 } = getTheme_v2(props.theme);
   return _responsive(media, props.$wrap, (wrap) => ({ flexWrap: wrap }));
 }
 function responsiveFlexJustifyStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$justify, (justify) => ({ justifyContent: justify }));
 }
 function responsiveFlexDirectionStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$direction, (direction) => ({ flexDirection: direction }));
 }
 const BASE_STYLE$2 = {
@@ -781,7 +779,7 @@ function flexItemStyle() {
   return [BASE_STYLE$2, responsiveFlexItemStyle];
 }
 function responsiveFlexItemStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = getTheme_v2(props.theme);
   return props.$flex ? _responsive(media, props.$flex, (flex) => ({ flex })) : EMPTY_ARRAY;
 }
 function focusRingBorderStyle(border2) {
@@ -828,49 +826,49 @@ function responsiveGridStyle() {
   ];
 }
 function responsiveGridAutoFlowStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$autoFlow, (autoFlow) => ({
     gridAutoFlow: autoFlow
   }));
 }
 function responsiveGridAutoRowsStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = 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 } = 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 } = 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 } = 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 } = 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 } = 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 } = getTheme_v2(props.theme);
   return _responsive(media, props.$gapY, (gapY) => ({
     rowGap: gapY ? rem(space[gapY]) : void 0
   }));
@@ -893,37 +891,37 @@ const GRID_ITEM_ROW = {
   full: "1 / -1"
 };
 function responsiveGridItemRowStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = 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 } = getTheme_v2(props.theme);
   return _responsive(media, props.$rowStart, (rowStart) => ({
     gridRowStart: rowStart
   }));
 }
 function responsiveGridItemRowEndStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: rowEnd }));
 }
 function responsiveGridItemColumnStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = 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 } = getTheme_v2(props.theme);
   return _responsive(media, props.$columnStart, (columnStart) => ({
     gridColumnStart: columnStart
   }));
 }
 function responsiveGridItemColumnEndStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = 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 } = 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) => {
@@ -950,7 +948,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 } = getTheme_v2(props.theme);
   return css`
     appearance: none;
     background: none;
@@ -1018,7 +1016,7 @@ function textInputBaseStyle(props) {
   `;
 }
 function textInputFontSizeStyle(props) {
-  const { font, media } = props.theme.sanity.v2;
+  const { font, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$fontSize, (sizeIndex) => {
     const size2 = font.text.sizes[sizeIndex] || font.text.sizes[2];
     return {
@@ -1028,7 +1026,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 } = getTheme_v2(props.theme);
   return css`
     --input-box-shadow: none;
 
@@ -1180,7 +1178,7 @@ function responsivePaddingStyle(props) {
   ].filter(Boolean);
 }
 function responsiveRadiusStyle(props) {
-  const { media, radius } = props.theme.sanity.v2;
+  const { media, radius } = 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 };
@@ -1196,7 +1194,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 } = getTheme_v2(props.theme);
   return _responsive(
     media,
     props.$shadow,
@@ -1204,7 +1202,7 @@ function responsiveShadowStyle(props) {
   );
 }
 function labelBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
+  const { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
   return css`
     text-transform: uppercase;
 
@@ -1315,7 +1313,7 @@ function avatarArrowStyle() {
   };
 }
 function avatarRootStyle(props) {
-  const { $color } = props, { avatar } = props.theme.sanity.v2;
+  const { $color } = props, { avatar } = getTheme_v2(props.theme);
   return {
     "--avatar-bg-color": `var(--card-avatar-${$color}-bg-color)`,
     "--avatar-fg-color": `var(--card-avatar-${$color}-fg-color)`,
@@ -1352,7 +1350,7 @@ function avatarRootStyle(props) {
   };
 }
 function responsiveAvatarSizeStyle(props) {
-  const { avatar, media } = props.theme.sanity.v2;
+  const { avatar, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
     const avatarSize = avatar.sizes[size2] || avatar.sizes[0];
     return {
@@ -1499,7 +1497,7 @@ const Root$B = styled.div(
   );
 });
 function _responsiveAvatarCounterSizeStyle(props) {
-  const { avatar, media } = props.theme.sanity.v2;
+  const { avatar, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
     const avatarSize = avatar.sizes[size2];
     return avatarSize ? {
@@ -1510,7 +1508,7 @@ function _responsiveAvatarCounterSizeStyle(props) {
   });
 }
 function _avatarCounterBaseStyle(props) {
-  const { space } = props.theme.sanity.v2;
+  const { space } = getTheme_v2(props.theme);
   return css`
     align-items: center;
     justify-content: center;
@@ -1559,7 +1557,7 @@ function avatarStackStyle() {
   return BASE_STYLES;
 }
 function responsiveAvatarStackSizeStyle(props) {
-  const { avatar, media } = props.theme.sanity.v2;
+  const { avatar, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, (size2) => {
     const avatarSize = avatar.sizes[size2];
     return avatarSize ? {
@@ -1658,7 +1656,7 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
   );
 });
 function textBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
+  const { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
   return css`
     color: var(--card-fg-color);
 
@@ -1902,7 +1900,7 @@ function _cardColorStyle(base, color, checkered = !1) {
   };
 }
 function buttonBaseStyles(props) {
-  const { $width } = props, { style } = props.theme.sanity.v2;
+  const { $width } = props, { style } = getTheme_v2(props.theme);
   return css`
     ${style == null ? void 0 : style.button};
 
@@ -1948,7 +1946,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 } = 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;
@@ -2087,7 +2085,7 @@ function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
 function cardBaseStyle(props) {
-  const { $checkered } = props, { space } = props.theme.sanity.v2;
+  const { $checkered } = props, { space } = getTheme_v2(props.theme);
   return css`
     ${$checkered && css`
       background-size: ${space[3]}px ${space[3]}px;
@@ -2121,7 +2119,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 } = getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
   return css`
     color-scheme: ${color._dark ? "dark" : "light"};
 
@@ -2261,7 +2259,7 @@ function checkboxBaseStyles() {
   `;
 }
 function inputElementStyles(props) {
-  const { color, input, radius } = props.theme.sanity.v2, { focusRing } = input.checkbox;
+  const { color, input, radius } = getTheme_v2(props.theme), { focusRing } = input.checkbox;
   return css`
     position: absolute;
     top: 0;
@@ -2407,7 +2405,9 @@ const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputEleme
   ] });
 });
 function codeSyntaxHighlightingStyle({ theme }) {
-  const color = theme.sanity.v2.color.syntax;
+  const {
+    color: { syntax: color }
+  } = getTheme_v2(theme);
   return {
     "&.atrule": { color: color.atrule },
     "&.attr-name": { color: color.attrName },
@@ -2490,7 +2490,7 @@ function containerBaseStyle() {
   return BASE_STYLE$1;
 }
 function responsiveContainerWidthStyle(props) {
-  const { container, media } = props.theme.sanity.v2;
+  const { container, media } = getTheme_v2(props.theme);
   return _responsive(media, props.$width, (val) => ({
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
@@ -2533,7 +2533,7 @@ const Root$p = styled(Box)(
   );
 });
 function headingBaseStyle(props) {
-  const { $accent, $muted } = props, { font } = props.theme.sanity.v2;
+  const { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
   return css`
     ${$accent && css`
       color: var(--card-accent-fg-color);
@@ -2632,7 +2632,7 @@ function inlineBaseStyle() {
   };
 }
 function inlineSpaceStyle(props) {
-  const { media, space } = props.theme.sanity.v2;
+  const { media, space } = getTheme_v2(props.theme);
   return _responsive(media, props.$space, (spaceIndex) => {
     const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex]);
     return {
@@ -3501,7 +3501,7 @@ function radioBaseStyle() {
   `;
 }
 function inputElementStyle(props) {
-  const { color, input } = props.theme.sanity.v2, dist = (input.radio.size - input.radio.markSize) / 2;
+  const { color, input } = getTheme_v2(props.theme), dist = (input.radio.size - input.radio.markSize) / 2;
   return css`
     appearance: none;
     position: absolute;
@@ -3626,7 +3626,7 @@ function rootStyle() {
   `;
 }
 function inputBaseStyle(props) {
-  const { font } = props.theme.sanity.v2;
+  const { font } = getTheme_v2(props.theme);
   return css`
     -webkit-font-smoothing: antialiased;
     appearance: none;
@@ -3643,7 +3643,7 @@ function inputBaseStyle(props) {
   `;
 }
 function inputColorStyle(props) {
-  const { color, input } = props.theme.sanity.v2;
+  const { color, input } = getTheme_v2(props.theme);
   return css`
     /* enabled */
     background-color: ${color.input.default.enabled.bg};
@@ -3698,7 +3698,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 } = getTheme_v2(props.theme);
   return _responsive(
     media,
     $fontSize,
@@ -3715,7 +3715,7 @@ function inputStyle() {
   ];
 }
 function iconBoxStyle(props) {
-  const { color } = props.theme.sanity.v2;
+  const { color } = getTheme_v2(props.theme);
   return css`
     pointer-events: none;
     position: absolute;
@@ -3791,7 +3791,7 @@ function stackBaseStyle() {
   return BASE_STYLE;
 }
 function responsiveStackSpaceStyle(props) {
-  const { media, space } = props.theme.sanity.v2;
+  const { media, space } = getTheme_v2(props.theme);
   return _responsive(media, props.$space, (spaceIndex) => ({
     gridGap: rem(space[spaceIndex])
   }));
@@ -3837,7 +3837,7 @@ function switchInputStyles() {
   `;
 }
 function switchRepresentationStyles(props) {
-  const { color, input } = props.theme.sanity.v2;
+  const { color, input } = getTheme_v2(props.theme);
   return css`
     --switch-bg-color: ${color.input.default.enabled.border};
     --switch-fg-color: ${color.input.default.enabled.bg};
@@ -3910,7 +3910,7 @@ function switchRepresentationStyles(props) {
   `;
 }
 function switchTrackStyles(props) {
-  const { input } = props.theme.sanity.v2;
+  const { input } = getTheme_v2(props.theme);
   return css`
     &:not([hidden]) {
       display: block;
@@ -3925,7 +3925,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 } = 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 css`
     &:not([hidden]) {
       display: block;
@@ -4361,13 +4361,18 @@ const Root$a = styled(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), forwardedRef = useForwardedRef(ref), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, tooltipWidth = useMemo(() => {
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), forwardedRef = useForwardedRef(ref), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = 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 = 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 = useMemo(() => {
+  }, [boundaryElement, documentBodyOffsetWidth, portalElement == null ? void 0 : portalElement.offsetWidth]), middleware = useMemo(() => {
     const ret = [];
     return ret.push(
       flip({
@@ -4547,7 +4552,8 @@ const Root$a = styled(Layer)`
     ),
     child
   ] });
-}), Root$9 = styled.div`
+}), emptySubscribe = () => () => {
+}, Root$9 = styled.div`
   line-height: 0;
 `, ListBox = styled(Box)`
   & > ul {
@@ -5004,7 +5010,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   ] }, itemIndex)) });
 });
 function dialogStyle({ theme }) {
-  const { color } = theme.sanity.v2;
+  const { color } = getTheme_v2(theme);
   return {
     "&:not([hidden])": {
       display: "flex"
@@ -5020,7 +5026,7 @@ function dialogStyle({ theme }) {
   };
 }
 function responsiveDialogPositionStyle(props) {
-  const { media } = props.theme.sanity.v2;
+  const { media } = getTheme_v2(props.theme);
   return _responsive(media, props.$position, (position) => ({ "&&": { position } }));
 }
 function animationDialogStyle(props) {
@@ -5699,7 +5705,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 } = getTheme_v2(props.theme), tone = color.selectable[$tone];
   return css`
     ${_cardColorStyle(color, tone.enabled)}
 
@@ -6044,7 +6050,7 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     }
   );
 }), Root$3 = styled(Skeleton)((props) => {
-  const { $size, $style } = props, { font, media } = props.theme.sanity.v2, fontStyle = font[$style];
+  const { $size, $style } = props, { font, media } = 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 };
@@ -6543,7 +6549,7 @@ function treeItemRootStyle() {
   `;
 }
 function treeItemRootColorStyle(props) {
-  const $tone = "default", { color } = props.theme.sanity.v2, tone = color.selectable[$tone];
+  const $tone = "default", { color } = getTheme_v2(props.theme), tone = color.selectable[$tone];
   return css`
     &[role='none'] {
       & > [role='treeitem'] {
@@ -6587,7 +6593,7 @@ function treeItemRootColorStyle(props) {
   `;
 }
 function treeItemBoxStyle(props) {
-  const { $level } = props, { space } = props.theme.sanity.v2;
+  const { $level } = props, { space } = getTheme_v2(props.theme);
   return css`
     padding-left: ${rem(space[2] * $level)};