@sanity/ui 3.2.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/README.md +12 -0
  2. package/dist/_chunks-cjs/_visual-editing.js +54 -43
  3. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  4. package/dist/_chunks-es/_visual-editing.mjs +54 -43
  5. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  6. package/dist/_visual-editing.d.mts +129 -75
  7. package/dist/_visual-editing.d.ts +129 -75
  8. package/dist/index.d.mts +222 -139
  9. package/dist/index.d.ts +222 -139
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.mjs.map +1 -1
  12. package/dist/theme.d.mts +10 -4
  13. package/dist/theme.d.ts +10 -4
  14. package/package.json +19 -82
  15. package/src/core/components/autocomplete/autocomplete.tsx +1 -1
  16. package/src/core/components/autocomplete/types.ts +2 -2
  17. package/src/core/components/menu/__workshop__/asComponent.tsx +1 -1
  18. package/src/core/components/menu/menuDivider.ts +16 -5
  19. package/src/core/components/menu/menuGroup.spacing.test.tsx +1 -7
  20. package/src/core/components/menu/menuGroup.tsx +14 -6
  21. package/src/core/components/menu/menuItem.tsx +17 -6
  22. package/src/core/components/skeleton/skeleton.tsx +2 -2
  23. package/src/core/components/tab/tabList.tsx +2 -2
  24. package/src/core/components/tab/tabPanel.tsx +2 -2
  25. package/src/core/components/toast/styles.ts +2 -2
  26. package/src/core/components/tree/__workshop__/basic.perf.ts +1 -1
  27. package/src/core/components/tree/__workshop__/tabFromElement.tsx +1 -1
  28. package/src/core/components/tree/tree.tsx +9 -6
  29. package/src/core/components/tree/treeGroup.tsx +1 -1
  30. package/src/core/components/tree/treeItem.tsx +3 -2
  31. package/src/core/primitives/avatar/avatar.tsx +19 -11
  32. package/src/core/primitives/badge/badge.tsx +20 -12
  33. package/src/core/primitives/box/__workshop__/asComponent.tsx +31 -0
  34. package/src/core/primitives/box/__workshop__/index.ts +5 -0
  35. package/src/core/primitives/box/box.test.tsx +12 -4
  36. package/src/core/primitives/box/box.tsx +23 -12
  37. package/src/core/primitives/button/__workshop__/disabled.tsx +2 -2
  38. package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx +1 -1
  39. package/src/core/primitives/button/__workshop__/uploadButton.tsx +1 -1
  40. package/src/core/primitives/button/button.test.tsx +3 -3
  41. package/src/core/primitives/button/button.tsx +28 -9
  42. package/src/core/primitives/card/__workshop__/asComponent.tsx +1 -1
  43. package/src/core/primitives/card/card.tsx +24 -13
  44. package/src/core/primitives/code/code.tsx +16 -7
  45. package/src/core/primitives/container/container.tsx +23 -10
  46. package/src/core/primitives/flex/flex.tsx +21 -11
  47. package/src/core/primitives/grid/grid.test.tsx +3 -1
  48. package/src/core/primitives/grid/grid.tsx +22 -9
  49. package/src/core/primitives/heading/heading.tsx +19 -11
  50. package/src/core/primitives/inline/inline.tsx +19 -9
  51. package/src/core/primitives/kbd/kbd.tsx +19 -11
  52. package/src/core/primitives/label/label.tsx +19 -11
  53. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +1 -1
  54. package/src/core/primitives/stack/stack.tsx +20 -11
  55. package/src/core/primitives/text/text.tsx +19 -11
  56. package/src/core/primitives/textInput/textInput.tsx +2 -2
  57. package/src/core/types/component.ts +32 -0
  58. package/src/core/types/index.ts +1 -0
  59. package/src/core/utils/virtualList/virtualList.tsx +2 -2
  60. package/src/theme/system/css.ts +10 -4
@@ -987,7 +987,7 @@ function labelBaseStyle(props) {
987
987
  const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
988
988
  displayName: "StyledLabel",
989
989
  componentId: "sc-1luap7z-0"
990
- })(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = forwardRef(function(props, ref) {
990
+ })(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), LabelComponent = forwardRef(function(props, ref) {
991
991
  const $ = c(26);
992
992
  let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
993
993
  $[0] !== props ? ({
@@ -1016,8 +1016,8 @@ const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
1016
1016
  let t4;
1017
1017
  return $[17] !== accent || $[18] !== children || $[19] !== muted || $[20] !== ref || $[21] !== restProps || $[22] !== t2 || $[23] !== t3 || $[24] !== weight ? (t4 = /* @__PURE__ */ 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;
1018
1018
  });
1019
- Label.displayName = "ForwardRef(Label)";
1020
- const avatarStyle = {
1019
+ LabelComponent.displayName = "ForwardRef(Label)";
1020
+ const Label = LabelComponent, avatarStyle = {
1021
1021
  root: avatarRootStyle,
1022
1022
  arrow: avatarArrowStyle,
1023
1023
  bgStroke: avatarBgStrokeStyle,
@@ -1183,7 +1183,7 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
1183
1183
  }), AvatarImage = /* @__PURE__ */ styled.svg.withConfig({
1184
1184
  displayName: "AvatarImage",
1185
1185
  componentId: "sc-1rj7kl0-6"
1186
- })(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
1186
+ })(avatarStyle.image), AvatarComponent = forwardRef(function(props, ref) {
1187
1187
  const $ = c(46);
1188
1188
  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
1189
1189
  $[0] !== props ? ({
@@ -1236,7 +1236,8 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
1236
1236
  t12
1237
1237
  ] }), $[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;
1238
1238
  });
1239
- Avatar.displayName = "ForwardRef(Avatar)";
1239
+ AvatarComponent.displayName = "ForwardRef(Avatar)";
1240
+ const Avatar = AvatarComponent;
1240
1241
  function _temp$a(s) {
1241
1242
  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
1242
1243
  }
@@ -1364,7 +1365,7 @@ AvatarStack.displayName = "ForwardRef(AvatarStack)";
1364
1365
  const StyledBox = /* @__PURE__ */ styled.div.withConfig({
1365
1366
  displayName: "StyledBox",
1366
1367
  componentId: "sc-1hhky9f-0"
1367
- })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
1368
+ })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), BoxComponent = forwardRef(function(props, ref) {
1368
1369
  const $ = c(115);
1369
1370
  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;
1370
1371
  $[0] !== props ? ({
@@ -1456,7 +1457,8 @@ const StyledBox = /* @__PURE__ */ styled.div.withConfig({
1456
1457
  let t30;
1457
1458
  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__ */ 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;
1458
1459
  });
1459
- Box.displayName = "ForwardRef(Box)";
1460
+ BoxComponent.displayName = "ForwardRef(Box)";
1461
+ const Box = BoxComponent;
1460
1462
  function textBaseStyle(props) {
1461
1463
  const {
1462
1464
  $accent,
@@ -1528,7 +1530,7 @@ function textBaseStyle(props) {
1528
1530
  const StyledText = /* @__PURE__ */ styled.div.withConfig({
1529
1531
  displayName: "StyledText",
1530
1532
  componentId: "sc-11ov82j-0"
1531
- })(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = forwardRef(function(props, ref) {
1533
+ })(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), TextComponent = forwardRef(function(props, ref) {
1532
1534
  const $ = c(26);
1533
1535
  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
1534
1536
  $[0] !== props ? ({
@@ -1556,7 +1558,8 @@ const StyledText = /* @__PURE__ */ styled.div.withConfig({
1556
1558
  let t6;
1557
1559
  return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ 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;
1558
1560
  });
1559
- Text.displayName = "ForwardRef(Text)";
1561
+ TextComponent.displayName = "ForwardRef(Text)";
1562
+ const Text = TextComponent;
1560
1563
  function badgeStyle(props) {
1561
1564
  const {
1562
1565
  $tone
@@ -1575,7 +1578,7 @@ function badgeStyle(props) {
1575
1578
  const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
1576
1579
  displayName: "StyledBadge",
1577
1580
  componentId: "sc-5u140l-0"
1578
- })(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
1581
+ })(responsiveRadiusStyle, badgeStyle), BadgeComponent = forwardRef(function(props, ref) {
1579
1582
  const $ = c(21);
1580
1583
  let children, restProps, t0, t1, t2, t3;
1581
1584
  if ($[0] !== props) {
@@ -1601,11 +1604,11 @@ const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
1601
1604
  let t7;
1602
1605
  return $[14] !== ref || $[15] !== restProps || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== tone ? (t7 = /* @__PURE__ */ 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;
1603
1606
  });
1604
- Badge.displayName = "ForwardRef(Badge)";
1605
- const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
1607
+ BadgeComponent.displayName = "ForwardRef(Badge)";
1608
+ const Badge = BadgeComponent, StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
1606
1609
  displayName: "StyledFlex",
1607
1610
  componentId: "sc-oxesg3-0"
1608
- })(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
1611
+ })(flexItemStyle, responsiveFlexStyle), FlexComponent = forwardRef(function(props, ref) {
1609
1612
  const $ = c(27);
1610
1613
  let align, as, gap, justify, restProps, t0, wrap;
1611
1614
  $[0] !== props ? ({
@@ -1631,8 +1634,8 @@ const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
1631
1634
  let t6;
1632
1635
  return $[18] !== as || $[19] !== ref || $[20] !== restProps || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 ? (t6 = /* @__PURE__ */ 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;
1633
1636
  });
1634
- Flex.displayName = "ForwardRef(Flex)";
1635
- const rotate = keyframes`
1637
+ FlexComponent.displayName = "ForwardRef(Flex)";
1638
+ const Flex = FlexComponent, rotate = keyframes`
1636
1639
  from {
1637
1640
  transform: rotate(0deg);
1638
1641
  }
@@ -1825,7 +1828,7 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
1825
1828
  })(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div.withConfig({
1826
1829
  displayName: "LoadingBox",
1827
1830
  componentId: "sc-aaekt4-1"
1828
- })`position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:var(--card-bg-color);border-radius:inherit;z-index:1;box-shadow:inherit;`, Button = forwardRef(function(props, ref) {
1831
+ })`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 = forwardRef(function(props, ref) {
1829
1832
  const $ = c(87);
1830
1833
  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;
1831
1834
  $[0] !== props ? ({
@@ -1924,7 +1927,8 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
1924
1927
  t26
1925
1928
  ] }), $[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;
1926
1929
  });
1927
- Button.displayName = "ForwardRef(Button)";
1930
+ ButtonComponent.displayName = "ForwardRef(Button)";
1931
+ const Button = ButtonComponent;
1928
1932
  function cardStyle(props) {
1929
1933
  return [cardBaseStyle(props), cardColorStyle(props)];
1930
1934
  }
@@ -2076,7 +2080,7 @@ function cardColorStyle(props) {
2076
2080
  const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
2077
2081
  displayName: "StyledCard",
2078
2082
  componentId: "sc-osnro2-0"
2079
- })(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
2083
+ })(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), CardComponent = forwardRef(function(props, ref) {
2080
2084
  const $ = c(56);
2081
2085
  let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
2082
2086
  $[0] !== props ? ({
@@ -2118,7 +2122,8 @@ const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
2118
2122
  let t17;
2119
2123
  return $[52] !== scheme || $[53] !== t16 || $[54] !== tone ? (t17 = /* @__PURE__ */ jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[52] = scheme, $[53] = t16, $[54] = tone, $[55] = t17) : t17 = $[55], t17;
2120
2124
  });
2121
- Card.displayName = "ForwardRef(Card)";
2125
+ CardComponent.displayName = "ForwardRef(Card)";
2126
+ const Card = CardComponent;
2122
2127
  function useClickOutsideEvent(listener, t0, boundaryElement) {
2123
2128
  const $ = c(9), elementsArg = t0 === void 0 ? _temp$8 : t0;
2124
2129
  let t1;
@@ -2630,7 +2635,7 @@ function codeBaseStyle() {
2630
2635
  const LazyRefractor = lazy(() => import("./refractor.mjs")), StyledCode = /* @__PURE__ */ styled.pre.withConfig({
2631
2636
  displayName: "StyledCode",
2632
2637
  componentId: "sc-4dymyn-0"
2633
- })(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
2638
+ })(codeBaseStyle, responsiveCodeFontStyle), CodeComponent = forwardRef(function(props, ref) {
2634
2639
  const $ = c(22);
2635
2640
  let children, language, restProps, t0, weight;
2636
2641
  $[0] !== props ? ({
@@ -2652,8 +2657,8 @@ const LazyRefractor = lazy(() => import("./refractor.mjs")), StyledCode = /* @__
2652
2657
  let t5;
2653
2658
  return $[16] !== ref || $[17] !== restProps || $[18] !== t1 || $[19] !== t4 || $[20] !== weight ? (t5 = /* @__PURE__ */ 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;
2654
2659
  });
2655
- Code.displayName = "ForwardRef(Code)";
2656
- const BASE_STYLE$1 = {
2660
+ CodeComponent.displayName = "ForwardRef(Code)";
2661
+ const Code = CodeComponent, BASE_STYLE$1 = {
2657
2662
  width: "100%",
2658
2663
  margin: "0 auto"
2659
2664
  };
@@ -2672,7 +2677,7 @@ function responsiveContainerWidthStyle(props) {
2672
2677
  const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
2673
2678
  displayName: "StyledContainer",
2674
2679
  componentId: "sc-wyroop-0"
2675
- })(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
2680
+ })(containerBaseStyle, responsiveContainerWidthStyle), ContainerComponent = forwardRef(function(props, ref) {
2676
2681
  const $ = c(11);
2677
2682
  let as, restProps, t0;
2678
2683
  $[0] !== props ? ({
@@ -2686,11 +2691,11 @@ const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
2686
2691
  let t2;
2687
2692
  return $[6] !== as || $[7] !== ref || $[8] !== restProps || $[9] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledContainer, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[6] = as, $[7] = ref, $[8] = restProps, $[9] = t1, $[10] = t2) : t2 = $[10], t2;
2688
2693
  });
2689
- Container.displayName = "ForwardRef(Container)";
2690
- const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
2694
+ ContainerComponent.displayName = "ForwardRef(Container)";
2695
+ const Container = ContainerComponent, StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
2691
2696
  displayName: "StyledGrid",
2692
2697
  componentId: "sc-v8t8oz-0"
2693
- })(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
2698
+ })(responsiveGridStyle), GridComponent = forwardRef(function(props, ref) {
2694
2699
  const $ = c(44);
2695
2700
  let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, gridTemplateColumns, gridTemplateRows, restProps, rows;
2696
2701
  $[0] !== props ? ({
@@ -2730,7 +2735,8 @@ const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
2730
2735
  let t11;
2731
2736
  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__ */ 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;
2732
2737
  });
2733
- Grid.displayName = "ForwardRef(Grid)";
2738
+ GridComponent.displayName = "ForwardRef(Grid)";
2739
+ const Grid = GridComponent;
2734
2740
  function headingBaseStyle(props) {
2735
2741
  const {
2736
2742
  $accent,
@@ -2793,7 +2799,7 @@ function headingBaseStyle(props) {
2793
2799
  const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
2794
2800
  displayName: "StyledHeading",
2795
2801
  componentId: "sc-137lwim-0"
2796
- })(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = forwardRef(function(props, ref) {
2802
+ })(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), HeadingComponent = forwardRef(function(props, ref) {
2797
2803
  const $ = c(26);
2798
2804
  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
2799
2805
  $[0] !== props ? ({
@@ -2821,7 +2827,8 @@ const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
2821
2827
  let t6;
2822
2828
  return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ 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;
2823
2829
  });
2824
- Heading.displayName = "ForwardRef(Heading)";
2830
+ HeadingComponent.displayName = "ForwardRef(Heading)";
2831
+ const Heading = HeadingComponent;
2825
2832
  function inlineBaseStyle() {
2826
2833
  return {
2827
2834
  lineHeight: "0",
@@ -2852,7 +2859,7 @@ function inlineSpaceStyle(props) {
2852
2859
  const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
2853
2860
  displayName: "StyledInline",
2854
2861
  componentId: "sc-1pkiy6j-0"
2855
- })(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
2862
+ })(inlineBaseStyle, inlineSpaceStyle), InlineComponent = forwardRef(function(props, ref) {
2856
2863
  const $ = c(16);
2857
2864
  let as, childrenProp, deprecated_space, gap, restProps;
2858
2865
  $[0] !== props ? ({
@@ -2872,7 +2879,8 @@ const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
2872
2879
  let t3;
2873
2880
  return $[10] !== as || $[11] !== children || $[12] !== restProps || $[13] !== t1 || $[14] !== t2 ? (t3 = /* @__PURE__ */ 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;
2874
2881
  });
2875
- Inline.displayName = "ForwardRef(Inline)";
2882
+ InlineComponent.displayName = "ForwardRef(Inline)";
2883
+ const Inline = InlineComponent;
2876
2884
  function _temp$5(child) {
2877
2885
  return child && /* @__PURE__ */ jsx("div", { children: child });
2878
2886
  }
@@ -2896,7 +2904,7 @@ function kbdStyle() {
2896
2904
  const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
2897
2905
  displayName: "StyledKBD",
2898
2906
  componentId: "sc-1w7yd8w-0"
2899
- })(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
2907
+ })(responsiveRadiusStyle, kbdStyle), KBDComponent = forwardRef(function(props, ref) {
2900
2908
  const $ = c(19);
2901
2909
  let children, restProps, t0, t1, t2;
2902
2910
  $[0] !== props ? ({
@@ -2916,8 +2924,8 @@ const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
2916
2924
  let t6;
2917
2925
  return $[14] !== ref || $[15] !== restProps || $[16] !== t3 || $[17] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledKBD, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[14] = ref, $[15] = restProps, $[16] = t3, $[17] = t5, $[18] = t6) : t6 = $[18], t6;
2918
2926
  });
2919
- KBD.displayName = "ForwardRef(KBD)";
2920
- const origin = {
2927
+ KBDComponent.displayName = "ForwardRef(KBD)";
2928
+ const KBD = KBDComponent, origin = {
2921
2929
  name: "@sanity/ui/origin",
2922
2930
  fn({
2923
2931
  middlewareData,
@@ -4310,7 +4318,7 @@ function responsiveStackSpaceStyle(props) {
4310
4318
  const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
4311
4319
  displayName: "StyledStack",
4312
4320
  componentId: "sc-8dpfq2-0"
4313
- })(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
4321
+ })(stackBaseStyle, responsiveStackSpaceStyle), StackComponent = forwardRef(function(props, ref) {
4314
4322
  const $ = c(13);
4315
4323
  let as, deprecated_space, gap, restProps;
4316
4324
  $[0] !== props ? ({
@@ -4325,7 +4333,8 @@ const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
4325
4333
  let t2;
4326
4334
  return $[7] !== as || $[8] !== ref || $[9] !== restProps || $[10] !== t0 || $[11] !== t1 ? (t2 = /* @__PURE__ */ 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;
4327
4335
  });
4328
- Stack.displayName = "ForwardRef(Stack)";
4336
+ StackComponent.displayName = "ForwardRef(Stack)";
4337
+ const Stack = StackComponent;
4329
4338
  function switchBaseStyles() {
4330
4339
  return css`
4331
4340
  position: relative;
@@ -5391,11 +5400,12 @@ const StyledMenu = styled(Box).withConfig({
5391
5400
  return $[47] !== t11 || $[48] !== value ? (t12 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t11 }), $[47] = t11, $[48] = value, $[49] = t12) : t12 = $[49], t12;
5392
5401
  });
5393
5402
  Menu.displayName = "ForwardRef(Menu)";
5394
- const MenuDivider = styled.hr.withConfig({
5395
- displayName: "MenuDivider",
5403
+ const StyledMenuDivider = styled.hr.withConfig({
5404
+ displayName: "StyledMenuDivider",
5396
5405
  componentId: "sc-uhoxwu-0"
5397
5406
  })`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
5398
- MenuDivider.displayName = "MenuDivider";
5407
+ StyledMenuDivider.displayName = "MenuDivider";
5408
+ const MenuDivider = StyledMenuDivider;
5399
5409
  function selectableBaseStyle() {
5400
5410
  return css`
5401
5411
  background-color: inherit;
@@ -5509,7 +5519,7 @@ function useMenu() {
5509
5519
  throw new Error("useMenu(): the context value is not compatible");
5510
5520
  return value;
5511
5521
  }
5512
- function MenuGroup(props) {
5522
+ function MenuGroupComponent(props) {
5513
5523
  const $ = c(82);
5514
5524
  let IconComponent, children, gap, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
5515
5525
  $[0] !== props ? ({
@@ -5618,8 +5628,8 @@ function MenuGroup(props) {
5618
5628
  let t32;
5619
5629
  return $[77] !== childMenu || $[78] !== open || $[79] !== popover || $[80] !== t31 ? (t32 = /* @__PURE__ */ 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;
5620
5630
  }
5621
- MenuGroup.displayName = "MenuGroup";
5622
- const MenuItem = forwardRef(function(props, forwardedRef) {
5631
+ MenuGroupComponent.displayName = "MenuGroup";
5632
+ const MenuGroup = MenuGroupComponent, MenuItemComponent = forwardRef(function(props, forwardedRef) {
5623
5633
  const $ = c(76);
5624
5634
  let IconComponent, IconRightComponent, children, disabled, gap, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, restProps, selectedProp, t0, t1, t2, t3, t4, t5, text;
5625
5635
  $[0] !== props ? ({
@@ -5713,7 +5723,8 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
5713
5723
  t21
5714
5724
  ] }), $[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;
5715
5725
  });
5716
- MenuItem.displayName = "ForwardRef(MenuItem)";
5726
+ MenuItemComponent.displayName = "ForwardRef(MenuItem)";
5727
+ const MenuItem = MenuItemComponent;
5717
5728
  function _temp(s) {
5718
5729
  return s - 1;
5719
5730
  }