@sanity/ui 4.1.1 → 4.2.1

package/dist/index.js

@@ -1,25 +1,25 @@
 "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-C83gG7N5.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 { _ 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-ONr7wTUN.js";
+import { t as Flex } from "./flex-JVQRW_e_.js";
+import { a as responsiveTextAlignStyle, i as responsiveTextFont, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-Bue-701Y.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-D8Ge5vTw.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-D-raLuvE.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 { t as Grid } from "./grid-6JSgMj1O.js";
+import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-DTjEz_u3.js";
+import { t as Layer } from "./layer-dwv5h6E7.js";
+import { t as Grid } from "./grid-Dw7q0_YV.js";
 import { c } from "react/compiler-runtime";
 import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
 import { clsx } from "clsx/lite";
-import { Children, Component, cloneElement, isValidElement, startTransition, useContext, useEffect, useId, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
+import { Children, Component, cloneElement, isValidElement, useContext, useEffect, useId, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
 import { css, styled } from "styled-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import ReactIs from "react-is";
@@ -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,80 +749,79 @@ function TreeGroup(props) {
 var treeItem = "_14vatmh0";
 const StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
 	displayName: "StyledTreeItem",
-	componentId: "sc-9k6ukt-0"
+	componentId: "sc-mgt2q1-0"
 })(treeItemRootColorStyle), TreeItemBox = /* @__PURE__ */ styled.a.withConfig({
 	displayName: "TreeItemBox",
-	componentId: "sc-9k6ukt-1"
+	componentId: "sc-mgt2q1-1"
 })(treeItemBoxStyle);
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
 function TreeItem(props) {
-	let $ = c(94), { children, expanded: t0, fontSize: t1, href, icon: IconComponent, id: idProp, linkAs, linkProps, muted, onClick, padding: t2, selected: t3, gap: t4, text, weight, ...restProps } = props, expandedProp = t0 !== void 0 && t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 2 : t2, selected = t3 !== void 0 && t3, gap = t4 === void 0 ? 2 : t4, [rootElement, _setRootElement] = useState(null), t5;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (node) => {
-		startTransition(() => _setRootElement(node));
-	}, $[0] = t5) : t5 = $[0];
-	let setRootElement = t5, treeitemRef = useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = useId(), id = idProp || _id, t6, t7;
-	if ($[1] !== id || $[2] !== path) {
+	let $ = c(93), { children, expanded: t0, fontSize: t1, href, icon: IconComponent, id: idProp, linkAs, linkProps, muted, onClick, padding: t2, selected: t3, gap: t4, text, weight, ...restProps } = props, expandedProp = t0 !== void 0 && t0, fontSize = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 2 : t2, selected = t3 !== void 0 && t3, gap = t4 === void 0 ? 2 : t4, [rootElement, setRootElement] = useState(null), treeitemRef = useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = useId(), id = idProp || _id, t5, t6;
+	if ($[0] !== id || $[1] !== path) {
 		let itemPath = path.concat([id || ""]);
-		t6 = itemPath, t7 = itemPath.join("/"), $[1] = id, $[2] = path, $[3] = t6, $[4] = t7;
-	} else t6 = $[3], t7 = $[4];
-	let t8;
-	$[5] !== t6 || $[6] !== t7 ? (t8 = [t6, t7], $[5] = t6, $[6] = t7, $[7] = t8) : t8 = $[7];
-	let [itemPath_0, itemKey] = t8, itemState = tree.state[itemKey], focused = tree.focusedElement === rootElement, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1, t9 = tree.level + 1, t10;
-	$[8] !== itemPath_0 || $[9] !== t9 || $[10] !== tree ? (t10 = {
+		t5 = itemPath, t6 = itemPath.join("/"), $[0] = id, $[1] = path, $[2] = t5, $[3] = t6;
+	} else t5 = $[2], t6 = $[3];
+	let t7;
+	$[4] !== t5 || $[5] !== t6 ? (t7 = [t5, t6], $[4] = t5, $[5] = t6, $[6] = t7) : t7 = $[6];
+	let [itemPath_0, itemKey] = t7, itemState = tree.state[itemKey], focused = tree.focusedElement === rootElement, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1, t8 = tree.level + 1, t9;
+	$[7] !== itemPath_0 || $[8] !== t8 || $[9] !== tree ? (t9 = {
 		...tree,
-		level: t9,
+		level: t8,
 		path: itemPath_0
-	}, $[8] = itemPath_0, $[9] = t9, $[10] = tree, $[11] = t10) : t10 = $[11];
-	let contextValue = t10, t11;
-	$[12] !== expanded || $[13] !== itemKey || $[14] !== onClick || $[15] !== rootElement || $[16] !== setExpanded || $[17] !== setFocusedElement ? (t11 = (event) => {
+	}, $[7] = itemPath_0, $[8] = t8, $[9] = tree, $[10] = t9) : t9 = $[10];
+	let contextValue = t9, t10;
+	$[11] !== expanded || $[12] !== itemKey || $[13] !== onClick || $[14] !== rootElement || $[15] !== setExpanded || $[16] !== setFocusedElement ? (t10 = (event) => {
 		onClick && onClick(event);
 		let target = event.target;
 		target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest("[data-ui=\"TreeItem__box\"]")) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootElement));
-	}, $[12] = expanded, $[13] = itemKey, $[14] = onClick, $[15] = rootElement, $[16] = setExpanded, $[17] = setFocusedElement, $[18] = t11) : t11 = $[18];
-	let handleClick = t11, t12;
-	$[19] !== focused || $[20] !== rootElement ? (t12 = (event_0) => {
+	}, $[11] = expanded, $[12] = itemKey, $[13] = onClick, $[14] = rootElement, $[15] = setExpanded, $[16] = setFocusedElement, $[17] = t10) : t10 = $[17];
+	let handleClick = t10, t11;
+	$[18] !== focused || $[19] !== rootElement ? (t11 = (event_0) => {
 		focused && event_0.key === "Enter" && (treeitemRef.current || rootElement)?.click();
-	}, $[19] = focused, $[20] = rootElement, $[21] = t12) : t12 = $[21];
-	let handleKeyDown = t12, t13, t14;
-	$[22] !== expanded || $[23] !== itemKey || $[24] !== registerItem || $[25] !== rootElement || $[26] !== selected ? (t13 = () => {
+	}, $[18] = focused, $[19] = rootElement, $[20] = t11) : t11 = $[20];
+	let handleKeyDown = t11, t12, t13;
+	$[21] !== expanded || $[22] !== itemKey || $[23] !== registerItem || $[24] !== rootElement || $[25] !== selected ? (t12 = () => {
 		if (rootElement) return registerItem(rootElement, itemKey, expanded, selected);
-	}, t14 = [
+	}, t13 = [
 		expanded,
 		itemKey,
 		registerItem,
 		rootElement,
 		selected
-	], $[22] = expanded, $[23] = itemKey, $[24] = registerItem, $[25] = rootElement, $[26] = selected, $[27] = t13, $[28] = t14) : (t13 = $[27], t14 = $[28]), useEffect(t13, t14);
-	let t15 = IconComponent || children ? "visible" : "hidden", t16;
-	$[29] === t15 ? t16 = $[30] : (t16 = {
-		visibility: t15,
+	], $[21] = expanded, $[22] = itemKey, $[23] = registerItem, $[24] = rootElement, $[25] = selected, $[26] = t12, $[27] = t13) : (t12 = $[26], t13 = $[27]), useEffect(t12, t13);
+	let t14 = IconComponent || children ? "visible" : "hidden", t15;
+	$[28] === t14 ? t15 = $[29] : (t15 = {
+		visibility: t14,
 		pointerEvents: "none"
-	}, $[29] = t15, $[30] = t16);
-	let t17;
-	$[31] !== IconComponent || $[32] !== fontSize || $[33] !== muted || $[34] !== weight ? (t17 = IconComponent && /* @__PURE__ */ jsx(Text, {
+	}, $[28] = t14, $[29] = t15);
+	let t16;
+	$[30] !== IconComponent || $[31] !== fontSize || $[32] !== muted || $[33] !== weight ? (t16 = IconComponent && /* @__PURE__ */ jsx(Text, {
 		muted,
 		size: fontSize,
 		weight,
 		children: /* @__PURE__ */ jsx(IconComponent, {})
-	}), $[31] = IconComponent, $[32] = fontSize, $[33] = muted, $[34] = weight, $[35] = t17) : t17 = $[35];
-	let t18;
-	$[36] !== IconComponent || $[37] !== expanded || $[38] !== fontSize || $[39] !== muted || $[40] !== weight ? (t18 = !IconComponent && /* @__PURE__ */ jsx(Text, {
+	}), $[30] = IconComponent, $[31] = fontSize, $[32] = muted, $[33] = weight, $[34] = t16) : t16 = $[34];
+	let t17;
+	$[35] !== IconComponent || $[36] !== expanded || $[37] !== fontSize || $[38] !== muted || $[39] !== weight ? (t17 = !IconComponent && /* @__PURE__ */ jsx(Text, {
 		muted,
 		size: fontSize,
 		weight,
-		children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { 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, {
+		children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, {
+			className: "_14vatmh1",
+			style: { transform: expanded ? "rotate(90deg)" : void 0 }
+		})
+	}), $[35] = IconComponent, $[36] = expanded, $[37] = fontSize, $[38] = muted, $[39] = weight, $[40] = t17) : t17 = $[40];
+	let t18;
+	$[41] !== gap || $[42] !== t15 || $[43] !== t16 || $[44] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Box, {
 		marginRight: gap,
-		style: t16,
-		children: [t17, t18]
-	}), $[42] = gap, $[43] = t16, $[44] = t17, $[45] = t18, $[46] = t19) : t19 = $[46];
-	let t20;
-	$[47] !== fontSize || $[48] !== muted || $[49] !== text || $[50] !== weight ? (t20 = /* @__PURE__ */ jsx(Box, {
+		style: t15,
+		children: [t16, t17]
+	}), $[41] = gap, $[42] = t15, $[43] = t16, $[44] = t17, $[45] = t18) : t18 = $[45];
+	let t19;
+	$[46] !== fontSize || $[47] !== muted || $[48] !== text || $[49] !== weight ? (t19 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
 		children: /* @__PURE__ */ jsx(Text, {
 			muted,
@@ -828,38 +830,38 @@ function TreeItem(props) {
 			weight,
 			children: text
 		})
-	}), $[47] = fontSize, $[48] = muted, $[49] = text, $[50] = weight, $[51] = t20) : t20 = $[51];
-	let t21;
-	$[52] !== padding || $[53] !== t19 || $[54] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Flex, {
+	}), $[46] = fontSize, $[47] = muted, $[48] = text, $[49] = weight, $[50] = t19) : t19 = $[50];
+	let t20;
+	$[51] !== padding || $[52] !== t18 || $[53] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Flex, {
 		padding,
-		children: [t19, t20]
-	}), $[52] = padding, $[53] = t19, $[54] = t20, $[55] = t21) : t21 = $[55];
-	let content = t21;
+		children: [t18, t19]
+	}), $[51] = padding, $[52] = t18, $[53] = t19, $[54] = t20) : t20 = $[54];
+	let content = t20;
 	if (href) {
-		let t22 = typeof linkAs == "string" ? linkAs : "a", t23;
-		$[56] !== content || $[57] !== expanded || $[58] !== href || $[59] !== linkAs || $[60] !== linkProps || $[61] !== t22 || $[62] !== tabIndex || $[63] !== tree.level ? (t23 = /* @__PURE__ */ jsx(TreeItemBox, {
+		let t21 = typeof linkAs == "string" ? linkAs : "a", t22;
+		$[55] !== content || $[56] !== expanded || $[57] !== href || $[58] !== linkAs || $[59] !== linkProps || $[60] !== t21 || $[61] !== tabIndex || $[62] !== tree.level ? (t22 = /* @__PURE__ */ jsx(TreeItemBox, {
 			...linkProps,
 			$level: tree.level,
 			"aria-expanded": expanded,
 			as: linkAs,
-			"data-as": t22,
+			"data-as": t21,
 			"data-ui": "TreeItem__box",
 			href,
 			ref: treeitemRef,
 			role: "treeitem",
 			tabIndex,
 			children: content
-		}), $[56] = content, $[57] = expanded, $[58] = href, $[59] = linkAs, $[60] = linkProps, $[61] = t22, $[62] = tabIndex, $[63] = tree.level, $[64] = t23) : t23 = $[64];
-		let t24;
-		$[65] !== children || $[66] !== expanded ? (t24 = children && /* @__PURE__ */ jsx(TreeGroup, {
+		}), $[55] = content, $[56] = expanded, $[57] = href, $[58] = linkAs, $[59] = linkProps, $[60] = t21, $[61] = tabIndex, $[62] = tree.level, $[63] = t22) : t22 = $[63];
+		let t23;
+		$[64] !== children || $[65] !== expanded ? (t23 = children && /* @__PURE__ */ jsx(TreeGroup, {
 			hidden: !expanded,
 			children
-		}), $[65] = children, $[66] = expanded, $[67] = t24) : t24 = $[67];
-		let t25;
-		return $[68] !== contextValue || $[69] !== t24 ? (t25 = /* @__PURE__ */ jsx(TreeContext.Provider, {
+		}), $[64] = children, $[65] = expanded, $[66] = t23) : t23 = $[66];
+		let t24;
+		return $[67] !== contextValue || $[68] !== t23 ? (t24 = /* @__PURE__ */ jsx(TreeContext.Provider, {
 			value: contextValue,
-			children: t24
-		}), $[68] = contextValue, $[69] = t24, $[70] = t25) : t25 = $[70], /* @__PURE__ */ jsxs(StyledTreeItem, {
+			children: t23
+		}), $[67] = contextValue, $[68] = t23, $[69] = t24) : t24 = $[69], /* @__PURE__ */ jsxs(StyledTreeItem, {
 			"data-selected": selected ? "" : void 0,
 			"data-tree-id": id,
 			"data-tree-key": itemKey,
@@ -869,42 +871,42 @@ function TreeItem(props) {
 			onClick: handleClick,
 			ref: setRootElement,
 			role: "none",
-			children: [t23, t25]
+			children: [t22, t24]
 		});
 	}
-	let T0 = StyledTreeItem, t22 = selected ? "" : void 0, t24 = clsx(treeItem, restProps.className), t25;
-	$[71] !== content || $[72] !== tree.level ? (t25 = /* @__PURE__ */ jsx(TreeItemBox, {
+	let T0 = StyledTreeItem, t21 = selected ? "" : void 0, t23 = clsx(treeItem, restProps.className), t24;
+	$[70] !== content || $[71] !== tree.level ? (t24 = /* @__PURE__ */ jsx(TreeItemBox, {
 		$level: tree.level,
 		as: "div",
 		"data-ui": "TreeItem__box",
 		children: content
-	}), $[71] = content, $[72] = tree.level, $[73] = t25) : t25 = $[73];
-	let t26;
-	$[74] !== children || $[75] !== expanded ? (t26 = children && /* @__PURE__ */ jsx(TreeGroup, {
+	}), $[70] = content, $[71] = tree.level, $[72] = t24) : t24 = $[72];
+	let t25;
+	$[73] !== children || $[74] !== expanded ? (t25 = children && /* @__PURE__ */ jsx(TreeGroup, {
 		expanded,
 		children
-	}), $[74] = children, $[75] = expanded, $[76] = t26) : t26 = $[76];
-	let t27;
-	$[77] !== contextValue || $[78] !== t26 ? (t27 = /* @__PURE__ */ jsx(TreeContext.Provider, {
+	}), $[73] = children, $[74] = expanded, $[75] = t25) : t25 = $[75];
+	let t26;
+	$[76] !== contextValue || $[77] !== t25 ? (t26 = /* @__PURE__ */ jsx(TreeContext.Provider, {
 		value: contextValue,
-		children: t26
-	}), $[77] = contextValue, $[78] = t26, $[79] = t27) : t27 = $[79];
-	let t28;
-	return $[80] !== T0 || $[81] !== expanded || $[82] !== handleClick || $[83] !== handleKeyDown || $[84] !== id || $[85] !== itemKey || $[86] !== restProps || $[87] !== setRootElement || $[88] !== t22 || $[89] !== t24 || $[90] !== t25 || $[91] !== t27 || $[92] !== tabIndex ? (t28 = /* @__PURE__ */ jsxs(T0, {
-		"data-selected": t22,
+		children: t25
+	}), $[76] = contextValue, $[77] = t25, $[78] = t26) : t26 = $[78];
+	let t27;
+	return $[79] !== T0 || $[80] !== expanded || $[81] !== handleClick || $[82] !== handleKeyDown || $[83] !== id || $[84] !== itemKey || $[85] !== restProps || $[86] !== setRootElement || $[87] !== t21 || $[88] !== t23 || $[89] !== t24 || $[90] !== t26 || $[91] !== tabIndex ? (t27 = /* @__PURE__ */ jsxs(T0, {
+		"data-selected": t21,
 		"data-ui": "TreeItem",
 		"data-tree-id": id,
 		"data-tree-key": itemKey,
 		...restProps,
 		"aria-expanded": expanded,
-		className: t24,
+		className: t23,
 		onClick: handleClick,
 		onKeyDown: handleKeyDown,
 		ref: setRootElement,
 		role: "treeitem",
 		tabIndex,
-		children: [t25, t27]
-	}), $[80] = T0, $[81] = expanded, $[82] = handleClick, $[83] = handleKeyDown, $[84] = id, $[85] = itemKey, $[86] = restProps, $[87] = setRootElement, $[88] = t22, $[89] = t24, $[90] = t25, $[91] = t27, $[92] = tabIndex, $[93] = t28) : t28 = $[93], t28;
+		children: [t24, t26]
+	}), $[79] = T0, $[80] = expanded, $[81] = handleClick, $[82] = handleKeyDown, $[83] = id, $[84] = itemKey, $[85] = restProps, $[86] = setRootElement, $[87] = t21, $[88] = t23, $[89] = t24, $[90] = t26, $[91] = tabIndex, $[92] = t27) : t27 = $[92], t27;
 }
 /**
 * @internal
@@ -1026,49 +1028,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,90 +1071,46 @@ 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-2lyi68-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-2lyi68-1"
+})({ color: "inherit" });
 function AvatarComponent(props) {
-	let $ = c(47), __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, ref, restProps, src, t0, t1, t2, title;
+	let $ = c(44), __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);
-	let color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, { avatar } = useTheme_v2(), as = ReactIs.isValidElementType(asProp) ? asProp : "div", size = _getArrayProp(sizeProp), _sizeRem = (avatar.sizes[size[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`, t3, t4;
+	let color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, { avatar } = useTheme_v2(), as = ReactIs.isValidElementType(asProp) ? asProp : "div", size = _getArrayProp(sizeProp), _sizeRem = (avatar.sizes[size[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), [prevSrc, setPrevSrc] = useState(src);
+	prevSrc !== src && (setPrevSrc(src), src && setImageFailed(!1));
+	let imageId = `avatar-image-${elementId}`, t3, t4;
 	$[14] !== arrowPosition || $[15] !== arrowPositionProp ? (t3 = () => {
 		if (arrowPosition === arrowPositionProp) return;
 		let raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
 		return () => cancelAnimationFrame(raf);
 	}, t4 = [arrowPosition, arrowPositionProp], $[14] = arrowPosition, $[15] = arrowPositionProp, $[16] = t3, $[17] = t4) : (t3 = $[16], t4 = $[17]), useEffect(t3, t4);
-	let t5, t6;
-	$[18] === src ? (t5 = $[19], t6 = $[20]) : (t5 = () => {
-		src && setImageFailed(!1);
-	}, t6 = [src], $[18] = src, $[19] = t5, $[20] = t6), useEffect(t5, t6);
-	let t7;
-	$[21] === onImageLoadError ? t7 = $[22] : (t7 = () => {
+	let t5;
+	$[18] === onImageLoadError ? t5 = $[19] : (t5 = () => {
 		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
+	}, $[18] = onImageLoadError, $[19] = t5);
+	let handleImageError = t5, T0 = StyledAvatar, t6 = typeof as == "string" ? as : void 0, t8;
+	$[20] === color ? t8 = $[21] : (t8 = /* @__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);
-	let t11;
-	$[25] !== __unstable_hideInnerStroke || $[26] !== _radius || $[27] !== _sizeRem || $[28] !== handleImageError || $[29] !== imageFailed || $[30] !== imageId || $[31] !== src ? (t11 = !imageFailed && src && /* @__PURE__ */ jsxs(AvatarImage, {
+	}), $[20] = color, $[21] = t8);
+	let t9;
+	$[22] !== __unstable_hideInnerStroke || $[23] !== _radius || $[24] !== _sizeRem || $[25] !== handleImageError || $[26] !== imageFailed || $[27] !== imageId || $[28] !== src ? (t9 = !imageFailed && src && /* @__PURE__ */ jsxs("svg", {
+		className: "_1jezl1b1",
 		viewBox: `0 0 ${_sizeRem} ${_sizeRem}`,
 		fill: "none",
 		children: [
@@ -1216,14 +1132,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,
@@ -1231,16 +1149,19 @@ function AvatarComponent(props) {
 				vectorEffect: "non-scaling-stroke"
 			})
 		]
-	}), $[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;
-	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, {
+	}), $[22] = __unstable_hideInnerStroke, $[23] = _radius, $[24] = _sizeRem, $[25] = handleImageError, $[26] = imageFailed, $[27] = imageId, $[28] = src, $[29] = t9) : t9 = $[29];
+	let t10 = (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
+		})
+	}) }), t11;
+	return $[30] !== T0 || $[31] !== arrowPosition || $[32] !== as || $[33] !== color || $[34] !== ref || $[35] !== restProps || $[36] !== size || $[37] !== status || $[38] !== t10 || $[39] !== t6 || $[40] !== t8 || $[41] !== t9 || $[42] !== title ? (t11 = /* @__PURE__ */ jsxs(T0, {
 		as,
-		"data-as": t8,
+		"data-as": t6,
 		"data-ui": "Avatar",
 		...restProps,
 		$color: color,
@@ -1251,11 +1172,11 @@ function AvatarComponent(props) {
 		ref,
 		title,
 		children: [
-			t10,
-			t11,
-			t12
+			t8,
+			t9,
+			t10
 		]
-	}), $[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, $[46] = t13) : t13 = $[46], t13;
+	}), $[30] = T0, $[31] = arrowPosition, $[32] = as, $[33] = color, $[34] = ref, $[35] = restProps, $[36] = size, $[37] = status, $[38] = t10, $[39] = t6, $[40] = t8, $[41] = t9, $[42] = title, $[43] = t11) : t11 = $[43], t11;
 }
 function _temp$2(s) {
 	return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
@@ -1312,10 +1233,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 +1242,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 +1678,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 +1729,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,