@sanity/ui 2.10.17 → 2.10.18-canary.0

package/dist/index.js

@@ -1459,13 +1459,13 @@ function labelBaseStyle(props) {
     }
   `;
 }
-const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styledComponents.styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`, Label = react.forwardRef(function(props, ref) {
+const Root$C = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-1luap7z-0"
+})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styledComponents.styled.span.withConfig({
+  displayName: "SpanWithTextOverflow",
+  componentId: "sc-1luap7z-1"
+})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Label = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
   let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
@@ -1635,9 +1635,30 @@ function avatarStrokeStyle() {
     }
   };
 }
-const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styledComponents.styled.div(avatarStyle.arrow), BgStroke = styledComponents.styled.ellipse(avatarStyle.bgStroke), Stroke = styledComponents.styled.ellipse(avatarStyle.stroke), Initials = styledComponents.styled.div(avatarStyle.initials), InitialsLabel = styledComponents.styled(Label)({
+const Root$B = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-1rj7kl0-0"
+})(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Arrow",
+  componentId: "sc-1rj7kl0-1"
+})(avatarStyle.arrow), BgStroke = /* @__PURE__ */ styledComponents.styled.ellipse.withConfig({
+  displayName: "BgStroke",
+  componentId: "sc-1rj7kl0-2"
+})(avatarStyle.bgStroke), Stroke = /* @__PURE__ */ styledComponents.styled.ellipse.withConfig({
+  displayName: "Stroke",
+  componentId: "sc-1rj7kl0-3"
+})(avatarStyle.stroke), Initials = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Initials",
+  componentId: "sc-1rj7kl0-4"
+})(avatarStyle.initials), InitialsLabel = /* @__PURE__ */ styledComponents.styled(Label).withConfig({
+  displayName: "InitialsLabel",
+  componentId: "sc-1rj7kl0-5"
+})({
   color: "inherit"
-}), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
+}), Image = /* @__PURE__ */ styledComponents.styled.svg.withConfig({
+  displayName: "Image",
+  componentId: "sc-1rj7kl0-6"
+})(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(52);
   let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
   $[0] !== props ? ({
@@ -1734,7 +1755,10 @@ function _avatarCounterBaseStyle(props) {
     }
   `;
 }
-const Root$A = styledComponents.styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
+const Root$A = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-1ydx86y-0"
+})(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(9), {
     count,
     size: t0
@@ -1779,7 +1803,10 @@ function responsiveAvatarStackSizeStyle(props) {
     } : EMPTY_RECORD;
   });
 }
-const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
+const Root$z = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-cysmbb-0"
+})(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(15);
   let childrenProp, restProps, t0, t1;
   $[0] !== props ? ({
@@ -1802,7 +1829,10 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
   ] }), $[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 = styledComponents.styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
+const Root$y = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-1hhky9f-0"
+})(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.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 ? ({
@@ -1907,13 +1937,13 @@ function textBaseStyle(props) {
     }
   `;
 }
-const Root$x = styledComponents.styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), SpanWithTextOverflow$1 = styledComponents.styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`, Text = react.forwardRef(function(props, ref) {
+const Root$x = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-11ov82j-0"
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), SpanWithTextOverflow$1 = styledComponents.styled.span.withConfig({
+  displayName: "SpanWithTextOverflow",
+  componentId: "sc-11ov82j-1"
+})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Text = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -1954,7 +1984,10 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
+const Root$w = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-5u140l-0"
+})(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
   let children, restProps, t0, t1, t2, t3;
   if ($[0] !== props) {
@@ -1977,7 +2010,10 @@ const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle),
   return $[10] !== ref || $[11] !== restProps || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== tone ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = ref, $[11] = restProps, $[12] = t4, $[13] = t5, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16], t7;
 });
 Badge.displayName = "ForwardRef(Badge)";
-const Root$v = styledComponents.styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
+const Root$v = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-oxesg3-0"
+})(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
   let align, as, gap, justify, restProps, t0, wrap;
   $[0] !== props ? ({
@@ -2002,11 +2038,10 @@ const rotate$1 = styledComponents.keyframes`
   to {
     transform: rotate(360deg);
   }
-`, Root$u = styledComponents.styled(Text)`
-  & > span > svg {
-    animation: ${rotate$1} 500ms linear infinite;
-  }
-`, Spinner = react.forwardRef(function(props, ref) {
+`, Root$u = styledComponents.styled(Text).withConfig({
+  displayName: "Root",
+  componentId: "sc-124hnd0-0"
+})`& > span > svg{animation:${rotate$1} 500ms linear infinite;}`, Spinner = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(4);
   let t0;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
@@ -2182,20 +2217,13 @@ function buttonColorStyles(props) {
     }
   }, style?.button?.root].filter(Boolean);
 }
-const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.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 = react.forwardRef(function(props, ref) {
+const Root$t = /* @__PURE__ */ styledComponents.styled.button.withConfig({
+  displayName: "Root",
+  componentId: "sc-aaekt4-0"
+})(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.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 = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.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 ? ({
@@ -2411,7 +2439,10 @@ function cardColorStyle(props) {
     ${style?.card?.root}
   `;
 }
-const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
+const Root$s = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-osnro2-0"
+})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(42);
   let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
   $[0] !== props ? ({
@@ -2577,7 +2608,13 @@ function inputElementStyles(props) {
     }
   `;
 }
-const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styledComponents.styled.input(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
+const Root$r = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-1l5mt2l-0"
+})(checkboxBaseStyles), Input$5 = /* @__PURE__ */ styledComponents.styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-1l5mt2l-1"
+})(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(25);
   let checked, className, customValidity, disabled, indeterminate, readOnly, restProps, style;
   $[0] !== props ? ({
@@ -2760,7 +2797,10 @@ function codeBaseStyle() {
     }
   `;
 }
-const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
+const Root$q = /* @__PURE__ */ styledComponents.styled.pre.withConfig({
+  displayName: "Root",
+  componentId: "sc-4dymyn-0"
+})(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(23);
   let children, languageProp, restProps, t0, weight;
   $[0] !== props ? ({
@@ -2801,7 +2841,10 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$p = styledComponents.styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), Container = react.forwardRef(function(props, ref) {
+const Root$p = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-wyroop-0"
+})(containerBaseStyle, responsiveContainerWidthStyle), Container = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(9);
   let as, restProps, t0;
   $[0] !== props ? ({
@@ -2814,7 +2857,10 @@ const Root$p = styledComponents.styled(Box)(containerBaseStyle, responsiveContai
   return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Root$p, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t1, $[8] = t2) : t2 = $[8], t2;
 });
 Container.displayName = "ForwardRef(Container)";
-const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
+const Root$o = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-v8t8oz-0"
+})(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(26);
   let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, restProps, rows;
   $[0] !== props ? ({
@@ -2894,13 +2940,13 @@ function headingBaseStyle(props) {
     }
   `;
 }
-const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styledComponents.styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`, Heading = react.forwardRef(function(props, ref) {
+const Root$n = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-137lwim-0"
+})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), SpanWithTextOverflow = styledComponents.styled.span.withConfig({
+  displayName: "SpanWithTextOverflow",
+  componentId: "sc-137lwim-1"
+})`display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow:clip;`, Heading = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -2953,7 +2999,10 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
+const Root$m = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-1pkiy6j-0"
+})(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(12);
   let as, childrenProp, restProps, space;
   $[0] !== props ? ({
@@ -2989,7 +3038,10 @@ function kbdStyle() {
     }
   `;
 }
-const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
+const Root$l = /* @__PURE__ */ styledComponents.styled.kbd.withConfig({
+  displayName: "Root",
+  componentId: "sc-1w7yd8w-0"
+})(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
   let children, restProps, t0, t1, t2;
   $[0] !== props ? ({
@@ -3075,7 +3127,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 = styledComponents.styled.div(({
+const Root$k = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-12vzy6c-0"
+})(({
   $w: w
 }) => styledComponents.css`
     position: absolute;
@@ -3123,11 +3178,13 @@ const Root$k = styledComponents.styled.div(({
         transform: rotate(180deg);
       }
     }
-  `), StrokePath = styledComponents.styled.path`
-  stroke: var(--card-shadow-outline-color);
-`, ShapePath = styledComponents.styled.path`
-  fill: var(--card-bg-color);
-`, Arrow = react.forwardRef(function(props, ref) {
+  `), StrokePath = styledComponents.styled.path.withConfig({
+  displayName: "StrokePath",
+  componentId: "sc-12vzy6c-1"
+})`stroke:var(--card-shadow-outline-color);`, ShapePath = styledComponents.styled.path.withConfig({
+  displayName: "ShapePath",
+  componentId: "sc-12vzy6c-2"
+})`fill:var(--card-bg-color);`, Arrow = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(24);
   let h, restProps, t0, w;
   $[0] !== props ? ({
@@ -3432,7 +3489,10 @@ function _temp$5(v) {
   return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
-const Root$j = styledComponents.styled.div({
+const Root$j = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-16kojrv-0"
+})({
   position: "relative"
 }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(22);
@@ -3552,14 +3612,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 = styledComponents.styled.div`
-  display: block;
-  width: 0;
-  height: 0;
-  position: absolute;
-  overflow: hidden;
-  overflow: clip;
-`, SrOnly = react.forwardRef(function(props, ref) {
+const Root$i = styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-mubr0c-0"
+})`display:block;width:0;height:0;position:absolute;overflow:hidden;overflow:clip;`, SrOnly = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(4), {
     as,
     children
@@ -3568,13 +3624,13 @@ const Root$i = styledComponents.styled.div`
   return $[0] !== as || $[1] !== children || $[2] !== ref ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children }), $[0] = as, $[1] = children, $[2] = ref, $[3] = t0) : t0 = $[3], t0;
 });
 SrOnly.displayName = "ForwardRef(SrOnly)";
-const Root$h = styledComponents.styled.div`
-  position: relative;
-`, ItemWrapper = styledComponents.styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-`, VirtualList = react.forwardRef(function(props, forwardedRef) {
+const Root$h = styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-dlqsj4-0"
+})`position:relative;`, ItemWrapper = styledComponents.styled.div.withConfig({
+  displayName: "ItemWrapper",
+  componentId: "sc-dlqsj4-1"
+})`position:absolute;left:0;right:0;`, VirtualList = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(56);
   let getItemKey, onChange, renderItem, restProps, t0, t1, t2;
   $[0] !== props ? ({
@@ -3760,18 +3816,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 = styledComponents.styled(framerMotion.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 = react.memo(react.forwardRef(function(props, ref) {
+const MotionCard$1 = styledComponents.styled(framerMotion.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 = react.memo(react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(60);
   let animate, arrow, arrowRef, arrowX, arrowY, children, marginsProp, originX, originY, overflow, padding, placement, radius, restProps, scheme, shadow, strategy, style, tone, width, xProp, yProp;
   $[0] !== props ? ({
@@ -4094,7 +4142,13 @@ function inputElementStyle(props) {
     }
   `;
 }
-const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComponents.styled.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
+const Root$g = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-ccrwkf-0"
+})(radioBaseStyle), Input$4 = /* @__PURE__ */ styledComponents.styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-ccrwkf-1"
+})(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(19);
   let className, customValidity, disabled, readOnly, restProps, style;
   $[0] !== props ? ({
@@ -4262,7 +4316,16 @@ const selectStyle = {
   root: rootStyle,
   input: inputStyle,
   iconBox: iconBoxStyle
-}, Root$f = styledComponents.styled.div(selectStyle.root), Input$3 = styledComponents.styled.select(selectStyle.input), IconBox = styledComponents.styled(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
+}, Root$f = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-5mxno7-0"
+})(selectStyle.root), Input$3 = /* @__PURE__ */ styledComponents.styled.select.withConfig({
+  displayName: "Input",
+  componentId: "sc-5mxno7-1"
+})(selectStyle.input), IconBox = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "IconBox",
+  componentId: "sc-5mxno7-2"
+})(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(29);
   let children, customValidity, disabled, readOnly, restProps, t0, t1, t2, t3;
   $[0] !== props ? ({
@@ -4317,7 +4380,10 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
+const Root$e = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-8dpfq2-0"
+})(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(10);
   let as, restProps, space;
   $[0] !== props ? ({
@@ -4483,7 +4549,22 @@ function switchThumbStyles(props) {
     `}
   `;
 }
-const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledComponents.styled.input(switchInputStyles), Representation = styledComponents.styled.span(switchRepresentationStyles), Track = styledComponents.styled.span(switchTrackStyles), Thumb = styledComponents.styled.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
+const Root$d = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  displayName: "Root",
+  componentId: "sc-dw1foe-0"
+})(switchBaseStyles), Input$2 = /* @__PURE__ */ styledComponents.styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-dw1foe-1"
+})(switchInputStyles), Representation = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  displayName: "Representation",
+  componentId: "sc-dw1foe-2"
+})(switchRepresentationStyles), Track = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  displayName: "Track",
+  componentId: "sc-dw1foe-3"
+})(switchTrackStyles), Thumb = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  displayName: "Thumb",
+  componentId: "sc-dw1foe-4"
+})(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(26);
   let checked, className, disabled, indeterminate, readOnly, restProps, style;
   $[0] !== props ? ({
@@ -4519,12 +4600,19 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
   ] }), $[21] = className, $[22] = style, $[23] = t6, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 });
 Switch.displayName = "ForwardRef(Switch)";
-const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = styledComponents.styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`, Input$1 = styledComponents.styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = styledComponents.styled.div(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = react.forwardRef(function(props, forwardedRef) {
+const Root$c = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  displayName: "Root",
+  componentId: "sc-1d6h1o8-0"
+})(textInputRootStyle), InputRoot$1 = styledComponents.styled.span.withConfig({
+  displayName: "InputRoot",
+  componentId: "sc-1d6h1o8-1"
+})`flex:1;min-width:0;display:block;position:relative;`, Input$1 = /* @__PURE__ */ styledComponents.styled.textarea.withConfig({
+  displayName: "Input",
+  componentId: "sc-1d6h1o8-2"
+})(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  displayName: "Presentation",
+  componentId: "sc-1d6h1o8-3"
+})(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(29);
   let __unstable_disableFocusRing, customValidity, restProps, t0, t1, t2, t3, t4, weight;
   $[0] !== props ? ({
@@ -4556,47 +4644,43 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
 TextArea.displayName = "ForwardRef(TextArea)";
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
-}, Root$b = styledComponents.styled(Card).attrs({
+}, Root$b = /* @__PURE__ */ styledComponents.styled(Card).attrs({
   forwardedAs: "span"
-})(textInputRootStyle), InputRoot = styledComponents.styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`, Prefix = styledComponents.styled(Card).attrs({
+}).withConfig({
+  displayName: "Root",
+  componentId: "sc-h62wco-0"
+})(textInputRootStyle), InputRoot = styledComponents.styled.span.withConfig({
+  displayName: "InputRoot",
+  componentId: "sc-h62wco-1"
+})`flex:1;min-width:0;display:block;position:relative;`, Prefix = styledComponents.styled(Card).attrs({
   forwardedAs: "span"
-})`
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`, Suffix = styledComponents.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 = styledComponents.styled(Card).attrs({
   forwardedAs: "span"
-})`
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
-  & > span {
-    display: block;
-    margin: -1px;
-  }
-`, Input = styledComponents.styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = styledComponents.styled.span(responsiveRadiusStyle, textInputRepresentationStyle), LeftBox = styledComponents.styled(Box)`
-  position: absolute;
-  top: 0;
-  left: 0;
-`, RightBox = styledComponents.styled(Box)`
-  position: absolute;
-  top: 0;
-  right: 0;
-`, RightCard = styledComponents.styled(Card)`
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  right: 0;
-`, TextInputClearButton = styledComponents.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__ */ styledComponents.styled.input.withConfig({
+  displayName: "Input",
+  componentId: "sc-h62wco-4"
+})(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation = /* @__PURE__ */ styledComponents.styled.span.withConfig({
+  displayName: "Presentation",
+  componentId: "sc-h62wco-5"
+})(responsiveRadiusStyle, textInputRepresentationStyle), LeftBox = styledComponents.styled(Box).withConfig({
+  displayName: "LeftBox",
+  componentId: "sc-h62wco-6"
+})`position:absolute;top:0;left:0;`, RightBox = styledComponents.styled(Box).withConfig({
+  displayName: "RightBox",
+  componentId: "sc-h62wco-7"
+})`position:absolute;top:0;right:0;`, RightCard = styledComponents.styled(Card).withConfig({
+  displayName: "RightCard",
+  componentId: "sc-h62wco-8"
+})`background-color:transparent;position:absolute;top:0;right:0;`, TextInputClearButton = /* @__PURE__ */ styledComponents.styled(Button).withConfig({
+  displayName: "TextInputClearButton",
+  componentId: "sc-h62wco-9"
+})({
   "&:not([hidden])": {
     display: "block"
   }
@@ -4721,12 +4805,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 = styledComponents.styled(framerMotion.motion.create(Card))`
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`, TooltipCard = react.memo(react.forwardRef(function(props, ref) {
+}, MotionCard = styledComponents.styled(framerMotion.motion.create(Card)).withConfig({
+  displayName: "MotionCard",
+  componentId: "sc-1xn138w-0"
+})`& > *{opacity:var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY},1);will-change:opacity;}`, TooltipCard = react.memo(react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(42);
   let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
   $[0] !== props ? ({
@@ -4802,9 +4884,10 @@ function TooltipDelayGroupProvider(props) {
   return $[7] !== children || $[8] !== value ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children }), $[7] = children, $[8] = value, $[9] = t3) : t3 = $[9], t3;
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
-const Root$a = styledComponents.styled(Layer)`
-  pointer-events: none;
-`, Tooltip = react.forwardRef(function(props, forwardedRef) {
+const Root$a = styledComponents.styled(Layer).withConfig({
+  displayName: "Root",
+  componentId: "sc-13f2zvh-0"
+})`pointer-events:none;`, Tooltip = react.forwardRef(function(props, forwardedRef) {
   const boundaryElementContext = useBoundaryElement(), {
     layer
   } = useTheme_v2(), {
@@ -4951,15 +5034,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]), react.useEffect(t2, t3);
 }
-const Root$9 = styledComponents.styled.div`
-  line-height: 0;
-`, ListBox = styledComponents.styled(Box)`
-  & > ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-`, rotate = styledComponents.keyframes`
+const Root$9 = styledComponents.styled.div.withConfig({
+  displayName: "Root",
+  componentId: "sc-1igauft-0"
+})`line-height:0;`, ListBox = styledComponents.styled(Box).withConfig({
+  displayName: "ListBox",
+  componentId: "sc-1igauft-1"
+})`& > ul{list-style:none;padding:0;margin:0;}`, rotate = styledComponents.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -4967,9 +5048,10 @@ const Root$9 = styledComponents.styled.div`
   to {
     transform: rotate(360deg);
   }
-`, AnimatedSpinnerIcon = styledComponents.styled(icons.SpinnerIcon)`
-  animation: ${rotate} 500ms linear infinite;
-`;
+`, AnimatedSpinnerIcon = styledComponents.styled(icons.SpinnerIcon).withConfig({
+  displayName: "AnimatedSpinnerIcon",
+  componentId: "sc-1igauft-2"
+})`animation:${rotate} 500ms linear infinite;`;
 function AutocompleteOption(props) {
   const $ = reactCompilerRuntime.c(11), {
     children,
@@ -5227,18 +5309,13 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
   ] });
 });
 InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
-const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  list-style: none;
-  align-items: center;
-  white-space: nowrap;
-  line-height: 0;
-`, ExpandButton = styledComponents.styled(Button)`
-  appearance: none;
-  margin: -4px;
-`, Breadcrumbs = react.forwardRef(function(props, ref) {
+const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.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 = styledComponents.styled(Button).withConfig({
+  displayName: "ExpandButton",
+  componentId: "sc-1es8h8q-1"
+})`appearance:none;margin:-4px;`, Breadcrumbs = react.forwardRef(function(props, ref) {
   const {
     children,
     maxLength,
@@ -5328,40 +5405,28 @@ function useDialog() {
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styledComponents.styled(Container)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`, DialogCardRoot = styledComponents.styled(Card)`
-  &:not([hidden]) {
-    display: flex;
-  }
-  width: 100%;
-  min-height: 0;
-  max-height: 100%;
-  overflow: hidden;
-  overflow: clip;
-`, DialogLayout = styledComponents.styled(Flex)`
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-`, DialogHeader = styledComponents.styled(Box)`
-  position: relative;
-  z-index: 2;
-`, DialogContent = styledComponents.styled(Box)`
-  position: relative;
-  z-index: 1;
-  overflow: auto;
-  outline: none;
-`, DialogFooter = styledComponents.styled(Box)`
-  position: relative;
-  z-index: 3;
-`, DialogCard = react.forwardRef(function(props, forwardedRef) {
+const Root$7 = /* @__PURE__ */ styledComponents.styled(Layer).withConfig({
+  displayName: "Root",
+  componentId: "sc-4n4xb3-0"
+})(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styledComponents.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 = styledComponents.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 = styledComponents.styled(Flex).withConfig({
+  displayName: "DialogLayout",
+  componentId: "sc-4n4xb3-3"
+})`flex:1;min-height:0;width:100%;`, DialogHeader = styledComponents.styled(Box).withConfig({
+  displayName: "DialogHeader",
+  componentId: "sc-4n4xb3-4"
+})`position:relative;z-index:2;`, DialogContent = styledComponents.styled(Box).withConfig({
+  displayName: "DialogContent",
+  componentId: "sc-4n4xb3-5"
+})`position:relative;z-index:1;overflow:auto;outline:none;`, DialogFooter = styledComponents.styled(Box).withConfig({
+  displayName: "DialogFooter",
+  componentId: "sc-4n4xb3-6"
+})`position:relative;z-index:3;`, DialogCard = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(38), {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
@@ -5516,18 +5581,13 @@ function DialogProvider(props) {
   return $[3] !== children || $[4] !== contextValue ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t2) : t2 = $[5], t2;
 }
 DialogProvider.displayName = "DialogProvider";
-const Root$6 = styledComponents.styled.kbd`
-  font: inherit;
-  padding: 1px;
-
-  &:not([hidden]) {
-    display: block;
-  }
-`, Key = styledComponents.styled(KBD)`
-  &:not([hidden]) {
-    display: block;
-  }
-`, Hotkeys = react.forwardRef(function(props, ref) {
+const Root$6 = styledComponents.styled.kbd.withConfig({
+  displayName: "Root",
+  componentId: "sc-b37mge-0"
+})`font:inherit;padding:1px;&:not([hidden]){display:block;}`, Key = styledComponents.styled(KBD).withConfig({
+  displayName: "Key",
+  componentId: "sc-b37mge-1"
+})`&:not([hidden]){display:block;}`, Hotkeys = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(24);
   let fontSize2, keys, padding, radius, restProps, t0;
   $[0] !== props ? ({
@@ -5693,10 +5753,10 @@ function useMenuController(props) {
     mount
   };
 }
-const Root$5 = styledComponents.styled(Box)`
-  outline: none;
-  overflow: auto;
-`, Menu = react.forwardRef(function(props, forwardedRef) {
+const Root$5 = styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-xt0tnv-0"
+})`outline:none;overflow:auto;`, Menu = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(50);
   let _shouldFocus, children, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
   if ($[0] !== props) {
@@ -5917,12 +5977,10 @@ MenuButton.displayName = "ForwardRef(MenuButton)";
 function _temp$2(v) {
   return !v;
 }
-const MenuDivider = styledComponents.styled.hr`
-  height: 1px;
-  border: 0;
-  background: var(--card-hairline-soft-color);
-  margin: 0;
-`;
+const MenuDivider = styledComponents.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 styledComponents.css`
@@ -6024,7 +6082,10 @@ function selectableColorStyle(props) {
     ${style?.card?.root}
   `;
 }
-const Selectable = styledComponents.styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
+const Selectable = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Selectable",
+  componentId: "sc-1w01ang-0"
+})(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 Selectable.displayName = "Selectable";
 function useMenu() {
   const value = react.useContext(MenuContext);
@@ -6271,7 +6332,10 @@ const keyframe = styledComponents.keyframes`
   @media screen and (prefers-reduced-motion: reduce) {
     background-color: var(--card-skeleton-color-from);
   }
-`, Root$4 = styledComponents.styled(Box)(responsiveRadiusStyle, skeletonStyle), Skeleton = react.forwardRef(function(props, ref) {
+`, Root$4 = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+  displayName: "Root",
+  componentId: "sc-ebtpni-0"
+})(responsiveRadiusStyle, skeletonStyle), Skeleton = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(14);
   let delay, radius, restProps, t0;
   $[0] !== props ? ({
@@ -6297,7 +6361,10 @@ const keyframe = styledComponents.keyframes`
   return $[8] !== animated || $[9] !== ref || $[10] !== restProps || $[11] !== t3 || $[12] !== visible ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = animated, $[9] = ref, $[10] = restProps, $[11] = t3, $[12] = visible, $[13] = t4) : t4 = $[13], t4;
 });
 Skeleton.displayName = "ForwardRef(Skeleton)";
-const Root$3 = styledComponents.styled(Skeleton)((props) => {
+const Root$3 = /* @__PURE__ */ styledComponents.styled(Skeleton).withConfig({
+  displayName: "Root",
+  componentId: "sc-2p7a1v-0"
+})((props) => {
   const {
     $size,
     $style
@@ -6359,9 +6426,10 @@ const CodeSkeleton = react.forwardRef(function(props, ref) {
   return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
-const CustomButton = styledComponents.styled(Button)`
-  max-width: 100%;
-`, Tab = react.forwardRef(function(props, forwardedRef) {
+const CustomButton = styledComponents.styled(Button).withConfig({
+  displayName: "CustomButton",
+  componentId: "sc-1kns779-0"
+})`max-width:100%;`, Tab = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(30);
   let focused, icon, id, label, onClick, onFocus, restProps, selected, t0, t1;
   $[0] !== props ? ({
@@ -6398,14 +6466,10 @@ const CustomButton = styledComponents.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__ */ jsxRuntime.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 = styledComponents.styled(Inline)`
-  & > div {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-`, TabList = react.forwardRef(function(props, ref) {
+const CustomInline = styledComponents.styled(Inline).withConfig({
+  displayName: "CustomInline",
+  componentId: "sc-5cm04m-0"
+})`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`, TabList = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(15);
   let childrenProp, restProps;
   $[0] !== props ? ({
@@ -6446,9 +6510,10 @@ const TabPanel = react.forwardRef(function(props, ref) {
   return $[3] !== flex || $[4] !== props.children || $[5] !== ref || $[6] !== restProps || $[7] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.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 = styledComponents.styled(Flex)`
-  overflow-x: auto;
-`, loadingAnimation = styledComponents.keyframes`
+const TextBox = styledComponents.styled(Flex).withConfig({
+  displayName: "TextBox",
+  componentId: "sc-1rr7rxo-0"
+})`overflow-x:auto;`, loadingAnimation = styledComponents.keyframes`
   0% {
     width: 0;
   }
@@ -6505,7 +6570,10 @@ const STATUS_CARD_TONE = {
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = styledComponents.styled(Card)(rootStyles);
+}, Root$2 = /* @__PURE__ */ styledComponents.styled(Card).withConfig({
+  displayName: "Root",
+  componentId: "sc-1icz8ea-0"
+})(rootStyles);
 function Toast(props) {
   const $ = reactCompilerRuntime.c(30);
   let closable, description, duration, onClose, restProps, status, t0, title;
@@ -6557,21 +6625,13 @@ let toastId = 0;
 function generateToastId() {
   return String(toastId++);
 }
-const Root$1 = styledComponents.styled(Layer)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-`, ToastContainer = styledComponents.styled.div`
-  box-sizing: border-box;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  max-width: 420px;
-  width: 100%;
-`;
+const Root$1 = styledComponents.styled(Layer).withConfig({
+  displayName: "Root",
+  componentId: "sc-17mn6j-0"
+})`position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;`, ToastContainer = styledComponents.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 $ = reactCompilerRuntime.c(24), {
     children,
@@ -7003,13 +7063,18 @@ const TreeGroup = react.memo(function(props) {
   const expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded;
   let t2;
   return $[4] !== children || $[5] !== restProps || $[6] !== t1 || $[7] !== tree.space ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = children, $[5] = restProps, $[6] = t1, $[7] = tree.space, $[8] = t2) : t2 = $[8], t2;
-}), Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({
+}), Root = react.memo(styledComponents.styled.li.withConfig({
+  displayName: "Root",
+  componentId: "sc-iiskig-0"
+})(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = /* @__PURE__ */ styledComponents.styled(Box).attrs({
   forwardedAs: "a"
-})(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text)`
-  & > svg {
-    transition: transform 100ms;
-  }
-`, TreeItem = react.memo(function(props) {
+}).withConfig({
+  displayName: "TreeItemBox",
+  componentId: "sc-iiskig-1"
+})(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text).withConfig({
+  displayName: "ToggleArrowText",
+  componentId: "sc-iiskig-2"
+})`& > svg{transition:transform 100ms;}`, TreeItem = react.memo(function(props) {
   const {
     children,
     expanded: expandedProp = !1,