@sanity/ui 3.2.0 → 3.3.0

package/dist/_chunks-cjs/_visual-editing.js

@@ -981,7 +981,7 @@ function labelBaseStyle(props) {
 const StyledLabel = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1luap7z-0"
-})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = react.forwardRef(function(props, ref) {
+})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), LabelComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(26);
   let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
@@ -1010,8 +1010,8 @@ const StyledLabel = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t4;
   return $[17] !== accent || $[18] !== children || $[19] !== muted || $[20] !== ref || $[21] !== restProps || $[22] !== t2 || $[23] !== t3 || $[24] !== weight ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[17] = accent, $[18] = children, $[19] = muted, $[20] = ref, $[21] = restProps, $[22] = t2, $[23] = t3, $[24] = weight, $[25] = t4) : t4 = $[25], t4;
 });
-Label.displayName = "ForwardRef(Label)";
-const avatarStyle = {
+LabelComponent.displayName = "ForwardRef(Label)";
+const Label = LabelComponent, avatarStyle = {
   root: avatarRootStyle,
   arrow: avatarArrowStyle,
   bgStroke: avatarBgStrokeStyle,
@@ -1177,7 +1177,7 @@ const StyledAvatar = /* @__PURE__ */ styledComponents.styled.div.withConfig({
 }), AvatarImage = /* @__PURE__ */ styledComponents.styled.svg.withConfig({
   displayName: "AvatarImage",
   componentId: "sc-1rj7kl0-6"
-})(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
+})(avatarStyle.image), AvatarComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(46);
   let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
   $[0] !== props ? ({
@@ -1230,7 +1230,8 @@ const StyledAvatar = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     t12
   ] }), $[32] = T0, $[33] = arrowPosition, $[34] = as, $[35] = color, $[36] = ref, $[37] = restProps, $[38] = size2, $[39] = status, $[40] = t10, $[41] = t11, $[42] = t12, $[43] = t8, $[44] = title, $[45] = t13) : t13 = $[45], t13;
 });
-Avatar.displayName = "ForwardRef(Avatar)";
+AvatarComponent.displayName = "ForwardRef(Avatar)";
+const Avatar = AvatarComponent;
 function _temp$a(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
 }
@@ -1358,7 +1359,7 @@ AvatarStack.displayName = "ForwardRef(AvatarStack)";
 const StyledBox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledBox",
   componentId: "sc-1hhky9f-0"
-})(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
+})(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), BoxComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(115);
   let deprecated_column, deprecated_columnEnd, deprecated_columnStart, deprecated_row, deprecated_rowEnd, deprecated_rowStart, flex, gridColumn, gridColumnEnd, gridColumnStart, gridRow, gridRowEnd, gridRowStart, height, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, restProps, sizing, t0, t1, t2, t3;
   $[0] !== props ? ({
@@ -1450,7 +1451,8 @@ const StyledBox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t30;
   return $[84] !== asProp || $[85] !== props.children || $[86] !== ref || $[87] !== restProps || $[88] !== t10 || $[89] !== t11 || $[90] !== t12 || $[91] !== t13 || $[92] !== t14 || $[93] !== t15 || $[94] !== t16 || $[95] !== t17 || $[96] !== t18 || $[97] !== t19 || $[98] !== t20 || $[99] !== t21 || $[100] !== t22 || $[101] !== t23 || $[102] !== t24 || $[103] !== t25 || $[104] !== t26 || $[105] !== t27 || $[106] !== t28 || $[107] !== t29 || $[108] !== t4 || $[109] !== t5 || $[110] !== t6 || $[111] !== t7 || $[112] !== t8 || $[113] !== t9 ? (t30 = /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { "data-as": t4, "data-ui": "Box", ...restProps, $column: t5, $columnStart: t6, $columnEnd: t7, $display: t8, $flex: t9, $height: t10, $margin: t11, $marginX: t12, $marginY: t13, $marginTop: t14, $marginRight: t15, $marginBottom: t16, $marginLeft: t17, $overflow: t18, $padding: t19, $paddingX: t20, $paddingY: t21, $paddingTop: t22, $paddingRight: t23, $paddingBottom: t24, $paddingLeft: t25, $row: t26, $rowStart: t27, $rowEnd: t28, $sizing: t29, as: asProp, ref, children: props.children }), $[84] = asProp, $[85] = props.children, $[86] = ref, $[87] = restProps, $[88] = t10, $[89] = t11, $[90] = t12, $[91] = t13, $[92] = t14, $[93] = t15, $[94] = t16, $[95] = t17, $[96] = t18, $[97] = t19, $[98] = t20, $[99] = t21, $[100] = t22, $[101] = t23, $[102] = t24, $[103] = t25, $[104] = t26, $[105] = t27, $[106] = t28, $[107] = t29, $[108] = t4, $[109] = t5, $[110] = t6, $[111] = t7, $[112] = t8, $[113] = t9, $[114] = t30) : t30 = $[114], t30;
 });
-Box.displayName = "ForwardRef(Box)";
+BoxComponent.displayName = "ForwardRef(Box)";
+const Box = BoxComponent;
 function textBaseStyle(props) {
   const {
     $accent,
@@ -1522,7 +1524,7 @@ function textBaseStyle(props) {
 const StyledText = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledText",
   componentId: "sc-11ov82j-0"
-})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = react.forwardRef(function(props, ref) {
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), TextComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(26);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -1550,7 +1552,8 @@ const StyledText = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t6;
   return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledText, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[17] = accent, $[18] = muted, $[19] = ref, $[20] = restProps, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = weight, $[25] = t6) : t6 = $[25], t6;
 });
-Text.displayName = "ForwardRef(Text)";
+TextComponent.displayName = "ForwardRef(Text)";
+const Text = TextComponent;
 function badgeStyle(props) {
   const {
     $tone
@@ -1569,7 +1572,7 @@ function badgeStyle(props) {
 const StyledBadge = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledBadge",
   componentId: "sc-5u140l-0"
-})(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
+})(responsiveRadiusStyle, badgeStyle), BadgeComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(21);
   let children, restProps, t0, t1, t2, t3;
   if ($[0] !== props) {
@@ -1595,11 +1598,11 @@ const StyledBadge = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   let t7;
   return $[14] !== ref || $[15] !== restProps || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== tone ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(StyledBadge, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[14] = ref, $[15] = restProps, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = tone, $[20] = t7) : t7 = $[20], t7;
 });
-Badge.displayName = "ForwardRef(Badge)";
-const StyledFlex = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+BadgeComponent.displayName = "ForwardRef(Badge)";
+const Badge = BadgeComponent, StyledFlex = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledFlex",
   componentId: "sc-oxesg3-0"
-})(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
+})(flexItemStyle, responsiveFlexStyle), FlexComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(27);
   let align, as, gap, justify, restProps, t0, wrap;
   $[0] !== props ? ({
@@ -1625,8 +1628,8 @@ const StyledFlex = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   let t6;
   return $[18] !== as || $[19] !== ref || $[20] !== restProps || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledFlex, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[18] = as, $[19] = ref, $[20] = restProps, $[21] = t1, $[22] = t2, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = t6) : t6 = $[26], t6;
 });
-Flex.displayName = "ForwardRef(Flex)";
-const rotate = styledComponents.keyframes`
+FlexComponent.displayName = "ForwardRef(Flex)";
+const Flex = FlexComponent, rotate = styledComponents.keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1819,7 +1822,7 @@ const StyledButton = /* @__PURE__ */ styledComponents.styled.button.withConfig({
 })(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) {
+})`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;`, ButtonComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(87);
   let IconComponent, IconRightComponent, children, disabled, gap, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, textWeight, width;
   $[0] !== props ? ({
@@ -1918,7 +1921,8 @@ const StyledButton = /* @__PURE__ */ styledComponents.styled.button.withConfig({
     t26
   ] }), $[73] = mode, $[74] = radius, $[75] = ref, $[76] = restProps, $[77] = t21, $[78] = t22, $[79] = t23, $[80] = t24, $[81] = t25, $[82] = t26, $[83] = tone, $[84] = type, $[85] = width, $[86] = t27) : t27 = $[86], t27;
 });
-Button.displayName = "ForwardRef(Button)";
+ButtonComponent.displayName = "ForwardRef(Button)";
+const Button = ButtonComponent;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -2070,7 +2074,7 @@ function cardColorStyle(props) {
 const StyledCard = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledCard",
   componentId: "sc-osnro2-0"
-})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
+})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), CardComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(56);
   let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
   $[0] !== props ? ({
@@ -2112,7 +2116,8 @@ const StyledCard = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   let t17;
   return $[52] !== scheme || $[53] !== t16 || $[54] !== tone ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[52] = scheme, $[53] = t16, $[54] = tone, $[55] = t17) : t17 = $[55], t17;
 });
-Card.displayName = "ForwardRef(Card)";
+CardComponent.displayName = "ForwardRef(Card)";
+const Card = CardComponent;
 function useClickOutsideEvent(listener, t0, boundaryElement) {
   const $ = reactCompilerRuntime.c(9), elementsArg = t0 === void 0 ? _temp$8 : t0;
   let t1;
@@ -2626,7 +2631,7 @@ const LazyRefractor = react.lazy(() => Promise.resolve().then(function() {
 })), StyledCode = /* @__PURE__ */ styledComponents.styled.pre.withConfig({
   displayName: "StyledCode",
   componentId: "sc-4dymyn-0"
-})(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
+})(codeBaseStyle, responsiveCodeFontStyle), CodeComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
   let children, language, restProps, t0, weight;
   $[0] !== props ? ({
@@ -2648,8 +2653,8 @@ const LazyRefractor = react.lazy(() => Promise.resolve().then(function() {
   let t5;
   return $[16] !== ref || $[17] !== restProps || $[18] !== t1 || $[19] !== t4 || $[20] !== weight ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(StyledCode, { "data-ui": "Code", ...restProps, $size: t1, $weight: weight, ref, children: t4 }), $[16] = ref, $[17] = restProps, $[18] = t1, $[19] = t4, $[20] = weight, $[21] = t5) : t5 = $[21], t5;
 });
-Code.displayName = "ForwardRef(Code)";
-const BASE_STYLE$1 = {
+CodeComponent.displayName = "ForwardRef(Code)";
+const Code = CodeComponent, BASE_STYLE$1 = {
   width: "100%",
   margin: "0 auto"
 };
@@ -2668,7 +2673,7 @@ function responsiveContainerWidthStyle(props) {
 const StyledContainer = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-wyroop-0"
-})(containerBaseStyle, responsiveContainerWidthStyle), Container = react.forwardRef(function(props, ref) {
+})(containerBaseStyle, responsiveContainerWidthStyle), ContainerComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(11);
   let as, restProps, t0;
   $[0] !== props ? ({
@@ -2682,11 +2687,11 @@ const StyledContainer = /* @__PURE__ */ styledComponents.styled(Box).withConfig(
   let t2;
   return $[6] !== as || $[7] !== ref || $[8] !== restProps || $[9] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[6] = as, $[7] = ref, $[8] = restProps, $[9] = t1, $[10] = t2) : t2 = $[10], t2;
 });
-Container.displayName = "ForwardRef(Container)";
-const StyledGrid = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
+ContainerComponent.displayName = "ForwardRef(Container)";
+const Container = ContainerComponent, StyledGrid = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-v8t8oz-0"
-})(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
+})(responsiveGridStyle), GridComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(44);
   let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, gridTemplateColumns, gridTemplateRows, restProps, rows;
   $[0] !== props ? ({
@@ -2726,7 +2731,8 @@ const StyledGrid = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   let t11;
   return $[30] !== as || $[31] !== children || $[32] !== ref || $[33] !== restProps || $[34] !== t0 || $[35] !== t1 || $[36] !== t10 || $[37] !== t2 || $[38] !== t3 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(StyledGrid, { "data-as": t0, "data-ui": "Grid", ...restProps, $autoRows: t1, $autoCols: t2, $autoFlow: t3, $columns: t5, $gap: t6, $gapX: t7, $gapY: t8, $rows: t10, forwardedAs: as, ref, children }), $[30] = as, $[31] = children, $[32] = ref, $[33] = restProps, $[34] = t0, $[35] = t1, $[36] = t10, $[37] = t2, $[38] = t3, $[39] = t5, $[40] = t6, $[41] = t7, $[42] = t8, $[43] = t11) : t11 = $[43], t11;
 });
-Grid.displayName = "ForwardRef(Grid)";
+GridComponent.displayName = "ForwardRef(Grid)";
+const Grid = GridComponent;
 function headingBaseStyle(props) {
   const {
     $accent,
@@ -2789,7 +2795,7 @@ function headingBaseStyle(props) {
 const StyledHeading = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledHeading",
   componentId: "sc-137lwim-0"
-})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = react.forwardRef(function(props, ref) {
+})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), HeadingComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(26);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -2817,7 +2823,8 @@ const StyledHeading = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   let t6;
   return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledHeading, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[17] = accent, $[18] = muted, $[19] = ref, $[20] = restProps, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = weight, $[25] = t6) : t6 = $[25], t6;
 });
-Heading.displayName = "ForwardRef(Heading)";
+HeadingComponent.displayName = "ForwardRef(Heading)";
+const Heading = HeadingComponent;
 function inlineBaseStyle() {
   return {
     lineHeight: "0",
@@ -2848,7 +2855,7 @@ function inlineSpaceStyle(props) {
 const StyledInline = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledInline",
   componentId: "sc-1pkiy6j-0"
-})(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
+})(inlineBaseStyle, inlineSpaceStyle), InlineComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(16);
   let as, childrenProp, deprecated_space, gap, restProps;
   $[0] !== props ? ({
@@ -2868,7 +2875,8 @@ const StyledInline = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   let t3;
   return $[10] !== as || $[11] !== children || $[12] !== restProps || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t1, forwardedAs: as, ref: t2, children }), $[10] = as, $[11] = children, $[12] = restProps, $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15], t3;
 });
-Inline.displayName = "ForwardRef(Inline)";
+InlineComponent.displayName = "ForwardRef(Inline)";
+const Inline = InlineComponent;
 function _temp$5(child) {
   return child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child });
 }
@@ -2892,7 +2900,7 @@ function kbdStyle() {
 const StyledKBD = /* @__PURE__ */ styledComponents.styled.kbd.withConfig({
   displayName: "StyledKBD",
   componentId: "sc-1w7yd8w-0"
-})(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
+})(responsiveRadiusStyle, kbdStyle), KBDComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(19);
   let children, restProps, t0, t1, t2;
   $[0] !== props ? ({
@@ -2912,8 +2920,8 @@ const StyledKBD = /* @__PURE__ */ styledComponents.styled.kbd.withConfig({
   let t6;
   return $[14] !== ref || $[15] !== restProps || $[16] !== t3 || $[17] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledKBD, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[14] = ref, $[15] = restProps, $[16] = t3, $[17] = t5, $[18] = t6) : t6 = $[18], t6;
 });
-KBD.displayName = "ForwardRef(KBD)";
-const origin = {
+KBDComponent.displayName = "ForwardRef(KBD)";
+const KBD = KBDComponent, origin = {
   name: "@sanity/ui/origin",
   fn({
     middlewareData,
@@ -4306,7 +4314,7 @@ function responsiveStackSpaceStyle(props) {
 const StyledStack = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledStack",
   componentId: "sc-8dpfq2-0"
-})(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
+})(stackBaseStyle, responsiveStackSpaceStyle), StackComponent = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(13);
   let as, deprecated_space, gap, restProps;
   $[0] !== props ? ({
@@ -4321,7 +4329,8 @@ const StyledStack = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   let t2;
   return $[7] !== as || $[8] !== ref || $[9] !== restProps || $[10] !== t0 || $[11] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(StyledStack, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[7] = as, $[8] = ref, $[9] = restProps, $[10] = t0, $[11] = t1, $[12] = t2) : t2 = $[12], t2;
 });
-Stack.displayName = "ForwardRef(Stack)";
+StackComponent.displayName = "ForwardRef(Stack)";
+const Stack = StackComponent;
 function switchBaseStyles() {
   return styledComponents.css`
     position: relative;
@@ -5387,11 +5396,12 @@ const StyledMenu = styledComponents.styled(Box).withConfig({
   return $[47] !== t11 || $[48] !== value ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: t11 }), $[47] = t11, $[48] = value, $[49] = t12) : t12 = $[49], t12;
 });
 Menu.displayName = "ForwardRef(Menu)";
-const MenuDivider = styledComponents.styled.hr.withConfig({
-  displayName: "MenuDivider",
+const StyledMenuDivider = styledComponents.styled.hr.withConfig({
+  displayName: "StyledMenuDivider",
   componentId: "sc-uhoxwu-0"
 })`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
-MenuDivider.displayName = "MenuDivider";
+StyledMenuDivider.displayName = "MenuDivider";
+const MenuDivider = StyledMenuDivider;
 function selectableBaseStyle() {
   return styledComponents.css`
     background-color: inherit;
@@ -5505,7 +5515,7 @@ function useMenu() {
     throw new Error("useMenu(): the context value is not compatible");
   return value;
 }
-function MenuGroup(props) {
+function MenuGroupComponent(props) {
   const $ = reactCompilerRuntime.c(82);
   let IconComponent, children, gap, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
@@ -5614,8 +5624,8 @@ function MenuGroup(props) {
   let t32;
   return $[77] !== childMenu || $[78] !== open || $[79] !== popover || $[80] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[77] = childMenu, $[78] = open, $[79] = popover, $[80] = t31, $[81] = t32) : t32 = $[81], t32;
 }
-MenuGroup.displayName = "MenuGroup";
-const MenuItem = react.forwardRef(function(props, forwardedRef) {
+MenuGroupComponent.displayName = "MenuGroup";
+const MenuGroup = MenuGroupComponent, MenuItemComponent = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(76);
   let IconComponent, IconRightComponent, children, disabled, gap, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, restProps, selectedProp, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
@@ -5709,7 +5719,8 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     t21
   ] }), $[60] = as, $[61] = disabled, $[62] = handleClick, $[63] = onItemMouseEnter, $[64] = onItemMouseLeave, $[65] = restProps, $[66] = scheme, $[67] = t13, $[68] = t14, $[69] = t15, $[70] = t16, $[71] = t18, $[72] = t19, $[73] = t20, $[74] = t21, $[75] = t22) : t22 = $[75], t22;
 });
-MenuItem.displayName = "ForwardRef(MenuItem)";
+MenuItemComponent.displayName = "ForwardRef(MenuItem)";
+const MenuItem = MenuItemComponent;
 function _temp(s) {
   return s - 1;
 }