@sanity/ui 2.10.17 → 2.10.18-canary.0

package/dist/index.esm.js

@@ -1465,13 +1465,13 @@ 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 Root$C = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-1luap7z-0"
+})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styled.span.withConfig({
+  displayName: "SpanWithTextOverflow",
+  componentId: "sc-1luap7z-1"
+})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Label = forwardRef(function(props, ref) {
   const $ = c(22);
   let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
@@ -1641,9 +1641,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 Root$B = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  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) {
+}), Image = /* @__PURE__ */ styled.svg.withConfig({
+  displayName: "Image",
+  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 ? ({
@@ -1740,7 +1761,10 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
+const Root$A = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-1ydx86y-0"
+})(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
   const $ = c(9), {
     count,
     size: t0
@@ -1785,7 +1809,10 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
+const Root$z = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-cysmbb-0"
+})(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
   const $ = c(15);
   let childrenProp, restProps, t0, t1;
   $[0] !== props ? ({
@@ -1808,7 +1835,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 Root$y = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -1913,13 +1943,13 @@ 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 Root$x = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-11ov82j-0"
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), SpanWithTextOverflow$1 = styled.span.withConfig({
+  displayName: "SpanWithTextOverflow",
+  componentId: "sc-11ov82j-1"
+})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Text = forwardRef(function(props, ref) {
   const $ = c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -1960,7 +1990,10 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
+const Root$w = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-5u140l-0"
+})(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
   const $ = c(17);
   let children, restProps, t0, t1, t2, t3;
   if ($[0] !== props) {
@@ -1983,7 +2016,10 @@ const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRe
   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;
 });
 Badge.displayName = "ForwardRef(Badge)";
-const Root$v = styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
+const Root$v = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-oxesg3-0"
+})(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
   const $ = c(17);
   let align, as, gap, justify, restProps, t0, wrap;
   $[0] !== props ? ({
@@ -2008,11 +2044,10 @@ 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) {
+`, Root$u = styled(Text).withConfig({
+  displayName: "Root",
+  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];
@@ -2188,20 +2223,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 Root$t = /* @__PURE__ */ styled.button.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -2417,7 +2445,10 @@ function cardColorStyle(props) {
     ${style?.card?.root}
   `;
 }
-const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
+const Root$s = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -2583,7 +2614,13 @@ function inputElementStyles(props) {
     }
   `;
 }
-const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputElementStyles), Checkbox = forwardRef(function(props, forwardedRef) {
+const Root$r = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -2766,7 +2803,10 @@ function codeBaseStyle() {
     }
   `;
 }
-const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
+const Root$q = /* @__PURE__ */ styled.pre.withConfig({
+  displayName: "Root",
+  componentId: "sc-4dymyn-0"
+})(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
   const $ = c(23);
   let children, languageProp, restProps, t0, weight;
   $[0] !== props ? ({
@@ -2807,7 +2847,10 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
+const Root$p = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-wyroop-0"
+})(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
   const $ = c(9);
   let as, restProps, t0;
   $[0] !== props ? ({
@@ -2820,7 +2863,10 @@ const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), C
   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;
 });
 Container.displayName = "ForwardRef(Container)";
-const Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
+const Root$o = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -2900,13 +2946,13 @@ 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 Root$n = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-137lwim-0"
+})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styled.span.withConfig({
+  displayName: "SpanWithTextOverflow",
+  componentId: "sc-137lwim-1"
+})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Heading = forwardRef(function(props, ref) {
   const $ = c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -2959,7 +3005,10 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$m = styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
+const Root$m = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-1pkiy6j-0"
+})(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
   const $ = c(12);
   let as, childrenProp, restProps, space;
   $[0] !== props ? ({
@@ -2995,7 +3044,10 @@ function kbdStyle() {
     }
   `;
 }
-const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
+const Root$l = /* @__PURE__ */ styled.kbd.withConfig({
+  displayName: "Root",
+  componentId: "sc-1w7yd8w-0"
+})(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
   const $ = c(17);
   let children, restProps, t0, t1, t2;
   $[0] !== props ? ({
@@ -3081,7 +3133,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 Root$k = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-12vzy6c-0"
+})(({
   $w: w
 }) => css`
     position: absolute;
@@ -3129,11 +3184,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 ? ({
@@ -3438,7 +3495,10 @@ function _temp$5(v) {
   return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
-const Root$j = styled.div({
+const Root$j = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-16kojrv-0"
+})({
   position: "relative"
 }), LayerChildren = forwardRef(function(props, forwardedRef) {
   const $ = c(22);
@@ -3558,14 +3618,10 @@ 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 Root$i = styled.div.withConfig({
+  displayName: "Root",
+  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
@@ -3574,13 +3630,13 @@ const Root$i = styled.div`
   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;
 });
 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 Root$h = styled.div.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -3766,18 +3822,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 +4148,13 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = styled.div(radioBaseStyle), Input$4 = styled.input(inputElementStyle), Radio = forwardRef(function(props, forwardedRef) {
+const Root$g = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -4268,7 +4322,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) {
+}, Root$f = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -4323,7 +4386,10 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$e = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
+const Root$e = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-8dpfq2-0"
+})(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
   const $ = c(10);
   let as, restProps, space;
   $[0] !== props ? ({
@@ -4489,7 +4555,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 Root$d = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -4525,12 +4606,19 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
   ] }), $[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 Root$c = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -4562,47 +4650,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({
+}, Root$b = /* @__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: "Root",
+  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"
   }
@@ -4727,12 +4811,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 +4890,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 Root$a = styled(Layer).withConfig({
+  displayName: "Root",
+  componentId: "sc-13f2zvh-0"
+})`pointer-events:none;`, Tooltip = forwardRef(function(props, forwardedRef) {
   const boundaryElementContext = useBoundaryElement(), {
     layer
   } = useTheme_v2(), {
@@ -4957,15 +5040,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 Root$9 = styled.div.withConfig({
+  displayName: "Root",
+  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 +5054,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,
@@ -5233,18 +5315,13 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
   ] });
 });
 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, Root$8 = styled.ol.withConfig({
+  displayName: "Root",
+  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,
@@ -5334,40 +5411,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 Root$7 = /* @__PURE__ */ styled(Layer).withConfig({
+  displayName: "Root",
+  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,
@@ -5522,18 +5587,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 Root$6 = styled.kbd.withConfig({
+  displayName: "Root",
+  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 ? ({
@@ -5699,10 +5759,10 @@ function useMenuController(props) {
     mount
   };
 }
-const Root$5 = styled(Box)`
-  outline: none;
-  overflow: auto;
-`, Menu = forwardRef(function(props, forwardedRef) {
+const Root$5 = styled(Box).withConfig({
+  displayName: "Root",
+  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) {
@@ -5923,12 +5983,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 +6088,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 +6338,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) {
+`, Root$4 = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-ebtpni-0"
+})(responsiveRadiusStyle, skeletonStyle), Skeleton = forwardRef(function(props, ref) {
   const $ = c(14);
   let delay, radius, restProps, t0;
   $[0] !== props ? ({
@@ -6303,7 +6367,10 @@ const keyframe = keyframes`
   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;
 });
 Skeleton.displayName = "ForwardRef(Skeleton)";
-const Root$3 = styled(Skeleton)((props) => {
+const Root$3 = /* @__PURE__ */ styled(Skeleton).withConfig({
+  displayName: "Root",
+  componentId: "sc-2p7a1v-0"
+})((props) => {
   const {
     $size,
     $style
@@ -6365,9 +6432,10 @@ const CodeSkeleton = forwardRef(function(props, ref) {
   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;
 });
 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 +6472,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 +6516,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 +6576,10 @@ const STATUS_CARD_TONE = {
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = styled(Card)(rootStyles);
+}, Root$2 = /* @__PURE__ */ styled(Card).withConfig({
+  displayName: "Root",
+  componentId: "sc-1icz8ea-0"
+})(rootStyles);
 function Toast(props) {
   const $ = c(30);
   let closable, description, duration, onClose, restProps, status, t0, title;
@@ -6563,21 +6631,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 Root$1 = styled(Layer).withConfig({
+  displayName: "Root",
+  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,
@@ -7009,13 +7069,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({
+}), Root = memo(styled.li.withConfig({
+  displayName: "Root",
+  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,