@sanity/ui 4.0.4 → 4.0.6

package/dist/index.js

@@ -1,21 +1,21 @@
 "use client";
-import { a as rem, i as _responsive, n as _getArrayProp, r as _getResponsiveSpace, s as EMPTY_RECORD, t as _fillCSSObject } from "./helpers-JV5y3U_M.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-CgNWWr7H.js";
+import { a as rem, i as _responsive, n as _getArrayProp, r as _getResponsiveSpace, s as EMPTY_RECORD, t as _fillCSSObject } from "./helpers-CmuDTEVl.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-Cp2Jvgw1.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-UpfaKlm7.js";
-import { t as Flex } from "./flex-C9NHtXFi.js";
-import { a as responsiveTextAlignStyle, i as responsiveTextFont, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-B2zXPxzb.js";
-import { t as responsiveFont } from "./responsiveFont-BwYElGq4.js";
-import { n as Spinner, t as Button } from "./button-QO2lWHVH.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-DzgZ2cTe.js";
+import { t as Flex } from "./flex-CDMKJ54v.js";
+import { a as responsiveTextAlignStyle, i as responsiveTextFont, n as Text, r as SpanWithTextOverflow, t as Stack } from "./stack-BKKeh5M0.js";
+import { t as responsiveFont } from "./responsiveFont-CYyTL7C5.js";
+import { n as Spinner, t as Button } from "./button-DPIMguMh.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-D0mvjJMb.js";
-import { t as useClickOutsideEvent } from "./useClickOutsideEvent-DbLUuPQ6.js";
-import { t as responsiveCodeFontStyle } from "./codeFontStyle-aWvllgWi.js";
+import { a as useBoundaryElement, i as PortalContext, n as Portal, o as BoundaryElementContext, r as usePortal, t as Arrow } from "./arrow-BBpqkhzC.js";
+import { t as useClickOutsideEvent } from "./useClickOutsideEvent-CQ40LrHo.js";
+import { t as responsiveCodeFontStyle } from "./codeFontStyle-DHrcV3wD.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-DyrSy500.js";
-import { t as Layer } from "./layer-DcsNupeg.js";
-import { t as Grid } from "./grid-Cr7qKmZQ.js";
+import { i as useGlobalKeyDown, n as KBD, r as Inline, t as Hotkeys } from "./hotkeys-B8-FMlBd.js";
+import { t as Layer } from "./layer-BQuAIq9M.js";
+import { t as Grid } from "./grid-CFhbAO8d.js";
 import { c } from "react/compiler-runtime";
 import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
 import { Children, Component, cloneElement, isValidElement, startTransition, useContext, useEffect, useId, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
@@ -43,7 +43,7 @@ function responsiveContainerWidthStyle(props) {
 }
 const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "StyledContainer",
-	componentId: "sc-4jno4k-0"
+	componentId: "sc-bmdunn-0"
 })(containerBaseStyle, responsiveContainerWidthStyle);
 function ContainerComponent(props) {
 	let $ = c(12), as, ref, restProps, t0;
@@ -102,25 +102,25 @@ function isTargetWithinScope(boundaryElement, portalElement, target) {
 }
 const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
 	displayName: "StyledDialog",
-	componentId: "sc-4a2na0-0"
+	componentId: "sc-1shthr-0"
 })(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container).withConfig({
 	displayName: "DialogContainer",
-	componentId: "sc-4a2na0-1"
+	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-4a2na0-2"
+	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-4a2na0-3"
+	componentId: "sc-1shthr-3"
 })`flex:1;min-height:0;width:100%;`, DialogHeader = styled(Box).withConfig({
 	displayName: "DialogHeader",
-	componentId: "sc-4a2na0-4"
+	componentId: "sc-1shthr-4"
 })`position:relative;z-index:2;`, DialogContent = styled(Box).withConfig({
 	displayName: "DialogContent",
-	componentId: "sc-4a2na0-5"
+	componentId: "sc-1shthr-5"
 })`position:relative;z-index:1;overflow:auto;outline:none;`, DialogFooter = styled(Box).withConfig({
 	displayName: "DialogFooter",
-	componentId: "sc-4a2na0-6"
+	componentId: "sc-1shthr-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;
@@ -330,7 +330,7 @@ function DialogProvider(props) {
 }
 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({
 	displayName: "StyledSkeleton",
-	componentId: "sc-9cw2s-0"
+	componentId: "sc-o7fi9r-0"
 })(responsiveRadiusStyle, skeletonStyle);
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
@@ -362,7 +362,7 @@ function Skeleton(props) {
 }
 const StyledSkeleton = /* @__PURE__ */ styled(Skeleton).withConfig({
 	displayName: "StyledSkeleton",
-	componentId: "sc-dq8t4f-0"
+	componentId: "sc-bpgwdc-0"
 })((props) => {
 	let { $size, $style } = props, { font, media } = getTheme_v2(props.theme), fontStyle = font[$style];
 	return _responsive(media, $size, (sizeIndex) => {
@@ -436,7 +436,7 @@ function CodeSkeleton(props) {
 }
 const CustomButton = styled(Button).withConfig({
 	displayName: "CustomButton",
-	componentId: "sc-bacfyt-0"
+	componentId: "sc-6g1gey-0"
 })`max-width:100%;`;
 /**
 * @public
@@ -481,7 +481,7 @@ function Tab(props) {
 }
 const CustomInline = styled(Inline).withConfig({
 	displayName: "CustomInline",
-	componentId: "sc-uahcjl-0"
+	componentId: "sc-m22lpv-0"
 })`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`;
 /**
 * @public
@@ -755,13 +755,13 @@ function TreeGroup(props) {
 }
 const StyledTreeItem = /* @__PURE__ */ styled.li.withConfig({
 	displayName: "StyledTreeItem",
-	componentId: "sc-d4xra6-0"
+	componentId: "sc-8603jr-0"
 })(treeItemRootStyle, treeItemRootColorStyle), TreeItemBox = /* @__PURE__ */ styled.a.withConfig({
 	displayName: "TreeItemBox",
-	componentId: "sc-d4xra6-1"
+	componentId: "sc-8603jr-1"
 })(treeItemBoxStyle), ToggleArrowText = styled(Text).withConfig({
 	displayName: "ToggleArrowText",
-	componentId: "sc-d4xra6-2"
+	componentId: "sc-8603jr-2"
 })`& > svg{transition:transform 100ms;}`;
 /**
 * This API might change. DO NOT USE IN PRODUCTION.
@@ -1005,7 +1005,7 @@ function labelBaseStyle(props) {
 }
 const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledLabel",
-	componentId: "sc-73f3t9-0"
+	componentId: "sc-43585o-0"
 })(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
 function LabelComponent(props) {
 	let $ = c(27), accent, align, childrenProp, ref, restProps, t0, t1, textOverflow, weight;
@@ -1159,25 +1159,25 @@ function avatarStrokeStyle() {
 }
 const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledAvatar",
-	componentId: "sc-70v725-0"
+	componentId: "sc-myyy04-0"
 })(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "Arrow",
-	componentId: "sc-70v725-1"
+	componentId: "sc-myyy04-1"
 })(avatarStyle.arrow), BgStroke = /* @__PURE__ */ styled.ellipse.withConfig({
 	displayName: "BgStroke",
-	componentId: "sc-70v725-2"
+	componentId: "sc-myyy04-2"
 })(avatarStyle.bgStroke), Stroke = /* @__PURE__ */ styled.ellipse.withConfig({
 	displayName: "Stroke",
-	componentId: "sc-70v725-3"
+	componentId: "sc-myyy04-3"
 })(avatarStyle.stroke), Initials = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "Initials",
-	componentId: "sc-70v725-4"
+	componentId: "sc-myyy04-4"
 })(avatarStyle.initials), InitialsLabel = /* @__PURE__ */ styled(Label).withConfig({
 	displayName: "InitialsLabel",
-	componentId: "sc-70v725-5"
+	componentId: "sc-myyy04-5"
 })({ color: "inherit" }), AvatarImage = /* @__PURE__ */ styled.svg.withConfig({
 	displayName: "AvatarImage",
-	componentId: "sc-70v725-6"
+	componentId: "sc-myyy04-6"
 })(avatarStyle.image);
 function AvatarComponent(props) {
 	let $ = c(47), __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, ref, restProps, src, t0, t1, t2, title;
@@ -1271,14 +1271,14 @@ function AvatarComponent(props) {
 		]
 	}), $[33] = T0, $[34] = arrowPosition, $[35] = as, $[36] = color, $[37] = ref, $[38] = restProps, $[39] = size, $[40] = status, $[41] = t10, $[42] = t11, $[43] = t12, $[44] = t8, $[45] = title, $[46] = t13) : t13 = $[46], t13;
 }
+function _temp$2(s) {
+	return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
 /**
 * Avatars are used to represent people and other agents (e.g. bots).
 *
 * @public
 */
-function _temp$2(s) {
-	return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
-}
 const Avatar = AvatarComponent;
 function _responsiveAvatarCounterSizeStyle(props) {
 	let { avatar, media } = getTheme_v2(props.theme);
@@ -1297,7 +1297,7 @@ function _avatarCounterBaseStyle(props) {
 }
 const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledAvatarCounter",
-	componentId: "sc-tzf8eq-0"
+	componentId: "sc-rwjooy-0"
 })(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 /**
 * @public
@@ -1339,7 +1339,7 @@ function responsiveAvatarStackSizeStyle(props) {
 }
 const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledAvatarStack",
-	componentId: "sc-lhp7nq-0"
+	componentId: "sc-oq0y9h-0"
 })(responsiveAvatarStackSizeStyle, avatarStackStyle);
 /**
 * @public
@@ -1390,7 +1390,7 @@ function badgeStyle(props) {
 }
 const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "StyledBadge",
-	componentId: "sc-vbjdyi-0"
+	componentId: "sc-zj5mk0-0"
 })(responsiveRadiusStyle, badgeStyle), Badge = function Badge(props) {
 	let $ = c(22), children, ref, restProps, t0, t1, t2, t3;
 	$[0] === props ? (children = $[1], ref = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7]) : ({children, fontSize: t0, padding: t1, radius: t2, ref, tone: t3, ...restProps} = props, $[0] = props, $[1] = children, $[2] = ref, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3);
@@ -1450,10 +1450,10 @@ function inputElementStyles(props) {
 }
 const StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledCheckbox",
-	componentId: "sc-zlqryb-0"
+	componentId: "sc-kbhc49-0"
 })(checkboxBaseStyles), Input$4 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-zlqryb-1"
+	componentId: "sc-kbhc49-1"
 })(inputElementStyles);
 /**
 * Checkboxes allow the user to select one or more items from a set.
@@ -1503,7 +1503,7 @@ function headingBaseStyle(props) {
 }
 const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledHeading",
-	componentId: "sc-qdvbbh-0"
+	componentId: "sc-95f8ng-0"
 })(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
 function HeadingComponent(props) {
 	let $ = c(27), align, childrenProp, ref, restProps, t0, t1, t2, textOverflow, weight;
@@ -1562,10 +1562,10 @@ function inputElementStyle(props) {
 }
 const StyledRadio = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledRadio",
-	componentId: "sc-q0nfb5-0"
+	componentId: "sc-4nk2uw-0"
 })(radioBaseStyle), Input$3 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-q0nfb5-1"
+	componentId: "sc-4nk2uw-1"
 })(inputElementStyle);
 /**
 * The `Radio` component allows the user to select one option from a set.
@@ -1655,13 +1655,13 @@ const selectStyle = {
 	iconBox: iconBoxStyle
 }, StyledSelect = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "StyledSelect",
-	componentId: "sc-y93hdm-0"
+	componentId: "sc-lvajsx-0"
 })(selectStyle.root), Input$2 = /* @__PURE__ */ styled.select.withConfig({
 	displayName: "Input",
-	componentId: "sc-y93hdm-1"
+	componentId: "sc-lvajsx-1"
 })(selectStyle.input), IconBox = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "IconBox",
-	componentId: "sc-y93hdm-2"
+	componentId: "sc-lvajsx-2"
 })(selectStyle.iconBox);
 /**
 * The `Select` component provides control of options.
@@ -1732,19 +1732,19 @@ function switchThumbStyles(props) {
 }
 const StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "StyledSwitch",
-	componentId: "sc-wrpexm-0"
+	componentId: "sc-fsy8ck-0"
 })(switchBaseStyles), Input$1 = /* @__PURE__ */ styled.input.withConfig({
 	displayName: "Input",
-	componentId: "sc-wrpexm-1"
+	componentId: "sc-fsy8ck-1"
 })(switchInputStyles), Representation = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Representation",
-	componentId: "sc-wrpexm-2"
+	componentId: "sc-fsy8ck-2"
 })(switchRepresentationStyles), Track = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Track",
-	componentId: "sc-wrpexm-3"
+	componentId: "sc-fsy8ck-3"
 })(switchTrackStyles), Thumb = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "Thumb",
-	componentId: "sc-wrpexm-4"
+	componentId: "sc-fsy8ck-4"
 })(switchThumbStyles);
 /**
 * The `Switch` component allows the user to toggle a setting on and off.
@@ -1792,16 +1792,16 @@ function Switch(props) {
 }
 const StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
 	displayName: "StyledTextArea",
-	componentId: "sc-4tncul-0"
+	componentId: "sc-9kktem-0"
 })(textInputRootStyle), InputRoot = styled.span.withConfig({
 	displayName: "InputRoot",
-	componentId: "sc-4tncul-1"
+	componentId: "sc-9kktem-1"
 })`flex:1;min-width:0;display:block;position:relative;`, Input = /* @__PURE__ */ styled.textarea.withConfig({
 	displayName: "Input",
-	componentId: "sc-4tncul-2"
+	componentId: "sc-9kktem-2"
 })(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled.div.withConfig({
 	displayName: "Presentation",
-	componentId: "sc-4tncul-3"
+	componentId: "sc-9kktem-3"
 })(responsiveRadiusStyle, textInputRepresentationStyle);
 /**
 * A multiline text input.
@@ -1981,10 +1981,10 @@ function SrOnly(props) {
 }
 const StyledVirtualList = styled.div.withConfig({
 	displayName: "StyledVirtualList",
-	componentId: "sc-5jra5s-0"
+	componentId: "sc-50axpm-0"
 })`position:relative;`, ItemWrapper = styled.div.withConfig({
 	displayName: "ItemWrapper",
-	componentId: "sc-5jra5s-1"
+	componentId: "sc-50axpm-1"
 })`position:absolute;left:0;right:0;`;
 /**
 * @beta