@sanity/ui 2.10.17 → 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 = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`, Label = forwardRef(function(props, ref) {
+const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledLabel",
+  componentId: "sc-1luap7z-0"
+})(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 = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBa
   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,9 +1642,30 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$B = styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styled.div(avatarStyle.arrow), BgStroke = styled.ellipse(avatarStyle.bgStroke), Stroke = styled.ellipse(avatarStyle.stroke), Initials = styled.div(avatarStyle.initials), InitialsLabel = styled(Label)({
+const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledAvatar",
+  componentId: "sc-1rj7kl0-0"
+})(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Arrow",
+  componentId: "sc-1rj7kl0-1"
+})(avatarStyle.arrow), BgStroke = /* @__PURE__ */ styled.ellipse.withConfig({
+  displayName: "BgStroke",
+  componentId: "sc-1rj7kl0-2"
+})(avatarStyle.bgStroke), Stroke = /* @__PURE__ */ styled.ellipse.withConfig({
+  displayName: "Stroke",
+  componentId: "sc-1rj7kl0-3"
+})(avatarStyle.stroke), Initials = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Initials",
+  componentId: "sc-1rj7kl0-4"
+})(avatarStyle.initials), InitialsLabel = /* @__PURE__ */ styled(Label).withConfig({
+  displayName: "InitialsLabel",
+  componentId: "sc-1rj7kl0-5"
+})({
   color: "inherit"
-}), Image = styled.svg(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
+}), AvatarImage = /* @__PURE__ */ styled.svg.withConfig({
+  displayName: "AvatarImage",
+  componentId: "sc-1rj7kl0-6"
+})(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
   const $ = c(52);
   let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
   $[0] !== props ? ({
@@ -1685,7 +1707,7 @@ const Root$B = styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1
   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" }),
@@ -1694,7 +1716,7 @@ const Root$B = styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1
   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
@@ -1740,7 +1762,10 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
+const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledAvatarCounter",
+  componentId: "sc-1ydx86y-0"
+})(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
   const $ = c(9), {
     count,
     size: t0
@@ -1751,7 +1776,7 @@ const Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseS
   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) {
@@ -1785,7 +1810,10 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
+const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledAvatarStack",
+  componentId: "sc-cysmbb-0"
+})(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
   const $ = c(15);
   let childrenProp, restProps, t0, t1;
   $[0] !== props ? ({
@@ -1794,7 +1822,7 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
     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
@@ -1808,7 +1836,10 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
   ] }), $[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 = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
+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);
   let column, columnEnd, columnStart, flex, height, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, restProps, row, rowEnd, rowStart, sizing, t0, t1, t2, t3;
   $[0] !== props ? ({
@@ -1842,7 +1873,7 @@ const Root$y = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiv
   } = 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) {
@@ -1913,13 +1944,10 @@ function textBaseStyle(props) {
     }
   `;
 }
-const Root$x = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), SpanWithTextOverflow$1 = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`, Text = forwardRef(function(props, ref) {
+const StyledText = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledText",
+  componentId: "sc-11ov82j-0"
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = forwardRef(function(props, ref) {
   const $ = c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -1936,13 +1964,13 @@ const Root$x = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBase
   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) {
@@ -1960,7 +1988,10 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
+const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledBadge",
+  componentId: "sc-5u140l-0"
+})(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
   const $ = c(17);
   let children, restProps, t0, t1, t2, t3;
   if ($[0] !== props) {
@@ -1980,10 +2011,13 @@ const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRe
   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 = styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
+const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledFlex",
+  componentId: "sc-oxesg3-0"
+})(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
   const $ = c(17);
   let align, as, gap, justify, restProps, t0, wrap;
   $[0] !== props ? ({
@@ -1997,7 +2031,7 @@ const Root$v = styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = forwardRe
   } = 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`
@@ -2008,16 +2042,15 @@ const rotate$1 = keyframes`
   to {
     transform: rotate(360deg);
   }
-`, Root$u = styled(Text)`
-  & > span > svg {
-    animation: ${rotate$1} 500ms linear infinite;
-  }
-`, Spinner = forwardRef(function(props, ref) {
+`, 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) {
@@ -2188,20 +2221,13 @@ function buttonColorStyles(props) {
     }
   }, style?.button?.root].filter(Boolean);
 }
-const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`, Button = forwardRef(function(props, ref) {
+const StyledButton = /* @__PURE__ */ styled.button.withConfig({
+  displayName: "StyledButton",
+  componentId: "sc-aaekt4-0"
+})(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div.withConfig({
+  displayName: "LoadingBox",
+  componentId: "sc-aaekt4-1"
+})`position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:var(--card-bg-color);border-radius:inherit;z-index:1;box-shadow:inherit;`, Button = forwardRef(function(props, ref) {
   const $ = c(64);
   let IconComponent, IconRightComponent, children, disabled, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, width;
   $[0] !== props ? ({
@@ -2262,7 +2288,7 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
   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
@@ -2417,7 +2443,10 @@ function cardColorStyle(props) {
     ${style?.card?.root}
   `;
 }
-const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
+const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledCard",
+  componentId: "sc-osnro2-0"
+})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
   const $ = c(42);
   let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
   $[0] !== props ? ({
@@ -2440,7 +2469,7 @@ const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, respons
   } = 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;
 });
@@ -2583,7 +2612,13 @@ function inputElementStyles(props) {
     }
   `;
 }
-const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputElementStyles), Checkbox = forwardRef(function(props, forwardedRef) {
+const StyledCheckbox = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledCheckbox",
+  componentId: "sc-1l5mt2l-0"
+})(checkboxBaseStyles), Input$5 = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-1l5mt2l-1"
+})(inputElementStyles), Checkbox = forwardRef(function(props, forwardedRef) {
   const $ = c(25);
   let checked, className, customValidity, disabled, indeterminate, readOnly, restProps, style;
   $[0] !== props ? ({
@@ -2612,7 +2647,7 @@ const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputEleme
     /* @__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;
@@ -2766,7 +2801,10 @@ function codeBaseStyle() {
     }
   `;
 }
-const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
+const StyledCode = /* @__PURE__ */ styled.pre.withConfig({
+  displayName: "StyledCode",
+  componentId: "sc-4dymyn-0"
+})(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
   const $ = c(23);
   let children, languageProp, restProps, t0, weight;
   $[0] !== props ? ({
@@ -2785,7 +2823,7 @@ const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = forwar
   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;
@@ -2807,7 +2845,10 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
+const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledContainer",
+  componentId: "sc-wyroop-0"
+})(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
   const $ = c(9);
   let as, restProps, t0;
   $[0] !== props ? ({
@@ -2817,10 +2858,13 @@ const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), C
   } = 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 = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
+const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledGrid",
+  componentId: "sc-v8t8oz-0"
+})(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
   const $ = c(26);
   let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, restProps, rows;
   $[0] !== props ? ({
@@ -2838,7 +2882,7 @@ const Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(prop
   } = 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) {
@@ -2900,13 +2944,10 @@ function headingBaseStyle(props) {
     }
   `;
 }
-const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`, Heading = forwardRef(function(props, ref) {
+const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledHeading",
+  componentId: "sc-137lwim-0"
+})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = forwardRef(function(props, ref) {
   const $ = c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -2929,7 +2970,7 @@ const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsive
   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() {
@@ -2959,7 +3000,10 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$m = styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
+const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledInline",
+  componentId: "sc-1pkiy6j-0"
+})(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
   const $ = c(12);
   let as, childrenProp, restProps, space;
   $[0] !== props ? ({
@@ -2972,7 +3016,7 @@ const Root$m = styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = forwardR
   $[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) {
@@ -2995,7 +3039,10 @@ function kbdStyle() {
     }
   `;
 }
-const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
+const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
+  displayName: "StyledKBD",
+  componentId: "sc-1w7yd8w-0"
+})(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
   const $ = c(17);
   let children, restProps, t0, t1, t2;
   $[0] !== props ? ({
@@ -3011,7 +3058,7 @@ const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(fun
   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 = {
@@ -3081,7 +3128,10 @@ 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 = styled.div(({
+const StyledArrow = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledArrow",
+  componentId: "sc-12vzy6c-0"
+})(({
   $w: w
 }) => css`
     position: absolute;
@@ -3129,11 +3179,13 @@ const Root$k = styled.div(({
         transform: rotate(180deg);
       }
     }
-  `), StrokePath = styled.path`
-  stroke: var(--card-shadow-outline-color);
-`, ShapePath = styled.path`
-  fill: var(--card-bg-color);
-`, Arrow = forwardRef(function(props, ref) {
+  `), StrokePath = styled.path.withConfig({
+  displayName: "StrokePath",
+  componentId: "sc-12vzy6c-1"
+})`stroke:var(--card-shadow-outline-color);`, ShapePath = styled.path.withConfig({
+  displayName: "ShapePath",
+  componentId: "sc-12vzy6c-2"
+})`fill:var(--card-bg-color);`, Arrow = forwardRef(function(props, ref) {
   const $ = c(24);
   let h, restProps, t0, w;
   $[0] !== props ? ({
@@ -3177,7 +3229,7 @@ const Root$k = styled.div(({
     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);
@@ -3438,7 +3490,10 @@ function _temp$5(v) {
   return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
-const Root$j = styled.div({
+const StyledLayer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledLayer",
+  componentId: "sc-16kojrv-0"
+})({
   position: "relative"
 }), LayerChildren = forwardRef(function(props, forwardedRef) {
   const $ = c(22);
@@ -3475,7 +3530,7 @@ const Root$j = styled.div({
     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;
@@ -3558,29 +3613,25 @@ 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`
-  display: block;
-  width: 0;
-  height: 0;
-  position: absolute;
-  overflow: hidden;
-  overflow: clip;
-`, SrOnly = forwardRef(function(props, ref) {
+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), {
     as,
     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`
-  position: relative;
-`, ItemWrapper = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-`, VirtualList = forwardRef(function(props, forwardedRef) {
+const StyledVirtualList = styled.div.withConfig({
+  displayName: "StyledVirtualList",
+  componentId: "sc-dlqsj4-0"
+})`position:relative;`, ItemWrapper = styled.div.withConfig({
+  displayName: "ItemWrapper",
+  componentId: "sc-dlqsj4-1"
+})`position:absolute;left:0;right:0;`, VirtualList = forwardRef(function(props, forwardedRef) {
   const $ = c(56);
   let getItemKey, onChange, renderItem, restProps, t0, t1, t2;
   $[0] !== props ? ({
@@ -3692,7 +3743,7 @@ const Root$h = styled.div`
   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 = {
@@ -3766,18 +3817,10 @@ function calcMaxWidth(params) {
   if (!(currentWidth === void 0 && boundaryWidth === void 0))
     return Math.min(currentWidth ?? 1 / 0, (boundaryWidth || 1 / 0) - DEFAULT_POPOVER_PADDING * 2);
 }
-const MotionCard$1 = styled(motion.create(Card))`
-  &:not([hidden]) {
-    display: flex;
-  }
-  flex-direction: column;
-  width: max-content;
-  min-width: min-content;
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`, PopoverCard = memo(forwardRef(function(props, ref) {
+const MotionCard$1 = styled(motion.create(Card)).withConfig({
+  displayName: "MotionCard",
+  componentId: "sc-ihg31s-0"
+})`&:not([hidden]){display:flex;}flex-direction:column;width:max-content;min-width:min-content;& > *{opacity:var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY},1);will-change:opacity;}`, PopoverCard = memo(forwardRef(function(props, ref) {
   const $ = c(60);
   let animate, arrow2, arrowRef, arrowX, arrowY, children, marginsProp, originX, originY, overflow, padding, placement, radius, restProps, scheme, shadow, strategy, style, tone, width, xProp, yProp;
   $[0] !== props ? ({
@@ -4100,7 +4143,13 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = styled.div(radioBaseStyle), Input$4 = styled.input(inputElementStyle), Radio = forwardRef(function(props, forwardedRef) {
+const StyledRadio = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledRadio",
+  componentId: "sc-ccrwkf-0"
+})(radioBaseStyle), Input$4 = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-ccrwkf-1"
+})(inputElementStyle), Radio = forwardRef(function(props, forwardedRef) {
   const $ = c(19);
   let className, customValidity, disabled, readOnly, restProps, style;
   $[0] !== props ? ({
@@ -4120,7 +4169,7 @@ const Root$g = styled.div(radioBaseStyle), Input$4 = styled.input(inputElementSt
   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;
@@ -4268,7 +4317,16 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = styled.div(selectStyle.root), Input$3 = styled.select(selectStyle.input), IconBox = styled(Box)(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
+}, StyledSelect = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "StyledSelect",
+  componentId: "sc-5mxno7-0"
+})(selectStyle.root), Input$3 = /* @__PURE__ */ styled.select.withConfig({
+  displayName: "Input",
+  componentId: "sc-5mxno7-1"
+})(selectStyle.input), IconBox = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "IconBox",
+  componentId: "sc-5mxno7-2"
+})(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
   const $ = c(29);
   let children, customValidity, disabled, readOnly, restProps, t0, t1, t2, t3;
   $[0] !== props ? ({
@@ -4295,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;
@@ -4323,7 +4381,10 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$e = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
+const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledStack",
+  componentId: "sc-8dpfq2-0"
+})(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
   const $ = c(10);
   let as, restProps, space;
   $[0] !== props ? ({
@@ -4333,7 +4394,7 @@ const Root$e = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = f
   } = 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() {
@@ -4489,7 +4550,22 @@ function switchThumbStyles(props) {
     `}
   `;
 }
-const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInputStyles), Representation = styled.span(switchRepresentationStyles), Track = styled.span(switchTrackStyles), Thumb = styled.span(switchThumbStyles), Switch = forwardRef(function(props, forwardedRef) {
+const StyledSwitch = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "StyledSwitch",
+  componentId: "sc-dw1foe-0"
+})(switchBaseStyles), Input$2 = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-dw1foe-1"
+})(switchInputStyles), Representation = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Representation",
+  componentId: "sc-dw1foe-2"
+})(switchRepresentationStyles), Track = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Track",
+  componentId: "sc-dw1foe-3"
+})(switchTrackStyles), Thumb = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Thumb",
+  componentId: "sc-dw1foe-4"
+})(switchThumbStyles), Switch = forwardRef(function(props, forwardedRef) {
   const $ = c(26);
   let checked, className, disabled, indeterminate, readOnly, restProps, style;
   $[0] !== props ? ({
@@ -4519,18 +4595,25 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
     /* @__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 = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`, Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = forwardRef(function(props, forwardedRef) {
+const StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "StyledTextArea",
+  componentId: "sc-1d6h1o8-0"
+})(textInputRootStyle), InputRoot$1 = styled.span.withConfig({
+  displayName: "InputRoot",
+  componentId: "sc-1d6h1o8-1"
+})`flex:1;min-width:0;display:block;position:relative;`, Input$1 = /* @__PURE__ */ styled.textarea.withConfig({
+  displayName: "Input",
+  componentId: "sc-1d6h1o8-2"
+})(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Presentation",
+  componentId: "sc-1d6h1o8-3"
+})(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = forwardRef(function(props, forwardedRef) {
   const $ = c(29);
   let __unstable_disableFocusRing, customValidity, restProps, t0, t1, t2, t3, t4, weight;
   $[0] !== props ? ({
@@ -4554,7 +4637,7 @@ const Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
   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;
@@ -4562,47 +4645,43 @@ const Root$c = styled.span(textInputRootStyle), InputRoot$1 = styled.span`
 TextArea.displayName = "ForwardRef(TextArea)";
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
-}, Root$b = styled(Card).attrs({
+}, StyledTextInput = /* @__PURE__ */ styled(Card).attrs({
   forwardedAs: "span"
-})(textInputRootStyle), InputRoot = styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`, Prefix = styled(Card).attrs({
+}).withConfig({
+  displayName: "StyledTextInput",
+  componentId: "sc-h62wco-0"
+})(textInputRootStyle), InputRoot = styled.span.withConfig({
+  displayName: "InputRoot",
+  componentId: "sc-h62wco-1"
+})`flex:1;min-width:0;display:block;position:relative;`, Prefix = styled(Card).attrs({
   forwardedAs: "span"
-})`
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`, Suffix = styled(Card).attrs({
+}).withConfig({
+  displayName: "Prefix",
+  componentId: "sc-h62wco-2"
+})`border-top-right-radius:0;border-bottom-right-radius:0;& > span{display:block;margin:-1px;}`, Suffix = styled(Card).attrs({
   forwardedAs: "span"
-})`
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`, Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle), LeftBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  left: 0;
-`, RightBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  right: 0;
-`, RightCard = styled(Card)`
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-`, TextInputClearButton = styled(Button)({
+}).withConfig({
+  displayName: "Suffix",
+  componentId: "sc-h62wco-3"
+})`border-top-left-radius:0;border-bottom-left-radius:0;& > span{display:block;margin:-1px;}`, Input = /* @__PURE__ */ styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-h62wco-4"
+})(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Presentation",
+  componentId: "sc-h62wco-5"
+})(responsiveRadiusStyle, textInputRepresentationStyle), LeftBox = styled(Box).withConfig({
+  displayName: "LeftBox",
+  componentId: "sc-h62wco-6"
+})`position:absolute;top:0;left:0;`, RightBox = styled(Box).withConfig({
+  displayName: "RightBox",
+  componentId: "sc-h62wco-7"
+})`position:absolute;top:0;right:0;`, RightCard = styled(Card).withConfig({
+  displayName: "RightCard",
+  componentId: "sc-h62wco-8"
+})`background-color:transparent;position:absolute;top:0;right:0;`, TextInputClearButton = /* @__PURE__ */ styled(Button).withConfig({
+  displayName: "TextInputClearButton",
+  componentId: "sc-h62wco-9"
+})({
   "&:not([hidden])": {
     display: "block"
   }
@@ -4683,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
@@ -4727,12 +4806,10 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   right: ["right-end", "right-start", "left", "top", "bottom"],
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
-}, MotionCard = styled(motion.create(Card))`
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`, TooltipCard = memo(forwardRef(function(props, ref) {
+}, MotionCard = styled(motion.create(Card)).withConfig({
+  displayName: "MotionCard",
+  componentId: "sc-1xn138w-0"
+})`& > *{opacity:var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY},1);will-change:opacity;}`, TooltipCard = memo(forwardRef(function(props, ref) {
   const $ = c(42);
   let animate, arrow2, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
   $[0] !== props ? ({
@@ -4808,9 +4885,10 @@ 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)`
-  pointer-events: none;
-`, Tooltip = forwardRef(function(props, forwardedRef) {
+const StyledTooltip = styled(Layer).withConfig({
+  displayName: "StyledTooltip",
+  componentId: "sc-13f2zvh-0"
+})`pointer-events:none;`, Tooltip = forwardRef(function(props, forwardedRef) {
   const boundaryElementContext = useBoundaryElement(), {
     layer
   } = useTheme_v2(), {
@@ -4926,7 +5004,7 @@ const Root$a = styled(Layer)`
       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);
@@ -4957,15 +5035,13 @@ 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`
-  line-height: 0;
-`, ListBox = styled(Box)`
-  & > ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-`, rotate = keyframes`
+const StyledAutocomplete = styled.div.withConfig({
+  displayName: "StyledAutocomplete",
+  componentId: "sc-1igauft-0"
+})`line-height:0;`, ListBox = styled(Box).withConfig({
+  displayName: "ListBox",
+  componentId: "sc-1igauft-1"
+})`& > ul{list-style:none;padding:0;margin:0;}`, rotate = keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -4973,9 +5049,10 @@ const Root$9 = styled.div`
   to {
     transform: rotate(360deg);
   }
-`, AnimatedSpinnerIcon = styled(SpinnerIcon)`
-  animation: ${rotate} 500ms linear infinite;
-`;
+`, AnimatedSpinnerIcon = styled(SpinnerIcon).withConfig({
+  displayName: "AnimatedSpinnerIcon",
+  componentId: "sc-1igauft-2"
+})`animation:${rotate} 500ms linear infinite;`;
 function AutocompleteOption(props) {
   const $ = c(11), {
     children,
@@ -5227,24 +5304,19 @@ 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`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  list-style: none;
-  align-items: center;
-  white-space: nowrap;
-  line-height: 0;
-`, ExpandButton = styled(Button)`
-  appearance: none;
-  margin: -4px;
-`, Breadcrumbs = forwardRef(function(props, ref) {
+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",
+  componentId: "sc-1es8h8q-1"
+})`appearance:none;margin:-4px;`, Breadcrumbs = forwardRef(function(props, ref) {
   const {
     children,
     maxLength,
@@ -5261,7 +5333,7 @@ const Autocomplete = InnerAutocomplete, Root$8 = styled.ol`
     }
     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)) });
@@ -5334,40 +5406,28 @@ function useDialog() {
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`, DialogCardRoot = styled(Card)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  min-height: 0;
-  max-height: 100%;
-  overflow: hidden;
-  overflow: clip;
-`, DialogLayout = styled(Flex)`
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-`, DialogHeader = styled(Box)`
-  position: relative;
-  z-index: 2;
-`, DialogContent = styled(Box)`
-  position: relative;
-  z-index: 1;
-  overflow: auto;
-  outline: none;
-`, DialogFooter = styled(Box)`
-  position: relative;
-  z-index: 3;
-`, DialogCard = forwardRef(function(props, forwardedRef) {
+const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
+  displayName: "StyledDialog",
+  componentId: "sc-4n4xb3-0"
+})(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container).withConfig({
+  displayName: "DialogContainer",
+  componentId: "sc-4n4xb3-1"
+})`&:not([hidden]){display:flex;}width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;`, DialogCardRoot = styled(Card).withConfig({
+  displayName: "DialogCardRoot",
+  componentId: "sc-4n4xb3-2"
+})`&:not([hidden]){display:flex;}width:100%;min-height:0;max-height:100%;overflow:hidden;overflow:clip;`, DialogLayout = styled(Flex).withConfig({
+  displayName: "DialogLayout",
+  componentId: "sc-4n4xb3-3"
+})`flex:1;min-height:0;width:100%;`, DialogHeader = styled(Box).withConfig({
+  displayName: "DialogHeader",
+  componentId: "sc-4n4xb3-4"
+})`position:relative;z-index:2;`, DialogContent = styled(Box).withConfig({
+  displayName: "DialogContent",
+  componentId: "sc-4n4xb3-5"
+})`position:relative;z-index:1;overflow:auto;outline:none;`, DialogFooter = styled(Box).withConfig({
+  displayName: "DialogFooter",
+  componentId: "sc-4n4xb3-6"
+})`position:relative;z-index:3;`, DialogCard = forwardRef(function(props, forwardedRef) {
   const $ = c(38), {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -5496,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
@@ -5522,18 +5582,13 @@ 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`
-  font: inherit;
-  padding: 1px;
-
-  &:not([hidden]) {
-    display: block;
-  }
-`, Key = styled(KBD)`
-  &:not([hidden]) {
-    display: block;
-  }
-`, Hotkeys = forwardRef(function(props, ref) {
+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",
+  componentId: "sc-b37mge-1"
+})`&:not([hidden]){display:block;}`, Hotkeys = forwardRef(function(props, ref) {
   const $ = c(24);
   let fontSize2, keys, padding, radius, restProps, t0;
   $[0] !== props ? ({
@@ -5558,7 +5613,7 @@ const Root$6 = styled.kbd`
   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);
@@ -5699,10 +5754,10 @@ function useMenuController(props) {
     mount
   };
 }
-const Root$5 = styled(Box)`
-  outline: none;
-  overflow: auto;
-`, Menu = forwardRef(function(props, forwardedRef) {
+const StyledMenu = styled(Box).withConfig({
+  displayName: "StyledMenu",
+  componentId: "sc-xt0tnv-0"
+})`outline:none;overflow:auto;`, Menu = forwardRef(function(props, forwardedRef) {
   const $ = c(50);
   let _shouldFocus, children, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
   if ($[0] !== props) {
@@ -5780,7 +5835,7 @@ const Root$5 = styled(Box)`
   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;
 });
@@ -5923,12 +5978,10 @@ MenuButton.displayName = "ForwardRef(MenuButton)";
 function _temp$2(v) {
   return !v;
 }
-const MenuDivider = styled.hr`
-  height: 1px;
-  border: 0;
-  background: var(--card-hairline-soft-color);
-  margin: 0;
-`;
+const MenuDivider = styled.hr.withConfig({
+  displayName: "MenuDivider",
+  componentId: "sc-uhoxwu-0"
+})`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
 MenuDivider.displayName = "MenuDivider";
 function selectableBaseStyle() {
   return css`
@@ -6030,7 +6083,10 @@ function selectableColorStyle(props) {
     ${style?.card?.root}
   `;
 }
-const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
+const Selectable = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Selectable",
+  componentId: "sc-1w01ang-0"
+})(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 Selectable.displayName = "Selectable";
 function useMenu() {
   const value = useContext(MenuContext);
@@ -6277,7 +6333,10 @@ const keyframe = keyframes`
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle), Skeleton = forwardRef(function(props, ref) {
+`, StyledSkeleton$1 = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledSkeleton",
+  componentId: "sc-ebtpni-0"
+})(responsiveRadiusStyle, skeletonStyle), Skeleton = forwardRef(function(props, ref) {
   const $ = c(14);
   let delay, radius, restProps, t0;
   $[0] !== props ? ({
@@ -6300,10 +6359,13 @@ 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 = styled(Skeleton)((props) => {
+const StyledSkeleton = /* @__PURE__ */ styled(Skeleton).withConfig({
+  displayName: "StyledSkeleton",
+  componentId: "sc-2p7a1v-0"
+})((props) => {
   const {
     $size,
     $style
@@ -6326,7 +6388,7 @@ const Root$3 = styled(Skeleton)((props) => {
   } = 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) {
@@ -6338,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) {
@@ -6350,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) {
@@ -6362,12 +6424,13 @@ 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)`
-  max-width: 100%;
-`, Tab = forwardRef(function(props, forwardedRef) {
+const CustomButton = styled(Button).withConfig({
+  displayName: "CustomButton",
+  componentId: "sc-1kns779-0"
+})`max-width:100%;`, Tab = forwardRef(function(props, forwardedRef) {
   const $ = c(30);
   let focused, icon, id, label, onClick, onFocus, restProps, selected, t0, t1;
   $[0] !== props ? ({
@@ -6404,14 +6467,10 @@ const CustomButton = styled(Button)`
   return $[18] !== fontSize2 || $[19] !== handleFocus || $[20] !== icon || $[21] !== id || $[22] !== label || $[23] !== onClick || $[24] !== padding || $[25] !== restProps || $[26] !== selected || $[27] !== t7 || $[28] !== t8 ? (t9 = /* @__PURE__ */ jsx(CustomButton, { "data-ui": "Tab", ...restProps, "aria-selected": t7, fontSize: fontSize2, icon, id, mode: "bleed", onClick, onBlur: handleBlur, onFocus: handleFocus, padding, ref, role: "tab", selected, tabIndex: t8, text: label, type: "button" }), $[18] = fontSize2, $[19] = handleFocus, $[20] = icon, $[21] = id, $[22] = label, $[23] = onClick, $[24] = padding, $[25] = restProps, $[26] = selected, $[27] = t7, $[28] = t8, $[29] = t9) : t9 = $[29], t9;
 });
 Tab.displayName = "ForwardRef(Tab)";
-const CustomInline = styled(Inline)`
-  & > div {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-`, TabList = forwardRef(function(props, ref) {
+const CustomInline = styled(Inline).withConfig({
+  displayName: "CustomInline",
+  componentId: "sc-5cm04m-0"
+})`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`, TabList = forwardRef(function(props, ref) {
   const $ = c(15);
   let childrenProp, restProps;
   $[0] !== props ? ({
@@ -6452,9 +6511,10 @@ const TabPanel = forwardRef(function(props, ref) {
   return $[3] !== flex || $[4] !== props.children || $[5] !== ref || $[6] !== restProps || $[7] !== t0 ? (t1 = /* @__PURE__ */ jsx(Box, { "data-ui": "TabPanel", ...restProps, flex, ref, role: "tabpanel", tabIndex: t0, children: props.children }), $[3] = flex, $[4] = props.children, $[5] = ref, $[6] = restProps, $[7] = t0, $[8] = t1) : t1 = $[8], t1;
 });
 TabPanel.displayName = "ForwardRef(TabPanel)";
-const TextBox = styled(Flex)`
-  overflow-x: auto;
-`, loadingAnimation = keyframes`
+const TextBox = styled(Flex).withConfig({
+  displayName: "TextBox",
+  componentId: "sc-1rr7rxo-0"
+})`overflow-x:auto;`, loadingAnimation = keyframes`
   0% {
     width: 0;
   }
@@ -6511,7 +6571,10 @@ const STATUS_CARD_TONE = {
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = styled(Card)(rootStyles);
+}, StyledToast = /* @__PURE__ */ styled(Card).withConfig({
+  displayName: "StyledToast",
+  componentId: "sc-1icz8ea-0"
+})(rootStyles);
 function Toast(props) {
   const $ = c(30);
   let closable, description, duration, onClose, restProps, status, t0, title;
@@ -6545,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() {
@@ -6563,21 +6626,13 @@ let toastId = 0;
 function generateToastId() {
   return String(toastId++);
 }
-const Root$1 = styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`, ToastContainer = styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  max-width: 420px;
-  width: 100%;
-`;
+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",
+  componentId: "sc-17mn6j-1"
+})`box-sizing:border-box;position:absolute;right:0;bottom:0;max-width:420px;width:100%;`;
 function ToastProvider(props) {
   const $ = c(24), {
     children,
@@ -6661,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,
@@ -7009,13 +7064,18 @@ 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(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styled(Box).attrs({
+}), StyledTreeItem = memo(styled.li.withConfig({
+  displayName: "StyledTreeItem",
+  componentId: "sc-iiskig-0"
+})(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = /* @__PURE__ */ styled(Box).attrs({
   forwardedAs: "a"
-})(treeItemBoxStyle), ToggleArrowText = styled(Text)`
-  & > svg {
-    transition: transform 100ms;
-  }
-`, TreeItem = memo(function(props) {
+}).withConfig({
+  displayName: "TreeItemBox",
+  componentId: "sc-iiskig-1"
+})(treeItemBoxStyle), ToggleArrowText = styled(Text).withConfig({
+  displayName: "ToggleArrowText",
+  componentId: "sc-iiskig-2"
+})`& > svg{transition:transform 100ms;}`, TreeItem = memo(function(props) {
   const {
     children,
     expanded: expandedProp = !1,
@@ -7064,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 }) })
   ] });