@sanity/ui 5.0.0-alpha.14 → 5.0.0-alpha.16

package/dist/index.js

@@ -81,9 +81,19 @@ function getCompositeValue(propValue, propDef, key) {
 	return compositeValue;
 }
 function suffixClassName(className) {
-	return `${className}-f8a1c2`;
+	return `${className}-d73bbc`;
 }
-const SPACE = [
+const FONT_WEIGHT = [
+	"regular",
+	"medium",
+	"semibold",
+	"bold"
+], TEXT_ALIGN = [
+	"left",
+	"center",
+	"right",
+	"justify"
+], SPACE = [
 	0,
 	1,
 	2,
@@ -156,12 +166,7 @@ const SPACE = [
 	align: {
 		type: "union",
 		className: "text",
-		values: [
-			"left",
-			"center",
-			"right",
-			"justify"
-		]
+		values: TEXT_ALIGN
 	},
 	muted: {
 		type: "boolean",
@@ -187,61 +192,22 @@ const SPACE = [
 	weight: {
 		type: "union",
 		className: "weight",
-		values: [
-			"regular",
-			"medium",
-			"semibold",
-			"bold"
-		]
+		values: FONT_WEIGHT
 	},
 	...marginProps,
 	...toneProps
-}, ICON_SIZE = [
+}, TEXT_SIZE = [
 	0,
 	1,
 	2,
 	3,
 	4
-], iconProps = {
-	icon: { type: "string" },
-	size: {
-		type: "union",
-		className: "icon-body",
-		values: ICON_SIZE
-	},
-	muted: typographyProps.muted,
-	...toneProps,
-	...marginProps
-}, iconClassName = suffixClassName("sui-Icon");
-/** @public */
-function Icon({ icon, size = 2, ...props }) {
-	let { className, style, ...rest } = getProps({
-		size,
-		...props
-	}, iconProps), iconElement = isValidElement(icon) ? icon : null, ariaLabel = props["aria-label"] || (iconElement ? iconElement.props["aria-label"] : void 0), svgProps = {
-		className: clsx(iconClassName, className, iconElement ? iconElement.props.className : void 0),
-		style: iconElement ? {
-			...iconElement.props.style,
-			...style
-		} : style,
-		"data-ui": "Icon",
-		"aria-hidden": !ariaLabel || void 0,
-		...rest
-	};
-	return iconElement ? cloneElement(iconElement, svgProps) : createElement(icon, svgProps);
-}
-const textProps = {
+], textProps = {
 	as: { type: "string" },
 	size: {
 		type: "union",
 		className: "text-body",
-		values: [
-			0,
-			1,
-			2,
-			3,
-			4
-		]
+		values: TEXT_SIZE
 	},
 	...typographyProps
 }, textClassName = suffixClassName("sui-Text");
@@ -285,6 +251,220 @@ function Text(t0) {
 		children
 	}), $[9] = T0, $[10] = children, $[11] = rest, $[12] = style, $[13] = t1, $[14] = t3) : t3 = $[14], t3;
 }
+const heightProps = {
+	height: {
+		type: "string",
+		className: "height",
+		variable: "--height"
+	},
+	minHeight: {
+		type: "string",
+		className: "min-height",
+		variable: "--min-height"
+	},
+	maxHeight: {
+		type: "string",
+		className: "max-height",
+		variable: "--max-height"
+	}
+}, AVATAR_SIZE = [
+	0,
+	1,
+	2
+], avatarProps = {
+	color: {
+		type: "union",
+		className: "avatar",
+		values: [
+			"gray",
+			"purple",
+			"magenta",
+			"red",
+			"orange",
+			"yellow",
+			"green",
+			"cyan"
+		]
+	},
+	name: { type: "string" },
+	size: {
+		type: "composite",
+		values: AVATAR_SIZE,
+		composition: {
+			size: {
+				propDef: {
+					type: "union",
+					className: "text-body",
+					values: TEXT_SIZE
+				},
+				mapping: {
+					0: 0,
+					1: 1,
+					2: 2
+				}
+			},
+			height: {
+				propDef: heightProps.height,
+				mapping: {
+					0: "19px",
+					1: "25px",
+					2: "33px"
+				}
+			}
+		}
+	},
+	src: { type: "string" }
+}, avatarClassName = suffixClassName("sui-Avatar");
+/** @public */
+function Avatar(t0) {
+	let $ = c(5), { color: t1, size: t2, ...props } = t0, { className, style, "aria-label": ariaLabel, name, src, ...rest } = getProps({
+		color: t1 === void 0 ? "gray" : t1,
+		size: t2 === void 0 ? 1 : t2,
+		...props
+	}, avatarProps), [error, setError] = useState(!1), t3 = clsx(avatarClassName, "sui-display-inline-flex sui-align-items-center sui-justify-content-center sui-radius-full sui-position-relative", className), t5 = src && !error ? /* @__PURE__ */ jsx("img", {
+		className: "sui-radius-full sui-width-full sui-height-full",
+		src,
+		alt: ariaLabel || name,
+		onError: () => setError(!0)
+	}) : /* @__PURE__ */ jsx(Text, {
+		role: "img",
+		weight: "semibold",
+		"aria-label": ariaLabel || name,
+		children: name.slice(0, 1)
+	}), t6;
+	return $[0] !== rest || $[1] !== style || $[2] !== t3 || $[3] !== t5 ? (t6 = /* @__PURE__ */ jsx("figure", {
+		className: t3,
+		style,
+		"data-ui": "Avatar",
+		...rest,
+		children: t5
+	}), $[0] = rest, $[1] = style, $[2] = t3, $[3] = t5, $[4] = t6) : t6 = $[4], t6;
+}
+const avatarCounterProps = {
+	count: { type: "number" },
+	size: {
+		type: "composite",
+		values: AVATAR_SIZE,
+		composition: {
+			size: {
+				propDef: {
+					type: "union",
+					className: "text-body",
+					values: TEXT_SIZE
+				},
+				mapping: {
+					0: 0,
+					1: 1,
+					2: 2
+				}
+			},
+			height: {
+				propDef: heightProps.height,
+				mapping: {
+					0: "19px",
+					1: "25px",
+					2: "33px"
+				}
+			}
+		}
+	}
+}, avatarCounterClassName = suffixClassName("sui-AvatarCounter");
+/** @public */
+function AvatarCounter(t0) {
+	let $ = c(14), ariaLabel, count, rest, style, t1;
+	if ($[0] !== t0) {
+		let { size: t2, ...props } = t0, { className, style: t3, "aria-label": t4, count: t5, ...t6 } = getProps({
+			size: t2 === void 0 ? 1 : t2,
+			...props
+		}, avatarCounterProps);
+		style = t3, ariaLabel = t4, count = t5, rest = t6, t1 = clsx(avatarCounterClassName, "sui-display-inline-flex sui-align-items-center sui-justify-content-center sui-radius-full sui-border", className), $[0] = t0, $[1] = ariaLabel, $[2] = count, $[3] = rest, $[4] = style, $[5] = t1;
+	} else ariaLabel = $[1], count = $[2], rest = $[3], style = $[4], t1 = $[5];
+	let t2 = ariaLabel || `+ ${count} more`, t3;
+	$[6] !== count || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsx(Text, {
+		role: "img",
+		weight: "semibold",
+		"aria-label": t2,
+		children: count
+	}), $[6] = count, $[7] = t2, $[8] = t3) : t3 = $[8];
+	let t4;
+	return $[9] !== rest || $[10] !== style || $[11] !== t1 || $[12] !== t3 ? (t4 = /* @__PURE__ */ jsx("figure", {
+		className: t1,
+		style,
+		"data-ui": "AvatarCounter",
+		...rest,
+		children: t3
+	}), $[9] = rest, $[10] = style, $[11] = t1, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
+}
+const avatarStackProps = {
+	maxLength: { type: "number" },
+	size: {
+		type: "union",
+		values: AVATAR_SIZE
+	}
+}, avatarStackClassName = suffixClassName("sui-AvatarStack");
+/** @public */
+function AvatarStack(t0) {
+	let $ = c(14), t1, t2, t3, t4, t5, t6;
+	if ($[0] !== t0) {
+		let { size: t7, ...props } = t0, { children, className, style, maxLength: maxLengthProp, size: sizeProp, ...rest } = getProps({
+			size: t7 === void 0 ? 1 : t7,
+			...props
+		}, avatarStackProps), childArray = Children.toArray(children).filter(isValidElement), length = childArray.length, maxLength = maxLengthProp ?? length, visibleAvatars = length > maxLength ? childArray.slice(length - maxLength, length) : childArray;
+		t1 = clsx(avatarStackClassName, "sui-display-flex", className), t2 = style, t3 = "AvatarStack", t4 = rest, t5 = (!length || length > maxLength) && /* @__PURE__ */ jsx("li", {
+			className: "sui-display-flex",
+			children: /* @__PURE__ */ jsx(AvatarCounter, {
+				count: length ? length - maxLength : 0,
+				size: sizeProp,
+				"aria-label": length ? `+ ${length - maxLength} more user${length - maxLength > 1 ? "s" : ""}` : "No users"
+			})
+		}), t6 = visibleAvatars.map((child) => /* @__PURE__ */ jsx("li", {
+			className: "sui-display-flex",
+			children: cloneElement(child, { size: sizeProp })
+		}, child.key)), $[0] = t0, $[1] = t1, $[2] = t2, $[3] = t3, $[4] = t4, $[5] = t5, $[6] = t6;
+	} else t1 = $[1], t2 = $[2], t3 = $[3], t4 = $[4], t5 = $[5], t6 = $[6];
+	let t7;
+	return $[7] !== t1 || $[8] !== t2 || $[9] !== t3 || $[10] !== t4 || $[11] !== t5 || $[12] !== t6 ? (t7 = /* @__PURE__ */ jsxs("ul", {
+		className: t1,
+		style: t2,
+		"data-ui": t3,
+		...t4,
+		children: [t5, t6]
+	}), $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = t5, $[12] = t6, $[13] = t7) : t7 = $[13], t7;
+}
+const ICON_SIZE = [
+	0,
+	1,
+	2,
+	3,
+	4
+], iconProps = {
+	icon: { type: "string" },
+	size: {
+		type: "union",
+		className: "icon-body",
+		values: ICON_SIZE
+	},
+	muted: typographyProps.muted,
+	...toneProps,
+	...marginProps
+}, iconClassName = suffixClassName("sui-Icon");
+/** @public */
+function Icon({ icon, size = 2, ...props }) {
+	let { className, style, ...rest } = getProps({
+		size,
+		...props
+	}, iconProps), iconElement = isValidElement(icon) ? icon : null, ariaLabel = props["aria-label"] || (iconElement ? iconElement.props["aria-label"] : void 0), svgProps = {
+		className: clsx(iconClassName, "sui-display-block", className, iconElement ? iconElement.props.className : void 0),
+		style: iconElement ? {
+			...iconElement.props.style,
+			...style
+		} : style,
+		"data-ui": "Icon",
+		"aria-hidden": !ariaLabel || void 0,
+		...rest
+	};
+	return iconElement ? cloneElement(iconElement, svgProps) : createElement(icon, svgProps);
+}
 const badgeProps = {
 	as: { type: "string" },
 	iconStart: { type: "string" },
@@ -414,22 +594,6 @@ const borderProps = {
 		className: "grid-row-end",
 		variable: "--grid-row-end"
 	}
-}, heightProps = {
-	height: {
-		type: "string",
-		className: "height",
-		variable: "--height"
-	},
-	minHeight: {
-		type: "string",
-		className: "min-height",
-		variable: "--min-height"
-	},
-	maxHeight: {
-		type: "string",
-		className: "max-height",
-		variable: "--max-height"
-	}
 }, OVERFLOW = [
 	"visible",
 	"hidden",
@@ -941,18 +1105,18 @@ function VisuallyHidden(props) {
 	}), $[6] = T0, $[7] = children, $[8] = rest, $[9] = style, $[10] = t0, $[11] = t1) : t1 = $[11], t1;
 }
 const checkboxProps = {
-	error: { type: "boolean" },
+	hasError: { type: "boolean" },
 	indeterminate: { type: "boolean" },
 	label: { type: "string" },
 	...marginProps
 }, checkboxClassName = suffixClassName("sui-Checkbox"), checkboxInputClassName = suffixClassName("sui-CheckboxInput"), checkboxMarkClassName = suffixClassName("sui-CheckboxMark");
 /** @beta */
 function Checkbox(props) {
-	let $ = c(6), inputRef = useRef(null), { className, style, disabled, error, indeterminate, label, ...rest } = getProps(props, checkboxProps);
+	let $ = c(6), inputRef = useRef(null), { className, style, disabled, hasError, indeterminate, label, ...rest } = getProps(props, checkboxProps);
 	useEffect(() => {
 		inputRef.current && (inputRef.current.indeterminate = indeterminate);
 	}, [indeterminate, inputRef]);
-	let t0 = clsx(checkboxClassName, "sui-position-relative", className), T0 = Box, t2 = clsx(checkboxMarkClassName, error && "sui-error"), t3;
+	let t0 = clsx(checkboxClassName, "sui-position-relative", className), T0 = Box, t2 = clsx(checkboxMarkClassName, hasError && "sui-error"), t3;
 	$[0] === indeterminate ? t3 = $[1] : (t3 = jsx(indeterminate ? RemoveIcon : CheckmarkIcon, {}), $[0] = indeterminate, $[1] = t3);
 	let t4;
 	return $[2] !== T0 || $[3] !== t2 || $[4] !== t3 ? (t4 = /* @__PURE__ */ jsx(T0, {
@@ -968,7 +1132,7 @@ function Checkbox(props) {
 		style,
 		"data-ui": "Checkbox",
 		disabled,
-		error,
+		error: hasError,
 		children: [
 			/* @__PURE__ */ jsx(VisuallyHidden, {
 				as: "input",
@@ -1319,7 +1483,8 @@ const eyebrowProps = {
 			1,
 			2,
 			3,
-			4
+			4,
+			5
 		]
 	},
 	...typographyProps
@@ -1372,6 +1537,8 @@ const gridProps = {
 		className: "display",
 		values: DISPLAY_GRID
 	},
+	alignItems: flexParentProps.alignItems,
+	justifyContent: flexParentProps.justifyContent,
 	gridAutoFlow: {
 		type: "union",
 		className: "grid-auto-flow",
@@ -1442,6 +1609,64 @@ function HStack(t0) {
 		...t2
 	}), $[5] = t1, $[6] = t2, $[7] = t3) : t3 = $[7], t3;
 }
+const kbdProps = { text: { type: "string" } }, kbdClassName = suffixClassName("sui-KBD");
+/** @alpha */
+function KBD(props) {
+	let $ = c(14), T0, rest, style, t0, t1, text;
+	if ($[0] !== props) {
+		let { className, style: t2, text: t3, ...t4 } = getProps(props, kbdProps);
+		style = t2, text = t3, rest = t4;
+		let kbdClasses = clsx(kbdClassName, "sui-p1 sui-radius2 sui-display-inline-block");
+		T0 = Text, t0 = "kbd", t1 = clsx(kbdClasses, className), $[0] = props, $[1] = T0, $[2] = rest, $[3] = style, $[4] = t0, $[5] = t1, $[6] = text;
+	} else T0 = $[1], rest = $[2], style = $[3], t0 = $[4], t1 = $[5], text = $[6];
+	let t2;
+	return $[7] !== T0 || $[8] !== rest || $[9] !== style || $[10] !== t0 || $[11] !== t1 || $[12] !== text ? (t2 = /* @__PURE__ */ jsx(T0, {
+		as: t0,
+		className: t1,
+		style,
+		"data-ui": "KBD",
+		size: 0,
+		weight: "semibold",
+		muted: !0,
+		trim: !0,
+		...rest,
+		children: text
+	}), $[7] = T0, $[8] = rest, $[9] = style, $[10] = t0, $[11] = t1, $[12] = text, $[13] = t2) : t2 = $[13], t2;
+}
+const hotkeysProps = { keys: { type: "string" } }, hotkeysClassName = suffixClassName("sui-Hotkeys");
+/** @alpha */
+function Hotkeys(t0) {
+	let $ = c(13), keys, rest, style, t1, t2;
+	if ($[0] !== t0) {
+		t2 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let { keys: t3, ...props } = t0;
+			keys = t3;
+			let { className, style: t4, ...t5 } = getProps(props, hotkeysProps);
+			if (style = t4, rest = t5, !keys || keys.length === 0) {
+				t2 = null;
+				break bb0;
+			}
+			let hotkeysClasses = clsx(hotkeysClassName, "sui-display-inline-flex");
+			t1 = clsx(hotkeysClasses, className);
+		}
+		$[0] = t0, $[1] = keys, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2;
+	} else keys = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5];
+	if (t2 !== Symbol.for("react.early_return_sentinel")) return t2;
+	let t3;
+	$[6] === keys ? t3 = $[7] : (t3 = keys.map(_temp$1), $[6] = keys, $[7] = t3);
+	let t4;
+	return $[8] !== rest || $[9] !== style || $[10] !== t1 || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsx("kbd", {
+		className: t1,
+		style,
+		"data-ui": "Hotkeys",
+		...rest,
+		children: t3
+	}), $[8] = rest, $[9] = style, $[10] = t1, $[11] = t3, $[12] = t4) : t4 = $[12], t4;
+}
+function _temp$1(key) {
+	return /* @__PURE__ */ jsx(KBD, { text: key }, key);
+}
 const indicatorProps = {
 	as: { type: "string" },
 	label: { type: "string" },
@@ -1934,7 +2159,7 @@ function PopoverRoot(t0) {
 }
 /** @beta */
 const Popover = Object.assign(PopoverRoot, { forwardsTriggerProps: !0 }), radioProps = {
-	error: { type: "boolean" },
+	hasError: { type: "boolean" },
 	label: { type: "string" },
 	...marginProps
 }, radioClassName = suffixClassName("sui-Radio"), radioInputClassName = suffixClassName("sui-RadioInput"), radioMarkClassName = suffixClassName("sui-RadioMark");
@@ -1942,14 +2167,14 @@ const Popover = Object.assign(PopoverRoot, { forwardsTriggerProps: !0 }), radioP
 function Radio(props) {
 	let $ = c(26), T0, T1, label, t0, t1, t2, t3, t4, t5, t6, t7;
 	if ($[0] !== props) {
-		let { className, style, label: t8, disabled, error, ...rest } = getProps(props, radioProps);
-		label = t8, T1 = Label, t2 = clsx(radioClassName, "sui-position-relative", className), t3 = style, t4 = "Radio", t5 = disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, {
+		let { className, style, label: t8, disabled, hasError, ...rest } = getProps(props, radioProps);
+		label = t8, T1 = Label, t2 = clsx(radioClassName, "sui-position-relative", className), t3 = style, t4 = "Radio", t5 = disabled, t6 = hasError, t7 = /* @__PURE__ */ jsx(VisuallyHidden, {
 			as: "input",
 			type: "radio",
 			className: radioInputClassName,
 			disabled,
 			...rest
-		}), T0 = Box, t0 = "span", t1 = clsx(radioMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+		}), T0 = Box, t0 = "span", t1 = clsx(radioMarkClassName, hasError && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
 	} else T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
 	let t8;
 	$[12] !== T0 || $[13] !== t0 || $[14] !== t1 ? (t8 = /* @__PURE__ */ jsx(T0, {
@@ -2059,7 +2284,7 @@ function SkipToContent(props) {
 	}), $[10] = T0, $[11] = rest, $[12] = style, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4) : t4 = $[17], t4;
 }
 const switchProps = {
-	error: { type: "boolean" },
+	hasError: { type: "boolean" },
 	label: { type: "string" },
 	...marginProps
 }, switchClassName = suffixClassName("sui-Switch"), switchInputClassName = suffixClassName("sui-SwitchInput"), switchMarkClassName = suffixClassName("sui-SwitchMark");
@@ -2067,15 +2292,15 @@ const switchProps = {
 function Switch(props) {
 	let $ = c(26), T0, T1, label, t0, t1, t2, t3, t4, t5, t6, t7;
 	if ($[0] !== props) {
-		let { className, style, disabled, error, label: t8, ...rest } = getProps(props, switchProps);
-		label = t8, T1 = Label, t2 = clsx(switchClassName, "sui-position-relative", className), t3 = style, t4 = "Switch", t5 = props.disabled, t6 = error, t7 = /* @__PURE__ */ jsx(VisuallyHidden, {
+		let { className, style, disabled, hasError, label: t8, ...rest } = getProps(props, switchProps);
+		label = t8, T1 = Label, t2 = clsx(switchClassName, "sui-position-relative", className), t3 = style, t4 = "Switch", t5 = props.disabled, t6 = hasError, t7 = /* @__PURE__ */ jsx(VisuallyHidden, {
 			as: "input",
 			type: "checkbox",
 			role: "switch",
 			className: switchInputClassName,
 			disabled,
 			...rest
-		}), T0 = Flex, t0 = "span", t1 = clsx(switchMarkClassName, error && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
+		}), T0 = Flex, t0 = "span", t1 = clsx(switchMarkClassName, hasError && "sui-error"), $[0] = props, $[1] = T0, $[2] = T1, $[3] = label, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = t5, $[10] = t6, $[11] = t7;
 	} else T0 = $[1], T1 = $[2], label = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], t5 = $[9], t6 = $[10], t7 = $[11];
 	let t8;
 	$[12] !== T0 || $[13] !== t0 || $[14] !== t1 ? (t8 = /* @__PURE__ */ jsx(T0, {
@@ -2099,6 +2324,38 @@ function Switch(props) {
 		]
 	}), $[16] = T1, $[17] = label, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 }
+const textAreaProps = {
+	autoResize: {
+		type: "boolean",
+		className: "field-sizing-content"
+	},
+	hasError: { type: "boolean" },
+	maxHeight: heightProps.maxHeight,
+	...formElementDensityProps
+}, textAreaClassName = suffixClassName("sui-TextArea");
+/** @public */
+function TextArea(t0) {
+	let $ = c(10), hasError, rest, style, t1;
+	if ($[0] !== t0) {
+		let { autoResize, density: t2, hasError: t3, rows: t4, ...props } = t0;
+		hasError = t3;
+		let { className, style: t5, ...t6 } = getProps({
+			autoResize,
+			density: t2 === void 0 ? "regular" : t2,
+			rows: t4 === void 0 ? 5 : t4,
+			...props
+		}, textAreaProps);
+		style = t5, rest = t6, t1 = clsx(textAreaClassName, "sui-radius2", "sui-width-full", className), $[0] = t0, $[1] = hasError, $[2] = rest, $[3] = style, $[4] = t1;
+	} else hasError = $[1], rest = $[2], style = $[3], t1 = $[4];
+	let textAreaClasses = t1, t2 = hasError || void 0, t3;
+	return $[5] !== rest || $[6] !== style || $[7] !== t2 || $[8] !== textAreaClasses ? (t3 = /* @__PURE__ */ jsx("textarea", {
+		className: textAreaClasses,
+		style,
+		"data-ui": "TextArea",
+		...rest,
+		"aria-invalid": t2
+	}), $[5] = rest, $[6] = style, $[7] = t2, $[8] = textAreaClasses, $[9] = t3) : t3 = $[9], t3;
+}
 const textInputProps = {
 	hasError: { type: "boolean" },
 	...formElementDensityProps
@@ -2107,8 +2364,10 @@ const textInputProps = {
 function TextInput(t0) {
 	let $ = c(12), hasError, rest, style, t1, type;
 	if ($[0] !== t0) {
-		let { density: t2, hasError: t3, type: t4, ...props } = t0, density = t2 === void 0 ? "regular" : t2;
-		hasError = t3 !== void 0 && t3, type = t4 === void 0 ? "text" : t4;
+		let { density: t2, hasError: t3, type: t4, ...props } = t0;
+		hasError = t3;
+		let density = t2 === void 0 ? "regular" : t2;
+		type = t4 === void 0 ? "text" : t4;
 		let { className, style: t5, ...t6 } = getProps({
 			density,
 			...props
@@ -2207,6 +2466,6 @@ function TooltipGroup(props) {
 		children
 	}), $[8] = Component, $[9] = children, $[10] = handleBlur, $[11] = handleMouseLeave, $[12] = handleTransitionEnd, $[13] = rest, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
 }
-export { Badge, Box, Button, Card, Checkbox, Code, Container, Dialog, Divider, Eyebrow, Flex, Grid, HStack, Heading, Icon, IconButton, Indicator, IndicatorStack, Inline, Label, Link, List, Popover, PressArea, Radio, Select, SkipToContent, Spinner, Switch, Text, TextInput, Tooltip, TooltipGroup, VStack, VisuallyHidden, useIsClient };
+export { Avatar, AvatarCounter, AvatarStack, Badge, Box, Button, Card, Checkbox, Code, Container, Dialog, Divider, Eyebrow, Flex, Grid, HStack, Heading, Hotkeys, Icon, IconButton, Indicator, IndicatorStack, Inline, KBD, Label, Link, List, Popover, PressArea, Radio, Select, SkipToContent, Spinner, Switch, Text, TextArea, TextInput, Tooltip, TooltipGroup, VStack, VisuallyHidden, useIsClient };
 
 //# sourceMappingURL=index.js.map