@sanity/ui 3.4.5 → 3.5.0

package/dist/_chunks/{tabList.js → portalProvider.js}

@@ -1,16 +1,16 @@
-import { X as getTheme_v2, Z as createColorTheme$1, a as parseColor$1, c as rgbToHex$1, d as screen$1, f as multiply$1, l as rgbToHsl$1, n as buildTheme, o as hexToRgb$1, r as rgba$1, s as hslToRgb$1, t as getScopedTheme } from "./theme.js";
+import { a as createColorTheme$1, c as multiply$1, d as hexToRgb$1, f as hslToRgb$1, i as getTheme_v2, l as rgba$1, m as rgbToHsl$1, o as buildTheme, p as rgbToHex$1, s as screen$1, t as getScopedTheme, u as parseColor$1 } from "./getScopedTheme.js";
 import { c } from "react-compiler-runtime";
 import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useDebugValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { isValidElementType } from "react-is";
 import { ThemeProvider, css, keyframes, styled, useTheme } from "styled-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { isValidElementType } from "react-is";
 import { SpinnerIcon } from "@sanity/icons/Spinner";
-import { useEffectEvent } from "use-effect-event";
-import { ResizeObserver } from "@juggle/resize-observer";
 import { arrow, autoPlacement, autoUpdate, detectOverflow, flip, hide, offset, shift, useFloating } from "@floating-ui/react-dom";
 import { AnimatePresence, motion } from "motion/react";
+import { ResizeObserver } from "@juggle/resize-observer";
 import { createPortal } from "react-dom";
 import { CloseIcon } from "@sanity/icons/Close";
+import { useEffectEvent } from "use-effect-event";
 import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
 /**
 * @public
@@ -124,217 +124,6 @@ function _getResponsiveSpace(theme, props, spaceIndexes = EMPTY_ARRAY) {
 	let { media, space } = getTheme_v2(theme);
 	return _responsive(media, spaceIndexes, (spaceIndex) => _fillCSSObject(props, rem(space[spaceIndex])));
 }
-/**
-* A utility function getting responsive font styles.
-* @internal
-*/
-function responsiveFont(fontKey, props) {
-	let { $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: `${fontWeight}`,
-		padding: "1px 0",
-		margin: 0,
-		"&:before": {
-			content: "\"\"",
-			display: "block",
-			height: 0
-		},
-		"&:after": {
-			content: "\"\"",
-			display: "block",
-			height: 0
-		},
-		"& > code, & > span": { display: "block" },
-		"&:not([hidden])": { display: "block" }
-	};
-	return $size ? [base, ..._responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))] : (responsiveFont.warned ||= (console.warn("No size specified for responsive font", {
-		fontKey,
-		$size,
-		props,
-		base
-	}), !0), [base]);
-}
-function fontSize(size) {
-	let { ascenderHeight, descenderHeight, fontSize, iconSize, letterSpacing, lineHeight } = size, negHeight = ascenderHeight + descenderHeight, capHeight = lineHeight - negHeight, iconOffset = (capHeight - iconSize) / 2, customIconSize = Math.floor(fontSize * 1.125 / 2) * 2 + 1, customIconOffset = (capHeight - customIconSize) / 2;
-	return {
-		fontSize: rem(fontSize),
-		lineHeight: `calc(${lineHeight} / ${fontSize})`,
-		letterSpacing: rem(letterSpacing),
-		transform: `translateY(${rem(descenderHeight)})`,
-		"&:before": { marginTop: `calc(${rem(0 - negHeight)} - 1px)` },
-		"&:after": { marginBottom: "-1px" },
-		"& svg:not([data-sanity-icon])": {
-			fontSize: `calc(${customIconSize} / 16 * 1rem)`,
-			margin: rem(customIconOffset)
-		},
-		"& [data-sanity-icon]": {
-			fontSize: `calc(${iconSize} / 16 * 1rem)`,
-			margin: rem(iconOffset)
-		}
-	};
-}
-/**
-* Get responsive text align styles.
-* @internal
-*/
-function responsiveTextAlignStyle(props) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$align, (textAlign) => ({ textAlign }));
-}
-/**
-* Get responsive CSS for the `text` font style.
-* @internal
-*/
-function responsiveTextFont(props) {
-	return responsiveFont("text", props);
-}
-/**
-* Gets the global scope instance in a given environment.
-*
-* The strategy is to return the most modern, and if not, the most common:
-* - The `globalThis` variable is the modern approach to accessing the global scope
-* - The `window` variable is the global scope in a web browser
-* - The `self` variable is the global scope in workers and others
-* - The `global` variable is the global scope in Node.js
-*/
-function getGlobalScope() {
-	if (typeof globalThis < "u") return globalThis;
-	if (typeof window < "u") return window;
-	if (typeof self < "u") return self;
-	if (typeof global < "u") return global;
-	throw Error("@sanity/ui: could not locate global scope");
-}
-const globalScope = getGlobalScope();
-/**
-* As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions
-* it's critical that vital react contexts are shared even when there is a duplicate.
-* If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as
-* those libraries enforce single instances.
-* Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then
-* read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.
-* It's also why it's vital that all changes to globally scoped providers remain fully backwards compatible to v1.
-*/
-function createGlobalScopedContext(key, defaultValue) {
-	let symbol = Symbol.for(key);
-	/**
-	* Prevent errors about re-renders on React SSR on Next.js App Router
-	*/
-	if (typeof document > "u") {
-		let context = createContext(defaultValue);
-		return context.displayName = key, context;
-	}
-	return globalScope[symbol] = globalScope[symbol] || createContext(defaultValue), globalScope[symbol];
-}
-/**
-* @internal
-*/
-const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
-/**
-* @public
-*/
-function ThemeProvider$1(props) {
-	let $ = c(15), parentTheme = useContext(ThemeContext), { children } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default"), t0;
-	bb0: {
-		if (!rootTheme) {
-			t0 = null;
-			break bb0;
-		}
-		let t1;
-		$[0] !== rootTheme || $[1] !== scheme || $[2] !== tone ? (t1 = {
-			version: 0,
-			theme: rootTheme,
-			scheme,
-			tone
-		}, $[0] = rootTheme, $[1] = scheme, $[2] = tone, $[3] = t1) : t1 = $[3], t0 = t1;
-	}
-	let themeContext = t0, t1;
-	bb1: {
-		if (!rootTheme) {
-			t1 = null;
-			break bb1;
-		}
-		let t2;
-		$[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t2 = getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t2) : t2 = $[7], t1 = t2;
-	}
-	let theme = t1;
-	if (!theme) {
-		let t2;
-		return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx("pre", { children: "ThemeProvider: no \"theme\" property provided" }), $[8] = t2) : t2 = $[8], t2;
-	}
-	let t2;
-	$[9] !== children || $[10] !== theme ? (t2 = /* @__PURE__ */ jsx(ThemeProvider, {
-		theme,
-		children
-	}), $[9] = children, $[10] = theme, $[11] = t2) : t2 = $[11];
-	let t3;
-	return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ jsx(ThemeContext.Provider, {
-		value: themeContext,
-		children: t2
-	}), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
-}
-/**
-* @public
-*/
-function useRootTheme() {
-	let value = useContext(ThemeContext);
-	if (!value) throw Error("useRootTheme(): missing context value");
-	return value;
-}
-/**
-* @public
-*/
-function ThemeColorProvider(props) {
-	let $ = c(5), { children, scheme, tone } = props, root = useRootTheme(), t0 = scheme || root.scheme, t1;
-	return $[0] !== children || $[1] !== root.theme || $[2] !== t0 || $[3] !== tone ? (t1 = /* @__PURE__ */ jsx(ThemeProvider$1, {
-		scheme: t0,
-		theme: root.theme,
-		tone,
-		children
-	}), $[0] = children, $[1] = root.theme, $[2] = t0, $[3] = tone, $[4] = t1) : t1 = $[4], t1;
-}
-/**
-* @public
-*/
-function useTheme$1() {
-	return useTheme();
-}
-/**
-* @public
-*/
-function useTheme_v2() {
-	let $ = c(2), t0 = useTheme(), t1;
-	return $[0] === t0 ? t1 = $[1] : (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1), t1;
-}
-function responsiveBorderStyle() {
-	return [
-		border,
-		borderTop,
-		borderRight,
-		borderBottom,
-		borderLeft
-	];
-}
-function border(props) {
-	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-	return _responsive(media, props.$border, (value) => value ? { "&&": { border: borderStyle } } : { "&&": { border: 0 } });
-}
-function borderTop(props) {
-	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-	return _responsive(media, props.$borderTop, (value) => value ? { "&&": { borderTop: borderStyle } } : { "&&": { borderTop: 0 } });
-}
-function borderRight(props) {
-	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-	return _responsive(media, props.$borderRight, (value) => value ? { "&&": { borderRight: borderStyle } } : { "&&": { borderRight: 0 } });
-}
-function borderBottom(props) {
-	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-	return _responsive(media, props.$borderBottom, (value) => value ? { "&&": { borderBottom: borderStyle } } : { "&&": { borderBottom: 0 } });
-}
-function borderLeft(props) {
-	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-	return _responsive(media, props.$borderLeft, (value) => value ? { "&&": { borderLeft: borderStyle } } : { "&&": { borderLeft: 0 } });
-}
 const BASE_STYLE$3 = { "&[data-as=\"ul\"],&[data-as=\"ol\"]": { listStyle: "none" } }, BOX_SIZING = {
 	content: "content-box",
 	border: "border-box"
@@ -380,77 +169,34 @@ function responsiveFlexItemStyle(props) {
 	let { media } = getTheme_v2(props.theme);
 	return props.$flex ? _responsive(media, props.$flex, (flex) => ({ flex: `${flex}` })) : EMPTY_ARRAY;
 }
-const BASE_STYLE$1 = { "&&:not([hidden])": { display: "flex" } };
-function responsiveFlexStyle() {
+function responsiveGridItemStyle() {
 	return [
-		BASE_STYLE$1,
-		responsiveFlexAlignStyle,
-		responsiveFlexGapStyle,
-		responsiveFlexWrapStyle,
-		responsiveFlexJustifyStyle,
-		responsiveFlexDirectionStyle
+		responsiveGridItemRowStyle,
+		responsiveGridItemRowStartStyle,
+		responsiveGridItemRowEndStyle,
+		responsiveGridItemColumnStyle,
+		responsiveGridItemColumnStartStyle,
+		responsiveGridItemColumnEndStyle
 	];
 }
-function responsiveFlexAlignStyle(props) {
+const GRID_ITEM_ROW = {
+	auto: "auto",
+	full: "1 / -1"
+}, GRID_ITEM_COLUMN = {
+	auto: "auto",
+	full: "1 / -1"
+};
+function responsiveGridItemRowStyle(props) {
 	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$align, (align) => ({ alignItems: align }));
-}
-function responsiveFlexGapStyle(props) {
-	let { media, space } = getTheme_v2(props.theme);
-	return _responsive(media, props.$gap, (gap) => ({ gap: gap ? rem(space[gap]) : void 0 }));
+	return _responsive(media, props.$row, (row) => typeof row == "number" ? { gridRow: `span ${row} / span ${row}` } : { gridRow: GRID_ITEM_ROW[row] });
 }
-function responsiveFlexWrapStyle(props) {
+function responsiveGridItemRowStartStyle(props) {
 	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$wrap, (wrap) => ({ flexWrap: wrap }));
+	return _responsive(media, props.$rowStart, (rowStart) => ({ gridRowStart: `${rowStart}` }));
 }
-function responsiveFlexJustifyStyle(props) {
+function responsiveGridItemRowEndStyle(props) {
 	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$justify, (justify) => ({ justifyContent: justify }));
-}
-function responsiveFlexDirectionStyle(props) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$direction, (direction) => ({ flexDirection: direction }));
-}
-function focusRingBorderStyle(border) {
-	return `inset 0 0 0 ${border.width}px ${border.color}`;
-}
-function focusRingStyle(opts) {
-	let { base, border, focusRing } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
-	return [
-		focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
-		border && focusRingBorderStyle(border),
-		focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
-		focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`
-	].filter(Boolean).join(",");
-}
-function responsiveGridItemStyle() {
-	return [
-		responsiveGridItemRowStyle,
-		responsiveGridItemRowStartStyle,
-		responsiveGridItemRowEndStyle,
-		responsiveGridItemColumnStyle,
-		responsiveGridItemColumnStartStyle,
-		responsiveGridItemColumnEndStyle
-	];
-}
-const GRID_ITEM_ROW = {
-	auto: "auto",
-	full: "1 / -1"
-}, GRID_ITEM_COLUMN = {
-	auto: "auto",
-	full: "1 / -1"
-};
-function responsiveGridItemRowStyle(props) {
-	let { 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) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$rowStart, (rowStart) => ({ gridRowStart: `${rowStart}` }));
-}
-function responsiveGridItemRowEndStyle(props) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: `${rowEnd}` }));
+	return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: `${rowEnd}` }));
 }
 function responsiveGridItemColumnStyle(props) {
 	let { media } = getTheme_v2(props.theme);
@@ -464,130 +210,6 @@ function responsiveGridItemColumnEndStyle(props) {
 	let { media } = getTheme_v2(props.theme);
 	return _responsive(media, props.$columnEnd, (columnEnd) => ({ gridColumnEnd: `${columnEnd}` }));
 }
-const GRID_CSS = {
-	"&&:not([hidden])": { display: "grid" },
-	"&[data-as=\"ul\"],&[data-as=\"ol\"]": { listStyle: "none" }
-}, GRID_AUTO_COLUMS = {
-	auto: "auto",
-	min: "min-content",
-	max: "max-content",
-	fr: "minmax(0, 1fr)"
-}, GRID_AUTO_ROWS = {
-	auto: "auto",
-	min: "min-content",
-	max: "max-content",
-	fr: "minmax(0, 1fr)"
-};
-function responsiveGridStyle() {
-	return [
-		GRID_CSS,
-		responsiveGridAutoFlowStyle,
-		responsiveGridAutoRowsStyle,
-		responsiveGridAutoColsStyle,
-		responsiveGridColumnsStyle,
-		responsiveGridRowsStyle,
-		responsiveGridGapStyle,
-		responsiveGridGapXStyle,
-		responsiveGridGapYStyle
-	];
-}
-function responsiveGridAutoFlowStyle(props) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$autoFlow, (autoFlow) => ({ gridAutoFlow: autoFlow }));
-}
-function responsiveGridAutoRowsStyle(props) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$autoRows, (autoRows) => ({ gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows] }));
-}
-function responsiveGridAutoColsStyle(props) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$autoCols, (autoCols) => ({ gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols] }));
-}
-function responsiveGridColumnsStyle(props) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$columns, (columns) => ({ gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));` }));
-}
-function responsiveGridRowsStyle(props) {
-	let { media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$rows, (rows) => ({ gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));` }));
-}
-function responsiveGridGapStyle(props) {
-	let { media, space } = getTheme_v2(props.theme);
-	return _responsive(media, props.$gap, (gap) => ({ gridGap: gap ? rem(space[gap]) : void 0 }));
-}
-function responsiveGridGapXStyle(props) {
-	let { media, space } = getTheme_v2(props.theme);
-	return _responsive(media, props.$gapX, (gapX) => ({ columnGap: gapX ? rem(space[gapX]) : void 0 }));
-}
-function responsiveGridGapYStyle(props) {
-	let { media, space } = getTheme_v2(props.theme);
-	return _responsive(media, props.$gapY, (gapY) => ({ rowGap: gapY ? rem(space[gapY]) : void 0 }));
-}
-function responsiveInputPaddingStyle(props) {
-	let { $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) => {
-		let size = font.text.sizes[_fontSize[i]] || font.text.sizes[2], emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight, p = space[_padding[i]], s = space[_space[i]], styles = {
-			paddingTop: rem(p - size.ascenderHeight),
-			paddingRight: rem(p),
-			paddingBottom: rem(p - size.descenderHeight),
-			paddingLeft: rem(p)
-		};
-		return $iconRight && (styles.paddingRight = rem(p + emSize + s)), $iconLeft && (styles.paddingLeft = rem(p + emSize + s)), styles;
-	});
-}
-function responsiveInputPaddingIconRightStyle(props) {
-	return responsiveInputPaddingStyle({
-		...props,
-		$iconRight: !0
-	});
-}
-const ROOT_STYLE = css`&:not([hidden]){display:flex;}align-items:center;`;
-function textInputRootStyle() {
-	return ROOT_STYLE;
-}
-function textInputBaseStyle(props) {
-	let { $scheme, $tone, $weight } = props, { color, font } = getTheme_v2(props.theme);
-	return css`appearance:none;background:none;border:0;border-radius:0;outline:none;width:100%;box-sizing:border-box;font-family:${font.text.family};font-weight:${$weight && font.text.weights[$weight] || font.text.weights.regular};margin:0;position:relative;z-index:1;display:block;&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-text-fill-color:var(--input-fg-color) !important;transition:background-color 5000s;transition-delay:86400s;}&[data-as='textarea']{resize:none;}color:var(--input-fg-color);&::placeholder{color:var(--input-placeholder-color);}&[data-scheme='${$scheme}'][data-tone='${$tone}']{--input-fg-color:${color.input.default.enabled.fg};--input-placeholder-color:${color.input.default.enabled.placeholder};&:not(:invalid):not(:disabled):not(:read-only){--input-fg-color:${color.input.default.enabled.fg};--input-placeholder-color:${color.input.default.enabled.placeholder};}&:not(:invalid):disabled{--input-fg-color:${color.input.default.disabled.fg};--input-placeholder-color:${color.input.default.disabled.placeholder};}&:invalid{--input-fg-color:${color.input.invalid.enabled.fg};--input-placeholder-color:${color.input.invalid.enabled.placeholder};}&:read-only{--input-fg-color:${color.input.default.readOnly.fg};--input-placeholder-color:${color.input.default.readOnly.placeholder};}}`;
-}
-function textInputFontSizeStyle(props) {
-	let { font, media } = getTheme_v2(props.theme);
-	return _responsive(media, props.$fontSize, (sizeIndex) => {
-		let size = font.text.sizes[sizeIndex] || font.text.sizes[2];
-		return {
-			fontSize: rem(size.fontSize),
-			lineHeight: `${size.lineHeight / size.fontSize}`
-		};
-	});
-}
-function textInputRepresentationStyle(props) {
-	let { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props, { color, input } = getTheme_v2(props.theme);
-	return css`--input-box-shadow:none;position:absolute;top:0;left:0;right:0;bottom:0;display:block;pointer-events:none;z-index:0;background-color:var(--card-bg-color);box-shadow:var(--input-box-shadow);border-top-left-radius:${$hasPrefix ? 0 : void 0};border-bottom-left-radius:${$hasPrefix ? 0 : void 0};border-top-right-radius:${$hasSuffix ? 0 : void 0};border-bottom-right-radius:${$hasSuffix ? 0 : void 0};&[data-scheme='${$scheme}'][data-tone='${$tone}']{--card-bg-color:${color.input.default.enabled.bg};--card-fg-color:${color.input.default.enabled.fg};*:not(:disabled) + &[data-border]{--input-box-shadow:${focusRingBorderStyle({
-		color: color.input.default.enabled.border,
-		width: input.border.width
-	})};}*:not(:disabled):invalid + &{--card-bg-color:${color.input.invalid.enabled.bg};--card-fg-color:${color.input.invalid.enabled.fg};&[data-border]{--input-box-shadow:${focusRingBorderStyle({
-		color: color.input.invalid.enabled.border,
-		width: input.border.width
-	})};}}*:not(:disabled):focus + &{&[data-border]{--input-box-shadow:${$unstableDisableFocusRing ? void 0 : focusRingStyle({
-		border: {
-			color: color.input.default.enabled.border,
-			width: input.border.width
-		},
-		focusRing: input.text.focusRing
-	})};}&:not([data-border]){--input-box-shadow:${$unstableDisableFocusRing ? void 0 : focusRingStyle({ focusRing: input.text.focusRing })};}}*:not(:invalid):disabled + &{--card-bg-color:${color.input.default.disabled.bg} !important;--card-fg-color:${color.input.default.disabled.fg} !important;--card-icon-color:${color.input.default.disabled.fg} !important;&[data-border]{--input-box-shadow:${focusRingBorderStyle({
-		color: color.input.default.disabled.border,
-		width: input.border.width
-	})};}}*:invalid:disabled + &{--card-bg-color:${color.input.invalid.disabled.bg} !important;--card-fg-color:${color.input.invalid.disabled.fg} !important;--card-icon-color:${color.input.invalid.disabled.fg} !important;&[data-border]{--input-box-shadow:${focusRingBorderStyle({
-		color: color.input.invalid.disabled.border,
-		width: input.border.width
-	})};}}*:not(:invalid):read-only + &{--card-bg-color:${color.input.default.readOnly.bg} !important;--card-fg-color:${color.input.default.readOnly.fg} !important;}*:invalid:read-only + &{--card-bg-color:${color.input.invalid.readOnly.bg} !important;--card-fg-color:${color.input.invalid.readOnly.fg} !important;}@media (hover:hover){*:not(:disabled):not(:read-only):not(:invalid):hover + &{--card-bg-color:${color.input.default.hovered.bg};--card-fg-color:${color.input.default.hovered.fg};}*:invalid:not(:disabled):not(:read-only):hover + &{--card-bg-color:${color.input.invalid.hovered.bg};--card-fg-color:${color.input.invalid.hovered.fg};}*:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border]{--input-box-shadow:${focusRingBorderStyle({
-		color: color.input.default.hovered.border,
-		width: input.border.width
-	})};}*:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border]{--input-box-shadow:${focusRingBorderStyle({
-		color: color.input.invalid.hovered.border,
-		width: input.border.width
-	})};}}}`;
-}
 function responsiveMarginStyle(props) {
 	let { theme } = props;
 	return [
@@ -612,30 +234,9 @@ function responsivePaddingStyle(props) {
 		_getResponsiveSpace(theme, ["paddingLeft"], props.$paddingLeft)
 	].filter(Boolean);
 }
-function responsiveRadiusStyle(props) {
-	let { 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 };
-	});
-}
-function toBoxShadow(shadow, color) {
-	return `${shadow.map(rem).join(" ")} ${color}`;
-}
-function shadowStyle(shadow, outlineWidth = 1) {
-	return shadow ? { boxShadow: `${`0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`}, ${toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)")}, ${toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)")}, ${toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)")}` } : EMPTY_RECORD;
-}
-function responsiveShadowStyle(props) {
-	let { card, media, shadow } = getTheme_v2(props.theme);
-	return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
-}
-/** @internal */
-const SpanWithTextOverflow = styled.span.withConfig({
-	displayName: "SpanWithTextOverflow",
-	componentId: "sc-xkyu3h-0"
-})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, StyledBox = /* @__PURE__ */ styled.div.withConfig({
+const StyledBox = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledBox",
-	componentId: "sc-yj6ffl-0"
+	componentId: "sc-p4sc7t-0"
 })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function Box(props, ref) {
 	let $ = c(115), deprecated_column, deprecated_columnEnd, deprecated_columnStart, deprecated_row, deprecated_rowEnd, deprecated_rowStart, flex, gridColumn, gridColumnEnd, gridColumnStart, gridRow, gridRowEnd, gridRowStart, height, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, restProps, sizing, t0, t1, t2, t3;
 	$[0] === props ? (deprecated_column = $[1], deprecated_columnEnd = $[2], deprecated_columnStart = $[3], deprecated_row = $[4], deprecated_rowEnd = $[5], deprecated_rowStart = $[6], flex = $[7], gridColumn = $[8], gridColumnEnd = $[9], gridColumnStart = $[10], gridRow = $[11], gridRowEnd = $[12], gridRowStart = $[13], height = $[14], marginBottom = $[15], marginLeft = $[16], marginRight = $[17], marginTop = $[18], marginX = $[19], marginY = $[20], overflow = $[21], paddingBottom = $[22], paddingLeft = $[23], paddingRight = $[24], paddingTop = $[25], paddingX = $[26], paddingY = $[27], restProps = $[28], sizing = $[29], t0 = $[30], t1 = $[31], t2 = $[32], t3 = $[33]) : ({as: t0, gridColumn, column: deprecated_column, gridColumnStart, columnStart: deprecated_columnStart, gridColumnEnd, columnEnd: deprecated_columnEnd, display: t1, flex, height, margin: t2, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, padding: t3, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, gridRow, row: deprecated_row, gridRowStart, rowStart: deprecated_rowStart, gridRowEnd, rowEnd: deprecated_rowEnd, sizing, ...restProps} = props, $[0] = props, $[1] = deprecated_column, $[2] = deprecated_columnEnd, $[3] = deprecated_columnStart, $[4] = deprecated_row, $[5] = deprecated_rowEnd, $[6] = deprecated_rowStart, $[7] = flex, $[8] = gridColumn, $[9] = gridColumnEnd, $[10] = gridColumnStart, $[11] = gridRow, $[12] = gridRowEnd, $[13] = gridRowStart, $[14] = height, $[15] = marginBottom, $[16] = marginLeft, $[17] = marginRight, $[18] = marginTop, $[19] = marginX, $[20] = marginY, $[21] = overflow, $[22] = paddingBottom, $[23] = paddingLeft, $[24] = paddingRight, $[25] = paddingTop, $[26] = paddingX, $[27] = paddingY, $[28] = restProps, $[29] = sizing, $[30] = t0, $[31] = t1, $[32] = t2, $[33] = t3);
@@ -724,73 +325,195 @@ const SpanWithTextOverflow = styled.span.withConfig({
 		children: props.children
 	}), $[84] = asProp, $[85] = props.children, $[86] = ref, $[87] = restProps, $[88] = t10, $[89] = t11, $[90] = t12, $[91] = t13, $[92] = t14, $[93] = t15, $[94] = t16, $[95] = t17, $[96] = t18, $[97] = t19, $[98] = t20, $[99] = t21, $[100] = t22, $[101] = t23, $[102] = t24, $[103] = t25, $[104] = t26, $[105] = t27, $[106] = t28, $[107] = t29, $[108] = t4, $[109] = t5, $[110] = t6, $[111] = t7, $[112] = t8, $[113] = t9, $[114] = t30) : t30 = $[114], t30;
 });
-function textBaseStyle(props) {
-	let { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
-	return css`color:var(--card-fg-color);${$accent && css`color:var(--card-accent-fg-color);`} ${$muted && css`color:var(--card-muted-fg-color);`} & code{font-family:${font.code.family};border-radius:1px;background-color:var(--card-code-bg-color);color:var(--card-code-fg-color);}& a{text-decoration:none;border-radius:1px;color:var(--card-link-color);outline:none;@media (hover:hover){&:hover{text-decoration:underline;}}&:focus{box-shadow:0 0 0 1px var(--card-bg-color),0 0 0 3px var(--card-focus-ring-color);}&:focus:not(:focus-visible){box-shadow:none;}}& strong{font-weight:${font.text.weights.bold};}& svg{display:inline;}& [data-sanity-icon]{vertical-align:baseline;color:var(--card-icon-color);& path{vector-effect:non-scaling-stroke !important;}}`;
+function responsiveRadiusStyle(props) {
+	let { 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 };
+	});
 }
-const StyledText = /* @__PURE__ */ styled.div.withConfig({
-	displayName: "StyledText",
-	componentId: "sc-d4ufel-0"
-})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = forwardRef(function Text(props, ref) {
-	let $ = c(26), align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
-	$[0] === props ? (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]) : ({accent: t0, align, children: childrenProp, muted: t1, size: t2, textOverflow, weight, ...restProps} = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight);
-	let accent = t0 !== void 0 && t0, muted = t1 !== void 0 && t1, size = t2 === void 0 ? 2 : t2, children = childrenProp;
-	if (textOverflow === "ellipsis") {
-		let t3;
-		$[9] === children ? t3 = $[10] : (t3 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t3), children = t3;
-	}
-	let t3;
-	$[11] === align ? t3 = $[12] : (t3 = _getArrayProp(align), $[11] = align, $[12] = t3);
-	let t4;
-	$[13] === size ? t4 = $[14] : (t4 = _getArrayProp(size), $[13] = size, $[14] = t4);
-	let t5;
-	$[15] === children ? t5 = $[16] : (t5 = /* @__PURE__ */ jsx("span", { children }), $[15] = children, $[16] = t5);
-	let t6;
-	return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ jsx(StyledText, {
-		"data-ui": "Text",
-		...restProps,
-		$accent: accent,
-		$align: t3,
-		$muted: muted,
-		ref,
-		$size: t4,
-		$weight: weight,
-		children: t5
-	}), $[17] = accent, $[18] = muted, $[19] = ref, $[20] = restProps, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = weight, $[25] = t6) : t6 = $[25], t6;
-}), StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
-	displayName: "StyledFlex",
-	componentId: "sc-ux9uze-0"
-})(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function Flex(props, ref) {
-	let $ = c(27), align, as, gap, justify, restProps, t0, wrap;
-	$[0] === props ? (align = $[1], as = $[2], gap = $[3], justify = $[4], restProps = $[5], t0 = $[6], wrap = $[7]) : ({align, as, direction: t0, gap, justify, wrap, ...restProps} = props, $[0] = props, $[1] = align, $[2] = as, $[3] = gap, $[4] = justify, $[5] = restProps, $[6] = t0, $[7] = wrap);
-	let direction = t0 === void 0 ? "row" : t0, t1;
-	$[8] === align ? t1 = $[9] : (t1 = _getArrayProp(align), $[8] = align, $[9] = t1);
-	let t2;
-	$[10] === direction ? t2 = $[11] : (t2 = _getArrayProp(direction), $[10] = direction, $[11] = t2);
-	let t3;
-	$[12] === gap ? t3 = $[13] : (t3 = _getArrayProp(gap), $[12] = gap, $[13] = t3);
-	let t4;
-	$[14] === justify ? t4 = $[15] : (t4 = _getArrayProp(justify), $[14] = justify, $[15] = t4);
-	let t5;
-	$[16] === wrap ? t5 = $[17] : (t5 = _getArrayProp(wrap), $[16] = wrap, $[17] = t5);
-	let t6;
-	return $[18] !== as || $[19] !== ref || $[20] !== restProps || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledFlex, {
-		"data-ui": "Flex",
-		...restProps,
-		$align: t1,
-		$direction: t2,
-		$gap: t3,
-		$justify: t4,
-		$wrap: t5,
-		forwardedAs: as,
-		ref
-	}), $[18] = as, $[19] = ref, $[20] = restProps, $[21] = t1, $[22] = t2, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = t6) : t6 = $[26], t6;
-}), rotate = keyframes`from{transform:rotate(0deg);}to{transform:rotate(360deg);}`, StyledSpinner = styled(Text).withConfig({
-	displayName: "StyledSpinner",
-	componentId: "sc-10l2iw-0"
-})`& > span > svg{animation:${rotate} 500ms linear infinite;}`, Spinner = forwardRef(function Spinner(props, ref) {
-	let $ = c(4), t0;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
+/**
+* @public
+*/
+function useTheme$1() {
+	return useTheme();
+}
+/**
+* @public
+*/
+function useTheme_v2() {
+	let $ = c(2), t0 = useTheme(), t1;
+	return $[0] === t0 ? t1 = $[1] : (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1), t1;
+}
+const BASE_STYLE$1 = { "&&:not([hidden])": { display: "flex" } };
+function responsiveFlexStyle() {
+	return [
+		BASE_STYLE$1,
+		responsiveFlexAlignStyle,
+		responsiveFlexGapStyle,
+		responsiveFlexWrapStyle,
+		responsiveFlexJustifyStyle,
+		responsiveFlexDirectionStyle
+	];
+}
+function responsiveFlexAlignStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$align, (align) => ({ alignItems: align }));
+}
+function responsiveFlexGapStyle(props) {
+	let { media, space } = getTheme_v2(props.theme);
+	return _responsive(media, props.$gap, (gap) => ({ gap: gap ? rem(space[gap]) : void 0 }));
+}
+function responsiveFlexWrapStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$wrap, (wrap) => ({ flexWrap: wrap }));
+}
+function responsiveFlexJustifyStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$justify, (justify) => ({ justifyContent: justify }));
+}
+function responsiveFlexDirectionStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$direction, (direction) => ({ flexDirection: direction }));
+}
+const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
+	displayName: "StyledFlex",
+	componentId: "sc-5lzqa2-0"
+})(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function Flex(props, ref) {
+	let $ = c(27), align, as, gap, justify, restProps, t0, wrap;
+	$[0] === props ? (align = $[1], as = $[2], gap = $[3], justify = $[4], restProps = $[5], t0 = $[6], wrap = $[7]) : ({align, as, direction: t0, gap, justify, wrap, ...restProps} = props, $[0] = props, $[1] = align, $[2] = as, $[3] = gap, $[4] = justify, $[5] = restProps, $[6] = t0, $[7] = wrap);
+	let direction = t0 === void 0 ? "row" : t0, t1;
+	$[8] === align ? t1 = $[9] : (t1 = _getArrayProp(align), $[8] = align, $[9] = t1);
+	let t2;
+	$[10] === direction ? t2 = $[11] : (t2 = _getArrayProp(direction), $[10] = direction, $[11] = t2);
+	let t3;
+	$[12] === gap ? t3 = $[13] : (t3 = _getArrayProp(gap), $[12] = gap, $[13] = t3);
+	let t4;
+	$[14] === justify ? t4 = $[15] : (t4 = _getArrayProp(justify), $[14] = justify, $[15] = t4);
+	let t5;
+	$[16] === wrap ? t5 = $[17] : (t5 = _getArrayProp(wrap), $[16] = wrap, $[17] = t5);
+	let t6;
+	return $[18] !== as || $[19] !== ref || $[20] !== restProps || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledFlex, {
+		"data-ui": "Flex",
+		...restProps,
+		$align: t1,
+		$direction: t2,
+		$gap: t3,
+		$justify: t4,
+		$wrap: t5,
+		forwardedAs: as,
+		ref
+	}), $[18] = as, $[19] = ref, $[20] = restProps, $[21] = t1, $[22] = t2, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = t6) : t6 = $[26], t6;
+});
+/**
+* Get responsive text align styles.
+* @internal
+*/
+function responsiveTextAlignStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$align, (textAlign) => ({ textAlign }));
+}
+/**
+* A utility function getting responsive font styles.
+* @internal
+*/
+function responsiveFont(fontKey, props) {
+	let { $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: `${fontWeight}`,
+		padding: "1px 0",
+		margin: 0,
+		"&:before": {
+			content: "\"\"",
+			display: "block",
+			height: 0
+		},
+		"&:after": {
+			content: "\"\"",
+			display: "block",
+			height: 0
+		},
+		"& > code, & > span": { display: "block" },
+		"&:not([hidden])": { display: "block" }
+	};
+	return $size ? [base, ..._responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))] : (responsiveFont.warned ||= (console.warn("No size specified for responsive font", {
+		fontKey,
+		$size,
+		props,
+		base
+	}), !0), [base]);
+}
+function fontSize(size) {
+	let { ascenderHeight, descenderHeight, fontSize, iconSize, letterSpacing, lineHeight } = size, negHeight = ascenderHeight + descenderHeight, capHeight = lineHeight - negHeight, iconOffset = (capHeight - iconSize) / 2, customIconSize = Math.floor(fontSize * 1.125 / 2) * 2 + 1, customIconOffset = (capHeight - customIconSize) / 2;
+	return {
+		fontSize: rem(fontSize),
+		lineHeight: `calc(${lineHeight} / ${fontSize})`,
+		letterSpacing: rem(letterSpacing),
+		transform: `translateY(${rem(descenderHeight)})`,
+		"&:before": { marginTop: `calc(${rem(0 - negHeight)} - 1px)` },
+		"&:after": { marginBottom: "-1px" },
+		"& svg:not([data-sanity-icon])": {
+			fontSize: `calc(${customIconSize} / 16 * 1rem)`,
+			margin: rem(customIconOffset)
+		},
+		"& [data-sanity-icon]": {
+			fontSize: `calc(${iconSize} / 16 * 1rem)`,
+			margin: rem(iconOffset)
+		}
+	};
+}
+/**
+* Get responsive CSS for the `text` font style.
+* @internal
+*/
+function responsiveTextFont(props) {
+	return responsiveFont("text", props);
+}
+/** @internal */
+const SpanWithTextOverflow = styled.span.withConfig({
+	displayName: "SpanWithTextOverflow",
+	componentId: "sc-xkyu3h-0"
+})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`;
+function textBaseStyle(props) {
+	let { $accent, $muted } = props, { font } = getTheme_v2(props.theme);
+	return css`color:var(--card-fg-color);${$accent && css`color:var(--card-accent-fg-color);`} ${$muted && css`color:var(--card-muted-fg-color);`} & code{font-family:${font.code.family};border-radius:1px;background-color:var(--card-code-bg-color);color:var(--card-code-fg-color);}& a{text-decoration:none;border-radius:1px;color:var(--card-link-color);outline:none;@media (hover:hover){&:hover{text-decoration:underline;}}&:focus{box-shadow:0 0 0 1px var(--card-bg-color),0 0 0 3px var(--card-focus-ring-color);}&:focus:not(:focus-visible){box-shadow:none;}}& strong{font-weight:${font.text.weights.bold};}& svg{display:inline;}& [data-sanity-icon]{vertical-align:baseline;color:var(--card-icon-color);& path{vector-effect:non-scaling-stroke !important;}}`;
+}
+const StyledText = /* @__PURE__ */ styled.div.withConfig({
+	displayName: "StyledText",
+	componentId: "sc-m7q2yn-0"
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = forwardRef(function Text(props, ref) {
+	let $ = c(26), align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
+	$[0] === props ? (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]) : ({accent: t0, align, children: childrenProp, muted: t1, size: t2, textOverflow, weight, ...restProps} = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight);
+	let accent = t0 !== void 0 && t0, muted = t1 !== void 0 && t1, size = t2 === void 0 ? 2 : t2, children = childrenProp;
+	if (textOverflow === "ellipsis") {
+		let t3;
+		$[9] === children ? t3 = $[10] : (t3 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t3), children = t3;
+	}
+	let t3;
+	$[11] === align ? t3 = $[12] : (t3 = _getArrayProp(align), $[11] = align, $[12] = t3);
+	let t4;
+	$[13] === size ? t4 = $[14] : (t4 = _getArrayProp(size), $[13] = size, $[14] = t4);
+	let t5;
+	$[15] === children ? t5 = $[16] : (t5 = /* @__PURE__ */ jsx("span", { children }), $[15] = children, $[16] = t5);
+	let t6;
+	return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ jsx(StyledText, {
+		"data-ui": "Text",
+		...restProps,
+		$accent: accent,
+		$align: t3,
+		$muted: muted,
+		ref,
+		$size: t4,
+		$weight: weight,
+		children: t5
+	}), $[17] = accent, $[18] = muted, $[19] = ref, $[20] = restProps, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = weight, $[25] = t6) : t6 = $[25], t6;
+}), rotate = keyframes`from{transform:rotate(0deg);}to{transform:rotate(360deg);}`, StyledSpinner = styled(Text).withConfig({
+	displayName: "StyledSpinner",
+	componentId: "sc-k51eu1-0"
+})`& > span > svg{animation:${rotate} 500ms linear infinite;}`, Spinner = forwardRef(function Spinner(props, ref) {
+	let $ = c(4), t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
 	let t1;
 	return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ jsx(StyledSpinner, {
 		"data-ui": "Spinner",
@@ -878,6 +601,18 @@ function _cardColorStyle(base, color, checkered = !1) {
 		"--card-hairline-hard-color": color.border
 	};
 }
+function focusRingBorderStyle(border) {
+	return `inset 0 0 0 ${border.width}px ${border.color}`;
+}
+function focusRingStyle(opts) {
+	let { base, border, focusRing } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
+	return [
+		focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
+		border && focusRingBorderStyle(border),
+		focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
+		focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`
+	].filter(Boolean).join(",");
+}
 /**
 * @internal
 */
@@ -929,10 +664,10 @@ function buttonColorStyles(props) {
 }
 const StyledButton = /* @__PURE__ */ styled.button.withConfig({
 	displayName: "StyledButton",
-	componentId: "sc-rwh0gh-0"
+	componentId: "sc-5eghxe-0"
 })(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div.withConfig({
 	displayName: "LoadingBox",
-	componentId: "sc-rwh0gh-1"
+	componentId: "sc-5eghxe-1"
 })`position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:var(--card-bg-color);border-radius:inherit;z-index:1;box-shadow:inherit;`, Button = forwardRef(function Button(props, ref) {
 	let $ = c(87), IconComponent, IconRightComponent, children, disabled, gap, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, textWeight, width;
 	$[0] === props ? (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], gap = $[5], loading = $[6], paddingBottomProp = $[7], paddingLeftProp = $[8], paddingRightProp = $[9], paddingTopProp = $[10], paddingXProp = $[11], paddingYProp = $[12], restProps = $[13], selected = $[14], t0 = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21], t7 = $[22], t8 = $[23], text = $[24], textAlign = $[25], textWeight = $[26], width = $[27]) : ({children, disabled, fontSize: t0, icon: IconComponent, iconRight: IconRightComponent, justify: t1, loading, mode: t2, padding: t3, paddingX: paddingXProp, paddingY: paddingYProp, paddingTop: paddingTopProp, paddingBottom: paddingBottomProp, paddingLeft: paddingLeftProp, paddingRight: paddingRightProp, radius: t4, selected, gap, space: t5, text, textAlign, textWeight, tone: t6, type: t7, muted: t8, width, ...restProps} = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = gap, $[6] = loading, $[7] = paddingBottomProp, $[8] = paddingLeftProp, $[9] = paddingRightProp, $[10] = paddingTopProp, $[11] = paddingXProp, $[12] = paddingYProp, $[13] = restProps, $[14] = selected, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7, $[23] = t8, $[24] = text, $[25] = textAlign, $[26] = textWeight, $[27] = width);
@@ -1022,63 +757,206 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
 		]
 	}), $[73] = mode, $[74] = radius, $[75] = ref, $[76] = restProps, $[77] = t21, $[78] = t22, $[79] = t23, $[80] = t24, $[81] = t25, $[82] = t26, $[83] = tone, $[84] = type, $[85] = width, $[86] = t27) : t27 = $[86], t27;
 });
-function cardStyle(props) {
-	return [cardBaseStyle(props), cardColorStyle(props)];
+function responsiveBorderStyle() {
+	return [
+		border,
+		borderTop,
+		borderRight,
+		borderBottom,
+		borderLeft
+	];
 }
-function cardBaseStyle(props) {
-	let { $checkered } = props, { space } = getTheme_v2(props.theme);
-	return css`${$checkered && css`background-size:${space[3]}px ${space[3]}px;background-position:50% 50%;background-image:var(--card-bg-image);`} &[data-as='button']{-webkit-font-smoothing:inherit;appearance:none;outline:none;font:inherit;text-align:inherit;border:0;width:-moz-available;width:-webkit-fill-available;width:stretch;}&[data-as='a']{outline:none;text-decoration:none;}&[data-as='pre']{font:inherit;}`;
+function border(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$border, (value) => value ? { "&&": { border: borderStyle } } : { "&&": { border: 0 } });
 }
-function cardColorStyle(props) {
-	let { $checkered, $focusRing, $muted } = props, { card, color, style } = getTheme_v2(props.theme), border = {
-		width: card.border.width,
-		color: "var(--card-border-color)"
-	};
-	return css`color-scheme:${color._dark ? "dark" : "light"};${_cardColorStyle(color, color, $checkered)} background-color:${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};color:var(--card-fg-color);&[data-as='button']{--card-focus-ring-box-shadow:none;cursor:default;box-shadow:var(--card-focus-ring-box-shadow);&:disabled{${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}}&:not(:disabled){&[data-pressed]{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}&[data-selected]{${_cardColorStyle(color, color.selectable.default.selected, $checkered)}}@media (hover:hover){&:not([data-pressed]):not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}}&:active{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}}}&:focus-visible{--card-focus-ring-box-shadow:${$focusRing ? focusRingStyle({
-		base: color,
-		border,
-		focusRing: card.focusRing
-	}) : void 0};}}}&[data-as='a']{cursor:pointer;box-shadow:var(--card-focus-ring-box-shadow);&[data-disabled]{${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}}&:not([data-disabled]){&[data-pressed]{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}&[data-selected]{${_cardColorStyle(color, color.selectable.default.selected, $checkered)}}@media (hover:hover){&:not([data-pressed]):not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}}&:active{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}}}&:focus-visible{--card-focus-ring-box-shadow:${$focusRing ? focusRingStyle({
-		base: color,
-		border,
-		focusRing: card.focusRing
-	}) : void 0};}}}${style?.card?.root}`;
+function borderTop(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$borderTop, (value) => value ? { "&&": { borderTop: borderStyle } } : { "&&": { borderTop: 0 } });
 }
-const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
-	displayName: "StyledCard",
-	componentId: "sc-p2pbep-0"
-})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function Card(props, ref) {
-	let $ = c(56), asProp, border, borderBottom, borderLeft, borderRight, borderTop, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
-	$[0] === props ? (asProp = $[1], border = $[2], borderBottom = $[3], borderLeft = $[4], borderRight = $[5], borderTop = $[6], muted = $[7], pressed = $[8], restProps = $[9], scheme = $[10], selected = $[11], shadow = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[16]) : ({__unstable_checkered: t0, __unstable_focusRing: t1, as: asProp, border, borderTop, borderRight, borderBottom, borderLeft, muted, pressed, radius: t2, scheme, selected, shadow, tone: t3, ...restProps} = props, $[0] = props, $[1] = asProp, $[2] = border, $[3] = borderBottom, $[4] = borderLeft, $[5] = borderRight, $[6] = borderTop, $[7] = muted, $[8] = pressed, $[9] = restProps, $[10] = scheme, $[11] = selected, $[12] = shadow, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3);
-	let checkered = t0 !== void 0 && t0, focusRing = t1 !== void 0 && t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6;
-	$[17] === border ? t6 = $[18] : (t6 = _getArrayProp(border), $[17] = border, $[18] = t6);
-	let t7;
-	$[19] === borderTop ? t7 = $[20] : (t7 = _getArrayProp(borderTop), $[19] = borderTop, $[20] = t7);
-	let t8;
-	$[21] === borderRight ? t8 = $[22] : (t8 = _getArrayProp(borderRight), $[21] = borderRight, $[22] = t8);
-	let t9;
-	$[23] === borderBottom ? t9 = $[24] : (t9 = _getArrayProp(borderBottom), $[23] = borderBottom, $[24] = t9);
-	let t10;
-	$[25] === borderLeft ? t10 = $[26] : (t10 = _getArrayProp(borderLeft), $[25] = borderLeft, $[26] = t10);
-	let t11;
-	$[27] === radius ? t11 = $[28] : (t11 = _getArrayProp(radius), $[27] = radius, $[28] = t11);
-	let t12;
-	$[29] === shadow ? t12 = $[30] : (t12 = _getArrayProp(shadow), $[29] = shadow, $[30] = t12);
-	let t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0, t16;
-	$[31] !== as || $[32] !== checkered || $[33] !== focusRing || $[34] !== muted || $[35] !== ref || $[36] !== restProps || $[37] !== rootTheme.scheme || $[38] !== selected || $[39] !== t10 || $[40] !== t11 || $[41] !== t12 || $[42] !== t13 || $[43] !== t14 || $[44] !== t15 || $[45] !== t4 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8 || $[49] !== t9 || $[50] !== tone ? (t16 = /* @__PURE__ */ jsx(StyledCard, {
-		"data-as": t4,
-		"data-scheme": t5,
-		"data-ui": "Card",
-		"data-tone": tone,
-		...restProps,
-		$border: t6,
-		$borderTop: t7,
-		$borderRight: t8,
-		$borderBottom: t9,
-		$borderLeft: t10,
-		$checkered: checkered,
-		$focusRing: focusRing,
-		$muted: muted,
+function borderRight(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$borderRight, (value) => value ? { "&&": { borderRight: borderStyle } } : { "&&": { borderRight: 0 } });
+}
+function borderBottom(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$borderBottom, (value) => value ? { "&&": { borderBottom: borderStyle } } : { "&&": { borderBottom: 0 } });
+}
+function borderLeft(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$borderLeft, (value) => value ? { "&&": { borderLeft: borderStyle } } : { "&&": { borderLeft: 0 } });
+}
+function toBoxShadow(shadow, color) {
+	return `${shadow.map(rem).join(" ")} ${color}`;
+}
+function shadowStyle(shadow, outlineWidth = 1) {
+	return shadow ? { boxShadow: `${`0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`}, ${toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)")}, ${toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)")}, ${toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)")}` } : EMPTY_RECORD;
+}
+function responsiveShadowStyle(props) {
+	let { card, media, shadow } = getTheme_v2(props.theme);
+	return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
+}
+/**
+* Gets the global scope instance in a given environment.
+*
+* The strategy is to return the most modern, and if not, the most common:
+* - The `globalThis` variable is the modern approach to accessing the global scope
+* - The `window` variable is the global scope in a web browser
+* - The `self` variable is the global scope in workers and others
+* - The `global` variable is the global scope in Node.js
+*/
+function getGlobalScope() {
+	if (typeof globalThis < "u") return globalThis;
+	if (typeof window < "u") return window;
+	if (typeof self < "u") return self;
+	if (typeof global < "u") return global;
+	throw Error("@sanity/ui: could not locate global scope");
+}
+const globalScope = getGlobalScope();
+/**
+* As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions
+* it's critical that vital react contexts are shared even when there is a duplicate.
+* If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as
+* those libraries enforce single instances.
+* Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then
+* read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.
+* It's also why it's vital that all changes to globally scoped providers remain fully backwards compatible to v1.
+*/
+function createGlobalScopedContext(key, defaultValue) {
+	let symbol = Symbol.for(key);
+	/**
+	* Prevent errors about re-renders on React SSR on Next.js App Router
+	*/
+	if (typeof document > "u") {
+		let context = createContext(defaultValue);
+		return context.displayName = key, context;
+	}
+	return globalScope[symbol] = globalScope[symbol] || createContext(defaultValue), globalScope[symbol];
+}
+/**
+* @internal
+*/
+const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
+/**
+* @public
+*/
+function ThemeProvider$1(props) {
+	let $ = c(15), parentTheme = useContext(ThemeContext), { children } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default"), t0;
+	bb0: {
+		if (!rootTheme) {
+			t0 = null;
+			break bb0;
+		}
+		let t1;
+		$[0] !== rootTheme || $[1] !== scheme || $[2] !== tone ? (t1 = {
+			version: 0,
+			theme: rootTheme,
+			scheme,
+			tone
+		}, $[0] = rootTheme, $[1] = scheme, $[2] = tone, $[3] = t1) : t1 = $[3], t0 = t1;
+	}
+	let themeContext = t0, t1;
+	bb1: {
+		if (!rootTheme) {
+			t1 = null;
+			break bb1;
+		}
+		let t2;
+		$[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t2 = getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t2) : t2 = $[7], t1 = t2;
+	}
+	let theme = t1;
+	if (!theme) {
+		let t2;
+		return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx("pre", { children: "ThemeProvider: no \"theme\" property provided" }), $[8] = t2) : t2 = $[8], t2;
+	}
+	let t2;
+	$[9] !== children || $[10] !== theme ? (t2 = /* @__PURE__ */ jsx(ThemeProvider, {
+		theme,
+		children
+	}), $[9] = children, $[10] = theme, $[11] = t2) : t2 = $[11];
+	let t3;
+	return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: themeContext,
+		children: t2
+	}), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
+}
+/**
+* @public
+*/
+function useRootTheme() {
+	let value = useContext(ThemeContext);
+	if (!value) throw Error("useRootTheme(): missing context value");
+	return value;
+}
+/**
+* @public
+*/
+function ThemeColorProvider(props) {
+	let $ = c(5), { children, scheme, tone } = props, root = useRootTheme(), t0 = scheme || root.scheme, t1;
+	return $[0] !== children || $[1] !== root.theme || $[2] !== t0 || $[3] !== tone ? (t1 = /* @__PURE__ */ jsx(ThemeProvider$1, {
+		scheme: t0,
+		theme: root.theme,
+		tone,
+		children
+	}), $[0] = children, $[1] = root.theme, $[2] = t0, $[3] = tone, $[4] = t1) : t1 = $[4], t1;
+}
+function cardStyle(props) {
+	return [cardBaseStyle(props), cardColorStyle(props)];
+}
+function cardBaseStyle(props) {
+	let { $checkered } = props, { space } = getTheme_v2(props.theme);
+	return css`${$checkered && css`background-size:${space[3]}px ${space[3]}px;background-position:50% 50%;background-image:var(--card-bg-image);`} &[data-as='button']{-webkit-font-smoothing:inherit;appearance:none;outline:none;font:inherit;text-align:inherit;border:0;width:-moz-available;width:-webkit-fill-available;width:stretch;}&[data-as='a']{outline:none;text-decoration:none;}&[data-as='pre']{font:inherit;}`;
+}
+function cardColorStyle(props) {
+	let { $checkered, $focusRing, $muted } = props, { card, color, style } = getTheme_v2(props.theme), border = {
+		width: card.border.width,
+		color: "var(--card-border-color)"
+	};
+	return css`color-scheme:${color._dark ? "dark" : "light"};${_cardColorStyle(color, color, $checkered)} background-color:${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};color:var(--card-fg-color);&[data-as='button']{--card-focus-ring-box-shadow:none;cursor:default;box-shadow:var(--card-focus-ring-box-shadow);&:disabled{${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}}&:not(:disabled){&[data-pressed]{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}&[data-selected]{${_cardColorStyle(color, color.selectable.default.selected, $checkered)}}@media (hover:hover){&:not([data-pressed]):not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}}&:active{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}}}&:focus-visible{--card-focus-ring-box-shadow:${$focusRing ? focusRingStyle({
+		base: color,
+		border,
+		focusRing: card.focusRing
+	}) : void 0};}}}&[data-as='a']{cursor:pointer;box-shadow:var(--card-focus-ring-box-shadow);&[data-disabled]{${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}}&:not([data-disabled]){&[data-pressed]{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}&[data-selected]{${_cardColorStyle(color, color.selectable.default.selected, $checkered)}}@media (hover:hover){&:not([data-pressed]):not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}}&:active{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}}}&:focus-visible{--card-focus-ring-box-shadow:${$focusRing ? focusRingStyle({
+		base: color,
+		border,
+		focusRing: card.focusRing
+	}) : void 0};}}}${style?.card?.root}`;
+}
+const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
+	displayName: "StyledCard",
+	componentId: "sc-2ikw89-0"
+})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function Card(props, ref) {
+	let $ = c(56), asProp, border, borderBottom, borderLeft, borderRight, borderTop, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
+	$[0] === props ? (asProp = $[1], border = $[2], borderBottom = $[3], borderLeft = $[4], borderRight = $[5], borderTop = $[6], muted = $[7], pressed = $[8], restProps = $[9], scheme = $[10], selected = $[11], shadow = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[16]) : ({__unstable_checkered: t0, __unstable_focusRing: t1, as: asProp, border, borderTop, borderRight, borderBottom, borderLeft, muted, pressed, radius: t2, scheme, selected, shadow, tone: t3, ...restProps} = props, $[0] = props, $[1] = asProp, $[2] = border, $[3] = borderBottom, $[4] = borderLeft, $[5] = borderRight, $[6] = borderTop, $[7] = muted, $[8] = pressed, $[9] = restProps, $[10] = scheme, $[11] = selected, $[12] = shadow, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3);
+	let checkered = t0 !== void 0 && t0, focusRing = t1 !== void 0 && t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6;
+	$[17] === border ? t6 = $[18] : (t6 = _getArrayProp(border), $[17] = border, $[18] = t6);
+	let t7;
+	$[19] === borderTop ? t7 = $[20] : (t7 = _getArrayProp(borderTop), $[19] = borderTop, $[20] = t7);
+	let t8;
+	$[21] === borderRight ? t8 = $[22] : (t8 = _getArrayProp(borderRight), $[21] = borderRight, $[22] = t8);
+	let t9;
+	$[23] === borderBottom ? t9 = $[24] : (t9 = _getArrayProp(borderBottom), $[23] = borderBottom, $[24] = t9);
+	let t10;
+	$[25] === borderLeft ? t10 = $[26] : (t10 = _getArrayProp(borderLeft), $[25] = borderLeft, $[26] = t10);
+	let t11;
+	$[27] === radius ? t11 = $[28] : (t11 = _getArrayProp(radius), $[27] = radius, $[28] = t11);
+	let t12;
+	$[29] === shadow ? t12 = $[30] : (t12 = _getArrayProp(shadow), $[29] = shadow, $[30] = t12);
+	let t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0, t16;
+	$[31] !== as || $[32] !== checkered || $[33] !== focusRing || $[34] !== muted || $[35] !== ref || $[36] !== restProps || $[37] !== rootTheme.scheme || $[38] !== selected || $[39] !== t10 || $[40] !== t11 || $[41] !== t12 || $[42] !== t13 || $[43] !== t14 || $[44] !== t15 || $[45] !== t4 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8 || $[49] !== t9 || $[50] !== tone ? (t16 = /* @__PURE__ */ jsx(StyledCard, {
+		"data-as": t4,
+		"data-scheme": t5,
+		"data-ui": "Card",
+		"data-tone": tone,
+		...restProps,
+		$border: t6,
+		$borderTop: t7,
+		$borderRight: t8,
+		$borderBottom: t9,
+		$borderLeft: t10,
+		$checkered: checkered,
+		$focusRing: focusRing,
+		$muted: muted,
 		$radius: t11,
 		$shadow: t12,
 		$tone: tone,
@@ -1095,49 +973,7 @@ const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
 		tone,
 		children: t16
 	}), $[52] = scheme, $[53] = t16, $[54] = tone, $[55] = t17) : t17 = $[55], t17;
-});
-/**
-* @public
-*/
-function useClickOutsideEvent(listener, t0, boundaryElement) {
-	let $ = c(9), elementsArg = t0 === void 0 ? _temp$8 : t0, t1;
-	$[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
-		if (!listener) return;
-		let target = evt.target;
-		if (!(target instanceof Node)) return;
-		let resolvedBoundaryElement = boundaryElement?.();
-		if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) return;
-		let elements = elementsArg().flat();
-		for (let el of elements) if (el && (target === el || el.contains(target))) return;
-		listener(evt);
-	}, $[0] = boundaryElement, $[1] = elementsArg, $[2] = listener, $[3] = t1) : t1 = $[3];
-	let onEvent = useEffectEvent(t1), hasListener = !!listener, t2;
-	$[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
-		if (!hasListener) return;
-		let handleEvent = (evt_0) => onEvent(evt_0);
-		return document.addEventListener("mousedown", handleEvent), () => {
-			document.removeEventListener("mousedown", handleEvent);
-		};
-	}, $[4] = hasListener, $[5] = onEvent, $[6] = t2) : t2 = $[6];
-	let t3;
-	$[7] === hasListener ? t3 = $[8] : (t3 = [hasListener], $[7] = hasListener, $[8] = t3), useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
-}
-function _temp$8() {
-	return EMPTY_ARRAY;
-}
-/**
-* @beta
-*/
-function useCustomValidity(ref, customValidity) {
-	let $ = c(4), t0, t1;
-	$[0] !== customValidity || $[1] !== ref ? (t0 = () => {
-		ref.current?.setCustomValidity(customValidity || "");
-	}, t1 = [customValidity, ref], $[0] = customValidity, $[1] = ref, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), useEffect(t0, t1);
-}
-/**
-* @internal
-*/
-const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
+}), _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
 function _createElementRectValueListener() {
 	return { subscribe(element, subscriber) {
 		let resizeObserver = new _ResizeObserver(([entry]) => {
@@ -1180,44 +1016,8 @@ function useElementSize(element) {
 		if (element) return _elementSizeObserver.subscribe(element, setSize);
 	}, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1), useEffect(t0, t1), size;
 }
-/**
-* Adds global keydown event listener to the window.
-*
-* @param onKeyDown - The function to call when a keydown event is triggered.
-* @param options - The options to pass to the addEventListener function (example, capture: true)
-* @beta
-*/
-function useGlobalKeyDown(onKeyDown, options) {
-	let $ = c(7), t0;
-	$[0] === onKeyDown ? t0 = $[1] : (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0);
-	let handleKeyDown = useEffectEvent(t0), t1;
-	$[2] !== handleKeyDown || $[3] !== options ? (t1 = () => {
-		let handler = (event_0) => handleKeyDown(event_0);
-		return window.addEventListener("keydown", handler, options), () => window.removeEventListener("keydown", handler, options);
-	}, $[2] = handleKeyDown, $[3] = options, $[4] = t1) : t1 = $[4];
-	let t2;
-	$[5] === options ? t2 = $[6] : (t2 = [options], $[5] = options, $[6] = t2), useEffect(t1, t2);
-}
-/**
-* Efficiently subscribes to `window.matchMedia` queries
-*
-* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
-*
-* @public
-*/
-function useMatchMedia(mediaQueryString, getServerSnapshot) {
-	let $ = c(4);
-	useDebugValue(mediaQueryString);
-	let t0;
-	$[0] === mediaQueryString ? t0 = $[1] : (t0 = (onStoreChange) => {
-		let media = window.matchMedia(mediaQueryString);
-		return media.addEventListener("change", onStoreChange), () => media.removeEventListener("change", onStoreChange);
-	}, $[0] = mediaQueryString, $[1] = t0);
-	let t1;
-	return $[2] === mediaQueryString ? t1 = $[3] : (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1), useSyncExternalStore(t0, t1, getServerSnapshot);
-}
-function _getMediaQuery(media, index) {
-	return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
+function _getMediaQuery(media, index) {
+	return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
 }
 function _createMediaStore(media) {
 	let mediaLen = media.length, sizes, getSizes = () => {
@@ -1273,21 +1073,22 @@ function useMediaIndex() {
 	return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
 /**
-* Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
-*
-* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+* Efficiently subscribes to `window.matchMedia` queries
 *
-* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
-* Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
-* @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
+* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
 *
 * @public
 */
-function usePrefersDark(t0) {
-	return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$7 : t0);
-}
-function _temp$7() {
-	return !1;
+function useMatchMedia(mediaQueryString, getServerSnapshot) {
+	let $ = c(4);
+	useDebugValue(mediaQueryString);
+	let t0;
+	$[0] === mediaQueryString ? t0 = $[1] : (t0 = (onStoreChange) => {
+		let media = window.matchMedia(mediaQueryString);
+		return media.addEventListener("change", onStoreChange), () => media.removeEventListener("change", onStoreChange);
+	}, $[0] = mediaQueryString, $[1] = t0);
+	let t1;
+	return $[2] === mediaQueryString ? t1 = $[3] : (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1), useSyncExternalStore(t0, t1, getServerSnapshot);
 }
 /**
 * Returns true if motion should be reduced
@@ -1301,127 +1102,21 @@ function _temp$7() {
 * @public
 */
 function usePrefersReducedMotion(t0) {
-	return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$6 : t0);
+	return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$8 : t0);
 }
-function _temp$6() {
+function _temp$8() {
 	return !1;
 }
-const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
-	displayName: "StyledGrid",
-	componentId: "sc-1yxm55-0"
-})(responsiveGridStyle), Grid = forwardRef(function Grid(props, ref) {
-	let $ = c(44), as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, gridTemplateColumns, gridTemplateRows, restProps, rows;
-	$[0] === props ? (as = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], children = $[5], columns = $[6], gap = $[7], gapX = $[8], gapY = $[9], gridTemplateColumns = $[10], gridTemplateRows = $[11], restProps = $[12], rows = $[13]) : ({as, autoRows, autoCols, autoFlow, columns, gridTemplateColumns, gap, gapX, gapY, rows, gridTemplateRows, children, ...restProps} = props, $[0] = props, $[1] = as, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = children, $[6] = columns, $[7] = gap, $[8] = gapX, $[9] = gapY, $[10] = gridTemplateColumns, $[11] = gridTemplateRows, $[12] = restProps, $[13] = rows);
-	let t0 = typeof as == "string" ? as : void 0, t1;
-	$[14] === autoRows ? t1 = $[15] : (t1 = _getArrayProp(autoRows), $[14] = autoRows, $[15] = t1);
-	let t2;
-	$[16] === autoCols ? t2 = $[17] : (t2 = _getArrayProp(autoCols), $[16] = autoCols, $[17] = t2);
-	let t3;
-	$[18] === autoFlow ? t3 = $[19] : (t3 = _getArrayProp(autoFlow), $[18] = autoFlow, $[19] = t3);
-	let t4 = gridTemplateColumns === void 0 ? columns : gridTemplateColumns, t5;
-	$[20] === t4 ? t5 = $[21] : (t5 = _getArrayProp(t4), $[20] = t4, $[21] = t5);
-	let t6;
-	$[22] === gap ? t6 = $[23] : (t6 = _getArrayProp(gap), $[22] = gap, $[23] = t6);
-	let t7;
-	$[24] === gapX ? t7 = $[25] : (t7 = _getArrayProp(gapX), $[24] = gapX, $[25] = t7);
-	let t8;
-	$[26] === gapY ? t8 = $[27] : (t8 = _getArrayProp(gapY), $[26] = gapY, $[27] = t8);
-	let t9 = gridTemplateRows === void 0 ? rows : gridTemplateRows, t10;
-	$[28] === t9 ? t10 = $[29] : (t10 = _getArrayProp(t9), $[28] = t9, $[29] = t10);
-	let t11;
-	return $[30] !== as || $[31] !== children || $[32] !== ref || $[33] !== restProps || $[34] !== t0 || $[35] !== t1 || $[36] !== t10 || $[37] !== t2 || $[38] !== t3 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 ? (t11 = /* @__PURE__ */ jsx(StyledGrid, {
-		"data-as": t0,
-		"data-ui": "Grid",
-		...restProps,
-		$autoRows: t1,
-		$autoCols: t2,
-		$autoFlow: t3,
-		$columns: t5,
-		$gap: t6,
-		$gapX: t7,
-		$gapY: t8,
-		$rows: t10,
-		forwardedAs: as,
-		ref,
-		children
-	}), $[30] = as, $[31] = children, $[32] = ref, $[33] = restProps, $[34] = t0, $[35] = t1, $[36] = t10, $[37] = t2, $[38] = t3, $[39] = t5, $[40] = t6, $[41] = t7, $[42] = t8, $[43] = t11) : t11 = $[43], t11;
-});
-function inlineBaseStyle() {
-	return {
-		lineHeight: "0",
-		"&&:not([hidden])": { display: "block" },
-		"& > div": {
-			display: "inline-block",
-			verticalAlign: "middle"
-		}
-	};
-}
-function inlineSpaceStyle(props) {
-	let { media, space } = getTheme_v2(props.theme);
-	return _responsive(media, props.$space, (spaceIndex) => {
-		let _space = rem(spaceIndex === .5 ? space[1] / 2 : space[spaceIndex]);
-		return {
-			margin: `-${_space} 0 0 -${_space}`,
-			"& > div": { padding: `${_space} 0 0 ${_space}` }
-		};
-	});
-}
-const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
-	displayName: "StyledInline",
-	componentId: "sc-8j2qbm-0"
-})(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function Inline(props, ref) {
-	let $ = c(16), as, childrenProp, deprecated_space, gap, restProps;
-	$[0] === props ? (as = $[1], childrenProp = $[2], deprecated_space = $[3], gap = $[4], restProps = $[5]) : ({as, children: childrenProp, gap, space: deprecated_space, ...restProps} = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = deprecated_space, $[4] = gap, $[5] = restProps);
-	let spacing = gap === void 0 ? deprecated_space : gap, t0;
-	$[6] === childrenProp ? t0 = $[7] : (t0 = Children.map(childrenProp, _temp$5), $[6] = childrenProp, $[7] = t0);
-	let children = t0, t1;
-	$[8] === spacing ? t1 = $[9] : (t1 = _getArrayProp(spacing), $[8] = spacing, $[9] = t1);
-	let t2 = ref, t3;
-	return $[10] !== as || $[11] !== children || $[12] !== restProps || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, {
-		"data-ui": "Inline",
-		...restProps,
-		$space: t1,
-		forwardedAs: as,
-		ref: t2,
-		children
-	}), $[10] = as, $[11] = children, $[12] = restProps, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
-});
-function _temp$5(child) {
-	return child && /* @__PURE__ */ jsx("div", { children: child });
-}
-function kbdStyle() {
-	return 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);box-shadow:inset 0 0 0 1px var(--card-border-color);background:var(--card-bg-color);font:inherit;vertical-align:top;&:not([hidden]){display:inline-block;}`;
-}
-const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
-	displayName: "StyledKBD",
-	componentId: "sc-pgjv2l-0"
-})(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function KBD(props, ref) {
-	let $ = c(19), children, restProps, t0, t1, t2;
-	$[0] === props ? (children = $[1], restProps = $[2], t0 = $[3], t1 = $[4], t2 = $[5]) : ({children, fontSize: t0, padding: t1, radius: t2, ...restProps} = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0, $[4] = t1, $[5] = t2);
-	let fontSize = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? 2 : t2, t3;
-	$[6] === radius ? t3 = $[7] : (t3 = _getArrayProp(radius), $[6] = radius, $[7] = t3);
-	let t4;
-	$[8] !== children || $[9] !== fontSize ? (t4 = /* @__PURE__ */ jsx(Text, {
-		as: "span",
-		size: fontSize,
-		weight: "semibold",
-		children
-	}), $[8] = children, $[9] = fontSize, $[10] = t4) : t4 = $[10];
-	let t5;
-	$[11] !== padding || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, {
-		as: "span",
-		padding,
-		children: t4
-	}), $[11] = padding, $[12] = t4, $[13] = t5) : t5 = $[13];
-	let t6;
-	return $[14] !== ref || $[15] !== restProps || $[16] !== t3 || $[17] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledKBD, {
-		"data-ui": "KBD",
-		...restProps,
-		$radius: t3,
-		ref,
-		children: t5
-	}), $[14] = ref, $[15] = restProps, $[16] = t3, $[17] = t5, $[18] = t6) : t6 = $[18], t6;
-}), origin = {
+/**
+* Custom floating-ui middleware which calculates transform-origin X + Y offsets
+* based on the current floating rect's dimensions and shift offset.
+*
+* Scaling popovers with these transform-origin offsets will give the effect of
+* popvers slightly 'growing' from the origin/reference element.
+*
+* This middleware must be applied after both `@sanity/ui/size` and `shift` middlewares.
+*/
+const origin = {
 	name: "@sanity/ui/origin",
 	fn({ middlewareData, placement, rects }) {
 		let [side] = placement.split("-"), floatingWidth = rects.floating.width, floatingHeight = rects.floating.height, shiftX = middlewareData.shift?.x || 0, shiftY = middlewareData.shift?.y || 0;
@@ -1442,121 +1137,10 @@ const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
 function clamp(num, min, max) {
 	return Math.min(Math.max(num, min), max);
 }
-function moveTowardsLength(movingPoint, targetPoint, amount) {
-	let width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
-	return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
-}
-function moveTowardsFractional(movingPoint, targetPoint, fraction) {
-	return {
-		x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
-		y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
-	};
-}
-function getRoundedCommands(points) {
-	let len = points.length, cmds = [];
-	for (let i = 0; i < len; i += 1) {
-		let point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
-		if (prevPoint && point.radius) {
-			let curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, .5), endControl = moveTowardsFractional(point, curveEnd, .5);
-			cmds.push({
-				type: "point",
-				...curveStart
-			}), cmds.push({
-				type: "curve",
-				curveEnd,
-				startControl,
-				endControl
-			});
-		} else cmds.push({
-			type: "point",
-			...point
-		});
-	}
-	return cmds;
-}
-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 StyledArrow = /* @__PURE__ */ styled.div.withConfig({
-	displayName: "StyledArrow",
-	componentId: "sc-1ev21f-0"
-})(({ $w: w }) => css`position:absolute;width:${w}px;height:${w}px;:empty + &{display:none;}& > svg{display:block;line-height:0;transform-origin:${w / 2}px ${w / 2}px;}[data-placement^='top'] > &{bottom:-${w}px;& > svg{transform:rotate(0);}}[data-placement^='right'] > &{left:-${w}px;& > svg{transform:rotate(90deg);}}[data-placement^='left'] > &{right:-${w}px;& > svg{transform:rotate(-90deg);}}[data-placement^='bottom'] > &{top:-${w}px;& > svg{transform:rotate(180deg);}}`), StrokePath = styled.path.withConfig({
-	displayName: "StrokePath",
-	componentId: "sc-1ev21f-1"
-})`stroke:var(--card-shadow-outline-color);`, ShapePath = styled.path.withConfig({
-	displayName: "ShapePath",
-	componentId: "sc-1ev21f-2"
-})`fill:var(--card-bg-color);`, Arrow = forwardRef(function Arrow(props, ref) {
-	let $ = c(29), h, restProps, t0, w;
-	$[0] === props ? (h = $[1], restProps = $[2], t0 = $[3], w = $[4]) : ({width: w, height: h, radius: t0, ...restProps} = props, $[0] = props, $[1] = h, $[2] = restProps, $[3] = t0, $[4] = w);
-	let radius = t0 === void 0 ? 0 : t0, { card } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, t1;
-	$[5] !== center || $[6] !== h || $[7] !== radius || $[8] !== w ? (t1 = compileCommands(getRoundedCommands([
-		{
-			x: 0,
-			y: 0
-		},
-		{
-			x: radius,
-			y: 0,
-			radius
-		},
-		{
-			x: center,
-			y: h - 1,
-			radius
-		},
-		{
-			x: w - radius,
-			y: 0,
-			radius
-		},
-		{
-			x: w,
-			y: 0
-		}
-	])), $[5] = center, $[6] = h, $[7] = radius, $[8] = w, $[9] = t1) : t1 = $[9];
-	let path = t1, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`, t2 = `0 0 ${w} ${w}`, t3;
-	$[10] !== strokeWidth || $[11] !== w ? (t3 = /* @__PURE__ */ jsx("mask", {
-		id: "stroke-mask",
-		children: /* @__PURE__ */ jsx("rect", {
-			x: 0,
-			y: strokeWidth,
-			width: w,
-			height: w,
-			fill: "white"
-		})
-	}), $[10] = strokeWidth, $[11] = w, $[12] = t3) : t3 = $[12];
-	let t4 = strokeWidth * 2, t5;
-	$[13] !== strokePath || $[14] !== t4 ? (t5 = /* @__PURE__ */ jsx(StrokePath, {
-		d: strokePath,
-		mask: "url(#stroke-mask)",
-		strokeWidth: t4
-	}), $[13] = strokePath, $[14] = t4, $[15] = t5) : t5 = $[15];
-	let t6;
-	$[16] === fillPath ? t6 = $[17] : (t6 = /* @__PURE__ */ jsx(ShapePath, { d: fillPath }), $[16] = fillPath, $[17] = t6);
-	let t7;
-	$[18] !== t2 || $[19] !== t3 || $[20] !== t5 || $[21] !== t6 || $[22] !== w ? (t7 = /* @__PURE__ */ jsxs("svg", {
-		width: w,
-		height: w,
-		viewBox: t2,
-		children: [
-			t3,
-			t5,
-			t6
-		]
-	}), $[18] = t2, $[19] = t3, $[20] = t5, $[21] = t6, $[22] = w, $[23] = t7) : t7 = $[23];
-	let t8;
-	return $[24] !== ref || $[25] !== restProps || $[26] !== t7 || $[27] !== w ? (t8 = /* @__PURE__ */ jsx(StyledArrow, {
-		...restProps,
-		$w: w,
-		ref,
-		children: t7
-	}), $[24] = ref, $[25] = restProps, $[26] = t7, $[27] = w, $[28] = t8) : t8 = $[28], t8;
-}), BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null);
 function isRecord(value) {
 	return !!(value && typeof value == "object" && !Array.isArray(value));
 }
-const DEFAULT_VALUE = {
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
 	version: 0,
 	element: null
 };
@@ -1568,6 +1152,10 @@ function useBoundaryElement() {
 	if (value && (!isRecord(value) || value.version !== 0)) throw Error("useBoundaryElement(): the context value is not compatible");
 	return value || DEFAULT_VALUE;
 }
+function getElementRef(element) {
+	let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
+}
 function getLayerContext(contextValue) {
 	if (!isRecord(contextValue) || contextValue.version !== 0) throw Error("the context value is not compatible");
 	if (!contextValue) throw Error("components using `useLayer()` should be wrapped in a <LayerProvider>.");
@@ -1588,7 +1176,7 @@ function LayerProvider(props) {
 	let [, setChildLayers] = useState(t3), [size, setSize] = useState(0), isTopLayer = size === 0, t4;
 	$[5] !== parentRegisterChild || $[6] !== setChildLayers ? (t4 = (childLevel) => {
 		let parentDispose = parentRegisterChild?.(childLevel);
-		return childLevel === void 0 ? setSize(_temp$4) : setChildLayers((state) => {
+		return childLevel === void 0 ? setSize(_temp$7) : setChildLayers((state) => {
 			let prevLen = state[childLevel] ?? 0, nextState = {
 				...state,
 				[childLevel]: prevLen + 1
@@ -1621,7 +1209,7 @@ function LayerProvider(props) {
 function _temp2$2(v_0) {
 	return v_0 - 1;
 }
-function _temp$4(v) {
+function _temp$7(v) {
 	return v + 1;
 }
 /**
@@ -1638,53 +1226,7 @@ function useLayer() {
 		throw err instanceof Error ? Error(`useLayer(): ${err.message}`) : Error(`useLayer(): ${err}`);
 	}
 }
-const StyledLayer = /* @__PURE__ */ styled.div.withConfig({
-	displayName: "StyledLayer",
-	componentId: "sc-100e5i-0"
-})({ position: "relative" }), LayerChildren = forwardRef(function LayerChildren(props, forwardedRef) {
-	let $ = c(22), children, onActivate, onFocus, restProps, t0;
-	$[0] === props ? (children = $[1], onActivate = $[2], onFocus = $[3], restProps = $[4], t0 = $[5]) : ({children, onActivate, onFocus, style: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = onActivate, $[3] = onFocus, $[4] = restProps, $[5] = t0);
-	let style = t0 === void 0 ? EMPTY_RECORD : t0, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer), t1;
-	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[6] = t1) : t1 = $[6], useImperativeHandle(forwardedRef, t1);
-	let t2, t3;
-	$[7] !== isTopLayer || $[8] !== onActivate ? (t2 = () => {
-		isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
-	}, t3 = [isTopLayer, onActivate], $[7] = isTopLayer, $[8] = onActivate, $[9] = t2, $[10] = t3) : (t2 = $[9], t3 = $[10]), useEffect(t2, t3);
-	let t4;
-	$[11] !== isTopLayer || $[12] !== onFocus ? (t4 = (event) => {
-		onFocus?.(event);
-		let rootElement = ref.current, target = document.activeElement;
-		!isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
-	}, $[11] = isTopLayer, $[12] = onFocus, $[13] = t4) : t4 = $[13];
-	let handleFocus = t4, t5;
-	$[14] !== style || $[15] !== zIndex ? (t5 = {
-		...style,
-		zIndex
-	}, $[14] = style, $[15] = zIndex, $[16] = t5) : t5 = $[16];
-	let t6;
-	return $[17] !== children || $[18] !== handleFocus || $[19] !== restProps || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledLayer, {
-		...restProps,
-		"data-ui": "Layer",
-		onFocus: handleFocus,
-		ref,
-		style: t5,
-		children
-	}), $[17] = children, $[18] = handleFocus, $[19] = restProps, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
-}), Layer = forwardRef(function Layer(props, ref) {
-	let $ = c(11), children, restProps, t0;
-	$[0] === props ? (children = $[1], restProps = $[2], t0 = $[3]) : ({children, zOffset: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0);
-	let zOffset = t0 === void 0 ? 1 : t0, t1;
-	$[4] !== children || $[5] !== ref || $[6] !== restProps ? (t1 = /* @__PURE__ */ jsx(LayerChildren, {
-		...restProps,
-		ref,
-		children
-	}), $[4] = children, $[5] = ref, $[6] = restProps, $[7] = t1) : t1 = $[7];
-	let t2;
-	return $[8] !== t1 || $[9] !== zOffset ? (t2 = /* @__PURE__ */ jsx(LayerProvider, {
-		zOffset,
-		children: t1
-	}), $[8] = t1, $[9] = zOffset, $[10] = t2) : t2 = $[10], t2;
-}), key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
+const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
 globalScope[elementKey] = null;
 const PortalContext = createGlobalScopedContext(key, {
 	version: 0,
@@ -1711,34 +1253,6 @@ function Portal(props) {
 	let t0;
 	return $[0] !== children || $[1] !== portalElement ? (t0 = createPortal(children, portalElement), $[0] = children, $[1] = portalElement, $[2] = t0) : t0 = $[2], t0;
 }
-/**
-* @public
-*/
-function PortalProvider(props) {
-	let $ = c(7), { boundaryElement, children, element, __unstable_elements: elements } = props, fallbackElement = useSyncExternalStore(emptySubscribe, _temp$3, _temp2$1), t0 = boundaryElement || null, t1 = element || fallbackElement, t2;
-	$[0] !== elements || $[1] !== t0 || $[2] !== t1 ? (t2 = {
-		version: 0,
-		boundaryElement: t0,
-		element: t1,
-		elements
-	}, $[0] = elements, $[1] = t0, $[2] = t1, $[3] = t2) : t2 = $[3];
-	let value = t2, t3;
-	return $[4] !== children || $[5] !== value ? (t3 = /* @__PURE__ */ jsx(PortalContext.Provider, {
-		value,
-		children
-	}), $[4] = children, $[5] = value, $[6] = t3) : t3 = $[6], t3;
-}
-function _temp2$1() {
-	return null;
-}
-function _temp$3() {
-	return document.body;
-}
-const emptySubscribe = () => () => {};
-function getElementRef(element) {
-	let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-	return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
-}
 const DEFAULT_POPOVER_MARGINS = [
 	0,
 	0,
@@ -1834,12 +1348,122 @@ function calcMaxWidth(params) {
 	let { boundaryWidth, currentWidth } = params;
 	if (currentWidth !== void 0 || boundaryWidth !== void 0) return Math.min(currentWidth ?? Infinity, (boundaryWidth || Infinity) - 8);
 }
-const MotionCard$1 = styled(motion.create(Card)).withConfig({
+function moveTowardsLength(movingPoint, targetPoint, amount) {
+	let width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
+	return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
+}
+function moveTowardsFractional(movingPoint, targetPoint, fraction) {
+	return {
+		x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+		y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
+	};
+}
+function getRoundedCommands(points) {
+	let len = points.length, cmds = [];
+	for (let i = 0; i < len; i += 1) {
+		let point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
+		if (prevPoint && point.radius) {
+			let curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, .5), endControl = moveTowardsFractional(point, curveEnd, .5);
+			cmds.push({
+				type: "point",
+				...curveStart
+			}), cmds.push({
+				type: "curve",
+				curveEnd,
+				startControl,
+				endControl
+			});
+		} else cmds.push({
+			type: "point",
+			...point
+		});
+	}
+	return cmds;
+}
+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 StyledArrow = /* @__PURE__ */ styled.div.withConfig({
+	displayName: "StyledArrow",
+	componentId: "sc-ivw6of-0"
+})(({ $w: w }) => css`position:absolute;width:${w}px;height:${w}px;:empty + &{display:none;}& > svg{display:block;line-height:0;transform-origin:${w / 2}px ${w / 2}px;}[data-placement^='top'] > &{bottom:-${w}px;& > svg{transform:rotate(0);}}[data-placement^='right'] > &{left:-${w}px;& > svg{transform:rotate(90deg);}}[data-placement^='left'] > &{right:-${w}px;& > svg{transform:rotate(-90deg);}}[data-placement^='bottom'] > &{top:-${w}px;& > svg{transform:rotate(180deg);}}`), StrokePath = styled.path.withConfig({
+	displayName: "StrokePath",
+	componentId: "sc-ivw6of-1"
+})`stroke:var(--card-shadow-outline-color);`, ShapePath = styled.path.withConfig({
+	displayName: "ShapePath",
+	componentId: "sc-ivw6of-2"
+})`fill:var(--card-bg-color);`, Arrow = forwardRef(function Arrow(props, ref) {
+	let $ = c(29), h, restProps, t0, w;
+	$[0] === props ? (h = $[1], restProps = $[2], t0 = $[3], w = $[4]) : ({width: w, height: h, radius: t0, ...restProps} = props, $[0] = props, $[1] = h, $[2] = restProps, $[3] = t0, $[4] = w);
+	let radius = t0 === void 0 ? 0 : t0, { card } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, t1;
+	$[5] !== center || $[6] !== h || $[7] !== radius || $[8] !== w ? (t1 = compileCommands(getRoundedCommands([
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: radius,
+			y: 0,
+			radius
+		},
+		{
+			x: center,
+			y: h - 1,
+			radius
+		},
+		{
+			x: w - radius,
+			y: 0,
+			radius
+		},
+		{
+			x: w,
+			y: 0
+		}
+	])), $[5] = center, $[6] = h, $[7] = radius, $[8] = w, $[9] = t1) : t1 = $[9];
+	let path = t1, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`, t2 = `0 0 ${w} ${w}`, t3;
+	$[10] !== strokeWidth || $[11] !== w ? (t3 = /* @__PURE__ */ jsx("mask", {
+		id: "stroke-mask",
+		children: /* @__PURE__ */ jsx("rect", {
+			x: 0,
+			y: strokeWidth,
+			width: w,
+			height: w,
+			fill: "white"
+		})
+	}), $[10] = strokeWidth, $[11] = w, $[12] = t3) : t3 = $[12];
+	let t4 = strokeWidth * 2, t5;
+	$[13] !== strokePath || $[14] !== t4 ? (t5 = /* @__PURE__ */ jsx(StrokePath, {
+		d: strokePath,
+		mask: "url(#stroke-mask)",
+		strokeWidth: t4
+	}), $[13] = strokePath, $[14] = t4, $[15] = t5) : t5 = $[15];
+	let t6;
+	$[16] === fillPath ? t6 = $[17] : (t6 = /* @__PURE__ */ jsx(ShapePath, { d: fillPath }), $[16] = fillPath, $[17] = t6);
+	let t7;
+	$[18] !== t2 || $[19] !== t3 || $[20] !== t5 || $[21] !== t6 || $[22] !== w ? (t7 = /* @__PURE__ */ jsxs("svg", {
+		width: w,
+		height: w,
+		viewBox: t2,
+		children: [
+			t3,
+			t5,
+			t6
+		]
+	}), $[18] = t2, $[19] = t3, $[20] = t5, $[21] = t6, $[22] = w, $[23] = t7) : t7 = $[23];
+	let t8;
+	return $[24] !== ref || $[25] !== restProps || $[26] !== t7 || $[27] !== w ? (t8 = /* @__PURE__ */ jsx(StyledArrow, {
+		...restProps,
+		$w: w,
+		ref,
+		children: t7
+	}), $[24] = ref, $[25] = restProps, $[26] = t7, $[27] = w, $[28] = t8) : t8 = $[28], t8;
+}), MotionCard$1 = styled(motion.create(Card)).withConfig({
 	displayName: "MotionCard",
-	componentId: "sc-n3w53t-0"
+	componentId: "sc-tq6s8o-0"
 })`&:not([hidden]){display:flex;}flex-direction:column;width:max-content;min-width:min-content;will-change:transform;`, MotionFlex = styled(motion.create(Flex)).withConfig({
 	displayName: "MotionFlex",
-	componentId: "sc-n3w53t-1"
+	componentId: "sc-tq6s8o-1"
 })`will-change:opacity;`, PopoverCard = forwardRef(function PopoverCard(props, ref) {
 	let $ = c(66), animate, arrow, arrowRef, arrowX, arrowY, children, marginsProp, originX, originY, overflow, padding, placement, radius, restProps, scheme, shadow, strategy, style, tone, width, xProp, yProp;
 	$[0] === props ? (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], marginsProp = $[7], originX = $[8], originY = $[9], overflow = $[10], padding = $[11], placement = $[12], radius = $[13], restProps = $[14], scheme = $[15], shadow = $[16], strategy = $[17], style = $[18], tone = $[19], width = $[20], xProp = $[21], yProp = $[22]) : ({__unstable_margins: marginsProp, animate, arrow, arrowRef, arrowX, arrowY, children, padding, placement, originX, originY, overflow, radius, scheme, shadow, strategy, style, tone, width, x: xProp, y: yProp, ...restProps} = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = marginsProp, $[8] = originX, $[9] = originY, $[10] = overflow, $[11] = padding, $[12] = placement, $[13] = radius, $[14] = restProps, $[15] = scheme, $[16] = shadow, $[17] = strategy, $[18] = style, $[19] = tone, $[20] = width, $[21] = xProp, $[22] = yProp);
@@ -2138,7 +1762,7 @@ function responsiveStackSpaceStyle(props) {
 }
 const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "StyledStack",
-	componentId: "sc-0k6050-0"
+	componentId: "sc-ux0lrj-0"
 })(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function Stack(props, ref) {
 	let $ = c(13), as, deprecated_space, gap, restProps;
 	$[0] === props ? (as = $[1], deprecated_space = $[2], gap = $[3], restProps = $[4]) : ({as, gap, space: deprecated_space, ...restProps} = props, $[0] = props, $[1] = as, $[2] = deprecated_space, $[3] = gap, $[4] = restProps);
@@ -2153,36 +1777,111 @@ const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
 		forwardedAs: as,
 		ref
 	}), $[7] = as, $[8] = ref, $[9] = restProps, $[10] = t0, $[11] = t1, $[12] = t2) : t2 = $[12], t2;
-}), CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, StyledTextInput = /* @__PURE__ */ styled(Card).attrs({ forwardedAs: "span" }).withConfig({
+});
+/**
+* @beta
+*/
+function useCustomValidity(ref, customValidity) {
+	let $ = c(4), t0, t1;
+	$[0] !== customValidity || $[1] !== ref ? (t0 = () => {
+		ref.current?.setCustomValidity(customValidity || "");
+	}, t1 = [customValidity, ref], $[0] = customValidity, $[1] = ref, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), useEffect(t0, t1);
+}
+function responsiveInputPaddingStyle(props) {
+	let { $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) => {
+		let size = font.text.sizes[_fontSize[i]] || font.text.sizes[2], emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight, p = space[_padding[i]], s = space[_space[i]], styles = {
+			paddingTop: rem(p - size.ascenderHeight),
+			paddingRight: rem(p),
+			paddingBottom: rem(p - size.descenderHeight),
+			paddingLeft: rem(p)
+		};
+		return $iconRight && (styles.paddingRight = rem(p + emSize + s)), $iconLeft && (styles.paddingLeft = rem(p + emSize + s)), styles;
+	});
+}
+function responsiveInputPaddingIconRightStyle(props) {
+	return responsiveInputPaddingStyle({
+		...props,
+		$iconRight: !0
+	});
+}
+const ROOT_STYLE = css`&:not([hidden]){display:flex;}align-items:center;`;
+function textInputRootStyle() {
+	return ROOT_STYLE;
+}
+function textInputBaseStyle(props) {
+	let { $scheme, $tone, $weight } = props, { color, font } = getTheme_v2(props.theme);
+	return css`appearance:none;background:none;border:0;border-radius:0;outline:none;width:100%;box-sizing:border-box;font-family:${font.text.family};font-weight:${$weight && font.text.weights[$weight] || font.text.weights.regular};margin:0;position:relative;z-index:1;display:block;&:-webkit-autofill,&:-webkit-autofill:hover,&:-webkit-autofill:focus,&:-webkit-autofill:active{-webkit-text-fill-color:var(--input-fg-color) !important;transition:background-color 5000s;transition-delay:86400s;}&[data-as='textarea']{resize:none;}color:var(--input-fg-color);&::placeholder{color:var(--input-placeholder-color);}&[data-scheme='${$scheme}'][data-tone='${$tone}']{--input-fg-color:${color.input.default.enabled.fg};--input-placeholder-color:${color.input.default.enabled.placeholder};&:not(:invalid):not(:disabled):not(:read-only){--input-fg-color:${color.input.default.enabled.fg};--input-placeholder-color:${color.input.default.enabled.placeholder};}&:not(:invalid):disabled{--input-fg-color:${color.input.default.disabled.fg};--input-placeholder-color:${color.input.default.disabled.placeholder};}&:invalid{--input-fg-color:${color.input.invalid.enabled.fg};--input-placeholder-color:${color.input.invalid.enabled.placeholder};}&:read-only{--input-fg-color:${color.input.default.readOnly.fg};--input-placeholder-color:${color.input.default.readOnly.placeholder};}}`;
+}
+function textInputFontSizeStyle(props) {
+	let { font, media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$fontSize, (sizeIndex) => {
+		let size = font.text.sizes[sizeIndex] || font.text.sizes[2];
+		return {
+			fontSize: rem(size.fontSize),
+			lineHeight: `${size.lineHeight / size.fontSize}`
+		};
+	});
+}
+function textInputRepresentationStyle(props) {
+	let { $hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing } = props, { color, input } = getTheme_v2(props.theme);
+	return css`--input-box-shadow:none;position:absolute;top:0;left:0;right:0;bottom:0;display:block;pointer-events:none;z-index:0;background-color:var(--card-bg-color);box-shadow:var(--input-box-shadow);border-top-left-radius:${$hasPrefix ? 0 : void 0};border-bottom-left-radius:${$hasPrefix ? 0 : void 0};border-top-right-radius:${$hasSuffix ? 0 : void 0};border-bottom-right-radius:${$hasSuffix ? 0 : void 0};&[data-scheme='${$scheme}'][data-tone='${$tone}']{--card-bg-color:${color.input.default.enabled.bg};--card-fg-color:${color.input.default.enabled.fg};*:not(:disabled) + &[data-border]{--input-box-shadow:${focusRingBorderStyle({
+		color: color.input.default.enabled.border,
+		width: input.border.width
+	})};}*:not(:disabled):invalid + &{--card-bg-color:${color.input.invalid.enabled.bg};--card-fg-color:${color.input.invalid.enabled.fg};&[data-border]{--input-box-shadow:${focusRingBorderStyle({
+		color: color.input.invalid.enabled.border,
+		width: input.border.width
+	})};}}*:not(:disabled):focus + &{&[data-border]{--input-box-shadow:${$unstableDisableFocusRing ? void 0 : focusRingStyle({
+		border: {
+			color: color.input.default.enabled.border,
+			width: input.border.width
+		},
+		focusRing: input.text.focusRing
+	})};}&:not([data-border]){--input-box-shadow:${$unstableDisableFocusRing ? void 0 : focusRingStyle({ focusRing: input.text.focusRing })};}}*:not(:invalid):disabled + &{--card-bg-color:${color.input.default.disabled.bg} !important;--card-fg-color:${color.input.default.disabled.fg} !important;--card-icon-color:${color.input.default.disabled.fg} !important;&[data-border]{--input-box-shadow:${focusRingBorderStyle({
+		color: color.input.default.disabled.border,
+		width: input.border.width
+	})};}}*:invalid:disabled + &{--card-bg-color:${color.input.invalid.disabled.bg} !important;--card-fg-color:${color.input.invalid.disabled.fg} !important;--card-icon-color:${color.input.invalid.disabled.fg} !important;&[data-border]{--input-box-shadow:${focusRingBorderStyle({
+		color: color.input.invalid.disabled.border,
+		width: input.border.width
+	})};}}*:not(:invalid):read-only + &{--card-bg-color:${color.input.default.readOnly.bg} !important;--card-fg-color:${color.input.default.readOnly.fg} !important;}*:invalid:read-only + &{--card-bg-color:${color.input.invalid.readOnly.bg} !important;--card-fg-color:${color.input.invalid.readOnly.fg} !important;}@media (hover:hover){*:not(:disabled):not(:read-only):not(:invalid):hover + &{--card-bg-color:${color.input.default.hovered.bg};--card-fg-color:${color.input.default.hovered.fg};}*:invalid:not(:disabled):not(:read-only):hover + &{--card-bg-color:${color.input.invalid.hovered.bg};--card-fg-color:${color.input.invalid.hovered.fg};}*:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border]{--input-box-shadow:${focusRingBorderStyle({
+		color: color.input.default.hovered.border,
+		width: input.border.width
+	})};}*:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border]{--input-box-shadow:${focusRingBorderStyle({
+		color: color.input.invalid.hovered.border,
+		width: input.border.width
+	})};}}}`;
+}
+const CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, StyledTextInput = /* @__PURE__ */ styled(Card).attrs({ forwardedAs: "span" }).withConfig({
 	displayName: "StyledTextInput",
-	componentId: "sc-iuvxo7-0"
+	componentId: "sc-7gzsyi-0"
 })(textInputRootStyle), InputRoot = styled.span.withConfig({
 	displayName: "InputRoot",
-	componentId: "sc-iuvxo7-1"
+	componentId: "sc-7gzsyi-1"
 })`flex:1;min-width:0;display:block;position:relative;`, Prefix = styled(Card).attrs({ forwardedAs: "span" }).withConfig({
 	displayName: "Prefix",
-	componentId: "sc-iuvxo7-2"
+	componentId: "sc-7gzsyi-2"
 })`border-top-right-radius:0;border-bottom-right-radius:0;& > span{display:block;margin:-1px;}`, Suffix = styled(Card).attrs({ forwardedAs: "span" }).withConfig({
 	displayName: "Suffix",
-	componentId: "sc-iuvxo7-3"
+	componentId: "sc-7gzsyi-3"
 })`border-top-left-radius:0;border-bottom-left-radius:0;& > span{display:block;margin:-1px;}`, Input = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-iuvxo7-4"
+	componentId: "sc-7gzsyi-4"
 })(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Presentation",
-	componentId: "sc-iuvxo7-5"
+	componentId: "sc-7gzsyi-5"
 })(responsiveRadiusStyle, textInputRepresentationStyle), LeftBox = styled(Box).withConfig({
 	displayName: "LeftBox",
-	componentId: "sc-iuvxo7-6"
+	componentId: "sc-7gzsyi-6"
 })`position:absolute;top:0;left:0;`, RightBox = styled(Box).withConfig({
 	displayName: "RightBox",
-	componentId: "sc-iuvxo7-7"
+	componentId: "sc-7gzsyi-7"
 })`position:absolute;top:0;right:0;`, RightCard = styled(Card).withConfig({
 	displayName: "RightCard",
-	componentId: "sc-iuvxo7-8"
+	componentId: "sc-7gzsyi-8"
 })`background-color:transparent;position:absolute;top:0;right:0;`, TextInputClearButton = /* @__PURE__ */ styled(Button).withConfig({
 	displayName: "TextInputClearButton",
-	componentId: "sc-iuvxo7-9"
+	componentId: "sc-7gzsyi-9"
 })({ "&:not([hidden])": { display: "block" } }), TextInput = forwardRef(function TextInput(props, forwardedRef) {
 	let $ = c(93), IconComponent, IconRightComponent, __unstable_disableFocusRing, clearButton, customValidity, gap, onClear, prefix, readOnly, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, weight;
 	$[0] === props ? (IconComponent = $[1], IconRightComponent = $[2], __unstable_disableFocusRing = $[3], clearButton = $[4], customValidity = $[5], gap = $[6], onClear = $[7], prefix = $[8], readOnly = $[9], restProps = $[10], suffix = $[11], t0 = $[12], t1 = $[13], t2 = $[14], t3 = $[15], t4 = $[16], t5 = $[17], t6 = $[18], weight = $[19]) : ({__unstable_disableFocusRing, border: t0, clearButton, disabled: t1, fontSize: t2, gap, icon: IconComponent, iconRight: IconRightComponent, onClear, padding: t3, prefix, radius: t4, readOnly, space: t5, suffix, customValidity, type: t6, weight, ...restProps} = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = __unstable_disableFocusRing, $[4] = clearButton, $[5] = customValidity, $[6] = gap, $[7] = onClear, $[8] = prefix, $[9] = readOnly, $[10] = restProps, $[11] = suffix, $[12] = t0, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = weight);
@@ -2196,7 +1895,7 @@ const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
 	$[26] === t10 ? t11 = $[27] : (t11 = _getArrayProp(t10), $[26] = t10, $[27] = t11);
 	let space = t11, $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix, t12;
 	$[28] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => ref.current, $[28] = t12) : t12 = $[28], useImperativeHandle(forwardedRef, t12), useCustomValidity(ref, customValidity);
-	let handleClearMouseDown = _temp$2, t13;
+	let handleClearMouseDown = _temp$6, t13;
 	$[29] === onClear ? t13 = $[30] : (t13 = (event_0) => {
 		event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
 	}, $[29] = onClear, $[30] = t13);
@@ -2240,7 +1939,7 @@ const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
 		children: [t16, t17]
 	}), $[43] = $hasPrefix, $[44] = $hasSuffix, $[45] = __unstable_disableFocusRing, $[46] = radius, $[47] = rootTheme.scheme, $[48] = rootTheme.tone, $[49] = t15, $[50] = t16, $[51] = t17, $[52] = t18) : t18 = $[52];
 	let presentationNode = t18, t19;
-	$[53] === padding ? t19 = $[54] : (t19 = padding.map(_temp2), $[53] = padding, $[54] = t19);
+	$[53] === padding ? t19 = $[54] : (t19 = padding.map(_temp2$1), $[53] = padding, $[54] = t19);
 	let clearButtonBoxPadding = t19, t20;
 	$[55] === padding ? t20 = $[56] : (t20 = padding.map(_temp3), $[55] = padding, $[56] = t20);
 	let clearButtonPadding = t20, clearButtonProps = typeof clearButton == "object" ? clearButton : EMPTY_RECORD, t21;
@@ -2308,410 +2007,190 @@ const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
 		]
 	}), $[88] = prefixNode, $[89] = rootTheme.tone, $[90] = suffixNode, $[91] = t25, $[92] = t26) : t26 = $[92], t26;
 });
-function _temp$2(event) {
+function _temp$6(event) {
 	event.preventDefault(), event.stopPropagation();
 }
-function _temp2(v) {
+function _temp2$1(v) {
 	return v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2;
 }
 function _temp3(v_0) {
 	return v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : v_0 - 1;
 }
 /**
-* @beta
+* @public
 */
-function useDelayedState(initialState) {
-	let $ = c(5), [state, setState] = useState(initialState), delayedAction = useRef(void 0), t0;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (nextState, delay) => {
-		let action = () => {
-			setState(nextState);
+function useClickOutsideEvent(listener, t0, boundaryElement) {
+	let $ = c(9), elementsArg = t0 === void 0 ? _temp$5 : t0, t1;
+	$[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
+		if (!listener) return;
+		let target = evt.target;
+		if (!(target instanceof Node)) return;
+		let resolvedBoundaryElement = boundaryElement?.();
+		if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target)) return;
+		let elements = elementsArg().flat();
+		for (let el of elements) if (el && (target === el || el.contains(target))) return;
+		listener(evt);
+	}, $[0] = boundaryElement, $[1] = elementsArg, $[2] = listener, $[3] = t1) : t1 = $[3];
+	let onEvent = useEffectEvent(t1), hasListener = !!listener, t2;
+	$[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
+		if (!hasListener) return;
+		let handleEvent = (evt_0) => onEvent(evt_0);
+		return document.addEventListener("mousedown", handleEvent), () => {
+			document.removeEventListener("mousedown", handleEvent);
 		};
-		if (delayedAction.current &&= (clearTimeout(delayedAction.current), void 0), !delay) return action();
-		delayedAction.current = setTimeout(action, delay);
-	}, $[0] = t0) : t0 = $[0];
-	let onStateChange = t0, t1, t2;
-	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => () => {
-		delayedAction.current && clearTimeout(delayedAction.current);
-	}, t2 = [], $[1] = t1, $[2] = t2) : (t1 = $[1], t2 = $[2]), useEffect(t1, t2);
+	}, $[4] = hasListener, $[5] = onEvent, $[6] = t2) : t2 = $[6];
 	let t3;
-	return $[3] === state ? t3 = $[4] : (t3 = [state, onStateChange], $[3] = state, $[4] = t3), t3;
+	$[7] === hasListener ? t3 = $[8] : (t3 = [hasListener], $[7] = hasListener, $[8] = t3), useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
+}
+function _temp$5() {
+	return EMPTY_ARRAY;
 }
-const DEFAULT_FALLBACK_PLACEMENTS = {
-	top: [
-		"top-end",
-		"top-start",
-		"bottom",
-		"left",
-		"right"
-	],
-	"top-start": [
-		"top",
-		"top-end",
-		"bottom-start",
-		"left-start",
-		"right-start"
-	],
-	"top-end": [
-		"top",
-		"top-start",
-		"bottom-end",
-		"left-end",
-		"right-end"
-	],
-	bottom: [
-		"bottom-end",
-		"bottom-start",
-		"top",
-		"left",
-		"right"
-	],
-	"bottom-start": [
-		"bottom",
-		"bottom-end",
-		"top-start",
-		"left-start",
-		"right-start"
-	],
-	"bottom-end": [
-		"bottom",
-		"bottom-start",
-		"top-end",
-		"left-end",
-		"right-end"
-	],
-	left: [
-		"left-end",
-		"left-start",
-		"right",
-		"top",
-		"bottom"
-	],
-	"left-start": [
-		"left",
-		"left-end",
-		"right-start",
-		"top-start",
-		"bottom-start"
-	],
-	"left-end": [
-		"left",
-		"left-start",
-		"right-end",
-		"top-end",
-		"bottom-end"
-	],
-	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(motion.create(Card)).withConfig({
-	displayName: "MotionCard",
-	componentId: "sc-d1w0oq-0"
-})`will-change:transform;`, TooltipCard = forwardRef(function TooltipCard(props, ref) {
-	let $ = c(48), animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
-	$[0] === props ? (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], restProps = $[12], scheme = $[13], shadow = $[14], style = $[15]) : ({animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, scheme, shadow, style, ...restProps} = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = restProps, $[13] = scheme, $[14] = shadow, $[15] = style);
-	let t0 = animate ? "transform" : void 0, t1;
-	$[16] !== originX || $[17] !== originY || $[18] !== style || $[19] !== t0 ? (t1 = {
-		originX,
-		originY,
-		willChange: t0,
-		...style
-	}, $[16] = originX, $[17] = originY, $[18] = style, $[19] = t0, $[20] = t1) : t1 = $[20];
-	let rootStyle = t1, t2 = arrowX === null ? void 0 : arrowX, t3 = arrowY === null ? void 0 : arrowY, t4;
-	$[21] !== t2 || $[22] !== t3 ? (t4 = {
-		left: t2,
-		top: t3,
-		right: void 0,
-		bottom: void 0
-	}, $[21] = t2, $[22] = t3, $[23] = t4) : t4 = $[23];
-	let arrowStyle = t4, t5 = restProps, t6;
-	$[24] === animate ? t6 = $[25] : (t6 = animate ? ["hidden", "initial"] : void 0, $[24] = animate, $[25] = t6);
-	let t7;
-	$[26] === animate ? t7 = $[27] : (t7 = animate ? ["visible", "scaleIn"] : void 0, $[26] = animate, $[27] = t7);
-	let t8;
-	$[28] === animate ? t8 = $[29] : (t8 = animate ? ["hidden", "scaleOut"] : void 0, $[28] = animate, $[29] = t8);
-	let t9;
-	$[30] !== arrow || $[31] !== arrowRef || $[32] !== arrowStyle ? (t9 = arrow && /* @__PURE__ */ jsx(Arrow, {
-		ref: arrowRef,
-		style: arrowStyle,
-		width: 15,
-		height: 6,
-		radius: 2
-	}), $[30] = arrow, $[31] = arrowRef, $[32] = arrowStyle, $[33] = t9) : t9 = $[33];
-	let t10;
-	return $[34] !== children || $[35] !== padding || $[36] !== placement || $[37] !== radius || $[38] !== ref || $[39] !== rootStyle || $[40] !== scheme || $[41] !== shadow || $[42] !== t5 || $[43] !== t6 || $[44] !== t7 || $[45] !== t8 || $[46] !== t9 ? (t10 = /* @__PURE__ */ jsxs(MotionCard, {
-		"data-ui": "Tooltip__card",
-		...t5,
-		"data-placement": placement,
-		padding,
-		radius,
-		ref,
-		scheme,
-		shadow,
-		style: rootStyle,
-		variants: POPOVER_MOTION_PROPS.card,
-		transition: POPOVER_MOTION_PROPS.transition,
-		initial: t6,
-		animate: t7,
-		exit: t8,
-		children: [children, t9]
-	}), $[34] = children, $[35] = padding, $[36] = placement, $[37] = radius, $[38] = ref, $[39] = rootStyle, $[40] = scheme, $[41] = shadow, $[42] = t5, $[43] = t6, $[44] = t7, $[45] = t8, $[46] = t9, $[47] = t10) : t10 = $[47], t10;
-}), TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
 /**
+* Adds global keydown event listener to the window.
+*
+* @param onKeyDown - The function to call when a keydown event is triggered.
+* @param options - The options to pass to the addEventListener function (example, capture: true)
 * @beta
 */
-function useTooltipDelayGroup() {
-	return useContext(TooltipDelayGroupContext);
+function useGlobalKeyDown(onKeyDown, options) {
+	let $ = c(7), t0;
+	$[0] === onKeyDown ? t0 = $[1] : (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0);
+	let handleKeyDown = useEffectEvent(t0), t1;
+	$[2] !== handleKeyDown || $[3] !== options ? (t1 = () => {
+		let handler = (event_0) => handleKeyDown(event_0);
+		return window.addEventListener("keydown", handler, options), () => window.removeEventListener("keydown", handler, options);
+	}, $[2] = handleKeyDown, $[3] = options, $[4] = t1) : t1 = $[4];
+	let t2;
+	$[5] === options ? t2 = $[6] : (t2 = [options], $[5] = options, $[6] = t2), useEffect(t1, t2);
 }
-const StyledTooltip = styled(Layer).withConfig({
-	displayName: "StyledTooltip",
-	componentId: "sc-dkqcjk-0"
-})`pointer-events:none;`, Tooltip = forwardRef(function Tooltip(props, forwardedRef) {
-	let $ = c(137), boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), _boundaryElement, _fallbackPlacementsProp, _zOffset, childProp, content, delay, disabled, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5;
-	$[0] === props ? (_boundaryElement = $[1], _fallbackPlacementsProp = $[2], _zOffset = $[3], childProp = $[4], content = $[5], delay = $[6], disabled = $[7], portalProp = $[8], restProps = $[9], scheme = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16]) : ({animate: t0, arrow: t1, boundaryElement: _boundaryElement, children: childProp, content, disabled, fallbackPlacements: _fallbackPlacementsProp, padding: t2, placement: t3, portal: portalProp, radius: t4, scheme, shadow: t5, zOffset: _zOffset, delay, ...restProps} = props, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacementsProp, $[3] = _zOffset, $[4] = childProp, $[5] = content, $[6] = delay, $[7] = disabled, $[8] = portalProp, $[9] = restProps, $[10] = scheme, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5);
-	let _animate = t0 !== void 0 && t0, arrowProp = t1 !== void 0 && t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = !usePrefersReducedMotion() && _animate, t6;
-	$[17] === fallbackPlacementsProp ? t6 = $[18] : (t6 = _getArrayProp(fallbackPlacementsProp), $[17] = fallbackPlacementsProp, $[18] = t6);
-	let fallbackPlacements = t6, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0), t7;
-	$[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], useImperativeHandle(forwardedRef, t7);
-	let portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, t8;
-	$[20] !== animate || $[21] !== arrowProp || $[22] !== boundaryElement || $[23] !== fallbackPlacements ? (t8 = {
-		animate,
-		arrowProp,
-		arrowRef,
-		boundaryElement,
-		fallbackPlacements,
-		rootBoundary: "viewport"
-	}, $[20] = animate, $[21] = arrowProp, $[22] = boundaryElement, $[23] = fallbackPlacements, $[24] = t8) : t8 = $[24];
-	let middleware = useMiddleware(t8), t9;
-	$[25] === referenceElement ? t9 = $[26] : (t9 = { reference: referenceElement }, $[25] = referenceElement, $[26] = t9);
-	let t10;
-	$[27] !== middleware || $[28] !== placementProp || $[29] !== t9 ? (t10 = {
-		middleware,
-		placement: placementProp,
-		whileElementsMounted: autoUpdate,
-		elements: t9
-	}, $[27] = middleware, $[28] = placementProp, $[29] = t9, $[30] = t10) : t10 = $[30];
-	let { floatingStyles, placement, middlewareData, refs, update } = useFloating(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), t11;
-	$[31] === delayGroupContext ? t11 = $[32] : (t11 = delayGroupContext || {}, $[31] = delayGroupContext, $[32] = t11);
-	let { setIsGroupActive, setOpenTooltipId } = t11, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, t12;
-	$[33] !== closeDelay || $[34] !== isInsideGroup || $[35] !== openDelay || $[36] !== setIsGroupActive || $[37] !== setIsOpen || $[38] !== setOpenTooltipId || $[39] !== tooltipId ? (t12 = (open, immediate) => {
-		if (isInsideGroup) if (open) {
-			let groupedOpenDelay = immediate ? 0 : openDelay;
-			setIsGroupActive?.(open, groupedOpenDelay), setOpenTooltipId?.(tooltipId, groupedOpenDelay);
-		} else setIsGroupActive?.(open, closeDelay > 200 ? closeDelay : 200), setOpenTooltipId?.(null, immediate ? 0 : closeDelay);
-		else setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-	}, $[33] = closeDelay, $[34] = isInsideGroup, $[35] = openDelay, $[36] = setIsGroupActive, $[37] = setIsOpen, $[38] = setOpenTooltipId, $[39] = tooltipId, $[40] = t12) : t12 = $[40];
-	let handleIsOpenChange = t12, t13;
-	$[41] !== childProp?.props || $[42] !== handleIsOpenChange ? (t13 = (e) => {
-		handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-	}, $[41] = childProp?.props, $[42] = handleIsOpenChange, $[43] = t13) : t13 = $[43], childProp?.props;
-	let handleBlur = t13, t14;
-	$[44] !== childProp?.props || $[45] !== handleIsOpenChange ? (t14 = (e_0) => {
-		handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-	}, $[44] = childProp?.props, $[45] = handleIsOpenChange, $[46] = t14) : t14 = $[46], childProp?.props;
-	let handleClick = t14, t15;
-	$[47] !== childProp?.props || $[48] !== handleIsOpenChange ? (t15 = (e_1) => {
-		handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-	}, $[47] = childProp?.props, $[48] = handleIsOpenChange, $[49] = t15) : t15 = $[49], childProp?.props;
-	let handleContextMenu = t15, t16;
-	$[50] !== childProp?.props || $[51] !== handleIsOpenChange ? (t16 = (e_2) => {
-		handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-	}, $[50] = childProp?.props, $[51] = handleIsOpenChange, $[52] = t16) : t16 = $[52], childProp?.props;
-	let handleFocus = t16, t17;
-	$[53] !== childProp?.props || $[54] !== handleIsOpenChange ? (t17 = (e_3) => {
-		handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-	}, $[53] = childProp?.props, $[54] = handleIsOpenChange, $[55] = t17) : t17 = $[55], childProp?.props;
-	let handleMouseEnter = t17, t18;
-	$[56] !== childProp?.props || $[57] !== handleIsOpenChange ? (t18 = (e_4) => {
-		handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-	}, $[56] = childProp?.props, $[57] = handleIsOpenChange, $[58] = t18) : t18 = $[58], childProp?.props;
-	let handleMouseLeave = t18, t19;
-	$[59] !== handleIsOpenChange || $[60] !== isInsideGroup || $[61] !== referenceElement || $[62] !== showTooltip ? (t19 = {
-		handleIsOpenChange,
-		referenceElement,
-		showTooltip,
-		isInsideGroup
-	}, $[59] = handleIsOpenChange, $[60] = isInsideGroup, $[61] = referenceElement, $[62] = showTooltip, $[63] = t19) : t19 = $[63], useCloseOnMouseLeave(t19);
-	let t20, t21;
-	$[64] !== disabled || $[65] !== handleIsOpenChange || $[66] !== showTooltip ? (t20 = () => {
-		disabled && showTooltip && handleIsOpenChange(!1);
-	}, t21 = [
-		disabled,
-		handleIsOpenChange,
-		showTooltip
-	], $[64] = disabled, $[65] = handleIsOpenChange, $[66] = showTooltip, $[67] = t20, $[68] = t21) : (t20 = $[67], t21 = $[68]), useEffect(t20, t21);
-	let t22, t23;
-	$[69] !== content || $[70] !== handleIsOpenChange || $[71] !== showTooltip ? (t22 = () => {
-		!content && showTooltip && handleIsOpenChange(!1);
-	}, t23 = [
-		content,
-		handleIsOpenChange,
-		showTooltip
-	], $[69] = content, $[70] = handleIsOpenChange, $[71] = showTooltip, $[72] = t22, $[73] = t23) : (t22 = $[72], t23 = $[73]), useEffect(t22, t23);
-	let t24, t25;
-	$[74] !== handleIsOpenChange || $[75] !== showTooltip ? (t24 = () => {
-		if (!showTooltip) return;
-		let handleWindowKeyDown = function handleWindowKeyDown(event) {
-			event.key === "Escape" && handleIsOpenChange(!1, !0);
-		};
-		return window.addEventListener("keydown", handleWindowKeyDown), () => {
-			window.removeEventListener("keydown", handleWindowKeyDown);
-		};
-	}, t25 = [handleIsOpenChange, showTooltip], $[74] = handleIsOpenChange, $[75] = showTooltip, $[76] = t24, $[77] = t25) : (t24 = $[76], t25 = $[77]), useEffect(t24, t25);
-	let t26;
-	$[78] !== boundaryElement || $[79] !== portalElement?.offsetWidth ? (t26 = () => {
-		let availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
-		setTooltipMaxWidth(Math.min(...availableWidths) - 8);
-	}, $[78] = boundaryElement, $[79] = portalElement?.offsetWidth, $[80] = t26) : t26 = $[80];
-	let t27;
-	$[81] !== boundaryElement || $[82] !== portalElement ? (t27 = [boundaryElement, portalElement], $[81] = boundaryElement, $[82] = portalElement, $[83] = t27) : t27 = $[83], useLayoutEffect(t26, t27);
-	let t28;
-	$[84] === update ? t28 = $[85] : (t28 = (arrowEl) => {
-		arrowRef.current = arrowEl, update();
-	}, $[84] = update, $[85] = t28);
-	let setArrow = t28, t29;
-	$[86] === refs ? t29 = $[87] : (t29 = (node) => {
-		ref.current = node, refs.setFloating(node);
-	}, $[86] = refs, $[87] = t29);
-	let setFloating = t29, t30;
-	bb0: {
-		if (!childProp) {
-			t30 = null;
-			break bb0;
-		}
-		let t31;
-		$[88] !== childProp || $[89] !== handleBlur || $[90] !== handleClick || $[91] !== handleContextMenu || $[92] !== handleFocus || $[93] !== handleMouseEnter || $[94] !== handleMouseLeave ? (t31 = cloneElement(childProp, {
-			onBlur: handleBlur,
-			onFocus: handleFocus,
-			onMouseEnter: handleMouseEnter,
-			onMouseLeave: handleMouseLeave,
-			onClick: handleClick,
-			onContextMenu: handleContextMenu,
-			ref: setReferenceElement
-		}), $[88] = childProp, $[89] = handleBlur, $[90] = handleClick, $[91] = handleContextMenu, $[92] = handleFocus, $[93] = handleMouseEnter, $[94] = handleMouseLeave, $[95] = t31) : t31 = $[95], t30 = t31;
-	}
-	let child = t30, t31;
-	$[96] === childProp ? t31 = $[97] : (t31 = childProp ? getElementRef(childProp) : null, $[96] = childProp, $[97] = t31);
-	let t32, t33;
-	if ($[98] === referenceElement ? (t32 = $[99], t33 = $[100]) : (t32 = () => referenceElement, t33 = [referenceElement], $[98] = referenceElement, $[99] = t32, $[100] = t33), useImperativeHandle(t31, t32, t33), !child) {
-		let t34;
-		return $[101] === Symbol.for("react.memo_cache_sentinel") ? (t34 = /* @__PURE__ */ jsx(Fragment$1, {}), $[101] = t34) : t34 = $[101], t34;
-	}
-	if (disabled) return child;
-	let t34 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0, t35;
-	$[102] !== floatingStyles || $[103] !== t34 ? (t35 = {
-		...floatingStyles,
-		maxWidth: t34
-	}, $[102] = floatingStyles, $[103] = t34, $[104] = t35) : t35 = $[104];
-	let t36;
-	$[105] !== animate || $[106] !== arrowProp || $[107] !== arrowX || $[108] !== arrowY || $[109] !== content || $[110] !== originX || $[111] !== originY || $[112] !== padding || $[113] !== placement || $[114] !== radius || $[115] !== restProps || $[116] !== scheme || $[117] !== setArrow || $[118] !== setFloating || $[119] !== shadow ? (t36 = /* @__PURE__ */ jsx(TooltipCard, {
+const StyledLayer = /* @__PURE__ */ styled.div.withConfig({
+	displayName: "StyledLayer",
+	componentId: "sc-c59p9w-0"
+})({ position: "relative" }), LayerChildren = forwardRef(function LayerChildren(props, forwardedRef) {
+	let $ = c(22), children, onActivate, onFocus, restProps, t0;
+	$[0] === props ? (children = $[1], onActivate = $[2], onFocus = $[3], restProps = $[4], t0 = $[5]) : ({children, onActivate, onFocus, style: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = onActivate, $[3] = onFocus, $[4] = restProps, $[5] = t0);
+	let style = t0 === void 0 ? EMPTY_RECORD : t0, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer), t1;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[6] = t1) : t1 = $[6], useImperativeHandle(forwardedRef, t1);
+	let t2, t3;
+	$[7] !== isTopLayer || $[8] !== onActivate ? (t2 = () => {
+		isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
+	}, t3 = [isTopLayer, onActivate], $[7] = isTopLayer, $[8] = onActivate, $[9] = t2, $[10] = t3) : (t2 = $[9], t3 = $[10]), useEffect(t2, t3);
+	let t4;
+	$[11] !== isTopLayer || $[12] !== onFocus ? (t4 = (event) => {
+		onFocus?.(event);
+		let rootElement = ref.current, target = document.activeElement;
+		!isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
+	}, $[11] = isTopLayer, $[12] = onFocus, $[13] = t4) : t4 = $[13];
+	let handleFocus = t4, t5;
+	$[14] !== style || $[15] !== zIndex ? (t5 = {
+		...style,
+		zIndex
+	}, $[14] = style, $[15] = zIndex, $[16] = t5) : t5 = $[16];
+	let t6;
+	return $[17] !== children || $[18] !== handleFocus || $[19] !== restProps || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledLayer, {
 		...restProps,
-		animate,
-		arrow: arrowProp,
-		arrowRef: setArrow,
-		arrowX,
-		arrowY,
-		originX,
-		originY,
-		padding,
-		placement,
-		radius,
-		ref: setFloating,
-		scheme,
-		shadow,
-		children: content
-	}), $[105] = animate, $[106] = arrowProp, $[107] = arrowX, $[108] = arrowY, $[109] = content, $[110] = originX, $[111] = originY, $[112] = padding, $[113] = placement, $[114] = radius, $[115] = restProps, $[116] = scheme, $[117] = setArrow, $[118] = setFloating, $[119] = shadow, $[120] = t36) : t36 = $[120];
-	let t37;
-	$[121] !== restProps || $[122] !== setFloating || $[123] !== t35 || $[124] !== t36 || $[125] !== zOffset ? (t37 = /* @__PURE__ */ jsx(StyledTooltip, {
-		"data-ui": "Tooltip",
+		"data-ui": "Layer",
+		onFocus: handleFocus,
+		ref,
+		style: t5,
+		children
+	}), $[17] = children, $[18] = handleFocus, $[19] = restProps, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+}), Layer = forwardRef(function Layer(props, ref) {
+	let $ = c(11), children, restProps, t0;
+	$[0] === props ? (children = $[1], restProps = $[2], t0 = $[3]) : ({children, zOffset: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0);
+	let zOffset = t0 === void 0 ? 1 : t0, t1;
+	$[4] !== children || $[5] !== ref || $[6] !== restProps ? (t1 = /* @__PURE__ */ jsx(LayerChildren, {
 		...restProps,
-		ref: setFloating,
-		style: t35,
+		ref,
+		children
+	}), $[4] = children, $[5] = ref, $[6] = restProps, $[7] = t1) : t1 = $[7];
+	let t2;
+	return $[8] !== t1 || $[9] !== zOffset ? (t2 = /* @__PURE__ */ jsx(LayerProvider, {
 		zOffset,
-		children: t36
-	}), $[121] = restProps, $[122] = setFloating, $[123] = t35, $[124] = t36, $[125] = zOffset, $[126] = t37) : t37 = $[126];
-	let tooltip = t37, t38;
-	$[127] !== portalProp || $[128] !== showTooltip || $[129] !== tooltip ? (t38 = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, {
-		__unstable_name: typeof portalProp == "string" ? portalProp : void 0,
-		children: tooltip
-	}) : tooltip), $[127] = portalProp, $[128] = showTooltip, $[129] = tooltip, $[130] = t38) : t38 = $[130];
-	let children = t38, t39;
-	$[131] !== animate || $[132] !== children ? (t39 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[131] = animate, $[132] = children, $[133] = t39) : t39 = $[133];
-	let t40;
-	return $[134] !== child || $[135] !== t39 ? (t40 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t39, child] }), $[134] = child, $[135] = t39, $[136] = t40) : t40 = $[136], t40;
+		children: t1
+	}), $[8] = t1, $[9] = zOffset, $[10] = t2) : t2 = $[10], t2;
 });
-function useMiddleware(t0) {
-	let $ = c(17), { animate, arrowProp, arrowRef, boundaryElement, fallbackPlacements, rootBoundary } = t0, ret;
-	if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== boundaryElement || $[4] !== fallbackPlacements || $[5] !== rootBoundary) {
-		ret = [];
-		let t1 = boundaryElement || void 0, t2;
-		$[7] !== fallbackPlacements || $[8] !== rootBoundary || $[9] !== t1 ? (t2 = flip({
-			boundary: t1,
-			fallbackPlacements,
-			padding: 4,
-			rootBoundary
-		}), $[7] = fallbackPlacements, $[8] = rootBoundary, $[9] = t1, $[10] = t2) : t2 = $[10], ret.push(t2);
-		let t3;
-		$[11] === Symbol.for("react.memo_cache_sentinel") ? (t3 = offset({ mainAxis: 4 }), $[11] = t3) : t3 = $[11], ret.push(t3);
-		let t4 = boundaryElement || void 0, t5;
-		if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = shift({
-			boundary: t4,
-			rootBoundary,
-			padding: 4
-		}), $[12] = rootBoundary, $[13] = t4, $[14] = t5) : t5 = $[14], ret.push(t5), arrowProp) {
-			let t6;
-			$[15] === arrowRef ? t6 = $[16] : (t6 = arrow({
-				element: arrowRef,
-				padding: 4
-			}), $[15] = arrowRef, $[16] = t6), ret.push(t6);
+function inlineBaseStyle() {
+	return {
+		lineHeight: "0",
+		"&&:not([hidden])": { display: "block" },
+		"& > div": {
+			display: "inline-block",
+			verticalAlign: "middle"
 		}
-		animate && ret.push(origin), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = boundaryElement, $[4] = fallbackPlacements, $[5] = rootBoundary, $[6] = ret;
-	} else ret = $[6];
-	return ret;
+	};
 }
-/**
-* As `useEffectEvent` should never be passed to other components or hooks, this custom hook groups together the `useEffectEvent` and the `useEffect` hook using it.
-* @see https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events:~:text=Never%20pass%20them%20to%20other%20components%20or%20Hooks
-*/
-function useCloseOnMouseLeave(t0) {
-	let $ = c(10), { handleIsOpenChange, referenceElement, showTooltip, isInsideGroup } = t0, t1;
-	$[0] !== handleIsOpenChange || $[1] !== referenceElement ? (t1 = (target, teardown) => {
-		referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
-	}, $[0] = handleIsOpenChange, $[1] = referenceElement, $[2] = t1) : t1 = $[2];
-	let onMouseMove = useEffectEvent(t1), t2;
-	$[3] !== isInsideGroup || $[4] !== onMouseMove || $[5] !== showTooltip ? (t2 = () => {
-		if (!showTooltip || isInsideGroup) return;
-		let handleMouseMove = (event) => {
-			onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
+function inlineSpaceStyle(props) {
+	let { media, space } = getTheme_v2(props.theme);
+	return _responsive(media, props.$space, (spaceIndex) => {
+		let _space = rem(spaceIndex === .5 ? space[1] / 2 : space[spaceIndex]);
+		return {
+			margin: `-${_space} 0 0 -${_space}`,
+			"& > div": { padding: `${_space} 0 0 ${_space}` }
 		};
-		return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
-	}, $[3] = isInsideGroup, $[4] = onMouseMove, $[5] = showTooltip, $[6] = t2) : t2 = $[6];
-	let t3;
-	$[7] !== isInsideGroup || $[8] !== showTooltip ? (t3 = [isInsideGroup, showTooltip], $[7] = isInsideGroup, $[8] = showTooltip, $[9] = t3) : t3 = $[9], useEffect(t2, t3);
+	});
+}
+const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
+	displayName: "StyledInline",
+	componentId: "sc-zsbqh7-0"
+})(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function Inline(props, ref) {
+	let $ = c(16), as, childrenProp, deprecated_space, gap, restProps;
+	$[0] === props ? (as = $[1], childrenProp = $[2], deprecated_space = $[3], gap = $[4], restProps = $[5]) : ({as, children: childrenProp, gap, space: deprecated_space, ...restProps} = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = deprecated_space, $[4] = gap, $[5] = restProps);
+	let spacing = gap === void 0 ? deprecated_space : gap, t0;
+	$[6] === childrenProp ? t0 = $[7] : (t0 = Children.map(childrenProp, _temp$4), $[6] = childrenProp, $[7] = t0);
+	let children = t0, t1;
+	$[8] === spacing ? t1 = $[9] : (t1 = _getArrayProp(spacing), $[8] = spacing, $[9] = t1);
+	let t2 = ref, t3;
+	return $[10] !== as || $[11] !== children || $[12] !== restProps || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, {
+		"data-ui": "Inline",
+		...restProps,
+		$space: t1,
+		forwardedAs: as,
+		ref: t2,
+		children
+	}), $[10] = as, $[11] = children, $[12] = restProps, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
+});
+function _temp$4(child) {
+	return child && /* @__PURE__ */ jsx("div", { children: child });
+}
+function kbdStyle() {
+	return 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);box-shadow:inset 0 0 0 1px var(--card-border-color);background:var(--card-bg-color);font:inherit;vertical-align:top;&:not([hidden]){display:inline-block;}`;
 }
-const StyledHotkeys = styled.kbd.withConfig({
+const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
+	displayName: "StyledKBD",
+	componentId: "sc-xzhxcv-0"
+})(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function KBD(props, ref) {
+	let $ = c(19), children, restProps, t0, t1, t2;
+	$[0] === props ? (children = $[1], restProps = $[2], t0 = $[3], t1 = $[4], t2 = $[5]) : ({children, fontSize: t0, padding: t1, radius: t2, ...restProps} = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0, $[4] = t1, $[5] = t2);
+	let fontSize = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? 2 : t2, t3;
+	$[6] === radius ? t3 = $[7] : (t3 = _getArrayProp(radius), $[6] = radius, $[7] = t3);
+	let t4;
+	$[8] !== children || $[9] !== fontSize ? (t4 = /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: fontSize,
+		weight: "semibold",
+		children
+	}), $[8] = children, $[9] = fontSize, $[10] = t4) : t4 = $[10];
+	let t5;
+	$[11] !== padding || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, {
+		as: "span",
+		padding,
+		children: t4
+	}), $[11] = padding, $[12] = t4, $[13] = t5) : t5 = $[13];
+	let t6;
+	return $[14] !== ref || $[15] !== restProps || $[16] !== t3 || $[17] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledKBD, {
+		"data-ui": "KBD",
+		...restProps,
+		$radius: t3,
+		ref,
+		children: t5
+	}), $[14] = ref, $[15] = restProps, $[16] = t3, $[17] = t5, $[18] = t6) : t6 = $[18], t6;
+}), StyledHotkeys = styled.kbd.withConfig({
 	displayName: "StyledHotkeys",
-	componentId: "sc-07x5rd-0"
+	componentId: "sc-1soubc-0"
 })`font:inherit;padding:1px;&:not([hidden]){display:block;}`, Key = styled(KBD).withConfig({
 	displayName: "Key",
-	componentId: "sc-07x5rd-1"
+	componentId: "sc-1soubc-1"
 })`&:not([hidden]){display:block;}`, Hotkeys = forwardRef(function Hotkeys(props, ref) {
 	let $ = c(27), fontSize, gap, keys, padding, radius, restProps, t0;
 	$[0] === props ? (fontSize = $[1], gap = $[2], keys = $[3], padding = $[4], radius = $[5], restProps = $[6], t0 = $[7]) : ({fontSize, gap, keys, padding, radius, space: t0, ...restProps} = props, $[0] = props, $[1] = fontSize, $[2] = gap, $[3] = keys, $[4] = padding, $[5] = radius, $[6] = restProps, $[7] = t0);
@@ -2801,7 +2280,7 @@ function useMenuController(props) {
 	}, $[1] = t1) : t1 = $[1];
 	let setActiveIndex = t1, t2;
 	$[2] === rootElementRef ? t2 = $[3] : (t2 = (element, selected) => {
-		if (!element) return _temp$1;
+		if (!element) return _temp$3;
 		if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
 			let selectedIndex = elementsRef.current.indexOf(element);
 			setActiveIndex(selectedIndex);
@@ -2904,10 +2383,10 @@ function useMenuController(props) {
 		mount
 	}, $[15] = activeElement, $[16] = activeIndex, $[17] = handleItemMouseLeave, $[18] = handleKeyDown, $[19] = mount, $[20] = t8) : t8 = $[20], t8;
 }
-function _temp$1() {}
+function _temp$3() {}
 const StyledMenu = styled(Box).withConfig({
 	displayName: "StyledMenu",
-	componentId: "sc-88w4l4-0"
+	componentId: "sc-xvs9y5-0"
 })`outline:none;overflow:auto;`, Menu = forwardRef(function Menu(props, forwardedRef) {
 	let $ = c(50), _shouldFocus, children, gap, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
 	if ($[0] !== props) {
@@ -2972,7 +2451,7 @@ const StyledMenu = styled(Box).withConfig({
 	}), $[47] = t11, $[48] = value, $[49] = t12) : t12 = $[49], t12;
 }), MenuDivider = styled.hr.withConfig({
 	displayName: "MenuDivider",
-	componentId: "sc-8tblqx-0"
+	componentId: "sc-sxuath-0"
 })`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
 function selectableBaseStyle() {
 	return css`background-color:inherit;color:inherit;&[data-as='button']{-webkit-font-smoothing:inherit;appearance:none;outline:none;font:inherit;text-align:inherit;border:0;width:-moz-available;width:-webkit-fill-available;width:stretch;}&[data-as='a']{text-decoration:none;}`;
@@ -2986,7 +2465,7 @@ function selectableColorStyle(props) {
 */
 const Selectable = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "Selectable",
-	componentId: "sc-sk8nre-0"
+	componentId: "sc-njdnrn-0"
 })(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
 	let value = useContext(MenuContext);
@@ -3144,7 +2623,7 @@ const MenuGroup = function MenuGroup(props) {
 		paddingLeft
 	}, $[34] = padding, $[35] = paddingBottom, $[36] = paddingLeft, $[37] = paddingRight, $[38] = paddingTop, $[39] = paddingX, $[40] = paddingY, $[41] = t10) : t10 = $[41];
 	let paddingProps = t10, t11;
-	$[42] === fontSize ? t11 = $[43] : (t11 = _getArrayProp(fontSize).map(_temp), $[42] = fontSize, $[43] = t11);
+	$[42] === fontSize ? t11 = $[43] : (t11 = _getArrayProp(fontSize).map(_temp$2), $[42] = fontSize, $[43] = t11);
 	let hotkeysFontSize = t11, t12;
 	$[44] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (el) => {
 		ref.current = el, setRootElement(el);
@@ -3216,12 +2695,12 @@ const MenuGroup = function MenuGroup(props) {
 		children: [t20, t21]
 	}), $[60] = as, $[61] = disabled, $[62] = handleClick, $[63] = onItemMouseEnter, $[64] = onItemMouseLeave, $[65] = restProps, $[66] = scheme, $[67] = t13, $[68] = t14, $[69] = t15, $[70] = t16, $[71] = t18, $[72] = t19, $[73] = t20, $[74] = t21, $[75] = t22) : t22 = $[75], t22;
 });
-function _temp(s) {
+function _temp$2(s) {
 	return s - 1;
 }
 const CustomButton = styled(Button).withConfig({
 	displayName: "CustomButton",
-	componentId: "sc-rhibqq-0"
+	componentId: "sc-whlh6p-0"
 })`max-width:100%;`, Tab = forwardRef(function Tab(props, forwardedRef) {
 	let $ = c(30), focused, icon, id, label, onClick, onFocus, restProps, selected, t0, t1;
 	$[0] === props ? (focused = $[1], icon = $[2], id = $[3], label = $[4], onClick = $[5], onFocus = $[6], restProps = $[7], selected = $[8], t0 = $[9], t1 = $[10]) : ({icon, id, focused, fontSize: t0, label, onClick, onFocus, padding: t1, selected, ...restProps} = props, $[0] = props, $[1] = focused, $[2] = icon, $[3] = id, $[4] = label, $[5] = onClick, $[6] = onFocus, $[7] = restProps, $[8] = selected, $[9] = t0, $[10] = t1);
@@ -3261,7 +2740,7 @@ const CustomButton = styled(Button).withConfig({
 	}), $[18] = fontSize, $[19] = handleFocus, $[20] = icon, $[21] = id, $[22] = label, $[23] = onClick, $[24] = padding, $[25] = restProps, $[26] = selected, $[27] = t7, $[28] = t8, $[29] = t9) : t9 = $[29], t9;
 }), CustomInline = styled(Inline).withConfig({
 	displayName: "CustomInline",
-	componentId: "sc-40huc5-0"
+	componentId: "sc-tlz8f1-0"
 })`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`, TabList = forwardRef(function TabList(props, ref) {
 	let $ = c(15), childrenProp, restProps;
 	$[0] === props ? (childrenProp = $[1], restProps = $[2]) : ({children: childrenProp, ...restProps} = props, $[0] = props, $[1] = childrenProp, $[2] = restProps);
@@ -3287,7 +2766,535 @@ const CustomButton = styled(Button).withConfig({
 		role: "tablist",
 		children: tabs
 	}), $[10] = handleKeyDown, $[11] = ref, $[12] = restProps, $[13] = tabs, $[14] = t2) : t2 = $[14], t2;
-});
-export { responsiveInputPaddingStyle as $, useMediaIndex as A, parseColor as At, _cardColorStyle as B, BoundaryElementContext as C, isHTMLTextAreaElement as Ct, Grid as D, hexToRgb as Dt, Inline as E, createColorTheme as Et, _ResizeObserver as F, studioTheme as Ft, SpanWithTextOverflow as G, Flex as H, useCustomValidity as I, textInputBaseStyle as J, responsiveRadiusStyle as K, useClickOutsideEvent as L, useGlobalKeyDown as M, rgbToHsl as Mt, useElementSize as N, rgba as Nt, usePrefersReducedMotion as O, hslToRgb as Ot, _elementSizeObserver as P, screen as Pt, responsiveInputPaddingIconRightStyle as Q, Card as R, isRecord as S, isHTMLSelectElement as St, KBD as T, EMPTY_RECORD as Tt, Text as U, Spinner as V, Box as W, textInputRepresentationStyle as X, textInputFontSizeStyle as Y, textInputRootStyle as Z, usePortal as _, containsOrEqualsElement as _t, MenuDivider as a, useRootTheme as at, LayerProvider as b, isHTMLElement as bt, Tooltip as c, responsiveTextFont as ct, useDelayedState as d, _fillCSSObject as dt, focusRingBorderStyle as et, TextInput as f, _getArrayProp as ft, Portal as g, _isEnterToClickElement as gt, PortalProvider as h, rem as ht, MenuGroup as i, ThemeColorProvider as it, useMatchMedia as j, rgbToHex as jt, usePrefersDark as k, multiply as kt, useTooltipDelayGroup as l, responsiveTextAlignStyle as lt, Popover as m, _responsive as mt, Tab as n, useTheme$1 as nt, Menu as o, ThemeProvider$1 as ot, Stack as p, _getResponsiveSpace as pt, responsivePaddingStyle as q, MenuItem as r, useTheme_v2 as rt, Hotkeys as s, createGlobalScopedContext as st, TabList as t, focusRingStyle as tt, TooltipDelayGroupContext as u, responsiveFont as ut, Layer as v, isHTMLAnchorElement as vt, Arrow as w, EMPTY_ARRAY as wt, useBoundaryElement as x, isHTMLInputElement as xt, useLayer as y, isHTMLButtonElement as yt, Button as z };
+}), GRID_CSS = {
+	"&&:not([hidden])": { display: "grid" },
+	"&[data-as=\"ul\"],&[data-as=\"ol\"]": { listStyle: "none" }
+}, GRID_AUTO_COLUMS = {
+	auto: "auto",
+	min: "min-content",
+	max: "max-content",
+	fr: "minmax(0, 1fr)"
+}, GRID_AUTO_ROWS = {
+	auto: "auto",
+	min: "min-content",
+	max: "max-content",
+	fr: "minmax(0, 1fr)"
+};
+function responsiveGridStyle() {
+	return [
+		GRID_CSS,
+		responsiveGridAutoFlowStyle,
+		responsiveGridAutoRowsStyle,
+		responsiveGridAutoColsStyle,
+		responsiveGridColumnsStyle,
+		responsiveGridRowsStyle,
+		responsiveGridGapStyle,
+		responsiveGridGapXStyle,
+		responsiveGridGapYStyle
+	];
+}
+function responsiveGridAutoFlowStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$autoFlow, (autoFlow) => ({ gridAutoFlow: autoFlow }));
+}
+function responsiveGridAutoRowsStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$autoRows, (autoRows) => ({ gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows] }));
+}
+function responsiveGridAutoColsStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$autoCols, (autoCols) => ({ gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols] }));
+}
+function responsiveGridColumnsStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$columns, (columns) => ({ gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));` }));
+}
+function responsiveGridRowsStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$rows, (rows) => ({ gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));` }));
+}
+function responsiveGridGapStyle(props) {
+	let { media, space } = getTheme_v2(props.theme);
+	return _responsive(media, props.$gap, (gap) => ({ gridGap: gap ? rem(space[gap]) : void 0 }));
+}
+function responsiveGridGapXStyle(props) {
+	let { media, space } = getTheme_v2(props.theme);
+	return _responsive(media, props.$gapX, (gapX) => ({ columnGap: gapX ? rem(space[gapX]) : void 0 }));
+}
+function responsiveGridGapYStyle(props) {
+	let { media, space } = getTheme_v2(props.theme);
+	return _responsive(media, props.$gapY, (gapY) => ({ rowGap: gapY ? rem(space[gapY]) : void 0 }));
+}
+const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
+	displayName: "StyledGrid",
+	componentId: "sc-osmjhz-0"
+})(responsiveGridStyle), Grid = forwardRef(function Grid(props, ref) {
+	let $ = c(44), as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, gridTemplateColumns, gridTemplateRows, restProps, rows;
+	$[0] === props ? (as = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], children = $[5], columns = $[6], gap = $[7], gapX = $[8], gapY = $[9], gridTemplateColumns = $[10], gridTemplateRows = $[11], restProps = $[12], rows = $[13]) : ({as, autoRows, autoCols, autoFlow, columns, gridTemplateColumns, gap, gapX, gapY, rows, gridTemplateRows, children, ...restProps} = props, $[0] = props, $[1] = as, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = children, $[6] = columns, $[7] = gap, $[8] = gapX, $[9] = gapY, $[10] = gridTemplateColumns, $[11] = gridTemplateRows, $[12] = restProps, $[13] = rows);
+	let t0 = typeof as == "string" ? as : void 0, t1;
+	$[14] === autoRows ? t1 = $[15] : (t1 = _getArrayProp(autoRows), $[14] = autoRows, $[15] = t1);
+	let t2;
+	$[16] === autoCols ? t2 = $[17] : (t2 = _getArrayProp(autoCols), $[16] = autoCols, $[17] = t2);
+	let t3;
+	$[18] === autoFlow ? t3 = $[19] : (t3 = _getArrayProp(autoFlow), $[18] = autoFlow, $[19] = t3);
+	let t4 = gridTemplateColumns === void 0 ? columns : gridTemplateColumns, t5;
+	$[20] === t4 ? t5 = $[21] : (t5 = _getArrayProp(t4), $[20] = t4, $[21] = t5);
+	let t6;
+	$[22] === gap ? t6 = $[23] : (t6 = _getArrayProp(gap), $[22] = gap, $[23] = t6);
+	let t7;
+	$[24] === gapX ? t7 = $[25] : (t7 = _getArrayProp(gapX), $[24] = gapX, $[25] = t7);
+	let t8;
+	$[26] === gapY ? t8 = $[27] : (t8 = _getArrayProp(gapY), $[26] = gapY, $[27] = t8);
+	let t9 = gridTemplateRows === void 0 ? rows : gridTemplateRows, t10;
+	$[28] === t9 ? t10 = $[29] : (t10 = _getArrayProp(t9), $[28] = t9, $[29] = t10);
+	let t11;
+	return $[30] !== as || $[31] !== children || $[32] !== ref || $[33] !== restProps || $[34] !== t0 || $[35] !== t1 || $[36] !== t10 || $[37] !== t2 || $[38] !== t3 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 ? (t11 = /* @__PURE__ */ jsx(StyledGrid, {
+		"data-as": t0,
+		"data-ui": "Grid",
+		...restProps,
+		$autoRows: t1,
+		$autoCols: t2,
+		$autoFlow: t3,
+		$columns: t5,
+		$gap: t6,
+		$gapX: t7,
+		$gapY: t8,
+		$rows: t10,
+		forwardedAs: as,
+		ref,
+		children
+	}), $[30] = as, $[31] = children, $[32] = ref, $[33] = restProps, $[34] = t0, $[35] = t1, $[36] = t10, $[37] = t2, $[38] = t3, $[39] = t5, $[40] = t6, $[41] = t7, $[42] = t8, $[43] = t11) : t11 = $[43], t11;
+});
+/**
+* Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
+*
+* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+*
+* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
+* Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
+* @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
+*
+* @public
+*/
+function usePrefersDark(t0) {
+	return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$1 : t0);
+}
+function _temp$1() {
+	return !1;
+}
+/**
+* @beta
+*/
+function useDelayedState(initialState) {
+	let $ = c(5), [state, setState] = useState(initialState), delayedAction = useRef(void 0), t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (nextState, delay) => {
+		let action = () => {
+			setState(nextState);
+		};
+		if (delayedAction.current &&= (clearTimeout(delayedAction.current), void 0), !delay) return action();
+		delayedAction.current = setTimeout(action, delay);
+	}, $[0] = t0) : t0 = $[0];
+	let onStateChange = t0, t1, t2;
+	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => () => {
+		delayedAction.current && clearTimeout(delayedAction.current);
+	}, t2 = [], $[1] = t1, $[2] = t2) : (t1 = $[1], t2 = $[2]), useEffect(t1, t2);
+	let t3;
+	return $[3] === state ? t3 = $[4] : (t3 = [state, onStateChange], $[3] = state, $[4] = t3), t3;
+}
+const DEFAULT_FALLBACK_PLACEMENTS = {
+	top: [
+		"top-end",
+		"top-start",
+		"bottom",
+		"left",
+		"right"
+	],
+	"top-start": [
+		"top",
+		"top-end",
+		"bottom-start",
+		"left-start",
+		"right-start"
+	],
+	"top-end": [
+		"top",
+		"top-start",
+		"bottom-end",
+		"left-end",
+		"right-end"
+	],
+	bottom: [
+		"bottom-end",
+		"bottom-start",
+		"top",
+		"left",
+		"right"
+	],
+	"bottom-start": [
+		"bottom",
+		"bottom-end",
+		"top-start",
+		"left-start",
+		"right-start"
+	],
+	"bottom-end": [
+		"bottom",
+		"bottom-start",
+		"top-end",
+		"left-end",
+		"right-end"
+	],
+	left: [
+		"left-end",
+		"left-start",
+		"right",
+		"top",
+		"bottom"
+	],
+	"left-start": [
+		"left",
+		"left-end",
+		"right-start",
+		"top-start",
+		"bottom-start"
+	],
+	"left-end": [
+		"left",
+		"left-start",
+		"right-end",
+		"top-end",
+		"bottom-end"
+	],
+	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(motion.create(Card)).withConfig({
+	displayName: "MotionCard",
+	componentId: "sc-k6wgsf-0"
+})`will-change:transform;`, TooltipCard = forwardRef(function TooltipCard(props, ref) {
+	let $ = c(48), animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
+	$[0] === props ? (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], restProps = $[12], scheme = $[13], shadow = $[14], style = $[15]) : ({animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, scheme, shadow, style, ...restProps} = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = restProps, $[13] = scheme, $[14] = shadow, $[15] = style);
+	let t0 = animate ? "transform" : void 0, t1;
+	$[16] !== originX || $[17] !== originY || $[18] !== style || $[19] !== t0 ? (t1 = {
+		originX,
+		originY,
+		willChange: t0,
+		...style
+	}, $[16] = originX, $[17] = originY, $[18] = style, $[19] = t0, $[20] = t1) : t1 = $[20];
+	let rootStyle = t1, t2 = arrowX === null ? void 0 : arrowX, t3 = arrowY === null ? void 0 : arrowY, t4;
+	$[21] !== t2 || $[22] !== t3 ? (t4 = {
+		left: t2,
+		top: t3,
+		right: void 0,
+		bottom: void 0
+	}, $[21] = t2, $[22] = t3, $[23] = t4) : t4 = $[23];
+	let arrowStyle = t4, t5 = restProps, t6;
+	$[24] === animate ? t6 = $[25] : (t6 = animate ? ["hidden", "initial"] : void 0, $[24] = animate, $[25] = t6);
+	let t7;
+	$[26] === animate ? t7 = $[27] : (t7 = animate ? ["visible", "scaleIn"] : void 0, $[26] = animate, $[27] = t7);
+	let t8;
+	$[28] === animate ? t8 = $[29] : (t8 = animate ? ["hidden", "scaleOut"] : void 0, $[28] = animate, $[29] = t8);
+	let t9;
+	$[30] !== arrow || $[31] !== arrowRef || $[32] !== arrowStyle ? (t9 = arrow && /* @__PURE__ */ jsx(Arrow, {
+		ref: arrowRef,
+		style: arrowStyle,
+		width: 15,
+		height: 6,
+		radius: 2
+	}), $[30] = arrow, $[31] = arrowRef, $[32] = arrowStyle, $[33] = t9) : t9 = $[33];
+	let t10;
+	return $[34] !== children || $[35] !== padding || $[36] !== placement || $[37] !== radius || $[38] !== ref || $[39] !== rootStyle || $[40] !== scheme || $[41] !== shadow || $[42] !== t5 || $[43] !== t6 || $[44] !== t7 || $[45] !== t8 || $[46] !== t9 ? (t10 = /* @__PURE__ */ jsxs(MotionCard, {
+		"data-ui": "Tooltip__card",
+		...t5,
+		"data-placement": placement,
+		padding,
+		radius,
+		ref,
+		scheme,
+		shadow,
+		style: rootStyle,
+		variants: POPOVER_MOTION_PROPS.card,
+		transition: POPOVER_MOTION_PROPS.transition,
+		initial: t6,
+		animate: t7,
+		exit: t8,
+		children: [children, t9]
+	}), $[34] = children, $[35] = padding, $[36] = placement, $[37] = radius, $[38] = ref, $[39] = rootStyle, $[40] = scheme, $[41] = shadow, $[42] = t5, $[43] = t6, $[44] = t7, $[45] = t8, $[46] = t9, $[47] = t10) : t10 = $[47], t10;
+}), TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
+/**
+* @beta
+*/
+function useTooltipDelayGroup() {
+	return useContext(TooltipDelayGroupContext);
+}
+const StyledTooltip = styled(Layer).withConfig({
+	displayName: "StyledTooltip",
+	componentId: "sc-4nppkj-0"
+})`pointer-events:none;`, Tooltip = forwardRef(function Tooltip(props, forwardedRef) {
+	let $ = c(137), boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), _boundaryElement, _fallbackPlacementsProp, _zOffset, childProp, content, delay, disabled, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5;
+	$[0] === props ? (_boundaryElement = $[1], _fallbackPlacementsProp = $[2], _zOffset = $[3], childProp = $[4], content = $[5], delay = $[6], disabled = $[7], portalProp = $[8], restProps = $[9], scheme = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16]) : ({animate: t0, arrow: t1, boundaryElement: _boundaryElement, children: childProp, content, disabled, fallbackPlacements: _fallbackPlacementsProp, padding: t2, placement: t3, portal: portalProp, radius: t4, scheme, shadow: t5, zOffset: _zOffset, delay, ...restProps} = props, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacementsProp, $[3] = _zOffset, $[4] = childProp, $[5] = content, $[6] = delay, $[7] = disabled, $[8] = portalProp, $[9] = restProps, $[10] = scheme, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5);
+	let _animate = t0 !== void 0 && t0, arrowProp = t1 !== void 0 && t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = !usePrefersReducedMotion() && _animate, t6;
+	$[17] === fallbackPlacementsProp ? t6 = $[18] : (t6 = _getArrayProp(fallbackPlacementsProp), $[17] = fallbackPlacementsProp, $[18] = t6);
+	let fallbackPlacements = t6, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0), t7;
+	$[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], useImperativeHandle(forwardedRef, t7);
+	let portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, t8;
+	$[20] !== animate || $[21] !== arrowProp || $[22] !== boundaryElement || $[23] !== fallbackPlacements ? (t8 = {
+		animate,
+		arrowProp,
+		arrowRef,
+		boundaryElement,
+		fallbackPlacements,
+		rootBoundary: "viewport"
+	}, $[20] = animate, $[21] = arrowProp, $[22] = boundaryElement, $[23] = fallbackPlacements, $[24] = t8) : t8 = $[24];
+	let middleware = useMiddleware(t8), t9;
+	$[25] === referenceElement ? t9 = $[26] : (t9 = { reference: referenceElement }, $[25] = referenceElement, $[26] = t9);
+	let t10;
+	$[27] !== middleware || $[28] !== placementProp || $[29] !== t9 ? (t10 = {
+		middleware,
+		placement: placementProp,
+		whileElementsMounted: autoUpdate,
+		elements: t9
+	}, $[27] = middleware, $[28] = placementProp, $[29] = t9, $[30] = t10) : t10 = $[30];
+	let { floatingStyles, placement, middlewareData, refs, update } = useFloating(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), t11;
+	$[31] === delayGroupContext ? t11 = $[32] : (t11 = delayGroupContext || {}, $[31] = delayGroupContext, $[32] = t11);
+	let { setIsGroupActive, setOpenTooltipId } = t11, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, t12;
+	$[33] !== closeDelay || $[34] !== isInsideGroup || $[35] !== openDelay || $[36] !== setIsGroupActive || $[37] !== setIsOpen || $[38] !== setOpenTooltipId || $[39] !== tooltipId ? (t12 = (open, immediate) => {
+		if (isInsideGroup) if (open) {
+			let groupedOpenDelay = immediate ? 0 : openDelay;
+			setIsGroupActive?.(open, groupedOpenDelay), setOpenTooltipId?.(tooltipId, groupedOpenDelay);
+		} else setIsGroupActive?.(open, closeDelay > 200 ? closeDelay : 200), setOpenTooltipId?.(null, immediate ? 0 : closeDelay);
+		else setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
+	}, $[33] = closeDelay, $[34] = isInsideGroup, $[35] = openDelay, $[36] = setIsGroupActive, $[37] = setIsOpen, $[38] = setOpenTooltipId, $[39] = tooltipId, $[40] = t12) : t12 = $[40];
+	let handleIsOpenChange = t12, t13;
+	$[41] !== childProp?.props || $[42] !== handleIsOpenChange ? (t13 = (e) => {
+		handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
+	}, $[41] = childProp?.props, $[42] = handleIsOpenChange, $[43] = t13) : t13 = $[43], childProp?.props;
+	let handleBlur = t13, t14;
+	$[44] !== childProp?.props || $[45] !== handleIsOpenChange ? (t14 = (e_0) => {
+		handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
+	}, $[44] = childProp?.props, $[45] = handleIsOpenChange, $[46] = t14) : t14 = $[46], childProp?.props;
+	let handleClick = t14, t15;
+	$[47] !== childProp?.props || $[48] !== handleIsOpenChange ? (t15 = (e_1) => {
+		handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
+	}, $[47] = childProp?.props, $[48] = handleIsOpenChange, $[49] = t15) : t15 = $[49], childProp?.props;
+	let handleContextMenu = t15, t16;
+	$[50] !== childProp?.props || $[51] !== handleIsOpenChange ? (t16 = (e_2) => {
+		handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
+	}, $[50] = childProp?.props, $[51] = handleIsOpenChange, $[52] = t16) : t16 = $[52], childProp?.props;
+	let handleFocus = t16, t17;
+	$[53] !== childProp?.props || $[54] !== handleIsOpenChange ? (t17 = (e_3) => {
+		handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
+	}, $[53] = childProp?.props, $[54] = handleIsOpenChange, $[55] = t17) : t17 = $[55], childProp?.props;
+	let handleMouseEnter = t17, t18;
+	$[56] !== childProp?.props || $[57] !== handleIsOpenChange ? (t18 = (e_4) => {
+		handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
+	}, $[56] = childProp?.props, $[57] = handleIsOpenChange, $[58] = t18) : t18 = $[58], childProp?.props;
+	let handleMouseLeave = t18, t19;
+	$[59] !== handleIsOpenChange || $[60] !== isInsideGroup || $[61] !== referenceElement || $[62] !== showTooltip ? (t19 = {
+		handleIsOpenChange,
+		referenceElement,
+		showTooltip,
+		isInsideGroup
+	}, $[59] = handleIsOpenChange, $[60] = isInsideGroup, $[61] = referenceElement, $[62] = showTooltip, $[63] = t19) : t19 = $[63], useCloseOnMouseLeave(t19);
+	let t20, t21;
+	$[64] !== disabled || $[65] !== handleIsOpenChange || $[66] !== showTooltip ? (t20 = () => {
+		disabled && showTooltip && handleIsOpenChange(!1);
+	}, t21 = [
+		disabled,
+		handleIsOpenChange,
+		showTooltip
+	], $[64] = disabled, $[65] = handleIsOpenChange, $[66] = showTooltip, $[67] = t20, $[68] = t21) : (t20 = $[67], t21 = $[68]), useEffect(t20, t21);
+	let t22, t23;
+	$[69] !== content || $[70] !== handleIsOpenChange || $[71] !== showTooltip ? (t22 = () => {
+		!content && showTooltip && handleIsOpenChange(!1);
+	}, t23 = [
+		content,
+		handleIsOpenChange,
+		showTooltip
+	], $[69] = content, $[70] = handleIsOpenChange, $[71] = showTooltip, $[72] = t22, $[73] = t23) : (t22 = $[72], t23 = $[73]), useEffect(t22, t23);
+	let t24, t25;
+	$[74] !== handleIsOpenChange || $[75] !== showTooltip ? (t24 = () => {
+		if (!showTooltip) return;
+		let handleWindowKeyDown = function handleWindowKeyDown(event) {
+			event.key === "Escape" && handleIsOpenChange(!1, !0);
+		};
+		return window.addEventListener("keydown", handleWindowKeyDown), () => {
+			window.removeEventListener("keydown", handleWindowKeyDown);
+		};
+	}, t25 = [handleIsOpenChange, showTooltip], $[74] = handleIsOpenChange, $[75] = showTooltip, $[76] = t24, $[77] = t25) : (t24 = $[76], t25 = $[77]), useEffect(t24, t25);
+	let t26;
+	$[78] !== boundaryElement || $[79] !== portalElement?.offsetWidth ? (t26 = () => {
+		let availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
+		setTooltipMaxWidth(Math.min(...availableWidths) - 8);
+	}, $[78] = boundaryElement, $[79] = portalElement?.offsetWidth, $[80] = t26) : t26 = $[80];
+	let t27;
+	$[81] !== boundaryElement || $[82] !== portalElement ? (t27 = [boundaryElement, portalElement], $[81] = boundaryElement, $[82] = portalElement, $[83] = t27) : t27 = $[83], useLayoutEffect(t26, t27);
+	let t28;
+	$[84] === update ? t28 = $[85] : (t28 = (arrowEl) => {
+		arrowRef.current = arrowEl, update();
+	}, $[84] = update, $[85] = t28);
+	let setArrow = t28, t29;
+	$[86] === refs ? t29 = $[87] : (t29 = (node) => {
+		ref.current = node, refs.setFloating(node);
+	}, $[86] = refs, $[87] = t29);
+	let setFloating = t29, t30;
+	bb0: {
+		if (!childProp) {
+			t30 = null;
+			break bb0;
+		}
+		let t31;
+		$[88] !== childProp || $[89] !== handleBlur || $[90] !== handleClick || $[91] !== handleContextMenu || $[92] !== handleFocus || $[93] !== handleMouseEnter || $[94] !== handleMouseLeave ? (t31 = cloneElement(childProp, {
+			onBlur: handleBlur,
+			onFocus: handleFocus,
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			onClick: handleClick,
+			onContextMenu: handleContextMenu,
+			ref: setReferenceElement
+		}), $[88] = childProp, $[89] = handleBlur, $[90] = handleClick, $[91] = handleContextMenu, $[92] = handleFocus, $[93] = handleMouseEnter, $[94] = handleMouseLeave, $[95] = t31) : t31 = $[95], t30 = t31;
+	}
+	let child = t30, t31;
+	$[96] === childProp ? t31 = $[97] : (t31 = childProp ? getElementRef(childProp) : null, $[96] = childProp, $[97] = t31);
+	let t32, t33;
+	if ($[98] === referenceElement ? (t32 = $[99], t33 = $[100]) : (t32 = () => referenceElement, t33 = [referenceElement], $[98] = referenceElement, $[99] = t32, $[100] = t33), useImperativeHandle(t31, t32, t33), !child) {
+		let t34;
+		return $[101] === Symbol.for("react.memo_cache_sentinel") ? (t34 = /* @__PURE__ */ jsx(Fragment$1, {}), $[101] = t34) : t34 = $[101], t34;
+	}
+	if (disabled) return child;
+	let t34 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0, t35;
+	$[102] !== floatingStyles || $[103] !== t34 ? (t35 = {
+		...floatingStyles,
+		maxWidth: t34
+	}, $[102] = floatingStyles, $[103] = t34, $[104] = t35) : t35 = $[104];
+	let t36;
+	$[105] !== animate || $[106] !== arrowProp || $[107] !== arrowX || $[108] !== arrowY || $[109] !== content || $[110] !== originX || $[111] !== originY || $[112] !== padding || $[113] !== placement || $[114] !== radius || $[115] !== restProps || $[116] !== scheme || $[117] !== setArrow || $[118] !== setFloating || $[119] !== shadow ? (t36 = /* @__PURE__ */ jsx(TooltipCard, {
+		...restProps,
+		animate,
+		arrow: arrowProp,
+		arrowRef: setArrow,
+		arrowX,
+		arrowY,
+		originX,
+		originY,
+		padding,
+		placement,
+		radius,
+		ref: setFloating,
+		scheme,
+		shadow,
+		children: content
+	}), $[105] = animate, $[106] = arrowProp, $[107] = arrowX, $[108] = arrowY, $[109] = content, $[110] = originX, $[111] = originY, $[112] = padding, $[113] = placement, $[114] = radius, $[115] = restProps, $[116] = scheme, $[117] = setArrow, $[118] = setFloating, $[119] = shadow, $[120] = t36) : t36 = $[120];
+	let t37;
+	$[121] !== restProps || $[122] !== setFloating || $[123] !== t35 || $[124] !== t36 || $[125] !== zOffset ? (t37 = /* @__PURE__ */ jsx(StyledTooltip, {
+		"data-ui": "Tooltip",
+		...restProps,
+		ref: setFloating,
+		style: t35,
+		zOffset,
+		children: t36
+	}), $[121] = restProps, $[122] = setFloating, $[123] = t35, $[124] = t36, $[125] = zOffset, $[126] = t37) : t37 = $[126];
+	let tooltip = t37, t38;
+	$[127] !== portalProp || $[128] !== showTooltip || $[129] !== tooltip ? (t38 = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, {
+		__unstable_name: typeof portalProp == "string" ? portalProp : void 0,
+		children: tooltip
+	}) : tooltip), $[127] = portalProp, $[128] = showTooltip, $[129] = tooltip, $[130] = t38) : t38 = $[130];
+	let children = t38, t39;
+	$[131] !== animate || $[132] !== children ? (t39 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[131] = animate, $[132] = children, $[133] = t39) : t39 = $[133];
+	let t40;
+	return $[134] !== child || $[135] !== t39 ? (t40 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t39, child] }), $[134] = child, $[135] = t39, $[136] = t40) : t40 = $[136], t40;
+});
+function useMiddleware(t0) {
+	let $ = c(17), { animate, arrowProp, arrowRef, boundaryElement, fallbackPlacements, rootBoundary } = t0, ret;
+	if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== boundaryElement || $[4] !== fallbackPlacements || $[5] !== rootBoundary) {
+		ret = [];
+		let t1 = boundaryElement || void 0, t2;
+		$[7] !== fallbackPlacements || $[8] !== rootBoundary || $[9] !== t1 ? (t2 = flip({
+			boundary: t1,
+			fallbackPlacements,
+			padding: 4,
+			rootBoundary
+		}), $[7] = fallbackPlacements, $[8] = rootBoundary, $[9] = t1, $[10] = t2) : t2 = $[10], ret.push(t2);
+		let t3;
+		$[11] === Symbol.for("react.memo_cache_sentinel") ? (t3 = offset({ mainAxis: 4 }), $[11] = t3) : t3 = $[11], ret.push(t3);
+		let t4 = boundaryElement || void 0, t5;
+		if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = shift({
+			boundary: t4,
+			rootBoundary,
+			padding: 4
+		}), $[12] = rootBoundary, $[13] = t4, $[14] = t5) : t5 = $[14], ret.push(t5), arrowProp) {
+			let t6;
+			$[15] === arrowRef ? t6 = $[16] : (t6 = arrow({
+				element: arrowRef,
+				padding: 4
+			}), $[15] = arrowRef, $[16] = t6), ret.push(t6);
+		}
+		animate && ret.push(origin), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = boundaryElement, $[4] = fallbackPlacements, $[5] = rootBoundary, $[6] = ret;
+	} else ret = $[6];
+	return ret;
+}
+/**
+* As `useEffectEvent` should never be passed to other components or hooks, this custom hook groups together the `useEffectEvent` and the `useEffect` hook using it.
+* @see https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events:~:text=Never%20pass%20them%20to%20other%20components%20or%20Hooks
+*/
+function useCloseOnMouseLeave(t0) {
+	let $ = c(10), { handleIsOpenChange, referenceElement, showTooltip, isInsideGroup } = t0, t1;
+	$[0] !== handleIsOpenChange || $[1] !== referenceElement ? (t1 = (target, teardown) => {
+		referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
+	}, $[0] = handleIsOpenChange, $[1] = referenceElement, $[2] = t1) : t1 = $[2];
+	let onMouseMove = useEffectEvent(t1), t2;
+	$[3] !== isInsideGroup || $[4] !== onMouseMove || $[5] !== showTooltip ? (t2 = () => {
+		if (!showTooltip || isInsideGroup) return;
+		let handleMouseMove = (event) => {
+			onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
+		};
+		return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
+	}, $[3] = isInsideGroup, $[4] = onMouseMove, $[5] = showTooltip, $[6] = t2) : t2 = $[6];
+	let t3;
+	$[7] !== isInsideGroup || $[8] !== showTooltip ? (t3 = [isInsideGroup, showTooltip], $[7] = isInsideGroup, $[8] = showTooltip, $[9] = t3) : t3 = $[9], useEffect(t2, t3);
+}
+/**
+* @public
+*/
+function PortalProvider(props) {
+	let $ = c(7), { boundaryElement, children, element, __unstable_elements: elements } = props, fallbackElement = useSyncExternalStore(emptySubscribe, _temp, _temp2), t0 = boundaryElement || null, t1 = element || fallbackElement, t2;
+	$[0] !== elements || $[1] !== t0 || $[2] !== t1 ? (t2 = {
+		version: 0,
+		boundaryElement: t0,
+		element: t1,
+		elements
+	}, $[0] = elements, $[1] = t0, $[2] = t1, $[3] = t2) : t2 = $[3];
+	let value = t2, t3;
+	return $[4] !== children || $[5] !== value ? (t3 = /* @__PURE__ */ jsx(PortalContext.Provider, {
+		value,
+		children
+	}), $[4] = children, $[5] = value, $[6] = t3) : t3 = $[6], t3;
+}
+function _temp2() {
+	return null;
+}
+function _temp() {
+	return document.body;
+}
+const emptySubscribe = () => () => {};
+export { Spinner as $, Arrow as A, parseColor as At, useMediaIndex as B, textInputRepresentationStyle as C, isHTMLTextAreaElement as Ct, useCustomValidity as D, hexToRgb as Dt, responsiveInputPaddingStyle as E, createColorTheme as Et, useBoundaryElement as F, studioTheme as Ft, ThemeColorProvider as G, _elementSizeObserver as H, BoundaryElementContext as I, createGlobalScopedContext as J, useRootTheme as K, isRecord as L, usePortal as M, rgbToHsl as Mt, useLayer as N, rgba as Nt, Stack as O, hslToRgb as Ot, LayerProvider as P, screen as Pt, _cardColorStyle as Q, usePrefersReducedMotion as R, textInputFontSizeStyle as S, isHTMLSelectElement as St, responsiveInputPaddingIconRightStyle as T, EMPTY_RECORD as Tt, _ResizeObserver as U, useElementSize as V, Card as W, focusRingBorderStyle as X, Button as Y, focusRingStyle as Z, Layer as _, containsOrEqualsElement as _t, useDelayedState as a, Flex as at, TextInput as b, isHTMLElement as bt, TabList as c, responsiveRadiusStyle as ct, MenuGroup as d, _fillCSSObject as dt, Text as et, MenuDivider as f, _getArrayProp as ft, Inline as g, _isEnterToClickElement as gt, KBD as h, rem as ht, TooltipDelayGroupContext as i, responsiveTextAlignStyle as it, Portal as j, rgbToHex as jt, Popover as k, multiply as kt, Tab as l, Box as lt, Hotkeys as m, _responsive as mt, Tooltip as n, responsiveTextFont as nt, usePrefersDark as o, useTheme$1 as ot, Menu as p, _getResponsiveSpace as pt, ThemeProvider$1 as q, useTooltipDelayGroup as r, responsiveFont as rt, Grid as s, useTheme_v2 as st, PortalProvider as t, SpanWithTextOverflow as tt, MenuItem as u, responsivePaddingStyle as ut, useGlobalKeyDown as v, isHTMLAnchorElement as vt, textInputRootStyle as w, EMPTY_ARRAY as wt, textInputBaseStyle as x, isHTMLInputElement as xt, useClickOutsideEvent as y, isHTMLButtonElement as yt, useMatchMedia as z };
 
-//# sourceMappingURL=tabList.js.map
+//# sourceMappingURL=portalProvider.js.map