@sanity/ui 3.3.1 → 3.3.3

package/dist/tabList.js

@@ -0,0 +1,3804 @@
+var __create = Object.create, __defProp = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __getOwnPropNames = Object.getOwnPropertyNames, __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty, __copyProps = (to, from, except, desc) => {
+	if (from && typeof from == "object" || typeof from == "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) key = keys[i], !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+		get: ((k) => from[k]).bind(null, key),
+		enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+	});
+	return to;
+}, __toESM = (mod, isNodeMode, target) => (target = mod == null ? {} : __create(__getProtoOf(mod)), __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: !0
+}) : target, mod));
+const require_theme = require("./theme2.js");
+let react_compiler_runtime = require("react-compiler-runtime"), _sanity_icons = require("@sanity/icons"), react = require("react");
+react = __toESM(react);
+let react_is = require("react-is"), styled_components = require("styled-components"), react_jsx_runtime = require("react/jsx-runtime"), 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");
+/**
+* @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 = {
+	card: {
+		initial: {
+			scale: .97,
+			willChange: "transform"
+		},
+		hidden: { opacity: 0 },
+		visible: {
+			opacity: 1,
+			transition: {
+				when: "beforeChildren",
+				duration: POPOVER_MOTION_DURATION / 2
+			}
+		},
+		scaleIn: { scale: 1 },
+		scaleOut: { scale: .97 }
+	},
+	children: {
+		hidden: { opacity: 0 },
+		visible: { opacity: 1 }
+	},
+	transition: {
+		type: "spring",
+		visualDuration: POPOVER_MOTION_DURATION,
+		bounce: .25
+	}
+};
+/**
+* @internal
+*/
+function _isEnterToClickElement(element) {
+	return isHTMLAnchorElement(element) || isHTMLButtonElement(element);
+}
+/**
+* @internal
+*/
+function isHTMLElement(node) {
+	return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
+}
+/**
+* @internal
+*/
+function isHTMLAnchorElement(element) {
+	return isHTMLElement(element) && element.nodeName === "A";
+}
+/**
+* @internal
+*/
+function isHTMLInputElement(element) {
+	return isHTMLElement(element) && element.nodeName === "INPUT";
+}
+/**
+* @internal
+*/
+function isHTMLButtonElement(element) {
+	return isHTMLElement(element) && element.nodeName === "BUTTON";
+}
+/**
+* @internal
+*/
+function isHTMLSelectElement(element) {
+	return isHTMLElement(element) && element.nodeName === "SELECT";
+}
+/**
+* @internal
+*/
+function isHTMLTextAreaElement(element) {
+	return isHTMLElement(element) && element.nodeName === "TEXTAREA";
+}
+/**
+* @internal
+*/
+function containsOrEqualsElement(element, node) {
+	return element.contains(node) || element === node;
+}
+/**
+* @internal
+*/
+function _fillCSSObject(keys, value) {
+	return keys.reduce((style, key) => (style[key] = value, style), {});
+}
+/**
+* @public
+*/
+function rem(pixelValue) {
+	return pixelValue === 0 ? 0 : `${pixelValue / 16}rem`;
+}
+/**
+* @internal
+*/
+function _responsive(media, values, callback) {
+	return (values?.map(callback) || []).map((statement, mediaIndex) => mediaIndex === 0 ? statement : { [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement });
+}
+/**
+* @internal
+*/
+function _getArrayProp(val, defaultVal) {
+	return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
+}
+/**
+* @internal
+*/
+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);
+	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;
+}
+ThemeProvider.displayName = "ThemeProvider";
+/**
+* @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;
+}
+ThemeColorProvider.displayName = "ThemeColorProvider";
+/**
+* @public
+*/
+function useTheme() {
+	return (0, styled_components.useTheme)();
+}
+/**
+* @public
+*/
+function useTheme_v2() {
+	return require_theme.X((0, styled_components.useTheme)());
+}
+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"
+}, BOX_HEIGHT = {
+	stretch: "stretch",
+	fill: "100%"
+};
+function boxStyle() {
+	return BASE_STYLE$3;
+}
+function responsiveBoxStyle() {
+	return [
+		responsiveBoxSizingStyle,
+		responsiveBoxHeightStyle,
+		responsiveBoxOverflowStyle,
+		responsiveBoxDisplayStyle
+	];
+}
+function responsiveBoxDisplayStyle(props) {
+	let { media } = require_theme.X(props.theme);
+	return _responsive(media, props.$display, (display) => ({ "&:not([hidden])": { display } }));
+}
+function responsiveBoxSizingStyle(props) {
+	let { media } = require_theme.X(props.theme);
+	return _responsive(media, props.$sizing, (sizing) => ({ boxSizing: BOX_SIZING[sizing] }));
+}
+function responsiveBoxHeightStyle(props) {
+	let { media } = require_theme.X(props.theme);
+	return _responsive(media, props.$height, (height) => ({ height: BOX_HEIGHT[height] }));
+}
+function responsiveBoxOverflowStyle(props) {
+	let { media } = require_theme.X(props.theme);
+	return _responsive(media, props.$overflow, (overflow) => ({ overflow }));
+}
+const BASE_STYLE$2 = {
+	minWidth: 0,
+	minHeight: 0
+};
+function flexItemStyle() {
+	return [BASE_STYLE$2, responsiveFlexItemStyle];
+}
+function responsiveFlexItemStyle(props) {
+	let { media } = require_theme.X(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,
+		responsiveGridItemRowStartStyle,
+		responsiveGridItemRowEndStyle,
+		responsiveGridItemColumnStyle,
+		responsiveGridItemColumnStartStyle,
+		responsiveGridItemColumnEndStyle
+	];
+}
+const GRID_ITEM_ROW = {
+	auto: "auto",
+	full: "1 / -1"
+}, GRID_ITEM_COLUMN = {
+	auto: "auto",
+	full: "1 / -1"
+};
+function responsiveGridItemRowStyle(props) {
+	let { media } = require_theme.X(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);
+	return _responsive(media, props.$rowStart, (rowStart) => ({ gridRowStart: `${rowStart}` }));
+}
+function responsiveGridItemRowEndStyle(props) {
+	let { media } = require_theme.X(props.theme);
+	return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: `${rowEnd}` }));
+}
+function responsiveGridItemColumnStyle(props) {
+	let { media } = require_theme.X(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);
+	return _responsive(media, props.$columnStart, (columnStart) => ({ gridColumnStart: `${columnStart}` }));
+}
+function responsiveGridItemColumnEndStyle(props) {
+	let { media } = require_theme.X(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;
+	return [
+		_getResponsiveSpace(theme, ["margin"], props.$margin),
+		_getResponsiveSpace(theme, ["marginLeft", "marginRight"], props.$marginX),
+		_getResponsiveSpace(theme, ["marginTop", "marginBottom"], props.$marginY),
+		_getResponsiveSpace(theme, ["marginTop"], props.$marginTop),
+		_getResponsiveSpace(theme, ["marginRight"], props.$marginRight),
+		_getResponsiveSpace(theme, ["marginBottom"], props.$marginBottom),
+		_getResponsiveSpace(theme, ["marginLeft"], props.$marginLeft)
+	].filter(Boolean);
+}
+function responsivePaddingStyle(props) {
+	let { theme } = props;
+	return [
+		_getResponsiveSpace(theme, ["padding"], props.$padding),
+		_getResponsiveSpace(theme, ["paddingLeft", "paddingRight"], props.$paddingX),
+		_getResponsiveSpace(theme, ["paddingTop", "paddingBottom"], props.$paddingY),
+		_getResponsiveSpace(theme, ["paddingTop"], props.$paddingTop),
+		_getResponsiveSpace(theme, ["paddingRight"], props.$paddingRight),
+		_getResponsiveSpace(theme, ["paddingBottom"], props.$paddingBottom),
+		_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({
+	displayName: "StyledBox",
+	componentId: "sc-7yq461-0"
+})(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), BoxComponent = (0, react.forwardRef)(function(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);
+	let asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3, column = gridColumn === void 0 ? deprecated_column : gridColumn, columnStart = gridColumnStart === void 0 ? deprecated_columnStart : gridColumnStart, columnEnd = gridColumnEnd === void 0 ? deprecated_columnEnd : gridColumnEnd, row = gridRow === void 0 ? deprecated_row : gridRow, rowStart = gridRowStart === void 0 ? deprecated_rowStart : gridRowStart, rowEnd = gridRowEnd === void 0 ? deprecated_rowEnd : gridRowEnd, t4 = typeof asProp == "string" ? asProp : void 0, t5;
+	$[34] === column ? t5 = $[35] : (t5 = _getArrayProp(column), $[34] = column, $[35] = t5);
+	let t6;
+	$[36] === columnStart ? t6 = $[37] : (t6 = _getArrayProp(columnStart), $[36] = columnStart, $[37] = t6);
+	let t7;
+	$[38] === columnEnd ? t7 = $[39] : (t7 = _getArrayProp(columnEnd), $[38] = columnEnd, $[39] = t7);
+	let t8;
+	$[40] === display ? t8 = $[41] : (t8 = _getArrayProp(display), $[40] = display, $[41] = t8);
+	let t9;
+	$[42] === flex ? t9 = $[43] : (t9 = _getArrayProp(flex), $[42] = flex, $[43] = t9);
+	let t10;
+	$[44] === height ? t10 = $[45] : (t10 = _getArrayProp(height), $[44] = height, $[45] = t10);
+	let t11;
+	$[46] === margin ? t11 = $[47] : (t11 = _getArrayProp(margin), $[46] = margin, $[47] = t11);
+	let t12;
+	$[48] === marginX ? t12 = $[49] : (t12 = _getArrayProp(marginX), $[48] = marginX, $[49] = t12);
+	let t13;
+	$[50] === marginY ? t13 = $[51] : (t13 = _getArrayProp(marginY), $[50] = marginY, $[51] = t13);
+	let t14;
+	$[52] === marginTop ? t14 = $[53] : (t14 = _getArrayProp(marginTop), $[52] = marginTop, $[53] = t14);
+	let t15;
+	$[54] === marginRight ? t15 = $[55] : (t15 = _getArrayProp(marginRight), $[54] = marginRight, $[55] = t15);
+	let t16;
+	$[56] === marginBottom ? t16 = $[57] : (t16 = _getArrayProp(marginBottom), $[56] = marginBottom, $[57] = t16);
+	let t17;
+	$[58] === marginLeft ? t17 = $[59] : (t17 = _getArrayProp(marginLeft), $[58] = marginLeft, $[59] = t17);
+	let t18;
+	$[60] === overflow ? t18 = $[61] : (t18 = _getArrayProp(overflow), $[60] = overflow, $[61] = t18);
+	let t19;
+	$[62] === padding ? t19 = $[63] : (t19 = _getArrayProp(padding), $[62] = padding, $[63] = t19);
+	let t20;
+	$[64] === paddingX ? t20 = $[65] : (t20 = _getArrayProp(paddingX), $[64] = paddingX, $[65] = t20);
+	let t21;
+	$[66] === paddingY ? t21 = $[67] : (t21 = _getArrayProp(paddingY), $[66] = paddingY, $[67] = t21);
+	let t22;
+	$[68] === paddingTop ? t22 = $[69] : (t22 = _getArrayProp(paddingTop), $[68] = paddingTop, $[69] = t22);
+	let t23;
+	$[70] === paddingRight ? t23 = $[71] : (t23 = _getArrayProp(paddingRight), $[70] = paddingRight, $[71] = t23);
+	let t24;
+	$[72] === paddingBottom ? t24 = $[73] : (t24 = _getArrayProp(paddingBottom), $[72] = paddingBottom, $[73] = t24);
+	let t25;
+	$[74] === paddingLeft ? t25 = $[75] : (t25 = _getArrayProp(paddingLeft), $[74] = paddingLeft, $[75] = t25);
+	let t26;
+	$[76] === row ? t26 = $[77] : (t26 = _getArrayProp(row), $[76] = row, $[77] = t26);
+	let t27;
+	$[78] === rowStart ? t27 = $[79] : (t27 = _getArrayProp(rowStart), $[78] = rowStart, $[79] = t27);
+	let t28;
+	$[80] === rowEnd ? t28 = $[81] : (t28 = _getArrayProp(rowEnd), $[80] = rowEnd, $[81] = t28);
+	let t29;
+	$[82] === sizing ? t29 = $[83] : (t29 = _getArrayProp(sizing), $[82] = sizing, $[83] = t29);
+	let t30;
+	return $[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 ? (t30 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledBox, {
+		"data-as": t4,
+		"data-ui": "Box",
+		...restProps,
+		$column: t5,
+		$columnStart: t6,
+		$columnEnd: t7,
+		$display: t8,
+		$flex: t9,
+		$height: t10,
+		$margin: t11,
+		$marginX: t12,
+		$marginY: t13,
+		$marginTop: t14,
+		$marginRight: t15,
+		$marginBottom: t16,
+		$marginLeft: t17,
+		$overflow: t18,
+		$padding: t19,
+		$paddingX: t20,
+		$paddingY: t21,
+		$paddingTop: t22,
+		$paddingRight: t23,
+		$paddingBottom: t24,
+		$paddingLeft: t25,
+		$row: t26,
+		$rowStart: t27,
+		$rowEnd: t28,
+		$sizing: t29,
+		as: asProp,
+		ref,
+		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;
+});
+BoxComponent.displayName = "ForwardRef(Box)";
+/**
+* The `Box` component is a basic layout wrapper component which provides utility properties
+* for flex, margins and padding.
+*
+* @public
+*/
+const Box = BoxComponent;
+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;}}`;
+}
+const StyledText = /* @__PURE__ */ styled_components.styled.div.withConfig({
+	displayName: "StyledText",
+	componentId: "sc-aca14k-0"
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), TextComponent = (0, react.forwardRef)(function(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 ? !1 : t0, muted = t1 === void 0 ? !1 : 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;
+});
+TextComponent.displayName = "ForwardRef(Text)";
+/**
+* The `Text` component is an agile, themed typographic element.
+*
+* @public
+*/
+const Text = TextComponent, StyledFlex = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
+	displayName: "StyledFlex",
+	componentId: "sc-r9nqck-0"
+})(flexItemStyle, responsiveFlexStyle), FlexComponent = (0, react.forwardRef)(function(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);
+	let direction = t0 === void 0 ? "row" : t0, t1;
+	$[8] === align ? t1 = $[9] : (t1 = _getArrayProp(align), $[8] = align, $[9] = t1);
+	let t2;
+	$[10] === direction ? t2 = $[11] : (t2 = _getArrayProp(direction), $[10] = direction, $[11] = t2);
+	let t3;
+	$[12] === gap ? t3 = $[13] : (t3 = _getArrayProp(gap), $[12] = gap, $[13] = t3);
+	let t4;
+	$[14] === justify ? t4 = $[15] : (t4 = _getArrayProp(justify), $[14] = justify, $[15] = t4);
+	let t5;
+	$[16] === wrap ? t5 = $[17] : (t5 = _getArrayProp(wrap), $[16] = wrap, $[17] = t5);
+	let t6;
+	return $[18] !== as || $[19] !== ref || $[20] !== restProps || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 ? (t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFlex, {
+		"data-ui": "Flex",
+		...restProps,
+		$align: t1,
+		$direction: t2,
+		$gap: t3,
+		$justify: t4,
+		$wrap: t5,
+		forwardedAs: as,
+		ref
+	}), $[18] = as, $[19] = ref, $[20] = restProps, $[21] = t1, $[22] = t2, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = t6) : t6 = $[26], t6;
+});
+FlexComponent.displayName = "ForwardRef(Flex)";
+/**
+* The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+*
+* @public
+*/
+const Flex = FlexComponent, rotate = styled_components.keyframes`from{transform:rotate(0deg);}to{transform:rotate(360deg);}`, StyledSpinner = (0, styled_components.styled)(Text).withConfig({
+	displayName: "StyledSpinner",
+	componentId: "sc-jtkakc-0"
+})`& > span > svg{animation:${rotate} 500ms linear infinite;}`, Spinner = (0, react.forwardRef)(function(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.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;
+});
+Spinner.displayName = "ForwardRef(Spinner)";
+/**
+* @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,
+		"--card-avatar-yellow-bg-color": color.avatar.yellow.bg,
+		"--card-avatar-yellow-fg-color": color.avatar.yellow.fg,
+		"--card-avatar-green-bg-color": color.avatar.green.bg,
+		"--card-avatar-green-fg-color": color.avatar.green.fg,
+		"--card-avatar-cyan-bg-color": color.avatar.cyan.bg,
+		"--card-avatar-cyan-fg-color": color.avatar.cyan.fg,
+		"--card-bg-color": color.bg,
+		"--card-bg-image": checkered ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)` : void 0,
+		"--card-border-color": color.border,
+		"--card-badge-default-bg-color": color.badge.default.bg,
+		"--card-badge-default-dot-color": color.badge.default.dot,
+		"--card-badge-default-fg-color": color.badge.default.fg,
+		"--card-badge-default-icon-color": color.badge.default.icon,
+		"--card-badge-neutral-bg-color": color.badge.neutral?.bg,
+		"--card-badge-neutral-dot-color": color.badge.neutral?.dot,
+		"--card-badge-neutral-fg-color": color.badge.neutral?.fg,
+		"--card-badge-neutral-icon-color": color.badge.neutral?.icon,
+		"--card-badge-primary-bg-color": color.badge.primary.bg,
+		"--card-badge-primary-dot-color": color.badge.primary.dot,
+		"--card-badge-primary-fg-color": color.badge.primary.fg,
+		"--card-badge-primary-icon-color": color.badge.primary.icon,
+		"--card-badge-suggest-bg-color": color.badge.suggest?.bg,
+		"--card-badge-suggest-dot-color": color.badge.suggest?.dot,
+		"--card-badge-suggest-fg-color": color.badge.suggest?.fg,
+		"--card-badge-suggest-icon-color": color.badge.suggest?.icon,
+		"--card-badge-positive-bg-color": color.badge.positive.bg,
+		"--card-badge-positive-dot-color": color.badge.positive.dot,
+		"--card-badge-positive-fg-color": color.badge.positive.fg,
+		"--card-badge-positive-icon-color": color.badge.positive.icon,
+		"--card-badge-caution-bg-color": color.badge.caution.bg,
+		"--card-badge-caution-dot-color": color.badge.caution.dot,
+		"--card-badge-caution-fg-color": color.badge.caution.fg,
+		"--card-badge-caution-icon-color": color.badge.caution.icon,
+		"--card-badge-critical-bg-color": color.badge.critical.bg,
+		"--card-badge-critical-dot-color": color.badge.critical.dot,
+		"--card-badge-critical-fg-color": color.badge.critical.fg,
+		"--card-badge-critical-icon-color": color.badge.critical.icon,
+		"--card-code-bg-color": color.code.bg,
+		"--card-code-fg-color": color.code.fg,
+		"--card-fg-color": color.fg,
+		"--card-icon-color": color.icon,
+		"--card-kbd-bg-color": color.kbd.bg,
+		"--card-kbd-border-color": color.kbd.border,
+		"--card-kbd-fg-color": color.kbd.fg,
+		"--card-link-fg-color": color.link.fg,
+		"--card-muted-bg-color": color.muted.bg,
+		"--card-muted-fg-color": color.muted.fg,
+		"--card-skeleton-color-from": color.skeleton.from,
+		"--card-skeleton-color-to": color.skeleton.to,
+		"--card-bg2-color": color.muted.bg,
+		"--card-link-color": color.link.fg,
+		"--card-hairline-soft-color": color.border,
+		"--card-hairline-hard-color": color.border
+	};
+}
+/**
+* @internal
+*/
+function buttonBaseStyles(props) {
+	let { $width } = props, { style } = require_theme.X(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) {
+	return boxShadows.filter(Boolean).join(",");
+}
+/**
+* @internal
+*/
+function buttonColorStyles(props) {
+	let { $mode } = props, { button, color: baseColor, style } = require_theme.X(props.theme);
+	props.$mode;
+	let mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border = {
+		width: button.border.width,
+		color: "var(--card-border-color)"
+	};
+	return [
+		_cardColorStyle(baseColor, color.enabled),
+		{
+			backgroundColor: "var(--card-bg-color)",
+			color: "var(--card-fg-color)",
+			boxShadow: focusRingBorderStyle(border),
+			"&:disabled, &[data-disabled=\"true\"]": _cardColorStyle(baseColor, color.disabled),
+			"&:not([data-disabled='true'])": {
+				boxShadow: combineBoxShadow(focusRingBorderStyle(border), void 0),
+				"&:focus": { boxShadow: focusRingStyle({
+					base: baseColor,
+					border: {
+						width: 2,
+						color: baseColor.bg
+					},
+					focusRing: button.focusRing
+				}) },
+				"&:focus:not(:focus-visible)": { boxShadow: combineBoxShadow(focusRingBorderStyle(border), void 0) },
+				"@media (hover: hover)": {
+					"&:hover": _cardColorStyle(baseColor, color.hovered),
+					"&:active": _cardColorStyle(baseColor, color.pressed),
+					"&[data-hovered]": _cardColorStyle(baseColor, color.hovered)
+				},
+				"&[data-selected]": _cardColorStyle(baseColor, color.pressed)
+			}
+		},
+		style?.button?.root
+	].filter(Boolean);
+}
+const StyledButton = /* @__PURE__ */ styled_components.styled.button.withConfig({
+	displayName: "StyledButton",
+	componentId: "sc-czwr2e-0"
+})(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled_components.styled.div.withConfig({
+	displayName: "LoadingBox",
+	componentId: "sc-czwr2e-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;`, ButtonComponent = (0, react.forwardRef)(function(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);
+	let fontSize = t0 === void 0 ? 1 : t0, justifyProp = t1 === void 0 ? "center" : t1, mode = t2 === void 0 ? "default" : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, deprecated_space = t5 === void 0 ? 3 : t5, tone = t6 === void 0 ? "default" : t6, type = t7 === void 0 ? "button" : t7, muted = t8 === void 0 ? !1 : t8, { button } = useTheme_v2(), t9;
+	$[28] === justifyProp ? t9 = $[29] : (t9 = _getArrayProp(justifyProp), $[28] = justifyProp, $[29] = t9);
+	let justify = t9, t10;
+	$[30] === paddingProp ? t10 = $[31] : (t10 = _getArrayProp(paddingProp), $[30] = paddingProp, $[31] = t10);
+	let padding = t10, t11;
+	$[32] === paddingXProp ? t11 = $[33] : (t11 = _getArrayProp(paddingXProp), $[32] = paddingXProp, $[33] = t11);
+	let paddingX = t11, t12;
+	$[34] === paddingYProp ? t12 = $[35] : (t12 = _getArrayProp(paddingYProp), $[34] = paddingYProp, $[35] = t12);
+	let paddingY = t12, t13;
+	$[36] === paddingTopProp ? t13 = $[37] : (t13 = _getArrayProp(paddingTopProp), $[36] = paddingTopProp, $[37] = t13);
+	let paddingTop = t13, t14;
+	$[38] === paddingBottomProp ? t14 = $[39] : (t14 = _getArrayProp(paddingBottomProp), $[38] = paddingBottomProp, $[39] = t14);
+	let paddingBottom = t14, t15;
+	$[40] === paddingLeftProp ? t15 = $[41] : (t15 = _getArrayProp(paddingLeftProp), $[40] = paddingLeftProp, $[41] = t15);
+	let paddingLeft = t15, t16;
+	$[42] === paddingRightProp ? t16 = $[43] : (t16 = _getArrayProp(paddingRightProp), $[42] = paddingRightProp, $[43] = t16);
+	let paddingRight = t16, t17;
+	$[44] === radiusProp ? t17 = $[45] : (t17 = _getArrayProp(radiusProp), $[44] = radiusProp, $[45] = t17);
+	let radius = t17, t18 = gap === void 0 ? deprecated_space : gap, t19;
+	$[46] === t18 ? t19 = $[47] : (t19 = _getArrayProp(t18), $[46] = t18, $[47] = t19);
+	let spacing = t19, t20;
+	$[48] !== padding || $[49] !== paddingBottom || $[50] !== paddingLeft || $[51] !== paddingRight || $[52] !== paddingTop || $[53] !== paddingX || $[54] !== paddingY ? (t20 = {
+		padding,
+		paddingX,
+		paddingY,
+		paddingTop,
+		paddingBottom,
+		paddingLeft,
+		paddingRight
+	}, $[48] = padding, $[49] = paddingBottom, $[50] = paddingLeft, $[51] = paddingRight, $[52] = paddingTop, $[53] = paddingX, $[54] = paddingY, $[55] = t20) : t20 = $[55];
+	let boxProps = t20, t21 = !!(loading || disabled), t22 = selected ? "" : void 0, t23 = !!(loading || disabled), t24;
+	$[56] === loading ? t24 = $[57] : (t24 = !!loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingBox, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spinner, {}) }), $[56] = loading, $[57] = t24);
+	let t25;
+	$[58] !== IconComponent || $[59] !== IconRightComponent || $[60] !== boxProps || $[61] !== button || $[62] !== fontSize || $[63] !== justify || $[64] !== muted || $[65] !== spacing || $[66] !== text || $[67] !== textAlign || $[68] !== textWeight ? (t25 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		as: "span",
+		...boxProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Flex, {
+			as: "span",
+			justify,
+			gap: spacing,
+			children: [
+				IconComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Text, {
+					size: fontSize,
+					children: [(0, react.isValidElement)(IconComponent) && IconComponent, (0, react_is.isValidElementType)(IconComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {})]
+				}),
+				text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+					muted,
+					align: textAlign,
+					size: fontSize,
+					textOverflow: "ellipsis",
+					weight: textWeight ?? button.textWeight,
+					children: text
+				}) }),
+				IconRightComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Text, {
+					size: fontSize,
+					children: [(0, react.isValidElement)(IconRightComponent) && IconRightComponent, (0, react_is.isValidElementType)(IconRightComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconRightComponent, {})]
+				})
+			]
+		})
+	}), $[58] = IconComponent, $[59] = IconRightComponent, $[60] = boxProps, $[61] = button, $[62] = fontSize, $[63] = justify, $[64] = muted, $[65] = spacing, $[66] = text, $[67] = textAlign, $[68] = textWeight, $[69] = t25) : t25 = $[69];
+	let t26;
+	$[70] !== boxProps || $[71] !== children ? (t26 = children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		as: "span",
+		...boxProps,
+		children
+	}), $[70] = boxProps, $[71] = children, $[72] = t26) : t26 = $[72];
+	let t27;
+	return $[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 ? (t27 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledButton, {
+		"data-ui": "Button",
+		...restProps,
+		$mode: mode,
+		$radius: radius,
+		$tone: tone,
+		"data-disabled": t21,
+		"data-selected": t22,
+		disabled: t23,
+		ref,
+		type,
+		$width: width,
+		children: [
+			t24,
+			t25,
+			t26
+		]
+	}), $[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;
+});
+ButtonComponent.displayName = "ForwardRef(Button)";
+/**
+* @public
+*/
+const Button = ButtonComponent;
+function cardStyle(props) {
+	return [cardBaseStyle(props), cardColorStyle(props)];
+}
+function cardBaseStyle(props) {
+	let { $checkered } = props, { space } = require_theme.X(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 = {
+		width: card.border.width,
+		color: "var(--card-border-color)"
+	};
+	return styled_components.css`color-scheme:${color._dark ? "dark" : "light"};${_cardColorStyle(color, color, $checkered)} background-color:${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};color:var(--card-fg-color);&[data-as='button']{--card-focus-ring-box-shadow:none;cursor:default;box-shadow:var(--card-focus-ring-box-shadow);&:disabled{${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}}&:not(:disabled){&[data-pressed]{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}&[data-selected]{${_cardColorStyle(color, color.selectable.default.selected, $checkered)}}@media (hover:hover){&:not([data-pressed]):not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}}&:active{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}}}&:focus-visible{--card-focus-ring-box-shadow:${$focusRing ? focusRingStyle({
+		base: color,
+		border,
+		focusRing: card.focusRing
+	}) : void 0};}}}&[data-as='a']{cursor:pointer;box-shadow:var(--card-focus-ring-box-shadow);&[data-disabled]{${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}}&:not([data-disabled]){&[data-pressed]{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}&[data-selected]{${_cardColorStyle(color, color.selectable.default.selected, $checkered)}}@media (hover:hover){&:not([data-pressed]):not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}}&:active{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}}}&:focus-visible{--card-focus-ring-box-shadow:${$focusRing ? focusRingStyle({
+		base: color,
+		border,
+		focusRing: card.focusRing
+	}) : void 0};}}}${style?.card?.root}`;
+}
+const StyledCard = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
+	displayName: "StyledCard",
+	componentId: "sc-5721dn-0"
+})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), CardComponent = (0, react.forwardRef)(function(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);
+	let checkered = t0 === void 0 ? !1 : t0, focusRing = t1 === void 0 ? !1 : t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = (0, react_is.isValidElementType)(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6;
+	$[17] === border ? t6 = $[18] : (t6 = _getArrayProp(border), $[17] = border, $[18] = t6);
+	let t7;
+	$[19] === borderTop ? t7 = $[20] : (t7 = _getArrayProp(borderTop), $[19] = borderTop, $[20] = t7);
+	let t8;
+	$[21] === borderRight ? t8 = $[22] : (t8 = _getArrayProp(borderRight), $[21] = borderRight, $[22] = t8);
+	let t9;
+	$[23] === borderBottom ? t9 = $[24] : (t9 = _getArrayProp(borderBottom), $[23] = borderBottom, $[24] = t9);
+	let t10;
+	$[25] === borderLeft ? t10 = $[26] : (t10 = _getArrayProp(borderLeft), $[25] = borderLeft, $[26] = t10);
+	let t11;
+	$[27] === radius ? t11 = $[28] : (t11 = _getArrayProp(radius), $[27] = radius, $[28] = t11);
+	let t12;
+	$[29] === shadow ? t12 = $[30] : (t12 = _getArrayProp(shadow), $[29] = shadow, $[30] = t12);
+	let t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0, t16;
+	$[31] !== as || $[32] !== checkered || $[33] !== focusRing || $[34] !== muted || $[35] !== ref || $[36] !== restProps || $[37] !== rootTheme.scheme || $[38] !== selected || $[39] !== t10 || $[40] !== t11 || $[41] !== t12 || $[42] !== t13 || $[43] !== t14 || $[44] !== t15 || $[45] !== t4 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8 || $[49] !== t9 || $[50] !== tone ? (t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCard, {
+		"data-as": t4,
+		"data-scheme": t5,
+		"data-ui": "Card",
+		"data-tone": tone,
+		...restProps,
+		$border: t6,
+		$borderTop: t7,
+		$borderRight: t8,
+		$borderBottom: t9,
+		$borderLeft: t10,
+		$checkered: checkered,
+		$focusRing: focusRing,
+		$muted: muted,
+		$radius: t11,
+		$shadow: t12,
+		$tone: tone,
+		"data-checkered": t13,
+		"data-pressed": t14,
+		"data-selected": t15,
+		forwardedAs: as,
+		ref,
+		selected
+	}), $[31] = as, $[32] = checkered, $[33] = focusRing, $[34] = muted, $[35] = ref, $[36] = restProps, $[37] = rootTheme.scheme, $[38] = selected, $[39] = t10, $[40] = t11, $[41] = t12, $[42] = t13, $[43] = t14, $[44] = t15, $[45] = t4, $[46] = t6, $[47] = t7, $[48] = t8, $[49] = t9, $[50] = tone, $[51] = t16) : t16 = $[51];
+	let t17;
+	return $[52] !== scheme || $[53] !== t16 || $[54] !== tone ? (t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeColorProvider, {
+		scheme,
+		tone,
+		children: t16
+	}), $[52] = scheme, $[53] = t16, $[54] = tone, $[55] = t17) : t17 = $[55], t17;
+});
+CardComponent.displayName = "ForwardRef(Card)";
+/**
+* The `Card` component acts much like a `Box`, but with a background and foreground color.
+* Components within a `Card` inherit its colors.
+*
+* @public
+*/
+const Card = CardComponent;
+/**
+* @public
+*/
+function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundaryElement) {
+	/**
+	* The `useEffectEvent` hook allow us to always see the latest value of `listener`, `elementsArg` and `boundaryElement` without needing to
+	* juggle `useState`, `useRef` and `useState` to make sure the `mousedown` event listener isn't constantly being added and removed.
+	*/
+	let onEvent = (0, use_effect_event.useEffectEvent)((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);
+	}), hasListener = !!listener;
+	(0, react.useEffect)(() => {
+		if (!hasListener) return;
+		let handleEvent = (evt) => onEvent(evt);
+		return document.addEventListener("mousedown", handleEvent), () => {
+			document.removeEventListener("mousedown", handleEvent);
+		};
+	}, [hasListener]), (0, react.useDebugValue)(listener ? "MouseDown On" : "MouseDown Off");
+}
+/**
+* @beta
+*/
+function useCustomValidity(ref, customValidity) {
+	(0, react.useEffect)(() => {
+		ref.current?.setCustomValidity(customValidity || "");
+	}, [customValidity, ref]);
+}
+/**
+* @internal
+*/
+const _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]) => {
+			subscriber({
+				_contentRect: entry.contentRect,
+				border: {
+					width: entry.borderBoxSize[0].inlineSize,
+					height: entry.borderBoxSize[0].blockSize
+				},
+				content: {
+					width: entry.contentRect.width,
+					height: entry.contentRect.height
+				}
+			});
+		});
+		return resizeObserver.observe(element), () => {
+			resizeObserver.unobserve(element), resizeObserver.disconnect();
+		};
+	} };
+}
+function _createElementSizeObserver() {
+	let disposeCache = /* @__PURE__ */ new WeakMap(), subscribersCache = /* @__PURE__ */ new WeakMap();
+	return { subscribe(element, subscriber) {
+		let subscribers = subscribersCache.get(element) || [], dispose = disposeCache.get(element);
+		return subscribersCache.has(element) || (subscribersCache.set(element, subscribers), dispose = _createElementRectValueListener().subscribe(element, (elementRect) => {
+			for (let sub of subscribers) sub(elementRect);
+		})), subscribers.push(subscriber), () => {
+			let idx = subscribers.indexOf(subscriber);
+			idx > -1 && subscribers.splice(idx, 1), subscribers.length === 0 && dispose && dispose();
+		};
+	} };
+}
+/**
+* Subscribe to the size of a DOM element.
+* @beta
+*/
+function useElementSize(element) {
+	let [size, setSize] = (0, react.useState)(null);
+	return (0, react.useEffect)(() => {
+		if (element) return _elementSizeObserver.subscribe(element, setSize);
+	}, [element]), 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 handleKeyDown = (0, use_effect_event.useEffectEvent)((event) => onKeyDown(event));
+	(0, react.useEffect)(() => {
+		let handler = (event) => handleKeyDown(event);
+		return window.addEventListener("keydown", handler, options), () => window.removeEventListener("keydown", handler, options);
+	}, [options]);
+}
+/**
+* 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) {
+	return (0, react.useDebugValue)(mediaQueryString), (0, react.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
+		let media = window.matchMedia(mediaQueryString);
+		return media.addEventListener("change", onStoreChange), () => media.removeEventListener("change", onStoreChange);
+	}, [mediaQueryString]), () => window.matchMedia(mediaQueryString).matches, getServerSnapshot);
+}
+function _getMediaQuery(media, index) {
+	return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
+}
+function _createMediaStore(media) {
+	let mediaLen = media.length, sizes, getSizes = () => {
+		if (!sizes) {
+			sizes = [];
+			for (let index = mediaLen; index > -1; --index) {
+				let mediaQuery = _getMediaQuery(media, index);
+				sizes.push({
+					index,
+					mq: window.matchMedia(mediaQuery)
+				});
+			}
+		}
+		return sizes;
+	};
+	return {
+		getSnapshot: () => {
+			for (let { index, mq } of getSizes()) if (mq.matches) return index;
+			return 0;
+		},
+		subscribe: (onStoreChange) => {
+			let disposeFns = [];
+			for (let { mq } of getSizes()) {
+				let handleChange = () => {
+					mq.matches && onStoreChange();
+				};
+				mq.addEventListener("change", handleChange), disposeFns.push(() => mq.removeEventListener("change", handleChange));
+			}
+			return () => {
+				for (let disposeFn of disposeFns) disposeFn();
+			};
+		}
+	};
+}
+/**
+* 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
+*
+* @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
+*/
+function getServerSnapshot() {
+	return 0;
+}
+/**
+* This API might change. DO NOT USE IN PRODUCTION.
+* @beta
+*/
+function useMediaIndex() {
+	let { media } = useTheme_v2(), store = (0, react.useMemo)(() => _createMediaStore(media), [media]);
+	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)
+*
+* 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(getServerSnapshot = () => !1) {
+	return useMatchMedia("(prefers-color-scheme: dark)", getServerSnapshot);
+}
+/**
+* Returns true if motion should be reduced
+*
+* @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-reduced-motion: no-preference)` 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-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
+* @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+*
+* @public
+*/
+function usePrefersReducedMotion(getServerSnapshot = () => !1) {
+	return useMatchMedia("(prefers-reduced-motion: reduce)", getServerSnapshot);
+}
+const StyledGrid = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
+	displayName: "StyledGrid",
+	componentId: "sc-p9qx07-0"
+})(responsiveGridStyle), GridComponent = (0, react.forwardRef)(function(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;
+});
+GridComponent.displayName = "ForwardRef(Grid)";
+/**
+* The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+*
+* @public
+*/
+const Grid = GridComponent;
+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-aabqmb-0"
+})(inlineBaseStyle, inlineSpaceStyle), InlineComponent = (0, react.forwardRef)(function(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;
+});
+InlineComponent.displayName = "ForwardRef(Inline)";
+/**
+* The `Inline` component is a layout utility for aligning and spacing items horizontally.
+*
+* @public
+*/
+const Inline = InlineComponent;
+function _temp$4(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-ielwjm-0"
+})(responsiveRadiusStyle, kbdStyle), KBDComponent = (0, react.forwardRef)(function(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;
+});
+KBDComponent.displayName = "ForwardRef(KBD)";
+/**
+* Used to define some text as keyboard input.
+*
+* @public
+*/
+const KBD = KBDComponent, 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;
+		if (floatingWidth <= 0 || floatingHeight <= 0) return {};
+		let { originX, originY } = ["bottom", "top"].includes(side) ? {
+			originX: clamp(.5 - shiftX / floatingWidth, 0, 1),
+			originY: side === "bottom" ? 0 : 1
+		} : {
+			originX: +(side === "left"),
+			originY: clamp(.5 - shiftY / floatingHeight, 0, 1)
+		};
+		return { data: {
+			originX,
+			originY
+		} };
+	}
+};
+function clamp(num, min, max) {
+	return Math.min(Math.max(num, min), max);
+}
+function moveTowardsLength(movingPoint, targetPoint, amount) {
+	let width = targetPoint.x - movingPoint.x, height = targetPoint.y - movingPoint.y, distance = Math.sqrt(width * width + height * height);
+	return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
+}
+function moveTowardsFractional(movingPoint, targetPoint, fraction) {
+	return {
+		x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+		y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
+	};
+}
+function getRoundedCommands(points) {
+	let len = points.length, cmds = [];
+	for (let i = 0; i < len; i += 1) {
+		let point = points[i], prevPoint = points[i - 1], nextPoint = points[i + 1];
+		if (prevPoint && point.radius) {
+			let curveStart = moveTowardsLength(point, prevPoint, point.radius), curveEnd = moveTowardsLength(point, nextPoint, point.radius), startControl = moveTowardsFractional(curveStart, point, .5), endControl = moveTowardsFractional(point, curveEnd, .5);
+			cmds.push({
+				type: "point",
+				...curveStart
+			}), cmds.push({
+				type: "curve",
+				curveEnd,
+				startControl,
+				endControl
+			});
+		} else cmds.push({
+			type: "point",
+			...point
+		});
+	}
+	return cmds;
+}
+function compileCommands(cmds) {
+	return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
+}
+const StyledArrow = /* @__PURE__ */ styled_components.styled.div.withConfig({
+	displayName: "StyledArrow",
+	componentId: "sc-d20m08-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-d20m08-1"
+})`stroke:var(--card-shadow-outline-color);`, ShapePath = styled_components.styled.path.withConfig({
+	displayName: "ShapePath",
+	componentId: "sc-d20m08-2"
+})`fill:var(--card-bg-color);`, Arrow = (0, react.forwardRef)(function(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;
+});
+Arrow.displayName = "ForwardRef(Arrow)";
+const 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");
+}
+const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
+/**
+* @public
+*/
+function LayerProvider(props) {
+	let $ = (0, react_compiler_runtime.c)(21), { children, zOffset: t0 } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = (0, react.useContext)(LayerContext), t1;
+	$[0] === parentContextValue ? t1 = $[1] : (t1 = parentContextValue && getLayerContext(parentContextValue), $[0] = parentContextValue, $[1] = t1);
+	let parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, t2;
+	$[2] === zOffsetProp ? t2 = $[3] : (t2 = _getArrayProp(zOffsetProp), $[2] = zOffsetProp, $[3] = t2);
+	let zOffset = t2, maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], t3;
+	$[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[4] = t3) : t3 = $[4];
+	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$3) : setChildLayers((state) => {
+			let prevLen = state[childLevel] ?? 0, nextState = {
+				...state,
+				[childLevel]: prevLen + 1
+			};
+			return setSize(Object.keys(nextState).length), nextState;
+		}), () => {
+			childLevel === void 0 ? setSize(_temp2$2) : setChildLayers((state_0) => {
+				let nextState_0 = { ...state_0 };
+				return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
+			}), parentDispose?.();
+		};
+	}, $[5] = parentRegisterChild, $[6] = setChildLayers, $[7] = t4) : t4 = $[7];
+	let registerChild = t4, t5, t6;
+	$[8] !== level || $[9] !== parentRegisterChild ? (t5 = () => parentRegisterChild?.(level), t6 = [level, parentRegisterChild], $[8] = level, $[9] = parentRegisterChild, $[10] = t5, $[11] = t6) : (t5 = $[10], t6 = $[11]), (0, react.useEffect)(t5, t6);
+	let t7;
+	$[12] !== isTopLayer || $[13] !== level || $[14] !== registerChild || $[15] !== size || $[16] !== zIndex ? (t7 = {
+		version: 0,
+		isTopLayer,
+		level,
+		registerChild,
+		size,
+		zIndex
+	}, $[12] = isTopLayer, $[13] = level, $[14] = registerChild, $[15] = size, $[16] = zIndex, $[17] = t7) : t7 = $[17];
+	let value = t7, t8;
+	return $[18] !== children || $[19] !== value ? (t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LayerContext.Provider, {
+		value,
+		children
+	}), $[18] = children, $[19] = value, $[20] = t8) : t8 = $[20], t8;
+}
+function _temp2$2(v_0) {
+	return v_0 - 1;
+}
+function _temp$3(v) {
+	return v + 1;
+}
+LayerProvider.displayName = "LayerProvider";
+/**
+* @public
+*/
+function useLayer() {
+	let value = (0, react.useContext)(LayerContext);
+	if (!value) throw Error("useLayer(): missing context value");
+	try {
+		return getLayerContext(value);
+	} catch (err) {
+		throw err instanceof Error ? Error(`useLayer(): ${err.message}`) : Error(`useLayer(): ${err}`);
+	}
+}
+const StyledLayer = /* @__PURE__ */ styled_components.styled.div.withConfig({
+	displayName: "StyledLayer",
+	componentId: "sc-h90030-0"
+})({ position: "relative" }), LayerChildren = (0, react.forwardRef)(function(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(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;
+});
+Layer.displayName = "ForwardRef(Layer)";
+const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
+globalScope[elementKey] = null;
+const PortalContext = createGlobalScopedContext(key, {
+	version: 0,
+	boundaryElement: null,
+	get element() {
+		return typeof document > "u" ? null : globalScope[elementKey] ? globalScope[elementKey] : (globalScope[elementKey] = document.createElement("div"), globalScope[elementKey].setAttribute("data-portal", ""), document.body.appendChild(globalScope[elementKey]), globalScope[elementKey]);
+	}
+});
+/**
+* @public
+*/
+function usePortal() {
+	let value = (0, react.useContext)(PortalContext);
+	if (!value) throw Error("usePortal(): missing context value");
+	if (!isRecord(value) || value.version !== 0) throw Error("usePortal(): the context value is not compatible");
+	return value;
+}
+/**
+* @public
+*/
+function Portal(props) {
+	let { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
+	return portalElement ? (0, react_dom.createPortal)(children, portalElement) : null;
+}
+Portal.displayName = "Portal";
+/**
+* @public
+*/
+function PortalProvider(props) {
+	let $ = (0, react_compiler_runtime.c)(7), { boundaryElement, children, element, __unstable_elements: elements } = props, fallbackElement = (0, react.useSyncExternalStore)(emptySubscribe, _temp$2, _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$2() {
+	return document.body;
+}
+PortalProvider.displayName = "PortalProvider";
+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,
+	0,
+	0
+], DEFAULT_FALLBACK_PLACEMENTS$1 = {
+	top: [
+		"bottom",
+		"left",
+		"right"
+	],
+	"top-start": [
+		"bottom-start",
+		"left-start",
+		"right-start"
+	],
+	"top-end": [
+		"bottom-end",
+		"left-end",
+		"right-end"
+	],
+	bottom: [
+		"top",
+		"left",
+		"right"
+	],
+	"bottom-start": [
+		"top-start",
+		"left-start",
+		"right-start"
+	],
+	"bottom-end": [
+		"top-end",
+		"left-end",
+		"right-end"
+	],
+	left: [
+		"right",
+		"top",
+		"bottom"
+	],
+	"left-start": [
+		"right-start",
+		"top-start",
+		"bottom-start"
+	],
+	"left-end": [
+		"right-end",
+		"top-end",
+		"bottom-end"
+	],
+	right: [
+		"left",
+		"top",
+		"bottom"
+	],
+	"right-start": [
+		"left-start",
+		"top-start",
+		"bottom-start"
+	],
+	"right-end": [
+		"left-end",
+		"top-end",
+		"bottom-end"
+	]
+};
+function size(options) {
+	let { constrainSize, margins, matchReferenceWidth, maxWidthRef, padding = 0, referenceWidthRef, setReferenceWidth, widthRef } = options;
+	return {
+		name: "@sanity/ui/size",
+		async fn(args) {
+			let { elements, placement, platform, rects } = args, { floating, reference } = rects, overflow = await (0, _floating_ui_react_dom.detectOverflow)(args, {
+				altBoundary: !0,
+				boundary: options.boundaryElement || void 0,
+				elementContext: "floating",
+				padding,
+				rootBoundary: "viewport"
+			}), maxWidth = Infinity, maxHeight = Infinity, floatingW = floating.width, floatingH = floating.height;
+			placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom));
+			let availableWidth = maxWidth - margins[1] - margins[3], availableHeight = maxHeight - margins[0] - margins[2], referenceWidth = reference.width - margins[1] - margins[3];
+			referenceWidthRef.current = referenceWidth, setReferenceWidth(referenceWidth), matchReferenceWidth ? elements.floating.style.width = `${referenceWidth}px` : widthRef.current !== void 0 && (elements.floating.style.width = `${widthRef.current}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, maxWidthRef.current ?? Infinity)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
+			let nextDimensions = await platform.getDimensions(elements.floating), targetH = nextDimensions.height;
+			return floatingW !== nextDimensions.width || floatingH !== targetH ? { reset: { rects: !0 } } : {};
+		}
+	};
+}
+function calcCurrentWidth(params) {
+	let { container, mediaIndex, width } = params, w = width[mediaIndex], currentWidth = w === void 0 ? width[width.length - 1] : w;
+	return typeof currentWidth == "number" ? container[currentWidth] : void 0;
+}
+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-5mkek4-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-5mkek4-1"
+})`will-change:opacity;`, PopoverCard = (0, react.forwardRef)(function(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;
+});
+PopoverCard.displayName = "ForwardRef(PopoverCard)";
+const 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(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 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, constrainSize = t3 === void 0 ? !1 : t3, overflow = t4 === void 0 ? "hidden" : t4, placementProp = t5 === void 0 ? "bottom" : t5, placementStrategy = t6 === void 0 ? "flip" : t6, preventOverflow = t7 === void 0 ? !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() ? !1 : _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 = () => {
+		widthRef.current = width;
+	}, t18 = [width], $[39] = width, $[40] = t17, $[41] = t18), (0, react.useEffect)(t17, t18);
+	let t19;
+	$[42] !== boundaryWidth || $[43] !== width ? (t19 = calcMaxWidth({
+		boundaryWidth,
+		currentWidth: width
+	}), $[42] = boundaryWidth, $[43] = width, $[44] = t19) : t19 = $[44];
+	let maxWidth = t19, maxWidthRef = (0, react.useRef)(maxWidth), t20, t21;
+	$[45] === maxWidth ? (t20 = $[46], t21 = $[47]) : (t20 = () => {
+		maxWidthRef.current = maxWidth;
+	}, t21 = [maxWidth], $[45] = maxWidth, $[46] = t20, $[47] = t21), (0, react.useEffect)(t20, t21);
+	let referenceWidthRef = (0, react.useRef)(void 0), t22, t23;
+	$[48] !== matchReferenceWidth || $[49] !== maxWidth || $[50] !== open || $[51] !== width ? (t22 = () => {
+		let floatingElement = ref.current;
+		if (!open || !floatingElement) return;
+		let referenceWidth = referenceWidthRef.current;
+		matchReferenceWidth ? referenceWidth !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
+	}, t23 = [
+		width,
+		matchReferenceWidth,
+		maxWidth,
+		open
+	], $[48] = matchReferenceWidth, $[49] = maxWidth, $[50] = open, $[51] = width, $[52] = t22, $[53] = t23) : (t22 = $[52], t23 = $[53]), (0, react.useEffect)(t22, t23);
+	let [referenceWidth_0, setReferenceWidth] = (0, react.useState)(void 0), t24;
+	$[54] !== animate || $[55] !== arrowProp || $[56] !== constrainSize || $[57] !== fallbackPlacements || $[58] !== floatingBoundary || $[59] !== margins || $[60] !== matchReferenceWidth || $[61] !== placementProp || $[62] !== placementStrategy || $[63] !== preventOverflow || $[64] !== referenceBoundary ? (t24 = {
+		animate,
+		arrowProp,
+		arrowRef,
+		constrainSize,
+		fallbackPlacements,
+		floatingBoundary,
+		margins,
+		matchReferenceWidth,
+		maxWidthRef,
+		placementProp,
+		placementStrategy,
+		preventOverflow,
+		referenceBoundary,
+		referenceWidthRef,
+		rootBoundary: "viewport",
+		setReferenceWidth,
+		widthRef
+	}, $[54] = animate, $[55] = arrowProp, $[56] = constrainSize, $[57] = fallbackPlacements, $[58] = floatingBoundary, $[59] = margins, $[60] = matchReferenceWidth, $[61] = placementProp, $[62] = placementStrategy, $[63] = preventOverflow, $[64] = referenceBoundary, $[65] = t24) : t24 = $[65];
+	let middleware = useMiddleware$1(t24), t25;
+	$[66] === referenceElement ? t25 = $[67] : (t25 = referenceElement ? { reference: referenceElement } : void 0, $[66] = referenceElement, $[67] = t25);
+	let t26;
+	$[68] !== middleware || $[69] !== placementProp || $[70] !== t25 ? (t26 = {
+		middleware,
+		placement: placementProp,
+		whileElementsMounted: _floating_ui_react_dom.autoUpdate,
+		elements: t25
+	}, $[68] = middleware, $[69] = placementProp, $[70] = t25, $[71] = t26) : t26 = $[71];
+	let { x, y, middlewareData, placement, refs, strategy, update } = (0, _floating_ui_react_dom.useFloating)(t26), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, t27;
+	$[72] === Symbol.for("react.memo_cache_sentinel") ? (t27 = (arrowEl) => {
+		arrowRef.current = arrowEl;
+	}, $[72] = t27) : t27 = $[72];
+	let setArrow = t27, t28;
+	$[73] === refs ? t28 = $[74] : (t28 = (node) => {
+		ref.current = node, refs.setFloating(node);
+	}, $[73] = refs, $[74] = t28);
+	let setFloating = t28, t29;
+	$[75] === childProp ? t29 = $[76] : (t29 = childProp ? getElementRef(childProp) : null, $[75] = childProp, $[76] = t29);
+	let t30;
+	$[77] === refs.reference.current ? t30 = $[78] : (t30 = () => refs.reference.current, $[77] = refs.reference.current, $[78] = t30), (0, react.useImperativeHandle)(t29, t30);
+	let t31;
+	bb0: {
+		if (referenceElement) {
+			t31 = childProp;
+			break bb0;
+		}
+		if (!childProp) {
+			t31 = null;
+			break bb0;
+		}
+		let t32;
+		$[79] !== childProp || $[80] !== refs.setReference ? (t32 = (0, react.cloneElement)(childProp, { ref: refs.setReference }), $[79] = childProp, $[80] = refs.setReference, $[81] = t32) : t32 = $[81], t31 = t32;
+	}
+	let child = t31, t32, t33;
+	if ($[82] === update ? (t32 = $[83], t33 = $[84]) : (t32 = () => update, t33 = [update], $[82] = update, $[83] = t32, $[84] = t33), (0, react.useImperativeHandle)(updateRef, t32, t33), disabled) {
+		let t34;
+		return $[85] === childProp ? t34 = $[86] : (t34 = childProp || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}), $[85] = childProp, $[86] = t34), t34;
+	}
+	let t34;
+	$[87] === modal ? t34 = $[88] : (t34 = modal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewportOverlay, {}), $[87] = modal, $[88] = t34);
+	let t35 = matchReferenceWidth ? referenceWidth_0 : width, t36;
+	$[89] !== animate || $[90] !== arrowProp || $[91] !== arrowX || $[92] !== arrowY || $[93] !== content || $[94] !== margins || $[95] !== originX || $[96] !== originY || $[97] !== overflow || $[98] !== padding || $[99] !== placement || $[100] !== radius || $[101] !== referenceHidden || $[102] !== restProps || $[103] !== scheme || $[104] !== setFloating || $[105] !== shadow || $[106] !== strategy || $[107] !== t35 || $[108] !== tone || $[109] !== x || $[110] !== y ? (t36 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverCard, {
+		...restProps,
+		__unstable_margins: margins,
+		animate,
+		arrow: arrowProp,
+		arrowRef: setArrow,
+		arrowX,
+		arrowY,
+		hidden: referenceHidden,
+		overflow,
+		padding,
+		placement,
+		radius,
+		ref: setFloating,
+		scheme,
+		shadow,
+		originX,
+		originY,
+		strategy,
+		tone,
+		width: t35,
+		x,
+		y,
+		children: content
+	}), $[89] = animate, $[90] = arrowProp, $[91] = arrowX, $[92] = arrowY, $[93] = content, $[94] = margins, $[95] = originX, $[96] = originY, $[97] = overflow, $[98] = padding, $[99] = placement, $[100] = radius, $[101] = referenceHidden, $[102] = restProps, $[103] = scheme, $[104] = setFloating, $[105] = shadow, $[106] = strategy, $[107] = t35, $[108] = tone, $[109] = x, $[110] = y, $[111] = t36) : t36 = $[111];
+	let t37;
+	$[112] !== t34 || $[113] !== t36 || $[114] !== zOffset ? (t37 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LayerProvider, {
+		zOffset,
+		children: [t34, t36]
+	}), $[112] = t34, $[113] = t36, $[114] = zOffset, $[115] = t37) : t37 = $[115];
+	let popover = t37, t38;
+	$[116] !== open || $[117] !== popover || $[118] !== portal ? (t38 = open && (portal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Portal, {
+		__unstable_name: typeof portal == "string" ? portal : void 0,
+		children: popover
+	}) : popover), $[116] = open, $[117] = popover, $[118] = portal, $[119] = t38) : t38 = $[119];
+	let children = t38, t39;
+	$[120] !== animate || $[121] !== children ? (t39 = animate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, { children }) : children, $[120] = animate, $[121] = children, $[122] = t39) : t39 = $[122];
+	let t40;
+	return $[123] !== child || $[124] !== t39 ? (t40 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [t39, child] }), $[123] = child, $[124] = t39, $[125] = t40) : t40 = $[125], t40;
+});
+Popover.displayName = "ForwardRef(Popover)";
+function useMiddleware$1(t0) {
+	let $ = (0, react_compiler_runtime.c)(42), { animate, arrowProp, arrowRef, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, maxWidthRef, placementProp, placementStrategy, preventOverflow, referenceBoundary, referenceWidthRef, rootBoundary, setReferenceWidth, widthRef } = t0, ret;
+	if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== constrainSize || $[4] !== fallbackPlacements || $[5] !== floatingBoundary || $[6] !== margins || $[7] !== matchReferenceWidth || $[8] !== maxWidthRef || $[9] !== placementProp || $[10] !== placementStrategy || $[11] !== preventOverflow || $[12] !== referenceBoundary || $[13] !== referenceWidthRef || $[14] !== rootBoundary || $[15] !== setReferenceWidth || $[16] !== widthRef) {
+		if (ret = [], constrainSize || preventOverflow) if (placementStrategy === "autoPlacement") {
+			let t1;
+			$[18] !== fallbackPlacements || $[19] !== placementProp ? (t1 = (0, _floating_ui_react_dom.autoPlacement)({ allowedPlacements: [placementProp].concat(fallbackPlacements) }), $[18] = fallbackPlacements, $[19] = placementProp, $[20] = t1) : t1 = $[20], ret.push(t1);
+		} else {
+			let t1 = floatingBoundary || void 0, t2;
+			$[21] !== fallbackPlacements || $[22] !== rootBoundary || $[23] !== t1 ? (t2 = (0, _floating_ui_react_dom.flip)({
+				boundary: t1,
+				fallbackPlacements,
+				padding: 4,
+				rootBoundary
+			}), $[21] = fallbackPlacements, $[22] = rootBoundary, $[23] = t1, $[24] = t2) : t2 = $[24], ret.push(t2);
+		}
+		let t1;
+		if ($[25] === Symbol.for("react.memo_cache_sentinel") ? (t1 = (0, _floating_ui_react_dom.offset)({ mainAxis: 4 }), $[25] = t1) : t1 = $[25], ret.push(t1), constrainSize || matchReferenceWidth) {
+			let t2 = floatingBoundary || void 0, t3;
+			$[26] !== constrainSize || $[27] !== margins || $[28] !== matchReferenceWidth || $[29] !== maxWidthRef || $[30] !== referenceWidthRef || $[31] !== setReferenceWidth || $[32] !== t2 || $[33] !== widthRef ? (t3 = size({
+				boundaryElement: t2,
+				constrainSize,
+				margins,
+				matchReferenceWidth,
+				maxWidthRef,
+				padding: 4,
+				referenceWidthRef,
+				setReferenceWidth,
+				widthRef
+			}), $[26] = constrainSize, $[27] = margins, $[28] = matchReferenceWidth, $[29] = maxWidthRef, $[30] = referenceWidthRef, $[31] = setReferenceWidth, $[32] = t2, $[33] = widthRef, $[34] = t3) : t3 = $[34], ret.push(t3);
+		}
+		if (preventOverflow) {
+			let t2 = floatingBoundary || void 0, t3;
+			$[35] !== rootBoundary || $[36] !== t2 ? (t3 = (0, _floating_ui_react_dom.shift)({
+				boundary: t2,
+				rootBoundary,
+				padding: 4
+			}), $[35] = rootBoundary, $[36] = t2, $[37] = t3) : t3 = $[37], ret.push(t3);
+		}
+		if (arrowProp) {
+			let t2;
+			$[38] === arrowRef ? t2 = $[39] : (t2 = (0, _floating_ui_react_dom.arrow)({
+				element: arrowRef,
+				padding: 4
+			}), $[38] = arrowRef, $[39] = t2), ret.push(t2);
+		}
+		animate && ret.push(origin);
+		let t2 = referenceBoundary || void 0, t3;
+		$[40] === t2 ? t3 = $[41] : (t3 = (0, _floating_ui_react_dom.hide)({
+			boundary: t2,
+			padding: 4,
+			strategy: "referenceHidden"
+		}), $[40] = t2, $[41] = t3), ret.push(t3), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = constrainSize, $[4] = fallbackPlacements, $[5] = floatingBoundary, $[6] = margins, $[7] = matchReferenceWidth, $[8] = maxWidthRef, $[9] = placementProp, $[10] = placementStrategy, $[11] = preventOverflow, $[12] = referenceBoundary, $[13] = referenceWidthRef, $[14] = rootBoundary, $[15] = setReferenceWidth, $[16] = widthRef, $[17] = ret;
+	} else ret = $[17];
+	return ret;
+}
+const BASE_STYLE = {
+	"&&:not([hidden])": { display: "grid" },
+	"&[data-as=\"ul\"],&[data-as=\"ol\"]": { listStyle: "none" },
+	gridTemplateColumns: "minmax(0, 1fr)",
+	gridAutoRows: "min-content"
+};
+function stackBaseStyle() {
+	return BASE_STYLE;
+}
+function responsiveStackSpaceStyle(props) {
+	let { media, space } = require_theme.X(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-tusrcx-0"
+})(stackBaseStyle, responsiveStackSpaceStyle), StackComponent = (0, react.forwardRef)(function(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);
+	let spacing = gap === void 0 ? deprecated_space : gap, t0 = typeof as == "string" ? as : void 0, t1;
+	$[5] === spacing ? t1 = $[6] : (t1 = _getArrayProp(spacing), $[5] = spacing, $[6] = t1);
+	let t2;
+	return $[7] !== as || $[8] !== ref || $[9] !== restProps || $[10] !== t0 || $[11] !== t1 ? (t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledStack, {
+		"data-as": t0,
+		"data-ui": "Stack",
+		...restProps,
+		$space: t1,
+		forwardedAs: as,
+		ref
+	}), $[7] = as, $[8] = ref, $[9] = restProps, $[10] = t0, $[11] = t1, $[12] = t2) : t2 = $[12], t2;
+});
+StackComponent.displayName = "ForwardRef(Stack)";
+/**
+* The `Stack` component is used to place elements on top of each other.
+*
+* @public
+*/
+const Stack = StackComponent, CLEAR_BUTTON_BOX_STYLE = { zIndex: 2 }, StyledTextInput = /* @__PURE__ */ (0, styled_components.styled)(Card).attrs({ forwardedAs: "span" }).withConfig({
+	displayName: "StyledTextInput",
+	componentId: "sc-p5vqj0-0"
+})(textInputRootStyle), InputRoot = styled_components.styled.span.withConfig({
+	displayName: "InputRoot",
+	componentId: "sc-p5vqj0-1"
+})`flex:1;min-width:0;display:block;position:relative;`, Prefix = (0, styled_components.styled)(Card).attrs({ forwardedAs: "span" }).withConfig({
+	displayName: "Prefix",
+	componentId: "sc-p5vqj0-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-p5vqj0-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-p5vqj0-4"
+})(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled_components.styled.span.withConfig({
+	displayName: "Presentation",
+	componentId: "sc-p5vqj0-5"
+})(responsiveRadiusStyle, textInputRepresentationStyle), LeftBox = (0, styled_components.styled)(Box).withConfig({
+	displayName: "LeftBox",
+	componentId: "sc-p5vqj0-6"
+})`position:absolute;top:0;left:0;`, RightBox = (0, styled_components.styled)(Box).withConfig({
+	displayName: "RightBox",
+	componentId: "sc-p5vqj0-7"
+})`position:absolute;top:0;right:0;`, RightCard = (0, styled_components.styled)(Card).withConfig({
+	displayName: "RightCard",
+	componentId: "sc-p5vqj0-8"
+})`background-color:transparent;position:absolute;top:0;right:0;`, TextInputClearButton = /* @__PURE__ */ (0, styled_components.styled)(Button).withConfig({
+	displayName: "TextInputClearButton",
+	componentId: "sc-p5vqj0-9"
+})({ "&:not([hidden])": { display: "block" } }), TextInput = (0, react.forwardRef)(function(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 ? !0 : t0, disabled = t1 === void 0 ? !1 : 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$1, 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, {
+			size: fontSize,
+			children: [(0, react.isValidElement)(IconComponent) && IconComponent, (0, react_is.isValidElementType)(IconComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {})]
+		})
+	}), $[34] = IconComponent, $[35] = fontSize, $[36] = padding, $[37] = t16) : t16 = $[37];
+	let t17;
+	$[38] !== $hasClearButton || $[39] !== IconRightComponent || $[40] !== fontSize || $[41] !== padding ? (t17 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightBox, {
+		padding,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Text, {
+			size: fontSize,
+			children: [(0, react.isValidElement)(IconRightComponent) && IconRightComponent, (0, react_is.isValidElementType)(IconRightComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconRightComponent, {})]
+		})
+	}), $[38] = $hasClearButton, $[39] = IconRightComponent, $[40] = fontSize, $[41] = padding, $[42] = t17) : t17 = $[42];
+	let t18;
+	$[43] !== $hasPrefix || $[44] !== $hasSuffix || $[45] !== __unstable_disableFocusRing || $[46] !== radius || $[47] !== rootTheme.scheme || $[48] !== rootTheme.tone || $[49] !== t15 || $[50] !== t16 || $[51] !== t17 ? (t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Presentation, {
+		$hasPrefix,
+		$unstableDisableFocusRing: __unstable_disableFocusRing,
+		$hasSuffix,
+		$radius: radius,
+		$scheme: rootTheme.scheme,
+		$tone: rootTheme.tone,
+		"data-border": t15,
+		"data-scheme": rootTheme.scheme,
+		"data-tone": rootTheme.tone,
+		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);
+	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;
+	$[57] !== clearButton || $[58] !== clearButtonBoxPadding || $[59] !== clearButtonPadding || $[60] !== clearButtonProps || $[61] !== customValidity || $[62] !== disabled || $[63] !== fontSize || $[64] !== handleClearClick || $[65] !== radius || $[66] !== readOnly ? (t21 = !disabled && !readOnly && clearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RightCard, {
+		forwardedAs: "span",
+		padding: clearButtonBoxPadding,
+		style: CLEAR_BUTTON_BOX_STYLE,
+		tone: customValidity ? "critical" : "inherit",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputClearButton, {
+			"aria-label": "Clear",
+			"data-qa": "clear-button",
+			fontSize,
+			icon: _sanity_icons.CloseIcon,
+			mode: "bleed",
+			padding: clearButtonPadding,
+			radius,
+			...clearButtonProps,
+			onClick: handleClearClick,
+			onMouseDown: handleClearMouseDown
+		})
+	}), $[57] = clearButton, $[58] = clearButtonBoxPadding, $[59] = clearButtonPadding, $[60] = clearButtonProps, $[61] = customValidity, $[62] = disabled, $[63] = fontSize, $[64] = handleClearClick, $[65] = radius, $[66] = readOnly, $[67] = t21) : t21 = $[67];
+	let clearButtonNode = t21, t22;
+	$[68] !== radius || $[69] !== suffix ? (t22 = suffix && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Suffix, {
+		borderTop: !0,
+		borderRight: !0,
+		borderBottom: !0,
+		radius,
+		sizing: "border",
+		tone: "inherit",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: suffix })
+	}), $[68] = radius, $[69] = suffix, $[70] = t22) : t22 = $[70];
+	let suffixNode = t22, t23 = $hasIconRight || $hasClearButton, t24;
+	$[71] !== $hasIcon || $[72] !== disabled || $[73] !== fontSize || $[74] !== padding || $[75] !== readOnly || $[76] !== restProps || $[77] !== rootTheme.scheme || $[78] !== rootTheme.tone || $[79] !== space || $[80] !== t23 || $[81] !== type || $[82] !== weight ? (t24 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
+		"data-as": "input",
+		"data-scheme": rootTheme.scheme,
+		"data-tone": rootTheme.tone,
+		...restProps,
+		$fontSize: fontSize,
+		$iconLeft: $hasIcon,
+		$iconRight: t23,
+		$padding: padding,
+		$scheme: rootTheme.scheme,
+		$space: space,
+		$tone: rootTheme.tone,
+		$weight: weight,
+		disabled,
+		readOnly,
+		ref,
+		type
+	}), $[71] = $hasIcon, $[72] = disabled, $[73] = fontSize, $[74] = padding, $[75] = readOnly, $[76] = restProps, $[77] = rootTheme.scheme, $[78] = rootTheme.tone, $[79] = space, $[80] = t23, $[81] = type, $[82] = weight, $[83] = t24) : t24 = $[83];
+	let t25;
+	$[84] !== clearButtonNode || $[85] !== presentationNode || $[86] !== t24 ? (t25 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputRoot, { children: [
+		t24,
+		presentationNode,
+		clearButtonNode
+	] }), $[84] = clearButtonNode, $[85] = presentationNode, $[86] = t24, $[87] = t25) : t25 = $[87];
+	let t26;
+	return $[88] !== prefixNode || $[89] !== rootTheme.tone || $[90] !== suffixNode || $[91] !== t25 ? (t26 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledTextInput, {
+		"data-ui": "TextInput",
+		tone: rootTheme.tone,
+		children: [
+			prefixNode,
+			t25,
+			suffixNode
+		]
+	}), $[88] = prefixNode, $[89] = rootTheme.tone, $[90] = suffixNode, $[91] = t25, $[92] = t26) : t26 = $[92], t26;
+});
+TextInput.displayName = "ForwardRef(TextInput)";
+function _temp$1(event) {
+	event.preventDefault(), event.stopPropagation();
+}
+function _temp2(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
+*/
+function useDelayedState(initialState) {
+	let [state, setState] = (0, react.useState)(initialState), delayedAction = (0, react.useRef)(void 0), onStateChange = (0, react.useCallback)((nextState, delay) => {
+		let action = () => {
+			setState(nextState);
+		};
+		if (delayedAction.current &&= (clearTimeout(delayedAction.current), void 0), !delay) return action();
+		delayedAction.current = setTimeout(action, delay);
+	}, []);
+	return (0, react.useEffect)(() => () => {
+		delayedAction.current && clearTimeout(delayedAction.current);
+	}, []), [state, onStateChange];
+}
+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-ae1zod-0"
+})`will-change:transform;`, TooltipCard = (0, react.forwardRef)(function(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;
+});
+TooltipCard.displayName = "ForwardRef(TooltipCard)";
+/**
+* @beta
+*/
+const 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-hx8o7p-0"
+})`pointer-events:none;`, Tooltip = (0, react.forwardRef)(function(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 ? !1 : t0, arrowProp = t1 === void 0 ? !1 : 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() ? !1 : _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(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,
+		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;
+});
+Tooltip.displayName = "ForwardRef(Tooltip)";
+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);
+}
+const StyledHotkeys = styled_components.styled.kbd.withConfig({
+	displayName: "StyledHotkeys",
+	componentId: "sc-j9kh17-0"
+})`font:inherit;padding:1px;&:not([hidden]){display:block;}`, Key = (0, styled_components.styled)(KBD).withConfig({
+	displayName: "Key",
+	componentId: "sc-j9kh17-1"
+})`&:not([hidden]){display:block;}`, Hotkeys = (0, react.forwardRef)(function(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);
+	let t1 = gap === void 0 ? t0 === void 0 ? .5 : t0 : gap, t2;
+	$[8] === t1 ? t2 = $[9] : (t2 = _getArrayProp(t1), $[8] = t1, $[9] = t2);
+	let spacing = t2;
+	if (!keys || keys.length === 0) {
+		let t3;
+		return $[10] === Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, {}), $[10] = t3) : t3 = $[10], t3;
+	}
+	let t3;
+	if ($[11] !== fontSize || $[12] !== keys || $[13] !== padding || $[14] !== radius) {
+		let t4;
+		$[16] !== fontSize || $[17] !== padding || $[18] !== radius ? (t4 = (key, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Key, {
+			fontSize,
+			padding,
+			radius,
+			children: key
+		}, i), $[16] = fontSize, $[17] = padding, $[18] = radius, $[19] = t4) : t4 = $[19], t3 = keys.map(t4), $[11] = fontSize, $[12] = keys, $[13] = padding, $[14] = radius, $[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	$[20] !== spacing || $[21] !== t3 ? (t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Inline, {
+		as: "span",
+		gap: spacing,
+		children: t3
+	}), $[20] = spacing, $[21] = t3, $[22] = t4) : t4 = $[22];
+	let t5;
+	return $[23] !== ref || $[24] !== restProps || $[25] !== t4 ? (t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledHotkeys, {
+		"data-ui": "Hotkeys",
+		...restProps,
+		ref,
+		children: t4
+	}), $[23] = ref, $[24] = restProps, $[25] = t4, $[26] = t5) : t5 = $[26], t5;
+});
+Hotkeys.displayName = "ForwardRef(Hotkeys)";
+const MenuContext = createGlobalScopedContext("@sanity/ui/context/menu", null);
+/**
+* @internal
+*/
+function _isFocusable(element) {
+	return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
+}
+/**
+* @internal
+*/
+function _getFocusableElements(elements) {
+	return elements.filter(_isFocusable);
+}
+/**
+* @internal
+*/
+function _getDOMPath(rootElement, el) {
+	let path = [], e = el;
+	for (; e !== rootElement;) {
+		let parentElement = e.parentElement;
+		if (!parentElement) return path;
+		let index = Array.from(parentElement.childNodes).indexOf(e);
+		if (path.unshift(index), parentElement === rootElement) return path;
+		e = parentElement;
+	}
+	return path;
+}
+const EMPTY_PATH = [];
+/**
+* @internal
+*/
+function _sortElements(rootElement, elements) {
+	if (!rootElement) return;
+	let map = /* @__PURE__ */ new WeakMap();
+	for (let el of elements) map.set(el, _getDOMPath(rootElement, el));
+	elements.sort((a, b) => {
+		let _a = map.get(a) || EMPTY_PATH, _b = map.get(b) || EMPTY_PATH, len = Math.max(_a.length, _b.length);
+		for (let i = 0; i < len; i += 1) {
+			let aIndex = _a[i] || -1, bIndex = _b[i] || -1;
+			if (aIndex !== bIndex) return aIndex - bIndex;
+		}
+		return 0;
+	});
+}
+/**
+* This controller is responsible for controlling UI menu state.
+*
+* @internal
+*/
+function useMenuController(props) {
+	let { onKeyDown, originElement, shouldFocus, rootElementRef } = props, elementsRef = (0, react.useRef)([]), [activeIndex, _setActiveIndex] = (0, react.useState)(-1), activeIndexRef = (0, react.useRef)(activeIndex), [activeElement, setActiveElement] = (0, react.useState)(null), setActiveIndex = (0, react.useCallback)((nextActiveIndex) => {
+		_setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex, setActiveElement(elementsRef.current[nextActiveIndex] || null);
+	}, []), mount = (0, react.useCallback)((element, selected) => {
+		if (!element) return () => void 0;
+		if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
+			let selectedIndex = elementsRef.current.indexOf(element);
+			setActiveIndex(selectedIndex);
+		}
+		return () => {
+			let idx = elementsRef.current.indexOf(element);
+			idx > -1 && elementsRef.current.splice(idx, 1);
+		};
+	}, [rootElementRef, setActiveIndex]), handleKeyDown = (0, react.useCallback)((event) => {
+		if (event.key === "Tab") {
+			originElement && originElement.focus();
+			return;
+		}
+		if (event.key === "Home") {
+			event.preventDefault(), event.stopPropagation();
+			let el = _getFocusableElements(elementsRef.current)[0];
+			if (!el) return;
+			let currentIndex = elementsRef.current.indexOf(el);
+			setActiveIndex(currentIndex);
+			return;
+		}
+		if (event.key === "End") {
+			event.preventDefault(), event.stopPropagation();
+			let focusableElements = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
+			if (!el) return;
+			let currentIndex = elementsRef.current.indexOf(el);
+			setActiveIndex(currentIndex);
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault(), event.stopPropagation();
+			let focusableElements = _getFocusableElements(elementsRef.current), focusableLen = focusableElements.length;
+			if (focusableLen === 0) return;
+			let focusedElement = elementsRef.current[activeIndexRef.current], focusedIndex = focusableElements.indexOf(focusedElement);
+			focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
+			let el = focusableElements[focusedIndex], currentIndex = elementsRef.current.indexOf(el);
+			setActiveIndex(currentIndex);
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault(), event.stopPropagation();
+			let focusableElements = _getFocusableElements(elementsRef.current), focusableLen = focusableElements.length;
+			if (focusableLen === 0) return;
+			let focusedElement = elementsRef.current[activeIndexRef.current], focusedIndex = focusableElements.indexOf(focusedElement);
+			focusedIndex = (focusedIndex + 1) % focusableLen;
+			let el = focusableElements[focusedIndex], currentIndex = elementsRef.current.indexOf(el);
+			setActiveIndex(currentIndex);
+			return;
+		}
+		onKeyDown && onKeyDown(event);
+	}, [
+		onKeyDown,
+		originElement,
+		setActiveIndex
+	]), handleItemMouseEnter = (0, react.useCallback)((event) => {
+		let element = event.currentTarget, currentIndex = elementsRef.current.indexOf(element);
+		setActiveIndex(currentIndex);
+	}, [setActiveIndex]), handleItemMouseLeave = (0, react.useCallback)(() => {
+		setActiveIndex(-2), rootElementRef.current?.focus();
+	}, [rootElementRef, setActiveIndex]);
+	return (0, react.useEffect)(() => {
+		if (!rootElementRef.current) return;
+		let rafId = requestAnimationFrame(() => {
+			if (activeIndex === -1) {
+				if (shouldFocus === "first") {
+					let el = _getFocusableElements(elementsRef.current)[0];
+					if (el) {
+						let currentIndex = elementsRef.current.indexOf(el);
+						setActiveIndex(currentIndex);
+					}
+				}
+				if (shouldFocus === "last") {
+					let focusableElements = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
+					if (el) {
+						let currentIndex = elementsRef.current.indexOf(el);
+						setActiveIndex(currentIndex);
+					}
+				}
+				return;
+			}
+			(elementsRef.current[activeIndex] || null)?.focus();
+		});
+		return () => cancelAnimationFrame(rafId);
+	}, [
+		activeIndex,
+		rootElementRef,
+		setActiveIndex,
+		shouldFocus
+	]), {
+		activeElement,
+		activeIndex,
+		handleItemMouseEnter,
+		handleItemMouseLeave,
+		handleKeyDown,
+		mount
+	};
+}
+const StyledMenu = (0, styled_components.styled)(Box).withConfig({
+	displayName: "StyledMenu",
+	componentId: "sc-hkwd9h-0"
+})`outline:none;overflow:auto;`, Menu = (0, react.forwardRef)(function(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) {
+		let { children: t2, focusFirst, focusLast, onClickOutside: t3, onEscape: t4, onItemClick: t5, onItemSelect: t6, onKeyDown: t7, originElement: t8, padding: t9, registerElement: t10, shouldFocus: t11, gap: t12, space: t13, ...t14 } = props;
+		children = t2, onClickOutside = t3, onEscape = t4, onItemClick = t5, onItemSelect = t6, onKeyDown = t7, originElement = t8, t0 = t9, registerElement = t10, _shouldFocus = t11, gap = t12, t1 = t13, restProps = t14, $[0] = props, $[1] = _shouldFocus, $[2] = children, $[3] = gap, $[4] = onClickOutside, $[5] = onEscape, $[6] = onItemClick, $[7] = onItemSelect, $[8] = onKeyDown, $[9] = originElement, $[10] = registerElement, $[11] = restProps, $[12] = t0, $[13] = t1;
+	} else _shouldFocus = $[1], children = $[2], gap = $[3], onClickOutside = $[4], onEscape = $[5], onItemClick = $[6], onItemSelect = $[7], onKeyDown = $[8], originElement = $[9], registerElement = $[10], restProps = $[11], t0 = $[12], t1 = $[13];
+	let padding = t0 === void 0 ? 1 : t0, spacing = gap === void 0 ? t1 === void 0 ? 1 : t1 : gap, shouldFocus = _shouldFocus ?? (props.focusFirst && "first" || props.focusLast && "last" || null), ref = (0, react.useRef)(null), t2;
+	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[14] = t2) : t2 = $[14], (0, react.useImperativeHandle)(forwardedRef, t2);
+	let { isTopLayer } = useLayer(), t3;
+	$[15] !== onKeyDown || $[16] !== originElement || $[17] !== shouldFocus ? (t3 = {
+		onKeyDown,
+		originElement,
+		shouldFocus,
+		rootElementRef: ref
+	}, $[15] = onKeyDown, $[16] = originElement, $[17] = shouldFocus, $[18] = t3) : t3 = $[18];
+	let { activeElement, activeIndex, handleItemMouseEnter, handleItemMouseLeave, handleKeyDown, mount } = useMenuController(t3), unregisterElementRef = (0, react.useRef)(null), t4;
+	$[19] === registerElement ? t4 = $[20] : (t4 = (el) => {
+		unregisterElementRef.current &&= (unregisterElementRef.current(), null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
+	}, $[19] = registerElement, $[20] = t4);
+	let handleRefChange = t4, t5, t6;
+	$[21] !== activeIndex || $[22] !== onItemSelect ? (t5 = () => {
+		onItemSelect && onItemSelect(activeIndex);
+	}, t6 = [activeIndex, onItemSelect], $[21] = activeIndex, $[22] = onItemSelect, $[23] = t5, $[24] = t6) : (t5 = $[23], t6 = $[24]), (0, react.useEffect)(t5, t6);
+	let t7;
+	$[25] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => [ref.current], $[25] = t7) : t7 = $[25], useClickOutsideEvent(isTopLayer && onClickOutside, t7);
+	let t8;
+	$[26] !== isTopLayer || $[27] !== onEscape ? (t8 = (event) => {
+		isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
+	}, $[26] = isTopLayer, $[27] = onEscape, $[28] = t8) : t8 = $[28], useGlobalKeyDown(t8);
+	let t9;
+	$[29] !== activeElement || $[30] !== handleItemMouseEnter || $[31] !== handleItemMouseLeave || $[32] !== mount || $[33] !== onClickOutside || $[34] !== onEscape || $[35] !== onItemClick || $[36] !== registerElement ? (t9 = {
+		version: 2,
+		activeElement,
+		mount,
+		onClickOutside,
+		onEscape,
+		onItemClick,
+		onItemMouseEnter: handleItemMouseEnter,
+		onItemMouseLeave: handleItemMouseLeave,
+		registerElement
+	}, $[29] = activeElement, $[30] = handleItemMouseEnter, $[31] = handleItemMouseLeave, $[32] = mount, $[33] = onClickOutside, $[34] = onEscape, $[35] = onItemClick, $[36] = registerElement, $[37] = t9) : t9 = $[37];
+	let value = t9, t10;
+	$[38] !== children || $[39] !== spacing ? (t10 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stack, {
+		gap: spacing,
+		children
+	}), $[38] = children, $[39] = spacing, $[40] = t10) : t10 = $[40];
+	let t11;
+	$[41] !== handleKeyDown || $[42] !== handleRefChange || $[43] !== padding || $[44] !== restProps || $[45] !== t10 ? (t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMenu, {
+		"data-ui": "Menu",
+		...restProps,
+		onKeyDown: handleKeyDown,
+		padding,
+		ref: handleRefChange,
+		role: "menu",
+		tabIndex: -1,
+		children: t10
+	}), $[41] = handleKeyDown, $[42] = handleRefChange, $[43] = padding, $[44] = restProps, $[45] = t10, $[46] = t11) : t11 = $[46];
+	let t12;
+	return $[47] !== t11 || $[48] !== value ? (t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuContext.Provider, {
+		value,
+		children: t11
+	}), $[47] = t11, $[48] = value, $[49] = t12) : t12 = $[49], t12;
+});
+Menu.displayName = "ForwardRef(Menu)";
+const StyledMenuDivider = styled_components.styled.hr.withConfig({
+	displayName: "StyledMenuDivider",
+	componentId: "sc-bemnwm-0"
+})`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
+StyledMenuDivider.displayName = "MenuDivider";
+/**
+* @public
+*/
+const MenuDivider = StyledMenuDivider;
+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];
+	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}`;
+}
+/**
+* @internal
+*/
+const Selectable = /* @__PURE__ */ (0, styled_components.styled)(Box).withConfig({
+	displayName: "Selectable",
+	componentId: "sc-q5xa1z-0"
+})(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
+Selectable.displayName = "Selectable";
+function useMenu() {
+	let value = (0, react.useContext)(MenuContext);
+	if (!value) throw Error("useMenu(): missing context value");
+	if (!isRecord(value) || value.version !== 2) throw Error("useMenu(): the context value is not compatible");
+	return value;
+}
+function MenuGroupComponent(props) {
+	let $ = (0, react_compiler_runtime.c)(82), IconComponent, children, gap, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
+	$[0] === props ? (IconComponent = $[1], children = $[2], gap = $[3], menuProps = $[4], onClick = $[5], popover = $[6], restProps = $[7], t0 = $[8], t1 = $[9], t2 = $[10], t3 = $[11], t4 = $[12], t5 = $[13], text = $[14]) : ({as: t0, children, fontSize: t1, icon: IconComponent, menu: menuProps, onClick, padding: t2, popover, radius: t3, gap, space: t4, text, tone: t5, ...restProps} = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = gap, $[4] = menuProps, $[5] = onClick, $[6] = popover, $[7] = restProps, $[8] = t0, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5, $[14] = text);
+	let as = t0 === void 0 ? "button" : t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, deprecated_space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, spacing = gap === void 0 ? deprecated_space : gap, menu = useMenu(), { scheme } = useRootTheme(), { activeElement, mount, onClickOutside, onEscape, onItemClick, onItemMouseEnter: _onItemMouseEnter, registerElement } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, [rootElement, setRootElement] = (0, react.useState)(null), [open, setOpen] = (0, react.useState)(!1), [shouldFocus, setShouldFocus] = (0, react.useState)(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = (0, react.useState)(!1), t6;
+	$[15] === onItemMouseEnter ? t6 = $[16] : (t6 = (event) => {
+		setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
+	}, $[15] = onItemMouseEnter, $[16] = t6);
+	let handleMouseEnter = t6, t7;
+	$[17] === rootElement ? t7 = $[18] : (t7 = (event_0) => {
+		event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
+			rootElement?.focus();
+		}));
+	}, $[17] = rootElement, $[18] = t7);
+	let handleMenuKeyDown = t7, t8;
+	$[19] === onClick ? t8 = $[20] : (t8 = (event_1) => {
+		onClick?.(event_1), setShouldFocus("first"), setOpen(!0);
+	}, $[19] = onClick, $[20] = t8);
+	let handleClick = t8, t9;
+	$[21] === onItemClick ? t9 = $[22] : (t9 = () => {
+		setOpen(!1), onItemClick?.();
+	}, $[21] = onItemClick, $[22] = t9);
+	let handleChildItemClick = t9, t10;
+	$[23] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[23] = t10) : t10 = $[23];
+	let handleMenuMouseEnter = t10, t11, t12;
+	$[24] !== mount || $[25] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[24] = mount, $[25] = rootElement, $[26] = t11, $[27] = t12) : (t11 = $[26], t12 = $[27]), (0, react.useEffect)(t11, t12);
+	let t13, t14;
+	$[28] === active ? (t13 = $[29], t14 = $[30]) : (t13 = () => {
+		active || setOpen(!1);
+	}, t14 = [active], $[28] = active, $[29] = t13, $[30] = t14), (0, react.useEffect)(t13, t14);
+	let t15, t16;
+	$[31] === open ? (t15 = $[32], t16 = $[33]) : (t15 = () => {
+		open || setWithinMenu(!1);
+	}, t16 = [open], $[31] = open, $[32] = t15, $[33] = t16), (0, react.useEffect)(t15, t16);
+	let t17, t18;
+	$[34] === shouldFocus ? (t17 = $[35], t18 = $[36]) : (t17 = () => {
+		if (!shouldFocus) return;
+		let rafId = requestAnimationFrame(() => setShouldFocus(null));
+		return () => cancelAnimationFrame(rafId);
+	}, t18 = [shouldFocus], $[34] = shouldFocus, $[35] = t17, $[36] = t18), (0, react.useEffect)(t17, t18);
+	let t19;
+	$[37] !== children || $[38] !== handleChildItemClick || $[39] !== handleMenuKeyDown || $[40] !== menuProps || $[41] !== onClickOutside || $[42] !== onEscape || $[43] !== registerElement || $[44] !== shouldFocus ? (t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Menu, {
+		...menuProps,
+		onClickOutside,
+		onEscape,
+		onItemClick: handleChildItemClick,
+		onKeyDown: handleMenuKeyDown,
+		onMouseEnter: handleMenuMouseEnter,
+		registerElement,
+		shouldFocus,
+		children
+	}), $[37] = children, $[38] = handleChildItemClick, $[39] = handleMenuKeyDown, $[40] = menuProps, $[41] = onClickOutside, $[42] = onEscape, $[43] = registerElement, $[44] = shouldFocus, $[45] = t19) : t19 = $[45];
+	let childMenu = t19, t20;
+	$[46] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
+		let target = event_2.currentTarget;
+		if (document.activeElement === target && event_2.key === "ArrowRight") {
+			setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
+			return;
+		}
+	}, $[46] = t20) : t20 = $[46];
+	let handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as === "button" ? void 0 : withinMenu, t23 = !withinMenu && active ? "" : void 0, t24;
+	$[47] === radius ? t24 = $[48] : (t24 = _getArrayProp(radius), $[47] = radius, $[48] = t24);
+	let t25 = as === "button" ? "button" : void 0, t26;
+	$[49] !== IconComponent || $[50] !== fontSize ? (t26 = IconComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Text, {
+		size: fontSize,
+		children: [(0, react.isValidElement)(IconComponent) && IconComponent, (0, react_is.isValidElementType)(IconComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {})]
+	}), $[49] = IconComponent, $[50] = fontSize, $[51] = t26) : t26 = $[51];
+	let t27;
+	$[52] !== fontSize || $[53] !== text ? (t27 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		flex: 1,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+			size: fontSize,
+			textOverflow: "ellipsis",
+			weight: "medium",
+			children: text
+		})
+	}), $[52] = fontSize, $[53] = text, $[54] = t27) : t27 = $[54];
+	let t28;
+	$[55] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_sanity_icons.ChevronRightIcon, {}), $[55] = t28) : t28 = $[55];
+	let t29;
+	$[56] === fontSize ? t29 = $[57] : (t29 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+		size: fontSize,
+		children: t28
+	}), $[56] = fontSize, $[57] = t29);
+	let t30;
+	$[58] !== padding || $[59] !== spacing || $[60] !== t26 || $[61] !== t27 || $[62] !== t29 ? (t30 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Flex, {
+		gap: spacing,
+		padding,
+		children: [
+			t26,
+			t27,
+			t29
+		]
+	}), $[58] = padding, $[59] = spacing, $[60] = t26, $[61] = t27, $[62] = t29, $[63] = t30) : t30 = $[63];
+	let t31;
+	$[64] !== as || $[65] !== handleClick || $[66] !== handleMouseEnter || $[67] !== restProps || $[68] !== scheme || $[69] !== t21 || $[70] !== t22 || $[71] !== t23 || $[72] !== t24 || $[73] !== t25 || $[74] !== t30 || $[75] !== tone ? (t31 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Selectable, {
+		"data-as": as,
+		"data-ui": "MenuGroup",
+		forwardedAs: as,
+		...restProps,
+		"aria-pressed": t21,
+		"data-pressed": t22,
+		"data-selected": t23,
+		$radius: t24,
+		$tone: tone,
+		$scheme: scheme,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onMouseEnter: handleMouseEnter,
+		ref: setRootElement,
+		tabIndex: -1,
+		type: t25,
+		children: t30
+	}), $[64] = as, $[65] = handleClick, $[66] = handleMouseEnter, $[67] = restProps, $[68] = scheme, $[69] = t21, $[70] = t22, $[71] = t23, $[72] = t24, $[73] = t25, $[74] = t30, $[75] = tone, $[76] = t31) : t31 = $[76];
+	let t32;
+	return $[77] !== childMenu || $[78] !== open || $[79] !== popover || $[80] !== t31 ? (t32 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Popover, {
+		...popover,
+		content: childMenu,
+		"data-ui": "MenuGroup__popover",
+		open,
+		children: t31
+	}), $[77] = childMenu, $[78] = open, $[79] = popover, $[80] = t31, $[81] = t32) : t32 = $[81], t32;
+}
+MenuGroupComponent.displayName = "MenuGroup";
+/**
+* @public
+*/
+const MenuGroup = MenuGroupComponent, MenuItemComponent = (0, react.forwardRef)(function(props, forwardedRef) {
+	let $ = (0, react_compiler_runtime.c)(76), IconComponent, IconRightComponent, children, disabled, gap, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, restProps, selectedProp, t0, t1, t2, t3, t4, t5, text;
+	$[0] === props ? (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], gap = $[5], hotkeys = $[6], onClick = $[7], paddingBottom = $[8], paddingLeft = $[9], paddingRight = $[10], paddingTop = $[11], paddingX = $[12], paddingY = $[13], pressed = $[14], restProps = $[15], selectedProp = $[16], t0 = $[17], t1 = $[18], t2 = $[19], t3 = $[20], t4 = $[21], t5 = $[22], text = $[23]) : ({as: t0, children, disabled, fontSize: t1, hotkeys, icon: IconComponent, iconRight: IconRightComponent, onClick, padding: t2, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, pressed, radius: t3, selected: selectedProp, gap, space: t4, text, tone: t5, ...restProps} = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = gap, $[6] = hotkeys, $[7] = onClick, $[8] = paddingBottom, $[9] = paddingLeft, $[10] = paddingRight, $[11] = paddingTop, $[12] = paddingX, $[13] = paddingY, $[14] = pressed, $[15] = restProps, $[16] = selectedProp, $[17] = t0, $[18] = t1, $[19] = t2, $[20] = t3, $[21] = t4, $[22] = t5, $[23] = text);
+	let as = t0 === void 0 ? "button" : t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, deprecated_space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, spacing = gap === void 0 ? deprecated_space : gap, { scheme } = useRootTheme(), menu = useMenu(), { activeElement, mount, onItemClick, onItemMouseEnter: _onItemMouseEnter, onItemMouseLeave: _onItemMouseLeave } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave, [rootElement, setRootElement] = (0, react.useState)(null), active = !!activeElement && activeElement === rootElement, ref = (0, react.useRef)(null), t6;
+	$[24] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[24] = t6) : t6 = $[24], (0, react.useImperativeHandle)(forwardedRef, t6);
+	let t7, t8;
+	$[25] !== mount || $[26] !== rootElement || $[27] !== selectedProp ? (t7 = () => mount(rootElement, selectedProp), t8 = [
+		mount,
+		rootElement,
+		selectedProp
+	], $[25] = mount, $[26] = rootElement, $[27] = selectedProp, $[28] = t7, $[29] = t8) : (t7 = $[28], t8 = $[29]), (0, react.useEffect)(t7, t8);
+	let t9;
+	$[30] !== disabled || $[31] !== onClick || $[32] !== onItemClick ? (t9 = (event) => {
+		disabled || (onClick && onClick(event), onItemClick && onItemClick());
+	}, $[30] = disabled, $[31] = onClick, $[32] = onItemClick, $[33] = t9) : t9 = $[33];
+	let handleClick = t9, t10;
+	$[34] !== padding || $[35] !== paddingBottom || $[36] !== paddingLeft || $[37] !== paddingRight || $[38] !== paddingTop || $[39] !== paddingX || $[40] !== paddingY ? (t10 = {
+		padding,
+		paddingX,
+		paddingY,
+		paddingTop,
+		paddingRight,
+		paddingBottom,
+		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);
+	let hotkeysFontSize = t11, t12;
+	$[44] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (el) => {
+		ref.current = el, setRootElement(el);
+	}, $[44] = t12) : t12 = $[44];
+	let setRef = t12, t13 = as !== "button" && pressed ? "" : void 0, t14 = active ? "" : void 0, t15 = disabled ? "" : void 0, t16;
+	$[45] === radius ? t16 = $[46] : (t16 = _getArrayProp(radius), $[45] = radius, $[46] = t16);
+	let t17;
+	$[47] === Symbol.for("react.memo_cache_sentinel") ? (t17 = _getArrayProp(0), $[47] = t17) : t17 = $[47];
+	let t18 = disabled ? "default" : tone, t19 = as === "button" ? "button" : void 0, t20;
+	$[48] !== IconComponent || $[49] !== IconRightComponent || $[50] !== fontSize || $[51] !== hotkeys || $[52] !== hotkeysFontSize || $[53] !== paddingProps || $[54] !== spacing || $[55] !== text ? (t20 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Flex, {
+		as: "span",
+		gap: spacing,
+		align: "center",
+		...paddingProps,
+		children: [
+			IconComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Text, {
+				size: fontSize,
+				children: [(0, react.isValidElement)(IconComponent) && IconComponent, (0, react_is.isValidElementType)(IconComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {})]
+			}),
+			text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+				flex: 1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Text, {
+					size: fontSize,
+					textOverflow: "ellipsis",
+					weight: "medium",
+					children: text
+				})
+			}),
+			hotkeys && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hotkeys, {
+				fontSize: hotkeysFontSize,
+				keys: hotkeys,
+				style: {
+					marginTop: -4,
+					marginBottom: -4
+				}
+			}),
+			IconRightComponent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Text, {
+				size: fontSize,
+				children: [(0, react.isValidElement)(IconRightComponent) && IconRightComponent, (0, react_is.isValidElementType)(IconRightComponent) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconRightComponent, {})]
+			})
+		]
+	}), $[48] = IconComponent, $[49] = IconRightComponent, $[50] = fontSize, $[51] = hotkeys, $[52] = hotkeysFontSize, $[53] = paddingProps, $[54] = spacing, $[55] = text, $[56] = t20) : t20 = $[56];
+	let t21;
+	$[57] !== children || $[58] !== paddingProps ? (t21 = children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Box, {
+		as: "span",
+		...paddingProps,
+		children
+	}), $[57] = children, $[58] = paddingProps, $[59] = t21) : t21 = $[59];
+	let t22;
+	return $[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 ? (t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Selectable, {
+		"data-ui": "MenuItem",
+		role: "menuitem",
+		...restProps,
+		"data-pressed": t13,
+		"data-selected": t14,
+		"data-disabled": t15,
+		forwardedAs: as,
+		$radius: t16,
+		$padding: t17,
+		$tone: t18,
+		$scheme: scheme,
+		disabled,
+		onClick: handleClick,
+		onMouseEnter: onItemMouseEnter,
+		onMouseLeave: onItemMouseLeave,
+		ref: setRef,
+		tabIndex: -1,
+		type: t19,
+		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;
+});
+MenuItemComponent.displayName = "ForwardRef(MenuItem)";
+/**
+* @public
+*/
+const MenuItem = MenuItemComponent;
+function _temp(s) {
+	return s - 1;
+}
+const CustomButton = (0, styled_components.styled)(Button).withConfig({
+	displayName: "CustomButton",
+	componentId: "sc-epil5s-0"
+})`max-width:100%;`, Tab = (0, react.forwardRef)(function(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);
+	let fontSize = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 2 : t1, ref = (0, react.useRef)(null), focusedRef = (0, react.useRef)(!1), t2;
+	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[11] = t2) : t2 = $[11], (0, react.useImperativeHandle)(forwardedRef, t2);
+	let t3;
+	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
+		focusedRef.current = !1;
+	}, $[12] = t3) : t3 = $[12];
+	let handleBlur = t3, t4;
+	$[13] === onFocus ? t4 = $[14] : (t4 = (event) => {
+		focusedRef.current = !0, onFocus && onFocus(event);
+	}, $[13] = onFocus, $[14] = t4);
+	let handleFocus = t4, t5, t6;
+	$[15] === focused ? (t5 = $[16], t6 = $[17]) : (t5 = () => {
+		focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
+	}, t6 = [focused], $[15] = focused, $[16] = t5, $[17] = t6), (0, react.useEffect)(t5, t6);
+	let t7 = selected ? "true" : "false", t8 = selected ? 0 : -1, t9;
+	return $[18] !== fontSize || $[19] !== handleFocus || $[20] !== icon || $[21] !== id || $[22] !== label || $[23] !== onClick || $[24] !== padding || $[25] !== restProps || $[26] !== selected || $[27] !== t7 || $[28] !== t8 ? (t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomButton, {
+		"data-ui": "Tab",
+		...restProps,
+		"aria-selected": t7,
+		fontSize,
+		icon,
+		id,
+		mode: "bleed",
+		onClick,
+		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;
+});
+Tab.displayName = "ForwardRef(Tab)";
+const CustomInline = (0, styled_components.styled)(Inline).withConfig({
+	displayName: "CustomInline",
+	componentId: "sc-k5whbp-0"
+})`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`, TabList = (0, react.forwardRef)(function(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;
+});
+TabList.displayName = "ForwardRef(TabList)", Object.defineProperty(exports, "$", {
+	enumerable: !0,
+	get: function() {
+		return responsiveInputPaddingStyle;
+	}
+}), Object.defineProperty(exports, "A", {
+	enumerable: !0,
+	get: function() {
+		return useMediaIndex;
+	}
+}), Object.defineProperty(exports, "At", {
+	enumerable: !0,
+	get: function() {
+		return parseColor;
+	}
+}), Object.defineProperty(exports, "B", {
+	enumerable: !0,
+	get: function() {
+		return _cardColorStyle;
+	}
+}), Object.defineProperty(exports, "C", {
+	enumerable: !0,
+	get: function() {
+		return BoundaryElementContext;
+	}
+}), Object.defineProperty(exports, "Ct", {
+	enumerable: !0,
+	get: function() {
+		return isHTMLTextAreaElement;
+	}
+}), Object.defineProperty(exports, "D", {
+	enumerable: !0,
+	get: function() {
+		return Grid;
+	}
+}), Object.defineProperty(exports, "Dt", {
+	enumerable: !0,
+	get: function() {
+		return hexToRgb;
+	}
+}), Object.defineProperty(exports, "E", {
+	enumerable: !0,
+	get: function() {
+		return Inline;
+	}
+}), Object.defineProperty(exports, "Et", {
+	enumerable: !0,
+	get: function() {
+		return createColorTheme;
+	}
+}), Object.defineProperty(exports, "F", {
+	enumerable: !0,
+	get: function() {
+		return _ResizeObserver;
+	}
+}), Object.defineProperty(exports, "Ft", {
+	enumerable: !0,
+	get: function() {
+		return studioTheme;
+	}
+}), Object.defineProperty(exports, "G", {
+	enumerable: !0,
+	get: function() {
+		return SpanWithTextOverflow;
+	}
+}), Object.defineProperty(exports, "H", {
+	enumerable: !0,
+	get: function() {
+		return Flex;
+	}
+}), Object.defineProperty(exports, "I", {
+	enumerable: !0,
+	get: function() {
+		return useCustomValidity;
+	}
+}), Object.defineProperty(exports, "It", {
+	enumerable: !0,
+	get: function() {
+		return __toESM;
+	}
+}), Object.defineProperty(exports, "J", {
+	enumerable: !0,
+	get: function() {
+		return textInputBaseStyle;
+	}
+}), Object.defineProperty(exports, "K", {
+	enumerable: !0,
+	get: function() {
+		return responsiveRadiusStyle;
+	}
+}), Object.defineProperty(exports, "L", {
+	enumerable: !0,
+	get: function() {
+		return useClickOutsideEvent;
+	}
+}), Object.defineProperty(exports, "M", {
+	enumerable: !0,
+	get: function() {
+		return useGlobalKeyDown;
+	}
+}), Object.defineProperty(exports, "Mt", {
+	enumerable: !0,
+	get: function() {
+		return rgbToHsl;
+	}
+}), Object.defineProperty(exports, "N", {
+	enumerable: !0,
+	get: function() {
+		return useElementSize;
+	}
+}), Object.defineProperty(exports, "Nt", {
+	enumerable: !0,
+	get: function() {
+		return rgba;
+	}
+}), Object.defineProperty(exports, "O", {
+	enumerable: !0,
+	get: function() {
+		return usePrefersReducedMotion;
+	}
+}), Object.defineProperty(exports, "Ot", {
+	enumerable: !0,
+	get: function() {
+		return hslToRgb;
+	}
+}), Object.defineProperty(exports, "P", {
+	enumerable: !0,
+	get: function() {
+		return _elementSizeObserver;
+	}
+}), Object.defineProperty(exports, "Pt", {
+	enumerable: !0,
+	get: function() {
+		return screen;
+	}
+}), Object.defineProperty(exports, "Q", {
+	enumerable: !0,
+	get: function() {
+		return responsiveInputPaddingIconRightStyle;
+	}
+}), Object.defineProperty(exports, "R", {
+	enumerable: !0,
+	get: function() {
+		return Card;
+	}
+}), Object.defineProperty(exports, "S", {
+	enumerable: !0,
+	get: function() {
+		return isRecord;
+	}
+}), Object.defineProperty(exports, "St", {
+	enumerable: !0,
+	get: function() {
+		return isHTMLSelectElement;
+	}
+}), Object.defineProperty(exports, "T", {
+	enumerable: !0,
+	get: function() {
+		return KBD;
+	}
+}), Object.defineProperty(exports, "Tt", {
+	enumerable: !0,
+	get: function() {
+		return EMPTY_RECORD;
+	}
+}), Object.defineProperty(exports, "U", {
+	enumerable: !0,
+	get: function() {
+		return Text;
+	}
+}), Object.defineProperty(exports, "V", {
+	enumerable: !0,
+	get: function() {
+		return Spinner;
+	}
+}), Object.defineProperty(exports, "W", {
+	enumerable: !0,
+	get: function() {
+		return Box;
+	}
+}), Object.defineProperty(exports, "X", {
+	enumerable: !0,
+	get: function() {
+		return textInputRepresentationStyle;
+	}
+}), Object.defineProperty(exports, "Y", {
+	enumerable: !0,
+	get: function() {
+		return textInputFontSizeStyle;
+	}
+}), Object.defineProperty(exports, "Z", {
+	enumerable: !0,
+	get: function() {
+		return textInputRootStyle;
+	}
+}), Object.defineProperty(exports, "_", {
+	enumerable: !0,
+	get: function() {
+		return usePortal;
+	}
+}), Object.defineProperty(exports, "_t", {
+	enumerable: !0,
+	get: function() {
+		return containsOrEqualsElement;
+	}
+}), Object.defineProperty(exports, "a", {
+	enumerable: !0,
+	get: function() {
+		return MenuDivider;
+	}
+}), Object.defineProperty(exports, "at", {
+	enumerable: !0,
+	get: function() {
+		return useRootTheme;
+	}
+}), Object.defineProperty(exports, "b", {
+	enumerable: !0,
+	get: function() {
+		return LayerProvider;
+	}
+}), Object.defineProperty(exports, "bt", {
+	enumerable: !0,
+	get: function() {
+		return isHTMLElement;
+	}
+}), Object.defineProperty(exports, "c", {
+	enumerable: !0,
+	get: function() {
+		return Tooltip;
+	}
+}), Object.defineProperty(exports, "ct", {
+	enumerable: !0,
+	get: function() {
+		return responsiveTextFont;
+	}
+}), Object.defineProperty(exports, "d", {
+	enumerable: !0,
+	get: function() {
+		return useDelayedState;
+	}
+}), Object.defineProperty(exports, "dt", {
+	enumerable: !0,
+	get: function() {
+		return _fillCSSObject;
+	}
+}), Object.defineProperty(exports, "et", {
+	enumerable: !0,
+	get: function() {
+		return focusRingBorderStyle;
+	}
+}), Object.defineProperty(exports, "f", {
+	enumerable: !0,
+	get: function() {
+		return TextInput;
+	}
+}), Object.defineProperty(exports, "ft", {
+	enumerable: !0,
+	get: function() {
+		return _getArrayProp;
+	}
+}), Object.defineProperty(exports, "g", {
+	enumerable: !0,
+	get: function() {
+		return Portal;
+	}
+}), Object.defineProperty(exports, "gt", {
+	enumerable: !0,
+	get: function() {
+		return _isEnterToClickElement;
+	}
+}), Object.defineProperty(exports, "h", {
+	enumerable: !0,
+	get: function() {
+		return PortalProvider;
+	}
+}), Object.defineProperty(exports, "ht", {
+	enumerable: !0,
+	get: function() {
+		return rem;
+	}
+}), Object.defineProperty(exports, "i", {
+	enumerable: !0,
+	get: function() {
+		return MenuGroup;
+	}
+}), Object.defineProperty(exports, "it", {
+	enumerable: !0,
+	get: function() {
+		return ThemeColorProvider;
+	}
+}), Object.defineProperty(exports, "j", {
+	enumerable: !0,
+	get: function() {
+		return useMatchMedia;
+	}
+}), Object.defineProperty(exports, "jt", {
+	enumerable: !0,
+	get: function() {
+		return rgbToHex;
+	}
+}), Object.defineProperty(exports, "k", {
+	enumerable: !0,
+	get: function() {
+		return usePrefersDark;
+	}
+}), Object.defineProperty(exports, "kt", {
+	enumerable: !0,
+	get: function() {
+		return multiply;
+	}
+}), Object.defineProperty(exports, "l", {
+	enumerable: !0,
+	get: function() {
+		return useTooltipDelayGroup;
+	}
+}), Object.defineProperty(exports, "lt", {
+	enumerable: !0,
+	get: function() {
+		return responsiveTextAlignStyle;
+	}
+}), Object.defineProperty(exports, "m", {
+	enumerable: !0,
+	get: function() {
+		return Popover;
+	}
+}), Object.defineProperty(exports, "mt", {
+	enumerable: !0,
+	get: function() {
+		return _responsive;
+	}
+}), Object.defineProperty(exports, "n", {
+	enumerable: !0,
+	get: function() {
+		return Tab;
+	}
+}), Object.defineProperty(exports, "nt", {
+	enumerable: !0,
+	get: function() {
+		return useTheme;
+	}
+}), Object.defineProperty(exports, "o", {
+	enumerable: !0,
+	get: function() {
+		return Menu;
+	}
+}), Object.defineProperty(exports, "ot", {
+	enumerable: !0,
+	get: function() {
+		return ThemeProvider;
+	}
+}), Object.defineProperty(exports, "p", {
+	enumerable: !0,
+	get: function() {
+		return Stack;
+	}
+}), Object.defineProperty(exports, "pt", {
+	enumerable: !0,
+	get: function() {
+		return _getResponsiveSpace;
+	}
+}), Object.defineProperty(exports, "q", {
+	enumerable: !0,
+	get: function() {
+		return responsivePaddingStyle;
+	}
+}), Object.defineProperty(exports, "r", {
+	enumerable: !0,
+	get: function() {
+		return MenuItem;
+	}
+}), Object.defineProperty(exports, "rt", {
+	enumerable: !0,
+	get: function() {
+		return useTheme_v2;
+	}
+}), Object.defineProperty(exports, "s", {
+	enumerable: !0,
+	get: function() {
+		return Hotkeys;
+	}
+}), Object.defineProperty(exports, "st", {
+	enumerable: !0,
+	get: function() {
+		return createGlobalScopedContext;
+	}
+}), Object.defineProperty(exports, "t", {
+	enumerable: !0,
+	get: function() {
+		return TabList;
+	}
+}), Object.defineProperty(exports, "tt", {
+	enumerable: !0,
+	get: function() {
+		return focusRingStyle;
+	}
+}), Object.defineProperty(exports, "u", {
+	enumerable: !0,
+	get: function() {
+		return TooltipDelayGroupContext;
+	}
+}), Object.defineProperty(exports, "ut", {
+	enumerable: !0,
+	get: function() {
+		return responsiveFont;
+	}
+}), Object.defineProperty(exports, "v", {
+	enumerable: !0,
+	get: function() {
+		return Layer;
+	}
+}), Object.defineProperty(exports, "vt", {
+	enumerable: !0,
+	get: function() {
+		return isHTMLAnchorElement;
+	}
+}), Object.defineProperty(exports, "w", {
+	enumerable: !0,
+	get: function() {
+		return Arrow;
+	}
+}), Object.defineProperty(exports, "wt", {
+	enumerable: !0,
+	get: function() {
+		return EMPTY_ARRAY;
+	}
+}), Object.defineProperty(exports, "x", {
+	enumerable: !0,
+	get: function() {
+		return useBoundaryElement;
+	}
+}), Object.defineProperty(exports, "xt", {
+	enumerable: !0,
+	get: function() {
+		return isHTMLInputElement;
+	}
+}), Object.defineProperty(exports, "y", {
+	enumerable: !0,
+	get: function() {
+		return useLayer;
+	}
+}), Object.defineProperty(exports, "yt", {
+	enumerable: !0,
+	get: function() {
+		return isHTMLButtonElement;
+	}
+}), Object.defineProperty(exports, "z", {
+	enumerable: !0,
+	get: function() {
+		return Button;
+	}
+});