@sanity/ui 4.0.7 → 4.1.0

package/dist/index.js

@@ -1,25 +1,26 @@
 "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 textInputRootStyle, c as useCustomValidity, d as focusFirstDescendant, f as focusLastDescendant, h as _raf2, i as textInputRepresentationStyle, l as _hasFocus, m as _raf, n as textInputBaseStyle, o as responsiveInputPaddingIconRightStyle, p as isFocusable, r as textInputFontSizeStyle, s as responsiveInputPaddingStyle, t as TextInput, u as attemptFocus } from "./textInput-B6ZZJSOj.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-Bu3QuADZ.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-jUJIz8mh.js";
 import { t as Flex } from "./flex-CySCBzQm.js";
 import { a as responsiveTextAlignStyle, i as responsiveTextFont, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-BGFEokua.js";
 import { t as responsiveFont } from "./responsiveFont-CilwaORG.js";
-import { n as Spinner, t as Button } from "./button-DQH2KIbq.js";
+import { n as Spinner, t as Button } from "./button-D3iEd7Je.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-CL8xmdbg.js";
+import { a as useBoundaryElement, i as PortalContext, n as Portal, o as BoundaryElementContext, r as usePortal, t as Arrow } from "./arrow-C6TlkggA.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-BA3gEfyI.js";
-import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-BPlacpG8.js";
-import { t as Layer } from "./layer-DGn7KJIB.js";
+import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-Bi6Q5963.js";
+import { t as Layer } from "./layer-BK7xWHcE.js";
 import { t as Grid } from "./grid-I2TNptX-.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 { css, keyframes, styled } from "styled-components";
+import { css, styled } from "styled-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import ReactIs from "react-is";
 import { CloseIcon } from "@sanity/icons/Close";
@@ -67,25 +68,12 @@ function ContainerComponent(props) {
 const Container = ContainerComponent;
 function dialogStyle({ theme }) {
 	let { color } = getTheme_v2(theme);
-	return {
-		"&:not([hidden])": { display: "flex" },
-		top: 0,
-		left: 0,
-		right: 0,
-		bottom: 0,
-		alignItems: "center",
-		justifyContent: "center",
-		outline: "none",
-		background: color.backdrop
-	};
+	return { background: color.backdrop };
 }
 function responsiveDialogPositionStyle(props) {
 	let { media } = getTheme_v2(props.theme);
 	return _responsive(media, props.$position, (position) => ({ "&&": { position } }));
 }
-function animationDialogStyle(props) {
-	return props.$animate ? css`@keyframes zoomIn{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}animation:fadeIn 200ms ease-out;& > [data-ui='DialogCard']{animation:zoomIn 200ms ease-out;}` : css``;
-}
 /**
 * @internal
 */
@@ -97,31 +85,14 @@ const DialogContext = createGlobalScopedContext("@sanity/ui/context/dialog", { v
 function useDialog() {
 	return useContext(DialogContext);
 }
+var dialogCard = "_1a85unk5", dialogContainer = "_1a85unk4", dialogContent = "_1a85unk8", dialogLayer = "_1a85unk0", dialogLayout = "_1a85unk6";
 function isTargetWithinScope(boundaryElement, portalElement, target) {
 	return !boundaryElement || !portalElement || containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
 const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
 	displayName: "StyledDialog",
-	componentId: "sc-1shthr-0"
-})(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container).withConfig({
-	displayName: "DialogContainer",
-	componentId: "sc-1shthr-1"
-})`&:not([hidden]){display:flex;}width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;`, DialogCardRoot = styled(Card).withConfig({
-	displayName: "DialogCardRoot",
-	componentId: "sc-1shthr-2"
-})`&:not([hidden]){display:flex;}width:100%;min-height:0;max-height:100%;overflow:hidden;overflow:clip;`, DialogLayout = styled(Flex).withConfig({
-	displayName: "DialogLayout",
-	componentId: "sc-1shthr-3"
-})`flex:1;min-height:0;width:100%;`, DialogHeader = styled(Box).withConfig({
-	displayName: "DialogHeader",
-	componentId: "sc-1shthr-4"
-})`position:relative;z-index:2;`, DialogContent = styled(Box).withConfig({
-	displayName: "DialogContent",
-	componentId: "sc-1shthr-5"
-})`position:relative;z-index:1;overflow:auto;outline:none;`, DialogFooter = styled(Box).withConfig({
-	displayName: "DialogFooter",
-	componentId: "sc-1shthr-6"
-})`position:relative;z-index:3;`;
+	componentId: "sc-pe1n4l-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;
 	$[0] === radiusProp ? t0 = $[1] : (t0 = _getArrayProp(radiusProp), $[0] = radiusProp, $[1] = t0);
@@ -151,42 +122,51 @@ function DialogCard(props) {
 	let t9;
 	$[21] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => [ref.current], $[21] = t9) : t9 = $[21], useClickOutsideEvent(t8, t9);
 	let t10;
-	$[22] !== header || $[23] !== labelId || $[24] !== onClose || $[25] !== showCloseButton || $[26] !== showHeader ? (t10 = showHeader && /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(Flex, {
-		align: "flex-start",
-		padding: 3,
-		children: [/* @__PURE__ */ jsx(Box, {
-			flex: 1,
-			padding: 2,
-			children: header && /* @__PURE__ */ jsx(Text, {
-				id: labelId,
-				size: 1,
-				weight: "semibold",
-				children: header
-			})
-		}), showCloseButton && /* @__PURE__ */ jsx(Box, {
-			flex: "none",
-			children: /* @__PURE__ */ jsx(Button, {
-				"aria-label": "Close dialog",
-				disabled: !onClose,
-				icon: CloseIcon,
-				mode: "bleed",
-				onClick: onClose,
-				padding: 2
-			})
-		})]
-	}) }), $[22] = header, $[23] = labelId, $[24] = onClose, $[25] = showCloseButton, $[26] = showHeader, $[27] = t10) : t10 = $[27];
+	$[22] !== header || $[23] !== labelId || $[24] !== onClose || $[25] !== showCloseButton || $[26] !== showHeader ? (t10 = showHeader && /* @__PURE__ */ jsx(Box, {
+		className: "_1a85unk7",
+		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "flex-start",
+			padding: 3,
+			children: [/* @__PURE__ */ jsx(Box, {
+				flex: 1,
+				padding: 2,
+				children: header && /* @__PURE__ */ jsx(Text, {
+					id: labelId,
+					size: 1,
+					weight: "semibold",
+					children: header
+				})
+			}), showCloseButton && /* @__PURE__ */ jsx(Box, {
+				flex: "none",
+				children: /* @__PURE__ */ jsx(Button, {
+					"aria-label": "Close dialog",
+					disabled: !onClose,
+					icon: CloseIcon,
+					mode: "bleed",
+					onClick: onClose,
+					padding: 2
+				})
+			})]
+		})
+	}), $[22] = header, $[23] = labelId, $[24] = onClose, $[25] = showCloseButton, $[26] = showHeader, $[27] = t10) : t10 = $[27];
 	let t11;
-	$[28] === children ? t11 = $[29] : (t11 = /* @__PURE__ */ jsx(DialogContent, {
+	$[28] === children ? t11 = $[29] : (t11 = /* @__PURE__ */ jsx(Box, {
+		className: dialogContent,
 		flex: 1,
 		ref: contentRef,
 		tabIndex: -1,
 		children
 	}), $[28] = children, $[29] = t11);
 	let t12;
-	$[30] === footer ? t12 = $[31] : (t12 = footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer }), $[30] = footer, $[31] = t12);
+	$[30] === footer ? t12 = $[31] : (t12 = footer && /* @__PURE__ */ jsx(Box, {
+		className: "_1a85unk9",
+		children: footer
+	}), $[30] = footer, $[31] = t12);
 	let t13;
-	$[32] !== t10 || $[33] !== t11 || $[34] !== t12 ? (t13 = /* @__PURE__ */ jsxs(DialogLayout, {
+	$[32] !== t10 || $[33] !== t11 || $[34] !== t12 ? (t13 = /* @__PURE__ */ jsxs(Flex, {
+		className: dialogLayout,
 		direction: "column",
+		flex: 1,
 		children: [
 			t10,
 			t11,
@@ -194,7 +174,9 @@ function DialogCard(props) {
 		]
 	}), $[32] = t10, $[33] = t11, $[34] = t12, $[35] = t13) : t13 = $[35];
 	let t14;
-	$[36] !== radius || $[37] !== scheme || $[38] !== shadow || $[39] !== t13 ? (t14 = /* @__PURE__ */ jsx(DialogCardRoot, {
+	$[36] !== radius || $[37] !== scheme || $[38] !== shadow || $[39] !== t13 ? (t14 = /* @__PURE__ */ jsx(Card, {
+		className: dialogCard,
+		display: "flex",
 		radius,
 		ref,
 		scheme,
@@ -202,8 +184,10 @@ function DialogCard(props) {
 		children: t13
 	}), $[36] = radius, $[37] = scheme, $[38] = shadow, $[39] = t13, $[40] = t14) : t14 = $[40];
 	let t15;
-	return $[41] !== t14 || $[42] !== width ? (t15 = /* @__PURE__ */ jsx(DialogContainer, {
+	return $[41] !== t14 || $[42] !== width ? (t15 = /* @__PURE__ */ jsx(Container, {
+		className: dialogContainer,
 		"data-ui": "DialogCard",
+		display: "flex",
 		width,
 		children: t14
 	}), $[41] = t14, $[42] = width, $[43] = t15) : t15 = $[43], t15;
@@ -214,20 +198,20 @@ function DialogCard(props) {
 * @public
 */
 function Dialog(props) {
-	let $ = c(71), dialog = useDialog(), { layer } = useTheme_v2(), _positionProp, _zOffsetProp, children, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, ref, restProps, scheme, t0, t1, t2, t3, t4, t5, t6;
-	$[0] === props ? (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], contentRef = $[4], footer = $[5], header = $[6], id = $[7], onActivate = $[8], onClickOutside = $[9], onClose = $[10], onFocus = $[11], portalProp = $[12], ref = $[13], restProps = $[14], scheme = $[15], t0 = $[16], t1 = $[17], t2 = $[18], t3 = $[19], t4 = $[20], t5 = $[21], t6 = $[22]) : ({__unstable_autoFocus: t0, __unstable_hideCloseButton: t1, cardRadius: t2, cardShadow: t3, children, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, padding: t4, portal: portalProp, position: _positionProp, ref, scheme, width: t5, zOffset: _zOffsetProp, animate: t6, ...restProps} = props, $[0] = props, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = contentRef, $[5] = footer, $[6] = header, $[7] = id, $[8] = onActivate, $[9] = onClickOutside, $[10] = onClose, $[11] = onFocus, $[12] = portalProp, $[13] = ref, $[14] = restProps, $[15] = scheme, $[16] = t0, $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6);
+	let $ = c(75), dialog = useDialog(), { layer } = useTheme_v2(), _positionProp, _zOffsetProp, children, className, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, ref, restProps, scheme, t0, t1, t2, t3, t4, t5, t6;
+	$[0] === props ? (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], className = $[4], contentRef = $[5], footer = $[6], header = $[7], id = $[8], onActivate = $[9], onClickOutside = $[10], onClose = $[11], onFocus = $[12], portalProp = $[13], ref = $[14], restProps = $[15], scheme = $[16], t0 = $[17], t1 = $[18], t2 = $[19], t3 = $[20], t4 = $[21], t5 = $[22], t6 = $[23]) : ({__unstable_autoFocus: t0, __unstable_hideCloseButton: t1, cardRadius: t2, cardShadow: t3, children, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, padding: t4, portal: portalProp, position: _positionProp, ref, scheme, width: t5, zOffset: _zOffsetProp, animate: t6, className, ...restProps} = props, $[0] = props, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = className, $[5] = contentRef, $[6] = footer, $[7] = header, $[8] = id, $[9] = onActivate, $[10] = onClickOutside, $[11] = onClose, $[12] = onFocus, $[13] = portalProp, $[14] = ref, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t2, $[20] = t3, $[21] = t4, $[22] = t5, $[23] = t6);
 	let autoFocus = t0 === void 0 || t0, hideCloseButton = t1 !== void 0 && t1, cardRadiusProp = t2 === void 0 ? 4 : t2, cardShadow = t3 === void 0 ? 3 : t3, paddingProp = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, _animate = t6 !== void 0 && t6, positionProp = _positionProp ?? (dialog.position || "fixed"), zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset), animate = !usePrefersReducedMotion() && _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, t7;
-	$[23] === cardRadiusProp ? t7 = $[24] : (t7 = _getArrayProp(cardRadiusProp), $[23] = cardRadiusProp, $[24] = t7);
+	$[24] === cardRadiusProp ? t7 = $[25] : (t7 = _getArrayProp(cardRadiusProp), $[24] = cardRadiusProp, $[25] = t7);
 	let cardRadius = t7, t8;
-	$[25] === paddingProp ? t8 = $[26] : (t8 = _getArrayProp(paddingProp), $[25] = paddingProp, $[26] = t8);
+	$[26] === paddingProp ? t8 = $[27] : (t8 = _getArrayProp(paddingProp), $[26] = paddingProp, $[27] = t8);
 	let padding = t8, t9;
-	$[27] === positionProp ? t9 = $[28] : (t9 = _getArrayProp(positionProp), $[27] = positionProp, $[28] = t9);
+	$[28] === positionProp ? t9 = $[29] : (t9 = _getArrayProp(positionProp), $[28] = positionProp, $[29] = t9);
 	let position = t9, t10;
-	$[29] === widthProp ? t10 = $[30] : (t10 = _getArrayProp(widthProp), $[29] = widthProp, $[30] = t10);
+	$[30] === widthProp ? t10 = $[31] : (t10 = _getArrayProp(widthProp), $[30] = widthProp, $[31] = t10);
 	let width = t10, t11;
-	$[31] === zOffsetProp ? t11 = $[32] : (t11 = _getArrayProp(zOffsetProp), $[31] = zOffsetProp, $[32] = t11);
+	$[32] === zOffsetProp ? t11 = $[33] : (t11 = _getArrayProp(zOffsetProp), $[32] = zOffsetProp, $[33] = t11);
 	let zOffset = t11, preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), t12;
-	$[33] === onFocus ? t12 = $[34] : (t12 = (event) => {
+	$[34] === onFocus ? t12 = $[35] : (t12 = (event) => {
 		onFocus?.(event);
 		let target = event.target, cardElement = cardRef.current;
 		if (cardElement && target === preDivRef.current) {
@@ -239,9 +223,9 @@ function Dialog(props) {
 			return;
 		}
 		isHTMLElement(event.target) && (focusedElementRef.current = event.target);
-	}, $[33] = onFocus, $[34] = t12);
+	}, $[34] = onFocus, $[35] = t12);
 	let handleFocus = t12, labelId = `${id}_label`, rootClickTimeoutRef = useRef(void 0), t13;
-	$[35] !== boundaryElement || $[36] !== portalElement ? (t13 = () => {
+	$[36] !== boundaryElement || $[37] !== portalElement ? (t13 = () => {
 		rootClickTimeoutRef.current && clearTimeout(rootClickTimeoutRef.current), rootClickTimeoutRef.current = setTimeout(() => {
 			let activeElement = document.activeElement;
 			if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
@@ -254,14 +238,16 @@ function Dialog(props) {
 				target_0.focus();
 			}
 		}, 0);
-	}, $[35] = boundaryElement, $[36] = portalElement, $[37] = t13) : t13 = $[37];
-	let handleRootClick = t13, t14;
-	$[38] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx("div", {
+	}, $[36] = boundaryElement, $[37] = portalElement, $[38] = t13) : t13 = $[38];
+	let handleRootClick = t13, t14 = animate && "_1a85unk3", t15;
+	$[39] !== className || $[40] !== t14 ? (t15 = clsx(dialogLayer, t14, className), $[39] = className, $[40] = t14, $[41] = t15) : t15 = $[41];
+	let t16;
+	$[42] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx("div", {
 		ref: preDivRef,
 		tabIndex: 0
-	}), $[38] = t14) : t14 = $[38];
-	let t15;
-	$[39] !== autoFocus || $[40] !== cardRadius || $[41] !== cardShadow || $[42] !== children || $[43] !== contentRef || $[44] !== footer || $[45] !== header || $[46] !== hideCloseButton || $[47] !== id || $[48] !== onClickOutside || $[49] !== onClose || $[50] !== portalProp || $[51] !== scheme || $[52] !== width ? (t15 = /* @__PURE__ */ jsx(DialogCard, {
+	}), $[42] = t16) : t16 = $[42];
+	let t17;
+	$[43] !== autoFocus || $[44] !== cardRadius || $[45] !== cardShadow || $[46] !== children || $[47] !== contentRef || $[48] !== footer || $[49] !== header || $[50] !== hideCloseButton || $[51] !== id || $[52] !== onClickOutside || $[53] !== onClose || $[54] !== portalProp || $[55] !== scheme || $[56] !== width ? (t17 = /* @__PURE__ */ jsx(DialogCard, {
 		__unstable_autoFocus: autoFocus,
 		__unstable_hideCloseButton: hideCloseButton,
 		contentRef,
@@ -277,19 +263,19 @@ function Dialog(props) {
 		shadow: cardShadow,
 		width,
 		children
-	}), $[39] = autoFocus, $[40] = cardRadius, $[41] = cardShadow, $[42] = children, $[43] = contentRef, $[44] = footer, $[45] = header, $[46] = hideCloseButton, $[47] = id, $[48] = onClickOutside, $[49] = onClose, $[50] = portalProp, $[51] = scheme, $[52] = width, $[53] = t15) : t15 = $[53];
-	let t16;
-	$[54] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx("div", {
+	}), $[43] = autoFocus, $[44] = cardRadius, $[45] = cardShadow, $[46] = children, $[47] = contentRef, $[48] = footer, $[49] = header, $[50] = hideCloseButton, $[51] = id, $[52] = onClickOutside, $[53] = onClose, $[54] = portalProp, $[55] = scheme, $[56] = width, $[57] = t17) : t17 = $[57];
+	let t18;
+	$[58] === Symbol.for("react.memo_cache_sentinel") ? (t18 = /* @__PURE__ */ jsx("div", {
 		ref: postDivRef,
 		tabIndex: 0
-	}), $[54] = t16) : t16 = $[54];
-	let t17;
-	$[55] !== animate || $[56] !== handleFocus || $[57] !== handleRootClick || $[58] !== id || $[59] !== labelId || $[60] !== onActivate || $[61] !== padding || $[62] !== position || $[63] !== ref || $[64] !== restProps || $[65] !== t15 || $[66] !== zOffset ? (t17 = /* @__PURE__ */ jsxs(StyledDialog, {
+	}), $[58] = t18) : t18 = $[58];
+	let t19;
+	$[59] !== handleFocus || $[60] !== handleRootClick || $[61] !== id || $[62] !== labelId || $[63] !== onActivate || $[64] !== padding || $[65] !== position || $[66] !== ref || $[67] !== restProps || $[68] !== t15 || $[69] !== t17 || $[70] !== zOffset ? (t19 = /* @__PURE__ */ jsxs(StyledDialog, {
 		...restProps,
-		$animate: animate,
 		$padding: padding,
 		$position: position,
 		"aria-labelledby": labelId,
+		className: t15,
 		"aria-modal": !0,
 		"data-ui": "Dialog",
 		id,
@@ -300,16 +286,16 @@ function Dialog(props) {
 		role: "dialog",
 		zOffset,
 		children: [
-			t14,
-			t15,
-			t16
+			t16,
+			t17,
+			t18
 		]
-	}), $[55] = animate, $[56] = handleFocus, $[57] = handleRootClick, $[58] = id, $[59] = labelId, $[60] = onActivate, $[61] = padding, $[62] = position, $[63] = ref, $[64] = restProps, $[65] = t15, $[66] = zOffset, $[67] = t17) : t17 = $[67];
-	let t18;
-	return $[68] !== portalProp || $[69] !== t17 ? (t18 = /* @__PURE__ */ jsx(Portal, {
+	}), $[59] = handleFocus, $[60] = handleRootClick, $[61] = id, $[62] = labelId, $[63] = onActivate, $[64] = padding, $[65] = position, $[66] = ref, $[67] = restProps, $[68] = t15, $[69] = t17, $[70] = zOffset, $[71] = t19) : t19 = $[71];
+	let t20;
+	return $[72] !== portalProp || $[73] !== t19 ? (t20 = /* @__PURE__ */ jsx(Portal, {
 		__unstable_name: portalProp,
-		children: t17
-	}), $[68] = portalProp, $[69] = t17, $[70] = t18) : t18 = $[70], t18;
+		children: t19
+	}), $[72] = portalProp, $[73] = t19, $[74] = t20) : t20 = $[74], t20;
 }
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
@@ -328,19 +314,20 @@ function DialogProvider(props) {
 		children
 	}), $[3] = children, $[4] = contextValue, $[5] = t1) : t1 = $[5], t1;
 }
-const keyframe = keyframes`0%{background-position:100%;}100%{background-position:-100%;}`, animation = css`background-image:linear-gradient( to right,var(--card-skeleton-color-from),var(--card-skeleton-color-to),var(--card-skeleton-color-from),var(--card-skeleton-color-from),var(--card-skeleton-color-from) );background-position:100%;background-size:200% 100%;background-attachment:fixed;animation-name:${keyframe};animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-duration:2000ms;`, skeletonStyle = css`opacity:${({ $visible }) => +!!$visible};transition:opacity 200ms ease-in;@media screen and (prefers-reduced-motion:no-preference){${({ $animated }) => $animated ? animation : css`background-color:var(--card-skeleton-color-from);`}}@media screen and (prefers-reduced-motion:reduce){background-color:var(--card-skeleton-color-from);}`, StyledSkeleton$1 = /* @__PURE__ */ styled(Box).withConfig({
+var skeleton = "fnwpv81", skeletonAnimated = "fnwpv84", skeletonHidden = "fnwpv83", skeletonStatic = "fnwpv85", skeletonVisible = "fnwpv82";
+const StyledSkeleton$1 = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "StyledSkeleton",
-	componentId: "sc-o7fi9r-0"
-})(responsiveRadiusStyle, skeletonStyle);
+	componentId: "sc-qq1bsx-0"
+})(responsiveRadiusStyle);
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
 function Skeleton(props) {
-	let $ = c(17), delay, radius, ref, restProps, t0;
-	$[0] === props ? (delay = $[1], radius = $[2], ref = $[3], restProps = $[4], t0 = $[5]) : ({animated: t0, delay, radius, ref, ...restProps} = props, $[0] = props, $[1] = delay, $[2] = radius, $[3] = ref, $[4] = restProps, $[5] = t0);
+	let $ = c(21), className, delay, radius, ref, restProps, t0;
+	$[0] === props ? (className = $[1], delay = $[2], radius = $[3], ref = $[4], restProps = $[5], t0 = $[6]) : ({animated: t0, className, delay, radius, ref, ...restProps} = props, $[0] = props, $[1] = className, $[2] = delay, $[3] = radius, $[4] = ref, $[5] = restProps, $[6] = t0);
 	let animated = t0 !== void 0 && t0, [visible, setVisible] = useState(!delay), t1, t2;
-	$[6] === delay ? (t1 = $[7], t2 = $[8]) : (t1 = () => {
+	$[7] === delay ? (t1 = $[8], t2 = $[9]) : (t1 = () => {
 		if (!delay) return;
 		let timeout = setTimeout(() => {
 			setVisible(!0);
@@ -348,21 +335,23 @@ function Skeleton(props) {
 		return () => {
 			clearTimeout(timeout);
 		};
-	}, t2 = [delay], $[6] = delay, $[7] = t1, $[8] = t2), useEffect(t1, t2);
+	}, t2 = [delay], $[7] = delay, $[8] = t1, $[9] = t2), useEffect(t1, t2);
 	let t3;
-	$[9] === radius ? t3 = $[10] : (t3 = _getArrayProp(radius), $[9] = radius, $[10] = t3);
-	let t4 = !delay || visible, t5;
-	return $[11] !== animated || $[12] !== ref || $[13] !== restProps || $[14] !== t3 || $[15] !== t4 ? (t5 = /* @__PURE__ */ jsx(StyledSkeleton$1, {
+	$[10] === radius ? t3 = $[11] : (t3 = _getArrayProp(radius), $[10] = radius, $[11] = t3);
+	let t4 = !delay || visible ? skeletonVisible : skeletonHidden, t5 = animated ? skeletonAnimated : skeletonStatic, t6;
+	$[12] !== className || $[13] !== t4 || $[14] !== t5 ? (t6 = clsx(skeleton, t4, t5, className), $[12] = className, $[13] = t4, $[14] = t5, $[15] = t6) : t6 = $[15];
+	let t7;
+	return $[16] !== ref || $[17] !== restProps || $[18] !== t3 || $[19] !== t6 ? (t7 = /* @__PURE__ */ jsx(StyledSkeleton$1, {
+		"data-ui": "Skeleton",
 		...restProps,
-		$animated: animated,
 		$radius: t3,
-		$visible: t4,
+		className: t6,
 		ref
-	}), $[11] = animated, $[12] = ref, $[13] = restProps, $[14] = t3, $[15] = t4, $[16] = t5) : t5 = $[16], t5;
+	}), $[16] = ref, $[17] = restProps, $[18] = t3, $[19] = t6, $[20] = t7) : t7 = $[20], t7;
 }
 const StyledSkeleton = /* @__PURE__ */ styled(Skeleton).withConfig({
 	displayName: "StyledSkeleton",
-	componentId: "sc-bpgwdc-0"
+	componentId: "sc-pe7hmi-0"
 })((props) => {
 	let { $size, $style } = props, { font, media } = getTheme_v2(props.theme), fontStyle = font[$style];
 	return _responsive(media, $size, (sizeIndex) => {
@@ -381,6 +370,7 @@ function TextSkeleton(props) {
 	$[3] === size ? t1 = $[4] : (t1 = _getArrayProp(size), $[3] = size, $[4] = t1);
 	let $size = t1, t2;
 	return $[5] !== $size || $[6] !== restProps ? (t2 = /* @__PURE__ */ jsx(StyledSkeleton, {
+		"data-ui": "TextSkeleton",
 		...restProps,
 		$size,
 		$style: "text"
@@ -397,6 +387,7 @@ function LabelSkeleton(props) {
 	$[3] === size ? t1 = $[4] : (t1 = _getArrayProp(size), $[3] = size, $[4] = t1);
 	let $size = t1, t2;
 	return $[5] !== $size || $[6] !== restProps ? (t2 = /* @__PURE__ */ jsx(StyledSkeleton, {
+		"data-ui": "LabelSkeleton",
 		...restProps,
 		$size,
 		$style: "label"
@@ -413,6 +404,7 @@ function HeadingSkeleton(props) {
 	$[3] === size ? t1 = $[4] : (t1 = _getArrayProp(size), $[3] = size, $[4] = t1);
 	let $size = t1, t2;
 	return $[5] !== $size || $[6] !== restProps ? (t2 = /* @__PURE__ */ jsx(StyledSkeleton, {
+		"data-ui": "HeadingSkeleton",
 		...restProps,
 		$size,
 		$style: "heading"
@@ -429,40 +421,41 @@ function CodeSkeleton(props) {
 	$[3] === size ? t1 = $[4] : (t1 = _getArrayProp(size), $[3] = size, $[4] = t1);
 	let $size = t1, t2;
 	return $[5] !== $size || $[6] !== restProps ? (t2 = /* @__PURE__ */ jsx(StyledSkeleton, {
+		"data-ui": "CodeSkeleton",
 		...restProps,
 		$size,
 		$style: "code"
 	}), $[5] = $size, $[6] = restProps, $[7] = t2) : t2 = $[7], t2;
 }
-const CustomButton = styled(Button).withConfig({
-	displayName: "CustomButton",
-	componentId: "sc-6g1gey-0"
-})`max-width:100%;`;
+var tab = "gpfraw0";
 /**
 * @public
 */
 function Tab(props) {
-	let $ = c(31), focused, forwardedRef, icon, id, label, onClick, onFocus, restProps, selected, t0, t1;
-	$[0] === props ? (focused = $[1], forwardedRef = $[2], icon = $[3], id = $[4], label = $[5], onClick = $[6], onFocus = $[7], restProps = $[8], selected = $[9], t0 = $[10], t1 = $[11]) : ({icon, id, focused, fontSize: t0, label, onClick, onFocus, padding: t1, ref: forwardedRef, selected, ...restProps} = props, $[0] = props, $[1] = focused, $[2] = forwardedRef, $[3] = icon, $[4] = id, $[5] = label, $[6] = onClick, $[7] = onFocus, $[8] = restProps, $[9] = selected, $[10] = t0, $[11] = t1);
+	let $ = c(35), className, focused, forwardedRef, icon, id, label, onClick, onFocus, restProps, selected, t0, t1;
+	$[0] === props ? (className = $[1], focused = $[2], forwardedRef = $[3], icon = $[4], id = $[5], label = $[6], onClick = $[7], onFocus = $[8], restProps = $[9], selected = $[10], t0 = $[11], t1 = $[12]) : ({className, icon, id, focused, fontSize: t0, label, onClick, onFocus, padding: t1, ref: forwardedRef, selected, ...restProps} = props, $[0] = props, $[1] = className, $[2] = focused, $[3] = forwardedRef, $[4] = icon, $[5] = id, $[6] = label, $[7] = onClick, $[8] = onFocus, $[9] = restProps, $[10] = selected, $[11] = t0, $[12] = t1);
 	let fontSize = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 2 : t1, ref = useRef(null), focusedRef = useRef(!1), t2;
-	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[12] = t2) : t2 = $[12], useImperativeHandle(forwardedRef, t2);
+	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[13] = t2) : t2 = $[13], useImperativeHandle(forwardedRef, t2);
 	let t3;
-	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
+	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
 		focusedRef.current = !1;
-	}, $[13] = t3) : t3 = $[13];
+	}, $[14] = t3) : t3 = $[14];
 	let handleBlur = t3, t4;
-	$[14] === onFocus ? t4 = $[15] : (t4 = (event) => {
+	$[15] === onFocus ? t4 = $[16] : (t4 = (event) => {
 		focusedRef.current = !0, onFocus && onFocus(event);
-	}, $[14] = onFocus, $[15] = t4);
+	}, $[15] = onFocus, $[16] = t4);
 	let handleFocus = t4, t5, t6;
-	$[16] === focused ? (t5 = $[17], t6 = $[18]) : (t5 = () => {
+	$[17] === focused ? (t5 = $[18], t6 = $[19]) : (t5 = () => {
 		focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
-	}, t6 = [focused], $[16] = focused, $[17] = t5, $[18] = t6), useEffect(t5, t6);
-	let t7 = selected ? "true" : "false", t8 = selected ? 0 : -1, t9;
-	return $[19] !== fontSize || $[20] !== handleFocus || $[21] !== icon || $[22] !== id || $[23] !== label || $[24] !== onClick || $[25] !== padding || $[26] !== restProps || $[27] !== selected || $[28] !== t7 || $[29] !== t8 ? (t9 = /* @__PURE__ */ jsx(CustomButton, {
+	}, t6 = [focused], $[17] = focused, $[18] = t5, $[19] = t6), useEffect(t5, t6);
+	let t7;
+	$[20] === className ? t7 = $[21] : (t7 = clsx(tab, className), $[20] = className, $[21] = t7);
+	let t8 = selected ? "true" : "false", t9 = selected ? 0 : -1, t10;
+	return $[22] !== fontSize || $[23] !== handleFocus || $[24] !== icon || $[25] !== id || $[26] !== label || $[27] !== onClick || $[28] !== padding || $[29] !== restProps || $[30] !== selected || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 ? (t10 = /* @__PURE__ */ jsx(Button, {
+		className: t7,
 		"data-ui": "Tab",
 		...restProps,
-		"aria-selected": t7,
+		"aria-selected": t8,
 		fontSize,
 		icon,
 		id,
@@ -474,43 +467,43 @@ function Tab(props) {
 		ref,
 		role: "tab",
 		selected,
-		tabIndex: t8,
+		tabIndex: t9,
 		text: label,
 		type: "button"
-	}), $[19] = fontSize, $[20] = handleFocus, $[21] = icon, $[22] = id, $[23] = label, $[24] = onClick, $[25] = padding, $[26] = restProps, $[27] = selected, $[28] = t7, $[29] = t8, $[30] = t9) : t9 = $[30], t9;
+	}), $[22] = fontSize, $[23] = handleFocus, $[24] = icon, $[25] = id, $[26] = label, $[27] = onClick, $[28] = padding, $[29] = restProps, $[30] = selected, $[31] = t7, $[32] = t8, $[33] = t9, $[34] = t10) : t10 = $[34], t10;
 }
-const CustomInline = styled(Inline).withConfig({
-	displayName: "CustomInline",
-	componentId: "sc-m22lpv-0"
-})`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`;
+var tabList = "_11igkzi0";
 /**
 * @public
 */
 function TabList(props) {
-	let $ = c(16), childrenProp, ref, restProps;
-	$[0] === props ? (childrenProp = $[1], ref = $[2], restProps = $[3]) : ({children: childrenProp, ref, ...restProps} = props, $[0] = props, $[1] = childrenProp, $[2] = ref, $[3] = restProps);
+	let $ = c(20), childrenProp, className, ref, restProps;
+	$[0] === props ? (childrenProp = $[1], className = $[2], ref = $[3], restProps = $[4]) : ({children: childrenProp, className, ref, ...restProps} = props, $[0] = props, $[1] = childrenProp, $[2] = className, $[3] = ref, $[4] = restProps);
 	let [focusedIndex, setFocusedIndex] = useState(-1), t0;
-	if ($[4] !== childrenProp || $[5] !== focusedIndex) {
+	if ($[5] !== childrenProp || $[6] !== focusedIndex) {
 		let children = Children.toArray(childrenProp).filter(isValidElement), t1;
-		$[7] === focusedIndex ? t1 = $[8] : (t1 = (child, childIndex) => cloneElement(child, {
+		$[8] === focusedIndex ? t1 = $[9] : (t1 = (child, childIndex) => cloneElement(child, {
 			focused: focusedIndex === childIndex,
 			key: childIndex,
 			onFocus: () => setFocusedIndex(childIndex)
-		}), $[7] = focusedIndex, $[8] = t1), t0 = children.map(t1), $[4] = childrenProp, $[5] = focusedIndex, $[6] = t0;
-	} else t0 = $[6];
+		}), $[8] = focusedIndex, $[9] = t1), t0 = children.map(t1), $[5] = childrenProp, $[6] = focusedIndex, $[7] = t0;
+	} else t0 = $[7];
 	let tabs = t0, numTabs = tabs.length, t1;
-	$[9] === numTabs ? t1 = $[10] : (t1 = (event) => {
+	$[10] === numTabs ? t1 = $[11] : (t1 = (event) => {
 		event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex_0) => (prevIndex_0 + 1) % numTabs);
-	}, $[9] = numTabs, $[10] = t1);
+	}, $[10] = numTabs, $[11] = t1);
 	let handleKeyDown = t1, t2;
-	return $[11] !== handleKeyDown || $[12] !== ref || $[13] !== restProps || $[14] !== tabs ? (t2 = /* @__PURE__ */ jsx(CustomInline, {
+	$[12] === className ? t2 = $[13] : (t2 = clsx(tabList, className), $[12] = className, $[13] = t2);
+	let t3;
+	return $[14] !== handleKeyDown || $[15] !== ref || $[16] !== restProps || $[17] !== t2 || $[18] !== tabs ? (t3 = /* @__PURE__ */ jsx(Inline, {
+		className: t2,
 		"data-ui": "TabList",
 		...restProps,
 		onKeyDown: handleKeyDown,
 		ref,
 		role: "tablist",
 		children: tabs
-	}), $[11] = handleKeyDown, $[12] = ref, $[13] = restProps, $[14] = tabs, $[15] = t2) : t2 = $[15], t2;
+	}), $[14] = handleKeyDown, $[15] = ref, $[16] = restProps, $[17] = t2, $[18] = tabs, $[19] = t3) : t3 = $[19], t3;
 }
 /**
 * @public
@@ -719,9 +712,6 @@ function Tree(props) {
 		children: t17
 	}), $[35] = contextValue, $[36] = t17, $[37] = t18) : t18 = $[37], t18;
 }
-function treeItemRootStyle() {
-	return css`&[role='none'] > [role='treeitem']{outline:none;cursor:default;border-radius:3px;background-color:var(--card-bg-color);color:var(--treeitem-fg-color);&:focus{position:relative;}}&[role='treeitem']{outline:none;& > div{cursor:default;border-radius:3px;background-color:var(--card-bg-color);color:var(--treeitem-fg-color);}&:focus > div{position:relative;}}`;
-}
 function treeItemRootColorStyle(props) {
 	let { color } = getTheme_v2(props.theme), tone = color.selectable.default;
 	return css`&[role='none']{& > [role='treeitem']{${_cardColorStyle(color, tone.enabled)}}&[data-selected] > [role='treeitem']{${_cardColorStyle(color, tone.pressed)}}@media (hover:hover){&:not([data-selected]) > [role='treeitem']:not(:focus):hover{${_cardColorStyle(color, tone.hovered)}}& > [role='treeitem']:focus{${_cardColorStyle(color, tone.selected)}}}}&[role='treeitem']{& > [data-ui='TreeItem__box']{${_cardColorStyle(color, tone.enabled)}}&[data-selected] > [data-ui='TreeItem__box']{${_cardColorStyle(color, tone.pressed)}}@media (hover:hover){&:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover{${_cardColorStyle(color, tone.hovered)}}&:focus > [data-ui='TreeItem__box']{${_cardColorStyle(color, tone.selected)}}}}`;
@@ -753,52 +743,48 @@ function TreeGroup(props) {
 		children
 	}), $[4] = children, $[5] = restProps, $[6] = t1, $[7] = tree.gap, $[8] = t2) : t2 = $[8], t2;
 }
+var treeItem = "_14vatmh0";
 const StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
 	displayName: "StyledTreeItem",
-	componentId: "sc-8603jr-0"
-})(treeItemRootStyle, treeItemRootColorStyle), TreeItemBox = /* @__PURE__ */ styled.a.withConfig({
+	componentId: "sc-9k6ukt-0"
+})(treeItemRootColorStyle), TreeItemBox = /* @__PURE__ */ styled.a.withConfig({
 	displayName: "TreeItemBox",
-	componentId: "sc-8603jr-1"
-})(treeItemBoxStyle), ToggleArrowText = styled(Text).withConfig({
-	displayName: "ToggleArrowText",
-	componentId: "sc-8603jr-2"
-})`& > svg{transition:transform 100ms;}`;
+	componentId: "sc-9k6ukt-1"
+})(treeItemBoxStyle);
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
 function TreeItem(props) {
-	let $ = c(116), IconComponent, children, href, idProp, linkAs, linkProps, muted, onClick, restProps, t0, t1, t2, t3, t4, text, weight;
-	$[0] === props ? (IconComponent = $[1], children = $[2], href = $[3], idProp = $[4], linkAs = $[5], linkProps = $[6], muted = $[7], onClick = $[8], restProps = $[9], t0 = $[10], t1 = $[11], t2 = $[12], t3 = $[13], t4 = $[14], text = $[15], weight = $[16]) : ({children, expanded: t0, fontSize: t1, href, icon: IconComponent, id: idProp, linkAs, linkProps, muted, onClick, padding: t2, selected: t3, gap: t4, text, weight, ...restProps} = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = href, $[4] = idProp, $[5] = linkAs, $[6] = linkProps, $[7] = muted, $[8] = onClick, $[9] = restProps, $[10] = t0, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = text, $[16] = weight);
-	let 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;
-	$[17] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (node) => {
+	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));
-	}, $[17] = t5) : t5 = $[17];
+	}, $[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 ($[18] !== id || $[19] !== path) {
+	if ($[1] !== id || $[2] !== path) {
 		let itemPath = path.concat([id || ""]);
-		t6 = itemPath, t7 = itemPath.join("/"), $[18] = id, $[19] = path, $[20] = t6, $[21] = t7;
-	} else t6 = $[20], t7 = $[21];
+		t6 = itemPath, t7 = itemPath.join("/"), $[1] = id, $[2] = path, $[3] = t6, $[4] = t7;
+	} else t6 = $[3], t7 = $[4];
 	let t8;
-	$[22] !== t6 || $[23] !== t7 ? (t8 = [t6, t7], $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
+	$[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;
-	$[25] !== itemPath_0 || $[26] !== t9 || $[27] !== tree ? (t10 = {
+	$[8] !== itemPath_0 || $[9] !== t9 || $[10] !== tree ? (t10 = {
 		...tree,
 		level: t9,
 		path: itemPath_0
-	}, $[25] = itemPath_0, $[26] = t9, $[27] = tree, $[28] = t10) : t10 = $[28];
+	}, $[8] = itemPath_0, $[9] = t9, $[10] = tree, $[11] = t10) : t10 = $[11];
 	let contextValue = t10, t11;
-	$[29] !== expanded || $[30] !== itemKey || $[31] !== onClick || $[32] !== rootElement || $[33] !== setExpanded || $[34] !== setFocusedElement ? (t11 = (event) => {
+	$[12] !== expanded || $[13] !== itemKey || $[14] !== onClick || $[15] !== rootElement || $[16] !== setExpanded || $[17] !== setFocusedElement ? (t11 = (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));
-	}, $[29] = expanded, $[30] = itemKey, $[31] = onClick, $[32] = rootElement, $[33] = setExpanded, $[34] = setFocusedElement, $[35] = t11) : t11 = $[35];
+	}, $[12] = expanded, $[13] = itemKey, $[14] = onClick, $[15] = rootElement, $[16] = setExpanded, $[17] = setFocusedElement, $[18] = t11) : t11 = $[18];
 	let handleClick = t11, t12;
-	$[36] !== focused || $[37] !== rootElement ? (t12 = (event_0) => {
+	$[19] !== focused || $[20] !== rootElement ? (t12 = (event_0) => {
 		focused && event_0.key === "Enter" && (treeitemRef.current || rootElement)?.click();
-	}, $[36] = focused, $[37] = rootElement, $[38] = t12) : t12 = $[38];
+	}, $[19] = focused, $[20] = rootElement, $[21] = t12) : t12 = $[21];
 	let handleKeyDown = t12, t13, t14;
-	$[39] !== expanded || $[40] !== itemKey || $[41] !== registerItem || $[42] !== rootElement || $[43] !== selected ? (t13 = () => {
+	$[22] !== expanded || $[23] !== itemKey || $[24] !== registerItem || $[25] !== rootElement || $[26] !== selected ? (t13 = () => {
 		if (rootElement) return registerItem(rootElement, itemKey, expanded, selected);
 	}, t14 = [
 		expanded,
@@ -806,34 +792,34 @@ function TreeItem(props) {
 		registerItem,
 		rootElement,
 		selected
-	], $[39] = expanded, $[40] = itemKey, $[41] = registerItem, $[42] = rootElement, $[43] = selected, $[44] = t13, $[45] = t14) : (t13 = $[44], t14 = $[45]), useEffect(t13, t14);
+	], $[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;
-	$[46] === t15 ? t16 = $[47] : (t16 = {
+	$[29] === t15 ? t16 = $[30] : (t16 = {
 		visibility: t15,
 		pointerEvents: "none"
-	}, $[46] = t15, $[47] = t16);
+	}, $[29] = t15, $[30] = t16);
 	let t17;
-	$[48] !== IconComponent || $[49] !== fontSize || $[50] !== muted || $[51] !== weight ? (t17 = IconComponent && /* @__PURE__ */ jsx(Text, {
+	$[31] !== IconComponent || $[32] !== fontSize || $[33] !== muted || $[34] !== weight ? (t17 = IconComponent && /* @__PURE__ */ jsx(Text, {
 		muted,
 		size: fontSize,
 		weight,
 		children: /* @__PURE__ */ jsx(IconComponent, {})
-	}), $[48] = IconComponent, $[49] = fontSize, $[50] = muted, $[51] = weight, $[52] = t17) : t17 = $[52];
+	}), $[31] = IconComponent, $[32] = fontSize, $[33] = muted, $[34] = weight, $[35] = t17) : t17 = $[35];
 	let t18;
-	$[53] !== IconComponent || $[54] !== expanded || $[55] !== fontSize || $[56] !== muted || $[57] !== weight ? (t18 = !IconComponent && /* @__PURE__ */ jsx(ToggleArrowText, {
+	$[36] !== IconComponent || $[37] !== expanded || $[38] !== fontSize || $[39] !== muted || $[40] !== weight ? (t18 = !IconComponent && /* @__PURE__ */ jsx(Text, {
 		muted,
 		size: fontSize,
 		weight,
 		children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } })
-	}), $[53] = IconComponent, $[54] = expanded, $[55] = fontSize, $[56] = muted, $[57] = weight, $[58] = t18) : t18 = $[58];
+	}), $[36] = IconComponent, $[37] = expanded, $[38] = fontSize, $[39] = muted, $[40] = weight, $[41] = t18) : t18 = $[41];
 	let t19;
-	$[59] !== gap || $[60] !== t16 || $[61] !== t17 || $[62] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Box, {
+	$[42] !== gap || $[43] !== t16 || $[44] !== t17 || $[45] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Box, {
 		marginRight: gap,
 		style: t16,
 		children: [t17, t18]
-	}), $[59] = gap, $[60] = t16, $[61] = t17, $[62] = t18, $[63] = t19) : t19 = $[63];
+	}), $[42] = gap, $[43] = t16, $[44] = t17, $[45] = t18, $[46] = t19) : t19 = $[46];
 	let t20;
-	$[64] !== fontSize || $[65] !== muted || $[66] !== text || $[67] !== weight ? (t20 = /* @__PURE__ */ jsx(Box, {
+	$[47] !== fontSize || $[48] !== muted || $[49] !== text || $[50] !== weight ? (t20 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
 		children: /* @__PURE__ */ jsx(Text, {
 			muted,
@@ -842,83 +828,83 @@ function TreeItem(props) {
 			weight,
 			children: text
 		})
-	}), $[64] = fontSize, $[65] = muted, $[66] = text, $[67] = weight, $[68] = t20) : t20 = $[68];
+	}), $[47] = fontSize, $[48] = muted, $[49] = text, $[50] = weight, $[51] = t20) : t20 = $[51];
 	let t21;
-	$[69] !== padding || $[70] !== t19 || $[71] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Flex, {
+	$[52] !== padding || $[53] !== t19 || $[54] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Flex, {
 		padding,
 		children: [t19, t20]
-	}), $[69] = padding, $[70] = t19, $[71] = t20, $[72] = t21) : t21 = $[72];
+	}), $[52] = padding, $[53] = t19, $[54] = t20, $[55] = t21) : t21 = $[55];
 	let content = t21;
 	if (href) {
-		let t22 = selected ? "" : void 0, t23 = typeof linkAs == "string" ? linkAs : "a", t24;
-		$[73] !== content || $[74] !== expanded || $[75] !== href || $[76] !== linkAs || $[77] !== linkProps || $[78] !== t23 || $[79] !== tabIndex || $[80] !== tree.level ? (t24 = /* @__PURE__ */ jsx(TreeItemBox, {
+		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, {
 			...linkProps,
 			$level: tree.level,
 			"aria-expanded": expanded,
 			as: linkAs,
-			"data-as": t23,
+			"data-as": t22,
 			"data-ui": "TreeItem__box",
 			href,
 			ref: treeitemRef,
 			role: "treeitem",
 			tabIndex,
 			children: content
-		}), $[73] = content, $[74] = expanded, $[75] = href, $[76] = linkAs, $[77] = linkProps, $[78] = t23, $[79] = tabIndex, $[80] = tree.level, $[81] = t24) : t24 = $[81];
-		let t25;
-		$[82] !== children || $[83] !== expanded ? (t25 = children && /* @__PURE__ */ jsx(TreeGroup, {
+		}), $[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, {
 			hidden: !expanded,
 			children
-		}), $[82] = children, $[83] = expanded, $[84] = t25) : t25 = $[84];
-		let t26;
-		$[85] !== contextValue || $[86] !== t25 ? (t26 = /* @__PURE__ */ jsx(TreeContext.Provider, {
+		}), $[65] = children, $[66] = expanded, $[67] = t24) : t24 = $[67];
+		let t25;
+		return $[68] !== contextValue || $[69] !== t24 ? (t25 = /* @__PURE__ */ jsx(TreeContext.Provider, {
 			value: contextValue,
-			children: t25
-		}), $[85] = contextValue, $[86] = t25, $[87] = t26) : t26 = $[87];
-		let t27;
-		return $[88] !== handleClick || $[89] !== id || $[90] !== itemKey || $[91] !== restProps || $[92] !== t22 || $[93] !== t24 || $[94] !== t26 ? (t27 = /* @__PURE__ */ jsxs(StyledTreeItem, {
-			"data-selected": t22,
+			children: t24
+		}), $[68] = contextValue, $[69] = t24, $[70] = t25) : t25 = $[70], /* @__PURE__ */ jsxs(StyledTreeItem, {
+			"data-selected": selected ? "" : void 0,
 			"data-tree-id": id,
 			"data-tree-key": itemKey,
 			"data-ui": "TreeItem",
 			...restProps,
+			className: clsx(treeItem, restProps.className),
 			onClick: handleClick,
 			ref: setRootElement,
 			role: "none",
-			children: [t24, t26]
-		}), $[88] = handleClick, $[89] = id, $[90] = itemKey, $[91] = restProps, $[92] = t22, $[93] = t24, $[94] = t26, $[95] = t27) : t27 = $[95], t27;
+			children: [t23, t25]
+		});
 	}
-	let t22 = selected ? "" : void 0, t23;
-	$[96] !== content || $[97] !== tree.level ? (t23 = /* @__PURE__ */ jsx(TreeItemBox, {
+	let T0 = StyledTreeItem, t22 = selected ? "" : void 0, t24 = clsx(treeItem, restProps.className), t25;
+	$[71] !== content || $[72] !== tree.level ? (t25 = /* @__PURE__ */ jsx(TreeItemBox, {
 		$level: tree.level,
 		as: "div",
 		"data-ui": "TreeItem__box",
 		children: content
-	}), $[96] = content, $[97] = tree.level, $[98] = t23) : t23 = $[98];
-	let t24;
-	$[99] !== children || $[100] !== expanded ? (t24 = children && /* @__PURE__ */ jsx(TreeGroup, {
+	}), $[71] = content, $[72] = tree.level, $[73] = t25) : t25 = $[73];
+	let t26;
+	$[74] !== children || $[75] !== expanded ? (t26 = children && /* @__PURE__ */ jsx(TreeGroup, {
 		expanded,
 		children
-	}), $[99] = children, $[100] = expanded, $[101] = t24) : t24 = $[101];
-	let t25;
-	$[102] !== contextValue || $[103] !== t24 ? (t25 = /* @__PURE__ */ jsx(TreeContext.Provider, {
+	}), $[74] = children, $[75] = expanded, $[76] = t26) : t26 = $[76];
+	let t27;
+	$[77] !== contextValue || $[78] !== t26 ? (t27 = /* @__PURE__ */ jsx(TreeContext.Provider, {
 		value: contextValue,
-		children: t24
-	}), $[102] = contextValue, $[103] = t24, $[104] = t25) : t25 = $[104];
-	let t26;
-	return $[105] !== expanded || $[106] !== handleClick || $[107] !== handleKeyDown || $[108] !== id || $[109] !== itemKey || $[110] !== restProps || $[111] !== t22 || $[112] !== t23 || $[113] !== t25 || $[114] !== tabIndex ? (t26 = /* @__PURE__ */ jsxs(StyledTreeItem, {
+		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,
 		"data-ui": "TreeItem",
 		"data-tree-id": id,
 		"data-tree-key": itemKey,
 		...restProps,
 		"aria-expanded": expanded,
+		className: t24,
 		onClick: handleClick,
 		onKeyDown: handleKeyDown,
 		ref: setRootElement,
 		role: "treeitem",
 		tabIndex,
-		children: [t23, t25]
-	}), $[105] = expanded, $[106] = handleClick, $[107] = handleKeyDown, $[108] = id, $[109] = itemKey, $[110] = restProps, $[111] = t22, $[112] = t23, $[113] = t25, $[114] = tabIndex, $[115] = t26) : t26 = $[115], t26;
+		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;
 }
 /**
 * @internal
@@ -1414,9 +1400,6 @@ const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
 		children: t6
 	}), $[15] = ref, $[16] = restProps, $[17] = t4, $[18] = t5, $[19] = t6, $[20] = tone, $[21] = t7) : t7 = $[21], t7;
 };
-function checkboxBaseStyles() {
-	return css`position:relative;display:inline-block;`;
-}
 function inputElementStyles(props) {
 	let { color, input, radius } = getTheme_v2(props.theme), { focusRing } = input.checkbox;
 	return css`position:absolute;top:0;left:0;width:100%;height:100%;outline:none;opacity:0;z-index:1;padding:0;margin:0;& + span{position:relative;display:block;height:${rem(input.checkbox.size)};width:${rem(input.checkbox.size)};box-sizing:border-box;box-shadow:${focusRingBorderStyle({
@@ -1448,12 +1431,10 @@ function inputElementStyles(props) {
 		color: color.input.default.readOnly.border
 	})};color:${color.input.default.readOnly.fg};}&[data-read-only]&:checked + span{background-color:${color.input.default.readOnly.muted.bg};}&:checked + span > svg:first-child{opacity:1;}&:indeterminate + span > svg:last-child{opacity:1;}`;
 }
-const StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
-	displayName: "StyledCheckbox",
-	componentId: "sc-kbhc49-0"
-})(checkboxBaseStyles), Input$4 = /* @__PURE__ */ styled.input.withConfig({
+var checkbox = "ycv36y0";
+const Input$3 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-kbhc49-1"
+	componentId: "sc-ng4gkf-0"
 })(inputElementStyles);
 /**
 * Checkboxes allow the user to select one or more items from a set.
@@ -1461,7 +1442,7 @@ const StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
 * @public
 */
 function Checkbox(props) {
-	let $ = c(26), checked, className, customValidity, disabled, forwardedRef, indeterminate, readOnly, restProps, style;
+	let $ = c(28), checked, className, customValidity, disabled, forwardedRef, indeterminate, readOnly, restProps, style;
 	$[0] === props ? (checked = $[1], className = $[2], customValidity = $[3], disabled = $[4], forwardedRef = $[5], indeterminate = $[6], readOnly = $[7], restProps = $[8], style = $[9]) : ({checked, className, disabled, indeterminate, customValidity, readOnly, ref: forwardedRef, style, ...restProps} = props, $[0] = props, $[1] = checked, $[2] = className, $[3] = customValidity, $[4] = disabled, $[5] = forwardedRef, $[6] = indeterminate, $[7] = readOnly, $[8] = restProps, $[9] = style);
 	let ref = useRef(null), t0;
 	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[10] = t0) : t0 = $[10], useImperativeHandle(forwardedRef, t0);
@@ -1469,26 +1450,28 @@ function Checkbox(props) {
 	$[11] === indeterminate ? (t1 = $[12], t2 = $[13]) : (t1 = () => {
 		ref.current && (ref.current.indeterminate = indeterminate || !1);
 	}, t2 = [indeterminate], $[11] = indeterminate, $[12] = t1, $[13] = t2), useEffect(t1, t2), useCustomValidity(ref, customValidity);
-	let t3 = !disabled && readOnly ? "" : void 0, t4 = customValidity ? "" : void 0, t5 = disabled || readOnly, t6;
-	$[14] !== checked || $[15] !== readOnly || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 ? (t6 = /* @__PURE__ */ jsx(Input$4, {
-		"data-read-only": t3,
-		"data-error": t4,
+	let t3;
+	$[14] === className ? t3 = $[15] : (t3 = clsx(checkbox, className), $[14] = className, $[15] = t3);
+	let t4 = !disabled && readOnly ? "" : void 0, t5 = customValidity ? "" : void 0, t6 = disabled || readOnly, t7;
+	$[16] !== checked || $[17] !== readOnly || $[18] !== restProps || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 ? (t7 = /* @__PURE__ */ jsx(Input$3, {
+		"data-read-only": t4,
+		"data-error": t5,
 		...restProps,
 		checked,
-		disabled: t5,
+		disabled: t6,
 		type: "checkbox",
 		readOnly,
 		ref
-	}), $[14] = checked, $[15] = readOnly, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = t6) : t6 = $[20];
-	let t7;
-	$[21] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx(CheckmarkIcon, {}), /* @__PURE__ */ jsx(RemoveIcon, {})] }), $[21] = t7) : t7 = $[21];
+	}), $[16] = checked, $[17] = readOnly, $[18] = restProps, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7) : t7 = $[22];
 	let t8;
-	return $[22] !== className || $[23] !== style || $[24] !== t6 ? (t8 = /* @__PURE__ */ jsxs(StyledCheckbox, {
-		className,
+	$[23] === Symbol.for("react.memo_cache_sentinel") ? (t8 = /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx(CheckmarkIcon, {}), /* @__PURE__ */ jsx(RemoveIcon, {})] }), $[23] = t8) : t8 = $[23];
+	let t9;
+	return $[24] !== style || $[25] !== t3 || $[26] !== t7 ? (t9 = /* @__PURE__ */ jsxs("div", {
+		className: t3,
 		"data-ui": "Checkbox",
 		style,
-		children: [t6, t7]
-	}), $[22] = className, $[23] = style, $[24] = t6, $[25] = t8) : t8 = $[25], t8;
+		children: [t7, t8]
+	}), $[24] = style, $[25] = t3, $[26] = t7, $[27] = t9) : t9 = $[27], t9;
 }
 /**
 * Get responsive CSS for the `heading` font style.
@@ -1538,9 +1521,6 @@ function HeadingComponent(props) {
 * @public
 */
 const Heading = HeadingComponent;
-function radioBaseStyle() {
-	return css`position:relative;&:not([hidden]){display:inline-block;}&[data-read-only]{outline:1px solid red;}`;
-}
 function inputElementStyle(props) {
 	let { color, input } = getTheme_v2(props.theme), dist = (input.radio.size - input.radio.markSize) / 2;
 	return css`appearance:none;position:absolute;top:0;left:0;opacity:0;height:100%;width:100%;outline:none;z-index:1;padding:0;margin:0;border-radius:${rem(input.radio.size / 2)};border:none;& + span{display:block;position:relative;height:${rem(input.radio.size)};width:${rem(input.radio.size)};border-radius:${rem(input.radio.size / 2)};background:${color.input.default.enabled.bg};box-shadow:${focusRingBorderStyle({
@@ -1560,12 +1540,10 @@ function inputElementStyle(props) {
 		color: color.input.invalid.enabled.muted.bg
 	})};&::after{background:${color.input.invalid.enabled.muted.bg};}}&[data-read-only] + span{box-shadow:0 0 0 1px ${color.input.default.readOnly.border};background:${color.input.default.readOnly.bg};&::after{background:${color.input.default.readOnly.border};}}&:not([data-read-only]):disabled + span{box-shadow:0 0 0 1px ${color.input.default.disabled.border};background:${color.input.default.disabled.bg};&::after{background:${color.input.default.disabled.border};}}`;
 }
-const StyledRadio = /* @__PURE__ */ styled.div.withConfig({
-	displayName: "StyledRadio",
-	componentId: "sc-4nk2uw-0"
-})(radioBaseStyle), Input$3 = /* @__PURE__ */ styled.input.withConfig({
+var radio = "xgt72i0";
+const Input$2 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-4nk2uw-1"
+	componentId: "sc-u4kfaz-0"
 })(inputElementStyle);
 /**
 * The `Radio` component allows the user to select one option from a set.
@@ -1573,32 +1551,31 @@ const StyledRadio = /* @__PURE__ */ styled.div.withConfig({
 * @public
 */
 function Radio(props) {
-	let $ = c(20), className, customValidity, disabled, forwardedRef, readOnly, restProps, style;
+	let $ = c(22), className, customValidity, disabled, forwardedRef, readOnly, restProps, style;
 	$[0] === props ? (className = $[1], customValidity = $[2], disabled = $[3], forwardedRef = $[4], readOnly = $[5], restProps = $[6], style = $[7]) : ({className, disabled, style, customValidity, readOnly, ref: forwardedRef, ...restProps} = props, $[0] = props, $[1] = className, $[2] = customValidity, $[3] = disabled, $[4] = forwardedRef, $[5] = readOnly, $[6] = restProps, $[7] = style);
 	let ref = useRef(null), t0;
 	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[8] = t0) : t0 = $[8], useImperativeHandle(forwardedRef, t0), useCustomValidity(ref, customValidity);
-	let t1 = !disabled && readOnly ? "" : void 0, t2 = customValidity ? "" : void 0, t3 = disabled || readOnly, t4;
-	$[9] !== readOnly || $[10] !== restProps || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 ? (t4 = /* @__PURE__ */ jsx(Input$3, {
-		"data-read-only": t1,
-		"data-error": t2,
+	let t1;
+	$[9] === className ? t1 = $[10] : (t1 = clsx(radio, className), $[9] = className, $[10] = t1);
+	let t2 = !disabled && readOnly ? "" : void 0, t3 = customValidity ? "" : void 0, t4 = disabled || readOnly, t5;
+	$[11] !== readOnly || $[12] !== restProps || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 ? (t5 = /* @__PURE__ */ jsx(Input$2, {
+		"data-read-only": t2,
+		"data-error": t3,
 		...restProps,
-		disabled: t3,
+		disabled: t4,
 		readOnly,
 		ref,
 		type: "radio"
-	}), $[9] = readOnly, $[10] = restProps, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4) : t4 = $[14];
-	let t5;
-	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsx("span", {}), $[15] = t5) : t5 = $[15];
+	}), $[11] = readOnly, $[12] = restProps, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5) : t5 = $[16];
 	let t6;
-	return $[16] !== className || $[17] !== style || $[18] !== t4 ? (t6 = /* @__PURE__ */ jsxs(StyledRadio, {
-		className,
+	$[17] === Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsx("span", {}), $[17] = t6) : t6 = $[17];
+	let t7;
+	return $[18] !== style || $[19] !== t1 || $[20] !== t5 ? (t7 = /* @__PURE__ */ jsxs("div", {
+		className: t1,
 		"data-ui": "Radio",
 		style,
-		children: [t4, t5]
-	}), $[16] = className, $[17] = style, $[18] = t4, $[19] = t6) : t6 = $[19], t6;
-}
-function rootStyle() {
-	return css`position:relative;width:-moz-available;width:-webkit-fill-available;width:stretch;&:not([hidden]){display:inline-block;}`;
+		children: [t5, t6]
+	}), $[18] = style, $[19] = t1, $[20] = t5, $[21] = t7) : t7 = $[21], t7;
 }
 function inputBaseStyle(props) {
 	let { font } = getTheme_v2(props.theme);
@@ -1650,18 +1627,16 @@ function iconBoxStyle(props) {
 	return css`pointer-events:none;position:absolute;top:0;right:0;--card-fg-color:${color.input.default.enabled.fg};@media (hover:hover){select:not(disabled):not(:read-only):hover + &&{--card-fg-color:${color.input.default.hovered.fg};}}select:disabled + &&{--card-fg-color:${color.input.default.disabled.fg};}select[data-read-only] + &&{--card-fg-color:${color.input.default.readOnly.fg};}`;
 }
 const selectStyle = {
-	root: rootStyle,
 	input: inputStyle,
 	iconBox: iconBoxStyle
-}, StyledSelect = /* @__PURE__ */ styled.div.withConfig({
-	displayName: "StyledSelect",
-	componentId: "sc-lvajsx-0"
-})(selectStyle.root), Input$2 = /* @__PURE__ */ styled.select.withConfig({
+};
+var select = "_14ngdrn0";
+const Input$1 = /* @__PURE__ */ styled.select.withConfig({
 	displayName: "Input",
-	componentId: "sc-lvajsx-1"
+	componentId: "sc-af8su9-0"
 })(selectStyle.input), IconBox = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "IconBox",
-	componentId: "sc-lvajsx-2"
+	componentId: "sc-af8su9-1"
 })(selectStyle.iconBox);
 /**
 * The `Select` component provides control of options.
@@ -1682,7 +1657,7 @@ function Select(props) {
 	let t9;
 	$[18] === gap ? t9 = $[19] : (t9 = _getArrayProp(gap), $[18] = gap, $[19] = t9);
 	let t10 = disabled || readOnly, t11;
-	$[20] !== children || $[21] !== restProps || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9 ? (t11 = /* @__PURE__ */ jsx(Input$2, {
+	$[20] !== children || $[21] !== restProps || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9 ? (t11 = /* @__PURE__ */ jsx(Input$1, {
 		"data-read-only": t5,
 		"data-ui": "Select",
 		...restProps,
@@ -1707,17 +1682,12 @@ function Select(props) {
 		children: t13
 	}), $[32] = padding, $[33] = t13, $[34] = t14) : t14 = $[34];
 	let t15;
-	return $[35] !== t11 || $[36] !== t14 ? (t15 = /* @__PURE__ */ jsxs(StyledSelect, {
+	return $[35] !== t11 || $[36] !== t14 ? (t15 = /* @__PURE__ */ jsxs("div", {
+		className: select,
 		"data-ui": "Select",
 		children: [t11, t14]
 	}), $[35] = t11, $[36] = t14, $[37] = t15) : t15 = $[37], t15;
 }
-function switchBaseStyles() {
-	return css`position:relative;&:not([hidden]){display:inline-block;}`;
-}
-function switchInputStyles() {
-	return css`position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;height:100%;width:100%;outline:none;padding:0;margin:0;z-index:1;`;
-}
 function switchRepresentationStyles(props) {
 	let { color, input } = getTheme_v2(props.theme);
 	return css`--switch-bg-color:${color.input.default.enabled.border};--switch-fg-color:${color.input.default.enabled.bg};--switch-box-shadow:none;&:not([hidden]){display:block;}position:relative;width:${rem(input.switch.width)};height:${rem(input.switch.height)};border-radius:${rem(input.switch.height / 2)};pointer-events:none;&:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;box-shadow:var(--switch-box-shadow);border-radius:inherit;}input:focus + &&{--switch-box-shadow:${focusRingStyle({ focusRing: input.switch.focusRing })};}input:focus:not(:focus-visible) + &&{--switch-box-shadow:none;}input:checked + &&{--switch-bg-color:${color.input.default.enabled.fg};--switch-fg-color:${color.input.default.enabled.bg};}@media (hover:hover){input:not(:disabled):hover + &&{--switch-bg-color:${color.input.default.hovered.border};--switch-fg-color:${color.input.default.hovered.bg};}input:not(:disabled):checked:hover + &&{--switch-bg-color:${color.input.default.enabled.fg};--switch-fg-color:${color.input.default.enabled.bg};}}input:not([data-read-only]):disabled + &&{--switch-bg-color:${color.input.default.disabled.border};--switch-fg-color:${color.input.default.disabled.bg};}input[data-read-only]:disabled + &&{--switch-bg-color:${color.input.default.readOnly.border};--switch-fg-color:${color.input.default.readOnly.bg};}input:checked[data-read-only]:disabled + &&{--switch-bg-color:${color.input.default.readOnly.fg};--switch-fg-color:${color.input.default.readOnly.bg};}`;
@@ -1730,21 +1700,16 @@ function switchThumbStyles(props) {
 	let { $indeterminate } = props, { input } = getTheme_v2(props.theme), trackWidth = input.switch.width, trackHeight = input.switch.height, trackPadding = input.switch.padding, size = trackHeight - input.switch.padding * 2, checkedOffset = trackWidth - trackPadding * 2 - size, indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding, checked = $indeterminate !== !0 && props.$checked === !0;
 	return css`&:not([hidden]){display:block;}position:absolute;left:${rem(trackPadding)};top:${rem(trackPadding)};height:${rem(size)};width:${rem(size)};border-radius:${rem(size / 2)};transition-property:transform;transition-duration:${input.switch.transitionDurationMs}ms;transition-timing-function:${input.switch.transitionTimingFunction};background:var(--switch-fg-color);transform:translate3d(0,0,0);box-shadow:0px 1px 0px 0px rgba(0,0,0,0.05);${checked && css`transform:translate3d(${checkedOffset}px,0,0);`} ${$indeterminate && css`transform:translate3d(${indeterminateOffset}px,0,0);`}`;
 }
-const StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
-	displayName: "StyledSwitch",
-	componentId: "sc-fsy8ck-0"
-})(switchBaseStyles), Input$1 = /* @__PURE__ */ styled.input.withConfig({
-	displayName: "Input",
-	componentId: "sc-fsy8ck-1"
-})(switchInputStyles), Representation = /* @__PURE__ */ styled.span.withConfig({
+var switchInput = "cn60s71", switchRoot = "cn60s70";
+const Representation = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Representation",
-	componentId: "sc-fsy8ck-2"
+	componentId: "sc-ymdgpc-0"
 })(switchRepresentationStyles), Track = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Track",
-	componentId: "sc-fsy8ck-3"
+	componentId: "sc-ymdgpc-1"
 })(switchTrackStyles), Thumb = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Thumb",
-	componentId: "sc-fsy8ck-4"
+	componentId: "sc-ymdgpc-2"
 })(switchThumbStyles);
 /**
 * The `Switch` component allows the user to toggle a setting on and off.
@@ -1754,7 +1719,7 @@ const StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
 * @public
 */
 function Switch(props) {
-	let $ = c(27), checked, className, disabled, forwardedRef, indeterminate, readOnly, restProps, style;
+	let $ = c(29), checked, className, disabled, forwardedRef, indeterminate, readOnly, restProps, style;
 	$[0] === props ? (checked = $[1], className = $[2], disabled = $[3], forwardedRef = $[4], indeterminate = $[5], readOnly = $[6], restProps = $[7], style = $[8]) : ({checked, className, disabled, indeterminate, readOnly, ref: forwardedRef, style, ...restProps} = props, $[0] = props, $[1] = checked, $[2] = className, $[3] = disabled, $[4] = forwardedRef, $[5] = indeterminate, $[6] = readOnly, $[7] = restProps, $[8] = style);
 	let ref = useRef(null), t0;
 	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[9] = t0) : t0 = $[9], useImperativeHandle(forwardedRef, t0);
@@ -1762,46 +1727,43 @@ function Switch(props) {
 	$[10] === indeterminate ? (t1 = $[11], t2 = $[12]) : (t1 = () => {
 		ref.current && (ref.current.indeterminate = indeterminate || !1);
 	}, t2 = [indeterminate], $[10] = indeterminate, $[11] = t1, $[12] = t2), useEffect(t1, t2);
-	let t3 = !disabled && readOnly ? "" : void 0, t4 = indeterminate !== !0 && checked, t5 = disabled || readOnly, t6;
-	$[13] !== restProps || $[14] !== t3 || $[15] !== t4 || $[16] !== t5 ? (t6 = /* @__PURE__ */ jsx(Input$1, {
-		"data-read-only": t3,
+	let t3;
+	$[13] === className ? t3 = $[14] : (t3 = clsx(switchRoot, className), $[13] = className, $[14] = t3);
+	let t4 = !disabled && readOnly ? "" : void 0, t5 = indeterminate !== !0 && checked, t6 = disabled || readOnly, t7;
+	$[15] !== restProps || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsx("input", {
+		className: switchInput,
+		"data-read-only": t4,
 		...restProps,
-		checked: t4,
-		disabled: t5,
+		checked: t5,
+		disabled: t6,
 		type: "checkbox",
 		ref
-	}), $[13] = restProps, $[14] = t3, $[15] = t4, $[16] = t5, $[17] = t6) : t6 = $[17];
-	let t7;
-	$[18] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx(Track, {}), $[18] = t7) : t7 = $[18];
+	}), $[15] = restProps, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19];
 	let t8;
-	$[19] !== checked || $[20] !== indeterminate ? (t8 = /* @__PURE__ */ jsxs(Representation, {
+	$[20] === Symbol.for("react.memo_cache_sentinel") ? (t8 = /* @__PURE__ */ jsx(Track, {}), $[20] = t8) : t8 = $[20];
+	let t9;
+	$[21] !== checked || $[22] !== indeterminate ? (t9 = /* @__PURE__ */ jsxs(Representation, {
 		"aria-hidden": !0,
 		"data-name": "representation",
-		children: [t7, /* @__PURE__ */ jsx(Thumb, {
+		children: [t8, /* @__PURE__ */ jsx(Thumb, {
 			$checked: checked,
 			$indeterminate: indeterminate
 		})]
-	}), $[19] = checked, $[20] = indeterminate, $[21] = t8) : t8 = $[21];
-	let t9;
-	return $[22] !== className || $[23] !== style || $[24] !== t6 || $[25] !== t8 ? (t9 = /* @__PURE__ */ jsxs(StyledSwitch, {
-		className,
+	}), $[21] = checked, $[22] = indeterminate, $[23] = t9) : t9 = $[23];
+	let t10;
+	return $[24] !== style || $[25] !== t3 || $[26] !== t7 || $[27] !== t9 ? (t10 = /* @__PURE__ */ jsxs("span", {
+		className: t3,
 		"data-ui": "Switch",
 		style,
-		children: [t6, t8]
-	}), $[22] = className, $[23] = style, $[24] = t6, $[25] = t8, $[26] = t9) : t9 = $[26], t9;
-}
-const StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
-	displayName: "StyledTextArea",
-	componentId: "sc-9kktem-0"
-})(textInputRootStyle), InputRoot = styled.span.withConfig({
-	displayName: "InputRoot",
-	componentId: "sc-9kktem-1"
-})`flex:1;min-width:0;display:block;position:relative;`, Input = /* @__PURE__ */ styled.textarea.withConfig({
+		children: [t7, t9]
+	}), $[24] = style, $[25] = t3, $[26] = t7, $[27] = t9, $[28] = t10) : t10 = $[28], t10;
+}
+const Input = /* @__PURE__ */ styled.textarea.withConfig({
 	displayName: "Input",
-	componentId: "sc-9kktem-2"
+	componentId: "sc-w1fqhn-0"
 })(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "Presentation",
-	componentId: "sc-9kktem-3"
+	componentId: "sc-w1fqhn-1"
 })(responsiveRadiusStyle, textInputRepresentationStyle);
 /**
 * A multiline text input.
@@ -1848,9 +1810,13 @@ function TextArea(props) {
 		"data-tone": rootTheme.tone
 	}), $[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(StyledTextArea, {
+	return $[33] !== t12 || $[34] !== t15 ? (t16 = /* @__PURE__ */ jsx("span", {
+		className: textInputRoot,
 		"data-ui": "TextArea",
-		children: /* @__PURE__ */ jsxs(InputRoot, { children: [t12, t15] })
+		children: /* @__PURE__ */ jsxs("span", {
+			className: inputRoot,
+			children: [t12, t15]
+		})
 	}), $[33] = t12, $[34] = t15, $[35] = t16) : t16 = $[35], t16;
 }
 /**
@@ -1979,33 +1945,27 @@ function SrOnly(props) {
 		children
 	}), $[0] = Component, $[1] = children, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
 }
-const StyledVirtualList = styled.div.withConfig({
-	displayName: "StyledVirtualList",
-	componentId: "sc-50axpm-0"
-})`position:relative;`, ItemWrapper = styled.div.withConfig({
-	displayName: "ItemWrapper",
-	componentId: "sc-50axpm-1"
-})`position:absolute;left:0;right:0;`;
+var virtualList = "woi5yn0", virtualListItem = "woi5yn1";
 /**
 * @beta
 */
 function VirtualList(props) {
-	let $ = c(45), forwardedRef, getItemKey, onChange, renderItem, restProps, t0, t1, t2;
-	$[0] === props ? (forwardedRef = $[1], getItemKey = $[2], onChange = $[3], renderItem = $[4], restProps = $[5], t0 = $[6], t1 = $[7], t2 = $[8]) : ({as: t0, gap: t1, getItemKey, items: t2, onChange, ref: forwardedRef, renderItem, ...restProps} = props, $[0] = props, $[1] = forwardedRef, $[2] = getItemKey, $[3] = onChange, $[4] = renderItem, $[5] = restProps, $[6] = t0, $[7] = t1, $[8] = t2);
+	let $ = c(49), className, forwardedRef, getItemKey, onChange, renderItem, restProps, t0, t1, t2;
+	$[0] === props ? (className = $[1], forwardedRef = $[2], getItemKey = $[3], onChange = $[4], renderItem = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9]) : ({as: t0, className, gap: t1, getItemKey, items: t2, onChange, ref: forwardedRef, renderItem, ...restProps} = props, $[0] = props, $[1] = className, $[2] = forwardedRef, $[3] = getItemKey, $[4] = onChange, $[5] = renderItem, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2);
 	let as = t0 === void 0 ? "div" : t0, gap = t1 === void 0 ? 0 : t1, t3;
-	$[9] === t2 ? t3 = $[10] : (t3 = t2 === void 0 ? [] : t2, $[9] = t2, $[10] = t3);
+	$[10] === t2 ? t3 = $[11] : (t3 = t2 === void 0 ? [] : t2, $[10] = t2, $[11] = t3);
 	let items = t3, { space } = useTheme_v2(), ref = useRef(null), wrapperRef = useRef(null), [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), [itemHeight, setItemHeight] = useState(-1), t4;
-	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[11] = t4) : t4 = $[11], useImperativeHandle(forwardedRef, t4);
+	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[12] = t4) : t4 = $[12], useImperativeHandle(forwardedRef, t4);
 	let t5;
-	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
+	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
 		if (!wrapperRef.current) return;
 		let firstElement = wrapperRef.current.firstChild;
 		firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
-	}, $[12] = t5) : t5 = $[12];
+	}, $[13] = t5) : t5 = $[13];
 	let t6;
-	$[13] === renderItem ? t6 = $[14] : (t6 = [renderItem], $[13] = renderItem, $[14] = t6), useEffect(t5, t6);
+	$[14] === renderItem ? t6 = $[15] : (t6 = [renderItem], $[14] = renderItem, $[15] = t6), useEffect(t5, t6);
 	let t7, t8;
-	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => {
+	$[16] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => {
 		if (!ref.current) return;
 		let scrollEl = findScrollable(ref.current.parentNode);
 		if (scrollEl) {
@@ -2029,9 +1989,9 @@ function VirtualList(props) {
 		return window.addEventListener("scroll", handleScroll_0, { passive: !0 }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
 			window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
 		};
-	}, t8 = [], $[15] = t7, $[16] = t8) : (t7 = $[15], t8 = $[16]), useEffect(t7, t8);
+	}, t8 = [], $[16] = t7, $[17] = t8) : (t7 = $[16], t8 = $[17]), useEffect(t7, t8);
 	let len = items.length, height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0, t10, t9;
-	$[17] !== fromIndex || $[18] !== gap || $[19] !== itemHeight || $[20] !== onChange || $[21] !== scrollHeight || $[22] !== scrollTop || $[23] !== space || $[24] !== toIndex ? (t9 = () => {
+	$[18] !== fromIndex || $[19] !== gap || $[20] !== itemHeight || $[21] !== onChange || $[22] !== scrollHeight || $[23] !== scrollTop || $[24] !== space || $[25] !== toIndex ? (t9 = () => {
 		onChange && onChange({
 			fromIndex,
 			gap: space[gap],
@@ -2049,9 +2009,9 @@ function VirtualList(props) {
 		scrollTop,
 		space,
 		toIndex
-	], $[17] = fromIndex, $[18] = gap, $[19] = itemHeight, $[20] = onChange, $[21] = scrollHeight, $[22] = scrollTop, $[23] = space, $[24] = toIndex, $[25] = t10, $[26] = t9) : (t10 = $[25], t9 = $[26]), useEffect(t9, t10);
+	], $[18] = fromIndex, $[19] = gap, $[20] = itemHeight, $[21] = onChange, $[22] = scrollHeight, $[23] = scrollTop, $[24] = space, $[25] = toIndex, $[26] = t10, $[27] = t9) : (t10 = $[26], t9 = $[27]), useEffect(t9, t10);
 	let t11;
-	$[27] !== fromIndex || $[28] !== gap || $[29] !== getItemKey || $[30] !== itemHeight || $[31] !== items || $[32] !== renderItem || $[33] !== space || $[34] !== toIndex ? (t11 = {
+	$[28] !== fromIndex || $[29] !== gap || $[30] !== getItemKey || $[31] !== itemHeight || $[32] !== items || $[33] !== renderItem || $[34] !== space || $[35] !== toIndex ? (t11 = {
 		fromIndex,
 		gap,
 		itemHeight,
@@ -2060,23 +2020,25 @@ function VirtualList(props) {
 		getItemKey,
 		items,
 		renderItem
-	}, $[27] = fromIndex, $[28] = gap, $[29] = getItemKey, $[30] = itemHeight, $[31] = items, $[32] = renderItem, $[33] = space, $[34] = toIndex, $[35] = t11) : t11 = $[35];
-	let children = useChildren(t11), t12 = as, t13;
-	$[36] === height ? t13 = $[37] : (t13 = { height }, $[36] = height, $[37] = t13);
+	}, $[28] = fromIndex, $[29] = gap, $[30] = getItemKey, $[31] = itemHeight, $[32] = items, $[33] = renderItem, $[34] = space, $[35] = toIndex, $[36] = t11) : t11 = $[36];
+	let children = useChildren(t11), Component = as, t12;
+	$[37] === className ? t12 = $[38] : (t12 = clsx(virtualList, className), $[37] = className, $[38] = t12);
+	let t13;
+	$[39] === height ? t13 = $[40] : (t13 = { height }, $[39] = height, $[40] = t13);
 	let t14;
-	$[38] !== children || $[39] !== t13 ? (t14 = /* @__PURE__ */ jsx("div", {
+	$[41] !== children || $[42] !== t13 ? (t14 = /* @__PURE__ */ jsx("div", {
 		ref: wrapperRef,
 		style: t13,
 		children
-	}), $[38] = children, $[39] = t13, $[40] = t14) : t14 = $[40];
+	}), $[41] = children, $[42] = t13, $[43] = t14) : t14 = $[43];
 	let t15;
-	return $[41] !== restProps || $[42] !== t12 || $[43] !== t14 ? (t15 = /* @__PURE__ */ jsx(StyledVirtualList, {
-		as: t12,
+	return $[44] !== Component || $[45] !== restProps || $[46] !== t12 || $[47] !== t14 ? (t15 = /* @__PURE__ */ jsx(Component, {
+		className: t12,
 		"data-ui": "VirtualList",
-		...restProps,
 		ref,
+		...restProps,
 		children: t14
-	}), $[41] = restProps, $[42] = t12, $[43] = t14, $[44] = t15) : t15 = $[44], t15;
+	}), $[44] = Component, $[45] = restProps, $[46] = t12, $[47] = t14, $[48] = t15) : t15 = $[48], t15;
 }
 function useChildren(t0) {
 	let $ = c(21), { fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex } = t0;
@@ -2085,14 +2047,18 @@ function useChildren(t0) {
 		let t1;
 		$[0] !== items[0] || $[1] !== renderItem ? (t1 = renderItem(items[0]), $[0] = items[0], $[1] = renderItem, $[2] = t1) : t1 = $[2];
 		let t2;
-		return $[3] === t1 ? t2 = $[4] : (t2 = [/* @__PURE__ */ jsx(ItemWrapper, { children: t1 }, 0)], $[3] = t1, $[4] = t2), t2;
+		return $[3] === t1 ? t2 = $[4] : (t2 = [/* @__PURE__ */ jsx("div", {
+			className: virtualListItem,
+			children: t1
+		}, 0)], $[3] = t1, $[4] = t2), t2;
 	}
 	let t1;
 	if ($[5] !== fromIndex || $[6] !== gap || $[7] !== getItemKey || $[8] !== itemHeight || $[9] !== items || $[10] !== renderItem || $[11] !== space || $[12] !== toIndex) {
 		let t2;
 		$[14] !== fromIndex || $[15] !== gap || $[16] !== getItemKey || $[17] !== itemHeight || $[18] !== renderItem || $[19] !== space ? (t2 = (item, _itemIndex) => {
 			let itemIndex = fromIndex + _itemIndex, node = renderItem(item), key = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
-			return /* @__PURE__ */ jsx(ItemWrapper, {
+			return /* @__PURE__ */ jsx("div", {
+				className: virtualListItem,
 				style: { top: itemIndex * (itemHeight + space[gap]) },
 				children: node
 			}, key);