@sanity/ui 2.10.18-canary.0 → 2.10.18

package/dist/index.esm.js

@@ -1426,6 +1426,10 @@ function responsiveShadowStyle(props) {
   } = getTheme_v2(props.theme);
   return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
 }
+const SpanWithTextOverflow = styled.span.withConfig({
+  displayName: "SpanWithTextOverflow",
+  componentId: "sc-ol2i3b-0"
+})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`;
 function labelBaseStyle(props) {
   const {
     $accent,
@@ -1465,13 +1469,10 @@ function labelBaseStyle(props) {
     }
   `;
 }
-const Root$C = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledLabel",
   componentId: "sc-1luap7z-0"
-})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styled.span.withConfig({
-  displayName: "SpanWithTextOverflow",
-  componentId: "sc-1luap7z-1"
-})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Label = forwardRef(function(props, ref) {
+})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = forwardRef(function(props, ref) {
   const $ = c(22);
   let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
@@ -1488,14 +1489,14 @@ const Root$C = /* @__PURE__ */ styled.div.withConfig({
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
     let t22;
-    $[9] !== children ? (t22 = /* @__PURE__ */ jsx(SpanWithTextOverflow$2, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
+    $[9] !== children ? (t22 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
   } else {
     let t22;
     $[11] !== children ? (t22 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t22) : t22 = $[12], children = t22;
   }
   const t2 = useArrayProp(align), t3 = useArrayProp(size2);
   let t4;
-  return $[13] !== accent || $[14] !== children || $[15] !== muted || $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== weight ? (t4 = /* @__PURE__ */ jsx(Root$C, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[13] = accent, $[14] = children, $[15] = muted, $[16] = ref, $[17] = restProps, $[18] = t2, $[19] = t3, $[20] = weight, $[21] = t4) : t4 = $[21], t4;
+  return $[13] !== accent || $[14] !== children || $[15] !== muted || $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== weight ? (t4 = /* @__PURE__ */ jsx(StyledLabel, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[13] = accent, $[14] = children, $[15] = muted, $[16] = ref, $[17] = restProps, $[18] = t2, $[19] = t3, $[20] = weight, $[21] = t4) : t4 = $[21], t4;
 });
 Label.displayName = "ForwardRef(Label)";
 const avatarStyle = {
@@ -1641,8 +1642,8 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$B = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledAvatar",
   componentId: "sc-1rj7kl0-0"
 })(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Arrow",
@@ -1661,8 +1662,8 @@ const Root$B = /* @__PURE__ */ styled.div.withConfig({
   componentId: "sc-1rj7kl0-5"
 })({
   color: "inherit"
-}), Image = /* @__PURE__ */ styled.svg.withConfig({
-  displayName: "Image",
+}), AvatarImage = /* @__PURE__ */ styled.svg.withConfig({
+  displayName: "AvatarImage",
   componentId: "sc-1rj7kl0-6"
 })(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
   const $ = c(52);
@@ -1706,7 +1707,7 @@ const Root$B = /* @__PURE__ */ styled.div.withConfig({
   let t11;
   $[24] !== color ? (t11 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[24] = color, $[25] = t11) : t11 = $[25];
   let t12;
-  $[26] !== __unstable_hideInnerStroke || $[27] !== _radius || $[28] !== _sizeRem || $[29] !== handleImageError || $[30] !== imageFailed || $[31] !== imageId || $[32] !== src ? (t12 = !imageFailed && src && /* @__PURE__ */ jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+  $[26] !== __unstable_hideInnerStroke || $[27] !== _radius || $[28] !== _sizeRem || $[29] !== handleImageError || $[30] !== imageFailed || $[31] !== imageId || $[32] !== src ? (t12 = !imageFailed && src && /* @__PURE__ */ jsxs(AvatarImage, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
     /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
     /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
     !__unstable_hideInnerStroke && /* @__PURE__ */ jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
@@ -1715,7 +1716,7 @@ const Root$B = /* @__PURE__ */ styled.div.withConfig({
   let t13;
   $[34] !== imageFailed || $[35] !== initials || $[36] !== initialsSize || $[37] !== src ? (t13 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[34] = imageFailed, $[35] = initials, $[36] = initialsSize, $[37] = src, $[38] = t13) : t13 = $[38];
   let t14;
-  return $[39] !== arrowPosition || $[40] !== as || $[41] !== color || $[42] !== ref || $[43] !== restProps || $[44] !== size2 || $[45] !== status || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== title ? (t14 = /* @__PURE__ */ jsxs(Root$B, { as, "data-as": t10, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
+  return $[39] !== arrowPosition || $[40] !== as || $[41] !== color || $[42] !== ref || $[43] !== restProps || $[44] !== size2 || $[45] !== status || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== title ? (t14 = /* @__PURE__ */ jsxs(StyledAvatar, { as, "data-as": t10, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
     t11,
     t12,
     t13
@@ -1761,8 +1762,8 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledAvatarCounter",
   componentId: "sc-1ydx86y-0"
 })(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
   const $ = c(9), {
@@ -1775,7 +1776,7 @@ const Root$A = /* @__PURE__ */ styled.div.withConfig({
   let t3;
   $[2] !== count || $[3] !== fontSize2 ? (t3 = /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[2] = count, $[3] = fontSize2, $[4] = t3) : t3 = $[4];
   let t4;
-  return $[5] !== ref || $[6] !== size2 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[5] = ref, $[6] = size2, $[7] = t3, $[8] = t4) : t4 = $[8], t4;
+  return $[5] !== ref || $[6] !== size2 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsx(StyledAvatarCounter, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[5] = ref, $[6] = size2, $[7] = t3, $[8] = t4) : t4 = $[8], t4;
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
 function _temp$7(s) {
@@ -1809,8 +1810,8 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledAvatarStack",
   componentId: "sc-cysmbb-0"
 })(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
   const $ = c(15);
@@ -1821,7 +1822,7 @@ const Root$z = /* @__PURE__ */ styled.div.withConfig({
     size: t1,
     ...restProps
   } = props, $[0] = props, $[1] = childrenProp, $[2] = restProps, $[3] = t0, $[4] = t1) : (childrenProp = $[1], restProps = $[2], t0 = $[3], t1 = $[4]);
-  const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children, T0 = Root$z, t2 = "AvatarStack", t3 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }), t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) });
+  const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children, T0 = StyledAvatarStack, t2 = "AvatarStack", t3 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }), t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) });
   let t5;
   $[5] !== size2 ? (t5 = (child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, {
     size: size2
@@ -1835,8 +1836,8 @@ const Root$z = /* @__PURE__ */ styled.div.withConfig({
   ] }), $[7] = T0, $[8] = ref, $[9] = restProps, $[10] = size2, $[11] = t3, $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14], t7;
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
-const Root$y = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledBox = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledBox",
   componentId: "sc-1hhky9f-0"
 })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
   const $ = c(59);
@@ -1872,7 +1873,7 @@ const Root$y = /* @__PURE__ */ styled.div.withConfig({
   } = props, $[0] = props, $[1] = column, $[2] = columnEnd, $[3] = columnStart, $[4] = flex, $[5] = height, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = overflow, $[13] = paddingBottom, $[14] = paddingLeft, $[15] = paddingRight, $[16] = paddingTop, $[17] = paddingX, $[18] = paddingY, $[19] = restProps, $[20] = row, $[21] = rowEnd, $[22] = rowStart, $[23] = sizing, $[24] = t0, $[25] = t1, $[26] = t2, $[27] = t3) : (column = $[1], columnEnd = $[2], columnStart = $[3], flex = $[4], height = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], overflow = $[12], paddingBottom = $[13], paddingLeft = $[14], paddingRight = $[15], paddingTop = $[16], paddingX = $[17], paddingY = $[18], restProps = $[19], row = $[20], rowEnd = $[21], rowStart = $[22], sizing = $[23], t0 = $[24], t1 = $[25], t2 = $[26], t3 = $[27]);
   const asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3, t4 = typeof asProp == "string" ? asProp : void 0, t5 = useArrayProp(column), t6 = useArrayProp(columnStart), t7 = useArrayProp(columnEnd), t8 = useArrayProp(display), t9 = useArrayProp(flex), t10 = useArrayProp(height), t11 = useArrayProp(margin), t12 = useArrayProp(marginX), t13 = useArrayProp(marginY), t14 = useArrayProp(marginTop), t15 = useArrayProp(marginRight), t16 = useArrayProp(marginBottom), t17 = useArrayProp(marginLeft), t18 = useArrayProp(overflow), t19 = useArrayProp(padding), t20 = useArrayProp(paddingX), t21 = useArrayProp(paddingY), t22 = useArrayProp(paddingTop), t23 = useArrayProp(paddingRight), t24 = useArrayProp(paddingBottom), t25 = useArrayProp(paddingLeft), t26 = useArrayProp(row), t27 = useArrayProp(rowStart), t28 = useArrayProp(rowEnd), t29 = useArrayProp(sizing);
   let t30;
-  return $[28] !== asProp || $[29] !== props.children || $[30] !== ref || $[31] !== restProps || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t16 || $[39] !== t17 || $[40] !== t18 || $[41] !== t19 || $[42] !== t20 || $[43] !== t21 || $[44] !== t22 || $[45] !== t23 || $[46] !== t24 || $[47] !== t25 || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t4 || $[53] !== t5 || $[54] !== t6 || $[55] !== t7 || $[56] !== t8 || $[57] !== t9 ? (t30 = /* @__PURE__ */ jsx(Root$y, { "data-as": t4, "data-ui": "Box", ...restProps, $column: t5, $columnStart: t6, $columnEnd: t7, $display: t8, $flex: t9, $height: t10, $margin: t11, $marginX: t12, $marginY: t13, $marginTop: t14, $marginRight: t15, $marginBottom: t16, $marginLeft: t17, $overflow: t18, $padding: t19, $paddingX: t20, $paddingY: t21, $paddingTop: t22, $paddingRight: t23, $paddingBottom: t24, $paddingLeft: t25, $row: t26, $rowStart: t27, $rowEnd: t28, $sizing: t29, as: asProp, ref, children: props.children }), $[28] = asProp, $[29] = props.children, $[30] = ref, $[31] = restProps, $[32] = t10, $[33] = t11, $[34] = t12, $[35] = t13, $[36] = t14, $[37] = t15, $[38] = t16, $[39] = t17, $[40] = t18, $[41] = t19, $[42] = t20, $[43] = t21, $[44] = t22, $[45] = t23, $[46] = t24, $[47] = t25, $[48] = t26, $[49] = t27, $[50] = t28, $[51] = t29, $[52] = t4, $[53] = t5, $[54] = t6, $[55] = t7, $[56] = t8, $[57] = t9, $[58] = t30) : t30 = $[58], t30;
+  return $[28] !== asProp || $[29] !== props.children || $[30] !== ref || $[31] !== restProps || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t16 || $[39] !== t17 || $[40] !== t18 || $[41] !== t19 || $[42] !== t20 || $[43] !== t21 || $[44] !== t22 || $[45] !== t23 || $[46] !== t24 || $[47] !== t25 || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t4 || $[53] !== t5 || $[54] !== t6 || $[55] !== t7 || $[56] !== t8 || $[57] !== t9 ? (t30 = /* @__PURE__ */ jsx(StyledBox, { "data-as": t4, "data-ui": "Box", ...restProps, $column: t5, $columnStart: t6, $columnEnd: t7, $display: t8, $flex: t9, $height: t10, $margin: t11, $marginX: t12, $marginY: t13, $marginTop: t14, $marginRight: t15, $marginBottom: t16, $marginLeft: t17, $overflow: t18, $padding: t19, $paddingX: t20, $paddingY: t21, $paddingTop: t22, $paddingRight: t23, $paddingBottom: t24, $paddingLeft: t25, $row: t26, $rowStart: t27, $rowEnd: t28, $sizing: t29, as: asProp, ref, children: props.children }), $[28] = asProp, $[29] = props.children, $[30] = ref, $[31] = restProps, $[32] = t10, $[33] = t11, $[34] = t12, $[35] = t13, $[36] = t14, $[37] = t15, $[38] = t16, $[39] = t17, $[40] = t18, $[41] = t19, $[42] = t20, $[43] = t21, $[44] = t22, $[45] = t23, $[46] = t24, $[47] = t25, $[48] = t26, $[49] = t27, $[50] = t28, $[51] = t29, $[52] = t4, $[53] = t5, $[54] = t6, $[55] = t7, $[56] = t8, $[57] = t9, $[58] = t30) : t30 = $[58], t30;
 });
 Box.displayName = "ForwardRef(Box)";
 function textBaseStyle(props) {
@@ -1943,13 +1944,10 @@ function textBaseStyle(props) {
     }
   `;
 }
-const Root$x = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledText = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledText",
   componentId: "sc-11ov82j-0"
-})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), SpanWithTextOverflow$1 = styled.span.withConfig({
-  displayName: "SpanWithTextOverflow",
-  componentId: "sc-11ov82j-1"
-})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Text = forwardRef(function(props, ref) {
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = forwardRef(function(props, ref) {
   const $ = c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -1966,13 +1964,13 @@ const Root$x = /* @__PURE__ */ styled.div.withConfig({
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
     let t32;
-    $[9] !== children ? (t32 = /* @__PURE__ */ jsx(SpanWithTextOverflow$1, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
+    $[9] !== children ? (t32 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
   }
   const t3 = useArrayProp(align), t4 = useArrayProp(size2);
   let t5;
   $[11] !== children ? (t5 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
   let t6;
-  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsx(Root$x, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
+  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsx(StyledText, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
 });
 Text.displayName = "ForwardRef(Text)";
 function badgeStyle(props) {
@@ -1990,8 +1988,8 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$w = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "Root",
+const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledBadge",
   componentId: "sc-5u140l-0"
 })(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
   const $ = c(17);
@@ -2013,11 +2011,11 @@ const Root$w = /* @__PURE__ */ styled(Box).withConfig({
   let t6;
   $[7] !== children || $[8] !== fontSize2 ? (t6 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children }), $[7] = children, $[8] = fontSize2, $[9] = t6) : t6 = $[9];
   let t7;
-  return $[10] !== ref || $[11] !== restProps || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== tone ? (t7 = /* @__PURE__ */ jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = ref, $[11] = restProps, $[12] = t4, $[13] = t5, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16], t7;
+  return $[10] !== ref || $[11] !== restProps || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== tone ? (t7 = /* @__PURE__ */ jsx(StyledBadge, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = ref, $[11] = restProps, $[12] = t4, $[13] = t5, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16], t7;
 });
 Badge.displayName = "ForwardRef(Badge)";
-const Root$v = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "Root",
+const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledFlex",
   componentId: "sc-oxesg3-0"
 })(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
   const $ = c(17);
@@ -2033,7 +2031,7 @@ const Root$v = /* @__PURE__ */ styled(Box).withConfig({
   } = props, $[0] = props, $[1] = align, $[2] = as, $[3] = gap, $[4] = justify, $[5] = restProps, $[6] = t0, $[7] = wrap) : (align = $[1], as = $[2], gap = $[3], justify = $[4], restProps = $[5], t0 = $[6], wrap = $[7]);
   const direction = t0 === void 0 ? "row" : t0, t1 = useArrayProp(align), t2 = useArrayProp(direction), t3 = useArrayProp(gap), t4 = useArrayProp(justify), t5 = useArrayProp(wrap);
   let t6;
-  return $[8] !== as || $[9] !== ref || $[10] !== restProps || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Root$v, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[8] = as, $[9] = ref, $[10] = restProps, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+  return $[8] !== as || $[9] !== ref || $[10] !== restProps || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledFlex, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[8] = as, $[9] = ref, $[10] = restProps, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
 });
 Flex.displayName = "ForwardRef(Flex)";
 const rotate$1 = keyframes`
@@ -2044,15 +2042,15 @@ const rotate$1 = keyframes`
   to {
     transform: rotate(360deg);
   }
-`, Root$u = styled(Text).withConfig({
-  displayName: "Root",
+`, StyledSpinner = styled(Text).withConfig({
+  displayName: "StyledSpinner",
   componentId: "sc-124hnd0-0"
 })`& > span > svg{animation:${rotate$1} 500ms linear infinite;}`, Spinner = forwardRef(function(props, ref) {
   const $ = c(4);
   let t0;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
   let t1;
-  return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: t0 }), $[1] = props, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
+  return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ jsx(StyledSpinner, { "data-ui": "Spinner", ...props, ref, children: t0 }), $[1] = props, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
 });
 Spinner.displayName = "ForwardRef(Spinner)";
 function _cardColorStyle(base, color, checkered = !1) {
@@ -2223,8 +2221,8 @@ function buttonColorStyles(props) {
     }
   }, style?.button?.root].filter(Boolean);
 }
-const Root$t = /* @__PURE__ */ styled.button.withConfig({
-  displayName: "Root",
+const StyledButton = /* @__PURE__ */ styled.button.withConfig({
+  displayName: "StyledButton",
   componentId: "sc-aaekt4-0"
 })(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div.withConfig({
   displayName: "LoadingBox",
@@ -2290,7 +2288,7 @@ const Root$t = /* @__PURE__ */ styled.button.withConfig({
   let t16;
   $[47] !== boxProps || $[48] !== children ? (t16 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children }), $[47] = boxProps, $[48] = children, $[49] = t16) : t16 = $[49];
   let t17;
-  return $[50] !== mode || $[51] !== radius || $[52] !== ref || $[53] !== restProps || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t15 || $[59] !== t16 || $[60] !== tone || $[61] !== type || $[62] !== width ? (t17 = /* @__PURE__ */ jsxs(Root$t, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t11, "data-selected": t12, disabled: t13, ref, type, $width: width, children: [
+  return $[50] !== mode || $[51] !== radius || $[52] !== ref || $[53] !== restProps || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t15 || $[59] !== t16 || $[60] !== tone || $[61] !== type || $[62] !== width ? (t17 = /* @__PURE__ */ jsxs(StyledButton, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t11, "data-selected": t12, disabled: t13, ref, type, $width: width, children: [
     t14,
     t15,
     t16
@@ -2445,8 +2443,8 @@ function cardColorStyle(props) {
     ${style?.card?.root}
   `;
 }
-const Root$s = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "Root",
+const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledCard",
   componentId: "sc-osnro2-0"
 })(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
   const $ = c(42);
@@ -2471,7 +2469,7 @@ const Root$s = /* @__PURE__ */ styled(Box).withConfig({
   } = props, $[0] = props, $[1] = asProp, $[2] = border2, $[3] = borderBottom2, $[4] = borderLeft2, $[5] = borderRight2, $[6] = borderTop2, $[7] = muted, $[8] = pressed, $[9] = restProps, $[10] = scheme, $[11] = selected, $[12] = shadow, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3) : (asProp = $[1], border2 = $[2], borderBottom2 = $[3], borderLeft2 = $[4], borderRight2 = $[5], borderTop2 = $[6], muted = $[7], pressed = $[8], restProps = $[9], scheme = $[10], selected = $[11], shadow = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[16]);
   const checkered = t0 === void 0 ? !1 : t0, focusRing = t1 === void 0 ? !1 : t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6 = useArrayProp(border2), t7 = useArrayProp(borderTop2), t8 = useArrayProp(borderRight2), t9 = useArrayProp(borderBottom2), t10 = useArrayProp(borderLeft2), t11 = useArrayProp(radius), t12 = useArrayProp(shadow), t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
   let t16;
-  $[17] !== as || $[18] !== checkered || $[19] !== focusRing || $[20] !== muted || $[21] !== ref || $[22] !== restProps || $[23] !== rootTheme.scheme || $[24] !== selected || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t14 || $[30] !== t15 || $[31] !== t4 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9 || $[36] !== tone ? (t16 = /* @__PURE__ */ jsx(Root$s, { "data-as": t4, "data-scheme": t5, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t6, $borderTop: t7, $borderRight: t8, $borderBottom: t9, $borderLeft: t10, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t11, $shadow: t12, $tone: tone, "data-checkered": t13, "data-pressed": t14, "data-selected": t15, forwardedAs: as, ref, selected }), $[17] = as, $[18] = checkered, $[19] = focusRing, $[20] = muted, $[21] = ref, $[22] = restProps, $[23] = rootTheme.scheme, $[24] = selected, $[25] = t10, $[26] = t11, $[27] = t12, $[28] = t13, $[29] = t14, $[30] = t15, $[31] = t4, $[32] = t6, $[33] = t7, $[34] = t8, $[35] = t9, $[36] = tone, $[37] = t16) : t16 = $[37];
+  $[17] !== as || $[18] !== checkered || $[19] !== focusRing || $[20] !== muted || $[21] !== ref || $[22] !== restProps || $[23] !== rootTheme.scheme || $[24] !== selected || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t14 || $[30] !== t15 || $[31] !== t4 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9 || $[36] !== tone ? (t16 = /* @__PURE__ */ jsx(StyledCard, { "data-as": t4, "data-scheme": t5, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t6, $borderTop: t7, $borderRight: t8, $borderBottom: t9, $borderLeft: t10, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t11, $shadow: t12, $tone: tone, "data-checkered": t13, "data-pressed": t14, "data-selected": t15, forwardedAs: as, ref, selected }), $[17] = as, $[18] = checkered, $[19] = focusRing, $[20] = muted, $[21] = ref, $[22] = restProps, $[23] = rootTheme.scheme, $[24] = selected, $[25] = t10, $[26] = t11, $[27] = t12, $[28] = t13, $[29] = t14, $[30] = t15, $[31] = t4, $[32] = t6, $[33] = t7, $[34] = t8, $[35] = t9, $[36] = tone, $[37] = t16) : t16 = $[37];
   let t17;
   return $[38] !== scheme || $[39] !== t16 || $[40] !== tone ? (t17 = /* @__PURE__ */ jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = t16, $[40] = tone, $[41] = t17) : t17 = $[41], t17;
 });
@@ -2614,8 +2612,8 @@ function inputElementStyles(props) {
     }
   `;
 }
-const Root$r = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledCheckbox",
   componentId: "sc-1l5mt2l-0"
 })(checkboxBaseStyles), Input$5 = /* @__PURE__ */ styled.input.withConfig({
   displayName: "Input",
@@ -2649,7 +2647,7 @@ const Root$r = /* @__PURE__ */ styled.div.withConfig({
     /* @__PURE__ */ jsx(RemoveIcon, {})
   ] }), $[20] = t7) : t7 = $[20];
   let t8;
-  return $[21] !== className || $[22] !== style || $[23] !== t6 ? (t8 = /* @__PURE__ */ jsxs(Root$r, { className, "data-ui": "Checkbox", style, children: [
+  return $[21] !== className || $[22] !== style || $[23] !== t6 ? (t8 = /* @__PURE__ */ jsxs(StyledCheckbox, { className, "data-ui": "Checkbox", style, children: [
     t6,
     t7
   ] }), $[21] = className, $[22] = style, $[23] = t6, $[24] = t8) : t8 = $[24], t8;
@@ -2803,8 +2801,8 @@ function codeBaseStyle() {
     }
   `;
 }
-const Root$q = /* @__PURE__ */ styled.pre.withConfig({
-  displayName: "Root",
+const StyledCode = /* @__PURE__ */ styled.pre.withConfig({
+  displayName: "StyledCode",
   componentId: "sc-4dymyn-0"
 })(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
   const $ = c(23);
@@ -2825,7 +2823,7 @@ const Root$q = /* @__PURE__ */ styled.pre.withConfig({
   let t4;
   $[12] !== children || $[13] !== language || $[14] !== registered ? (t4 = language && registered && /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value: String(children) }), $[12] = children, $[13] = language, $[14] = registered, $[15] = t4) : t4 = $[15];
   let t5;
-  return $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== weight ? (t5 = /* @__PURE__ */ jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: t2, $weight: weight, ref, children: [
+  return $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== weight ? (t5 = /* @__PURE__ */ jsxs(StyledCode, { "data-ui": "Code", ...restProps, $size: t2, $weight: weight, ref, children: [
     t3,
     t4
   ] }), $[16] = ref, $[17] = restProps, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = weight, $[22] = t5) : t5 = $[22], t5;
@@ -2847,8 +2845,8 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$p = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "Root",
+const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledContainer",
   componentId: "sc-wyroop-0"
 })(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
   const $ = c(9);
@@ -2860,11 +2858,11 @@ const Root$p = /* @__PURE__ */ styled(Box).withConfig({
   } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = t0) : (as = $[1], restProps = $[2], t0 = $[3]);
   const t1 = useArrayProp(t0 === void 0 ? 2 : t0);
   let t2;
-  return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t1 ? (t2 = /* @__PURE__ */ jsx(Root$p, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t1, $[8] = t2) : t2 = $[8], t2;
+  return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledContainer, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t1, $[8] = t2) : t2 = $[8], t2;
 });
 Container.displayName = "ForwardRef(Container)";
-const Root$o = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "Root",
+const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledGrid",
   componentId: "sc-v8t8oz-0"
 })(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
   const $ = c(26);
@@ -2884,7 +2882,7 @@ const Root$o = /* @__PURE__ */ styled(Box).withConfig({
   } = props, $[0] = props, $[1] = as, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = children, $[6] = columns, $[7] = gap, $[8] = gapX, $[9] = gapY, $[10] = restProps, $[11] = rows) : (as = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], children = $[5], columns = $[6], gap = $[7], gapX = $[8], gapY = $[9], restProps = $[10], rows = $[11]);
   const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp(autoRows), t2 = useArrayProp(autoCols), t3 = useArrayProp(autoFlow), t4 = useArrayProp(columns), t5 = useArrayProp(gap), t6 = useArrayProp(gapX), t7 = useArrayProp(gapY), t8 = useArrayProp(rows);
   let t9;
-  return $[12] !== as || $[13] !== children || $[14] !== ref || $[15] !== restProps || $[16] !== t0 || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsx(Root$o, { "data-as": t0, "data-ui": "Grid", ...restProps, $autoRows: t1, $autoCols: t2, $autoFlow: t3, $columns: t4, $gap: t5, $gapX: t6, $gapY: t7, $rows: t8, forwardedAs: as, ref, children }), $[12] = as, $[13] = children, $[14] = ref, $[15] = restProps, $[16] = t0, $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
+  return $[12] !== as || $[13] !== children || $[14] !== ref || $[15] !== restProps || $[16] !== t0 || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsx(StyledGrid, { "data-as": t0, "data-ui": "Grid", ...restProps, $autoRows: t1, $autoCols: t2, $autoFlow: t3, $columns: t4, $gap: t5, $gapX: t6, $gapY: t7, $rows: t8, forwardedAs: as, ref, children }), $[12] = as, $[13] = children, $[14] = ref, $[15] = restProps, $[16] = t0, $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 });
 Grid.displayName = "ForwardRef(Grid)";
 function headingBaseStyle(props) {
@@ -2946,13 +2944,10 @@ function headingBaseStyle(props) {
     }
   `;
 }
-const Root$n = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledHeading",
   componentId: "sc-137lwim-0"
-})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styled.span.withConfig({
-  displayName: "SpanWithTextOverflow",
-  componentId: "sc-137lwim-1"
-})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Heading = forwardRef(function(props, ref) {
+})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = forwardRef(function(props, ref) {
   const $ = c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -2975,7 +2970,7 @@ const Root$n = /* @__PURE__ */ styled.div.withConfig({
   let t5;
   $[11] !== children ? (t5 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
   let t6;
-  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsx(Root$n, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
+  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsx(StyledHeading, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
 });
 Heading.displayName = "ForwardRef(Heading)";
 function inlineBaseStyle() {
@@ -3005,8 +3000,8 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$m = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "Root",
+const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledInline",
   componentId: "sc-1pkiy6j-0"
 })(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
   const $ = c(12);
@@ -3021,7 +3016,7 @@ const Root$m = /* @__PURE__ */ styled(Box).withConfig({
   $[5] !== childrenProp ? (t1 = Children.map(childrenProp, _temp$6), $[5] = childrenProp, $[6] = t1) : t1 = $[6], t0 = t1;
   const children = t0, t2 = useArrayProp(space);
   let t3;
-  return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(Root$m, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
+  return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
 });
 Inline.displayName = "ForwardRef(Inline)";
 function _temp$6(child) {
@@ -3044,8 +3039,8 @@ function kbdStyle() {
     }
   `;
 }
-const Root$l = /* @__PURE__ */ styled.kbd.withConfig({
-  displayName: "Root",
+const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
+  displayName: "StyledKBD",
   componentId: "sc-1w7yd8w-0"
 })(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
   const $ = c(17);
@@ -3063,7 +3058,7 @@ const Root$l = /* @__PURE__ */ styled.kbd.withConfig({
   let t5;
   $[9] !== padding || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, { as: "span", padding, children: t4 }), $[9] = padding, $[10] = t4, $[11] = t5) : t5 = $[11];
   let t6;
-  return $[12] !== ref || $[13] !== restProps || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[12] = ref, $[13] = restProps, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+  return $[12] !== ref || $[13] !== restProps || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledKBD, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[12] = ref, $[13] = restProps, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
 });
 KBD.displayName = "ForwardRef(KBD)";
 const origin = {
@@ -3133,8 +3128,8 @@ function getRoundedCommands(points) {
 function compileCommands(cmds) {
   return cmds.map((n, idx) => n.type === "point" ? `${idx === 0 ? "M" : "L"} ${n.x} ${n.y}` : n.type === "curve" ? `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}` : "").join(" ");
 }
-const Root$k = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledArrow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledArrow",
   componentId: "sc-12vzy6c-0"
 })(({
   $w: w
@@ -3234,7 +3229,7 @@ const Root$k = /* @__PURE__ */ styled.div.withConfig({
     t5
   ] }), $[13] = t1, $[14] = t2, $[15] = t4, $[16] = t5, $[17] = w, $[18] = t6) : t6 = $[18];
   let t7;
-  return $[19] !== ref || $[20] !== restProps || $[21] !== t6 || $[22] !== w ? (t7 = /* @__PURE__ */ jsx(Root$k, { ...restProps, $w: w, ref, children: t6 }), $[19] = ref, $[20] = restProps, $[21] = t6, $[22] = w, $[23] = t7) : t7 = $[23], t7;
+  return $[19] !== ref || $[20] !== restProps || $[21] !== t6 || $[22] !== w ? (t7 = /* @__PURE__ */ jsx(StyledArrow, { ...restProps, $w: w, ref, children: t6 }), $[19] = ref, $[20] = restProps, $[21] = t6, $[22] = w, $[23] = t7) : t7 = $[23], t7;
 });
 Arrow.displayName = "ForwardRef(Arrow)";
 const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null);
@@ -3495,8 +3490,8 @@ function _temp$5(v) {
   return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
-const Root$j = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledLayer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledLayer",
   componentId: "sc-16kojrv-0"
 })({
   position: "relative"
@@ -3535,7 +3530,7 @@ const Root$j = /* @__PURE__ */ styled.div.withConfig({
     zIndex
   }, $[14] = style, $[15] = zIndex, $[16] = t5) : t5 = $[16];
   let t6;
-  return $[17] !== children || $[18] !== handleFocus || $[19] !== restProps || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(Root$j, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: t5, children }), $[17] = children, $[18] = handleFocus, $[19] = restProps, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+  return $[17] !== children || $[18] !== handleFocus || $[19] !== restProps || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledLayer, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: t5, children }), $[17] = children, $[18] = handleFocus, $[19] = restProps, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
 }), Layer = forwardRef(function(props, ref) {
   const $ = c(11);
   let children, restProps, t0;
@@ -3618,8 +3613,8 @@ function _isEqual(objA, objB) {
   const keysA = Object.keys(objA), keysB = Object.keys(objB);
   return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
 }
-const Root$i = styled.div.withConfig({
-  displayName: "Root",
+const StyledSrOnly = styled.div.withConfig({
+  displayName: "StyledSrOnly",
   componentId: "sc-mubr0c-0"
 })`display:block;width:0;height:0;position:absolute;overflow:hidden;overflow:clip;`, SrOnly = forwardRef(function(props, ref) {
   const $ = c(4), {
@@ -3627,11 +3622,11 @@ const Root$i = styled.div.withConfig({
     children
   } = props;
   let t0;
-  return $[0] !== as || $[1] !== children || $[2] !== ref ? (t0 = /* @__PURE__ */ jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children }), $[0] = as, $[1] = children, $[2] = ref, $[3] = t0) : t0 = $[3], t0;
+  return $[0] !== as || $[1] !== children || $[2] !== ref ? (t0 = /* @__PURE__ */ jsx(StyledSrOnly, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children }), $[0] = as, $[1] = children, $[2] = ref, $[3] = t0) : t0 = $[3], t0;
 });
 SrOnly.displayName = "ForwardRef(SrOnly)";
-const Root$h = styled.div.withConfig({
-  displayName: "Root",
+const StyledVirtualList = styled.div.withConfig({
+  displayName: "StyledVirtualList",
   componentId: "sc-dlqsj4-0"
 })`position:relative;`, ItemWrapper = styled.div.withConfig({
   displayName: "ItemWrapper",
@@ -3748,7 +3743,7 @@ const Root$h = styled.div.withConfig({
   let t14;
   $[49] !== children || $[50] !== wrapperStyle ? (t14 = /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[49] = children, $[50] = wrapperStyle, $[51] = t14) : t14 = $[51];
   let t15;
-  return $[52] !== as || $[53] !== restProps || $[54] !== t14 ? (t15 = /* @__PURE__ */ jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: t14 }), $[52] = as, $[53] = restProps, $[54] = t14, $[55] = t15) : t15 = $[55], t15;
+  return $[52] !== as || $[53] !== restProps || $[54] !== t14 ? (t15 = /* @__PURE__ */ jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: t14 }), $[52] = as, $[53] = restProps, $[54] = t14, $[55] = t15) : t15 = $[55], t15;
 });
 VirtualList.displayName = "ForwardRef(VirtualList)";
 const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER_ARROW_WIDTH = 19, DEFAULT_POPOVER_ARROW_HEIGHT = 8, DEFAULT_POPOVER_ARROW_RADIUS = 2, DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0], DEFAULT_FALLBACK_PLACEMENTS$1 = {
@@ -4148,8 +4143,8 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+const StyledRadio = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledRadio",
   componentId: "sc-ccrwkf-0"
 })(radioBaseStyle), Input$4 = /* @__PURE__ */ styled.input.withConfig({
   displayName: "Input",
@@ -4174,7 +4169,7 @@ const Root$g = /* @__PURE__ */ styled.div.withConfig({
   let t5;
   $[14] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsx("span", {}), $[14] = t5) : t5 = $[14];
   let t6;
-  return $[15] !== className || $[16] !== style || $[17] !== t4 ? (t6 = /* @__PURE__ */ jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
+  return $[15] !== className || $[16] !== style || $[17] !== t4 ? (t6 = /* @__PURE__ */ jsxs(StyledRadio, { className, "data-ui": "Radio", style, children: [
     t4,
     t5
   ] }), $[15] = className, $[16] = style, $[17] = t4, $[18] = t6) : t6 = $[18], t6;
@@ -4322,8 +4317,8 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = /* @__PURE__ */ styled.div.withConfig({
-  displayName: "Root",
+}, StyledSelect = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledSelect",
   componentId: "sc-5mxno7-0"
 })(selectStyle.root), Input$3 = /* @__PURE__ */ styled.select.withConfig({
   displayName: "Input",
@@ -4358,7 +4353,7 @@ const selectStyle = {
   let t14;
   $[23] !== padding || $[24] !== t13 ? (t14 = /* @__PURE__ */ jsx(IconBox, { padding, children: t13 }), $[23] = padding, $[24] = t13, $[25] = t14) : t14 = $[25];
   let t15;
-  return $[26] !== t11 || $[27] !== t14 ? (t15 = /* @__PURE__ */ jsxs(Root$f, { "data-ui": "Select", children: [
+  return $[26] !== t11 || $[27] !== t14 ? (t15 = /* @__PURE__ */ jsxs(StyledSelect, { "data-ui": "Select", children: [
     t11,
     t14
   ] }), $[26] = t11, $[27] = t14, $[28] = t15) : t15 = $[28], t15;
@@ -4386,8 +4381,8 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$e = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "Root",
+const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledStack",
   componentId: "sc-8dpfq2-0"
 })(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
   const $ = c(10);
@@ -4399,7 +4394,7 @@ const Root$e = /* @__PURE__ */ styled(Box).withConfig({
   } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = space) : (as = $[1], restProps = $[2], space = $[3]);
   const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp(space);
   let t2;
-  return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t0 || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsx(Root$e, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
+  return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t0 || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledStack, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
 });
 Stack.displayName = "ForwardRef(Stack)";
 function switchBaseStyles() {
@@ -4555,8 +4550,8 @@ function switchThumbStyles(props) {
     `}
   `;
 }
-const Root$d = /* @__PURE__ */ styled.span.withConfig({
-  displayName: "Root",
+const StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "StyledSwitch",
   componentId: "sc-dw1foe-0"
 })(switchBaseStyles), Input$2 = /* @__PURE__ */ styled.input.withConfig({
   displayName: "Input",
@@ -4600,14 +4595,14 @@ const Root$d = /* @__PURE__ */ styled.span.withConfig({
     /* @__PURE__ */ jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
   ] }), $[18] = checked, $[19] = indeterminate, $[20] = t8) : t8 = $[20];
   let t9;
-  return $[21] !== className || $[22] !== style || $[23] !== t6 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Root$d, { className, "data-ui": "Switch", style, children: [
+  return $[21] !== className || $[22] !== style || $[23] !== t6 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxs(StyledSwitch, { className, "data-ui": "Switch", style, children: [
     t6,
     t8
   ] }), $[21] = className, $[22] = style, $[23] = t6, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 });
 Switch.displayName = "ForwardRef(Switch)";
-const Root$c = /* @__PURE__ */ styled.span.withConfig({
-  displayName: "Root",
+const StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "StyledTextArea",
   componentId: "sc-1d6h1o8-0"
 })(textInputRootStyle), InputRoot$1 = styled.span.withConfig({
   displayName: "InputRoot",
@@ -4642,7 +4637,7 @@ const Root$c = /* @__PURE__ */ styled.span.withConfig({
   let t15;
   $[20] !== __unstable_disableFocusRing || $[21] !== rootTheme.scheme || $[22] !== rootTheme.tone || $[23] !== t13 || $[24] !== t14 ? (t15 = /* @__PURE__ */ jsx(Presentation$1, { $radius: t13, $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[20] = __unstable_disableFocusRing, $[21] = rootTheme.scheme, $[22] = rootTheme.tone, $[23] = t13, $[24] = t14, $[25] = t15) : t15 = $[25];
   let t16;
-  return $[26] !== t12 || $[27] !== t15 ? (t16 = /* @__PURE__ */ jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
+  return $[26] !== t12 || $[27] !== t15 ? (t16 = /* @__PURE__ */ jsx(StyledTextArea, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
     t12,
     t15
   ] }) }), $[26] = t12, $[27] = t15, $[28] = t16) : t16 = $[28], t16;
@@ -4650,10 +4645,10 @@ const Root$c = /* @__PURE__ */ styled.span.withConfig({
 TextArea.displayName = "ForwardRef(TextArea)";
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
-}, Root$b = /* @__PURE__ */ styled(Card).attrs({
+}, StyledTextInput = /* @__PURE__ */ styled(Card).attrs({
   forwardedAs: "span"
 }).withConfig({
-  displayName: "Root",
+  displayName: "StyledTextInput",
   componentId: "sc-h62wco-0"
 })(textInputRootStyle), InputRoot = styled.span.withConfig({
   displayName: "InputRoot",
@@ -4767,7 +4762,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
     clearButtonNode
   ] }), $[75] = clearButtonNode, $[76] = presentationNode, $[77] = t26, $[78] = t27) : t27 = $[78];
   let t28;
-  return $[79] !== prefixNode || $[80] !== rootTheme.tone || $[81] !== suffixNode || $[82] !== t27 ? (t28 = /* @__PURE__ */ jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
+  return $[79] !== prefixNode || $[80] !== rootTheme.tone || $[81] !== suffixNode || $[82] !== t27 ? (t28 = /* @__PURE__ */ jsxs(StyledTextInput, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
     t27,
     suffixNode
@@ -4890,8 +4885,8 @@ function TooltipDelayGroupProvider(props) {
   return $[7] !== children || $[8] !== value ? (t3 = /* @__PURE__ */ jsx(TooltipDelayGroupContext.Provider, { value, children }), $[7] = children, $[8] = value, $[9] = t3) : t3 = $[9], t3;
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
-const Root$a = styled(Layer).withConfig({
-  displayName: "Root",
+const StyledTooltip = styled(Layer).withConfig({
+  displayName: "StyledTooltip",
   componentId: "sc-13f2zvh-0"
 })`pointer-events:none;`, Tooltip = forwardRef(function(props, forwardedRef) {
   const boundaryElementContext = useBoundaryElement(), {
@@ -5009,7 +5004,7 @@ const Root$a = styled(Layer).withConfig({
       return setReferenceElement(childRef.current), () => setReferenceElement(null);
   }, [child]), !child) return /* @__PURE__ */ jsx(Fragment, {});
   if (disabled) return child;
-  const tooltip = /* @__PURE__ */ jsx(Root$a, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
+  const tooltip = /* @__PURE__ */ jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
     ...floatingStyles,
     maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
   }, zOffset, children: /* @__PURE__ */ jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }) }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
@@ -5040,8 +5035,8 @@ function useCloseOnMouseLeave(t0) {
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
   }, t3 = [onMouseMove, showTooltip], $[3] = onMouseMove, $[4] = showTooltip, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), useEffect(t2, t3);
 }
-const Root$9 = styled.div.withConfig({
-  displayName: "Root",
+const StyledAutocomplete = styled.div.withConfig({
+  displayName: "StyledAutocomplete",
   componentId: "sc-1igauft-0"
 })`line-height:0;`, ListBox = styled(Box).withConfig({
   displayName: "ListBox",
@@ -5309,14 +5304,14 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     onMouseEnter: handlePopoverMouseEnter,
     onMouseLeave: handlePopoverMouseLeave
   }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
-  return /* @__PURE__ */ jsxs(Root$9, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
+  return /* @__PURE__ */ jsxs(StyledAutocomplete, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
     input,
     results
   ] });
 });
 InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
-const Autocomplete = InnerAutocomplete, Root$8 = styled.ol.withConfig({
-  displayName: "Root",
+const Autocomplete = InnerAutocomplete, StyledBreadcrumbs = styled.ol.withConfig({
+  displayName: "StyledBreadcrumbs",
   componentId: "sc-1es8h8q-0"
 })`margin:0;padding:0;display:flex;list-style:none;align-items:center;white-space:nowrap;line-height:0;`, ExpandButton = styled(Button).withConfig({
   displayName: "ExpandButton",
@@ -5338,7 +5333,7 @@ const Autocomplete = InnerAutocomplete, Root$8 = styled.ol.withConfig({
     }
     return rawItems;
   }, [collapse, expand, maxLength, open, rawItems, space]);
-  return /* @__PURE__ */ jsx(Root$8, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsx(StyledBreadcrumbs, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
     itemIndex > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) }),
     /* @__PURE__ */ jsx(Box, { as: "li", children: item })
   ] }, itemIndex)) });
@@ -5411,8 +5406,8 @@ function useDialog() {
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = /* @__PURE__ */ styled(Layer).withConfig({
-  displayName: "Root",
+const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
+  displayName: "StyledDialog",
   componentId: "sc-4n4xb3-0"
 })(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container).withConfig({
   displayName: "DialogContainer",
@@ -5561,7 +5556,7 @@ const Dialog = forwardRef(function(props, ref) {
   let t11;
   $[43] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 }), $[43] = t11) : t11 = $[43];
   let t12;
-  $[44] !== animate || $[45] !== handleFocus || $[46] !== handleRootClick || $[47] !== id || $[48] !== labelId || $[49] !== onActivate || $[50] !== padding || $[51] !== position || $[52] !== ref || $[53] !== restProps || $[54] !== t10 || $[55] !== zOffset ? (t12 = /* @__PURE__ */ jsxs(Root$7, { ...restProps, $animate: animate, $padding: padding, $position: position, "aria-labelledby": labelId, "aria-modal": !0, "data-ui": "Dialog", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, ref, role: "dialog", zOffset, children: [
+  $[44] !== animate || $[45] !== handleFocus || $[46] !== handleRootClick || $[47] !== id || $[48] !== labelId || $[49] !== onActivate || $[50] !== padding || $[51] !== position || $[52] !== ref || $[53] !== restProps || $[54] !== t10 || $[55] !== zOffset ? (t12 = /* @__PURE__ */ jsxs(StyledDialog, { ...restProps, $animate: animate, $padding: padding, $position: position, "aria-labelledby": labelId, "aria-modal": !0, "data-ui": "Dialog", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, ref, role: "dialog", zOffset, children: [
     t9,
     t10,
     t11
@@ -5587,8 +5582,8 @@ function DialogProvider(props) {
   return $[3] !== children || $[4] !== contextValue ? (t2 = /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t2) : t2 = $[5], t2;
 }
 DialogProvider.displayName = "DialogProvider";
-const Root$6 = styled.kbd.withConfig({
-  displayName: "Root",
+const StyledHotkeys = styled.kbd.withConfig({
+  displayName: "StyledHotkeys",
   componentId: "sc-b37mge-0"
 })`font:inherit;padding:1px;&:not([hidden]){display:block;}`, Key = styled(KBD).withConfig({
   displayName: "Key",
@@ -5618,7 +5613,7 @@ const Root$6 = styled.kbd.withConfig({
   let t2;
   $[17] !== space || $[18] !== t1 ? (t2 = /* @__PURE__ */ jsx(Inline, { as: "span", space, children: t1 }), $[17] = space, $[18] = t1, $[19] = t2) : t2 = $[19];
   let t3;
-  return $[20] !== ref || $[21] !== restProps || $[22] !== t2 ? (t3 = /* @__PURE__ */ jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: t2 }), $[20] = ref, $[21] = restProps, $[22] = t2, $[23] = t3) : t3 = $[23], t3;
+  return $[20] !== ref || $[21] !== restProps || $[22] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledHotkeys, { "data-ui": "Hotkeys", ...restProps, ref, children: t2 }), $[20] = ref, $[21] = restProps, $[22] = t2, $[23] = t3) : t3 = $[23], t3;
 });
 Hotkeys.displayName = "ForwardRef(Hotkeys)";
 const MenuContext = createGlobalScopedContext("@sanity/ui/context/menu", null);
@@ -5759,8 +5754,8 @@ function useMenuController(props) {
     mount
   };
 }
-const Root$5 = styled(Box).withConfig({
-  displayName: "Root",
+const StyledMenu = styled(Box).withConfig({
+  displayName: "StyledMenu",
   componentId: "sc-xt0tnv-0"
 })`outline:none;overflow:auto;`, Menu = forwardRef(function(props, forwardedRef) {
   const $ = c(50);
@@ -5840,7 +5835,7 @@ const Root$5 = styled(Box).withConfig({
   let t11;
   $[38] !== children || $[39] !== space ? (t11 = /* @__PURE__ */ jsx(Stack, { space, children }), $[38] = children, $[39] = space, $[40] = t11) : t11 = $[40];
   let t12;
-  $[41] !== handleKeyDown || $[42] !== handleRefChange || $[43] !== padding || $[44] !== restProps || $[45] !== t11 ? (t12 = /* @__PURE__ */ jsx(Root$5, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t11 }), $[41] = handleKeyDown, $[42] = handleRefChange, $[43] = padding, $[44] = restProps, $[45] = t11, $[46] = t12) : t12 = $[46];
+  $[41] !== handleKeyDown || $[42] !== handleRefChange || $[43] !== padding || $[44] !== restProps || $[45] !== t11 ? (t12 = /* @__PURE__ */ jsx(StyledMenu, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t11 }), $[41] = handleKeyDown, $[42] = handleRefChange, $[43] = padding, $[44] = restProps, $[45] = t11, $[46] = t12) : t12 = $[46];
   let t13;
   return $[47] !== t12 || $[48] !== value ? (t13 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t12 }), $[47] = t12, $[48] = value, $[49] = t13) : t13 = $[49], t13;
 });
@@ -6338,8 +6333,8 @@ const keyframe = keyframes`
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "Root",
+`, StyledSkeleton$1 = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledSkeleton",
   componentId: "sc-ebtpni-0"
 })(responsiveRadiusStyle, skeletonStyle), Skeleton = forwardRef(function(props, ref) {
   const $ = c(14);
@@ -6364,11 +6359,11 @@ const keyframe = keyframes`
   }, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), useEffect(t1, t2);
   const t3 = useArrayProp(radius);
   let t4;
-  return $[8] !== animated || $[9] !== ref || $[10] !== restProps || $[11] !== t3 || $[12] !== visible ? (t4 = /* @__PURE__ */ jsx(Root$4, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = animated, $[9] = ref, $[10] = restProps, $[11] = t3, $[12] = visible, $[13] = t4) : t4 = $[13], t4;
+  return $[8] !== animated || $[9] !== ref || $[10] !== restProps || $[11] !== t3 || $[12] !== visible ? (t4 = /* @__PURE__ */ jsx(StyledSkeleton$1, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = animated, $[9] = ref, $[10] = restProps, $[11] = t3, $[12] = visible, $[13] = t4) : t4 = $[13], t4;
 });
 Skeleton.displayName = "ForwardRef(Skeleton)";
-const Root$3 = /* @__PURE__ */ styled(Skeleton).withConfig({
-  displayName: "Root",
+const StyledSkeleton = /* @__PURE__ */ styled(Skeleton).withConfig({
+  displayName: "StyledSkeleton",
   componentId: "sc-2p7a1v-0"
 })((props) => {
   const {
@@ -6393,7 +6388,7 @@ const Root$3 = /* @__PURE__ */ styled(Skeleton).withConfig({
   } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
   const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
-  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "text" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
+  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "text" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
 const LabelSkeleton = forwardRef(function(props, ref) {
@@ -6405,7 +6400,7 @@ const LabelSkeleton = forwardRef(function(props, ref) {
   } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
   const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
-  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "label" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
+  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "label" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
 const HeadingSkeleton = forwardRef(function(props, ref) {
@@ -6417,7 +6412,7 @@ const HeadingSkeleton = forwardRef(function(props, ref) {
   } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
   const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
-  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "heading" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
+  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "heading" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
 const CodeSkeleton = forwardRef(function(props, ref) {
@@ -6429,7 +6424,7 @@ const CodeSkeleton = forwardRef(function(props, ref) {
   } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
   const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
-  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "code" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
+  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "code" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
 const CustomButton = styled(Button).withConfig({
@@ -6576,8 +6571,8 @@ const STATUS_CARD_TONE = {
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = /* @__PURE__ */ styled(Card).withConfig({
-  displayName: "Root",
+}, StyledToast = /* @__PURE__ */ styled(Card).withConfig({
+  displayName: "StyledToast",
   componentId: "sc-1icz8ea-0"
 })(rootStyles);
 function Toast(props) {
@@ -6613,7 +6608,7 @@ function Toast(props) {
     t4
   ] }), $[20] = t3, $[21] = t4, $[22] = t5) : t5 = $[22];
   let t6;
-  return $[23] !== cardTone || $[24] !== duration || $[25] !== radius || $[26] !== restProps || $[27] !== role || $[28] !== t5 ? (t6 = /* @__PURE__ */ jsx(Root$2, { "data-ui": "Toast", role, ...restProps, marginTop: 3, radius, shadow: 2, tone: cardTone, $duration: duration, children: t5 }), $[23] = cardTone, $[24] = duration, $[25] = radius, $[26] = restProps, $[27] = role, $[28] = t5, $[29] = t6) : t6 = $[29], t6;
+  return $[23] !== cardTone || $[24] !== duration || $[25] !== radius || $[26] !== restProps || $[27] !== role || $[28] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledToast, { "data-ui": "Toast", role, ...restProps, marginTop: 3, radius, shadow: 2, tone: cardTone, $duration: duration, children: t5 }), $[23] = cardTone, $[24] = duration, $[25] = radius, $[26] = restProps, $[27] = role, $[28] = t5, $[29] = t6) : t6 = $[29], t6;
 }
 Toast.displayName = "Toast";
 function useMounted() {
@@ -6631,8 +6626,8 @@ let toastId = 0;
 function generateToastId() {
   return String(toastId++);
 }
-const Root$1 = styled(Layer).withConfig({
-  displayName: "Root",
+const StyledToastProvider = styled(Layer).withConfig({
+  displayName: "StyledToastProvider",
   componentId: "sc-17mn6j-0"
 })`position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;`, ToastContainer = styled.div.withConfig({
   displayName: "ToastContainer",
@@ -6721,7 +6716,7 @@ function ToastProvider(props) {
     toastsRef.current = {};
   }, t14 = [], $[10] = t13, $[11] = t14) : (t13 = $[10], t14 = $[11]), useEffect(t13, t14);
   let t15;
-  $[12] !== mounted || $[13] !== padding || $[14] !== paddingX || $[15] !== paddingY || $[16] !== prefersReducedMotion || $[17] !== state || $[18] !== variants || $[19] !== zOffset ? (t15 = mounted && /* @__PURE__ */ jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsx(ToastContainer, { children: /* @__PURE__ */ jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, children: state.map((t162) => {
+  $[12] !== mounted || $[13] !== padding || $[14] !== paddingX || $[15] !== paddingY || $[16] !== prefersReducedMotion || $[17] !== state || $[18] !== variants || $[19] !== zOffset ? (t15 = mounted && /* @__PURE__ */ jsx(StyledToastProvider, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsx(ToastContainer, { children: /* @__PURE__ */ jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, children: state.map((t162) => {
     const {
       dismiss: dismiss_0,
       id: id_0,
@@ -7069,8 +7064,8 @@ const TreeGroup = memo(function(props) {
   const expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded;
   let t2;
   return $[4] !== children || $[5] !== restProps || $[6] !== t1 || $[7] !== tree.space ? (t2 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = children, $[5] = restProps, $[6] = t1, $[7] = tree.space, $[8] = t2) : t2 = $[8], t2;
-}), Root = memo(styled.li.withConfig({
-  displayName: "Root",
+}), StyledTreeItem = memo(styled.li.withConfig({
+  displayName: "StyledTreeItem",
   componentId: "sc-iiskig-0"
 })(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = /* @__PURE__ */ styled(Box).attrs({
   forwardedAs: "a"
@@ -7129,10 +7124,10 @@ const TreeGroup = memo(function(props) {
     ] }),
     /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
   ] });
-  return href ? /* @__PURE__ */ jsxs(Root, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: rootRef, role: "none", children: [
+  return href ? /* @__PURE__ */ jsxs(StyledTreeItem, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: rootRef, role: "none", children: [
     /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }),
     /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }) })
-  ] }) : /* @__PURE__ */ jsxs(Root, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
+  ] }) : /* @__PURE__ */ jsxs(StyledTreeItem, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
     /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }),
     /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }) })
   ] });