@sanity/ui 4.1.1 → 4.2.0

package/dist/index.js

@@ -1,20 +1,20 @@
 "use client";
 import { a as rem, i as _responsive, n as _getArrayProp, r as _getResponsiveSpace, s as EMPTY_RECORD, t as _fillCSSObject } from "./helpers-C8xxXAQC.js";
-import { a as textInputFontSizeStyle, c as responsiveInputPaddingStyle, d as attemptFocus, f as focusFirstDescendant, g as _raf2, h as _raf, i as textInputBaseStyle, l as useCustomValidity, m as isFocusable, n as inputRoot, o as textInputRepresentationStyle, p as focusLastDescendant, r as textInputRoot, s as responsiveInputPaddingIconRightStyle, t as TextInput, u as _hasFocus } from "./textInput-DAaORuky.js";
+import { a as textInputFontSizeStyle, c as responsiveInputPaddingStyle, d as attemptFocus, f as focusFirstDescendant, g as _raf2, h as _raf, i as textInputBaseStyle, l as useCustomValidity, m as isFocusable, n as inputRoot, o as textInputRepresentationStyle, p as focusLastDescendant, r as textAreaRoot, s as responsiveInputPaddingIconRightStyle, t as TextInput, u as _hasFocus } from "./textInput-pSfQjkmx.js";
 import { a as isHTMLElement, c as isHTMLTextAreaElement, i as isHTMLButtonElement, n as containsOrEqualsElement, o as isHTMLInputElement, r as isHTMLAnchorElement, s as isHTMLSelectElement, t as _isEnterToClickElement } from "./element-BYgCE_iK.js";
 import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
 import { _ as useTheme_v2, a as useMatchMedia, b as responsivePaddingStyle, c as ThemeColorProvider, d as createGlobalScopedContext, g as useTheme, h as _cardColorStyle, i as usePrefersReducedMotion, l as useRootTheme, m as focusRingStyle, n as LayerProvider, o as useMediaIndex, p as focusRingBorderStyle, s as Card, t as useLayer, u as ThemeProvider, v as responsiveRadiusStyle, y as Box } from "./useLayer-D1usxIE0.js";
 import { t as Flex } from "./flex-DmbDG2ks.js";
 import { a as responsiveTextAlignStyle, i as responsiveTextFont, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-rsNFPq2-.js";
 import { t as responsiveFont } from "./responsiveFont-CilwaORG.js";
-import { n as Spinner, t as Button } from "./button-Dh_M2fYx.js";
+import { n as Spinner, t as Button } from "./button-BNyKSDyA.js";
 import { n as _elementSizeObserver, t as useElementSize } from "./useElementSize-BJvbGHq8.js";
-import { a as useBoundaryElement, i as PortalContext, n as Portal, o as BoundaryElementContext, r as usePortal, t as Arrow } from "./arrow-DKn5YKdy.js";
+import { a as useBoundaryElement, i as PortalContext, n as Portal, o as BoundaryElementContext, r as usePortal, t as Arrow } from "./arrow-BmX6qbAS.js";
 import { t as useClickOutsideEvent } from "./useClickOutsideEvent-wGLGWBZN.js";
 import { t as responsiveCodeFontStyle } from "./codeFontStyle-84SMhFtI.js";
 import { a as rgba$1, c as hslToRgb$1, i as multiply$1, l as rgbToHex$1, n as buildTheme, o as parseColor$1, r as screen$1, s as hexToRgb$1, t as createColorTheme$1, u as rgbToHsl$1 } from "./factory-BzXTX8_Q.js";
-import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-uSArGPzR.js";
-import { t as Layer } from "./layer-BfwisMR6.js";
+import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-CaHsQlsO.js";
+import { t as Layer } from "./layer-Bl5R3uNR.js";
 import { t as Grid } from "./grid-6JSgMj1O.js";
 import { c } from "react/compiler-runtime";
 import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
@@ -91,7 +91,7 @@ function isTargetWithinScope(boundaryElement, portalElement, target) {
 }
 const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
 	displayName: "StyledDialog",
-	componentId: "sc-pe1n4l-0"
+	componentId: "sc-drvqzp-0"
 })(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
 function DialogCard(props) {
 	let $ = c(44), { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, children, contentRef: forwardedContentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: radiusProp, ref: forwardedRef, scheme, shadow: shadowProp, width: widthProp } = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, t0;
@@ -124,6 +124,7 @@ function DialogCard(props) {
 	let t10;
 	$[22] !== header || $[23] !== labelId || $[24] !== onClose || $[25] !== showCloseButton || $[26] !== showHeader ? (t10 = showHeader && /* @__PURE__ */ jsx(Box, {
 		className: "_1a85unk7",
+		"data-ui": "DialogHeader",
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "flex-start",
 			padding: 3,
@@ -152,6 +153,7 @@ function DialogCard(props) {
 	let t11;
 	$[28] === children ? t11 = $[29] : (t11 = /* @__PURE__ */ jsx(Box, {
 		className: dialogContent,
+		"data-ui": "DialogContent",
 		flex: 1,
 		ref: contentRef,
 		tabIndex: -1,
@@ -160,6 +162,7 @@ function DialogCard(props) {
 	let t12;
 	$[30] === footer ? t12 = $[31] : (t12 = footer && /* @__PURE__ */ jsx(Box, {
 		className: "_1a85unk9",
+		"data-ui": "DialogFooter",
 		children: footer
 	}), $[30] = footer, $[31] = t12);
 	let t13;
@@ -746,10 +749,10 @@ function TreeGroup(props) {
 var treeItem = "_14vatmh0";
 const StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
 	displayName: "StyledTreeItem",
-	componentId: "sc-9k6ukt-0"
+	componentId: "sc-inyvr0-0"
 })(treeItemRootColorStyle), TreeItemBox = /* @__PURE__ */ styled.a.withConfig({
 	displayName: "TreeItemBox",
-	componentId: "sc-9k6ukt-1"
+	componentId: "sc-inyvr0-1"
 })(treeItemBoxStyle);
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
@@ -810,7 +813,10 @@ function TreeItem(props) {
 		muted,
 		size: fontSize,
 		weight,
-		children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } })
+		children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, {
+			className: "_14vatmh1",
+			style: { transform: expanded ? "rotate(90deg)" : void 0 }
+		})
 	}), $[36] = IconComponent, $[37] = expanded, $[38] = fontSize, $[39] = muted, $[40] = weight, $[41] = t18) : t18 = $[41];
 	let t19;
 	$[42] !== gap || $[43] !== t16 || $[44] !== t17 || $[45] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Box, {
@@ -1026,49 +1032,7 @@ function LabelComponent(props) {
 *
 * @public
 */
-const Label = LabelComponent, avatarStyle = {
-	root: avatarRootStyle,
-	arrow: avatarArrowStyle,
-	bgStroke: avatarBgStrokeStyle,
-	stroke: avatarStrokeStyle,
-	initials: avatarInitialsStyle,
-	image: avatarImageStyle
-};
-function avatarArrowStyle() {
-	return {
-		position: "absolute",
-		boxSizing: "border-box",
-		zIndex: "0",
-		opacity: "0",
-		transition: "all 0.2s linear",
-		transform: "rotate(-90deg) translate3d(0, 6px, 0)",
-		left: 0,
-		right: 0,
-		top: 0,
-		bottom: 0,
-		"& > svg": {
-			width: "11px",
-			height: "7px",
-			position: "absolute",
-			top: "-5px",
-			left: "50%",
-			transform: "translateX(-6px)",
-			"&:not([hidden])": { display: "block" }
-		},
-		"[data-arrow-position='inside'] > &": {
-			transform: "rotate(-90deg) translate3d(0, 6px, 0)",
-			opacity: "0"
-		},
-		"[data-arrow-position='top'] > &": {
-			opacity: "1",
-			transform: "rotate(0deg)"
-		},
-		"[data-arrow-position='bottom'] > &": {
-			opacity: "1",
-			transform: "rotate(-180deg)"
-		}
-	};
-}
+const Label = LabelComponent;
 function avatarRootStyle(props) {
 	let { $color } = props, { avatar } = getTheme_v2(props.theme);
 	return {
@@ -1111,60 +1075,14 @@ function responsiveAvatarSizeStyle(props) {
 		};
 	});
 }
-function avatarImageStyle() {
-	return { position: "relative" };
-}
-function avatarInitialsStyle() {
-	return {
-		width: "100%",
-		height: "100%",
-		color: "var(--avatar-fg-color)",
-		alignItems: "center",
-		justifyContent: "center",
-		textTransform: "uppercase",
-		textAlign: "center",
-		borderRadius: "50%",
-		"&:not([hidden])": { display: "flex" }
-	};
-}
-function avatarBgStrokeStyle() {
-	return {
-		strokeWidth: "4px",
-		stroke: "var(--card-bg-color)"
-	};
-}
-function avatarStrokeStyle() {
-	return {
-		strokeWidth: "2px",
-		stroke: "var(--avatar-bg-color)",
-		"[data-status=\"editing\"] &": {
-			strokeDasharray: "2 4",
-			strokeLinecap: "round"
-		}
-	};
-}
+var avatarArrow = "_1jezl1b0", avatarStack = "_1jezl1b4";
 const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledAvatar",
-	componentId: "sc-myyy04-0"
-})(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = /* @__PURE__ */ styled.div.withConfig({
-	displayName: "Arrow",
-	componentId: "sc-myyy04-1"
-})(avatarStyle.arrow), BgStroke = /* @__PURE__ */ styled.ellipse.withConfig({
-	displayName: "BgStroke",
-	componentId: "sc-myyy04-2"
-})(avatarStyle.bgStroke), Stroke = /* @__PURE__ */ styled.ellipse.withConfig({
-	displayName: "Stroke",
-	componentId: "sc-myyy04-3"
-})(avatarStyle.stroke), Initials = /* @__PURE__ */ styled.div.withConfig({
-	displayName: "Initials",
-	componentId: "sc-myyy04-4"
-})(avatarStyle.initials), InitialsLabel = /* @__PURE__ */ styled(Label).withConfig({
+	componentId: "sc-3dcnr0-0"
+})(responsiveAvatarSizeStyle, avatarRootStyle), InitialsLabel = /* @__PURE__ */ styled(Label).withConfig({
 	displayName: "InitialsLabel",
-	componentId: "sc-myyy04-5"
-})({ color: "inherit" }), AvatarImage = /* @__PURE__ */ styled.svg.withConfig({
-	displayName: "AvatarImage",
-	componentId: "sc-myyy04-6"
-})(avatarStyle.image);
+	componentId: "sc-3dcnr0-1"
+})({ color: "inherit" });
 function AvatarComponent(props) {
 	let $ = c(47), __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, ref, restProps, src, t0, t1, t2, title;
 	$[0] === props ? (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], asProp = $[4], initials = $[5], onImageLoadError = $[6], ref = $[7], restProps = $[8], src = $[9], t0 = $[10], t1 = $[11], t2 = $[12], title = $[13]) : ({__unstable_hideInnerStroke, as: asProp, color: t0, src, title, initials, onImageLoadError, arrowPosition: arrowPositionProp, animateArrowFrom, ref, status: t1, size: t2, ...restProps} = props, $[0] = props, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = asProp, $[5] = initials, $[6] = onImageLoadError, $[7] = ref, $[8] = restProps, $[9] = src, $[10] = t0, $[11] = t1, $[12] = t2, $[13] = title);
@@ -1183,18 +1101,22 @@ function AvatarComponent(props) {
 		setImageFailed(!0), onImageLoadError && onImageLoadError(/* @__PURE__ */ Error("Avatar: the image failed to load"));
 	}, $[21] = onImageLoadError, $[22] = t7);
 	let handleImageError = t7, T0 = StyledAvatar, t8 = typeof as == "string" ? as : void 0, t10;
-	$[23] === color ? t10 = $[24] : (t10 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", {
-		width: "11",
-		height: "7",
-		viewBox: "0 0 11 7",
-		fill: "none",
-		children: /* @__PURE__ */ jsx("path", {
-			d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z",
-			fill: color
+	$[23] === color ? t10 = $[24] : (t10 = /* @__PURE__ */ jsx("div", {
+		className: avatarArrow,
+		children: /* @__PURE__ */ jsx("svg", {
+			width: "11",
+			height: "7",
+			viewBox: "0 0 11 7",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z",
+				fill: color
+			})
 		})
-	}) }), $[23] = color, $[24] = t10);
+	}), $[23] = color, $[24] = t10);
 	let t11;
-	$[25] !== __unstable_hideInnerStroke || $[26] !== _radius || $[27] !== _sizeRem || $[28] !== handleImageError || $[29] !== imageFailed || $[30] !== imageId || $[31] !== src ? (t11 = !imageFailed && src && /* @__PURE__ */ jsxs(AvatarImage, {
+	$[25] !== __unstable_hideInnerStroke || $[26] !== _radius || $[27] !== _sizeRem || $[28] !== handleImageError || $[29] !== imageFailed || $[30] !== imageId || $[31] !== src ? (t11 = !imageFailed && src && /* @__PURE__ */ jsxs("svg", {
+		className: "_1jezl1b1",
 		viewBox: `0 0 ${_sizeRem} ${_sizeRem}`,
 		fill: "none",
 		children: [
@@ -1216,14 +1138,16 @@ function AvatarComponent(props) {
 				r: _radius,
 				fill: `url(#${imageId})`
 			}),
-			!__unstable_hideInnerStroke && /* @__PURE__ */ jsx(BgStroke, {
+			!__unstable_hideInnerStroke && /* @__PURE__ */ jsx("ellipse", {
+				className: "_1jezl1b2",
 				cx: _radius,
 				cy: _radius,
 				rx: _radius,
 				ry: _radius,
 				vectorEffect: "non-scaling-stroke"
 			}),
-			/* @__PURE__ */ jsx(Stroke, {
+			/* @__PURE__ */ jsx("ellipse", {
+				className: "_1jezl1b3",
 				cx: _radius,
 				cy: _radius,
 				rx: _radius,
@@ -1232,12 +1156,15 @@ function AvatarComponent(props) {
 			})
 		]
 	}), $[25] = __unstable_hideInnerStroke, $[26] = _radius, $[27] = _sizeRem, $[28] = handleImageError, $[29] = imageFailed, $[30] = imageId, $[31] = src, $[32] = t11) : t11 = $[32];
-	let t12 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, {
-		forwardedAs: "span",
-		size: size.map(_temp$2),
-		weight: "medium",
-		children: initials
-	}) }) }), t13;
+	let t12 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx("div", {
+		className: "_1jezl1b5",
+		children: /* @__PURE__ */ jsx(InitialsLabel, {
+			forwardedAs: "span",
+			size: size.map(_temp$2),
+			weight: "medium",
+			children: initials
+		})
+	}) }), t13;
 	return $[33] !== T0 || $[34] !== arrowPosition || $[35] !== as || $[36] !== color || $[37] !== ref || $[38] !== restProps || $[39] !== size || $[40] !== status || $[41] !== t10 || $[42] !== t11 || $[43] !== t12 || $[44] !== t8 || $[45] !== title ? (t13 = /* @__PURE__ */ jsxs(T0, {
 		as,
 		"data-as": t8,
@@ -1312,10 +1239,6 @@ function AvatarCounter(props) {
 function _temp$1(s) {
 	return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
 }
-const BASE_STYLES = css`white-space:nowrap;& > div{vertical-align:top;&:not([hidden]){display:inline-block;}}`;
-function avatarStackStyle() {
-	return BASE_STYLES;
-}
 function responsiveAvatarStackSizeStyle(props) {
 	let { avatar, media } = getTheme_v2(props.theme);
 	return _responsive(media, props.$size, (size) => {
@@ -1325,41 +1248,42 @@ function responsiveAvatarStackSizeStyle(props) {
 }
 const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledAvatarStack",
-	componentId: "sc-oq0y9h-0"
-})(responsiveAvatarStackSizeStyle, avatarStackStyle);
+	componentId: "sc-cw2hpz-0"
+})(responsiveAvatarStackSizeStyle);
 /**
 * @public
 */
 function AvatarStack(props) {
-	let $ = c(39), childrenProp, ref, restProps, t0, t1;
-	$[0] === props ? (childrenProp = $[1], ref = $[2], restProps = $[3], t0 = $[4], t1 = $[5]) : ({children: childrenProp, maxLength: t0, ref, size: t1, ...restProps} = props, $[0] = props, $[1] = childrenProp, $[2] = ref, $[3] = restProps, $[4] = t0, $[5] = t1);
-	let maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, T0, t2, t3, t4, t5, t6, t7, t8;
-	if ($[6] !== childrenProp || $[7] !== maxLengthProp || $[8] !== ref || $[9] !== restProps || $[10] !== sizeProp) {
-		let children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0), t9;
-		$[19] === sizeProp ? t9 = $[20] : (t9 = _getArrayProp(sizeProp), $[19] = sizeProp, $[20] = t9);
-		let size = t9, len = children.length, extraCount = len - (maxLength - 1), visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-		T0 = StyledAvatarStack, t2 = "AvatarStack", t3 = restProps, t4 = ref, t5 = size, $[21] !== len || $[22] !== size ? (t6 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, {
+	let $ = c(45), childrenProp, className, ref, restProps, t0, t1;
+	$[0] === props ? (childrenProp = $[1], className = $[2], ref = $[3], restProps = $[4], t0 = $[5], t1 = $[6]) : ({children: childrenProp, className, maxLength: t0, ref, size: t1, ...restProps} = props, $[0] = props, $[1] = childrenProp, $[2] = className, $[3] = ref, $[4] = restProps, $[5] = t0, $[6] = t1);
+	let maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, T0, t2, t3, t4, t5, t6, t7, t8, t9;
+	if ($[7] !== childrenProp || $[8] !== className || $[9] !== maxLengthProp || $[10] !== ref || $[11] !== restProps || $[12] !== sizeProp) {
+		let children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0), t10;
+		$[22] === sizeProp ? t10 = $[23] : (t10 = _getArrayProp(sizeProp), $[22] = sizeProp, $[23] = t10);
+		let size = t10, len = children.length, extraCount = len - (maxLength - 1), visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+		T0 = StyledAvatarStack, $[24] === className ? t2 = $[25] : (t2 = clsx(avatarStack, className), $[24] = className, $[25] = t2), t3 = "AvatarStack", t4 = restProps, t5 = ref, t6 = size, $[26] !== len || $[27] !== size ? (t7 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, {
 			count: len,
 			size
-		}) }), $[21] = len, $[22] = size, $[23] = t6) : t6 = $[23], $[24] !== extraCount || $[25] !== len || $[26] !== size ? (t7 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, {
+		}) }), $[26] = len, $[27] = size, $[28] = t7) : t7 = $[28], $[29] !== extraCount || $[30] !== len || $[31] !== size ? (t8 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, {
 			count: extraCount,
 			size
-		}) }), $[24] = extraCount, $[25] = len, $[26] = size, $[27] = t7) : t7 = $[27];
-		let t10;
-		$[28] === size ? t10 = $[29] : (t10 = (child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, { size }) }, String(childIndex)), $[28] = size, $[29] = t10), t8 = visibleChildren.map(t10), $[6] = childrenProp, $[7] = maxLengthProp, $[8] = ref, $[9] = restProps, $[10] = sizeProp, $[11] = T0, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = t5, $[16] = t6, $[17] = t7, $[18] = t8;
-	} else T0 = $[11], t2 = $[12], t3 = $[13], t4 = $[14], t5 = $[15], t6 = $[16], t7 = $[17], t8 = $[18];
-	let t9;
-	return $[30] !== T0 || $[31] !== t2 || $[32] !== t3 || $[33] !== t4 || $[34] !== t5 || $[35] !== t6 || $[36] !== t7 || $[37] !== t8 ? (t9 = /* @__PURE__ */ jsxs(T0, {
-		"data-ui": t2,
-		...t3,
-		ref: t4,
-		$size: t5,
+		}) }), $[29] = extraCount, $[30] = len, $[31] = size, $[32] = t8) : t8 = $[32];
+		let t11;
+		$[33] === size ? t11 = $[34] : (t11 = (child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, { size }) }, String(childIndex)), $[33] = size, $[34] = t11), t9 = visibleChildren.map(t11), $[7] = childrenProp, $[8] = className, $[9] = maxLengthProp, $[10] = ref, $[11] = restProps, $[12] = sizeProp, $[13] = T0, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7, $[20] = t8, $[21] = t9;
+	} else T0 = $[13], t2 = $[14], t3 = $[15], t4 = $[16], t5 = $[17], t6 = $[18], t7 = $[19], t8 = $[20], t9 = $[21];
+	let t10;
+	return $[35] !== T0 || $[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9 ? (t10 = /* @__PURE__ */ jsxs(T0, {
+		className: t2,
+		"data-ui": t3,
+		...t4,
+		ref: t5,
+		$size: t6,
 		children: [
-			t6,
 			t7,
-			t8
+			t8,
+			t9
 		]
-	}), $[30] = T0, $[31] = t2, $[32] = t3, $[33] = t4, $[34] = t5, $[35] = t6, $[36] = t7, $[37] = t8, $[38] = t9) : t9 = $[38], t9;
+	}), $[35] = T0, $[36] = t2, $[37] = t3, $[38] = t4, $[39] = t5, $[40] = t6, $[41] = t7, $[42] = t8, $[43] = t9, $[44] = t10) : t10 = $[44], t10;
 }
 function badgeStyle(props) {
 	let { $tone } = props;
@@ -1760,10 +1684,10 @@ function Switch(props) {
 }
 const Input = /* @__PURE__ */ styled.textarea.withConfig({
 	displayName: "Input",
-	componentId: "sc-w1fqhn-0"
+	componentId: "sc-gtnobm-0"
 })(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "Presentation",
-	componentId: "sc-w1fqhn-1"
+	componentId: "sc-gtnobm-1"
 })(responsiveRadiusStyle, textInputRepresentationStyle);
 /**
 * A multiline text input.
@@ -1811,7 +1735,7 @@ function TextArea(props) {
 	}), $[27] = __unstable_disableFocusRing, $[28] = rootTheme.scheme, $[29] = rootTheme.tone, $[30] = t13, $[31] = t14, $[32] = t15) : t15 = $[32];
 	let t16;
 	return $[33] !== t12 || $[34] !== t15 ? (t16 = /* @__PURE__ */ jsx("span", {
-		className: textInputRoot,
+		className: textAreaRoot,
 		"data-ui": "TextArea",
 		children: /* @__PURE__ */ jsxs("span", {
 			className: inputRoot,