@sanity/ui 4.0.0-next.4 → 4.0.0-next.6

package/dist/useLayer-9Pz-GG0r.js

@@ -0,0 +1,704 @@
+import { a as rem, i as _responsive, n as _getArrayProp, o as EMPTY_ARRAY, r as _getResponsiveSpace, s as EMPTY_RECORD } from "./helpers-bwfx1e-Y.js";
+import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
+import { t as getScopedTheme } from "./getScopedTheme-C-sZsyAz.js";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext, useDebugValue, useEffect, useState, useSyncExternalStore } from "react";
+import { ThemeProvider, css, styled, useTheme } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+import { isValidElementType } from "react-is";
+const BASE_STYLE$1 = { "&[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$1;
+}
+function responsiveBoxStyle() {
+	return [
+		responsiveBoxSizingStyle,
+		responsiveBoxHeightStyle,
+		responsiveBoxOverflowStyle,
+		responsiveBoxDisplayStyle
+	];
+}
+function responsiveBoxDisplayStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$display, (display) => ({ "&:not([hidden])": { display } }));
+}
+function responsiveBoxSizingStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$sizing, (sizing) => ({ boxSizing: BOX_SIZING[sizing] }));
+}
+function responsiveBoxHeightStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$height, (height) => ({ height: BOX_HEIGHT[height] }));
+}
+function responsiveBoxOverflowStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$overflow, (overflow) => ({ overflow }));
+}
+const BASE_STYLE = {
+	minWidth: 0,
+	minHeight: 0
+};
+function flexItemStyle() {
+	return [BASE_STYLE, responsiveFlexItemStyle];
+}
+function responsiveFlexItemStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return props.$flex ? _responsive(media, props.$flex, (flex) => ({ flex: `${flex}` })) : EMPTY_ARRAY;
+}
+function responsiveGridItemStyle() {
+	return [
+		responsiveGridItemRowStyle,
+		responsiveGridItemRowStartStyle,
+		responsiveGridItemRowEndStyle,
+		responsiveGridItemColumnStyle,
+		responsiveGridItemColumnStartStyle,
+		responsiveGridItemColumnEndStyle
+	];
+}
+const GRID_ITEM_ROW = {
+	auto: "auto",
+	full: "1 / -1"
+}, GRID_ITEM_COLUMN = {
+	auto: "auto",
+	full: "1 / -1"
+};
+function responsiveGridItemRowStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$row, (row) => typeof row == "number" ? { gridRow: `span ${row} / span ${row}` } : { gridRow: GRID_ITEM_ROW[row] });
+}
+function responsiveGridItemRowStartStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$rowStart, (rowStart) => ({ gridRowStart: `${rowStart}` }));
+}
+function responsiveGridItemRowEndStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$rowEnd, (rowEnd) => ({ gridRowEnd: `${rowEnd}` }));
+}
+function responsiveGridItemColumnStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$column, (column) => typeof column == "number" ? { gridColumn: `span ${column} / span ${column}` } : { gridColumn: GRID_ITEM_COLUMN[column] });
+}
+function responsiveGridItemColumnStartStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$columnStart, (columnStart) => ({ gridColumnStart: `${columnStart}` }));
+}
+function responsiveGridItemColumnEndStyle(props) {
+	let { media } = getTheme_v2(props.theme);
+	return _responsive(media, props.$columnEnd, (columnEnd) => ({ gridColumnEnd: `${columnEnd}` }));
+}
+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);
+}
+const StyledBox = /* @__PURE__ */ styled.div.withConfig({
+	displayName: "StyledBox",
+	componentId: "sc-w5d1un-0"
+})(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = function Box(props) {
+	let $ = c(110), flex, gridColumn, gridColumnEnd, gridColumnStart, gridRow, gridRowEnd, gridRowStart, height, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, ref, restProps, sizing, t0, t1, t2, t3;
+	$[0] === props ? (flex = $[1], gridColumn = $[2], gridColumnEnd = $[3], gridColumnStart = $[4], gridRow = $[5], gridRowEnd = $[6], gridRowStart = $[7], height = $[8], marginBottom = $[9], marginLeft = $[10], marginRight = $[11], marginTop = $[12], marginX = $[13], marginY = $[14], overflow = $[15], paddingBottom = $[16], paddingLeft = $[17], paddingRight = $[18], paddingTop = $[19], paddingX = $[20], paddingY = $[21], ref = $[22], restProps = $[23], sizing = $[24], t0 = $[25], t1 = $[26], t2 = $[27], t3 = $[28]) : ({as: t0, ref, gridColumn, gridColumnStart, gridColumnEnd, display: t1, flex, height, margin: t2, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, padding: t3, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, gridRow, gridRowStart, gridRowEnd, sizing, ...restProps} = props, $[0] = props, $[1] = flex, $[2] = gridColumn, $[3] = gridColumnEnd, $[4] = gridColumnStart, $[5] = gridRow, $[6] = gridRowEnd, $[7] = gridRowStart, $[8] = height, $[9] = marginBottom, $[10] = marginLeft, $[11] = marginRight, $[12] = marginTop, $[13] = marginX, $[14] = marginY, $[15] = overflow, $[16] = paddingBottom, $[17] = paddingLeft, $[18] = paddingRight, $[19] = paddingTop, $[20] = paddingX, $[21] = paddingY, $[22] = ref, $[23] = restProps, $[24] = sizing, $[25] = t0, $[26] = t1, $[27] = t2, $[28] = 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, t4 = typeof asProp == "string" ? asProp : void 0, t5;
+	$[29] === gridColumn ? t5 = $[30] : (t5 = _getArrayProp(gridColumn), $[29] = gridColumn, $[30] = t5);
+	let t6;
+	$[31] === gridColumnStart ? t6 = $[32] : (t6 = _getArrayProp(gridColumnStart), $[31] = gridColumnStart, $[32] = t6);
+	let t7;
+	$[33] === gridColumnEnd ? t7 = $[34] : (t7 = _getArrayProp(gridColumnEnd), $[33] = gridColumnEnd, $[34] = t7);
+	let t8;
+	$[35] === display ? t8 = $[36] : (t8 = _getArrayProp(display), $[35] = display, $[36] = t8);
+	let t9;
+	$[37] === flex ? t9 = $[38] : (t9 = _getArrayProp(flex), $[37] = flex, $[38] = t9);
+	let t10;
+	$[39] === height ? t10 = $[40] : (t10 = _getArrayProp(height), $[39] = height, $[40] = t10);
+	let t11;
+	$[41] === margin ? t11 = $[42] : (t11 = _getArrayProp(margin), $[41] = margin, $[42] = t11);
+	let t12;
+	$[43] === marginX ? t12 = $[44] : (t12 = _getArrayProp(marginX), $[43] = marginX, $[44] = t12);
+	let t13;
+	$[45] === marginY ? t13 = $[46] : (t13 = _getArrayProp(marginY), $[45] = marginY, $[46] = t13);
+	let t14;
+	$[47] === marginTop ? t14 = $[48] : (t14 = _getArrayProp(marginTop), $[47] = marginTop, $[48] = t14);
+	let t15;
+	$[49] === marginRight ? t15 = $[50] : (t15 = _getArrayProp(marginRight), $[49] = marginRight, $[50] = t15);
+	let t16;
+	$[51] === marginBottom ? t16 = $[52] : (t16 = _getArrayProp(marginBottom), $[51] = marginBottom, $[52] = t16);
+	let t17;
+	$[53] === marginLeft ? t17 = $[54] : (t17 = _getArrayProp(marginLeft), $[53] = marginLeft, $[54] = t17);
+	let t18;
+	$[55] === overflow ? t18 = $[56] : (t18 = _getArrayProp(overflow), $[55] = overflow, $[56] = t18);
+	let t19;
+	$[57] === padding ? t19 = $[58] : (t19 = _getArrayProp(padding), $[57] = padding, $[58] = t19);
+	let t20;
+	$[59] === paddingX ? t20 = $[60] : (t20 = _getArrayProp(paddingX), $[59] = paddingX, $[60] = t20);
+	let t21;
+	$[61] === paddingY ? t21 = $[62] : (t21 = _getArrayProp(paddingY), $[61] = paddingY, $[62] = t21);
+	let t22;
+	$[63] === paddingTop ? t22 = $[64] : (t22 = _getArrayProp(paddingTop), $[63] = paddingTop, $[64] = t22);
+	let t23;
+	$[65] === paddingRight ? t23 = $[66] : (t23 = _getArrayProp(paddingRight), $[65] = paddingRight, $[66] = t23);
+	let t24;
+	$[67] === paddingBottom ? t24 = $[68] : (t24 = _getArrayProp(paddingBottom), $[67] = paddingBottom, $[68] = t24);
+	let t25;
+	$[69] === paddingLeft ? t25 = $[70] : (t25 = _getArrayProp(paddingLeft), $[69] = paddingLeft, $[70] = t25);
+	let t26;
+	$[71] === gridRow ? t26 = $[72] : (t26 = _getArrayProp(gridRow), $[71] = gridRow, $[72] = t26);
+	let t27;
+	$[73] === gridRowStart ? t27 = $[74] : (t27 = _getArrayProp(gridRowStart), $[73] = gridRowStart, $[74] = t27);
+	let t28;
+	$[75] === gridRowEnd ? t28 = $[76] : (t28 = _getArrayProp(gridRowEnd), $[75] = gridRowEnd, $[76] = t28);
+	let t29;
+	$[77] === sizing ? t29 = $[78] : (t29 = _getArrayProp(sizing), $[77] = sizing, $[78] = t29);
+	let t30;
+	return $[79] !== asProp || $[80] !== props.children || $[81] !== ref || $[82] !== restProps || $[83] !== t10 || $[84] !== t11 || $[85] !== t12 || $[86] !== t13 || $[87] !== t14 || $[88] !== t15 || $[89] !== t16 || $[90] !== t17 || $[91] !== t18 || $[92] !== t19 || $[93] !== t20 || $[94] !== t21 || $[95] !== t22 || $[96] !== t23 || $[97] !== t24 || $[98] !== t25 || $[99] !== t26 || $[100] !== t27 || $[101] !== t28 || $[102] !== t29 || $[103] !== t4 || $[104] !== t5 || $[105] !== t6 || $[106] !== t7 || $[107] !== t8 || $[108] !== t9 ? (t30 = /* @__PURE__ */ 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
+	}), $[79] = asProp, $[80] = props.children, $[81] = ref, $[82] = restProps, $[83] = t10, $[84] = t11, $[85] = t12, $[86] = t13, $[87] = t14, $[88] = t15, $[89] = t16, $[90] = t17, $[91] = t18, $[92] = t19, $[93] = t20, $[94] = t21, $[95] = t22, $[96] = t23, $[97] = t24, $[98] = t25, $[99] = t26, $[100] = t27, $[101] = t28, $[102] = t29, $[103] = t4, $[104] = t5, $[105] = t6, $[106] = t7, $[107] = t8, $[108] = t9, $[109] = t30) : t30 = $[109], t30;
+};
+function responsiveRadiusStyle(props) {
+	let { media, radius } = getTheme_v2(props.theme);
+	return _responsive(media, props.$radius, (value) => {
+		let borderRadius = 0;
+		return typeof value == "number" && (borderRadius = rem(radius[value])), value === "full" && (borderRadius = "9999px"), { borderRadius };
+	});
+}
+/**
+* @public
+*/
+function useTheme$1() {
+	return useTheme();
+}
+/**
+* @public
+*/
+function useTheme_v2() {
+	let $ = c(2), t0 = useTheme(), t1;
+	return $[0] === t0 ? t1 = $[1] : (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1), t1;
+}
+/**
+* @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
+	};
+}
+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 responsiveBorderStyle() {
+	return [
+		border,
+		borderTop,
+		borderRight,
+		borderBottom,
+		borderLeft
+	];
+}
+function border(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$border, (value) => value ? { "&&": { border: borderStyle } } : { "&&": { border: 0 } });
+}
+function borderTop(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$borderTop, (value) => value ? { "&&": { borderTop: borderStyle } } : { "&&": { borderTop: 0 } });
+}
+function borderRight(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$borderRight, (value) => value ? { "&&": { borderRight: borderStyle } } : { "&&": { borderRight: 0 } });
+}
+function borderBottom(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$borderBottom, (value) => value ? { "&&": { borderBottom: borderStyle } } : { "&&": { borderBottom: 0 } });
+}
+function borderLeft(props) {
+	let { card, media } = getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+	return _responsive(media, props.$borderLeft, (value) => value ? { "&&": { borderLeft: borderStyle } } : { "&&": { borderLeft: 0 } });
+}
+function toBoxShadow(shadow, color) {
+	return `${shadow.map(rem).join(" ")} ${color}`;
+}
+function shadowStyle(shadow, outlineWidth = 1) {
+	return shadow ? { boxShadow: `${`0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`}, ${toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)")}, ${toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)")}, ${toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)")}` } : EMPTY_RECORD;
+}
+function responsiveShadowStyle(props) {
+	let { card, media, shadow } = getTheme_v2(props.theme);
+	return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
+}
+/**
+* Gets the global scope instance in a given environment.
+*
+* The strategy is to return the most modern, and if not, the most common:
+* - The `globalThis` variable is the modern approach to accessing the global scope
+* - The `window` variable is the global scope in a web browser
+* - The `self` variable is the global scope in workers and others
+* - The `global` variable is the global scope in Node.js
+*/
+function getGlobalScope() {
+	if (typeof globalThis < "u") return globalThis;
+	if (typeof window < "u") return window;
+	if (typeof self < "u") return self;
+	if (typeof global < "u") return global;
+	throw Error("@sanity/ui: could not locate global scope");
+}
+const globalScope = getGlobalScope();
+/**
+* As `@sanity/ui` is declared as a dependency, and may be duplicated, sometimes across major versions
+* it's critical that vital react contexts are shared even when there is a duplicate.
+* If we used a model similar to `sanity` itself, or `styled-components`, this would be unnecessary as
+* those libraries enforce single instances.
+* Since we don't enforce it we have to support a sanity plugin being able to call hooks like `useToast`, and then
+* read the context setup by `sanity`, which calls `ToastProvider`, even if the provider and hook are different instances in memory.
+* It's also why it's vital that all changes to globally scoped providers remain fully backwards compatible to v1.
+*/
+function createGlobalScopedContext(key, defaultValue) {
+	let symbol = Symbol.for(key);
+	/**
+	* Prevent errors about re-renders on React SSR on Next.js App Router
+	*/
+	if (typeof document > "u") {
+		let context = createContext(defaultValue);
+		return context.displayName = key, context;
+	}
+	return globalScope[symbol] = globalScope[symbol] || createContext(defaultValue), globalScope[symbol];
+}
+/**
+* @internal
+*/
+const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
+/**
+* @public
+*/
+function ThemeProvider$1(props) {
+	let $ = c(15), parentTheme = useContext(ThemeContext), { children } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default"), t0;
+	bb0: {
+		if (!rootTheme) {
+			t0 = null;
+			break bb0;
+		}
+		let t1;
+		$[0] !== rootTheme || $[1] !== scheme || $[2] !== tone ? (t1 = {
+			version: 0,
+			theme: rootTheme,
+			scheme,
+			tone
+		}, $[0] = rootTheme, $[1] = scheme, $[2] = tone, $[3] = t1) : t1 = $[3], t0 = t1;
+	}
+	let themeContext = t0, t1;
+	bb1: {
+		if (!rootTheme) {
+			t1 = null;
+			break bb1;
+		}
+		let t2;
+		$[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t2 = getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t2) : t2 = $[7], t1 = t2;
+	}
+	let theme = t1;
+	if (!theme) {
+		let t2;
+		return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx("pre", { children: "ThemeProvider: no \"theme\" property provided" }), $[8] = t2) : t2 = $[8], t2;
+	}
+	let t2;
+	$[9] !== children || $[10] !== theme ? (t2 = /* @__PURE__ */ jsx(ThemeProvider, {
+		theme,
+		children
+	}), $[9] = children, $[10] = theme, $[11] = t2) : t2 = $[11];
+	let t3;
+	return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: themeContext,
+		children: t2
+	}), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
+}
+/**
+* @public
+*/
+function useRootTheme() {
+	let value = useContext(ThemeContext);
+	if (!value) throw Error("useRootTheme(): missing context value");
+	return value;
+}
+/**
+* @public
+*/
+function ThemeColorProvider(props) {
+	let $ = c(5), { children, scheme, tone } = props, root = useRootTheme(), t0 = scheme || root.scheme, t1;
+	return $[0] !== children || $[1] !== root.theme || $[2] !== t0 || $[3] !== tone ? (t1 = /* @__PURE__ */ jsx(ThemeProvider$1, {
+		scheme: t0,
+		theme: root.theme,
+		tone,
+		children
+	}), $[0] = children, $[1] = root.theme, $[2] = t0, $[3] = tone, $[4] = t1) : t1 = $[4], t1;
+}
+function cardStyle(props) {
+	return [cardBaseStyle(props), cardColorStyle(props)];
+}
+function cardBaseStyle(props) {
+	let { $checkered } = props, { space } = getTheme_v2(props.theme);
+	return css`${$checkered && css`background-size:${space[3]}px ${space[3]}px;background-position:50% 50%;background-image:var(--card-bg-image);`} &[data-as='button']{-webkit-font-smoothing:inherit;appearance:none;outline:none;font:inherit;text-align:inherit;border:0;width:-moz-available;width:-webkit-fill-available;width:stretch;}&[data-as='a']{outline:none;text-decoration:none;}&[data-as='pre']{font:inherit;}`;
+}
+function cardColorStyle(props) {
+	let { $checkered, $focusRing, $muted } = props, { card, color, style } = getTheme_v2(props.theme), border = {
+		width: card.border.width,
+		color: "var(--card-border-color)"
+	};
+	return css`color-scheme:${color._dark ? "dark" : "light"};${_cardColorStyle(color, color, $checkered)} background-color:${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};color:var(--card-fg-color);&[data-as='button']{--card-focus-ring-box-shadow:none;cursor:default;box-shadow:var(--card-focus-ring-box-shadow);&:disabled{${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}}&:not(:disabled){&[data-pressed]{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}&[data-selected]{${_cardColorStyle(color, color.selectable.default.selected, $checkered)}}@media (hover:hover){&:not([data-pressed]):not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}}&:active{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}}}&:focus-visible{--card-focus-ring-box-shadow:${$focusRing ? focusRingStyle({
+		base: color,
+		border,
+		focusRing: card.focusRing
+	}) : void 0};}}}&[data-as='a']{cursor:pointer;box-shadow:var(--card-focus-ring-box-shadow);&[data-disabled]{${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}}&:not([data-disabled]){&[data-pressed]{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}&[data-selected]{${_cardColorStyle(color, color.selectable.default.selected, $checkered)}}@media (hover:hover){&:not([data-pressed]):not([data-selected]){&[data-hovered],&:hover{${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}}&:active{${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}}}}&:focus-visible{--card-focus-ring-box-shadow:${$focusRing ? focusRingStyle({
+		base: color,
+		border,
+		focusRing: card.focusRing
+	}) : void 0};}}}${style?.card?.root}`;
+}
+const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
+	displayName: "StyledCard",
+	componentId: "sc-46g0j2-0"
+})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = function Card(props) {
+	let $ = c(57), asProp, border, borderBottom, borderLeft, borderRight, borderTop, muted, pressed, ref, 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], ref = $[9], restProps = $[10], scheme = $[11], selected = $[12], shadow = $[13], t0 = $[14], t1 = $[15], t2 = $[16], t3 = $[17]) : ({__unstable_checkered: t0, __unstable_focusRing: t1, as: asProp, border, borderTop, borderRight, borderBottom, borderLeft, muted, pressed, radius: t2, ref, 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] = ref, $[10] = restProps, $[11] = scheme, $[12] = selected, $[13] = shadow, $[14] = t0, $[15] = t1, $[16] = t2, $[17] = t3);
+	let checkered = t0 !== void 0 && t0, focusRing = t1 !== void 0 && t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6;
+	$[18] === border ? t6 = $[19] : (t6 = _getArrayProp(border), $[18] = border, $[19] = t6);
+	let t7;
+	$[20] === borderTop ? t7 = $[21] : (t7 = _getArrayProp(borderTop), $[20] = borderTop, $[21] = t7);
+	let t8;
+	$[22] === borderRight ? t8 = $[23] : (t8 = _getArrayProp(borderRight), $[22] = borderRight, $[23] = t8);
+	let t9;
+	$[24] === borderBottom ? t9 = $[25] : (t9 = _getArrayProp(borderBottom), $[24] = borderBottom, $[25] = t9);
+	let t10;
+	$[26] === borderLeft ? t10 = $[27] : (t10 = _getArrayProp(borderLeft), $[26] = borderLeft, $[27] = t10);
+	let t11;
+	$[28] === radius ? t11 = $[29] : (t11 = _getArrayProp(radius), $[28] = radius, $[29] = t11);
+	let t12;
+	$[30] === shadow ? t12 = $[31] : (t12 = _getArrayProp(shadow), $[30] = shadow, $[31] = t12);
+	let t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0, t16;
+	$[32] !== as || $[33] !== checkered || $[34] !== focusRing || $[35] !== muted || $[36] !== ref || $[37] !== restProps || $[38] !== rootTheme.scheme || $[39] !== selected || $[40] !== t10 || $[41] !== t11 || $[42] !== t12 || $[43] !== t13 || $[44] !== t14 || $[45] !== t15 || $[46] !== t4 || $[47] !== t6 || $[48] !== t7 || $[49] !== t8 || $[50] !== t9 || $[51] !== tone ? (t16 = /* @__PURE__ */ jsx(StyledCard, {
+		"data-as": t4,
+		"data-scheme": t5,
+		"data-ui": "Card",
+		"data-tone": tone,
+		...restProps,
+		$border: t6,
+		$borderTop: t7,
+		$borderRight: t8,
+		$borderBottom: t9,
+		$borderLeft: t10,
+		$checkered: checkered,
+		$focusRing: focusRing,
+		$muted: muted,
+		$radius: t11,
+		$shadow: t12,
+		$tone: tone,
+		"data-checkered": t13,
+		"data-pressed": t14,
+		"data-selected": t15,
+		forwardedAs: as,
+		ref,
+		selected
+	}), $[32] = as, $[33] = checkered, $[34] = focusRing, $[35] = muted, $[36] = ref, $[37] = restProps, $[38] = rootTheme.scheme, $[39] = selected, $[40] = t10, $[41] = t11, $[42] = t12, $[43] = t13, $[44] = t14, $[45] = t15, $[46] = t4, $[47] = t6, $[48] = t7, $[49] = t8, $[50] = t9, $[51] = tone, $[52] = t16) : t16 = $[52];
+	let t17;
+	return $[53] !== scheme || $[54] !== t16 || $[55] !== tone ? (t17 = /* @__PURE__ */ jsx(ThemeColorProvider, {
+		scheme,
+		tone,
+		children: t16
+	}), $[53] = scheme, $[54] = t16, $[55] = tone, $[56] = t17) : t17 = $[56], t17;
+};
+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;
+	}, 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();
+		};
+	};
+	return {
+		getSnapshot,
+		subscribe
+	};
+}
+/**
+* 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 $ = c(2), { media } = useTheme_v2(), t0;
+	$[0] === media ? t0 = $[1] : (t0 = _createMediaStore(media), $[0] = media, $[1] = t0);
+	let store = t0;
+	return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
+}
+/**
+* Efficiently subscribes to `window.matchMedia` queries
+*
+* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+*
+* @public
+*/
+function useMatchMedia(mediaQueryString, getServerSnapshot) {
+	let $ = c(4);
+	useDebugValue(mediaQueryString);
+	let t0;
+	$[0] === mediaQueryString ? t0 = $[1] : (t0 = (onStoreChange) => {
+		let media = window.matchMedia(mediaQueryString);
+		return media.addEventListener("change", onStoreChange), () => media.removeEventListener("change", onStoreChange);
+	}, $[0] = mediaQueryString, $[1] = t0);
+	let t1;
+	return $[2] === mediaQueryString ? t1 = $[3] : (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1), useSyncExternalStore(t0, t1, getServerSnapshot);
+}
+/**
+* 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(t0) {
+	return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$1 : t0);
+}
+function _temp$1() {
+	return !1;
+}
+function isRecord(value) {
+	return !!(value && typeof value == "object" && !Array.isArray(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 $ = c(21), { children, zOffset: t0 } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = 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] = useState(t3), [size, setSize] = useState(0), isTopLayer = size === 0, t4;
+	$[5] !== parentRegisterChild || $[6] !== setChildLayers ? (t4 = (childLevel) => {
+		let parentDispose = parentRegisterChild?.(childLevel);
+		return childLevel === void 0 ? setSize(_temp) : setChildLayers((state) => {
+			let prevLen = state[childLevel] ?? 0, nextState = {
+				...state,
+				[childLevel]: prevLen + 1
+			};
+			return setSize(Object.keys(nextState).length), nextState;
+		}), () => {
+			childLevel === void 0 ? setSize(_temp2) : 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]), 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__ */ jsx(LayerContext.Provider, {
+		value,
+		children
+	}), $[18] = children, $[19] = value, $[20] = t8) : t8 = $[20], t8;
+}
+function _temp2(v_0) {
+	return v_0 - 1;
+}
+function _temp(v) {
+	return v + 1;
+}
+/**
+* @public
+*/
+function useLayer() {
+	let $ = c(2), value = useContext(LayerContext);
+	if (!value) throw Error("useLayer(): missing context value");
+	try {
+		let t1;
+		return $[0] === value ? t1 = $[1] : (t1 = getLayerContext(value), $[0] = value, $[1] = t1), t1;
+	} catch (t0) {
+		let err = t0;
+		throw err instanceof Error ? Error(`useLayer(): ${err.message}`) : Error(`useLayer(): ${err}`);
+	}
+}
+export { useTheme_v2 as _, useMatchMedia as a, responsivePaddingStyle as b, ThemeColorProvider as c, createGlobalScopedContext as d, globalScope as f, useTheme$1 as g, _cardColorStyle as h, usePrefersReducedMotion as i, useRootTheme as l, focusRingStyle as m, LayerProvider as n, useMediaIndex as o, focusRingBorderStyle as p, isRecord as r, Card as s, useLayer as t, ThemeProvider$1 as u, responsiveRadiusStyle as v, flexItemStyle as x, Box as y };
+
+//# sourceMappingURL=useLayer-9Pz-GG0r.js.map