@sanity/ui 3.4.4 → 3.5.0

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

@@ -8,15 +8,15 @@ var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDes
 	value: mod,
 	enumerable: !0
 }) : target, mod));
-const require_theme = require("./theme.cjs");
+const require_getScopedTheme = require("./getScopedTheme.cjs");
 let react_compiler_runtime = require("react-compiler-runtime"), react = require("react");
 react = __toESM(react, 1);
-let react_is = require("react-is"), styled_components = require("styled-components"), react_jsx_runtime = require("react/jsx-runtime"), _sanity_icons_Spinner = require("@sanity/icons/Spinner"), use_effect_event = require("use-effect-event"), _juggle_resize_observer = require("@juggle/resize-observer"), _floating_ui_react_dom = require("@floating-ui/react-dom"), motion_react = require("motion/react"), react_dom = require("react-dom"), _sanity_icons_Close = require("@sanity/icons/Close"), _sanity_icons_ChevronRight = require("@sanity/icons/ChevronRight");
+let styled_components = require("styled-components"), react_jsx_runtime = require("react/jsx-runtime"), react_is = require("react-is"), _sanity_icons_Spinner = require("@sanity/icons/Spinner"), _floating_ui_react_dom = require("@floating-ui/react-dom"), motion_react = require("motion/react"), _juggle_resize_observer = require("@juggle/resize-observer"), react_dom = require("react-dom"), _sanity_icons_Close = require("@sanity/icons/Close"), use_effect_event = require("use-effect-event"), _sanity_icons_ChevronRight = require("@sanity/icons/ChevronRight");
 /**
 * @public
 * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
 */
-const createColorTheme = require_theme.Z, hexToRgb = require_theme.o, hslToRgb = require_theme.s, multiply = require_theme.f, parseColor = require_theme.a, rgbToHex = require_theme.c, rgbToHsl = require_theme.l, rgba = require_theme.r, screen = require_theme.d, studioTheme = require_theme.n(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_DURATION = .2, POPOVER_MOTION_PROPS = {
+const createColorTheme = require_getScopedTheme.a, hexToRgb = require_getScopedTheme.d, hslToRgb = require_getScopedTheme.f, multiply = require_getScopedTheme.c, parseColor = require_getScopedTheme.u, rgbToHex = require_getScopedTheme.p, rgbToHsl = require_getScopedTheme.m, rgba = require_getScopedTheme.l, screen = require_getScopedTheme.s, studioTheme = require_getScopedTheme.o(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_DURATION = .2, POPOVER_MOTION_PROPS = {
 	card: {
 		initial: {
 			scale: .97,
@@ -121,220 +121,9 @@ function _getArrayProp(val, defaultVal) {
 function _getResponsiveSpace(theme, props, spaceIndexes = EMPTY_ARRAY) {
 	if (!Array.isArray(spaceIndexes)) throw Error("the property must be array of numbers");
 	if (spaceIndexes.length === 0) return null;
-	let { media, space } = require_theme.X(theme);
+	let { media, space } = require_getScopedTheme.i(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 } = require_theme.X(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 } = require_theme.X(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 = (0, react.createContext)(defaultValue);
-		return context.displayName = key, context;
-	}
-	return globalScope[symbol] = globalScope[symbol] || (0, react.createContext)(defaultValue), globalScope[symbol];
-}
-/**
-* @internal
-*/
-const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
-/**
-* @public
-*/
-function ThemeProvider(props) {
-	let $ = (0, react_compiler_runtime.c)(15), parentTheme = (0, react.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 = require_theme.t(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__ */ (0, react_jsx_runtime.jsx)("pre", { children: "ThemeProvider: no \"theme\" property provided" }), $[8] = t2) : t2 = $[8], t2;
-	}
-	let t2;
-	$[9] !== children || $[10] !== theme ? (t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_components.ThemeProvider, {
-		theme,
-		children
-	}), $[9] = children, $[10] = theme, $[11] = t2) : t2 = $[11];
-	let t3;
-	return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
-		value: themeContext,
-		children: t2
-	}), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
-}
-/**
-* @public
-*/
-function useRootTheme() {
-	let value = (0, react.useContext)(ThemeContext);
-	if (!value) throw Error("useRootTheme(): missing context value");
-	return value;
-}
-/**
-* @public
-*/
-function ThemeColorProvider(props) {
-	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.jsx)(ThemeProvider, {
-		scheme: t0,
-		theme: root.theme,
-		tone,
-		children
-	}), $[0] = children, $[1] = root.theme, $[2] = t0, $[3] = tone, $[4] = t1) : t1 = $[4], t1;
-}
-/**
-* @public
-*/
-function useTheme() {
-	return (0, styled_components.useTheme)();
-}
-/**
-* @public
-*/
-function useTheme_v2() {
-	let $ = (0, react_compiler_runtime.c)(2), t0 = (0, styled_components.useTheme)(), t1;
-	return $[0] === t0 ? t1 = $[1] : (t1 = require_theme.X(t0), $[0] = t0, $[1] = t1), t1;
-}
-function responsiveBorderStyle() {
-	return [
-		border,
-		borderTop,
-		borderRight,
-		borderBottom,
-		borderLeft
-	];
-}
-function border(props) {
-	let { card, media } = require_theme.X(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 } = require_theme.X(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 } = require_theme.X(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 } = require_theme.X(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 } = require_theme.X(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"
@@ -354,19 +143,19 @@ function responsiveBoxStyle() {
 	];
 }
 function responsiveBoxDisplayStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$display, (display) => ({ "&:not([hidden])": { display } }));
 }
 function responsiveBoxSizingStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$sizing, (sizing) => ({ boxSizing: BOX_SIZING[sizing] }));
 }
 function responsiveBoxHeightStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$height, (height) => ({ height: BOX_HEIGHT[height] }));
 }
 function responsiveBoxOverflowStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$overflow, (overflow) => ({ overflow }));
 }
 const BASE_STYLE$2 = {
@@ -377,52 +166,9 @@ function flexItemStyle() {
 	return [BASE_STYLE$2, responsiveFlexItemStyle];
 }
 function responsiveFlexItemStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return props.$flex ? _responsive(media, props.$flex, (flex) => ({ flex: `${flex}` })) : EMPTY_ARRAY;
 }
-const BASE_STYLE$1 = { "&&:not([hidden])": { display: "flex" } };
-function responsiveFlexStyle() {
-	return [
-		BASE_STYLE$1,
-		responsiveFlexAlignStyle,
-		responsiveFlexGapStyle,
-		responsiveFlexWrapStyle,
-		responsiveFlexJustifyStyle,
-		responsiveFlexDirectionStyle
-	];
-}
-function responsiveFlexAlignStyle(props) {
-	let { media } = require_theme.X(props.theme);
-	return _responsive(media, props.$align, (align) => ({ alignItems: align }));
-}
-function responsiveFlexGapStyle(props) {
-	let { media, space } = require_theme.X(props.theme);
-	return _responsive(media, props.$gap, (gap) => ({ gap: gap ? rem(space[gap]) : void 0 }));
-}
-function responsiveFlexWrapStyle(props) {
-	let { media } = require_theme.X(props.theme);
-	return _responsive(media, props.$wrap, (wrap) => ({ flexWrap: wrap }));
-}
-function responsiveFlexJustifyStyle(props) {
-	let { media } = require_theme.X(props.theme);
-	return _responsive(media, props.$justify, (justify) => ({ justifyContent: justify }));
-}
-function responsiveFlexDirectionStyle(props) {
-	let { media } = require_theme.X(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,
@@ -441,155 +187,31 @@ const GRID_ITEM_ROW = {
 	full: "1 / -1"
 };
 function responsiveGridItemRowStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(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 } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$rowStart, (rowStart) => ({ gridRowStart: `${rowStart}` }));
 }
 function responsiveGridItemRowEndStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: `${rowEnd}` }));
 }
 function responsiveGridItemColumnStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$column, (column) => typeof column == "number" ? { gridColumn: `span ${column} / span ${column}` } : { gridColumn: GRID_ITEM_COLUMN[column] });
 }
 function responsiveGridItemColumnStartStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$columnStart, (columnStart) => ({ gridColumnStart: `${columnStart}` }));
 }
 function responsiveGridItemColumnEndStyle(props) {
-	let { media } = require_theme.X(props.theme);
+	let { media } = require_getScopedTheme.i(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 } = require_theme.X(props.theme);
-	return _responsive(media, props.$autoFlow, (autoFlow) => ({ gridAutoFlow: autoFlow }));
-}
-function responsiveGridAutoRowsStyle(props) {
-	let { media } = require_theme.X(props.theme);
-	return _responsive(media, props.$autoRows, (autoRows) => ({ gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows] }));
-}
-function responsiveGridAutoColsStyle(props) {
-	let { media } = require_theme.X(props.theme);
-	return _responsive(media, props.$autoCols, (autoCols) => ({ gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols] }));
-}
-function responsiveGridColumnsStyle(props) {
-	let { media } = require_theme.X(props.theme);
-	return _responsive(media, props.$columns, (columns) => ({ gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));` }));
-}
-function responsiveGridRowsStyle(props) {
-	let { media } = require_theme.X(props.theme);
-	return _responsive(media, props.$rows, (rows) => ({ gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));` }));
-}
-function responsiveGridGapStyle(props) {
-	let { media, space } = require_theme.X(props.theme);
-	return _responsive(media, props.$gap, (gap) => ({ gridGap: gap ? rem(space[gap]) : void 0 }));
-}
-function responsiveGridGapXStyle(props) {
-	let { media, space } = require_theme.X(props.theme);
-	return _responsive(media, props.$gapX, (gapX) => ({ columnGap: gapX ? rem(space[gapX]) : void 0 }));
-}
-function responsiveGridGapYStyle(props) {
-	let { media, space } = require_theme.X(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 } = require_theme.X(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 = styled_components.css`&:not([hidden]){display:flex;}align-items:center;`;
-function textInputRootStyle() {
-	return ROOT_STYLE;
-}
-function textInputBaseStyle(props) {
-	let { $scheme, $tone, $weight } = props, { color, font } = require_theme.X(props.theme);
-	return styled_components.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 } = require_theme.X(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 } = require_theme.X(props.theme);
-	return styled_components.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;
+function responsiveMarginStyle(props) {
+	let { theme } = props;
 	return [
 		_getResponsiveSpace(theme, ["margin"], props.$margin),
 		_getResponsiveSpace(theme, ["marginLeft", "marginRight"], props.$marginX),
@@ -612,30 +234,9 @@ function responsivePaddingStyle(props) {
 		_getResponsiveSpace(theme, ["paddingLeft"], props.$paddingLeft)
 	].filter(Boolean);
 }
-function responsiveRadiusStyle(props) {
-	let { media, radius } = require_theme.X(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 } = require_theme.X(props.theme);
-	return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
-}
-/** @internal */
-const SpanWithTextOverflow = styled_components.styled.span.withConfig({
-	displayName: "SpanWithTextOverflow",
-	componentId: "sc-xkyu3h-0"
-})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, StyledBox = /* @__PURE__ */ styled_components.styled.div.withConfig({
+const StyledBox = /* @__PURE__ */ styled_components.styled.div.withConfig({
 	displayName: "StyledBox",
-	componentId: "sc-yj6ffl-0"
+	componentId: "sc-p4sc7t-0"
 })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = (0, react.forwardRef)(function Box(props, ref) {
 	let $ = (0, react_compiler_runtime.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,42 +325,60 @@ const SpanWithTextOverflow = styled_components.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 } = require_theme.X(props.theme);
-	return styled_components.css`color:var(--card-fg-color);${$accent && styled_components.css`color:var(--card-accent-fg-color);`} ${$muted && styled_components.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 } = require_getScopedTheme.i(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_components.styled.div.withConfig({
-	displayName: "StyledText",
-	componentId: "sc-d4ufel-0"
-})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = (0, react.forwardRef)(function Text(props, ref) {
-	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, styled_components.styled)(Box).withConfig({
+/**
+* @public
+*/
+function useTheme() {
+	return (0, styled_components.useTheme)();
+}
+/**
+* @public
+*/
+function useTheme_v2() {
+	let $ = (0, react_compiler_runtime.c)(2), t0 = (0, styled_components.useTheme)(), t1;
+	return $[0] === t0 ? t1 = $[1] : (t1 = require_getScopedTheme.i(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 } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$align, (align) => ({ alignItems: align }));
+}
+function responsiveFlexGapStyle(props) {
+	let { media, space } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$gap, (gap) => ({ gap: gap ? rem(space[gap]) : void 0 }));
+}
+function responsiveFlexWrapStyle(props) {
+	let { media } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$wrap, (wrap) => ({ flexWrap: wrap }));
+}
+function responsiveFlexJustifyStyle(props) {
+	let { media } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$justify, (justify) => ({ justifyContent: justify }));
+}
+function responsiveFlexDirectionStyle(props) {
+	let { media } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$direction, (direction) => ({ flexDirection: direction }));
+}
+const StyledFlex = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
 	displayName: "StyledFlex",
-	componentId: "sc-ux9uze-0"
+	componentId: "sc-5lzqa2-0"
 })(flexItemStyle, responsiveFlexStyle), Flex = (0, react.forwardRef)(function Flex(props, ref) {
 	let $ = (0, react_compiler_runtime.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);
@@ -785,41 +404,145 @@ const StyledText = /* @__PURE__ */ styled_components.styled.div.withConfig({
 		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 = styled_components.keyframes`from{transform:rotate(0deg);}to{transform:rotate(360deg);}`, StyledSpinner = (0, styled_components.styled)(Text).withConfig({
-	displayName: "StyledSpinner",
-	componentId: "sc-10l2iw-0"
-})`& > span > svg{animation:${rotate} 500ms linear infinite;}`, Spinner = (0, react.forwardRef)(function Spinner(props, ref) {
-	let $ = (0, react_compiler_runtime.c)(4), t0;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_icons_Spinner.SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
-	let t1;
-	return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSpinner, {
-		"data-ui": "Spinner",
-		...props,
-		ref,
-		children: t0
-	}), $[1] = props, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
 });
 /**
+* Get responsive text align styles.
 * @internal
 */
-function _cardColorStyle(base, color, checkered = !1) {
+function responsiveTextAlignStyle(props) {
+	let { media } = require_getScopedTheme.i(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 } = require_getScopedTheme.i(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 {
-		"--card-backdrop-color": base.backdrop,
-		"--card-focus-ring-color": base.focusRing,
-		"--card-shadow-outline-color": base.shadow.outline,
-		"--card-shadow-umbra-color": base.shadow.umbra,
-		"--card-shadow-penumbra-color": base.shadow.penumbra,
-		"--card-shadow-ambient-color": base.shadow.ambient,
-		"--card-accent-fg-color": color.accent.fg,
-		"--card-avatar-gray-bg-color": color.avatar.gray.bg,
-		"--card-avatar-gray-fg-color": color.avatar.gray.fg,
-		"--card-avatar-blue-bg-color": color.avatar.blue.bg,
-		"--card-avatar-blue-fg-color": color.avatar.blue.fg,
-		"--card-avatar-purple-bg-color": color.avatar.purple.bg,
-		"--card-avatar-purple-fg-color": color.avatar.purple.fg,
-		"--card-avatar-magenta-bg-color": color.avatar.magenta.bg,
-		"--card-avatar-magenta-fg-color": color.avatar.magenta.fg,
-		"--card-avatar-red-bg-color": color.avatar.red.bg,
+		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_components.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 } = require_getScopedTheme.i(props.theme);
+	return styled_components.css`color:var(--card-fg-color);${$accent && styled_components.css`color:var(--card-accent-fg-color);`} ${$muted && styled_components.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_components.styled.div.withConfig({
+	displayName: "StyledText",
+	componentId: "sc-m7q2yn-0"
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = (0, react.forwardRef)(function Text(props, ref) {
+	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = styled_components.keyframes`from{transform:rotate(0deg);}to{transform:rotate(360deg);}`, StyledSpinner = (0, styled_components.styled)(Text).withConfig({
+	displayName: "StyledSpinner",
+	componentId: "sc-k51eu1-0"
+})`& > span > svg{animation:${rotate} 500ms linear infinite;}`, Spinner = (0, react.forwardRef)(function Spinner(props, ref) {
+	let $ = (0, react_compiler_runtime.c)(4), t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_icons_Spinner.SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
+	let t1;
+	return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSpinner, {
+		"data-ui": "Spinner",
+		...props,
+		ref,
+		children: t0
+	}), $[1] = props, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
+});
+/**
+* @internal
+*/
+function _cardColorStyle(base, color, checkered = !1) {
+	return {
+		"--card-backdrop-color": base.backdrop,
+		"--card-focus-ring-color": base.focusRing,
+		"--card-shadow-outline-color": base.shadow.outline,
+		"--card-shadow-umbra-color": base.shadow.umbra,
+		"--card-shadow-penumbra-color": base.shadow.penumbra,
+		"--card-shadow-ambient-color": base.shadow.ambient,
+		"--card-accent-fg-color": color.accent.fg,
+		"--card-avatar-gray-bg-color": color.avatar.gray.bg,
+		"--card-avatar-gray-fg-color": color.avatar.gray.fg,
+		"--card-avatar-blue-bg-color": color.avatar.blue.bg,
+		"--card-avatar-blue-fg-color": color.avatar.blue.fg,
+		"--card-avatar-purple-bg-color": color.avatar.purple.bg,
+		"--card-avatar-purple-fg-color": color.avatar.purple.fg,
+		"--card-avatar-magenta-bg-color": color.avatar.magenta.bg,
+		"--card-avatar-magenta-fg-color": color.avatar.magenta.fg,
+		"--card-avatar-red-bg-color": color.avatar.red.bg,
 		"--card-avatar-red-fg-color": color.avatar.red.fg,
 		"--card-avatar-orange-bg-color": color.avatar.orange.bg,
 		"--card-avatar-orange-fg-color": color.avatar.orange.fg,
@@ -878,11 +601,23 @@ 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
 */
 function buttonBaseStyles(props) {
-	let { $width } = props, { style } = require_theme.X(props.theme);
+	let { $width } = props, { style } = require_getScopedTheme.i(props.theme);
 	return styled_components.css`${style?.button};-webkit-font-smoothing:inherit;appearance:none;display:inline-flex;align-items:center;font:inherit;border:0;outline:none;user-select:none;text-decoration:none;border:0;box-sizing:border-box;padding:0;margin:0;white-space:nowrap;text-align:left;position:relative;vertical-align:top;${$width === "fill" && styled_components.css`width:-moz-available;width:-webkit-fill-available;width:stretch;`} & > span{display:block;flex:1;min-width:0;border-radius:inherit;}&::-moz-focus-inner{border:0;padding:0;}`;
 }
 function combineBoxShadow(...boxShadows) {
@@ -892,7 +627,7 @@ function combineBoxShadow(...boxShadows) {
 * @internal
 */
 function buttonColorStyles(props) {
-	let { $mode } = props, { button, color: baseColor, style } = require_theme.X(props.theme);
+	let { $mode } = props, { button, color: baseColor, style } = require_getScopedTheme.i(props.theme);
 	props.$mode;
 	let mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border = {
 		width: button.border.width,
@@ -929,10 +664,10 @@ function buttonColorStyles(props) {
 }
 const StyledButton = /* @__PURE__ */ styled_components.styled.button.withConfig({
 	displayName: "StyledButton",
-	componentId: "sc-rwh0gh-0"
+	componentId: "sc-5eghxe-0"
 })(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled_components.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 = (0, react.forwardRef)(function Button(props, ref) {
 	let $ = (0, react_compiler_runtime.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,15 +757,158 @@ const StyledButton = /* @__PURE__ */ styled_components.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 responsiveBorderStyle() {
+	return [
+		border,
+		borderTop,
+		borderRight,
+		borderBottom,
+		borderLeft
+	];
+}
+function border(props) {
+	let { card, media } = require_getScopedTheme.i(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 } = require_getScopedTheme.i(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 } = require_getScopedTheme.i(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 } = require_getScopedTheme.i(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 } = require_getScopedTheme.i(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 } = require_getScopedTheme.i(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 = (0, react.createContext)(defaultValue);
+		return context.displayName = key, context;
+	}
+	return globalScope[symbol] = globalScope[symbol] || (0, react.createContext)(defaultValue), globalScope[symbol];
+}
+/**
+* @internal
+*/
+const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
+/**
+* @public
+*/
+function ThemeProvider(props) {
+	let $ = (0, react_compiler_runtime.c)(15), parentTheme = (0, react.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 = require_getScopedTheme.t(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__ */ (0, react_jsx_runtime.jsx)("pre", { children: "ThemeProvider: no \"theme\" property provided" }), $[8] = t2) : t2 = $[8], t2;
+	}
+	let t2;
+	$[9] !== children || $[10] !== theme ? (t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_components.ThemeProvider, {
+		theme,
+		children
+	}), $[9] = children, $[10] = theme, $[11] = t2) : t2 = $[11];
+	let t3;
+	return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value: themeContext,
+		children: t2
+	}), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
+}
+/**
+* @public
+*/
+function useRootTheme() {
+	let value = (0, react.useContext)(ThemeContext);
+	if (!value) throw Error("useRootTheme(): missing context value");
+	return value;
+}
+/**
+* @public
+*/
+function ThemeColorProvider(props) {
+	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.jsx)(ThemeProvider, {
+		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 } = require_theme.X(props.theme);
+	let { $checkered } = props, { space } = require_getScopedTheme.i(props.theme);
 	return styled_components.css`${$checkered && styled_components.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 } = require_theme.X(props.theme), border = {
+	let { $checkered, $focusRing, $muted } = props, { card, color, style } = require_getScopedTheme.i(props.theme), border = {
 		width: card.border.width,
 		color: "var(--card-border-color)"
 	};
@@ -1046,7 +924,7 @@ function cardColorStyle(props) {
 }
 const StyledCard = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
 	displayName: "StyledCard",
-	componentId: "sc-p2pbep-0"
+	componentId: "sc-2ikw89-0"
 })(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = (0, react.forwardRef)(function Card(props, ref) {
 	let $ = (0, react_compiler_runtime.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);
@@ -1095,49 +973,7 @@ const StyledCard = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig
 		tone,
 		children: t16
 	}), $[52] = scheme, $[53] = t16, $[54] = tone, $[55] = t17) : t17 = $[55], t17;
-});
-/**
-* @public
-*/
-function useClickOutsideEvent(listener, t0, boundaryElement) {
-	let $ = (0, react_compiler_runtime.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 = (0, use_effect_event.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), (0, react.useEffect)(t2, t3), (0, react.useDebugValue)(listener ? "MouseDown On" : "MouseDown Off");
-}
-function _temp$8() {
-	return EMPTY_ARRAY;
-}
-/**
-* @beta
-*/
-function useCustomValidity(ref, customValidity) {
-	let $ = (0, react_compiler_runtime.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]), (0, react.useEffect)(t0, t1);
-}
-/**
-* @internal
-*/
-const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : _juggle_resize_observer.ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
+}), _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : _juggle_resize_observer.ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
 function _createElementRectValueListener() {
 	return { subscribe(element, subscriber) {
 		let resizeObserver = new _ResizeObserver(([entry]) => {
@@ -1180,42 +1016,6 @@ function useElementSize(element) {
 		if (element) return _elementSizeObserver.subscribe(element, setSize);
 	}, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1), (0, react.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 $ = (0, react_compiler_runtime.c)(7), t0;
-	$[0] === onKeyDown ? t0 = $[1] : (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0);
-	let handleKeyDown = (0, use_effect_event.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), (0, react.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 $ = (0, react_compiler_runtime.c)(4);
-	(0, react.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), (0, react.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)`;
 }
@@ -1273,21 +1073,22 @@ function useMediaIndex() {
 	return (0, react.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 $ = (0, react_compiler_runtime.c)(4);
+	(0, react.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), (0, react.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__ */ (0, styled_components.styled)(Box).withConfig({
-	displayName: "StyledGrid",
-	componentId: "sc-1yxm55-0"
-})(responsiveGridStyle), Grid = (0, react.forwardRef)(function Grid(props, ref) {
-	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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 } = require_theme.X(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__ */ (0, styled_components.styled)(Box).withConfig({
-	displayName: "StyledInline",
-	componentId: "sc-8j2qbm-0"
-})(inlineBaseStyle, inlineSpaceStyle), Inline = (0, react.forwardRef)(function Inline(props, ref) {
-	let $ = (0, react_compiler_runtime.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 = react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { children: child });
-}
-function kbdStyle() {
-	return styled_components.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_components.styled.kbd.withConfig({
-	displayName: "StyledKBD",
-	componentId: "sc-pgjv2l-0"
-})(responsiveRadiusStyle, kbdStyle), KBD = (0, react.forwardRef)(function KBD(props, ref) {
-	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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,137 +1137,30 @@ const StyledKBD = /* @__PURE__ */ styled_components.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 isRecord(value) {
+	return !!(value && typeof value == "object" && !Array.isArray(value));
 }
-function moveTowardsFractional(movingPoint, targetPoint, fraction) {
-	return {
-		x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
-		y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
-	};
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null), DEFAULT_VALUE = {
+	version: 0,
+	element: null
+};
+/**
+* @public
+*/
+function useBoundaryElement() {
+	let value = (0, react.useContext)(BoundaryElementContext);
+	if (value && (!isRecord(value) || value.version !== 0)) throw Error("useBoundaryElement(): the context value is not compatible");
+	return value || DEFAULT_VALUE;
 }
-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 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 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_components.styled.div.withConfig({
-	displayName: "StyledArrow",
-	componentId: "sc-1ev21f-0"
-})(({ $w: w }) => styled_components.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_components.styled.path.withConfig({
-	displayName: "StrokePath",
-	componentId: "sc-1ev21f-1"
-})`stroke:var(--card-shadow-outline-color);`, ShapePath = styled_components.styled.path.withConfig({
-	displayName: "ShapePath",
-	componentId: "sc-1ev21f-2"
-})`fill:var(--card-bg-color);`, Arrow = (0, react.forwardRef)(function Arrow(props, ref) {
-	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.jsx)("mask", {
-		id: "stroke-mask",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ShapePath, { d: fillPath }), $[16] = fillPath, $[17] = t6);
-	let t7;
-	$[18] !== t2 || $[19] !== t3 || $[20] !== t5 || $[21] !== t6 || $[22] !== w ? (t7 = /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = {
-	version: 0,
-	element: null
-};
-/**
-* @public
-*/
-function useBoundaryElement() {
-	let value = (0, react.useContext)(BoundaryElementContext);
-	if (value && (!isRecord(value) || value.version !== 0)) throw Error("useBoundaryElement(): the context value is not compatible");
-	return value || DEFAULT_VALUE;
-}
-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>.");
-	if (contextValue.version === 0) return contextValue;
-	throw Error("could not get layer context");
+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>.");
+	if (contextValue.version === 0) return contextValue;
+	throw Error("could not get layer context");
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
 /**
@@ -1588,7 +1176,7 @@ function LayerProvider(props) {
 	let [, setChildLayers] = (0, react.useState)(t3), [size, setSize] = (0, react.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_components.styled.div.withConfig({
-	displayName: "StyledLayer",
-	componentId: "sc-100e5i-0"
-})({ position: "relative" }), LayerChildren = (0, react.forwardRef)(function LayerChildren(props, forwardedRef) {
-	let $ = (0, react_compiler_runtime.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 = (0, react.useRef)(null), ref = (0, react.useRef)(null), isTopLayerRef = (0, react.useRef)(isTopLayer), t1;
-	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[6] = t1) : t1 = $[6], (0, react.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]), (0, react.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__ */ (0, react_jsx_runtime.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 = (0, react.forwardRef)(function Layer(props, ref) {
-	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.jsx)(LayerChildren, {
-		...restProps,
-		ref,
-		children
-	}), $[4] = children, $[5] = ref, $[6] = restProps, $[7] = t1) : t1 = $[7];
-	let t2;
-	return $[8] !== t1 || $[9] !== zOffset ? (t2 = /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react_dom.createPortal)(children, portalElement), $[0] = children, $[1] = portalElement, $[2] = t0) : t0 = $[2], t0;
 }
-/**
-* @public
-*/
-function PortalProvider(props) {
-	let $ = (0, react_compiler_runtime.c)(7), { boundaryElement, children, element, __unstable_elements: elements } = props, fallbackElement = (0, react.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__ */ (0, react_jsx_runtime.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,112 +1348,222 @@ 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 = (0, styled_components.styled)(motion_react.motion.create(Card)).withConfig({
-	displayName: "MotionCard",
-	componentId: "sc-n3w53t-0"
-})`&:not([hidden]){display:flex;}flex-direction:column;width:max-content;min-width:min-content;will-change:transform;`, MotionFlex = (0, styled_components.styled)(motion_react.motion.create(Flex)).withConfig({
-	displayName: "MotionFlex",
-	componentId: "sc-n3w53t-1"
-})`will-change:opacity;`, PopoverCard = (0, react.forwardRef)(function PopoverCard(props, ref) {
-	let $ = (0, react_compiler_runtime.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);
-	let { zIndex } = useLayer(), margins = marginsProp || DEFAULT_POPOVER_MARGINS, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], t0 = animate ? "transform" : void 0, t1;
-	$[23] !== originX || $[24] !== originY || $[25] !== strategy || $[26] !== style || $[27] !== t0 || $[28] !== width || $[29] !== x || $[30] !== y || $[31] !== zIndex ? (t1 = {
-		left: x,
-		originX,
-		originY,
-		position: strategy,
-		top: y,
-		width,
-		zIndex,
-		willChange: t0,
-		...style
-	}, $[23] = originX, $[24] = originY, $[25] = strategy, $[26] = style, $[27] = t0, $[28] = width, $[29] = x, $[30] = y, $[31] = zIndex, $[32] = t1) : t1 = $[32];
-	let rootStyle = t1, t2 = arrowX === null ? void 0 : arrowX, t3 = arrowY === null ? void 0 : arrowY, t4;
-	$[33] !== t2 || $[34] !== t3 ? (t4 = {
-		left: t2,
-		top: t3,
-		right: void 0,
-		bottom: void 0
-	}, $[33] = t2, $[34] = t3, $[35] = t4) : t4 = $[35];
-	let arrowStyle = t4, t5 = restProps, t6;
-	$[36] === animate ? t6 = $[37] : (t6 = animate ? ["hidden", "initial"] : void 0, $[36] = animate, $[37] = t6);
-	let t7;
-	$[38] === animate ? t7 = $[39] : (t7 = animate ? ["visible", "scaleIn"] : void 0, $[38] = animate, $[39] = t7);
-	let t8;
-	$[40] === animate ? t8 = $[41] : (t8 = animate ? ["hidden", "scaleOut"] : void 0, $[40] = animate, $[41] = t8);
-	let t9;
-	$[42] !== children || $[43] !== padding ? (t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Flex, {
-		direction: "column",
-		flex: 1,
-		padding,
-		children
-	}), $[42] = children, $[43] = padding, $[44] = t9) : t9 = $[44];
-	let t10;
-	$[45] !== overflow || $[46] !== t9 ? (t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionFlex, {
-		"data-ui": "Popover__wrapper",
-		direction: "column",
-		flex: 1,
-		overflow,
-		variants: POPOVER_MOTION_PROPS.children,
-		transition: POPOVER_MOTION_PROPS.transition,
-		children: t9
-	}), $[45] = overflow, $[46] = t9, $[47] = t10) : t10 = $[47];
-	let t11;
-	$[48] !== arrow || $[49] !== arrowRef || $[50] !== arrowStyle ? (t11 = arrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow, {
-		ref: arrowRef,
-		style: arrowStyle,
-		width: 19,
-		height: 8,
-		radius: 2
-	}), $[48] = arrow, $[49] = arrowRef, $[50] = arrowStyle, $[51] = t11) : t11 = $[51];
-	let t12;
-	return $[52] !== placement || $[53] !== radius || $[54] !== ref || $[55] !== rootStyle || $[56] !== scheme || $[57] !== shadow || $[58] !== t10 || $[59] !== t11 || $[60] !== t5 || $[61] !== t6 || $[62] !== t7 || $[63] !== t8 || $[64] !== tone ? (t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionCard$1, {
-		"data-ui": "Popover",
-		...t5,
-		"data-placement": placement,
-		radius,
-		ref,
-		scheme,
-		shadow,
-		sizing: "border",
-		style: rootStyle,
-		tone,
-		variants: POPOVER_MOTION_PROPS.card,
-		transition: POPOVER_MOTION_PROPS.transition,
-		initial: t6,
-		animate: t7,
-		exit: t8,
-		children: [t10, t11]
-	}), $[52] = placement, $[53] = radius, $[54] = ref, $[55] = rootStyle, $[56] = scheme, $[57] = shadow, $[58] = t10, $[59] = t11, $[60] = t5, $[61] = t6, $[62] = t7, $[63] = t8, $[64] = tone, $[65] = t12) : t12 = $[65], t12;
-}), ViewportOverlay = () => {
-	let $ = (0, react_compiler_runtime.c)(2), { zIndex } = useLayer(), t0;
-	return $[0] === zIndex ? t0 = $[1] : (t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-		height: "100vh",
-		inset: 0,
-		position: "fixed",
-		width: "100vw",
-		zIndex
-	} }), $[0] = zIndex, $[1] = t0), t0;
-}, Popover = (0, react.forwardRef)(function Popover(props, forwardedRef) {
-	let $ = (0, react_compiler_runtime.c)(126), { container, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), _boundaryElement, _fallbackPlacements, _floatingBoundary, _referenceBoundary, _zOffsetProp, childProp, content, disabled, matchReferenceWidth, modal, open, paddingProp, portal, referenceElement, restProps, scheme, t0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
-	if ($[0] !== props) {
-		let { __unstable_margins: t12, animate: t13, arrow: t14, boundaryElement: t15, children: t16, constrainSize: t17, content: t18, disabled: t19, fallbackPlacements: t20, matchReferenceWidth: t21, floatingBoundary: t22, modal: t23, onActivate, open: t24, overflow: t25, padding: t26, placement: t27, placementStrategy: t28, portal: t29, preventOverflow: t30, radius: t31, referenceBoundary: t32, referenceElement: t33, scheme: t34, shadow: t35, tone: t36, width: t37, zOffset: t38, updateRef: t39, ...t40 } = props;
-		t0 = t12, t1 = t13, t2 = t14, _boundaryElement = t15, childProp = t16, t3 = t17, content = t18, disabled = t19, _fallbackPlacements = t20, matchReferenceWidth = t21, _floatingBoundary = t22, modal = t23, open = t24, t4 = t25, paddingProp = t26, t5 = t27, t6 = t28, portal = t29, t7 = t30, t8 = t31, _referenceBoundary = t32, referenceElement = t33, scheme = t34, t9 = t35, t10 = t36, t11 = t37, _zOffsetProp = t38, updateRef = t39, restProps = t40, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = _floatingBoundary, $[4] = _referenceBoundary, $[5] = _zOffsetProp, $[6] = childProp, $[7] = content, $[8] = disabled, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = paddingProp, $[13] = portal, $[14] = referenceElement, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t10, $[20] = t11, $[21] = t2, $[22] = t3, $[23] = t4, $[24] = t5, $[25] = t6, $[26] = t7, $[27] = t8, $[28] = t9, $[29] = updateRef;
-	} else _boundaryElement = $[1], _fallbackPlacements = $[2], _floatingBoundary = $[3], _referenceBoundary = $[4], _zOffsetProp = $[5], childProp = $[6], content = $[7], disabled = $[8], matchReferenceWidth = $[9], modal = $[10], open = $[11], paddingProp = $[12], portal = $[13], referenceElement = $[14], restProps = $[15], scheme = $[16], t0 = $[17], t1 = $[18], t10 = $[19], t11 = $[20], t2 = $[21], t3 = $[22], t4 = $[23], t5 = $[24], t6 = $[25], t7 = $[26], t8 = $[27], t9 = $[28], updateRef = $[29];
-	let margins = t0 === void 0 ? DEFAULT_POPOVER_MARGINS : t0, _animate = t1 !== void 0 && t1, arrowProp = t2 !== void 0 && t2, constrainSize = t3 !== void 0 && t3, overflow = t4 === void 0 ? "hidden" : t4, placementProp = t5 === void 0 ? "bottom" : t5, placementStrategy = t6 === void 0 ? "flip" : t6, preventOverflow = t7 === void 0 || t7, radiusProp = t8 === void 0 ? 3 : t8, shadowProp = t9 === void 0 ? 3 : t9, tone = t10 === void 0 ? "inherit" : t10, widthProp = t11 === void 0 ? "auto" : t11, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = !usePrefersReducedMotion() && _animate, boundarySize = useElementSize(boundaryElement)?.border, t12;
-	$[30] === paddingProp ? t12 = $[31] : (t12 = _getArrayProp(paddingProp), $[30] = paddingProp, $[31] = t12);
-	let padding = t12, t13;
-	$[32] === radiusProp ? t13 = $[33] : (t13 = _getArrayProp(radiusProp), $[32] = radiusProp, $[33] = t13);
-	let radius = t13, t14;
-	$[34] === shadowProp ? t14 = $[35] : (t14 = _getArrayProp(shadowProp), $[34] = shadowProp, $[35] = t14);
-	let shadow = t14, widthArrayProp = _getArrayProp(widthProp), t15;
-	$[36] === zOffsetProp ? t15 = $[37] : (t15 = _getArrayProp(zOffsetProp), $[36] = zOffsetProp, $[37] = t15);
-	let zOffset = t15, ref = (0, react.useRef)(null), arrowRef = (0, react.useRef)(null), t16;
-	$[38] === Symbol.for("react.memo_cache_sentinel") ? (t16 = () => ref.current, $[38] = t16) : t16 = $[38], (0, react.useImperativeHandle)(forwardedRef, t16);
-	let mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
-		container,
-		mediaIndex,
+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_components.styled.div.withConfig({
+	displayName: "StyledArrow",
+	componentId: "sc-ivw6of-0"
+})(({ $w: w }) => styled_components.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_components.styled.path.withConfig({
+	displayName: "StrokePath",
+	componentId: "sc-ivw6of-1"
+})`stroke:var(--card-shadow-outline-color);`, ShapePath = styled_components.styled.path.withConfig({
+	displayName: "ShapePath",
+	componentId: "sc-ivw6of-2"
+})`fill:var(--card-bg-color);`, Arrow = (0, react.forwardRef)(function Arrow(props, ref) {
+	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.jsx)("mask", {
+		id: "stroke-mask",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(ShapePath, { d: fillPath }), $[16] = fillPath, $[17] = t6);
+	let t7;
+	$[18] !== t2 || $[19] !== t3 || $[20] !== t5 || $[21] !== t6 || $[22] !== w ? (t7 = /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(StyledArrow, {
+		...restProps,
+		$w: w,
+		ref,
+		children: t7
+	}), $[24] = ref, $[25] = restProps, $[26] = t7, $[27] = w, $[28] = t8) : t8 = $[28], t8;
+}), MotionCard$1 = (0, styled_components.styled)(motion_react.motion.create(Card)).withConfig({
+	displayName: "MotionCard",
+	componentId: "sc-tq6s8o-0"
+})`&:not([hidden]){display:flex;}flex-direction:column;width:max-content;min-width:min-content;will-change:transform;`, MotionFlex = (0, styled_components.styled)(motion_react.motion.create(Flex)).withConfig({
+	displayName: "MotionFlex",
+	componentId: "sc-tq6s8o-1"
+})`will-change:opacity;`, PopoverCard = (0, react.forwardRef)(function PopoverCard(props, ref) {
+	let $ = (0, react_compiler_runtime.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);
+	let { zIndex } = useLayer(), margins = marginsProp || DEFAULT_POPOVER_MARGINS, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], t0 = animate ? "transform" : void 0, t1;
+	$[23] !== originX || $[24] !== originY || $[25] !== strategy || $[26] !== style || $[27] !== t0 || $[28] !== width || $[29] !== x || $[30] !== y || $[31] !== zIndex ? (t1 = {
+		left: x,
+		originX,
+		originY,
+		position: strategy,
+		top: y,
+		width,
+		zIndex,
+		willChange: t0,
+		...style
+	}, $[23] = originX, $[24] = originY, $[25] = strategy, $[26] = style, $[27] = t0, $[28] = width, $[29] = x, $[30] = y, $[31] = zIndex, $[32] = t1) : t1 = $[32];
+	let rootStyle = t1, t2 = arrowX === null ? void 0 : arrowX, t3 = arrowY === null ? void 0 : arrowY, t4;
+	$[33] !== t2 || $[34] !== t3 ? (t4 = {
+		left: t2,
+		top: t3,
+		right: void 0,
+		bottom: void 0
+	}, $[33] = t2, $[34] = t3, $[35] = t4) : t4 = $[35];
+	let arrowStyle = t4, t5 = restProps, t6;
+	$[36] === animate ? t6 = $[37] : (t6 = animate ? ["hidden", "initial"] : void 0, $[36] = animate, $[37] = t6);
+	let t7;
+	$[38] === animate ? t7 = $[39] : (t7 = animate ? ["visible", "scaleIn"] : void 0, $[38] = animate, $[39] = t7);
+	let t8;
+	$[40] === animate ? t8 = $[41] : (t8 = animate ? ["hidden", "scaleOut"] : void 0, $[40] = animate, $[41] = t8);
+	let t9;
+	$[42] !== children || $[43] !== padding ? (t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Flex, {
+		direction: "column",
+		flex: 1,
+		padding,
+		children
+	}), $[42] = children, $[43] = padding, $[44] = t9) : t9 = $[44];
+	let t10;
+	$[45] !== overflow || $[46] !== t9 ? (t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionFlex, {
+		"data-ui": "Popover__wrapper",
+		direction: "column",
+		flex: 1,
+		overflow,
+		variants: POPOVER_MOTION_PROPS.children,
+		transition: POPOVER_MOTION_PROPS.transition,
+		children: t9
+	}), $[45] = overflow, $[46] = t9, $[47] = t10) : t10 = $[47];
+	let t11;
+	$[48] !== arrow || $[49] !== arrowRef || $[50] !== arrowStyle ? (t11 = arrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow, {
+		ref: arrowRef,
+		style: arrowStyle,
+		width: 19,
+		height: 8,
+		radius: 2
+	}), $[48] = arrow, $[49] = arrowRef, $[50] = arrowStyle, $[51] = t11) : t11 = $[51];
+	let t12;
+	return $[52] !== placement || $[53] !== radius || $[54] !== ref || $[55] !== rootStyle || $[56] !== scheme || $[57] !== shadow || $[58] !== t10 || $[59] !== t11 || $[60] !== t5 || $[61] !== t6 || $[62] !== t7 || $[63] !== t8 || $[64] !== tone ? (t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionCard$1, {
+		"data-ui": "Popover",
+		...t5,
+		"data-placement": placement,
+		radius,
+		ref,
+		scheme,
+		shadow,
+		sizing: "border",
+		style: rootStyle,
+		tone,
+		variants: POPOVER_MOTION_PROPS.card,
+		transition: POPOVER_MOTION_PROPS.transition,
+		initial: t6,
+		animate: t7,
+		exit: t8,
+		children: [t10, t11]
+	}), $[52] = placement, $[53] = radius, $[54] = ref, $[55] = rootStyle, $[56] = scheme, $[57] = shadow, $[58] = t10, $[59] = t11, $[60] = t5, $[61] = t6, $[62] = t7, $[63] = t8, $[64] = tone, $[65] = t12) : t12 = $[65], t12;
+}), ViewportOverlay = () => {
+	let $ = (0, react_compiler_runtime.c)(2), { zIndex } = useLayer(), t0;
+	return $[0] === zIndex ? t0 = $[1] : (t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+		height: "100vh",
+		inset: 0,
+		position: "fixed",
+		width: "100vw",
+		zIndex
+	} }), $[0] = zIndex, $[1] = t0), t0;
+}, Popover = (0, react.forwardRef)(function Popover(props, forwardedRef) {
+	let $ = (0, react_compiler_runtime.c)(126), { container, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), _boundaryElement, _fallbackPlacements, _floatingBoundary, _referenceBoundary, _zOffsetProp, childProp, content, disabled, matchReferenceWidth, modal, open, paddingProp, portal, referenceElement, restProps, scheme, t0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
+	if ($[0] !== props) {
+		let { __unstable_margins: t12, animate: t13, arrow: t14, boundaryElement: t15, children: t16, constrainSize: t17, content: t18, disabled: t19, fallbackPlacements: t20, matchReferenceWidth: t21, floatingBoundary: t22, modal: t23, onActivate, open: t24, overflow: t25, padding: t26, placement: t27, placementStrategy: t28, portal: t29, preventOverflow: t30, radius: t31, referenceBoundary: t32, referenceElement: t33, scheme: t34, shadow: t35, tone: t36, width: t37, zOffset: t38, updateRef: t39, ...t40 } = props;
+		t0 = t12, t1 = t13, t2 = t14, _boundaryElement = t15, childProp = t16, t3 = t17, content = t18, disabled = t19, _fallbackPlacements = t20, matchReferenceWidth = t21, _floatingBoundary = t22, modal = t23, open = t24, t4 = t25, paddingProp = t26, t5 = t27, t6 = t28, portal = t29, t7 = t30, t8 = t31, _referenceBoundary = t32, referenceElement = t33, scheme = t34, t9 = t35, t10 = t36, t11 = t37, _zOffsetProp = t38, updateRef = t39, restProps = t40, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = _floatingBoundary, $[4] = _referenceBoundary, $[5] = _zOffsetProp, $[6] = childProp, $[7] = content, $[8] = disabled, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = paddingProp, $[13] = portal, $[14] = referenceElement, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t10, $[20] = t11, $[21] = t2, $[22] = t3, $[23] = t4, $[24] = t5, $[25] = t6, $[26] = t7, $[27] = t8, $[28] = t9, $[29] = updateRef;
+	} else _boundaryElement = $[1], _fallbackPlacements = $[2], _floatingBoundary = $[3], _referenceBoundary = $[4], _zOffsetProp = $[5], childProp = $[6], content = $[7], disabled = $[8], matchReferenceWidth = $[9], modal = $[10], open = $[11], paddingProp = $[12], portal = $[13], referenceElement = $[14], restProps = $[15], scheme = $[16], t0 = $[17], t1 = $[18], t10 = $[19], t11 = $[20], t2 = $[21], t3 = $[22], t4 = $[23], t5 = $[24], t6 = $[25], t7 = $[26], t8 = $[27], t9 = $[28], updateRef = $[29];
+	let margins = t0 === void 0 ? DEFAULT_POPOVER_MARGINS : t0, _animate = t1 !== void 0 && t1, arrowProp = t2 !== void 0 && t2, constrainSize = t3 !== void 0 && t3, overflow = t4 === void 0 ? "hidden" : t4, placementProp = t5 === void 0 ? "bottom" : t5, placementStrategy = t6 === void 0 ? "flip" : t6, preventOverflow = t7 === void 0 || t7, radiusProp = t8 === void 0 ? 3 : t8, shadowProp = t9 === void 0 ? 3 : t9, tone = t10 === void 0 ? "inherit" : t10, widthProp = t11 === void 0 ? "auto" : t11, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = !usePrefersReducedMotion() && _animate, boundarySize = useElementSize(boundaryElement)?.border, t12;
+	$[30] === paddingProp ? t12 = $[31] : (t12 = _getArrayProp(paddingProp), $[30] = paddingProp, $[31] = t12);
+	let padding = t12, t13;
+	$[32] === radiusProp ? t13 = $[33] : (t13 = _getArrayProp(radiusProp), $[32] = radiusProp, $[33] = t13);
+	let radius = t13, t14;
+	$[34] === shadowProp ? t14 = $[35] : (t14 = _getArrayProp(shadowProp), $[34] = shadowProp, $[35] = t14);
+	let shadow = t14, widthArrayProp = _getArrayProp(widthProp), t15;
+	$[36] === zOffsetProp ? t15 = $[37] : (t15 = _getArrayProp(zOffsetProp), $[36] = zOffsetProp, $[37] = t15);
+	let zOffset = t15, ref = (0, react.useRef)(null), arrowRef = (0, react.useRef)(null), t16;
+	$[38] === Symbol.for("react.memo_cache_sentinel") ? (t16 = () => ref.current, $[38] = t16) : t16 = $[38], (0, react.useImperativeHandle)(forwardedRef, t16);
+	let mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
+		container,
+		mediaIndex,
 		width: widthArrayProp
 	}), widthRef = (0, react.useRef)(width), t17, t18;
 	$[39] === width ? (t17 = $[40], t18 = $[41]) : (t17 = () => {
@@ -2133,12 +1757,12 @@ function stackBaseStyle() {
 	return BASE_STYLE;
 }
 function responsiveStackSpaceStyle(props) {
-	let { media, space } = require_theme.X(props.theme);
+	let { media, space } = require_getScopedTheme.i(props.theme);
 	return _responsive(media, props.$space, (spaceIndex) => ({ gridGap: rem(space[spaceIndex]) }));
 }
 const StyledStack = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
 	displayName: "StyledStack",
-	componentId: "sc-0k6050-0"
+	componentId: "sc-ux0lrj-0"
 })(stackBaseStyle, responsiveStackSpaceStyle), Stack = (0, react.forwardRef)(function Stack(props, ref) {
 	let $ = (0, react_compiler_runtime.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,64 +1777,139 @@ const StyledStack = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfi
 		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__ */ (0, styled_components.styled)(Card).attrs({ forwardedAs: "span" }).withConfig({
-	displayName: "StyledTextInput",
-	componentId: "sc-iuvxo7-0"
-})(textInputRootStyle), InputRoot = styled_components.styled.span.withConfig({
-	displayName: "InputRoot",
-	componentId: "sc-iuvxo7-1"
-})`flex:1;min-width:0;display:block;position:relative;`, Prefix = (0, styled_components.styled)(Card).attrs({ forwardedAs: "span" }).withConfig({
-	displayName: "Prefix",
-	componentId: "sc-iuvxo7-2"
-})`border-top-right-radius:0;border-bottom-right-radius:0;& > span{display:block;margin:-1px;}`, Suffix = (0, styled_components.styled)(Card).attrs({ forwardedAs: "span" }).withConfig({
-	displayName: "Suffix",
-	componentId: "sc-iuvxo7-3"
-})`border-top-left-radius:0;border-bottom-left-radius:0;& > span{display:block;margin:-1px;}`, Input = /* @__PURE__ */ styled_components.styled.input.withConfig({
-	displayName: "Input",
-	componentId: "sc-iuvxo7-4"
-})(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled_components.styled.span.withConfig({
-	displayName: "Presentation",
-	componentId: "sc-iuvxo7-5"
-})(responsiveRadiusStyle, textInputRepresentationStyle), LeftBox = (0, styled_components.styled)(Box).withConfig({
-	displayName: "LeftBox",
-	componentId: "sc-iuvxo7-6"
-})`position:absolute;top:0;left:0;`, RightBox = (0, styled_components.styled)(Box).withConfig({
-	displayName: "RightBox",
-	componentId: "sc-iuvxo7-7"
-})`position:absolute;top:0;right:0;`, RightCard = (0, styled_components.styled)(Card).withConfig({
-	displayName: "RightCard",
-	componentId: "sc-iuvxo7-8"
-})`background-color:transparent;position:absolute;top:0;right:0;`, TextInputClearButton = /* @__PURE__ */ (0, styled_components.styled)(Button).withConfig({
-	displayName: "TextInputClearButton",
-	componentId: "sc-iuvxo7-9"
-})({ "&:not([hidden])": { display: "block" } }), TextInput = (0, react.forwardRef)(function TextInput(props, forwardedRef) {
-	let $ = (0, react_compiler_runtime.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);
-	let border = t0 === void 0 || t0, disabled = t1 !== void 0 && t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, deprecated_space = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = (0, react.useRef)(null), rootTheme = useRootTheme(), t7;
-	$[20] === fontSizeProp ? t7 = $[21] : (t7 = _getArrayProp(fontSizeProp), $[20] = fontSizeProp, $[21] = t7);
-	let fontSize = t7, t8;
-	$[22] === paddingProp ? t8 = $[23] : (t8 = _getArrayProp(paddingProp), $[22] = paddingProp, $[23] = t8);
-	let padding = t8, t9;
-	$[24] === radiusProp ? t9 = $[25] : (t9 = _getArrayProp(radiusProp), $[24] = radiusProp, $[25] = t9);
-	let radius = t9, t10 = gap === void 0 ? deprecated_space : gap, t11;
-	$[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], (0, react.useImperativeHandle)(forwardedRef, t12), useCustomValidity(ref, customValidity);
-	let handleClearMouseDown = _temp$2, t13;
-	$[29] === onClear ? t13 = $[30] : (t13 = (event_0) => {
-		event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
-	}, $[29] = onClear, $[30] = t13);
-	let handleClearClick = t13, t14;
-	$[31] !== prefix || $[32] !== radius ? (t14 = prefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Prefix, {
-		borderTop: !0,
-		borderLeft: !0,
-		borderBottom: !0,
-		radius,
-		sizing: "border",
-		tone: "inherit",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: prefix })
-	}), $[31] = prefix, $[32] = radius, $[33] = t14) : t14 = $[33];
-	let prefixNode = t14, t15 = border ? "" : void 0, t16;
+});
+/**
+* @beta
+*/
+function useCustomValidity(ref, customValidity) {
+	let $ = (0, react_compiler_runtime.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]), (0, react.useEffect)(t0, t1);
+}
+function responsiveInputPaddingStyle(props) {
+	let { $fontSize, $iconLeft, $iconRight, $padding, $space } = props, { font, media, space } = require_getScopedTheme.i(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 = styled_components.css`&:not([hidden]){display:flex;}align-items:center;`;
+function textInputRootStyle() {
+	return ROOT_STYLE;
+}
+function textInputBaseStyle(props) {
+	let { $scheme, $tone, $weight } = props, { color, font } = require_getScopedTheme.i(props.theme);
+	return styled_components.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 } = require_getScopedTheme.i(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 } = require_getScopedTheme.i(props.theme);
+	return styled_components.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__ */ (0, styled_components.styled)(Card).attrs({ forwardedAs: "span" }).withConfig({
+	displayName: "StyledTextInput",
+	componentId: "sc-7gzsyi-0"
+})(textInputRootStyle), InputRoot = styled_components.styled.span.withConfig({
+	displayName: "InputRoot",
+	componentId: "sc-7gzsyi-1"
+})`flex:1;min-width:0;display:block;position:relative;`, Prefix = (0, styled_components.styled)(Card).attrs({ forwardedAs: "span" }).withConfig({
+	displayName: "Prefix",
+	componentId: "sc-7gzsyi-2"
+})`border-top-right-radius:0;border-bottom-right-radius:0;& > span{display:block;margin:-1px;}`, Suffix = (0, styled_components.styled)(Card).attrs({ forwardedAs: "span" }).withConfig({
+	displayName: "Suffix",
+	componentId: "sc-7gzsyi-3"
+})`border-top-left-radius:0;border-bottom-left-radius:0;& > span{display:block;margin:-1px;}`, Input = /* @__PURE__ */ styled_components.styled.input.withConfig({
+	displayName: "Input",
+	componentId: "sc-7gzsyi-4"
+})(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled_components.styled.span.withConfig({
+	displayName: "Presentation",
+	componentId: "sc-7gzsyi-5"
+})(responsiveRadiusStyle, textInputRepresentationStyle), LeftBox = (0, styled_components.styled)(Box).withConfig({
+	displayName: "LeftBox",
+	componentId: "sc-7gzsyi-6"
+})`position:absolute;top:0;left:0;`, RightBox = (0, styled_components.styled)(Box).withConfig({
+	displayName: "RightBox",
+	componentId: "sc-7gzsyi-7"
+})`position:absolute;top:0;right:0;`, RightCard = (0, styled_components.styled)(Card).withConfig({
+	displayName: "RightCard",
+	componentId: "sc-7gzsyi-8"
+})`background-color:transparent;position:absolute;top:0;right:0;`, TextInputClearButton = /* @__PURE__ */ (0, styled_components.styled)(Button).withConfig({
+	displayName: "TextInputClearButton",
+	componentId: "sc-7gzsyi-9"
+})({ "&:not([hidden])": { display: "block" } }), TextInput = (0, react.forwardRef)(function TextInput(props, forwardedRef) {
+	let $ = (0, react_compiler_runtime.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);
+	let border = t0 === void 0 || t0, disabled = t1 !== void 0 && t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, deprecated_space = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = (0, react.useRef)(null), rootTheme = useRootTheme(), t7;
+	$[20] === fontSizeProp ? t7 = $[21] : (t7 = _getArrayProp(fontSizeProp), $[20] = fontSizeProp, $[21] = t7);
+	let fontSize = t7, t8;
+	$[22] === paddingProp ? t8 = $[23] : (t8 = _getArrayProp(paddingProp), $[22] = paddingProp, $[23] = t8);
+	let padding = t8, t9;
+	$[24] === radiusProp ? t9 = $[25] : (t9 = _getArrayProp(radiusProp), $[24] = radiusProp, $[25] = t9);
+	let radius = t9, t10 = gap === void 0 ? deprecated_space : gap, t11;
+	$[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], (0, react.useImperativeHandle)(forwardedRef, t12), useCustomValidity(ref, customValidity);
+	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);
+	let handleClearClick = t13, t14;
+	$[31] !== prefix || $[32] !== radius ? (t14 = prefix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Prefix, {
+		borderTop: !0,
+		borderLeft: !0,
+		borderBottom: !0,
+		radius,
+		sizing: "border",
+		tone: "inherit",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: prefix })
+	}), $[31] = prefix, $[32] = radius, $[33] = t14) : t14 = $[33];
+	let prefixNode = t14, t15 = border ? "" : void 0, t16;
 	$[34] !== IconComponent || $[35] !== fontSize || $[36] !== padding ? (t16 = IconComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LeftBox, {
 		padding,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Text, {
@@ -2240,7 +1939,7 @@ const StyledStack = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfi
 		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__ */ (0, styled_components.styled)(Box).withConfi
 		]
 	}), $[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 $ = (0, react_compiler_runtime.c)(5), [state, setState] = (0, react.useState)(initialState), delayedAction = (0, react.useRef)(void 0), t0;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (nextState, delay) => {
-		let action = () => {
-			setState(nextState);
+function useClickOutsideEvent(listener, t0, boundaryElement) {
+	let $ = (0, react_compiler_runtime.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 = (0, use_effect_event.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]), (0, react.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), (0, react.useEffect)(t2, t3), (0, react.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 = (0, styled_components.styled)(motion_react.motion.create(Card)).withConfig({
-	displayName: "MotionCard",
-	componentId: "sc-d1w0oq-0"
-})`will-change:transform;`, TooltipCard = (0, react.forwardRef)(function TooltipCard(props, ref) {
-	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 (0, react.useContext)(TooltipDelayGroupContext);
+function useGlobalKeyDown(onKeyDown, options) {
+	let $ = (0, react_compiler_runtime.c)(7), t0;
+	$[0] === onKeyDown ? t0 = $[1] : (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0);
+	let handleKeyDown = (0, use_effect_event.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), (0, react.useEffect)(t1, t2);
 }
-const StyledTooltip = (0, styled_components.styled)(Layer).withConfig({
-	displayName: "StyledTooltip",
-	componentId: "sc-dkqcjk-0"
-})`pointer-events:none;`, Tooltip = (0, react.forwardRef)(function Tooltip(props, forwardedRef) {
-	let $ = (0, react_compiler_runtime.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 = (0, react.useRef)(null), [referenceElement, setReferenceElement] = (0, react.useState)(null), arrowRef = (0, react.useRef)(null), [tooltipMaxWidth, setTooltipMaxWidth] = (0, react.useState)(0), t7;
-	$[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], (0, react.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: _floating_ui_react_dom.autoUpdate,
-		elements: t9
-	}, $[27] = middleware, $[28] = placementProp, $[29] = t9, $[30] = t10) : t10 = $[30];
-	let { floatingStyles, placement, middlewareData, refs, update } = (0, _floating_ui_react_dom.useFloating)(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = (0, react.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]), (0, react.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]), (0, react.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]), (0, react.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], (0, react.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 = (0, react.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), (0, react.useImperativeHandle)(t31, t32, t33), !child) {
-		let t34;
-		return $[101] === Symbol.for("react.memo_cache_sentinel") ? (t34 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}), $[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__ */ (0, react_jsx_runtime.jsx)(TooltipCard, {
+const StyledLayer = /* @__PURE__ */ styled_components.styled.div.withConfig({
+	displayName: "StyledLayer",
+	componentId: "sc-c59p9w-0"
+})({ position: "relative" }), LayerChildren = (0, react.forwardRef)(function LayerChildren(props, forwardedRef) {
+	let $ = (0, react_compiler_runtime.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 = (0, react.useRef)(null), ref = (0, react.useRef)(null), isTopLayerRef = (0, react.useRef)(isTopLayer), t1;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[6] = t1) : t1 = $[6], (0, react.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]), (0, react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 = (0, react.forwardRef)(function Layer(props, ref) {
+	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children }) : children, $[131] = animate, $[132] = children, $[133] = t39) : t39 = $[133];
-	let t40;
-	return $[134] !== child || $[135] !== t39 ? (t40 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { 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 $ = (0, react_compiler_runtime.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 = (0, _floating_ui_react_dom.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 = (0, _floating_ui_react_dom.offset)({ mainAxis: 4 }), $[11] = t3) : t3 = $[11], ret.push(t3);
-		let t4 = boundaryElement || void 0, t5;
-		if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = (0, _floating_ui_react_dom.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 = (0, _floating_ui_react_dom.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 $ = (0, react_compiler_runtime.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 = (0, use_effect_event.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 } = require_getScopedTheme.i(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], (0, react.useEffect)(t2, t3);
+	});
+}
+const StyledInline = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
+	displayName: "StyledInline",
+	componentId: "sc-zsbqh7-0"
+})(inlineBaseStyle, inlineSpaceStyle), Inline = (0, react.forwardRef)(function Inline(props, ref) {
+	let $ = (0, react_compiler_runtime.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 = react.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", { children: child });
 }
-const StyledHotkeys = styled_components.styled.kbd.withConfig({
+function kbdStyle() {
+	return styled_components.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_components.styled.kbd.withConfig({
+	displayName: "StyledKBD",
+	componentId: "sc-xzhxcv-0"
+})(responsiveRadiusStyle, kbdStyle), KBD = (0, react.forwardRef)(function KBD(props, ref) {
+	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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_components.styled.kbd.withConfig({
 	displayName: "StyledHotkeys",
-	componentId: "sc-07x5rd-0"
+	componentId: "sc-1soubc-0"
 })`font:inherit;padding:1px;&:not([hidden]){display:block;}`, Key = (0, styled_components.styled)(KBD).withConfig({
 	displayName: "Key",
-	componentId: "sc-07x5rd-1"
+	componentId: "sc-1soubc-1"
 })`&:not([hidden]){display:block;}`, Hotkeys = (0, react.forwardRef)(function Hotkeys(props, ref) {
 	let $ = (0, react_compiler_runtime.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 = (0, styled_components.styled)(Box).withConfig({
 	displayName: "StyledMenu",
-	componentId: "sc-88w4l4-0"
+	componentId: "sc-xvs9y5-0"
 })`outline:none;overflow:auto;`, Menu = (0, react.forwardRef)(function Menu(props, forwardedRef) {
 	let $ = (0, react_compiler_runtime.c)(50), _shouldFocus, children, gap, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
 	if ($[0] !== props) {
@@ -2972,13 +2451,13 @@ const StyledMenu = (0, styled_components.styled)(Box).withConfig({
 	}), $[47] = t11, $[48] = value, $[49] = t12) : t12 = $[49], t12;
 }), MenuDivider = styled_components.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 styled_components.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;}`;
 }
 function selectableColorStyle(props) {
-	let { $tone } = props, { color, style } = require_theme.X(props.theme), tone = color.selectable[$tone];
+	let { $tone } = props, { color, style } = require_getScopedTheme.i(props.theme), tone = color.selectable[$tone];
 	return styled_components.css`${_cardColorStyle(color, tone.enabled)} background-color:var(--card-bg-color);color:var(--card-fg-color);outline:none;&[data-as='button']{&:disabled{${_cardColorStyle(color, tone.disabled)}}&:not(:disabled){&[aria-pressed='true']{${_cardColorStyle(color, tone.pressed)}}&[data-selected],&[aria-selected='true'] > &{${_cardColorStyle(color, tone.selected)}}@media (hover:hover){&:not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, tone.hovered)}}&:active{${_cardColorStyle(color, tone.pressed)}}}}}}&[data-as='a']{&[data-disabled]{${_cardColorStyle(color, tone.disabled)}}&:not([data-disabled]){&[data-pressed]{${_cardColorStyle(color, tone.pressed)}}&[data-selected]{${_cardColorStyle(color, tone.selected)}}@media (hover:hover){&:not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, tone.hovered)}}&:active{${_cardColorStyle(color, tone.pressed)}}}}}}${style?.card?.root}`;
 }
 /**
@@ -2986,7 +2465,7 @@ function selectableColorStyle(props) {
 */
 const Selectable = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
 	displayName: "Selectable",
-	componentId: "sc-sk8nre-0"
+	componentId: "sc-njdnrn-0"
 })(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
 	let value = (0, react.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 = (0, styled_components.styled)(Button).withConfig({
 	displayName: "CustomButton",
-	componentId: "sc-rhibqq-0"
+	componentId: "sc-whlh6p-0"
 })`max-width:100%;`, Tab = (0, react.forwardRef)(function Tab(props, forwardedRef) {
 	let $ = (0, react_compiler_runtime.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);
@@ -3252,51 +2731,579 @@ const CustomButton = (0, styled_components.styled)(Button).withConfig({
 		onBlur: handleBlur,
 		onFocus: handleFocus,
 		padding,
-		ref,
-		role: "tab",
-		selected,
-		tabIndex: t8,
-		text: label,
-		type: "button"
-	}), $[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 = (0, styled_components.styled)(Inline).withConfig({
-	displayName: "CustomInline",
-	componentId: "sc-40huc5-0"
-})`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`, TabList = (0, react.forwardRef)(function TabList(props, ref) {
-	let $ = (0, react_compiler_runtime.c)(15), childrenProp, restProps;
-	$[0] === props ? (childrenProp = $[1], restProps = $[2]) : ({children: childrenProp, ...restProps} = props, $[0] = props, $[1] = childrenProp, $[2] = restProps);
-	let [focusedIndex, setFocusedIndex] = (0, react.useState)(-1), t0;
-	if ($[3] !== childrenProp || $[4] !== focusedIndex) {
-		let children = react.Children.toArray(childrenProp).filter(react.isValidElement), t1;
-		$[6] === focusedIndex ? t1 = $[7] : (t1 = (child, childIndex) => (0, react.cloneElement)(child, {
-			focused: focusedIndex === childIndex,
-			key: childIndex,
-			onFocus: () => setFocusedIndex(childIndex)
-		}), $[6] = focusedIndex, $[7] = t1), t0 = children.map(t1), $[3] = childrenProp, $[4] = focusedIndex, $[5] = t0;
-	} else t0 = $[5];
-	let tabs = t0, numTabs = tabs.length, t1;
-	$[8] === numTabs ? t1 = $[9] : (t1 = (event) => {
-		event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex_0) => (prevIndex_0 + 1) % numTabs);
-	}, $[8] = numTabs, $[9] = t1);
-	let handleKeyDown = t1, t2;
-	return $[10] !== handleKeyDown || $[11] !== ref || $[12] !== restProps || $[13] !== tabs ? (t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomInline, {
-		"data-ui": "TabList",
+		ref,
+		role: "tab",
+		selected,
+		tabIndex: t8,
+		text: label,
+		type: "button"
+	}), $[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 = (0, styled_components.styled)(Inline).withConfig({
+	displayName: "CustomInline",
+	componentId: "sc-tlz8f1-0"
+})`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`, TabList = (0, react.forwardRef)(function TabList(props, ref) {
+	let $ = (0, react_compiler_runtime.c)(15), childrenProp, restProps;
+	$[0] === props ? (childrenProp = $[1], restProps = $[2]) : ({children: childrenProp, ...restProps} = props, $[0] = props, $[1] = childrenProp, $[2] = restProps);
+	let [focusedIndex, setFocusedIndex] = (0, react.useState)(-1), t0;
+	if ($[3] !== childrenProp || $[4] !== focusedIndex) {
+		let children = react.Children.toArray(childrenProp).filter(react.isValidElement), t1;
+		$[6] === focusedIndex ? t1 = $[7] : (t1 = (child, childIndex) => (0, react.cloneElement)(child, {
+			focused: focusedIndex === childIndex,
+			key: childIndex,
+			onFocus: () => setFocusedIndex(childIndex)
+		}), $[6] = focusedIndex, $[7] = t1), t0 = children.map(t1), $[3] = childrenProp, $[4] = focusedIndex, $[5] = t0;
+	} else t0 = $[5];
+	let tabs = t0, numTabs = tabs.length, t1;
+	$[8] === numTabs ? t1 = $[9] : (t1 = (event) => {
+		event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex_0) => (prevIndex_0 + 1) % numTabs);
+	}, $[8] = numTabs, $[9] = t1);
+	let handleKeyDown = t1, t2;
+	return $[10] !== handleKeyDown || $[11] !== ref || $[12] !== restProps || $[13] !== tabs ? (t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomInline, {
+		"data-ui": "TabList",
+		...restProps,
+		onKeyDown: handleKeyDown,
+		ref,
+		role: "tablist",
+		children: tabs
+	}), $[10] = handleKeyDown, $[11] = ref, $[12] = restProps, $[13] = tabs, $[14] = t2) : t2 = $[14], t2;
+}), 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 } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$autoFlow, (autoFlow) => ({ gridAutoFlow: autoFlow }));
+}
+function responsiveGridAutoRowsStyle(props) {
+	let { media } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$autoRows, (autoRows) => ({ gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows] }));
+}
+function responsiveGridAutoColsStyle(props) {
+	let { media } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$autoCols, (autoCols) => ({ gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols] }));
+}
+function responsiveGridColumnsStyle(props) {
+	let { media } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$columns, (columns) => ({ gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));` }));
+}
+function responsiveGridRowsStyle(props) {
+	let { media } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$rows, (rows) => ({ gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));` }));
+}
+function responsiveGridGapStyle(props) {
+	let { media, space } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$gap, (gap) => ({ gridGap: gap ? rem(space[gap]) : void 0 }));
+}
+function responsiveGridGapXStyle(props) {
+	let { media, space } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$gapX, (gapX) => ({ columnGap: gapX ? rem(space[gapX]) : void 0 }));
+}
+function responsiveGridGapYStyle(props) {
+	let { media, space } = require_getScopedTheme.i(props.theme);
+	return _responsive(media, props.$gapY, (gapY) => ({ rowGap: gapY ? rem(space[gapY]) : void 0 }));
+}
+const StyledGrid = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
+	displayName: "StyledGrid",
+	componentId: "sc-osmjhz-0"
+})(responsiveGridStyle), Grid = (0, react.forwardRef)(function Grid(props, ref) {
+	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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 $ = (0, react_compiler_runtime.c)(5), [state, setState] = (0, react.useState)(initialState), delayedAction = (0, react.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]), (0, react.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 = (0, styled_components.styled)(motion_react.motion.create(Card)).withConfig({
+	displayName: "MotionCard",
+	componentId: "sc-k6wgsf-0"
+})`will-change:transform;`, TooltipCard = (0, react.forwardRef)(function TooltipCard(props, ref) {
+	let $ = (0, react_compiler_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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 (0, react.useContext)(TooltipDelayGroupContext);
+}
+const StyledTooltip = (0, styled_components.styled)(Layer).withConfig({
+	displayName: "StyledTooltip",
+	componentId: "sc-4nppkj-0"
+})`pointer-events:none;`, Tooltip = (0, react.forwardRef)(function Tooltip(props, forwardedRef) {
+	let $ = (0, react_compiler_runtime.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 = (0, react.useRef)(null), [referenceElement, setReferenceElement] = (0, react.useState)(null), arrowRef = (0, react.useRef)(null), [tooltipMaxWidth, setTooltipMaxWidth] = (0, react.useState)(0), t7;
+	$[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], (0, react.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: _floating_ui_react_dom.autoUpdate,
+		elements: t9
+	}, $[27] = middleware, $[28] = placementProp, $[29] = t9, $[30] = t10) : t10 = $[30];
+	let { floatingStyles, placement, middlewareData, refs, update } = (0, _floating_ui_react_dom.useFloating)(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = (0, react.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]), (0, react.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]), (0, react.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]), (0, react.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], (0, react.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 = (0, react.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), (0, react.useImperativeHandle)(t31, t32, t33), !child) {
+		let t34;
+		return $[101] === Symbol.for("react.memo_cache_sentinel") ? (t34 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}), $[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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(StyledTooltip, {
+		"data-ui": "Tooltip",
 		...restProps,
-		onKeyDown: handleKeyDown,
-		ref,
-		role: "tablist",
-		children: tabs
-	}), $[10] = handleKeyDown, $[11] = ref, $[12] = restProps, $[13] = tabs, $[14] = t2) : t2 = $[14], t2;
+		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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children }) : children, $[131] = animate, $[132] = children, $[133] = t39) : t39 = $[133];
+	let t40;
+	return $[134] !== child || $[135] !== t39 ? (t40 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t39, child] }), $[134] = child, $[135] = t39, $[136] = t40) : t40 = $[136], t40;
 });
+function useMiddleware(t0) {
+	let $ = (0, react_compiler_runtime.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 = (0, _floating_ui_react_dom.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 = (0, _floating_ui_react_dom.offset)({ mainAxis: 4 }), $[11] = t3) : t3 = $[11], ret.push(t3);
+		let t4 = boundaryElement || void 0, t5;
+		if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = (0, _floating_ui_react_dom.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 = (0, _floating_ui_react_dom.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 $ = (0, react_compiler_runtime.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 = (0, use_effect_event.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], (0, react.useEffect)(t2, t3);
+}
+/**
+* @public
+*/
+function PortalProvider(props) {
+	let $ = (0, react_compiler_runtime.c)(7), { boundaryElement, children, element, __unstable_elements: elements } = props, fallbackElement = (0, react.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__ */ (0, react_jsx_runtime.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 = () => () => {};
 Object.defineProperty(exports, "$", {
 	enumerable: !0,
 	get: function() {
-		return responsiveInputPaddingStyle;
+		return Spinner;
 	}
 }), Object.defineProperty(exports, "A", {
 	enumerable: !0,
 	get: function() {
-		return useMediaIndex;
+		return Arrow;
 	}
 }), Object.defineProperty(exports, "At", {
 	enumerable: !0,
@@ -3306,12 +3313,12 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "B", {
 	enumerable: !0,
 	get: function() {
-		return _cardColorStyle;
+		return useMediaIndex;
 	}
 }), Object.defineProperty(exports, "C", {
 	enumerable: !0,
 	get: function() {
-		return BoundaryElementContext;
+		return textInputRepresentationStyle;
 	}
 }), Object.defineProperty(exports, "Ct", {
 	enumerable: !0,
@@ -3321,7 +3328,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "D", {
 	enumerable: !0,
 	get: function() {
-		return Grid;
+		return useCustomValidity;
 	}
 }), Object.defineProperty(exports, "Dt", {
 	enumerable: !0,
@@ -3331,7 +3338,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "E", {
 	enumerable: !0,
 	get: function() {
-		return Inline;
+		return responsiveInputPaddingStyle;
 	}
 }), Object.defineProperty(exports, "Et", {
 	enumerable: !0,
@@ -3341,7 +3348,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "F", {
 	enumerable: !0,
 	get: function() {
-		return _ResizeObserver;
+		return useBoundaryElement;
 	}
 }), Object.defineProperty(exports, "Ft", {
 	enumerable: !0,
@@ -3351,17 +3358,17 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "G", {
 	enumerable: !0,
 	get: function() {
-		return SpanWithTextOverflow;
+		return ThemeColorProvider;
 	}
 }), Object.defineProperty(exports, "H", {
 	enumerable: !0,
 	get: function() {
-		return Flex;
+		return _elementSizeObserver;
 	}
 }), Object.defineProperty(exports, "I", {
 	enumerable: !0,
 	get: function() {
-		return useCustomValidity;
+		return BoundaryElementContext;
 	}
 }), Object.defineProperty(exports, "It", {
 	enumerable: !0,
@@ -3371,22 +3378,22 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "J", {
 	enumerable: !0,
 	get: function() {
-		return textInputBaseStyle;
+		return createGlobalScopedContext;
 	}
 }), Object.defineProperty(exports, "K", {
 	enumerable: !0,
 	get: function() {
-		return responsiveRadiusStyle;
+		return useRootTheme;
 	}
 }), Object.defineProperty(exports, "L", {
 	enumerable: !0,
 	get: function() {
-		return useClickOutsideEvent;
+		return isRecord;
 	}
 }), Object.defineProperty(exports, "M", {
 	enumerable: !0,
 	get: function() {
-		return useGlobalKeyDown;
+		return usePortal;
 	}
 }), Object.defineProperty(exports, "Mt", {
 	enumerable: !0,
@@ -3396,7 +3403,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "N", {
 	enumerable: !0,
 	get: function() {
-		return useElementSize;
+		return useLayer;
 	}
 }), Object.defineProperty(exports, "Nt", {
 	enumerable: !0,
@@ -3406,7 +3413,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "O", {
 	enumerable: !0,
 	get: function() {
-		return usePrefersReducedMotion;
+		return Stack;
 	}
 }), Object.defineProperty(exports, "Ot", {
 	enumerable: !0,
@@ -3416,7 +3423,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "P", {
 	enumerable: !0,
 	get: function() {
-		return _elementSizeObserver;
+		return LayerProvider;
 	}
 }), Object.defineProperty(exports, "Pt", {
 	enumerable: !0,
@@ -3426,17 +3433,17 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "Q", {
 	enumerable: !0,
 	get: function() {
-		return responsiveInputPaddingIconRightStyle;
+		return _cardColorStyle;
 	}
 }), Object.defineProperty(exports, "R", {
 	enumerable: !0,
 	get: function() {
-		return Card;
+		return usePrefersReducedMotion;
 	}
 }), Object.defineProperty(exports, "S", {
 	enumerable: !0,
 	get: function() {
-		return isRecord;
+		return textInputFontSizeStyle;
 	}
 }), Object.defineProperty(exports, "St", {
 	enumerable: !0,
@@ -3446,7 +3453,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "T", {
 	enumerable: !0,
 	get: function() {
-		return KBD;
+		return responsiveInputPaddingIconRightStyle;
 	}
 }), Object.defineProperty(exports, "Tt", {
 	enumerable: !0,
@@ -3456,37 +3463,37 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "U", {
 	enumerable: !0,
 	get: function() {
-		return Text;
+		return _ResizeObserver;
 	}
 }), Object.defineProperty(exports, "V", {
 	enumerable: !0,
 	get: function() {
-		return Spinner;
+		return useElementSize;
 	}
 }), Object.defineProperty(exports, "W", {
 	enumerable: !0,
 	get: function() {
-		return Box;
+		return Card;
 	}
 }), Object.defineProperty(exports, "X", {
 	enumerable: !0,
 	get: function() {
-		return textInputRepresentationStyle;
+		return focusRingBorderStyle;
 	}
 }), Object.defineProperty(exports, "Y", {
 	enumerable: !0,
 	get: function() {
-		return textInputFontSizeStyle;
+		return Button;
 	}
 }), Object.defineProperty(exports, "Z", {
 	enumerable: !0,
 	get: function() {
-		return textInputRootStyle;
+		return focusRingStyle;
 	}
 }), Object.defineProperty(exports, "_", {
 	enumerable: !0,
 	get: function() {
-		return usePortal;
+		return Layer;
 	}
 }), Object.defineProperty(exports, "_t", {
 	enumerable: !0,
@@ -3496,17 +3503,17 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "a", {
 	enumerable: !0,
 	get: function() {
-		return MenuDivider;
+		return useDelayedState;
 	}
 }), Object.defineProperty(exports, "at", {
 	enumerable: !0,
 	get: function() {
-		return useRootTheme;
+		return Flex;
 	}
 }), Object.defineProperty(exports, "b", {
 	enumerable: !0,
 	get: function() {
-		return LayerProvider;
+		return TextInput;
 	}
 }), Object.defineProperty(exports, "bt", {
 	enumerable: !0,
@@ -3516,17 +3523,17 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "c", {
 	enumerable: !0,
 	get: function() {
-		return Tooltip;
+		return TabList;
 	}
 }), Object.defineProperty(exports, "ct", {
 	enumerable: !0,
 	get: function() {
-		return responsiveTextFont;
+		return responsiveRadiusStyle;
 	}
 }), Object.defineProperty(exports, "d", {
 	enumerable: !0,
 	get: function() {
-		return useDelayedState;
+		return MenuGroup;
 	}
 }), Object.defineProperty(exports, "dt", {
 	enumerable: !0,
@@ -3536,12 +3543,12 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "et", {
 	enumerable: !0,
 	get: function() {
-		return focusRingBorderStyle;
+		return Text;
 	}
 }), Object.defineProperty(exports, "f", {
 	enumerable: !0,
 	get: function() {
-		return TextInput;
+		return MenuDivider;
 	}
 }), Object.defineProperty(exports, "ft", {
 	enumerable: !0,
@@ -3551,7 +3558,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "g", {
 	enumerable: !0,
 	get: function() {
-		return Portal;
+		return Inline;
 	}
 }), Object.defineProperty(exports, "gt", {
 	enumerable: !0,
@@ -3561,7 +3568,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "h", {
 	enumerable: !0,
 	get: function() {
-		return PortalProvider;
+		return KBD;
 	}
 }), Object.defineProperty(exports, "ht", {
 	enumerable: !0,
@@ -3571,17 +3578,17 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "i", {
 	enumerable: !0,
 	get: function() {
-		return MenuGroup;
+		return TooltipDelayGroupContext;
 	}
 }), Object.defineProperty(exports, "it", {
 	enumerable: !0,
 	get: function() {
-		return ThemeColorProvider;
+		return responsiveTextAlignStyle;
 	}
 }), Object.defineProperty(exports, "j", {
 	enumerable: !0,
 	get: function() {
-		return useMatchMedia;
+		return Portal;
 	}
 }), Object.defineProperty(exports, "jt", {
 	enumerable: !0,
@@ -3591,7 +3598,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "k", {
 	enumerable: !0,
 	get: function() {
-		return usePrefersDark;
+		return Popover;
 	}
 }), Object.defineProperty(exports, "kt", {
 	enumerable: !0,
@@ -3601,17 +3608,17 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "l", {
 	enumerable: !0,
 	get: function() {
-		return useTooltipDelayGroup;
+		return Tab;
 	}
 }), Object.defineProperty(exports, "lt", {
 	enumerable: !0,
 	get: function() {
-		return responsiveTextAlignStyle;
+		return Box;
 	}
 }), Object.defineProperty(exports, "m", {
 	enumerable: !0,
 	get: function() {
-		return Popover;
+		return Hotkeys;
 	}
 }), Object.defineProperty(exports, "mt", {
 	enumerable: !0,
@@ -3621,27 +3628,27 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "n", {
 	enumerable: !0,
 	get: function() {
-		return Tab;
+		return Tooltip;
 	}
 }), Object.defineProperty(exports, "nt", {
 	enumerable: !0,
 	get: function() {
-		return useTheme;
+		return responsiveTextFont;
 	}
 }), Object.defineProperty(exports, "o", {
 	enumerable: !0,
 	get: function() {
-		return Menu;
+		return usePrefersDark;
 	}
 }), Object.defineProperty(exports, "ot", {
 	enumerable: !0,
 	get: function() {
-		return ThemeProvider;
+		return useTheme;
 	}
 }), Object.defineProperty(exports, "p", {
 	enumerable: !0,
 	get: function() {
-		return Stack;
+		return Menu;
 	}
 }), Object.defineProperty(exports, "pt", {
 	enumerable: !0,
@@ -3651,52 +3658,52 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "q", {
 	enumerable: !0,
 	get: function() {
-		return responsivePaddingStyle;
+		return ThemeProvider;
 	}
 }), Object.defineProperty(exports, "r", {
 	enumerable: !0,
 	get: function() {
-		return MenuItem;
+		return useTooltipDelayGroup;
 	}
 }), Object.defineProperty(exports, "rt", {
 	enumerable: !0,
 	get: function() {
-		return useTheme_v2;
+		return responsiveFont;
 	}
 }), Object.defineProperty(exports, "s", {
 	enumerable: !0,
 	get: function() {
-		return Hotkeys;
+		return Grid;
 	}
 }), Object.defineProperty(exports, "st", {
 	enumerable: !0,
 	get: function() {
-		return createGlobalScopedContext;
+		return useTheme_v2;
 	}
 }), Object.defineProperty(exports, "t", {
 	enumerable: !0,
 	get: function() {
-		return TabList;
+		return PortalProvider;
 	}
 }), Object.defineProperty(exports, "tt", {
 	enumerable: !0,
 	get: function() {
-		return focusRingStyle;
+		return SpanWithTextOverflow;
 	}
 }), Object.defineProperty(exports, "u", {
 	enumerable: !0,
 	get: function() {
-		return TooltipDelayGroupContext;
+		return MenuItem;
 	}
 }), Object.defineProperty(exports, "ut", {
 	enumerable: !0,
 	get: function() {
-		return responsiveFont;
+		return responsivePaddingStyle;
 	}
 }), Object.defineProperty(exports, "v", {
 	enumerable: !0,
 	get: function() {
-		return Layer;
+		return useGlobalKeyDown;
 	}
 }), Object.defineProperty(exports, "vt", {
 	enumerable: !0,
@@ -3706,7 +3713,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "w", {
 	enumerable: !0,
 	get: function() {
-		return Arrow;
+		return textInputRootStyle;
 	}
 }), Object.defineProperty(exports, "wt", {
 	enumerable: !0,
@@ -3716,7 +3723,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "x", {
 	enumerable: !0,
 	get: function() {
-		return useBoundaryElement;
+		return textInputBaseStyle;
 	}
 }), Object.defineProperty(exports, "xt", {
 	enumerable: !0,
@@ -3726,7 +3733,7 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "y", {
 	enumerable: !0,
 	get: function() {
-		return useLayer;
+		return useClickOutsideEvent;
 	}
 }), Object.defineProperty(exports, "yt", {
 	enumerable: !0,
@@ -3736,8 +3743,8 @@ Object.defineProperty(exports, "$", {
 }), Object.defineProperty(exports, "z", {
 	enumerable: !0,
 	get: function() {
-		return Button;
+		return useMatchMedia;
 	}
 });
 
-//# sourceMappingURL=tabList.cjs.map
+//# sourceMappingURL=portalProvider.cjs.map