@sanity/ui 4.0.0-next.5 → 4.0.0-next.7

package/dist/index.js

@@ -1,20 +1,20 @@
 "use client";
 import { a as rem, i as _responsive, n as _getArrayProp, r as _getResponsiveSpace, s as EMPTY_RECORD, t as _fillCSSObject } from "./helpers-bwfx1e-Y.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-IbiDH7Jc.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-DhCo-b3N.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-9Pz-GG0r.js";
 import { t as Flex } from "./flex-BYRpBTOc.js";
 import { a as responsiveTextAlignStyle, i as responsiveTextFont, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-C5WV-BRh.js";
 import { t as responsiveFont } from "./responsiveFont-hN1mZFjm.js";
-import { n as Spinner, t as Button } from "./button-DZkAQOL2.js";
+import { n as Spinner, t as Button } from "./button-BDLRd1Rr.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-BG0EMNiC.js";
+import { a as useBoundaryElement, i as PortalContext, n as Portal, o as BoundaryElementContext, r as usePortal, t as Arrow } from "./arrow-BaxgKzOL.js";
 import { t as useClickOutsideEvent } from "./useClickOutsideEvent-lEVhDFCQ.js";
 import { t as responsiveCodeFontStyle } from "./codeFontStyle-DYUujk7K.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-CvRcEQ36.js";
-import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-B08HIKNu.js";
-import { t as Layer } from "./layer-BdkSGATt.js";
+import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-aHdaZFAl.js";
+import { t as Layer } from "./layer-DeCVQfUb.js";
 import { t as Grid } from "./grid-D88j-N7f.js";
 import { c } from "react/compiler-runtime";
 import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
@@ -95,26 +95,27 @@ function isTargetWithinScope(boundaryElement, portalElement, target) {
 }
 const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
 	displayName: "StyledDialog",
-	componentId: "sc-f4qz6x-0"
+	componentId: "sc-4a2na0-0"
 })(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container).withConfig({
 	displayName: "DialogContainer",
-	componentId: "sc-f4qz6x-1"
+	componentId: "sc-4a2na0-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-f4qz6x-2"
+	componentId: "sc-4a2na0-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-f4qz6x-3"
+	componentId: "sc-4a2na0-3"
 })`flex:1;min-height:0;width:100%;`, DialogHeader = styled(Box).withConfig({
 	displayName: "DialogHeader",
-	componentId: "sc-f4qz6x-4"
+	componentId: "sc-4a2na0-4"
 })`position:relative;z-index:2;`, DialogContent = styled(Box).withConfig({
 	displayName: "DialogContent",
-	componentId: "sc-f4qz6x-5"
+	componentId: "sc-4a2na0-5"
 })`position:relative;z-index:1;overflow:auto;outline:none;`, DialogFooter = styled(Box).withConfig({
 	displayName: "DialogFooter",
-	componentId: "sc-f4qz6x-6"
-})`position:relative;z-index:3;`, DialogCard = function DialogCard(props) {
+	componentId: "sc-4a2na0-6"
+})`position:relative;z-index:3;`;
+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);
 	let radius = t0, t1;
@@ -199,7 +200,13 @@ const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
 		width,
 		children: t14
 	}), $[41] = t14, $[42] = width, $[43] = t15) : t15 = $[43], t15;
-}, Dialog = function Dialog(props) {
+}
+/**
+* The Dialog component.
+*
+* @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 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;
@@ -296,7 +303,7 @@ const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
 		__unstable_name: portalProp,
 		children: t17
 	}), $[68] = portalProp, $[69] = t17, $[70] = t18) : t18 = $[70], t18;
-};
+}
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
@@ -316,8 +323,13 @@ function DialogProvider(props) {
 }
 const 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:${keyframes`0%{background-position:100%;}100%{background-position:-100%;}`};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({
 	displayName: "StyledSkeleton",
-	componentId: "sc-59oe48-0"
-})(responsiveRadiusStyle, skeletonStyle), Skeleton = function Skeleton(props) {
+	componentId: "sc-9cw2s-0"
+})(responsiveRadiusStyle, skeletonStyle);
+/**
+* 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 animated = t0 !== void 0 && t0, [visible, setVisible] = useState(!delay), t1, t2;
@@ -340,16 +352,22 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 		$visible: t4,
 		ref
 	}), $[11] = animated, $[12] = ref, $[13] = restProps, $[14] = t3, $[15] = t4, $[16] = t5) : t5 = $[16], t5;
-}, StyledSkeleton = /* @__PURE__ */ styled(Skeleton).withConfig({
+}
+const StyledSkeleton = /* @__PURE__ */ styled(Skeleton).withConfig({
 	displayName: "StyledSkeleton",
-	componentId: "sc-67ip5v-0"
+	componentId: "sc-dq8t4f-0"
 })((props) => {
 	let { $size, $style } = props, { font, media } = getTheme_v2(props.theme), fontStyle = font[$style];
 	return _responsive(media, $size, (sizeIndex) => {
 		let fontSize = fontStyle.sizes[sizeIndex];
 		return { height: fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight };
 	});
-}), TextSkeleton = function TextSkeleton(props) {
+});
+/**
+* This API might change. DO NOT USE IN PRODUCTION.
+* @beta
+*/
+function TextSkeleton(props) {
 	let $ = c(8), restProps, t0;
 	$[0] === props ? (restProps = $[1], t0 = $[2]) : ({size: t0, ...restProps} = props, $[0] = props, $[1] = restProps, $[2] = t0);
 	let size = t0 === void 0 ? 2 : t0, t1;
@@ -360,7 +378,12 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 		$size,
 		$style: "text"
 	}), $[5] = $size, $[6] = restProps, $[7] = t2) : t2 = $[7], t2;
-}, LabelSkeleton = function LabelSkeleton(props) {
+}
+/**
+* This API might change. DO NOT USE IN PRODUCTION.
+* @beta
+*/
+function LabelSkeleton(props) {
 	let $ = c(8), restProps, t0;
 	$[0] === props ? (restProps = $[1], t0 = $[2]) : ({size: t0, ...restProps} = props, $[0] = props, $[1] = restProps, $[2] = t0);
 	let size = t0 === void 0 ? 2 : t0, t1;
@@ -371,7 +394,12 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 		$size,
 		$style: "label"
 	}), $[5] = $size, $[6] = restProps, $[7] = t2) : t2 = $[7], t2;
-}, HeadingSkeleton = function HeadingSkeleton(props) {
+}
+/**
+* This API might change. DO NOT USE IN PRODUCTION.
+* @beta
+*/
+function HeadingSkeleton(props) {
 	let $ = c(8), restProps, t0;
 	$[0] === props ? (restProps = $[1], t0 = $[2]) : ({size: t0, ...restProps} = props, $[0] = props, $[1] = restProps, $[2] = t0);
 	let size = t0 === void 0 ? 2 : t0, t1;
@@ -382,7 +410,12 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 		$size,
 		$style: "heading"
 	}), $[5] = $size, $[6] = restProps, $[7] = t2) : t2 = $[7], t2;
-}, CodeSkeleton = function CodeSkeleton(props) {
+}
+/**
+* This API might change. DO NOT USE IN PRODUCTION.
+* @beta
+*/
+function CodeSkeleton(props) {
 	let $ = c(8), restProps, t0;
 	$[0] === props ? (restProps = $[1], t0 = $[2]) : ({size: t0, ...restProps} = props, $[0] = props, $[1] = restProps, $[2] = t0);
 	let size = t0 === void 0 ? 2 : t0, t1;
@@ -393,10 +426,15 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 		$size,
 		$style: "code"
 	}), $[5] = $size, $[6] = restProps, $[7] = t2) : t2 = $[7], t2;
-}, CustomButton = styled(Button).withConfig({
+}
+const CustomButton = styled(Button).withConfig({
 	displayName: "CustomButton",
-	componentId: "sc-c5oqtq-0"
-})`max-width:100%;`, Tab = function Tab(props) {
+	componentId: "sc-bacfyt-0"
+})`max-width:100%;`;
+/**
+* @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 fontSize = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 2 : t1, ref = useRef(null), focusedRef = useRef(!1), t2;
@@ -433,10 +471,15 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 		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;
-}, CustomInline = styled(Inline).withConfig({
+}
+const CustomInline = styled(Inline).withConfig({
 	displayName: "CustomInline",
-	componentId: "sc-dib7x4-0"
-})`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`, TabList = function TabList(props) {
+	componentId: "sc-uahcjl-0"
+})`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`;
+/**
+* @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 [focusedIndex, setFocusedIndex] = useState(-1), t0;
@@ -461,7 +504,11 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 		role: "tablist",
 		children: tabs
 	}), $[11] = handleKeyDown, $[12] = ref, $[13] = restProps, $[14] = tabs, $[15] = t2) : t2 = $[15], t2;
-}, TabPanel = function TabPanel(props) {
+}
+/**
+* @public
+*/
+function TabPanel(props) {
 	let $ = c(8), flex, restProps;
 	$[0] === props ? (flex = $[1], restProps = $[2]) : ({flex, ...restProps} = props, $[0] = props, $[1] = flex, $[2] = restProps);
 	let t0 = props.tabIndex === void 0 ? 0 : props.tabIndex, t1;
@@ -473,7 +520,7 @@ const animation = css`background-image:linear-gradient( to right,var(--card-skel
 		tabIndex: t0,
 		children: props.children
 	}), $[3] = flex, $[4] = props.children, $[5] = restProps, $[6] = t0, $[7] = t1) : t1 = $[7], t1;
-};
+}
 function _findPrevItemElement(state, itemElements, focusedElement) {
 	let idx = itemElements.indexOf(focusedElement), els = itemElements.slice(0, idx), len = els.length;
 	for (let i = len - 1; i >= 0; --i) {
@@ -516,7 +563,12 @@ function _focusItemElement(el) {
 /**
 * @internal
 */
-const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null), Tree = function Tree(props) {
+const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null);
+/**
+* This API might change. DO NOT USE IN PRODUCTION.
+* @beta
+*/
+function Tree(props) {
 	let $ = c(38), children, forwardedRef, onFocus, restProps, t0;
 	$[0] === props ? (children = $[1], forwardedRef = $[2], onFocus = $[3], restProps = $[4], t0 = $[5]) : ({children, gap: t0, onFocus, ref: forwardedRef, ...restProps} = props, $[0] = props, $[1] = children, $[2] = forwardedRef, $[3] = onFocus, $[4] = restProps, $[5] = t0);
 	let gap = t0 === void 0 ? 1 : t0, ref = useRef(null), [focusedElement, setFocusedElement] = useState(null), focusedElementRef = useRef(focusedElement), t1;
@@ -659,7 +711,7 @@ const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null),
 		value: contextValue,
 		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;}}`;
 }
@@ -1224,8 +1276,12 @@ function _avatarCounterBaseStyle(props) {
 }
 const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledAvatarCounter",
-	componentId: "sc-yu8lrc-0"
-})(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = function AvatarCounter(props) {
+	componentId: "sc-tzf8eq-0"
+})(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
+/**
+* @public
+*/
+function AvatarCounter(props) {
 	let $ = c(20), { count, ref, size: t0 } = props, sizeProp = t0 === void 0 ? 1 : t0, T0, T1, t1, t2, t3, t4, t5;
 	if ($[0] !== ref || $[1] !== sizeProp) {
 		let size = _getArrayProp(sizeProp);
@@ -1245,7 +1301,7 @@ const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
 		ref: t5,
 		children: t6
 	}), $[14] = T1, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
-};
+}
 function _temp$1(s) {
 	return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
 }
@@ -1262,8 +1318,12 @@ function responsiveAvatarStackSizeStyle(props) {
 }
 const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledAvatarStack",
-	componentId: "sc-qgrvgi-0"
-})(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = function AvatarStack(props) {
+	componentId: "sc-lhp7nq-0"
+})(responsiveAvatarStackSizeStyle, avatarStackStyle);
+/**
+* @public
+*/
+function AvatarStack(props) {
 	let $ = c(39), childrenProp, ref, restProps, t0, t1;
 	$[0] === props ? (childrenProp = $[1], ref = $[2], restProps = $[3], t0 = $[4], t1 = $[5]) : ({children: childrenProp, maxLength: t0, ref, size: t1, ...restProps} = props, $[0] = props, $[1] = childrenProp, $[2] = ref, $[3] = restProps, $[4] = t0, $[5] = t1);
 	let maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, T0, t2, t3, t4, t5, t6, t7, t8;
@@ -1293,7 +1353,7 @@ const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
 			t8
 		]
 	}), $[30] = T0, $[31] = t2, $[32] = t3, $[33] = t4, $[34] = t5, $[35] = t6, $[36] = t7, $[37] = t8, $[38] = t9) : t9 = $[38], t9;
-};
+}
 function badgeStyle(props) {
 	let { $tone } = props;
 	return {
@@ -1369,11 +1429,17 @@ function inputElementStyles(props) {
 }
 const StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledCheckbox",
-	componentId: "sc-5kl5pw-0"
+	componentId: "sc-zlqryb-0"
 })(checkboxBaseStyles), Input$4 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-5kl5pw-1"
-})(inputElementStyles), Checkbox = function Checkbox(props) {
+	componentId: "sc-zlqryb-1"
+})(inputElementStyles);
+/**
+* Checkboxes allow the user to select one or more items from a set.
+*
+* @public
+*/
+function Checkbox(props) {
 	let $ = c(26), 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;
@@ -1402,7 +1468,7 @@ const StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
 		style,
 		children: [t6, t7]
 	}), $[22] = className, $[23] = style, $[24] = t6, $[25] = t8) : t8 = $[25], t8;
-};
+}
 /**
 * Get responsive CSS for the `heading` font style.
 * @internal
@@ -1468,11 +1534,17 @@ function inputElementStyle(props) {
 }
 const StyledRadio = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledRadio",
-	componentId: "sc-e0cih5-0"
+	componentId: "sc-q0nfb5-0"
 })(radioBaseStyle), Input$3 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-e0cih5-1"
-})(inputElementStyle), Radio = function Radio(props) {
+	componentId: "sc-q0nfb5-1"
+})(inputElementStyle);
+/**
+* The `Radio` component allows the user to select one option from a set.
+*
+* @public
+*/
+function Radio(props) {
 	let $ = c(20), 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;
@@ -1496,7 +1568,7 @@ const StyledRadio = /* @__PURE__ */ styled.div.withConfig({
 		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;}`;
 }
@@ -1555,14 +1627,20 @@ const selectStyle = {
 	iconBox: iconBoxStyle
 }, StyledSelect = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledSelect",
-	componentId: "sc-2oiwac-0"
+	componentId: "sc-y93hdm-0"
 })(selectStyle.root), Input$2 = /* @__PURE__ */ styled.select.withConfig({
 	displayName: "Input",
-	componentId: "sc-2oiwac-1"
+	componentId: "sc-y93hdm-1"
 })(selectStyle.input), IconBox = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "IconBox",
-	componentId: "sc-2oiwac-2"
-})(selectStyle.iconBox), Select = function Select(props) {
+	componentId: "sc-y93hdm-2"
+})(selectStyle.iconBox);
+/**
+* The `Select` component provides control of options.
+*
+* @public
+*/
+function Select(props) {
 	let $ = c(38), children, customValidity, disabled, forwardedRef, readOnly, restProps, t0, t1, t2, t3;
 	$[0] === props ? (children = $[1], customValidity = $[2], disabled = $[3], forwardedRef = $[4], readOnly = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9], t3 = $[10]) : ({children, customValidity, disabled, fontSize: t0, gap: t1, padding: t2, radius: t3, readOnly, ref: forwardedRef, ...restProps} = props, $[0] = props, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = forwardedRef, $[5] = readOnly, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2, $[10] = t3);
 	let fontSize = t0 === void 0 ? 2 : t0, gap = t1 === void 0 ? 3 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, ref = useRef(null), t4;
@@ -1605,7 +1683,7 @@ const selectStyle = {
 		"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;}`;
 }
@@ -1626,20 +1704,28 @@ function switchThumbStyles(props) {
 }
 const StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "StyledSwitch",
-	componentId: "sc-izcn12-0"
+	componentId: "sc-wrpexm-0"
 })(switchBaseStyles), Input$1 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-izcn12-1"
+	componentId: "sc-wrpexm-1"
 })(switchInputStyles), Representation = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Representation",
-	componentId: "sc-izcn12-2"
+	componentId: "sc-wrpexm-2"
 })(switchRepresentationStyles), Track = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Track",
-	componentId: "sc-izcn12-3"
+	componentId: "sc-wrpexm-3"
 })(switchTrackStyles), Thumb = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Thumb",
-	componentId: "sc-izcn12-4"
-})(switchThumbStyles), Switch = function Switch(props) {
+	componentId: "sc-wrpexm-4"
+})(switchThumbStyles);
+/**
+* The `Switch` component allows the user to toggle a setting on and off.
+*
+* Extends all properties of an `<input type="checkbox" />` element, except type.
+*
+* @public
+*/
+function Switch(props) {
 	let $ = c(27), 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;
@@ -1675,19 +1761,27 @@ const StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
 		style,
 		children: [t6, t8]
 	}), $[22] = className, $[23] = style, $[24] = t6, $[25] = t8, $[26] = t9) : t9 = $[26], t9;
-}, StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
+}
+const StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "StyledTextArea",
-	componentId: "sc-x52v3e-0"
+	componentId: "sc-4tncul-0"
 })(textInputRootStyle), InputRoot = styled.span.withConfig({
 	displayName: "InputRoot",
-	componentId: "sc-x52v3e-1"
+	componentId: "sc-4tncul-1"
 })`flex:1;min-width:0;display:block;position:relative;`, Input = /* @__PURE__ */ styled.textarea.withConfig({
 	displayName: "Input",
-	componentId: "sc-x52v3e-2"
+	componentId: "sc-4tncul-2"
 })(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "Presentation",
-	componentId: "sc-x52v3e-3"
-})(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = function TextArea(props) {
+	componentId: "sc-4tncul-3"
+})(responsiveRadiusStyle, textInputRepresentationStyle);
+/**
+* A multiline text input.
+*
+
+* @public
+*/
+function TextArea(props) {
 	let $ = c(36), __unstable_disableFocusRing, customValidity, forwardedRef, restProps, t0, t1, t2, t3, t4, weight;
 	$[0] === props ? (__unstable_disableFocusRing = $[1], customValidity = $[2], forwardedRef = $[3], restProps = $[4], t0 = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9], weight = $[10]) : ({border: t0, customValidity, disabled: t1, fontSize: t2, padding: t3, radius: t4, ref: forwardedRef, weight, __unstable_disableFocusRing, ...restProps} = props, $[0] = props, $[1] = __unstable_disableFocusRing, $[2] = customValidity, $[3] = forwardedRef, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4, $[10] = weight);
 	let border = t0 === void 0 || t0, disabled = t1 !== void 0 && t1, fontSize = t2 === void 0 ? 2 : t2, padding = t3 === void 0 ? 3 : t3, radius = t4 === void 0 ? 2 : t4, ref = useRef(null), rootTheme = useRootTheme(), t5;
@@ -1730,7 +1824,7 @@ const StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
 		"data-ui": "TextArea",
 		children: /* @__PURE__ */ jsxs(InputRoot, { children: [t12, t15] })
 	}), $[33] = t12, $[34] = t15, $[35] = t16) : t16 = $[35], t16;
-};
+}
 /**
 * @public
 */
@@ -1767,7 +1861,7 @@ function findMinBreakpoints(media, width) {
 * DO NOT USE IN PRODUCTION.
 * @beta
 */
-const ElementQuery = function ElementQuery(props) {
+function ElementQuery(props) {
 	let $ = c(19), theme = useTheme_v2(), _media, children, forwardedRef, restProps;
 	$[0] === props ? (_media = $[1], children = $[2], forwardedRef = $[3], restProps = $[4]) : ({children, media: _media, ref: forwardedRef, ...restProps} = props, $[0] = props, $[1] = _media, $[2] = children, $[3] = forwardedRef, $[4] = restProps);
 	let media = _media ?? theme.media, [element, setElement] = useState(null), width = useElementSize(element)?.border.width ?? window.innerWidth, t0;
@@ -1791,7 +1885,7 @@ const ElementQuery = function ElementQuery(props) {
 		ref: setElement,
 		children
 	}), $[14] = children, $[15] = max, $[16] = min, $[17] = restProps, $[18] = t4) : t4 = $[18], t4;
-};
+}
 /**
 * DO NOT USE IN PRODUCTION
 * @beta
@@ -1843,7 +1937,7 @@ var srOnly = "_1omd6w40";
 /**
 * @public
 */
-const SrOnly = function SrOnly(props) {
+function SrOnly(props) {
 	let $ = c(4), { as: t0, children, ref } = props, Component = t0 === void 0 ? "div" : t0, t1;
 	return $[0] !== Component || $[1] !== children || $[2] !== ref ? (t1 = /* @__PURE__ */ jsx(Component, {
 		"aria-hidden": !0,
@@ -1852,13 +1946,18 @@ const SrOnly = function SrOnly(props) {
 		ref,
 		children
 	}), $[0] = Component, $[1] = children, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
-}, StyledVirtualList = styled.div.withConfig({
+}
+const StyledVirtualList = styled.div.withConfig({
 	displayName: "StyledVirtualList",
-	componentId: "sc-ltnren-0"
+	componentId: "sc-ewb1cb-0"
 })`position:relative;`, ItemWrapper = styled.div.withConfig({
 	displayName: "ItemWrapper",
-	componentId: "sc-ltnren-1"
-})`position:absolute;left:0;right:0;`, VirtualList = function VirtualList(props) {
+	componentId: "sc-ewb1cb-1"
+})`position:absolute;left:0;right:0;`;
+/**
+* @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 as = t0 === void 0 ? "div" : t0, gap = t1 === void 0 ? 0 : t1, t3;
@@ -1946,7 +2045,7 @@ const SrOnly = function SrOnly(props) {
 		ref,
 		children: t13
 	}), $[41] = as, $[42] = restProps, $[43] = t13, $[44] = t14) : t14 = $[44], t14;
-};
+}
 function useChildren(t0) {
 	let $ = c(21), { fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex } = t0;
 	if (!renderItem || items.length === 0) return null;