@sanity/ui 3.0.0-static.17 → 3.0.0-static.19

package/dist/_chunks-cjs/_visual-editing.cjs

@@ -282,9 +282,9 @@ function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   let t1;
   return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], react.useSyncExternalStore(t0, t1, getServerSnapshot2);
 }
-const media = [360, 600, 900, 1200, 1800, 2400];
+const media = Object.values(css.BREAKPOINTS);
 function _getMediaQuery(media2, index) {
-  return index === 0 ? `screen and (max-width: ${media2[index] - 1}px)` : index === media2.length ? `screen and (min-width: ${media2[index - 1]}px)` : `screen and (min-width: ${media2[index - 1]}px) and (max-width: ${media2[index] - 1}px)`;
+  return index === 0 ? `screen and (max-width: ${media2[index + 1] - 1}px)` : index === media2.length - 1 ? `screen and (min-width: ${media2[index]}px)` : `screen and (min-width: ${media2[index]}px) and (max-width: ${media2[index + 1] - 1}px)`;
 }
 function _createMediaStore() {
   const mediaLen = media.length;
@@ -420,7 +420,7 @@ function Box(props) {
   } = t0, $[0] = t0, $[1] = align, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = borderBottom, $[6] = borderLeft, $[7] = borderRight, $[8] = borderTop, $[9] = children, $[10] = className, $[11] = column, $[12] = columnEnd, $[13] = columnStart, $[14] = columns, $[15] = direction, $[16] = flex, $[17] = gap, $[18] = gapX, $[19] = gapY, $[20] = height, $[21] = inset, $[22] = insetBottom, $[23] = insetLeft, $[24] = insetRight, $[25] = insetTop, $[26] = justify, $[27] = marginBottom, $[28] = marginLeft, $[29] = marginRight, $[30] = marginTop, $[31] = marginX, $[32] = marginY, $[33] = maxWidth, $[34] = muted, $[35] = outline, $[36] = overflow, $[37] = overflowX, $[38] = overflowY, $[39] = paddingBottom, $[40] = paddingLeft, $[41] = paddingRight, $[42] = paddingTop, $[43] = paddingX, $[44] = paddingY, $[45] = pointerEvents, $[46] = position, $[47] = radius, $[48] = rest, $[49] = row, $[50] = rowEnd, $[51] = rowStart, $[52] = rows, $[53] = t1, $[54] = t2, $[55] = t3, $[56] = t4, $[57] = t5, $[58] = t6, $[59] = t7, $[60] = textAlign, $[61] = width, $[62] = wrap) : (align = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], borderBottom = $[5], borderLeft = $[6], borderRight = $[7], borderTop = $[8], children = $[9], className = $[10], column = $[11], columnEnd = $[12], columnStart = $[13], columns = $[14], direction = $[15], flex = $[16], gap = $[17], gapX = $[18], gapY = $[19], height = $[20], inset = $[21], insetBottom = $[22], insetLeft = $[23], insetRight = $[24], insetTop = $[25], justify = $[26], marginBottom = $[27], marginLeft = $[28], marginRight = $[29], marginTop = $[30], marginX = $[31], marginY = $[32], maxWidth = $[33], muted = $[34], outline = $[35], overflow = $[36], overflowX = $[37], overflowY = $[38], paddingBottom = $[39], paddingLeft = $[40], paddingRight = $[41], paddingTop = $[42], paddingX = $[43], paddingY = $[44], pointerEvents = $[45], position = $[46], radius = $[47], rest = $[48], row = $[49], rowEnd = $[50], rowStart = $[51], rows = $[52], t1 = $[53], t2 = $[54], t3 = $[55], t4 = $[56], t5 = $[57], t6 = $[58], t7 = $[59], textAlign = $[60], width = $[61], wrap = $[62]);
   const Element2 = t1 === void 0 ? DEFAULT_BOX_ELEMENT : t1, border = t2 === void 0 ? !1 : t2, display = t3 === void 0 ? "block" : t3, margin = t4 === void 0 ? 0 : t4, minWidth = t5 === void 0 ? 0 : t5, padding = t6 === void 0 ? 0 : t6, sizing = t7 === void 0 ? "border" : t7;
   let t8;
-  $[63] !== align || $[64] !== autoCols || $[65] !== autoFlow || $[66] !== autoRows || $[67] !== border || $[68] !== borderBottom || $[69] !== borderLeft || $[70] !== borderRight || $[71] !== borderTop || $[72] !== className || $[73] !== column || $[74] !== columnEnd || $[75] !== columnStart || $[76] !== columns || $[77] !== direction || $[78] !== display || $[79] !== flex || $[80] !== gap || $[81] !== gapX || $[82] !== gapY || $[83] !== height || $[84] !== inset || $[85] !== insetBottom || $[86] !== insetLeft || $[87] !== insetRight || $[88] !== insetTop || $[89] !== justify || $[90] !== margin || $[91] !== marginBottom || $[92] !== marginLeft || $[93] !== marginRight || $[94] !== marginTop || $[95] !== marginX || $[96] !== marginY || $[97] !== maxWidth || $[98] !== minWidth || $[99] !== muted || $[100] !== outline || $[101] !== overflow || $[102] !== overflowX || $[103] !== overflowY || $[104] !== padding || $[105] !== paddingBottom || $[106] !== paddingLeft || $[107] !== paddingRight || $[108] !== paddingTop || $[109] !== paddingX || $[110] !== paddingY || $[111] !== pointerEvents || $[112] !== position || $[113] !== radius || $[114] !== row || $[115] !== rowEnd || $[116] !== rowStart || $[117] !== rows || $[118] !== sizing || $[119] !== textAlign || $[120] !== width || $[121] !== wrap ? (t8 = css.composeClassNames(className, css.box({
+  $[63] !== align || $[64] !== autoCols || $[65] !== autoFlow || $[66] !== autoRows || $[67] !== border || $[68] !== borderBottom || $[69] !== borderLeft || $[70] !== borderRight || $[71] !== borderTop || $[72] !== className || $[73] !== column || $[74] !== columnEnd || $[75] !== columnStart || $[76] !== columns || $[77] !== direction || $[78] !== display || $[79] !== flex || $[80] !== gap || $[81] !== gapX || $[82] !== gapY || $[83] !== height || $[84] !== inset || $[85] !== insetBottom || $[86] !== insetLeft || $[87] !== insetRight || $[88] !== insetTop || $[89] !== justify || $[90] !== margin || $[91] !== marginBottom || $[92] !== marginLeft || $[93] !== marginRight || $[94] !== marginTop || $[95] !== marginX || $[96] !== marginY || $[97] !== maxWidth || $[98] !== minWidth || $[99] !== muted || $[100] !== outline || $[101] !== overflow || $[102] !== overflowX || $[103] !== overflowY || $[104] !== padding || $[105] !== paddingBottom || $[106] !== paddingLeft || $[107] !== paddingRight || $[108] !== paddingTop || $[109] !== paddingX || $[110] !== paddingY || $[111] !== pointerEvents || $[112] !== position || $[113] !== radius || $[114] !== row || $[115] !== rowEnd || $[116] !== rowStart || $[117] !== rows || $[118] !== sizing || $[119] !== textAlign || $[120] !== width || $[121] !== wrap ? (t8 = css._composeClassNames(className, css.box({
     align,
     autoCols,
     autoFlow,
@@ -502,7 +502,7 @@ function Label(props) {
   } = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = children, $[4] = className, $[5] = rest, $[6] = t0, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = textOverflowProp) : (accent = $[1], align = $[2], children = $[3], className = $[4], rest = $[5], t0 = $[6], t1 = $[7], t2 = $[8], t3 = $[9], textOverflowProp = $[10]);
   const Element2 = t0 === void 0 ? DEFAULT_LABEL_ELEMENT : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 1 : t2, weight = t3 === void 0 ? "medium" : t3;
   let t4;
-  $[11] !== accent || $[12] !== align || $[13] !== className || $[14] !== muted || $[15] !== size2 || $[16] !== weight ? (t4 = css.composeClassNames(className, css.label({
+  $[11] !== accent || $[12] !== align || $[13] !== className || $[14] !== muted || $[15] !== size2 || $[16] !== weight ? (t4 = css._composeClassNames(className, css.label({
     accent,
     align,
     muted,
@@ -538,7 +538,7 @@ function Avatar(props) {
     size: t4,
     ...rest
   } = t0, $[0] = t0, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = className, $[5] = initials, $[6] = onImageLoadError, $[7] = rest, $[8] = src, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], className = $[4], initials = $[5], onImageLoadError = $[6], rest = $[7], src = $[8], t1 = $[9], t2 = $[10], t3 = $[11], t4 = $[12], title = $[13]);
-  const Element2 = t1 === void 0 ? DEFAULT_AVATAR_ELEMENT : t1, color = t2 === void 0 ? "gray" : t2, sizeProp = t4 === void 0 ? 1 : t4, size2 = useArrayProp(sizeProp), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = react.useState(!1);
+  const Element2 = t1 === void 0 ? DEFAULT_AVATAR_ELEMENT : t1, color = t2 === void 0 ? "magenta" : t2, sizeProp = t4 === void 0 ? 1 : t4, size2 = useArrayProp(sizeProp), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = react.useState(!1);
   let t5, t6;
   $[14] !== arrowPosition || $[15] !== arrowPositionProp ? (t5 = () => {
     if (arrowPosition === arrowPositionProp)
@@ -559,7 +559,7 @@ function Avatar(props) {
   $[23] !== size2 ? (t11 = size2.map(_temp$4), $[23] = size2, $[24] = t11) : t11 = $[24], t10 = t11;
   const initialsSize = t10, t12 = __unstable_hideInnerStroke ? "" : void 0;
   let t13;
-  $[25] !== className || $[26] !== color || $[27] !== sizeProp ? (t13 = css.composeClassNames(className, css.avatar({
+  $[25] !== className || $[26] !== color || $[27] !== sizeProp ? (t13 = css._composeClassNames(className, css.avatar({
     color,
     size: sizeProp
   })), $[25] = className, $[26] = color, $[27] = sizeProp, $[28] = t13) : t13 = $[28];
@@ -604,7 +604,7 @@ function AvatarCounter(props) {
   $[6] !== size2 ? (t4 = size2.map(_temp$3), $[6] = size2, $[7] = t4) : t4 = $[7], t3 = t4;
   const labelSize = t3;
   let t5;
-  $[8] !== className || $[9] !== size2 ? (t5 = css.composeClassNames(className, css.avatarCounter({
+  $[8] !== className || $[9] !== size2 ? (t5 = css._composeClassNames(className, css.avatarCounter({
     size: size2
   })), $[8] = className, $[9] = size2, $[10] = t5) : t5 = $[10];
   let t6;
@@ -630,7 +630,7 @@ function AvatarStack(props) {
   } = t0, $[0] = t0, $[1] = childrenProp, $[2] = className, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = t3) : (childrenProp = $[1], className = $[2], rest = $[3], t1 = $[4], t2 = $[5], t3 = $[6]);
   const as = t1 === void 0 ? DEFAULT_AVATAR_STACK_ELEMENT : t1, maxLengthProp = t2 === void 0 ? 4 : t2, sizeProp = t3 === void 0 ? 1 : t3, children = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children, T0 = Box, t4 = "AvatarStack", t5 = "center";
   let t6;
-  $[7] !== className || $[8] !== size2 ? (t6 = css.composeClassNames(className, css.avatarStack({
+  $[7] !== className || $[8] !== size2 ? (t6 = css._composeClassNames(className, css.avatarStack({
     size: size2
   })), $[7] = className, $[8] = size2, $[9] = t6) : t6 = $[9];
   const t7 = "flex", t8 = len === 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "none", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }), t9 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "none", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) });
@@ -650,7 +650,7 @@ AvatarStack.displayName = "AvatarStack";
 const DEFAULT_TEXT_ELEMENT = "div";
 function Text(props) {
   const $ = reactCompilerRuntime.c(30), t0 = props;
-  let accent, align, children, className, flex, muted, rest, t1, t2, textOverflowProp, weight;
+  let accent, align, children, className, flex, muted, rest, t1, t2, t3, textOverflowProp;
   $[0] !== t0 ? ({
     accent,
     align,
@@ -661,27 +661,27 @@ function Text(props) {
     muted,
     size: t2,
     textOverflow: textOverflowProp,
-    weight,
+    weight: t3,
     ...rest
-  } = t0, $[0] = t0, $[1] = accent, $[2] = align, $[3] = children, $[4] = className, $[5] = flex, $[6] = muted, $[7] = rest, $[8] = t1, $[9] = t2, $[10] = textOverflowProp, $[11] = weight) : (accent = $[1], align = $[2], children = $[3], className = $[4], flex = $[5], muted = $[6], rest = $[7], t1 = $[8], t2 = $[9], textOverflowProp = $[10], weight = $[11]);
-  const Element2 = t1 === void 0 ? DEFAULT_TEXT_ELEMENT : t1, size2 = t2 === void 0 ? 2 : t2;
-  let t3;
-  $[12] !== accent || $[13] !== align || $[14] !== className || $[15] !== flex || $[16] !== muted || $[17] !== size2 || $[18] !== weight ? (t3 = css.composeClassNames(className, css.text({
+  } = t0, $[0] = t0, $[1] = accent, $[2] = align, $[3] = children, $[4] = className, $[5] = flex, $[6] = muted, $[7] = rest, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = textOverflowProp) : (accent = $[1], align = $[2], children = $[3], className = $[4], flex = $[5], muted = $[6], rest = $[7], t1 = $[8], t2 = $[9], t3 = $[10], textOverflowProp = $[11]);
+  const Element2 = t1 === void 0 ? DEFAULT_TEXT_ELEMENT : t1, size2 = t2 === void 0 ? 2 : t2, weight = t3 === void 0 ? "regular" : t3;
+  let t4;
+  $[12] !== accent || $[13] !== align || $[14] !== className || $[15] !== flex || $[16] !== muted || $[17] !== size2 || $[18] !== weight ? (t4 = css._composeClassNames(className, css.text({
     accent,
     align,
     flex,
     muted,
     size: size2,
     weight
-  })), $[12] = accent, $[13] = align, $[14] = className, $[15] = flex, $[16] = muted, $[17] = size2, $[18] = weight, $[19] = t3) : t3 = $[19];
-  let t4;
-  $[20] !== textOverflowProp ? (t4 = css.textOverflow({
-    textOverflow: textOverflowProp
-  }), $[20] = textOverflowProp, $[21] = t4) : t4 = $[21];
+  })), $[12] = accent, $[13] = align, $[14] = className, $[15] = flex, $[16] = muted, $[17] = size2, $[18] = weight, $[19] = t4) : t4 = $[19];
   let t5;
-  $[22] !== children || $[23] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t4, children }), $[22] = children, $[23] = t4, $[24] = t5) : t5 = $[24];
+  $[20] !== textOverflowProp ? (t5 = css.textOverflow({
+    textOverflow: textOverflowProp
+  }), $[20] = textOverflowProp, $[21] = t5) : t5 = $[21];
   let t6;
-  return $[25] !== Element2 || $[26] !== rest || $[27] !== t3 || $[28] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "Text", ...rest, className: t3, children: t5 }), $[25] = Element2, $[26] = rest, $[27] = t3, $[28] = t5, $[29] = t6) : t6 = $[29], t6;
+  $[22] !== children || $[23] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t5, children }), $[22] = children, $[23] = t5, $[24] = t6) : t6 = $[24];
+  let t7;
+  return $[25] !== Element2 || $[26] !== rest || $[27] !== t4 || $[28] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "Text", ...rest, className: t4, children: t6 }), $[25] = Element2, $[26] = rest, $[27] = t4, $[28] = t6, $[29] = t7) : t7 = $[29], t7;
 }
 Text.displayName = "Text";
 const DEFAULT_BADGE_ELEMENT = "span";
@@ -700,7 +700,7 @@ function Badge(props) {
   } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5) : (children = $[1], className = $[2], rest = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8]);
   const as = t1 === void 0 ? DEFAULT_BADGE_ELEMENT : t1, fontSize = t2 === void 0 ? 1 : t2, padding = t3 === void 0 ? 1 : t3, radius = t4 === void 0 ? 2 : t4, tone = t5 === void 0 ? "default" : t5;
   let t6;
-  $[9] !== className || $[10] !== radius || $[11] !== tone ? (t6 = css.composeClassNames(className, css.badge({
+  $[9] !== className || $[10] !== radius || $[11] !== tone ? (t6 = css._composeClassNames(className, css.badge({
     radius,
     tone
   })), $[9] = className, $[10] = radius, $[11] = tone, $[12] = t6) : t6 = $[12];
@@ -718,7 +718,7 @@ function AnimatedSpinnerIcon(props) {
     ...rest
   } = props, $[0] = props, $[1] = className, $[2] = rest) : (className = $[1], rest = $[2]);
   let t0;
-  $[3] !== className ? (t0 = css.composeClassNames(className, css.animatedSpinnerIcon()), $[3] = className, $[4] = t0) : t0 = $[4];
+  $[3] !== className ? (t0 = css._composeClassNames(className, css.animatedSpinnerIcon()), $[3] = className, $[4] = t0) : t0 = $[4];
   let t1;
   return $[5] !== rest || $[6] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, { ...rest, "data-sanity-icon": "animated-spinner", className: t0 }), $[5] = rest, $[6] = t0, $[7] = t1) : t1 = $[7], t1;
 }
@@ -784,7 +784,7 @@ function Button(props) {
     {
       "data-ui": "Button",
       ...rest,
-      className: css.composeClassNames(className, css.button({
+      className: css._composeClassNames(className, css.button({
         display,
         flex,
         radius,
@@ -840,7 +840,7 @@ function Card(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = pressed, $[4] = rest, $[5] = schemeProp, $[6] = selected, $[7] = shadow, $[8] = style, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5) : (className = $[1], disabled = $[2], pressed = $[3], rest = $[4], schemeProp = $[5], selected = $[6], shadow = $[7], style = $[8], t1 = $[9], t2 = $[10], t3 = $[11], t4 = $[12], t5 = $[13]);
   const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useCard(), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
   let t7;
-  $[14] !== className || $[15] !== shadow || $[16] !== t6 || $[17] !== tone ? (t7 = css.composeClassNames(className, css.card({
+  $[14] !== className || $[15] !== shadow || $[16] !== t6 || $[17] !== tone ? (t7 = css._composeClassNames(className, css.card({
     scheme: t6,
     shadow,
     tone
@@ -863,7 +863,7 @@ function Card(props) {
 Card.displayName = "Card";
 const DEFAULT_CHECKBOX_ELEMENT = "input";
 function Checkbox(props) {
-  const $ = reactCompilerRuntime.c(34), t0 = props;
+  const $ = reactCompilerRuntime.c(32), t0 = props;
   let checked, className, customValidity, disabled, forwardedRef, indeterminate, readOnly, rest, style, t1;
   $[0] !== t0 ? ({
     as: t1,
@@ -885,22 +885,22 @@ function Checkbox(props) {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
   }, t4 = [indeterminate], $[12] = indeterminate, $[13] = t3, $[14] = t4) : (t3 = $[13], t4 = $[14]), react.useEffect(t3, t4), useCustomValidity(ref, customValidity);
   let t5;
-  $[15] !== className ? (t5 = css.composeClassNames(className, css.checkbox()), $[15] = className, $[16] = t5) : t5 = $[16];
+  $[15] !== className ? (t5 = css._composeClassNames(className, css.checkbox()), $[15] = className, $[16] = t5) : t5 = $[16];
   let t6;
-  $[17] !== className ? (t6 = css.composeClassNames(className, css.checkboxInput()), $[17] = className, $[18] = t6) : t6 = $[18];
-  const t7 = disabled ? "" : void 0, t8 = !disabled && readOnly ? "" : void 0, t9 = customValidity ? "" : void 0, t10 = disabled || readOnly;
-  let t11;
-  $[19] !== Element2 || $[20] !== checked || $[21] !== readOnly || $[22] !== rest || $[23] !== t10 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, checked, className: t6, "data-disabled": t7, "data-read-only": t8, "data-error": t9, disabled: t10, type: "checkbox", readOnly, ref }), $[19] = Element2, $[20] = checked, $[21] = readOnly, $[22] = rest, $[23] = t10, $[24] = t6, $[25] = t7, $[26] = t8, $[27] = t9, $[28] = t11) : t11 = $[28];
-  let t12;
-  $[29] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+  $[17] !== className ? (t6 = css._composeClassNames(className, css.checkboxInput()), $[17] = className, $[18] = t6) : t6 = $[18];
+  const t7 = customValidity ? "" : void 0, t8 = disabled || readOnly;
+  let t9;
+  $[19] !== Element2 || $[20] !== checked || $[21] !== readOnly || $[22] !== rest || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, checked, className: t6, "data-invalid": t7, disabled: t8, type: "checkbox", readOnly, ref }), $[19] = Element2, $[20] = checked, $[21] = readOnly, $[22] = rest, $[23] = t6, $[24] = t7, $[25] = t8, $[26] = t9) : t9 = $[26];
+  let t10;
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t10 = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(icons.CheckmarkIcon, {}),
     /* @__PURE__ */ jsxRuntime.jsx(icons.RemoveIcon, {})
-  ] }), $[29] = t12) : t12 = $[29];
-  let t13;
-  return $[30] !== style || $[31] !== t11 || $[32] !== t5 ? (t13 = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: t5, "data-ui": "Checkbox", style, children: [
-    t11,
-    t12
-  ] }), $[30] = style, $[31] = t11, $[32] = t5, $[33] = t13) : t13 = $[33], t13;
+  ] }), $[27] = t10) : t10 = $[27];
+  let t11;
+  return $[28] !== style || $[29] !== t5 || $[30] !== t9 ? (t11 = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: t5, "data-ui": "Checkbox", style, children: [
+    t9,
+    t10
+  ] }), $[28] = style, $[29] = t5, $[30] = t9, $[31] = t11) : t11 = $[31], t11;
 }
 Checkbox.displayName = "Checkbox";
 const LazyRefractor = react.lazy(() => Promise.resolve().then(function() {
@@ -920,7 +920,7 @@ function Code(props) {
   } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = languageProp, $[4] = rest, $[5] = t1, $[6] = t2, $[7] = weight) : (children = $[1], className = $[2], languageProp = $[3], rest = $[4], t1 = $[5], t2 = $[6], weight = $[7]);
   const Element2 = t1 === void 0 ? DEFAULT_CODE_ELEMENT : t1, size2 = t2 === void 0 ? 2 : t2, language = typeof languageProp == "string" ? languageProp : void 0;
   let t3;
-  $[8] !== className || $[9] !== size2 || $[10] !== weight ? (t3 = css.composeClassNames(className, css.code({
+  $[8] !== className || $[9] !== size2 || $[10] !== weight ? (t3 = css._composeClassNames(className, css.code({
     size: size2,
     weight
   })), $[8] = className, $[9] = size2, $[10] = weight, $[11] = t3) : t3 = $[11];
@@ -946,7 +946,7 @@ function Container(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = rest, $[3] = t1, $[4] = t2) : (className = $[1], rest = $[2], t1 = $[3], t2 = $[4]);
   const as = t1 === void 0 ? DEFAULT_CONTAINER_ELEMENT : t1, width = t2 === void 0 ? 2 : t2;
   let t3;
-  $[5] !== className || $[6] !== width ? (t3 = css.composeClassNames(className, css.container({
+  $[5] !== className || $[6] !== width ? (t3 = css._composeClassNames(className, css.container({
     width
   })), $[5] = className, $[6] = width, $[7] = t3) : t3 = $[7];
   let t4;
@@ -1000,7 +1000,7 @@ function Heading(props) {
   } = t0, $[0] = t0, $[1] = align, $[2] = children, $[3] = className, $[4] = flex, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4, $[10] = textOverflowProp, $[11] = weight) : (align = $[1], children = $[2], className = $[3], flex = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9], textOverflowProp = $[10], weight = $[11]);
   const accent = t1 === void 0 ? !1 : t1, Element2 = t2 === void 0 ? DEFAULT_HEADING_ELEMENT : t2, muted = t3 === void 0 ? !1 : t3, size2 = t4 === void 0 ? 2 : t4;
   let t5;
-  $[12] !== accent || $[13] !== align || $[14] !== className || $[15] !== flex || $[16] !== muted || $[17] !== size2 || $[18] !== weight ? (t5 = css.composeClassNames(className, css.heading({
+  $[12] !== accent || $[13] !== align || $[14] !== className || $[15] !== flex || $[16] !== muted || $[17] !== size2 || $[18] !== weight ? (t5 = css._composeClassNames(className, css.heading({
     accent,
     align,
     flex,
@@ -1050,7 +1050,7 @@ function KBD(props) {
   } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5) : (children = $[1], className = $[2], rest = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8]);
   const as = t1 === void 0 ? DEFAULT_KBD_ELEMENT : t1, display = t2 === void 0 ? "inline-block" : t2, fontSize = t3 === void 0 ? 0 : t3, padding = t4 === void 0 ? 1 : t4, radius = t5 === void 0 ? 2 : t5, t6 = as;
   let t7;
-  $[9] !== className || $[10] !== radius ? (t7 = css.composeClassNames(className, css.kbd({
+  $[9] !== className || $[10] !== radius ? (t7 = css._composeClassNames(className, css.kbd({
     radius
   })), $[9] = className, $[10] = radius, $[11] = t7) : t7 = $[11];
   let t8;
@@ -1167,29 +1167,29 @@ function Arrow(props) {
   let t6;
   $[8] !== style || $[9] !== t5 ? (t6 = {
     ...style,
-    "--arrow-size": t5
+    [css.varNames.arrow.size]: t5
   }, $[8] = style, $[9] = t5, $[10] = t6) : t6 = $[10];
-  const t7 = t6, t8 = `0 0 ${w} ${w}`;
+  const t7 = `0 0 ${w} ${w}`;
+  let t8;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t8 = css._arrowStrokeMask(), $[11] = t8) : t8 = $[11];
   let t9;
-  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t9 = css._arrowStrokeMask(), $[11] = t9) : t9 = $[11];
+  $[12] !== w ? (t9 = /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { className: t8, x: 0, width: w, height: w, fill: "white" }) }), $[12] = w, $[13] = t9) : t9 = $[13];
   let t10;
-  $[12] !== w ? (t10 = /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { className: t9, x: 0, width: w, height: w, fill: "white" }) }), $[12] = w, $[13] = t10) : t10 = $[13];
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = css._arrowStroke(), $[14] = t10) : t10 = $[14];
   let t11;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t11 = css._arrowStroke(), $[14] = t11) : t11 = $[14];
+  $[15] !== strokePath ? (t11 = /* @__PURE__ */ jsxRuntime.jsx("path", { className: t10, d: strokePath, mask: "url(#stroke-mask)" }), $[15] = strokePath, $[16] = t11) : t11 = $[16];
   let t12;
-  $[15] !== strokePath ? (t12 = /* @__PURE__ */ jsxRuntime.jsx("path", { className: t11, d: strokePath, mask: "url(#stroke-mask)" }), $[15] = strokePath, $[16] = t12) : t12 = $[16];
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = css._arrowShape(), $[17] = t12) : t12 = $[17];
   let t13;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t13 = css._arrowShape(), $[17] = t13) : t13 = $[17];
+  $[18] !== fillPath ? (t13 = /* @__PURE__ */ jsxRuntime.jsx("path", { className: t12, d: fillPath }), $[18] = fillPath, $[19] = t13) : t13 = $[19];
   let t14;
-  $[18] !== fillPath ? (t14 = /* @__PURE__ */ jsxRuntime.jsx("path", { className: t13, d: fillPath }), $[18] = fillPath, $[19] = t14) : t14 = $[19];
+  $[20] !== t11 || $[21] !== t13 || $[22] !== t7 || $[23] !== t9 || $[24] !== w ? (t14 = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: w, height: w, viewBox: t7, children: [
+    t9,
+    t11,
+    t13
+  ] }), $[20] = t11, $[21] = t13, $[22] = t7, $[23] = t9, $[24] = w, $[25] = t14) : t14 = $[25];
   let t15;
-  $[20] !== t10 || $[21] !== t12 || $[22] !== t14 || $[23] !== t8 || $[24] !== w ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: w, height: w, viewBox: t8, children: [
-    t10,
-    t12,
-    t14
-  ] }), $[20] = t10, $[21] = t12, $[22] = t14, $[23] = t8, $[24] = w, $[25] = t15) : t15 = $[25];
-  let t16;
-  return $[26] !== Element2 || $[27] !== rest || $[28] !== t15 || $[29] !== t7 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t4, style: t7, children: t15 }), $[26] = Element2, $[27] = rest, $[28] = t15, $[29] = t7, $[30] = t16) : t16 = $[30], t16;
+  return $[26] !== Element2 || $[27] !== rest || $[28] !== t14 || $[29] !== t6 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t4, style: t6, children: t14 }), $[26] = Element2, $[27] = rest, $[28] = t14, $[29] = t6, $[30] = t15) : t15 = $[30], t15;
 }
 Arrow.displayName = "Arrow";
 const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null);
@@ -1485,7 +1485,7 @@ function SrOnly(props) {
   } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = rest, $[4] = t1) : (children = $[1], className = $[2], rest = $[3], t1 = $[4]);
   const Element2 = t1 === void 0 ? DEFAULT_SR_ONLY_ELEMENT : t1;
   let t2;
-  $[5] !== className ? (t2 = css.composeClassNames(className, css.srOnly()), $[5] = className, $[6] = t2) : t2 = $[6];
+  $[5] !== className ? (t2 = css._composeClassNames(className, css.srOnly()), $[5] = className, $[6] = t2) : t2 = $[6];
   let t3;
   return $[7] !== Element2 || $[8] !== children || $[9] !== rest || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-ui": "SrOnly", ...rest, "aria-hidden": !0, className: t2, children }), $[7] = Element2, $[8] = children, $[9] = rest, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
 }
@@ -1759,7 +1759,7 @@ function ViewportOverlay() {
 function Popover(props) {
   const boundaryElementContext = useBoundaryElement(), {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = !0,
+    animate: _animate = !1,
     arrow: arrowProp = !1,
     as = DEFAULT_POPOVER_ELEMENT,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -1888,10 +1888,10 @@ function Radio(props) {
   let t2;
   $[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[9] = t2) : t2 = $[9], react.useImperativeHandle(forwardedRef, t2), useCustomValidity(ref, customValidity);
   let t3;
-  $[10] !== className ? (t3 = css.composeClassNames(className, css.radio()), $[10] = className, $[11] = t3) : t3 = $[11];
-  const t4 = !disabled && readOnly ? "" : void 0, t5 = customValidity ? "" : void 0, t6 = disabled || readOnly;
+  $[10] !== className ? (t3 = css._composeClassNames(className, css.radio()), $[10] = className, $[11] = t3) : t3 = $[11];
+  const t4 = customValidity ? "" : void 0, t5 = !disabled && readOnly ? "" : void 0, t6 = disabled || readOnly;
   let t7;
-  $[12] !== Element2 || $[13] !== readOnly || $[14] !== rest || $[15] !== t4 || $[16] !== t5 || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-read-only": t4, "data-error": t5, ...rest, disabled: t6, readOnly, ref, type: "radio" }), $[12] = Element2, $[13] = readOnly, $[14] = rest, $[15] = t4, $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18];
+  $[12] !== Element2 || $[13] !== readOnly || $[14] !== rest || $[15] !== t4 || $[16] !== t5 || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, "data-invalid": t4, "data-read-only": t5, disabled: t6, readOnly, ref, type: "radio" }), $[12] = Element2, $[13] = readOnly, $[14] = rest, $[15] = t4, $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18];
   let t8;
   $[19] === Symbol.for("react.memo_cache_sentinel") ? (t8 = /* @__PURE__ */ jsxRuntime.jsx("span", {}), $[19] = t8) : t8 = $[19];
   let t9;
@@ -1903,7 +1903,7 @@ function Radio(props) {
 Radio.displayName = "Radio";
 const DEFAULT_SELECT_ELEMENT = "select";
 function Select(props) {
-  const $ = reactCompilerRuntime.c(39), t0 = props;
+  const $ = reactCompilerRuntime.c(38), t0 = props;
   let children, customValidity, disabled, forwardedRef, gap, readOnly, rest, t1, t2, t3, t4, t5, t6;
   $[0] !== t0 ? ({
     as: t1,
@@ -1932,25 +1932,24 @@ function Select(props) {
     radius,
     gap: t8
   }), $[15] = border, $[16] = fontSize, $[17] = padding, $[18] = radius, $[19] = t8, $[20] = t9) : t9 = $[20];
-  const t10 = !disabled && readOnly ? "" : void 0;
-  let t11;
-  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t11 = css._inputElement(), $[21] = t11) : t11 = $[21];
-  const t12 = disabled || readOnly;
+  let t10;
+  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = css._inputElement(), $[21] = t10) : t10 = $[21];
+  const t11 = disabled || readOnly;
+  let t12;
+  $[22] !== Element2 || $[23] !== children || $[24] !== rest || $[25] !== t11 ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t10, disabled: t11, ref, children }), $[22] = Element2, $[23] = children, $[24] = rest, $[25] = t11, $[26] = t12) : t12 = $[26];
   let t13;
-  $[22] !== Element2 || $[23] !== children || $[24] !== rest || $[25] !== t10 || $[26] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { "data-read-only": t10, ...rest, className: t11, disabled: t12, ref, children }), $[22] = Element2, $[23] = children, $[24] = rest, $[25] = t10, $[26] = t12, $[27] = t13) : t13 = $[27];
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t13 = css.selectPresentation(), $[27] = t13) : t13 = $[27];
   let t14;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = css.selectPresentation(), $[28] = t14) : t14 = $[28];
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[28] = t14) : t14 = $[28];
   let t15;
-  $[29] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[29] = t15) : t15 = $[29];
+  $[29] !== fontSize ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize, children: t14 }), $[29] = fontSize, $[30] = t15) : t15 = $[30];
   let t16;
-  $[30] !== fontSize ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize, children: t15 }), $[30] = fontSize, $[31] = t16) : t16 = $[31];
+  $[31] !== padding || $[32] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t13, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", display: "inline-block", padding, children: t15 }) }), $[31] = padding, $[32] = t15, $[33] = t16) : t16 = $[33];
   let t17;
-  $[32] !== padding || $[33] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: t14, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", display: "inline-block", padding, children: t16 }) }), $[32] = padding, $[33] = t16, $[34] = t17) : t17 = $[34];
-  let t18;
-  return $[35] !== t13 || $[36] !== t17 || $[37] !== t9 ? (t18 = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-ui": "Select", className: t9, "data-icon-right": "", children: [
-    t13,
-    t17
-  ] }), $[35] = t13, $[36] = t17, $[37] = t9, $[38] = t18) : t18 = $[38], t18;
+  return $[34] !== t12 || $[35] !== t16 || $[36] !== t9 ? (t17 = /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-ui": "Select", className: t9, "data-icon-right": "", children: [
+    t12,
+    t16
+  ] }), $[34] = t12, $[35] = t16, $[36] = t9, $[37] = t17) : t17 = $[37], t17;
 }
 Select.displayName = "Select";
 const DEFAULT_STACK_ELEMENT = "div";
@@ -1966,7 +1965,7 @@ function Stack(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = gap, $[3] = rest, $[4] = space, $[5] = t1) : (className = $[1], gap = $[2], rest = $[3], space = $[4], t1 = $[5]);
   const as = t1 === void 0 ? DEFAULT_STACK_ELEMENT : t1;
   let t2;
-  $[6] !== className ? (t2 = css.composeClassNames(className, css.stack()), $[6] = className, $[7] = t2) : t2 = $[7];
+  $[6] !== className ? (t2 = css._composeClassNames(className, css.stack()), $[6] = className, $[7] = t2) : t2 = $[7];
   const t3 = gap ?? space;
   let t4;
   return $[8] !== as || $[9] !== rest || $[10] !== t2 || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Box, { "data-ui": "Stack", ...rest, as, autoRows: "min", className: t2, display: "grid", gap: t3 }), $[8] = as, $[9] = rest, $[10] = t2, $[11] = t3, $[12] = t4) : t4 = $[12], t4;
@@ -1995,7 +1994,7 @@ function Switch(props) {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
   }, t4 = [indeterminate], $[11] = indeterminate, $[12] = t3, $[13] = t4) : (t3 = $[12], t4 = $[13]), react.useEffect(t3, t4);
   let t5;
-  $[14] !== className ? (t5 = css.composeClassNames(className, css._switch()), $[14] = className, $[15] = t5) : t5 = $[15];
+  $[14] !== className ? (t5 = css._composeClassNames(className, css._switch()), $[14] = className, $[15] = t5) : t5 = $[15];
   const t6 = checked ? "" : void 0, t7 = indeterminate ? "" : void 0, t8 = indeterminate !== !0 && checked;
   let t9;
   $[16] === Symbol.for("react.memo_cache_sentinel") ? (t9 = css._switchElement(), $[16] = t9) : t9 = $[16];
@@ -2016,10 +2015,11 @@ function Switch(props) {
 Switch.displayName = "Switch";
 const DEFAULT_TEXT_AREA_ELEMENT = "textarea";
 function TextArea(props) {
-  const $ = reactCompilerRuntime.c(28), t0 = props;
-  let customValidity, forwardedRef, gap, rest, t1, t2, t3, t4, t5, t6, t7;
+  const $ = reactCompilerRuntime.c(32), t0 = props;
+  let customValidity, forwardedRef, gap, readOnly, rest, t1, t2, t3, t4, t5, t6, t7;
   if ($[0] !== t0) {
     const {
+      __unstable_disableFocusRing,
       as: t82,
       border: t92,
       customValidity: t102,
@@ -2027,39 +2027,40 @@ function TextArea(props) {
       fontSize: t122,
       gap: t132,
       padding: t142,
-      radius: t15,
-      ref: t16,
-      space: t17,
+      radius: t152,
+      readOnly: t162,
+      ref: t17,
+      space: t18,
       weight,
-      __unstable_disableFocusRing,
-      ...t18
+      ...t19
     } = t0;
-    t1 = t82, t2 = t92, customValidity = t102, t3 = t112, t4 = t122, gap = t132, t5 = t142, t6 = t15, forwardedRef = t16, t7 = t17, rest = t18, $[0] = t0, $[1] = customValidity, $[2] = forwardedRef, $[3] = gap, $[4] = rest, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+    t1 = t82, t2 = t92, customValidity = t102, t3 = t112, t4 = t122, gap = t132, t5 = t142, t6 = t152, readOnly = t162, forwardedRef = t17, t7 = t18, rest = t19, $[0] = t0, $[1] = customValidity, $[2] = forwardedRef, $[3] = gap, $[4] = readOnly, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4, $[10] = t5, $[11] = t6, $[12] = t7;
   } else
-    customValidity = $[1], forwardedRef = $[2], gap = $[3], rest = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
+    customValidity = $[1], forwardedRef = $[2], gap = $[3], readOnly = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9], t5 = $[10], t6 = $[11], t7 = $[12];
   const Element2 = t1 === void 0 ? DEFAULT_TEXT_AREA_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, padding = t5 === void 0 ? 3 : t5, radius = t6 === void 0 ? 2 : t6, space = t7 === void 0 ? 3 : t7, ref = react.useRef(null);
   let t8;
-  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[12] = t8) : t8 = $[12], react.useImperativeHandle(forwardedRef, t8), useCustomValidity(ref, customValidity);
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[13] = t8) : t8 = $[13], react.useImperativeHandle(forwardedRef, t8), useCustomValidity(ref, customValidity);
   const t9 = gap ?? space;
   let t10;
-  $[13] !== border || $[14] !== fontSize || $[15] !== padding || $[16] !== radius || $[17] !== t9 ? (t10 = css.textArea({
+  $[14] !== border || $[15] !== fontSize || $[16] !== padding || $[17] !== radius || $[18] !== t9 ? (t10 = css.textArea({
     border,
     fontSize,
     padding,
     radius,
     gap: t9
-  }), $[13] = border, $[14] = fontSize, $[15] = padding, $[16] = radius, $[17] = t9, $[18] = t10) : t10 = $[18];
-  let t11;
-  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t11 = css._inputElement(), $[19] = t11) : t11 = $[19];
-  let t12;
-  $[20] !== Element2 || $[21] !== disabled || $[22] !== rest ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t11, disabled, ref }), $[20] = Element2, $[21] = disabled, $[22] = rest, $[23] = t12) : t12 = $[23];
+  }), $[14] = border, $[15] = fontSize, $[16] = padding, $[17] = radius, $[18] = t9, $[19] = t10) : t10 = $[19];
+  const t11 = customValidity ? "" : void 0, t12 = !disabled && readOnly ? "" : void 0;
   let t13;
-  $[24] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: css._inputPresentation() }), $[24] = t13) : t13 = $[24];
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t13 = css._inputElement(), $[20] = t13) : t13 = $[20];
   let t14;
-  return $[25] !== t10 || $[26] !== t12 ? (t14 = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: t10, "data-ui": "TextArea", children: [
-    t12,
-    t13
-  ] }), $[25] = t10, $[26] = t12, $[27] = t14) : t14 = $[27], t14;
+  $[21] !== Element2 || $[22] !== disabled || $[23] !== readOnly || $[24] !== rest ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t13, disabled, readOnly, ref }), $[21] = Element2, $[22] = disabled, $[23] = readOnly, $[24] = rest, $[25] = t14) : t14 = $[25];
+  let t15;
+  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: css._inputPresentation() }), $[26] = t15) : t15 = $[26];
+  let t16;
+  return $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t14 ? (t16 = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: t10, "data-invalid": t11, "data-read-only": t12, "data-ui": "TextArea", children: [
+    t14,
+    t15
+  ] }), $[27] = t10, $[28] = t11, $[29] = t12, $[30] = t14, $[31] = t16) : t16 = $[31], t16;
 }
 TextArea.displayName = "TextArea";
 const DEFAULT_TEXT_INPUT_ELEMENT = "input", CLEAR_BUTTON_BOX_STYLE = {
@@ -2069,7 +2070,7 @@ const DEFAULT_TEXT_INPUT_ELEMENT = "input", CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
 function TextInput(props) {
-  const $ = reactCompilerRuntime.c(86), t0 = props;
+  const $ = reactCompilerRuntime.c(88), t0 = props;
   let IconComponent, IconRightComponent, __unstable_disableFocusRing, className, clearButton, customValidity, forwardedRef, gap, onClear, prefix, readOnly, rest, suffix, t1, t2, t3, t4, t5, t6, t7, t8, width;
   if ($[0] !== t0) {
     const {
@@ -2119,7 +2120,7 @@ function TextInput(props) {
   t15 = isRecord(clearButton) ? clearButton : EMPTY_RECORD;
   const clearButtonProps = t15, t16 = gap ?? space;
   let t17;
-  $[30] !== border || $[31] !== className || $[32] !== fontSize || $[33] !== padding || $[34] !== radius || $[35] !== t16 || $[36] !== width ? (t17 = css.composeClassNames(className, css.textInput({
+  $[30] !== border || $[31] !== className || $[32] !== fontSize || $[33] !== padding || $[34] !== radius || $[35] !== t16 || $[36] !== width ? (t17 = css._composeClassNames(className, css.textInput({
     border,
     fontSize,
     padding,
@@ -2127,53 +2128,53 @@ function TextInput(props) {
     gap: t16,
     width
   })), $[30] = border, $[31] = className, $[32] = fontSize, $[33] = padding, $[34] = radius, $[35] = t16, $[36] = width, $[37] = t17) : t17 = $[37];
-  const t18 = IconComponent ? "" : void 0, t19 = IconRightComponent ? "" : void 0, t20 = prefix ? "" : void 0, t21 = suffix ? "" : void 0;
-  let t22;
-  $[38] !== prefix ? (t22 = prefix && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "text-input-prefix", sizing: "border", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: prefix }) }), $[38] = prefix, $[39] = t22) : t22 = $[39];
-  let t23;
-  $[40] === Symbol.for("react.memo_cache_sentinel") ? (t23 = css._inputElement(), $[40] = t23) : t23 = $[40];
+  const t18 = IconComponent ? "" : void 0, t19 = IconRightComponent ? "" : void 0, t20 = customValidity ? "" : void 0, t21 = prefix ? "" : void 0, t22 = !disabled && readOnly ? "" : void 0, t23 = suffix ? "" : void 0;
   let t24;
-  $[41] !== Element2 || $[42] !== disabled || $[43] !== readOnly || $[44] !== rest || $[45] !== type ? (t24 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t23, disabled, readOnly, ref, type }), $[41] = Element2, $[42] = disabled, $[43] = readOnly, $[44] = rest, $[45] = type, $[46] = t24) : t24 = $[46];
+  $[38] !== prefix ? (t24 = prefix && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "text-input-prefix", sizing: "border", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: prefix }) }), $[38] = prefix, $[39] = t24) : t24 = $[39];
   let t25;
-  $[47] === Symbol.for("react.memo_cache_sentinel") ? (t25 = css._inputPresentation(), $[47] = t25) : t25 = $[47];
-  const t26 = __unstable_disableFocusRing ? "" : void 0;
+  $[40] === Symbol.for("react.memo_cache_sentinel") ? (t25 = css._inputElement(), $[40] = t25) : t25 = $[40];
+  let t26;
+  $[41] !== Element2 || $[42] !== disabled || $[43] !== readOnly || $[44] !== rest || $[45] !== type ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t25, disabled, readOnly, ref, type }), $[41] = Element2, $[42] = disabled, $[43] = readOnly, $[44] = rest, $[45] = type, $[46] = t26) : t26 = $[46];
   let t27;
-  $[48] !== IconComponent || $[49] !== fontSize || $[50] !== padding ? (t27 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, position: "absolute", style: {
+  $[47] === Symbol.for("react.memo_cache_sentinel") ? (t27 = css._inputPresentation(), $[47] = t27) : t27 = $[47];
+  const t28 = __unstable_disableFocusRing ? "" : void 0;
+  let t29;
+  $[48] !== IconComponent || $[49] !== fontSize || $[50] !== padding ? (t29 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, position: "absolute", style: {
     top: 0,
     left: 0
   }, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize, children: [
     react.isValidElement(IconComponent) && IconComponent,
     reactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
-  ] }) }), $[48] = IconComponent, $[49] = fontSize, $[50] = padding, $[51] = t27) : t27 = $[51];
-  let t28;
-  $[52] !== IconRightComponent || $[53] !== fontSize || $[54] !== padding || $[55] !== withClearButton ? (t28 = !withClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, position: "absolute", style: {
+  ] }) }), $[48] = IconComponent, $[49] = fontSize, $[50] = padding, $[51] = t29) : t29 = $[51];
+  let t30;
+  $[52] !== IconRightComponent || $[53] !== fontSize || $[54] !== padding || $[55] !== withClearButton ? (t30 = !withClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, position: "absolute", style: {
     top: 0,
     right: 0
   }, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize, children: [
     react.isValidElement(IconRightComponent) && IconRightComponent,
     reactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
-  ] }) }), $[52] = IconRightComponent, $[53] = fontSize, $[54] = padding, $[55] = withClearButton, $[56] = t28) : t28 = $[56];
-  let t29;
-  $[57] !== t26 || $[58] !== t27 || $[59] !== t28 ? (t29 = /* @__PURE__ */ jsxRuntime.jsxs(Box, { as: "span", className: t25, "data-disable-focus-ring": t26, position: "absolute", children: [
-    t27,
-    t28
-  ] }), $[57] = t26, $[58] = t27, $[59] = t28, $[60] = t29) : t29 = $[60];
-  let t30;
-  $[61] !== clearButton || $[62] !== clearButtonBoxPadding || $[63] !== clearButtonPadding || $[64] !== clearButtonProps || $[65] !== disabled || $[66] !== fontSize || $[67] !== handleClearClick || $[68] !== radius || $[69] !== readOnly ? (t30 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding: clearButtonBoxPadding, position: "absolute", style: CLEAR_BUTTON_BOX_STYLE, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Clear", "data-qa": "clear-button", display: "block", fontSize, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[61] = clearButton, $[62] = clearButtonBoxPadding, $[63] = clearButtonPadding, $[64] = clearButtonProps, $[65] = disabled, $[66] = fontSize, $[67] = handleClearClick, $[68] = radius, $[69] = readOnly, $[70] = t30) : t30 = $[70];
+  ] }) }), $[52] = IconRightComponent, $[53] = fontSize, $[54] = padding, $[55] = withClearButton, $[56] = t30) : t30 = $[56];
   let t31;
-  $[71] !== t24 || $[72] !== t29 || $[73] !== t30 ? (t31 = /* @__PURE__ */ jsxRuntime.jsxs(Box, { as: "span", flex: 1, position: "relative", children: [
-    t24,
+  $[57] !== t28 || $[58] !== t29 || $[59] !== t30 ? (t31 = /* @__PURE__ */ jsxRuntime.jsxs(Box, { as: "span", className: t27, "data-disable-focus-ring": t28, position: "absolute", children: [
     t29,
     t30
-  ] }), $[71] = t24, $[72] = t29, $[73] = t30, $[74] = t31) : t31 = $[74];
+  ] }), $[57] = t28, $[58] = t29, $[59] = t30, $[60] = t31) : t31 = $[60];
   let t32;
-  $[75] !== suffix ? (t32 = suffix && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "text-input-suffix", sizing: "border", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), $[75] = suffix, $[76] = t32) : t32 = $[76];
+  $[61] !== clearButton || $[62] !== clearButtonBoxPadding || $[63] !== clearButtonPadding || $[64] !== clearButtonProps || $[65] !== disabled || $[66] !== fontSize || $[67] !== handleClearClick || $[68] !== radius || $[69] !== readOnly ? (t32 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding: clearButtonBoxPadding, position: "absolute", style: CLEAR_BUTTON_BOX_STYLE, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Clear", "data-qa": "clear-button", display: "block", fontSize, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[61] = clearButton, $[62] = clearButtonBoxPadding, $[63] = clearButtonPadding, $[64] = clearButtonProps, $[65] = disabled, $[66] = fontSize, $[67] = handleClearClick, $[68] = radius, $[69] = readOnly, $[70] = t32) : t32 = $[70];
   let t33;
-  return $[77] !== t17 || $[78] !== t18 || $[79] !== t19 || $[80] !== t20 || $[81] !== t21 || $[82] !== t22 || $[83] !== t31 || $[84] !== t32 ? (t33 = /* @__PURE__ */ jsxRuntime.jsxs(Box, { align: "center", as: "span", className: t17, "data-icon-left": t18, "data-icon-right": t19, "data-prefix": t20, "data-suffix": t21, "data-ui": "TextInput", display: "flex", children: [
-    t22,
+  $[71] !== t26 || $[72] !== t31 || $[73] !== t32 ? (t33 = /* @__PURE__ */ jsxRuntime.jsxs(Box, { as: "span", flex: 1, position: "relative", children: [
+    t26,
     t31,
     t32
-  ] }), $[77] = t17, $[78] = t18, $[79] = t19, $[80] = t20, $[81] = t21, $[82] = t22, $[83] = t31, $[84] = t32, $[85] = t33) : t33 = $[85], t33;
+  ] }), $[71] = t26, $[72] = t31, $[73] = t32, $[74] = t33) : t33 = $[74];
+  let t34;
+  $[75] !== suffix ? (t34 = suffix && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "text-input-suffix", sizing: "border", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), $[75] = suffix, $[76] = t34) : t34 = $[76];
+  let t35;
+  return $[77] !== t17 || $[78] !== t18 || $[79] !== t19 || $[80] !== t20 || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t24 || $[85] !== t33 || $[86] !== t34 ? (t35 = /* @__PURE__ */ jsxRuntime.jsxs(Box, { align: "center", as: "span", className: t17, "data-icon-left": t18, "data-icon-right": t19, "data-invalid": t20, "data-prefix": t21, "data-read-only": t22, "data-suffix": t23, "data-ui": "TextInput", display: "flex", children: [
+    t24,
+    t33,
+    t34
+  ] }), $[77] = t17, $[78] = t18, $[79] = t19, $[80] = t20, $[81] = t21, $[82] = t22, $[83] = t23, $[84] = t24, $[85] = t33, $[86] = t34, $[87] = t35) : t35 = $[87], t35;
 }
 function _temp3(v_0) {
   return v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : typeof v_0 == "number" ? v_0 - 1 : 0;
@@ -2304,7 +2305,7 @@ TooltipLayer.displayName = "TooltipLayer";
 const DEFAULT_TOOLTIP_ELEMENT = "div";
 function Tooltip(props) {
   const boundaryElementContext = useBoundaryElement(), {
-    animate: _animate = !0,
+    animate: _animate = !1,
     arrow: arrowProp = !1,
     as = DEFAULT_TOOLTIP_ELEMENT,
     boundaryElement = boundaryElementContext?.element,
@@ -2420,7 +2421,7 @@ function Tooltip(props) {
   }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
   if (react.useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (disabled) return child;
-  const node_0 = /* @__PURE__ */ jsxRuntime.jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: css.composeClassNames(className, css.tooltip()), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
+  const node_0 = /* @__PURE__ */ jsxRuntime.jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: css._composeClassNames(className, css.tooltip()), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
     ...floatingStyles,
     maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
   }, tone, zOffset, children: content }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(CardProvider, { tone: tone === "inherit" ? card?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
@@ -2470,7 +2471,7 @@ function Hotkeys(props) {
     space: t2,
     ...rest
   } = t0, $[0] = t0, $[1] = fontSize, $[2] = gap, $[3] = gapX, $[4] = gapY, $[5] = keys, $[6] = padding, $[7] = radius, $[8] = rest, $[9] = t1, $[10] = t2) : (fontSize = $[1], gap = $[2], gapX = $[3], gapY = $[4], keys = $[5], padding = $[6], radius = $[7], rest = $[8], t1 = $[9], t2 = $[10]);
-  const as = t1 === void 0 ? DEFAULT_HOTKEYS_ELEMENT : t1, space = t2 === void 0 ? 0.5 : t2;
+  const as = t1 === void 0 ? DEFAULT_HOTKEYS_ELEMENT : t1, space = t2 === void 0 ? 1 : t2;
   if (!keys || keys.length === 0)
     return;
   const t3 = gap ?? space;
@@ -2703,7 +2704,7 @@ function Menu(props) {
   }, $[32] = activeElement, $[33] = activeIndex, $[34] = handleItemMouseEnter, $[35] = handleItemMouseLeave, $[36] = mount, $[37] = onClickOutside, $[38] = onEscape, $[39] = onItemClick, $[40] = registerElement, $[41] = t12) : t12 = $[41], t11 = t12;
   const value = t11;
   let t13;
-  $[42] !== className ? (t13 = css.composeClassNames(className, css.menu()), $[42] = className, $[43] = t13) : t13 = $[43];
+  $[42] !== className ? (t13 = css._composeClassNames(className, css.menu()), $[42] = className, $[43] = t13) : t13 = $[43];
   const t14 = gap ?? space;
   let t15;
   $[44] !== children || $[45] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { gap: t14, children }), $[44] = children, $[45] = t14, $[46] = t15) : t15 = $[46];
@@ -2724,7 +2725,7 @@ function MenuDivider(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = rest, $[3] = t1) : (className = $[1], rest = $[2], t1 = $[3]);
   const Element2 = t1 === void 0 ? DEFAULT_MENU_DIVIDER_ELEMENT : t1;
   let t2;
-  $[4] !== className ? (t2 = css.composeClassNames(className, css.menuDivider()), $[4] = className, $[5] = t2) : t2 = $[5];
+  $[4] !== className ? (t2 = css._composeClassNames(className, css.menuDivider()), $[4] = className, $[5] = t2) : t2 = $[5];
   let t3;
   return $[6] !== Element2 || $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Element2, { ...rest, className: t2 }), $[6] = Element2, $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
@@ -2742,7 +2743,7 @@ function Selectable(props) {
   } = t0, $[0] = t0, $[1] = className, $[2] = radius, $[3] = rest, $[4] = t1, $[5] = tone) : (className = $[1], radius = $[2], rest = $[3], t1 = $[4], tone = $[5]);
   const as = t1 === void 0 ? DEFAULT_SELECTABLE_ELEMENT : t1;
   let t2;
-  $[6] !== className || $[7] !== radius || $[8] !== tone ? (t2 = css.composeClassNames(className, css._selectable({
+  $[6] !== className || $[7] !== radius || $[8] !== tone ? (t2 = css._composeClassNames(className, css._selectable({
     radius,
     tone
   })), $[6] = className, $[7] = radius, $[8] = tone, $[9] = t2) : t2 = $[9];
@@ -2935,7 +2936,7 @@ function MenuItem(props) {
       reactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
     ] }),
     text && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize, textOverflow: "ellipsis", weight: "medium", children: text }) }),
-    hotkeys && /* @__PURE__ */ jsxRuntime.jsx(Hotkeys, { gap: 0.5, keys: hotkeys, style: {
+    hotkeys && /* @__PURE__ */ jsxRuntime.jsx(Hotkeys, { keys: hotkeys, style: {
       marginTop: -4,
       marginBottom: -4
     } }),