@sanity/ui 4.2.0 → 4.2.2

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 textAreaRoot, s as responsiveInputPaddingIconRightStyle, t as TextInput, u as _hasFocus } from "./textInput-pSfQjkmx.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-fGZVEKGs.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-CUKYjJYq.js";
+import { t as Flex } from "./flex-CpiAc-4D.js";
+import { a as responsiveTextAlignStyle, i as responsiveTextFont, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-SbGBZ0x3.js";
 import { t as responsiveFont } from "./responsiveFont-CilwaORG.js";
-import { n as Spinner, t as Button } from "./button-BNyKSDyA.js";
+import { n as Spinner, t as Button } from "./button-Wii-24Xu.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-BmX6qbAS.js";
+import { a as useBoundaryElement, i as PortalContext, n as Portal, o as BoundaryElementContext, r as usePortal, t as Arrow } from "./arrow-CZ-Lw1QO.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-CaHsQlsO.js";
-import { t as Layer } from "./layer-Bl5R3uNR.js";
-import { t as Grid } from "./grid-6JSgMj1O.js";
+import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-DEMStMQ5.js";
+import { t as Layer } from "./layer-B0tlPeLT.js";
+import { t as Grid } from "./grid-BVZEj_Xe.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";
@@ -44,7 +44,7 @@ function responsiveContainerWidthStyle(props) {
 }
 const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "StyledContainer",
-	componentId: "sc-bmdunn-0"
+	componentId: "sc-c2h24p-0"
 })(containerBaseStyle, responsiveContainerWidthStyle);
 function ContainerComponent(props) {
 	let $ = c(12), as, ref, restProps, t0;
@@ -749,67 +749,63 @@ function TreeGroup(props) {
 var treeItem = "_14vatmh0";
 const StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
 	displayName: "StyledTreeItem",
-	componentId: "sc-inyvr0-0"
+	componentId: "sc-mgt2q1-0"
 })(treeItemRootColorStyle), TreeItemBox = /* @__PURE__ */ styled.a.withConfig({
 	displayName: "TreeItemBox",
-	componentId: "sc-inyvr0-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,
@@ -817,15 +813,15 @@ function TreeItem(props) {
 			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, {
+	}), $[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,
@@ -834,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,
@@ -875,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
@@ -997,7 +993,7 @@ function labelBaseStyle(props) {
 }
 const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledLabel",
-	componentId: "sc-43585o-0"
+	componentId: "sc-ws9v9t-0"
 })(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
 function LabelComponent(props) {
 	let $ = c(27), accent, align, childrenProp, ref, restProps, t0, t1, textOverflow, weight;
@@ -1078,30 +1074,28 @@ function responsiveAvatarSizeStyle(props) {
 var avatarArrow = "_1jezl1b0", avatarStack = "_1jezl1b4";
 const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledAvatar",
-	componentId: "sc-3dcnr0-0"
+	componentId: "sc-2lyi68-0"
 })(responsiveAvatarSizeStyle, avatarRootStyle), InitialsLabel = /* @__PURE__ */ styled(Label).withConfig({
 	displayName: "InitialsLabel",
-	componentId: "sc-3dcnr0-1"
+	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("div", {
+	}, $[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",
@@ -1113,9 +1107,9 @@ function AvatarComponent(props) {
 				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("svg", {
+	}), $[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",
@@ -1155,8 +1149,8 @@ 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("div", {
+	}), $[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",
@@ -1164,10 +1158,10 @@ function AvatarComponent(props) {
 			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, {
+	}) }), 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,
@@ -1178,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;
@@ -1410,7 +1404,7 @@ function headingBaseStyle(props) {
 }
 const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledHeading",
-	componentId: "sc-95f8ng-0"
+	componentId: "sc-r76jut-0"
 })(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
 function HeadingComponent(props) {
 	let $ = c(27), align, childrenProp, ref, restProps, t0, t1, t2, textOverflow, weight;