@sanity/ui 3.2.0 → 3.3.1

package/README.md

@@ -28,6 +28,18 @@ root.render(
 )
 ```
 
+## Contributing and releasing new versions to npm
+
+This package lives in the [`sanity-io/ui` monorepo](https://github.com/sanity-io/ui) and uses [Changesets](https://github.com/changesets/changesets) to manage versioning and publishing.
+
+When you make a change that should be released, add a changeset to your pull request:
+
+```sh
+pnpm changeset
+```
+
+Once pull requests with changesets are merged into the `main` branch, a "Version Packages" pull request is opened (and kept up to date) that bumps the affected package versions and updates their changelogs. Merging that pull request publishes the packages to npm through the [`Release` workflow](https://github.com/sanity-io/ui/actions/workflows/release.yml), which uses npm [Trusted Publishing](https://docs.npmjs.com/trusted-publishers) (OIDC).
+
 ## License
 
 MIT-licensed. See LICENSE.

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;
 }