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

package/dist/_chunks-es/_visual-editing.js

@@ -3,7 +3,7 @@ import { c } from "react-compiler-runtime";
 import { getScopedTheme, getTheme_v2 } from "@sanity/ui/theme";
 import { createContext, useContext, useState, useEffect, useDebugValue, useSyncExternalStore, Children, isValidElement, cloneElement, useRef, useImperativeHandle, lazy, Suspense, useMemo, useCallback, useId, useLayoutEffect } from "react";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from "styled-components";
-import { BREAKPOINTS, composeClassNames, box, label, textOverflow, avatar, avatarArrow, avatarInitials, avatarImage, avatarCounter, avatarStack, text, badge, animatedSpinnerIcon, spinner, buttonLoadingBox, button, card, checkbox, checkboxInput, code, container, heading, kbd, _arrow, _arrowStrokeMask, _arrowStroke, _arrowShape, srOnly, vars, popoverCard, radio, select, _inputElement, selectPresentation, stack, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, _inputPresentation, textInput, tooltipCard, tooltip, menu, menuDivider, _selectable } from "@sanity/ui/css";
+import { BREAKPOINTS, _composeClassNames, box, label, textOverflow, avatar, avatarArrow, avatarInitials, avatarImage, avatarCounter, avatarStack, text, badge, animatedSpinnerIcon, spinner, buttonLoadingBox, button, card, checkbox, checkboxInput, code, container, heading, kbd, _arrow, _arrowStrokeMask, _arrowStroke, _arrowShape, varNames, srOnly, vars, popoverCard, radio, select, _inputElement, selectPresentation, stack, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, _inputPresentation, textInput, tooltipCard, tooltip, menu, menuDivider, _selectable } from "@sanity/ui/css";
 import { isValidElementType } from "react-is";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon } from "@sanity/icons";
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
@@ -295,7 +295,7 @@ function useMatchMedia(mediaQueryString, getServerSnapshot2) {
 }
 const media = Object.values(BREAKPOINTS);
 function _getMediaQuery(media2, index) {
-  return index === 0 ? `screen and (max-width: ${media2[index + 1] - 1}px)` : index === media2.length ? `screen and (min-width: ${media2[index]}px)` : `screen and (min-width: ${media2[index]}px) and (max-width: ${media2[index + 1] - 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;
@@ -431,7 +431,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 = composeClassNames(className, 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 = _composeClassNames(className, box({
     align,
     autoCols,
     autoFlow,
@@ -513,7 +513,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 = composeClassNames(className, label({
+  $[11] !== accent || $[12] !== align || $[13] !== className || $[14] !== muted || $[15] !== size2 || $[16] !== weight ? (t4 = _composeClassNames(className, label({
     accent,
     align,
     muted,
@@ -549,7 +549,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] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = 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] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = useState(!1);
   let t5, t6;
   $[14] !== arrowPosition || $[15] !== arrowPositionProp ? (t5 = () => {
     if (arrowPosition === arrowPositionProp)
@@ -570,7 +570,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 = composeClassNames(className, avatar({
+  $[25] !== className || $[26] !== color || $[27] !== sizeProp ? (t13 = _composeClassNames(className, avatar({
     color,
     size: sizeProp
   })), $[25] = className, $[26] = color, $[27] = sizeProp, $[28] = t13) : t13 = $[28];
@@ -615,7 +615,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 = composeClassNames(className, avatarCounter({
+  $[8] !== className || $[9] !== size2 ? (t5 = _composeClassNames(className, avatarCounter({
     size: size2
   })), $[8] = className, $[9] = size2, $[10] = t5) : t5 = $[10];
   let t6;
@@ -641,7 +641,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 = Children.toArray(childrenProp).filter(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 = composeClassNames(className, avatarStack({
+  $[7] !== className || $[8] !== size2 ? (t6 = _composeClassNames(className, avatarStack({
     size: size2
   })), $[7] = className, $[8] = size2, $[9] = t6) : t6 = $[9];
   const t7 = "flex", t8 = len === 0 && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }), t9 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) });
@@ -661,7 +661,7 @@ AvatarStack.displayName = "AvatarStack";
 const DEFAULT_TEXT_ELEMENT = "div";
 function Text(props) {
   const $ = 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,
@@ -672,27 +672,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 = composeClassNames(className, 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 = _composeClassNames(className, 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 = 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__ */ jsx("span", { className: t4, children }), $[22] = children, $[23] = t4, $[24] = t5) : t5 = $[24];
+  $[20] !== textOverflowProp ? (t5 = textOverflow({
+    textOverflow: textOverflowProp
+  }), $[20] = textOverflowProp, $[21] = t5) : t5 = $[21];
   let t6;
-  return $[25] !== Element2 || $[26] !== rest || $[27] !== t3 || $[28] !== t5 ? (t6 = /* @__PURE__ */ 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__ */ 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__ */ 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";
@@ -711,7 +711,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 = composeClassNames(className, badge({
+  $[9] !== className || $[10] !== radius || $[11] !== tone ? (t6 = _composeClassNames(className, badge({
     radius,
     tone
   })), $[9] = className, $[10] = radius, $[11] = tone, $[12] = t6) : t6 = $[12];
@@ -729,7 +729,7 @@ function AnimatedSpinnerIcon(props) {
     ...rest
   } = props, $[0] = props, $[1] = className, $[2] = rest) : (className = $[1], rest = $[2]);
   let t0;
-  $[3] !== className ? (t0 = composeClassNames(className, animatedSpinnerIcon()), $[3] = className, $[4] = t0) : t0 = $[4];
+  $[3] !== className ? (t0 = _composeClassNames(className, animatedSpinnerIcon()), $[3] = className, $[4] = t0) : t0 = $[4];
   let t1;
   return $[5] !== rest || $[6] !== t0 ? (t1 = /* @__PURE__ */ jsx(SpinnerIcon, { ...rest, "data-sanity-icon": "animated-spinner", className: t0 }), $[5] = rest, $[6] = t0, $[7] = t1) : t1 = $[7], t1;
 }
@@ -795,7 +795,7 @@ function Button(props) {
     {
       "data-ui": "Button",
       ...rest,
-      className: composeClassNames(className, button({
+      className: _composeClassNames(className, button({
         display,
         flex,
         radius,
@@ -851,7 +851,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 = composeClassNames(className, card({
+  $[14] !== className || $[15] !== shadow || $[16] !== t6 || $[17] !== tone ? (t7 = _composeClassNames(className, card({
     scheme: t6,
     shadow,
     tone
@@ -874,7 +874,7 @@ function Card(props) {
 Card.displayName = "Card";
 const DEFAULT_CHECKBOX_ELEMENT = "input";
 function Checkbox(props) {
-  const $ = c(34), t0 = props;
+  const $ = c(32), t0 = props;
   let checked, className, customValidity, disabled, forwardedRef, indeterminate, readOnly, rest, style, t1;
   $[0] !== t0 ? ({
     as: t1,
@@ -896,22 +896,22 @@ function Checkbox(props) {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
   }, t4 = [indeterminate], $[12] = indeterminate, $[13] = t3, $[14] = t4) : (t3 = $[13], t4 = $[14]), useEffect(t3, t4), useCustomValidity(ref, customValidity);
   let t5;
-  $[15] !== className ? (t5 = composeClassNames(className, checkbox()), $[15] = className, $[16] = t5) : t5 = $[16];
+  $[15] !== className ? (t5 = _composeClassNames(className, checkbox()), $[15] = className, $[16] = t5) : t5 = $[16];
   let t6;
-  $[17] !== className ? (t6 = composeClassNames(className, 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__ */ 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__ */ jsxs("span", { children: [
+  $[17] !== className ? (t6 = _composeClassNames(className, 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__ */ 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__ */ jsxs("span", { children: [
     /* @__PURE__ */ jsx(CheckmarkIcon, {}),
     /* @__PURE__ */ jsx(RemoveIcon, {})
-  ] }), $[29] = t12) : t12 = $[29];
-  let t13;
-  return $[30] !== style || $[31] !== t11 || $[32] !== t5 ? (t13 = /* @__PURE__ */ 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__ */ 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 = lazy(() => import("./refractor.js")), DEFAULT_CODE_ELEMENT = "pre";
@@ -929,7 +929,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 = composeClassNames(className, code({
+  $[8] !== className || $[9] !== size2 || $[10] !== weight ? (t3 = _composeClassNames(className, code({
     size: size2,
     weight
   })), $[8] = className, $[9] = size2, $[10] = weight, $[11] = t3) : t3 = $[11];
@@ -955,7 +955,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 = composeClassNames(className, container({
+  $[5] !== className || $[6] !== width ? (t3 = _composeClassNames(className, container({
     width
   })), $[5] = className, $[6] = width, $[7] = t3) : t3 = $[7];
   let t4;
@@ -1009,7 +1009,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 = composeClassNames(className, heading({
+  $[12] !== accent || $[13] !== align || $[14] !== className || $[15] !== flex || $[16] !== muted || $[17] !== size2 || $[18] !== weight ? (t5 = _composeClassNames(className, heading({
     accent,
     align,
     flex,
@@ -1059,7 +1059,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 = composeClassNames(className, kbd({
+  $[9] !== className || $[10] !== radius ? (t7 = _composeClassNames(className, kbd({
     radius
   })), $[9] = className, $[10] = radius, $[11] = t7) : t7 = $[11];
   let t8;
@@ -1176,29 +1176,29 @@ function Arrow(props) {
   let t6;
   $[8] !== style || $[9] !== t5 ? (t6 = {
     ...style,
-    "--arrow-size": t5
+    [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 = _arrowStrokeMask(), $[11] = t8) : t8 = $[11];
   let t9;
-  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t9 = _arrowStrokeMask(), $[11] = t9) : t9 = $[11];
+  $[12] !== w ? (t9 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t8, x: 0, width: w, height: w, fill: "white" }) }), $[12] = w, $[13] = t9) : t9 = $[13];
   let t10;
-  $[12] !== w ? (t10 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ 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 = _arrowStroke(), $[14] = t10) : t10 = $[14];
   let t11;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t11 = _arrowStroke(), $[14] = t11) : t11 = $[14];
+  $[15] !== strokePath ? (t11 = /* @__PURE__ */ jsx("path", { className: t10, d: strokePath, mask: "url(#stroke-mask)" }), $[15] = strokePath, $[16] = t11) : t11 = $[16];
   let t12;
-  $[15] !== strokePath ? (t12 = /* @__PURE__ */ jsx("path", { className: t11, d: strokePath, mask: "url(#stroke-mask)" }), $[15] = strokePath, $[16] = t12) : t12 = $[16];
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowShape(), $[17] = t12) : t12 = $[17];
   let t13;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t13 = _arrowShape(), $[17] = t13) : t13 = $[17];
+  $[18] !== fillPath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: fillPath }), $[18] = fillPath, $[19] = t13) : t13 = $[19];
   let t14;
-  $[18] !== fillPath ? (t14 = /* @__PURE__ */ jsx("path", { className: t13, d: fillPath }), $[18] = fillPath, $[19] = t14) : t14 = $[19];
+  $[20] !== t11 || $[21] !== t13 || $[22] !== t7 || $[23] !== t9 || $[24] !== w ? (t14 = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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);
@@ -1494,7 +1494,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 = composeClassNames(className, srOnly()), $[5] = className, $[6] = t2) : t2 = $[6];
+  $[5] !== className ? (t2 = _composeClassNames(className, srOnly()), $[5] = className, $[6] = t2) : t2 = $[6];
   let t3;
   return $[7] !== Element2 || $[8] !== children || $[9] !== rest || $[10] !== t2 ? (t3 = /* @__PURE__ */ 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;
 }
@@ -1768,7 +1768,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
@@ -1897,10 +1897,10 @@ function Radio(props) {
   let t2;
   $[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[9] = t2) : t2 = $[9], useImperativeHandle(forwardedRef, t2), useCustomValidity(ref, customValidity);
   let t3;
-  $[10] !== className ? (t3 = composeClassNames(className, radio()), $[10] = className, $[11] = t3) : t3 = $[11];
-  const t4 = !disabled && readOnly ? "" : void 0, t5 = customValidity ? "" : void 0, t6 = disabled || readOnly;
+  $[10] !== className ? (t3 = _composeClassNames(className, 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__ */ 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__ */ 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__ */ jsx("span", {}), $[19] = t8) : t8 = $[19];
   let t9;
@@ -1912,7 +1912,7 @@ function Radio(props) {
 Radio.displayName = "Radio";
 const DEFAULT_SELECT_ELEMENT = "select";
 function Select(props) {
-  const $ = c(39), t0 = props;
+  const $ = c(38), t0 = props;
   let children, customValidity, disabled, forwardedRef, gap, readOnly, rest, t1, t2, t3, t4, t5, t6;
   $[0] !== t0 ? ({
     as: t1,
@@ -1941,25 +1941,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 = _inputElement(), $[21] = t11) : t11 = $[21];
-  const t12 = disabled || readOnly;
+  let t10;
+  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _inputElement(), $[21] = t10) : t10 = $[21];
+  const t11 = disabled || readOnly;
+  let t12;
+  $[22] !== Element2 || $[23] !== children || $[24] !== rest || $[25] !== t11 ? (t12 = /* @__PURE__ */ 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__ */ 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 = selectPresentation(), $[27] = t13) : t13 = $[27];
   let t14;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = selectPresentation(), $[28] = t14) : t14 = $[28];
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[28] = t14) : t14 = $[28];
   let t15;
-  $[29] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[29] = t15) : t15 = $[29];
+  $[29] !== fontSize ? (t15 = /* @__PURE__ */ jsx(Text, { size: fontSize, children: t14 }), $[29] = fontSize, $[30] = t15) : t15 = $[30];
   let t16;
-  $[30] !== fontSize ? (t16 = /* @__PURE__ */ jsx(Text, { size: fontSize, children: t15 }), $[30] = fontSize, $[31] = t16) : t16 = $[31];
+  $[31] !== padding || $[32] !== t15 ? (t16 = /* @__PURE__ */ jsx("span", { className: t13, children: /* @__PURE__ */ 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__ */ jsx("span", { className: t14, children: /* @__PURE__ */ 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__ */ 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__ */ 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";
@@ -1975,7 +1974,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 = composeClassNames(className, stack()), $[6] = className, $[7] = t2) : t2 = $[7];
+  $[6] !== className ? (t2 = _composeClassNames(className, stack()), $[6] = className, $[7] = t2) : t2 = $[7];
   const t3 = gap ?? space;
   let t4;
   return $[8] !== as || $[9] !== rest || $[10] !== t2 || $[11] !== t3 ? (t4 = /* @__PURE__ */ 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;
@@ -2004,7 +2003,7 @@ function Switch(props) {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
   }, t4 = [indeterminate], $[11] = indeterminate, $[12] = t3, $[13] = t4) : (t3 = $[12], t4 = $[13]), useEffect(t3, t4);
   let t5;
-  $[14] !== className ? (t5 = composeClassNames(className, _switch()), $[14] = className, $[15] = t5) : t5 = $[15];
+  $[14] !== className ? (t5 = _composeClassNames(className, _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 = _switchElement(), $[16] = t9) : t9 = $[16];
@@ -2025,10 +2024,11 @@ function Switch(props) {
 Switch.displayName = "Switch";
 const DEFAULT_TEXT_AREA_ELEMENT = "textarea";
 function TextArea(props) {
-  const $ = c(28), t0 = props;
-  let customValidity, forwardedRef, gap, rest, t1, t2, t3, t4, t5, t6, t7;
+  const $ = 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,
@@ -2036,39 +2036,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 = useRef(null);
   let t8;
-  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[12] = t8) : t8 = $[12], useImperativeHandle(forwardedRef, t8), useCustomValidity(ref, customValidity);
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[13] = t8) : t8 = $[13], useImperativeHandle(forwardedRef, t8), useCustomValidity(ref, customValidity);
   const t9 = gap ?? space;
   let t10;
-  $[13] !== border || $[14] !== fontSize || $[15] !== padding || $[16] !== radius || $[17] !== t9 ? (t10 = textArea({
+  $[14] !== border || $[15] !== fontSize || $[16] !== padding || $[17] !== radius || $[18] !== t9 ? (t10 = 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 = _inputElement(), $[19] = t11) : t11 = $[19];
-  let t12;
-  $[20] !== Element2 || $[21] !== disabled || $[22] !== rest ? (t12 = /* @__PURE__ */ 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__ */ jsx("span", { className: _inputPresentation() }), $[24] = t13) : t13 = $[24];
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t13 = _inputElement(), $[20] = t13) : t13 = $[20];
   let t14;
-  return $[25] !== t10 || $[26] !== t12 ? (t14 = /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: _inputPresentation() }), $[26] = t15) : t15 = $[26];
+  let t16;
+  return $[27] !== t10 || $[28] !== t11 || $[29] !== t12 || $[30] !== t14 ? (t16 = /* @__PURE__ */ 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 = {
@@ -2078,7 +2079,7 @@ const DEFAULT_TEXT_INPUT_ELEMENT = "input", CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
 function TextInput(props) {
-  const $ = c(86), t0 = props;
+  const $ = 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 {
@@ -2128,7 +2129,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 = composeClassNames(className, textInput({
+  $[30] !== border || $[31] !== className || $[32] !== fontSize || $[33] !== padding || $[34] !== radius || $[35] !== t16 || $[36] !== width ? (t17 = _composeClassNames(className, textInput({
     border,
     fontSize,
     padding,
@@ -2136,53 +2137,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__ */ jsx(Box, { as: "span", className: "text-input-prefix", sizing: "border", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[38] = prefix, $[39] = t22) : t22 = $[39];
-  let t23;
-  $[40] === Symbol.for("react.memo_cache_sentinel") ? (t23 = _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__ */ 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__ */ jsx(Box, { as: "span", className: "text-input-prefix", sizing: "border", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[38] = prefix, $[39] = t24) : t24 = $[39];
   let t25;
-  $[47] === Symbol.for("react.memo_cache_sentinel") ? (t25 = _inputPresentation(), $[47] = t25) : t25 = $[47];
-  const t26 = __unstable_disableFocusRing ? "" : void 0;
+  $[40] === Symbol.for("react.memo_cache_sentinel") ? (t25 = _inputElement(), $[40] = t25) : t25 = $[40];
+  let t26;
+  $[41] !== Element2 || $[42] !== disabled || $[43] !== readOnly || $[44] !== rest || $[45] !== type ? (t26 = /* @__PURE__ */ 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__ */ jsx(Box, { as: "span", padding, position: "absolute", style: {
+  $[47] === Symbol.for("react.memo_cache_sentinel") ? (t27 = _inputPresentation(), $[47] = t27) : t27 = $[47];
+  const t28 = __unstable_disableFocusRing ? "" : void 0;
+  let t29;
+  $[48] !== IconComponent || $[49] !== fontSize || $[50] !== padding ? (t29 = IconComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", style: {
     top: 0,
     left: 0
   }, children: /* @__PURE__ */ jsxs(Text, { size: fontSize, children: [
     isValidElement(IconComponent) && IconComponent,
     isValidElementType(IconComponent) && /* @__PURE__ */ 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__ */ 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__ */ jsx(Box, { as: "span", padding, position: "absolute", style: {
     top: 0,
     right: 0
   }, children: /* @__PURE__ */ jsxs(Text, { size: fontSize, children: [
     isValidElement(IconRightComponent) && IconRightComponent,
     isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-  ] }) }), $[52] = IconRightComponent, $[53] = fontSize, $[54] = padding, $[55] = withClearButton, $[56] = t28) : t28 = $[56];
-  let t29;
-  $[57] !== t26 || $[58] !== t27 || $[59] !== t28 ? (t29 = /* @__PURE__ */ 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__ */ jsx(Box, { as: "span", padding: clearButtonBoxPadding, position: "absolute", style: CLEAR_BUTTON_BOX_STYLE, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Clear", "data-qa": "clear-button", display: "block", fontSize, icon: 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__ */ jsxs(Box, { as: "span", flex: 1, position: "relative", children: [
-    t24,
+  $[57] !== t28 || $[58] !== t29 || $[59] !== t30 ? (t31 = /* @__PURE__ */ 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__ */ jsx(Box, { as: "span", className: "text-input-suffix", sizing: "border", children: /* @__PURE__ */ 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__ */ jsx(Box, { as: "span", padding: clearButtonBoxPadding, position: "absolute", style: CLEAR_BUTTON_BOX_STYLE, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Clear", "data-qa": "clear-button", display: "block", fontSize, icon: 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__ */ 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__ */ 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__ */ jsx(Box, { as: "span", className: "text-input-suffix", sizing: "border", children: /* @__PURE__ */ 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__ */ 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;
@@ -2313,7 +2314,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,
@@ -2429,7 +2430,7 @@ function Tooltip(props) {
   }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
   if (useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsx(Fragment, {});
   if (disabled) return child;
-  const node_0 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: composeClassNames(className, tooltip()), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
+  const node_0 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: _composeClassNames(className, 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__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2?.tone ?? "default" : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
@@ -2479,7 +2480,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;
@@ -2712,7 +2713,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 = composeClassNames(className, menu()), $[42] = className, $[43] = t13) : t13 = $[43];
+  $[42] !== className ? (t13 = _composeClassNames(className, menu()), $[42] = className, $[43] = t13) : t13 = $[43];
   const t14 = gap ?? space;
   let t15;
   $[44] !== children || $[45] !== t14 ? (t15 = /* @__PURE__ */ jsx(Stack, { gap: t14, children }), $[44] = children, $[45] = t14, $[46] = t15) : t15 = $[46];
@@ -2733,7 +2734,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 = composeClassNames(className, menuDivider()), $[4] = className, $[5] = t2) : t2 = $[5];
+  $[4] !== className ? (t2 = _composeClassNames(className, menuDivider()), $[4] = className, $[5] = t2) : t2 = $[5];
   let t3;
   return $[6] !== Element2 || $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t2 }), $[6] = Element2, $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
@@ -2751,7 +2752,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 = composeClassNames(className, _selectable({
+  $[6] !== className || $[7] !== radius || $[8] !== tone ? (t2 = _composeClassNames(className, _selectable({
     radius,
     tone
   })), $[6] = className, $[7] = radius, $[8] = tone, $[9] = t2) : t2 = $[9];
@@ -2944,7 +2945,7 @@ function MenuItem(props) {
       isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
     ] }),
     text2 && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", weight: "medium", children: text2 }) }),
-    hotkeys && /* @__PURE__ */ jsx(Hotkeys, { gap: 0.5, keys: hotkeys, style: {
+    hotkeys && /* @__PURE__ */ jsx(Hotkeys, { keys: hotkeys, style: {
       marginTop: -4,
       marginBottom: -4
     } }),