@sanity/ui 2.10.18-canary.0 → 2.11.0

package/dist/index.js

@@ -1420,6 +1420,10 @@ function responsiveShadowStyle(props) {
   } = theme.getTheme_v2(props.theme);
   return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
 }
+const SpanWithTextOverflow = styledComponents.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,
@@ -1459,13 +1463,10 @@ function labelBaseStyle(props) {
     }
   `;
 }
-const Root$C = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledLabel = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledLabel",
   componentId: "sc-1luap7z-0"
-})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styledComponents.styled.span.withConfig({
-  displayName: "SpanWithTextOverflow",
-  componentId: "sc-1luap7z-1"
-})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Label = react.forwardRef(function(props, ref) {
+})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
   let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
@@ -1482,14 +1483,14 @@ const Root$C = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
     let t22;
-    $[9] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$2, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
+    $[9] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
   } else {
     let t22;
     $[11] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -1635,8 +1636,8 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$B = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledAvatar = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledAvatar",
   componentId: "sc-1rj7kl0-0"
 })(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "Arrow",
@@ -1655,8 +1656,8 @@ const Root$B = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   componentId: "sc-1rj7kl0-5"
 })({
   color: "inherit"
-}), Image = /* @__PURE__ */ styledComponents.styled.svg.withConfig({
-  displayName: "Image",
+}), AvatarImage = /* @__PURE__ */ styledComponents.styled.svg.withConfig({
+  displayName: "AvatarImage",
   componentId: "sc-1rj7kl0-6"
 })(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(52);
@@ -1700,7 +1701,7 @@ const Root$B = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t11;
   $[24] !== color ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(AvatarImage, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsxRuntime.jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
     !__unstable_hideInnerStroke && /* @__PURE__ */ jsxRuntime.jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
@@ -1709,7 +1710,7 @@ const Root$B = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t13;
   $[34] !== imageFailed || $[35] !== initials || $[36] !== initialsSize || $[37] !== src ? (t13 = (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -1755,8 +1756,8 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledAvatarCounter = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledAvatarCounter",
   componentId: "sc-1ydx86y-0"
 })(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(9), {
@@ -1769,7 +1770,7 @@ const Root$A = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t3;
   $[2] !== count || $[3] !== fontSize2 ? (t3 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -1803,8 +1804,8 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledAvatarStack = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledAvatarStack",
   componentId: "sc-cysmbb-0"
 })(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(15);
@@ -1815,7 +1816,7 @@ const Root$z = /* @__PURE__ */ styledComponents.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 = react.Children.toArray(childrenProp).filter(react.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__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }), t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) });
+  const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, children = react.Children.toArray(childrenProp).filter(react.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__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }), t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) });
   let t5;
   $[5] !== size2 ? (t5 = (child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
     size: size2
@@ -1829,8 +1830,8 @@ const Root$z = /* @__PURE__ */ styledComponents.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__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledBox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledBox",
   componentId: "sc-1hhky9f-0"
 })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(59);
@@ -1866,7 +1867,7 @@ const Root$y = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -1937,13 +1938,10 @@ function textBaseStyle(props) {
     }
   `;
 }
-const Root$x = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledText = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledText",
   componentId: "sc-11ov82j-0"
-})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), SpanWithTextOverflow$1 = styledComponents.styled.span.withConfig({
-  displayName: "SpanWithTextOverflow",
-  componentId: "sc-11ov82j-1"
-})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Text = react.forwardRef(function(props, ref) {
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -1960,13 +1958,13 @@ const Root$x = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
     let t32;
-    $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$1, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
+    $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
   }
   const t3 = useArrayProp(align), t4 = useArrayProp(size2);
   let t5;
   $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -1984,8 +1982,8 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$w = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+const StyledBadge = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "StyledBadge",
   componentId: "sc-5u140l-0"
 })(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
@@ -2007,11 +2005,11 @@ const Root$w = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   let t6;
   $[7] !== children || $[8] !== fontSize2 ? (t6 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+const StyledFlex = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "StyledFlex",
   componentId: "sc-oxesg3-0"
 })(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
@@ -2027,7 +2025,7 @@ const Root$v = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = styledComponents.keyframes`
@@ -2038,15 +2036,15 @@ const rotate$1 = styledComponents.keyframes`
   to {
     transform: rotate(360deg);
   }
-`, Root$u = styledComponents.styled(Text).withConfig({
-  displayName: "Root",
+`, StyledSpinner = styledComponents.styled(Text).withConfig({
+  displayName: "StyledSpinner",
   componentId: "sc-124hnd0-0"
 })`& > span > svg{animation:${rotate$1} 500ms linear infinite;}`, Spinner = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(4);
   let t0;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
   let t1;
-  return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -2217,8 +2215,8 @@ function buttonColorStyles(props) {
     }
   }, style?.button?.root].filter(Boolean);
 }
-const Root$t = /* @__PURE__ */ styledComponents.styled.button.withConfig({
-  displayName: "Root",
+const StyledButton = /* @__PURE__ */ styledComponents.styled.button.withConfig({
+  displayName: "StyledButton",
   componentId: "sc-aaekt4-0"
 })(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div.withConfig({
   displayName: "LoadingBox",
@@ -2284,7 +2282,7 @@ const Root$t = /* @__PURE__ */ styledComponents.styled.button.withConfig({
   let t16;
   $[47] !== boxProps || $[48] !== children ? (t16 = children && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -2439,8 +2437,8 @@ function cardColorStyle(props) {
     ${style?.card?.root}
   `;
 }
-const Root$s = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+const StyledCard = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "StyledCard",
   componentId: "sc-osnro2-0"
 })(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(42);
@@ -2465,7 +2463,7 @@ const Root$s = /* @__PURE__ */ styledComponents.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 = ReactIs.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = t16, $[40] = tone, $[41] = t17) : t17 = $[41], t17;
 });
@@ -2608,8 +2606,8 @@ function inputElementStyles(props) {
     }
   `;
 }
-const Root$r = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledCheckbox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledCheckbox",
   componentId: "sc-1l5mt2l-0"
 })(checkboxBaseStyles), Input$5 = /* @__PURE__ */ styledComponents.styled.input.withConfig({
   displayName: "Input",
@@ -2643,7 +2641,7 @@ const Root$r = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     /* @__PURE__ */ jsxRuntime.jsx(icons.RemoveIcon, {})
   ] }), $[20] = t7) : t7 = $[20];
   let t8;
-  return $[21] !== className || $[22] !== style || $[23] !== t6 ? (t8 = /* @__PURE__ */ jsxRuntime.jsxs(Root$r, { className, "data-ui": "Checkbox", style, children: [
+  return $[21] !== className || $[22] !== style || $[23] !== t6 ? (t8 = /* @__PURE__ */ jsxRuntime.jsxs(StyledCheckbox, { className, "data-ui": "Checkbox", style, children: [
     t6,
     t7
   ] }), $[21] = className, $[22] = style, $[23] = t6, $[24] = t8) : t8 = $[24], t8;
@@ -2797,8 +2795,8 @@ function codeBaseStyle() {
     }
   `;
 }
-const Root$q = /* @__PURE__ */ styledComponents.styled.pre.withConfig({
-  displayName: "Root",
+const StyledCode = /* @__PURE__ */ styledComponents.styled.pre.withConfig({
+  displayName: "StyledCode",
   componentId: "sc-4dymyn-0"
 })(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(23);
@@ -2819,7 +2817,7 @@ const Root$q = /* @__PURE__ */ styledComponents.styled.pre.withConfig({
   let t4;
   $[12] !== children || $[13] !== language || $[14] !== registered ? (t4 = language && registered && /* @__PURE__ */ jsxRuntime.jsx(Refractor__default.default, { 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__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -2841,8 +2839,8 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$p = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+const StyledContainer = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "StyledContainer",
   componentId: "sc-wyroop-0"
 })(containerBaseStyle, responsiveContainerWidthStyle), Container = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(9);
@@ -2854,11 +2852,11 @@ const Root$p = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+const StyledGrid = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "StyledGrid",
   componentId: "sc-v8t8oz-0"
 })(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(26);
@@ -2878,7 +2876,7 @@ const Root$o = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -2940,13 +2938,10 @@ function headingBaseStyle(props) {
     }
   `;
 }
-const Root$n = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledHeading = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledHeading",
   componentId: "sc-137lwim-0"
-})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styledComponents.styled.span.withConfig({
-  displayName: "SpanWithTextOverflow",
-  componentId: "sc-137lwim-1"
-})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Heading = react.forwardRef(function(props, ref) {
+})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -2969,7 +2964,7 @@ const Root$n = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t5;
   $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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() {
@@ -2999,8 +2994,8 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$m = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+const StyledInline = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "StyledInline",
   componentId: "sc-1pkiy6j-0"
 })(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(12);
@@ -3015,7 +3010,7 @@ const Root$m = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   $[5] !== childrenProp ? (t1 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -3038,8 +3033,8 @@ function kbdStyle() {
     }
   `;
 }
-const Root$l = /* @__PURE__ */ styledComponents.styled.kbd.withConfig({
-  displayName: "Root",
+const StyledKBD = /* @__PURE__ */ styledComponents.styled.kbd.withConfig({
+  displayName: "StyledKBD",
   componentId: "sc-1w7yd8w-0"
 })(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
@@ -3057,7 +3052,7 @@ const Root$l = /* @__PURE__ */ styledComponents.styled.kbd.withConfig({
   let t5;
   $[9] !== padding || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -3127,8 +3122,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__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledArrow = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledArrow",
   componentId: "sc-12vzy6c-0"
 })(({
   $w: w
@@ -3228,7 +3223,7 @@ const Root$k = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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);
@@ -3489,8 +3484,8 @@ function _temp$5(v) {
   return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
-const Root$j = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledLayer = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledLayer",
   componentId: "sc-16kojrv-0"
 })({
   position: "relative"
@@ -3529,7 +3524,7 @@ const Root$j = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(11);
   let children, restProps, t0;
@@ -3612,8 +3607,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 = styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledSrOnly = styledComponents.styled.div.withConfig({
+  displayName: "StyledSrOnly",
   componentId: "sc-mubr0c-0"
 })`display:block;width:0;height:0;position:absolute;overflow:hidden;overflow:clip;`, SrOnly = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(4), {
@@ -3621,11 +3616,11 @@ const Root$i = styledComponents.styled.div.withConfig({
     children
   } = props;
   let t0;
-  return $[0] !== as || $[1] !== children || $[2] !== ref ? (t0 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledVirtualList = styledComponents.styled.div.withConfig({
+  displayName: "StyledVirtualList",
   componentId: "sc-dlqsj4-0"
 })`position:relative;`, ItemWrapper = styledComponents.styled.div.withConfig({
   displayName: "ItemWrapper",
@@ -3742,7 +3737,7 @@ const Root$h = styledComponents.styled.div.withConfig({
   let t14;
   $[49] !== children || $[50] !== wrapperStyle ? (t14 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -4142,8 +4137,8 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledRadio = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledRadio",
   componentId: "sc-ccrwkf-0"
 })(radioBaseStyle), Input$4 = /* @__PURE__ */ styledComponents.styled.input.withConfig({
   displayName: "Input",
@@ -4168,7 +4163,7 @@ const Root$g = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t5;
   $[14] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", {}), $[14] = t5) : t5 = $[14];
   let t6;
-  return $[15] !== className || $[16] !== style || $[17] !== t4 ? (t6 = /* @__PURE__ */ jsxRuntime.jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
+  return $[15] !== className || $[16] !== style || $[17] !== t4 ? (t6 = /* @__PURE__ */ jsxRuntime.jsxs(StyledRadio, { className, "data-ui": "Radio", style, children: [
     t4,
     t5
   ] }), $[15] = className, $[16] = style, $[17] = t4, $[18] = t6) : t6 = $[18], t6;
@@ -4316,8 +4311,8 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  displayName: "Root",
+}, StyledSelect = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "StyledSelect",
   componentId: "sc-5mxno7-0"
 })(selectStyle.root), Input$3 = /* @__PURE__ */ styledComponents.styled.select.withConfig({
   displayName: "Input",
@@ -4352,7 +4347,7 @@ const selectStyle = {
   let t14;
   $[23] !== padding || $[24] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(IconBox, { padding, children: t13 }), $[23] = padding, $[24] = t13, $[25] = t14) : t14 = $[25];
   let t15;
-  return $[26] !== t11 || $[27] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(Root$f, { "data-ui": "Select", children: [
+  return $[26] !== t11 || $[27] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(StyledSelect, { "data-ui": "Select", children: [
     t11,
     t14
   ] }), $[26] = t11, $[27] = t14, $[28] = t15) : t15 = $[28], t15;
@@ -4380,8 +4375,8 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$e = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+const StyledStack = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "StyledStack",
   componentId: "sc-8dpfq2-0"
 })(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(10);
@@ -4393,7 +4388,7 @@ const Root$e = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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() {
@@ -4549,8 +4544,8 @@ function switchThumbStyles(props) {
     `}
   `;
 }
-const Root$d = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  displayName: "Root",
+const StyledSwitch = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  displayName: "StyledSwitch",
   componentId: "sc-dw1foe-0"
 })(switchBaseStyles), Input$2 = /* @__PURE__ */ styledComponents.styled.input.withConfig({
   displayName: "Input",
@@ -4594,14 +4589,14 @@ const Root$d = /* @__PURE__ */ styledComponents.styled.span.withConfig({
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Root$d, { className, "data-ui": "Switch", style, children: [
+  return $[21] !== className || $[22] !== style || $[23] !== t6 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.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__ */ styledComponents.styled.span.withConfig({
-  displayName: "Root",
+const StyledTextArea = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  displayName: "StyledTextArea",
   componentId: "sc-1d6h1o8-0"
 })(textInputRootStyle), InputRoot$1 = styledComponents.styled.span.withConfig({
   displayName: "InputRoot",
@@ -4636,7 +4631,7 @@ const Root$c = /* @__PURE__ */ styledComponents.styled.span.withConfig({
   let t15;
   $[20] !== __unstable_disableFocusRing || $[21] !== rootTheme.scheme || $[22] !== rootTheme.tone || $[23] !== t13 || $[24] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
+  return $[26] !== t12 || $[27] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(StyledTextArea, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
     t12,
     t15
   ] }) }), $[26] = t12, $[27] = t15, $[28] = t16) : t16 = $[28], t16;
@@ -4644,10 +4639,10 @@ const Root$c = /* @__PURE__ */ styledComponents.styled.span.withConfig({
 TextArea.displayName = "ForwardRef(TextArea)";
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
-}, Root$b = /* @__PURE__ */ styledComponents.styled(Card).attrs({
+}, StyledTextInput = /* @__PURE__ */ styledComponents.styled(Card).attrs({
   forwardedAs: "span"
 }).withConfig({
-  displayName: "Root",
+  displayName: "StyledTextInput",
   componentId: "sc-h62wco-0"
 })(textInputRootStyle), InputRoot = styledComponents.styled.span.withConfig({
   displayName: "InputRoot",
@@ -4761,7 +4756,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__ */ jsxRuntime.jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
+  return $[79] !== prefixNode || $[80] !== rootTheme.tone || $[81] !== suffixNode || $[82] !== t27 ? (t28 = /* @__PURE__ */ jsxRuntime.jsxs(StyledTextInput, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
     t27,
     suffixNode
@@ -4884,8 +4879,8 @@ function TooltipDelayGroupProvider(props) {
   return $[7] !== children || $[8] !== value ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children }), $[7] = children, $[8] = value, $[9] = t3) : t3 = $[9], t3;
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
-const Root$a = styledComponents.styled(Layer).withConfig({
-  displayName: "Root",
+const StyledTooltip = styledComponents.styled(Layer).withConfig({
+  displayName: "StyledTooltip",
   componentId: "sc-13f2zvh-0"
 })`pointer-events:none;`, Tooltip = react.forwardRef(function(props, forwardedRef) {
   const boundaryElementContext = useBoundaryElement(), {
@@ -5003,7 +4998,7 @@ const Root$a = styledComponents.styled(Layer).withConfig({
       return setReferenceElement(childRef.current), () => setReferenceElement(null);
   }, [child]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (disabled) return child;
-  const tooltip = /* @__PURE__ */ jsxRuntime.jsx(Root$a, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
+  const tooltip = /* @__PURE__ */ jsxRuntime.jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
     ...floatingStyles,
     maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
   }, zOffset, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
@@ -5034,8 +5029,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]), react.useEffect(t2, t3);
 }
-const Root$9 = styledComponents.styled.div.withConfig({
-  displayName: "Root",
+const StyledAutocomplete = styledComponents.styled.div.withConfig({
+  displayName: "StyledAutocomplete",
   componentId: "sc-1igauft-0"
 })`line-height:0;`, ListBox = styledComponents.styled(Box).withConfig({
   displayName: "ListBox",
@@ -5303,14 +5298,14 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     onMouseEnter: handlePopoverMouseEnter,
     onMouseLeave: handlePopoverMouseLeave
   }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Root$9, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
+  return /* @__PURE__ */ jsxRuntime.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 = styledComponents.styled.ol.withConfig({
-  displayName: "Root",
+const Autocomplete = InnerAutocomplete, StyledBreadcrumbs = styledComponents.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 = styledComponents.styled(Button).withConfig({
   displayName: "ExpandButton",
@@ -5332,7 +5327,7 @@ const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol.with
     }
     return rawItems;
   }, [collapse, expand, maxLength, open, rawItems, space]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$8, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledBreadcrumbs, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
     itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(Text, { muted: !0, children: "/" }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
   ] }, itemIndex)) });
@@ -5405,8 +5400,8 @@ function useDialog() {
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = /* @__PURE__ */ styledComponents.styled(Layer).withConfig({
-  displayName: "Root",
+const StyledDialog = /* @__PURE__ */ styledComponents.styled(Layer).withConfig({
+  displayName: "StyledDialog",
   componentId: "sc-4n4xb3-0"
 })(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styledComponents.styled(Container).withConfig({
   displayName: "DialogContainer",
@@ -5555,7 +5550,7 @@ const Dialog = react.forwardRef(function(props, ref) {
   let t11;
   $[43] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
@@ -5581,8 +5576,8 @@ function DialogProvider(props) {
   return $[3] !== children || $[4] !== contextValue ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t2) : t2 = $[5], t2;
 }
 DialogProvider.displayName = "DialogProvider";
-const Root$6 = styledComponents.styled.kbd.withConfig({
-  displayName: "Root",
+const StyledHotkeys = styledComponents.styled.kbd.withConfig({
+  displayName: "StyledHotkeys",
   componentId: "sc-b37mge-0"
 })`font:inherit;padding:1px;&:not([hidden]){display:block;}`, Key = styledComponents.styled(KBD).withConfig({
   displayName: "Key",
@@ -5612,7 +5607,7 @@ const Root$6 = styledComponents.styled.kbd.withConfig({
   let t2;
   $[17] !== space || $[18] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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);
@@ -5753,8 +5748,8 @@ function useMenuController(props) {
     mount
   };
 }
-const Root$5 = styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+const StyledMenu = styledComponents.styled(Box).withConfig({
+  displayName: "StyledMenu",
   componentId: "sc-xt0tnv-0"
 })`outline:none;overflow:auto;`, Menu = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(50);
@@ -5834,7 +5829,7 @@ const Root$5 = styledComponents.styled(Box).withConfig({
   let t11;
   $[38] !== children || $[39] !== space ? (t11 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: t12 }), $[47] = t12, $[48] = value, $[49] = t13) : t13 = $[49], t13;
 });
@@ -6096,13 +6091,14 @@ function useMenu() {
   return value;
 }
 function MenuGroup(props) {
-  const $ = reactCompilerRuntime.c(77);
-  let IconComponent, children, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
+  const $ = reactCompilerRuntime.c(79);
+  let IconComponent, children, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
     as: t0,
     children,
     fontSize: t1,
     icon: IconComponent,
+    menu: menuProps,
     onClick,
     padding: t2,
     popover,
@@ -6111,7 +6107,7 @@ function MenuGroup(props) {
     text,
     tone: t5,
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = onClick, $[4] = popover, $[5] = restProps, $[6] = t0, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = t5, $[12] = text) : (IconComponent = $[1], children = $[2], onClick = $[3], popover = $[4], restProps = $[5], t0 = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10], t5 = $[11], text = $[12]);
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = menuProps, $[4] = onClick, $[5] = popover, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5, $[13] = text) : (IconComponent = $[1], children = $[2], menuProps = $[3], onClick = $[4], popover = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12], text = $[13]);
   const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, menu = useMenu(), {
     scheme
   } = useRootTheme(), {
@@ -6124,80 +6120,80 @@ function MenuGroup(props) {
     registerElement
   } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1);
   let t6;
-  $[13] !== onItemMouseEnter ? (t6 = (event) => {
+  $[14] !== onItemMouseEnter ? (t6 = (event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
-  }, $[13] = onItemMouseEnter, $[14] = t6) : t6 = $[14];
+  }, $[14] = onItemMouseEnter, $[15] = t6) : t6 = $[15];
   const handleMouseEnter = t6;
   let t7;
-  $[15] !== rootElement ? (t7 = (event_0) => {
+  $[16] !== rootElement ? (t7 = (event_0) => {
     event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
       rootElement?.focus();
     }));
-  }, $[15] = rootElement, $[16] = t7) : t7 = $[16];
+  }, $[16] = rootElement, $[17] = t7) : t7 = $[17];
   const handleMenuKeyDown = t7;
   let t8;
-  $[17] !== onClick ? (t8 = (event_1) => {
+  $[18] !== onClick ? (t8 = (event_1) => {
     onClick?.(event_1), setShouldFocus("first"), setOpen(!0);
-  }, $[17] = onClick, $[18] = t8) : t8 = $[18];
+  }, $[18] = onClick, $[19] = t8) : t8 = $[19];
   const handleClick = t8;
   let t9;
-  $[19] !== onItemClick ? (t9 = () => {
+  $[20] !== onItemClick ? (t9 = () => {
     setOpen(!1), onItemClick?.();
-  }, $[19] = onItemClick, $[20] = t9) : t9 = $[20];
+  }, $[20] = onItemClick, $[21] = t9) : t9 = $[21];
   const handleChildItemClick = t9;
   let t10;
-  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[21] = t10) : t10 = $[21];
+  $[22] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[22] = t10) : t10 = $[22];
   const handleMenuMouseEnter = t10;
   let t11, t12;
-  $[22] !== mount || $[23] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[22] = mount, $[23] = rootElement, $[24] = t11, $[25] = t12) : (t11 = $[24], t12 = $[25]), react.useEffect(t11, t12);
+  $[23] !== mount || $[24] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[23] = mount, $[24] = rootElement, $[25] = t11, $[26] = t12) : (t11 = $[25], t12 = $[26]), react.useEffect(t11, t12);
   let t13, t14;
-  $[26] !== active ? (t13 = () => {
+  $[27] !== active ? (t13 = () => {
     active || setOpen(!1);
-  }, t14 = [active], $[26] = active, $[27] = t13, $[28] = t14) : (t13 = $[27], t14 = $[28]), react.useEffect(t13, t14);
+  }, t14 = [active], $[27] = active, $[28] = t13, $[29] = t14) : (t13 = $[28], t14 = $[29]), react.useEffect(t13, t14);
   let t15, t16;
-  $[29] !== open ? (t15 = () => {
+  $[30] !== open ? (t15 = () => {
     open || setWithinMenu(!1);
-  }, t16 = [open], $[29] = open, $[30] = t15, $[31] = t16) : (t15 = $[30], t16 = $[31]), react.useEffect(t15, t16);
+  }, t16 = [open], $[30] = open, $[31] = t15, $[32] = t16) : (t15 = $[31], t16 = $[32]), react.useEffect(t15, t16);
   let t17, t18;
-  $[32] !== shouldFocus ? (t17 = () => {
+  $[33] !== shouldFocus ? (t17 = () => {
     if (!shouldFocus)
       return;
     const rafId = requestAnimationFrame(() => setShouldFocus(null));
     return () => cancelAnimationFrame(rafId);
-  }, t18 = [shouldFocus], $[32] = shouldFocus, $[33] = t17, $[34] = t18) : (t17 = $[33], t18 = $[34]), react.useEffect(t17, t18);
+  }, t18 = [shouldFocus], $[33] = shouldFocus, $[34] = t17, $[35] = t18) : (t17 = $[34], t18 = $[35]), react.useEffect(t17, t18);
   let t19;
-  $[35] !== children || $[36] !== handleChildItemClick || $[37] !== handleMenuKeyDown || $[38] !== onClickOutside || $[39] !== onEscape || $[40] !== registerElement || $[41] !== shouldFocus ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[35] = children, $[36] = handleChildItemClick, $[37] = handleMenuKeyDown, $[38] = onClickOutside, $[39] = onEscape, $[40] = registerElement, $[41] = shouldFocus, $[42] = t19) : t19 = $[42];
+  $[36] !== children || $[37] !== handleChildItemClick || $[38] !== handleMenuKeyDown || $[39] !== menuProps || $[40] !== onClickOutside || $[41] !== onEscape || $[42] !== registerElement || $[43] !== shouldFocus ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Menu, { ...menuProps, onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[36] = children, $[37] = handleChildItemClick, $[38] = handleMenuKeyDown, $[39] = menuProps, $[40] = onClickOutside, $[41] = onEscape, $[42] = registerElement, $[43] = shouldFocus, $[44] = t19) : t19 = $[44];
   const childMenu = t19;
   let t20;
-  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
+  $[45] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
     const target = event_2.currentTarget;
     if (document.activeElement === target && event_2.key === "ArrowRight") {
       setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
       return;
     }
-  }, $[43] = t20) : t20 = $[43];
+  }, $[45] = t20) : t20 = $[45];
   const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0, t24 = useArrayProp(radius), t25 = as === "button" ? "button" : void 0;
   let t26;
-  $[44] !== IconComponent || $[45] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+  $[46] !== IconComponent || $[47] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
     react.isValidElement(IconComponent) && IconComponent,
     ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
-  ] }), $[44] = IconComponent, $[45] = fontSize2, $[46] = t26) : t26 = $[46];
+  ] }), $[46] = IconComponent, $[47] = fontSize2, $[48] = t26) : t26 = $[48];
   let t27;
-  $[47] !== fontSize2 || $[48] !== text ? (t27 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[47] = fontSize2, $[48] = text, $[49] = t27) : t27 = $[49];
+  $[49] !== fontSize2 || $[50] !== text ? (t27 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[49] = fontSize2, $[50] = text, $[51] = t27) : t27 = $[51];
   let t28;
-  $[50] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[50] = t28) : t28 = $[50];
+  $[52] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[52] = t28) : t28 = $[52];
   let t29;
-  $[51] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[51] = fontSize2, $[52] = t29) : t29 = $[52];
+  $[53] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[53] = fontSize2, $[54] = t29) : t29 = $[54];
   let t30;
-  $[53] !== padding || $[54] !== space || $[55] !== t26 || $[56] !== t27 || $[57] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
+  $[55] !== padding || $[56] !== space || $[57] !== t26 || $[58] !== t27 || $[59] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
     t26,
     t27,
     t29
-  ] }), $[53] = padding, $[54] = space, $[55] = t26, $[56] = t27, $[57] = t29, $[58] = t30) : t30 = $[58];
+  ] }), $[55] = padding, $[56] = space, $[57] = t26, $[58] = t27, $[59] = t29, $[60] = t30) : t30 = $[60];
   let t31;
-  $[59] !== as || $[60] !== handleClick || $[61] !== handleMouseEnter || $[62] !== restProps || $[63] !== scheme || $[64] !== t21 || $[65] !== t22 || $[66] !== t23 || $[67] !== t24 || $[68] !== t25 || $[69] !== t30 || $[70] !== tone ? (t31 = /* @__PURE__ */ jsxRuntime.jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[59] = as, $[60] = handleClick, $[61] = handleMouseEnter, $[62] = restProps, $[63] = scheme, $[64] = t21, $[65] = t22, $[66] = t23, $[67] = t24, $[68] = t25, $[69] = t30, $[70] = tone, $[71] = t31) : t31 = $[71];
+  $[61] !== as || $[62] !== handleClick || $[63] !== handleMouseEnter || $[64] !== restProps || $[65] !== scheme || $[66] !== t21 || $[67] !== t22 || $[68] !== t23 || $[69] !== t24 || $[70] !== t25 || $[71] !== t30 || $[72] !== tone ? (t31 = /* @__PURE__ */ jsxRuntime.jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[61] = as, $[62] = handleClick, $[63] = handleMouseEnter, $[64] = restProps, $[65] = scheme, $[66] = t21, $[67] = t22, $[68] = t23, $[69] = t24, $[70] = t25, $[71] = t30, $[72] = tone, $[73] = t31) : t31 = $[73];
   let t32;
-  return $[72] !== childMenu || $[73] !== open || $[74] !== popover || $[75] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[72] = childMenu, $[73] = open, $[74] = popover, $[75] = t31, $[76] = t32) : t32 = $[76], t32;
+  return $[74] !== childMenu || $[75] !== open || $[76] !== popover || $[77] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[74] = childMenu, $[75] = open, $[76] = popover, $[77] = t31, $[78] = t32) : t32 = $[78], t32;
 }
 MenuGroup.displayName = "MenuGroup";
 const MenuItem = react.forwardRef(function(props, forwardedRef) {
@@ -6332,8 +6328,8 @@ const keyframe = styledComponents.keyframes`
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
-  displayName: "Root",
+`, StyledSkeleton$1 = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "StyledSkeleton",
   componentId: "sc-ebtpni-0"
 })(responsiveRadiusStyle, skeletonStyle), Skeleton = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(14);
@@ -6358,11 +6354,11 @@ const keyframe = styledComponents.keyframes`
   }, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), react.useEffect(t1, t2);
   const t3 = useArrayProp(radius);
   let t4;
-  return $[8] !== animated || $[9] !== ref || $[10] !== restProps || $[11] !== t3 || $[12] !== visible ? (t4 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ styledComponents.styled(Skeleton).withConfig({
-  displayName: "Root",
+const StyledSkeleton = /* @__PURE__ */ styledComponents.styled(Skeleton).withConfig({
+  displayName: "StyledSkeleton",
   componentId: "sc-2p7a1v-0"
 })((props) => {
   const {
@@ -6387,7 +6383,7 @@ const Root$3 = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "text" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
 const LabelSkeleton = react.forwardRef(function(props, ref) {
@@ -6399,7 +6395,7 @@ const LabelSkeleton = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "label" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
 const HeadingSkeleton = react.forwardRef(function(props, ref) {
@@ -6411,7 +6407,7 @@ const HeadingSkeleton = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "heading" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
 const CodeSkeleton = react.forwardRef(function(props, ref) {
@@ -6423,7 +6419,7 @@ const CodeSkeleton = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "code" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
 const CustomButton = styledComponents.styled(Button).withConfig({
@@ -6570,8 +6566,8 @@ const STATUS_CARD_TONE = {
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = /* @__PURE__ */ styledComponents.styled(Card).withConfig({
-  displayName: "Root",
+}, StyledToast = /* @__PURE__ */ styledComponents.styled(Card).withConfig({
+  displayName: "StyledToast",
   componentId: "sc-1icz8ea-0"
 })(rootStyles);
 function Toast(props) {
@@ -6607,7 +6603,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__ */ jsxRuntime.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__ */ jsxRuntime.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() {
@@ -6625,8 +6621,8 @@ let toastId = 0;
 function generateToastId() {
   return String(toastId++);
 }
-const Root$1 = styledComponents.styled(Layer).withConfig({
-  displayName: "Root",
+const StyledToastProvider = styledComponents.styled(Layer).withConfig({
+  displayName: "StyledToastProvider",
   componentId: "sc-17mn6j-0"
 })`position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;`, ToastContainer = styledComponents.styled.div.withConfig({
   displayName: "ToastContainer",
@@ -6715,7 +6711,7 @@ function ToastProvider(props) {
     toastsRef.current = {};
   }, t14 = [], $[10] = t13, $[11] = t14) : (t13 = $[10], t14 = $[11]), react.useEffect(t13, t14);
   let t15;
-  $[12] !== mounted || $[13] !== padding || $[14] !== paddingX || $[15] !== paddingY || $[16] !== prefersReducedMotion || $[17] !== state || $[18] !== variants || $[19] !== zOffset ? (t15 = mounted && /* @__PURE__ */ jsxRuntime.jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.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__ */ jsxRuntime.jsx(StyledToastProvider, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: !1, children: state.map((t162) => {
     const {
       dismiss: dismiss_0,
       id: id_0,
@@ -7063,8 +7059,8 @@ const TreeGroup = react.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__ */ jsxRuntime.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 = react.memo(styledComponents.styled.li.withConfig({
-  displayName: "Root",
+}), StyledTreeItem = react.memo(styledComponents.styled.li.withConfig({
+  displayName: "StyledTreeItem",
   componentId: "sc-iiskig-0"
 })(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = /* @__PURE__ */ styledComponents.styled(Box).attrs({
   forwardedAs: "a"
@@ -7123,10 +7119,10 @@ const TreeGroup = react.memo(function(props) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
   ] });
-  return href ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }),
     /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }) })
-  ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }),
     /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }) })
   ] });