@sanity/ui 3.1.14 → 3.3.0

package/dist/_chunks-es/_visual-editing.mjs

@@ -987,7 +987,7 @@ function labelBaseStyle(props) {
 const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1luap7z-0"
-})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = forwardRef(function(props, ref) {
+})(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), LabelComponent = forwardRef(function(props, ref) {
   const $ = c(26);
   let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
@@ -1016,8 +1016,8 @@ const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
   let t4;
   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;
 });
-Label.displayName = "ForwardRef(Label)";
-const avatarStyle = {
+LabelComponent.displayName = "ForwardRef(Label)";
+const Label = LabelComponent, avatarStyle = {
   root: avatarRootStyle,
   arrow: avatarArrowStyle,
   bgStroke: avatarBgStrokeStyle,
@@ -1183,7 +1183,7 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
 }), AvatarImage = /* @__PURE__ */ styled.svg.withConfig({
   displayName: "AvatarImage",
   componentId: "sc-1rj7kl0-6"
-})(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
+})(avatarStyle.image), AvatarComponent = forwardRef(function(props, ref) {
   const $ = c(46);
   let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
   $[0] !== props ? ({
@@ -1236,7 +1236,8 @@ const StyledAvatar = /* @__PURE__ */ 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;
 }
@@ -1364,14 +1365,17 @@ AvatarStack.displayName = "ForwardRef(AvatarStack)";
 const StyledBox = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledBox",
   componentId: "sc-1hhky9f-0"
-})(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
-  const $ = c(109);
-  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;
+})(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), BoxComponent = forwardRef(function(props, ref) {
+  const $ = 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 ? ({
     as: t0,
-    column,
-    columnStart,
-    columnEnd,
+    gridColumn,
+    column: deprecated_column,
+    gridColumnStart,
+    columnStart: deprecated_columnStart,
+    gridColumnEnd,
+    columnEnd: deprecated_columnEnd,
     display: t1,
     flex,
     height,
@@ -1390,67 +1394,71 @@ const StyledBox = /* @__PURE__ */ styled.div.withConfig({
     paddingRight,
     paddingBottom,
     paddingLeft,
-    row,
-    rowStart,
-    rowEnd,
+    gridRow,
+    row: deprecated_row,
+    gridRowStart,
+    rowStart: deprecated_rowStart,
+    gridRowEnd,
+    rowEnd: deprecated_rowEnd,
     sizing,
     ...restProps
-  } = props, $[0] = props, $[1] = column, $[2] = columnEnd, $[3] = columnStart, $[4] = flex, $[5] = height, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = overflow, $[13] = paddingBottom, $[14] = paddingLeft, $[15] = paddingRight, $[16] = paddingTop, $[17] = paddingX, $[18] = paddingY, $[19] = restProps, $[20] = row, $[21] = rowEnd, $[22] = rowStart, $[23] = sizing, $[24] = t0, $[25] = t1, $[26] = t2, $[27] = t3) : (column = $[1], columnEnd = $[2], columnStart = $[3], flex = $[4], height = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], overflow = $[12], paddingBottom = $[13], paddingLeft = $[14], paddingRight = $[15], paddingTop = $[16], paddingX = $[17], paddingY = $[18], restProps = $[19], row = $[20], rowEnd = $[21], rowStart = $[22], sizing = $[23], t0 = $[24], t1 = $[25], t2 = $[26], t3 = $[27]);
-  const asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3, t4 = typeof asProp == "string" ? asProp : void 0;
+  } = props, $[0] = props, $[1] = deprecated_column, $[2] = deprecated_columnEnd, $[3] = deprecated_columnStart, $[4] = deprecated_row, $[5] = deprecated_rowEnd, $[6] = deprecated_rowStart, $[7] = flex, $[8] = gridColumn, $[9] = gridColumnEnd, $[10] = gridColumnStart, $[11] = gridRow, $[12] = gridRowEnd, $[13] = gridRowStart, $[14] = height, $[15] = marginBottom, $[16] = marginLeft, $[17] = marginRight, $[18] = marginTop, $[19] = marginX, $[20] = marginY, $[21] = overflow, $[22] = paddingBottom, $[23] = paddingLeft, $[24] = paddingRight, $[25] = paddingTop, $[26] = paddingX, $[27] = paddingY, $[28] = restProps, $[29] = sizing, $[30] = t0, $[31] = t1, $[32] = t2, $[33] = t3) : (deprecated_column = $[1], deprecated_columnEnd = $[2], deprecated_columnStart = $[3], deprecated_row = $[4], deprecated_rowEnd = $[5], deprecated_rowStart = $[6], flex = $[7], gridColumn = $[8], gridColumnEnd = $[9], gridColumnStart = $[10], gridRow = $[11], gridRowEnd = $[12], gridRowStart = $[13], height = $[14], marginBottom = $[15], marginLeft = $[16], marginRight = $[17], marginTop = $[18], marginX = $[19], marginY = $[20], overflow = $[21], paddingBottom = $[22], paddingLeft = $[23], paddingRight = $[24], paddingTop = $[25], paddingX = $[26], paddingY = $[27], restProps = $[28], sizing = $[29], t0 = $[30], t1 = $[31], t2 = $[32], t3 = $[33]);
+  const asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3, column = gridColumn === void 0 ? deprecated_column : gridColumn, columnStart = gridColumnStart === void 0 ? deprecated_columnStart : gridColumnStart, columnEnd = gridColumnEnd === void 0 ? deprecated_columnEnd : gridColumnEnd, row = gridRow === void 0 ? deprecated_row : gridRow, rowStart = gridRowStart === void 0 ? deprecated_rowStart : gridRowStart, rowEnd = gridRowEnd === void 0 ? deprecated_rowEnd : gridRowEnd, t4 = typeof asProp == "string" ? asProp : void 0;
   let t5;
-  $[28] !== column ? (t5 = _getArrayProp(column), $[28] = column, $[29] = t5) : t5 = $[29];
+  $[34] !== column ? (t5 = _getArrayProp(column), $[34] = column, $[35] = t5) : t5 = $[35];
   let t6;
-  $[30] !== columnStart ? (t6 = _getArrayProp(columnStart), $[30] = columnStart, $[31] = t6) : t6 = $[31];
+  $[36] !== columnStart ? (t6 = _getArrayProp(columnStart), $[36] = columnStart, $[37] = t6) : t6 = $[37];
   let t7;
-  $[32] !== columnEnd ? (t7 = _getArrayProp(columnEnd), $[32] = columnEnd, $[33] = t7) : t7 = $[33];
+  $[38] !== columnEnd ? (t7 = _getArrayProp(columnEnd), $[38] = columnEnd, $[39] = t7) : t7 = $[39];
   let t8;
-  $[34] !== display ? (t8 = _getArrayProp(display), $[34] = display, $[35] = t8) : t8 = $[35];
+  $[40] !== display ? (t8 = _getArrayProp(display), $[40] = display, $[41] = t8) : t8 = $[41];
   let t9;
-  $[36] !== flex ? (t9 = _getArrayProp(flex), $[36] = flex, $[37] = t9) : t9 = $[37];
+  $[42] !== flex ? (t9 = _getArrayProp(flex), $[42] = flex, $[43] = t9) : t9 = $[43];
   let t10;
-  $[38] !== height ? (t10 = _getArrayProp(height), $[38] = height, $[39] = t10) : t10 = $[39];
+  $[44] !== height ? (t10 = _getArrayProp(height), $[44] = height, $[45] = t10) : t10 = $[45];
   let t11;
-  $[40] !== margin ? (t11 = _getArrayProp(margin), $[40] = margin, $[41] = t11) : t11 = $[41];
+  $[46] !== margin ? (t11 = _getArrayProp(margin), $[46] = margin, $[47] = t11) : t11 = $[47];
   let t12;
-  $[42] !== marginX ? (t12 = _getArrayProp(marginX), $[42] = marginX, $[43] = t12) : t12 = $[43];
+  $[48] !== marginX ? (t12 = _getArrayProp(marginX), $[48] = marginX, $[49] = t12) : t12 = $[49];
   let t13;
-  $[44] !== marginY ? (t13 = _getArrayProp(marginY), $[44] = marginY, $[45] = t13) : t13 = $[45];
+  $[50] !== marginY ? (t13 = _getArrayProp(marginY), $[50] = marginY, $[51] = t13) : t13 = $[51];
   let t14;
-  $[46] !== marginTop ? (t14 = _getArrayProp(marginTop), $[46] = marginTop, $[47] = t14) : t14 = $[47];
+  $[52] !== marginTop ? (t14 = _getArrayProp(marginTop), $[52] = marginTop, $[53] = t14) : t14 = $[53];
   let t15;
-  $[48] !== marginRight ? (t15 = _getArrayProp(marginRight), $[48] = marginRight, $[49] = t15) : t15 = $[49];
+  $[54] !== marginRight ? (t15 = _getArrayProp(marginRight), $[54] = marginRight, $[55] = t15) : t15 = $[55];
   let t16;
-  $[50] !== marginBottom ? (t16 = _getArrayProp(marginBottom), $[50] = marginBottom, $[51] = t16) : t16 = $[51];
+  $[56] !== marginBottom ? (t16 = _getArrayProp(marginBottom), $[56] = marginBottom, $[57] = t16) : t16 = $[57];
   let t17;
-  $[52] !== marginLeft ? (t17 = _getArrayProp(marginLeft), $[52] = marginLeft, $[53] = t17) : t17 = $[53];
+  $[58] !== marginLeft ? (t17 = _getArrayProp(marginLeft), $[58] = marginLeft, $[59] = t17) : t17 = $[59];
   let t18;
-  $[54] !== overflow ? (t18 = _getArrayProp(overflow), $[54] = overflow, $[55] = t18) : t18 = $[55];
+  $[60] !== overflow ? (t18 = _getArrayProp(overflow), $[60] = overflow, $[61] = t18) : t18 = $[61];
   let t19;
-  $[56] !== padding ? (t19 = _getArrayProp(padding), $[56] = padding, $[57] = t19) : t19 = $[57];
+  $[62] !== padding ? (t19 = _getArrayProp(padding), $[62] = padding, $[63] = t19) : t19 = $[63];
   let t20;
-  $[58] !== paddingX ? (t20 = _getArrayProp(paddingX), $[58] = paddingX, $[59] = t20) : t20 = $[59];
+  $[64] !== paddingX ? (t20 = _getArrayProp(paddingX), $[64] = paddingX, $[65] = t20) : t20 = $[65];
   let t21;
-  $[60] !== paddingY ? (t21 = _getArrayProp(paddingY), $[60] = paddingY, $[61] = t21) : t21 = $[61];
+  $[66] !== paddingY ? (t21 = _getArrayProp(paddingY), $[66] = paddingY, $[67] = t21) : t21 = $[67];
   let t22;
-  $[62] !== paddingTop ? (t22 = _getArrayProp(paddingTop), $[62] = paddingTop, $[63] = t22) : t22 = $[63];
+  $[68] !== paddingTop ? (t22 = _getArrayProp(paddingTop), $[68] = paddingTop, $[69] = t22) : t22 = $[69];
   let t23;
-  $[64] !== paddingRight ? (t23 = _getArrayProp(paddingRight), $[64] = paddingRight, $[65] = t23) : t23 = $[65];
+  $[70] !== paddingRight ? (t23 = _getArrayProp(paddingRight), $[70] = paddingRight, $[71] = t23) : t23 = $[71];
   let t24;
-  $[66] !== paddingBottom ? (t24 = _getArrayProp(paddingBottom), $[66] = paddingBottom, $[67] = t24) : t24 = $[67];
+  $[72] !== paddingBottom ? (t24 = _getArrayProp(paddingBottom), $[72] = paddingBottom, $[73] = t24) : t24 = $[73];
   let t25;
-  $[68] !== paddingLeft ? (t25 = _getArrayProp(paddingLeft), $[68] = paddingLeft, $[69] = t25) : t25 = $[69];
+  $[74] !== paddingLeft ? (t25 = _getArrayProp(paddingLeft), $[74] = paddingLeft, $[75] = t25) : t25 = $[75];
   let t26;
-  $[70] !== row ? (t26 = _getArrayProp(row), $[70] = row, $[71] = t26) : t26 = $[71];
+  $[76] !== row ? (t26 = _getArrayProp(row), $[76] = row, $[77] = t26) : t26 = $[77];
   let t27;
-  $[72] !== rowStart ? (t27 = _getArrayProp(rowStart), $[72] = rowStart, $[73] = t27) : t27 = $[73];
+  $[78] !== rowStart ? (t27 = _getArrayProp(rowStart), $[78] = rowStart, $[79] = t27) : t27 = $[79];
   let t28;
-  $[74] !== rowEnd ? (t28 = _getArrayProp(rowEnd), $[74] = rowEnd, $[75] = t28) : t28 = $[75];
+  $[80] !== rowEnd ? (t28 = _getArrayProp(rowEnd), $[80] = rowEnd, $[81] = t28) : t28 = $[81];
   let t29;
-  $[76] !== sizing ? (t29 = _getArrayProp(sizing), $[76] = sizing, $[77] = t29) : t29 = $[77];
+  $[82] !== sizing ? (t29 = _getArrayProp(sizing), $[82] = sizing, $[83] = t29) : t29 = $[83];
   let t30;
-  return $[78] !== asProp || $[79] !== props.children || $[80] !== ref || $[81] !== restProps || $[82] !== t10 || $[83] !== t11 || $[84] !== t12 || $[85] !== t13 || $[86] !== t14 || $[87] !== t15 || $[88] !== t16 || $[89] !== t17 || $[90] !== t18 || $[91] !== t19 || $[92] !== t20 || $[93] !== t21 || $[94] !== t22 || $[95] !== t23 || $[96] !== t24 || $[97] !== t25 || $[98] !== t26 || $[99] !== t27 || $[100] !== t28 || $[101] !== t29 || $[102] !== t4 || $[103] !== t5 || $[104] !== t6 || $[105] !== t7 || $[106] !== t8 || $[107] !== 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 }), $[78] = asProp, $[79] = props.children, $[80] = ref, $[81] = restProps, $[82] = t10, $[83] = t11, $[84] = t12, $[85] = t13, $[86] = t14, $[87] = t15, $[88] = t16, $[89] = t17, $[90] = t18, $[91] = t19, $[92] = t20, $[93] = t21, $[94] = t22, $[95] = t23, $[96] = t24, $[97] = t25, $[98] = t26, $[99] = t27, $[100] = t28, $[101] = t29, $[102] = t4, $[103] = t5, $[104] = t6, $[105] = t7, $[106] = t8, $[107] = t9, $[108] = t30) : t30 = $[108], 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__ */ 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 +1530,7 @@ function textBaseStyle(props) {
 const StyledText = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledText",
   componentId: "sc-11ov82j-0"
-})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = forwardRef(function(props, ref) {
+})(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), TextComponent = forwardRef(function(props, ref) {
   const $ = c(26);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -1550,7 +1558,8 @@ const StyledText = /* @__PURE__ */ styled.div.withConfig({
   let t6;
   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;
 });
-Text.displayName = "ForwardRef(Text)";
+TextComponent.displayName = "ForwardRef(Text)";
+const Text = TextComponent;
 function badgeStyle(props) {
   const {
     $tone
@@ -1569,7 +1578,7 @@ function badgeStyle(props) {
 const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledBadge",
   componentId: "sc-5u140l-0"
-})(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
+})(responsiveRadiusStyle, badgeStyle), BadgeComponent = forwardRef(function(props, ref) {
   const $ = c(21);
   let children, restProps, t0, t1, t2, t3;
   if ($[0] !== props) {
@@ -1595,11 +1604,11 @@ const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
   let t7;
   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;
 });
-Badge.displayName = "ForwardRef(Badge)";
-const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
+BadgeComponent.displayName = "ForwardRef(Badge)";
+const Badge = BadgeComponent, StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledFlex",
   componentId: "sc-oxesg3-0"
-})(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
+})(flexItemStyle, responsiveFlexStyle), FlexComponent = forwardRef(function(props, ref) {
   const $ = c(27);
   let align, as, gap, justify, restProps, t0, wrap;
   $[0] !== props ? ({
@@ -1625,8 +1634,8 @@ const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
   let t6;
   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;
 });
-Flex.displayName = "ForwardRef(Flex)";
-const rotate = keyframes`
+FlexComponent.displayName = "ForwardRef(Flex)";
+const Flex = FlexComponent, rotate = keyframes`
   from {
     transform: rotate(0deg);
   }
@@ -1819,9 +1828,9 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
 })(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styled.div.withConfig({
   displayName: "LoadingBox",
   componentId: "sc-aaekt4-1"
-})`position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:var(--card-bg-color);border-radius:inherit;z-index:1;box-shadow:inherit;`, Button = forwardRef(function(props, ref) {
-  const $ = c(86);
-  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, textWeight, width;
+})`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) {
+  const $ = 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 ? ({
     children,
     disabled,
@@ -1840,6 +1849,7 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
     paddingRight: paddingRightProp,
     radius: t4,
     selected,
+    gap,
     space: t5,
     text,
     textAlign,
@@ -1849,42 +1859,42 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
     muted: t8,
     width,
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = loading, $[6] = paddingBottomProp, $[7] = paddingLeftProp, $[8] = paddingRightProp, $[9] = paddingTopProp, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = restProps, $[13] = selected, $[14] = t0, $[15] = t1, $[16] = t2, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = t6, $[21] = t7, $[22] = t8, $[23] = text, $[24] = textAlign, $[25] = textWeight, $[26] = width) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], loading = $[5], paddingBottomProp = $[6], paddingLeftProp = $[7], paddingRightProp = $[8], paddingTopProp = $[9], paddingXProp = $[10], paddingYProp = $[11], restProps = $[12], selected = $[13], t0 = $[14], t1 = $[15], t2 = $[16], t3 = $[17], t4 = $[18], t5 = $[19], t6 = $[20], t7 = $[21], t8 = $[22], text = $[23], textAlign = $[24], textWeight = $[25], width = $[26]);
-  const fontSize2 = t0 === void 0 ? 1 : t0, justifyProp = t1 === void 0 ? "center" : t1, mode = t2 === void 0 ? "default" : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, tone = t6 === void 0 ? "default" : t6, type = t7 === void 0 ? "button" : t7, muted = t8 === void 0 ? !1 : t8, {
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = gap, $[6] = loading, $[7] = paddingBottomProp, $[8] = paddingLeftProp, $[9] = paddingRightProp, $[10] = paddingTopProp, $[11] = paddingXProp, $[12] = paddingYProp, $[13] = restProps, $[14] = selected, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7, $[23] = t8, $[24] = text, $[25] = textAlign, $[26] = textWeight, $[27] = width) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], gap = $[5], loading = $[6], paddingBottomProp = $[7], paddingLeftProp = $[8], paddingRightProp = $[9], paddingTopProp = $[10], paddingXProp = $[11], paddingYProp = $[12], restProps = $[13], selected = $[14], t0 = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21], t7 = $[22], t8 = $[23], text = $[24], textAlign = $[25], textWeight = $[26], width = $[27]);
+  const fontSize2 = t0 === void 0 ? 1 : t0, justifyProp = t1 === void 0 ? "center" : t1, mode = t2 === void 0 ? "default" : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, deprecated_space = t5 === void 0 ? 3 : t5, tone = t6 === void 0 ? "default" : t6, type = t7 === void 0 ? "button" : t7, muted = t8 === void 0 ? !1 : t8, {
     button
   } = useTheme_v2();
   let t9;
-  $[27] !== justifyProp ? (t9 = _getArrayProp(justifyProp), $[27] = justifyProp, $[28] = t9) : t9 = $[28];
+  $[28] !== justifyProp ? (t9 = _getArrayProp(justifyProp), $[28] = justifyProp, $[29] = t9) : t9 = $[29];
   const justify = t9;
   let t10;
-  $[29] !== paddingProp ? (t10 = _getArrayProp(paddingProp), $[29] = paddingProp, $[30] = t10) : t10 = $[30];
+  $[30] !== paddingProp ? (t10 = _getArrayProp(paddingProp), $[30] = paddingProp, $[31] = t10) : t10 = $[31];
   const padding = t10;
   let t11;
-  $[31] !== paddingXProp ? (t11 = _getArrayProp(paddingXProp), $[31] = paddingXProp, $[32] = t11) : t11 = $[32];
+  $[32] !== paddingXProp ? (t11 = _getArrayProp(paddingXProp), $[32] = paddingXProp, $[33] = t11) : t11 = $[33];
   const paddingX = t11;
   let t12;
-  $[33] !== paddingYProp ? (t12 = _getArrayProp(paddingYProp), $[33] = paddingYProp, $[34] = t12) : t12 = $[34];
+  $[34] !== paddingYProp ? (t12 = _getArrayProp(paddingYProp), $[34] = paddingYProp, $[35] = t12) : t12 = $[35];
   const paddingY = t12;
   let t13;
-  $[35] !== paddingTopProp ? (t13 = _getArrayProp(paddingTopProp), $[35] = paddingTopProp, $[36] = t13) : t13 = $[36];
+  $[36] !== paddingTopProp ? (t13 = _getArrayProp(paddingTopProp), $[36] = paddingTopProp, $[37] = t13) : t13 = $[37];
   const paddingTop = t13;
   let t14;
-  $[37] !== paddingBottomProp ? (t14 = _getArrayProp(paddingBottomProp), $[37] = paddingBottomProp, $[38] = t14) : t14 = $[38];
+  $[38] !== paddingBottomProp ? (t14 = _getArrayProp(paddingBottomProp), $[38] = paddingBottomProp, $[39] = t14) : t14 = $[39];
   const paddingBottom = t14;
   let t15;
-  $[39] !== paddingLeftProp ? (t15 = _getArrayProp(paddingLeftProp), $[39] = paddingLeftProp, $[40] = t15) : t15 = $[40];
+  $[40] !== paddingLeftProp ? (t15 = _getArrayProp(paddingLeftProp), $[40] = paddingLeftProp, $[41] = t15) : t15 = $[41];
   const paddingLeft = t15;
   let t16;
-  $[41] !== paddingRightProp ? (t16 = _getArrayProp(paddingRightProp), $[41] = paddingRightProp, $[42] = t16) : t16 = $[42];
+  $[42] !== paddingRightProp ? (t16 = _getArrayProp(paddingRightProp), $[42] = paddingRightProp, $[43] = t16) : t16 = $[43];
   const paddingRight = t16;
   let t17;
-  $[43] !== radiusProp ? (t17 = _getArrayProp(radiusProp), $[43] = radiusProp, $[44] = t17) : t17 = $[44];
-  const radius = t17;
-  let t18;
-  $[45] !== spaceProp ? (t18 = _getArrayProp(spaceProp), $[45] = spaceProp, $[46] = t18) : t18 = $[46];
-  const space = t18;
+  $[44] !== radiusProp ? (t17 = _getArrayProp(radiusProp), $[44] = radiusProp, $[45] = t17) : t17 = $[45];
+  const radius = t17, t18 = gap === void 0 ? deprecated_space : gap;
   let t19;
-  $[47] !== padding || $[48] !== paddingBottom || $[49] !== paddingLeft || $[50] !== paddingRight || $[51] !== paddingTop || $[52] !== paddingX || $[53] !== paddingY ? (t19 = {
+  $[46] !== t18 ? (t19 = _getArrayProp(t18), $[46] = t18, $[47] = t19) : t19 = $[47];
+  const spacing = t19;
+  let t20;
+  $[48] !== padding || $[49] !== paddingBottom || $[50] !== paddingLeft || $[51] !== paddingRight || $[52] !== paddingTop || $[53] !== paddingX || $[54] !== paddingY ? (t20 = {
     padding,
     paddingX,
     paddingY,
@@ -1892,12 +1902,12 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
     paddingBottom,
     paddingLeft,
     paddingRight
-  }, $[47] = padding, $[48] = paddingBottom, $[49] = paddingLeft, $[50] = paddingRight, $[51] = paddingTop, $[52] = paddingX, $[53] = paddingY, $[54] = t19) : t19 = $[54];
-  const boxProps = t19, t20 = !!(loading || disabled), t21 = selected ? "" : void 0, t22 = !!(loading || disabled);
-  let t23;
-  $[55] !== loading ? (t23 = !!loading && /* @__PURE__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }), $[55] = loading, $[56] = t23) : t23 = $[56];
+  }, $[48] = padding, $[49] = paddingBottom, $[50] = paddingLeft, $[51] = paddingRight, $[52] = paddingTop, $[53] = paddingX, $[54] = paddingY, $[55] = t20) : t20 = $[55];
+  const boxProps = t20, t21 = !!(loading || disabled), t22 = selected ? "" : void 0, t23 = !!(loading || disabled);
   let t24;
-  $[57] !== IconComponent || $[58] !== IconRightComponent || $[59] !== boxProps || $[60] !== button || $[61] !== fontSize2 || $[62] !== justify || $[63] !== muted || $[64] !== space || $[65] !== text || $[66] !== textAlign || $[67] !== textWeight ? (t24 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
+  $[56] !== loading ? (t24 = !!loading && /* @__PURE__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }), $[56] = loading, $[57] = t24) : t24 = $[57];
+  let t25;
+  $[58] !== IconComponent || $[59] !== IconRightComponent || $[60] !== boxProps || $[61] !== button || $[62] !== fontSize2 || $[63] !== justify || $[64] !== muted || $[65] !== spacing || $[66] !== text || $[67] !== textAlign || $[68] !== textWeight ? (t25 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: spacing, children: [
     IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
       isValidElement(IconComponent) && IconComponent,
       isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
@@ -1907,17 +1917,18 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
       isValidElement(IconRightComponent) && IconRightComponent,
       isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
     ] })
-  ] }) }), $[57] = IconComponent, $[58] = IconRightComponent, $[59] = boxProps, $[60] = button, $[61] = fontSize2, $[62] = justify, $[63] = muted, $[64] = space, $[65] = text, $[66] = textAlign, $[67] = textWeight, $[68] = t24) : t24 = $[68];
-  let t25;
-  $[69] !== boxProps || $[70] !== children ? (t25 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children }), $[69] = boxProps, $[70] = children, $[71] = t25) : t25 = $[71];
+  ] }) }), $[58] = IconComponent, $[59] = IconRightComponent, $[60] = boxProps, $[61] = button, $[62] = fontSize2, $[63] = justify, $[64] = muted, $[65] = spacing, $[66] = text, $[67] = textAlign, $[68] = textWeight, $[69] = t25) : t25 = $[69];
   let t26;
-  return $[72] !== mode || $[73] !== radius || $[74] !== ref || $[75] !== restProps || $[76] !== t20 || $[77] !== t21 || $[78] !== t22 || $[79] !== t23 || $[80] !== t24 || $[81] !== t25 || $[82] !== tone || $[83] !== type || $[84] !== width ? (t26 = /* @__PURE__ */ jsxs(StyledButton, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t20, "data-selected": t21, disabled: t22, ref, type, $width: width, children: [
-    t23,
+  $[70] !== boxProps || $[71] !== children ? (t26 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children }), $[70] = boxProps, $[71] = children, $[72] = t26) : t26 = $[72];
+  let t27;
+  return $[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 ? (t27 = /* @__PURE__ */ jsxs(StyledButton, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t21, "data-selected": t22, disabled: t23, ref, type, $width: width, children: [
     t24,
-    t25
-  ] }), $[72] = mode, $[73] = radius, $[74] = ref, $[75] = restProps, $[76] = t20, $[77] = t21, $[78] = t22, $[79] = t23, $[80] = t24, $[81] = t25, $[82] = tone, $[83] = type, $[84] = width, $[85] = t26) : t26 = $[85], t26;
+    t25,
+    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)];
 }
@@ -2069,7 +2080,7 @@ function cardColorStyle(props) {
 const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledCard",
   componentId: "sc-osnro2-0"
-})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
+})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), CardComponent = forwardRef(function(props, ref) {
   const $ = c(56);
   let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
   $[0] !== props ? ({
@@ -2111,7 +2122,8 @@ const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
   let t17;
   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;
 });
-Card.displayName = "ForwardRef(Card)";
+CardComponent.displayName = "ForwardRef(Card)";
+const Card = CardComponent;
 function useClickOutsideEvent(listener, t0, boundaryElement) {
   const $ = c(9), elementsArg = t0 === void 0 ? _temp$8 : t0;
   let t1;
@@ -2623,7 +2635,7 @@ function codeBaseStyle() {
 const LazyRefractor = lazy(() => import("./refractor.mjs")), StyledCode = /* @__PURE__ */ styled.pre.withConfig({
   displayName: "StyledCode",
   componentId: "sc-4dymyn-0"
-})(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
+})(codeBaseStyle, responsiveCodeFontStyle), CodeComponent = forwardRef(function(props, ref) {
   const $ = c(22);
   let children, language, restProps, t0, weight;
   $[0] !== props ? ({
@@ -2645,8 +2657,8 @@ const LazyRefractor = lazy(() => import("./refractor.mjs")), StyledCode = /* @__
   let t5;
   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;
 });
-Code.displayName = "ForwardRef(Code)";
-const BASE_STYLE$1 = {
+CodeComponent.displayName = "ForwardRef(Code)";
+const Code = CodeComponent, BASE_STYLE$1 = {
   width: "100%",
   margin: "0 auto"
 };
@@ -2665,7 +2677,7 @@ function responsiveContainerWidthStyle(props) {
 const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-wyroop-0"
-})(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
+})(containerBaseStyle, responsiveContainerWidthStyle), ContainerComponent = forwardRef(function(props, ref) {
   const $ = c(11);
   let as, restProps, t0;
   $[0] !== props ? ({
@@ -2679,47 +2691,52 @@ const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
   let t2;
   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;
 });
-Container.displayName = "ForwardRef(Container)";
-const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
+ContainerComponent.displayName = "ForwardRef(Container)";
+const Container = ContainerComponent, StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-v8t8oz-0"
-})(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
-  const $ = c(42);
-  let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, restProps, rows;
+})(responsiveGridStyle), GridComponent = forwardRef(function(props, ref) {
+  const $ = c(44);
+  let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, gridTemplateColumns, gridTemplateRows, restProps, rows;
   $[0] !== props ? ({
     as,
     autoRows,
     autoCols,
     autoFlow,
     columns,
+    gridTemplateColumns,
     gap,
     gapX,
     gapY,
     rows,
+    gridTemplateRows,
     children,
     ...restProps
-  } = props, $[0] = props, $[1] = as, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = children, $[6] = columns, $[7] = gap, $[8] = gapX, $[9] = gapY, $[10] = restProps, $[11] = rows) : (as = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], children = $[5], columns = $[6], gap = $[7], gapX = $[8], gapY = $[9], restProps = $[10], rows = $[11]);
+  } = props, $[0] = props, $[1] = as, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = children, $[6] = columns, $[7] = gap, $[8] = gapX, $[9] = gapY, $[10] = gridTemplateColumns, $[11] = gridTemplateRows, $[12] = restProps, $[13] = rows) : (as = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], children = $[5], columns = $[6], gap = $[7], gapX = $[8], gapY = $[9], gridTemplateColumns = $[10], gridTemplateRows = $[11], restProps = $[12], rows = $[13]);
   const t0 = typeof as == "string" ? as : void 0;
   let t1;
-  $[12] !== autoRows ? (t1 = _getArrayProp(autoRows), $[12] = autoRows, $[13] = t1) : t1 = $[13];
+  $[14] !== autoRows ? (t1 = _getArrayProp(autoRows), $[14] = autoRows, $[15] = t1) : t1 = $[15];
   let t2;
-  $[14] !== autoCols ? (t2 = _getArrayProp(autoCols), $[14] = autoCols, $[15] = t2) : t2 = $[15];
+  $[16] !== autoCols ? (t2 = _getArrayProp(autoCols), $[16] = autoCols, $[17] = t2) : t2 = $[17];
   let t3;
-  $[16] !== autoFlow ? (t3 = _getArrayProp(autoFlow), $[16] = autoFlow, $[17] = t3) : t3 = $[17];
-  let t4;
-  $[18] !== columns ? (t4 = _getArrayProp(columns), $[18] = columns, $[19] = t4) : t4 = $[19];
+  $[18] !== autoFlow ? (t3 = _getArrayProp(autoFlow), $[18] = autoFlow, $[19] = t3) : t3 = $[19];
+  const t4 = gridTemplateColumns === void 0 ? columns : gridTemplateColumns;
   let t5;
-  $[20] !== gap ? (t5 = _getArrayProp(gap), $[20] = gap, $[21] = t5) : t5 = $[21];
+  $[20] !== t4 ? (t5 = _getArrayProp(t4), $[20] = t4, $[21] = t5) : t5 = $[21];
   let t6;
-  $[22] !== gapX ? (t6 = _getArrayProp(gapX), $[22] = gapX, $[23] = t6) : t6 = $[23];
+  $[22] !== gap ? (t6 = _getArrayProp(gap), $[22] = gap, $[23] = t6) : t6 = $[23];
   let t7;
-  $[24] !== gapY ? (t7 = _getArrayProp(gapY), $[24] = gapY, $[25] = t7) : t7 = $[25];
+  $[24] !== gapX ? (t7 = _getArrayProp(gapX), $[24] = gapX, $[25] = t7) : t7 = $[25];
   let t8;
-  $[26] !== rows ? (t8 = _getArrayProp(rows), $[26] = rows, $[27] = t8) : t8 = $[27];
-  let t9;
-  return $[28] !== as || $[29] !== children || $[30] !== ref || $[31] !== restProps || $[32] !== t0 || $[33] !== t1 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 ? (t9 = /* @__PURE__ */ jsx(StyledGrid, { "data-as": t0, "data-ui": "Grid", ...restProps, $autoRows: t1, $autoCols: t2, $autoFlow: t3, $columns: t4, $gap: t5, $gapX: t6, $gapY: t7, $rows: t8, forwardedAs: as, ref, children }), $[28] = as, $[29] = children, $[30] = ref, $[31] = restProps, $[32] = t0, $[33] = t1, $[34] = t2, $[35] = t3, $[36] = t4, $[37] = t5, $[38] = t6, $[39] = t7, $[40] = t8, $[41] = t9) : t9 = $[41], t9;
+  $[26] !== gapY ? (t8 = _getArrayProp(gapY), $[26] = gapY, $[27] = t8) : t8 = $[27];
+  const t9 = gridTemplateRows === void 0 ? rows : gridTemplateRows;
+  let t10;
+  $[28] !== t9 ? (t10 = _getArrayProp(t9), $[28] = t9, $[29] = t10) : t10 = $[29];
+  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__ */ 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,
@@ -2782,7 +2799,7 @@ function headingBaseStyle(props) {
 const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledHeading",
   componentId: "sc-137lwim-0"
-})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = forwardRef(function(props, ref) {
+})(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), HeadingComponent = forwardRef(function(props, ref) {
   const $ = c(26);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
@@ -2810,7 +2827,8 @@ const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
   let t6;
   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;
 });
-Heading.displayName = "ForwardRef(Heading)";
+HeadingComponent.displayName = "ForwardRef(Heading)";
+const Heading = HeadingComponent;
 function inlineBaseStyle() {
   return {
     lineHeight: "0",
@@ -2841,25 +2859,28 @@ function inlineSpaceStyle(props) {
 const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledInline",
   componentId: "sc-1pkiy6j-0"
-})(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
-  const $ = c(15);
-  let as, childrenProp, restProps, space;
+})(inlineBaseStyle, inlineSpaceStyle), InlineComponent = forwardRef(function(props, ref) {
+  const $ = c(16);
+  let as, childrenProp, deprecated_space, gap, restProps;
   $[0] !== props ? ({
     as,
     children: childrenProp,
-    space,
+    gap,
+    space: deprecated_space,
     ...restProps
-  } = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = restProps, $[4] = space) : (as = $[1], childrenProp = $[2], restProps = $[3], space = $[4]);
+  } = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = deprecated_space, $[4] = gap, $[5] = restProps) : (as = $[1], childrenProp = $[2], deprecated_space = $[3], gap = $[4], restProps = $[5]);
+  const spacing = gap === void 0 ? deprecated_space : gap;
   let t0;
-  $[5] !== childrenProp ? (t0 = Children.map(childrenProp, _temp$5), $[5] = childrenProp, $[6] = t0) : t0 = $[6];
+  $[6] !== childrenProp ? (t0 = Children.map(childrenProp, _temp$5), $[6] = childrenProp, $[7] = t0) : t0 = $[7];
   const children = t0;
   let t1;
-  $[7] !== space ? (t1 = _getArrayProp(space), $[7] = space, $[8] = t1) : t1 = $[8];
+  $[8] !== spacing ? (t1 = _getArrayProp(spacing), $[8] = spacing, $[9] = t1) : t1 = $[9];
   const t2 = ref;
   let t3;
-  return $[9] !== as || $[10] !== children || $[11] !== restProps || $[12] !== t1 || $[13] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t1, forwardedAs: as, ref: t2, children }), $[9] = as, $[10] = children, $[11] = restProps, $[12] = t1, $[13] = t2, $[14] = t3) : t3 = $[14], t3;
+  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;
 });
-Inline.displayName = "ForwardRef(Inline)";
+InlineComponent.displayName = "ForwardRef(Inline)";
+const Inline = InlineComponent;
 function _temp$5(child) {
   return child && /* @__PURE__ */ jsx("div", { children: child });
 }
@@ -2883,7 +2904,7 @@ function kbdStyle() {
 const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
   displayName: "StyledKBD",
   componentId: "sc-1w7yd8w-0"
-})(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
+})(responsiveRadiusStyle, kbdStyle), KBDComponent = forwardRef(function(props, ref) {
   const $ = c(19);
   let children, restProps, t0, t1, t2;
   $[0] !== props ? ({
@@ -2903,8 +2924,8 @@ const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
   let t6;
   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;
 });
-KBD.displayName = "ForwardRef(KBD)";
-const origin = {
+KBDComponent.displayName = "ForwardRef(KBD)";
+const KBD = KBDComponent, origin = {
   name: "@sanity/ui/origin",
   fn({
     middlewareData,
@@ -4230,45 +4251,46 @@ const selectStyle = {
   displayName: "IconBox",
   componentId: "sc-5mxno7-2"
 })(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
-  const $ = c(37);
-  let children, customValidity, disabled, readOnly, restProps, t0, t1, t2, t3;
+  const $ = c(38);
+  let children, customValidity, disabled, gap, readOnly, restProps, t0, t1, t2, t3;
   $[0] !== props ? ({
     children,
     customValidity,
     disabled,
     fontSize: t0,
+    gap,
     padding: t1,
     radius: t2,
     readOnly,
     space: t3,
     ...restProps
-  } = props, $[0] = props, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = readOnly, $[5] = restProps, $[6] = t0, $[7] = t1, $[8] = t2, $[9] = t3) : (children = $[1], customValidity = $[2], disabled = $[3], readOnly = $[4], restProps = $[5], t0 = $[6], t1 = $[7], t2 = $[8], t3 = $[9]);
-  const fontSize2 = t0 === void 0 ? 2 : t0, padding = t1 === void 0 ? 3 : t1, radius = t2 === void 0 ? 2 : t2, space = t3 === void 0 ? 3 : t3, ref = useRef(null);
+  } = props, $[0] = props, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = gap, $[5] = readOnly, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2, $[10] = t3) : (children = $[1], customValidity = $[2], disabled = $[3], gap = $[4], readOnly = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9], t3 = $[10]);
+  const fontSize2 = t0 === void 0 ? 2 : t0, padding = t1 === void 0 ? 3 : t1, radius = t2 === void 0 ? 2 : t2, spacing = gap === void 0 ? t3 === void 0 ? 3 : t3 : gap, ref = useRef(null);
   let t4;
-  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[11] = t4) : t4 = $[11], useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
   const t5 = !disabled && readOnly ? "" : void 0;
   let t6;
-  $[11] !== fontSize2 ? (t6 = _getArrayProp(fontSize2), $[11] = fontSize2, $[12] = t6) : t6 = $[12];
+  $[12] !== fontSize2 ? (t6 = _getArrayProp(fontSize2), $[12] = fontSize2, $[13] = t6) : t6 = $[13];
   let t7;
-  $[13] !== padding ? (t7 = _getArrayProp(padding), $[13] = padding, $[14] = t7) : t7 = $[14];
+  $[14] !== padding ? (t7 = _getArrayProp(padding), $[14] = padding, $[15] = t7) : t7 = $[15];
   let t8;
-  $[15] !== radius ? (t8 = _getArrayProp(radius), $[15] = radius, $[16] = t8) : t8 = $[16];
+  $[16] !== radius ? (t8 = _getArrayProp(radius), $[16] = radius, $[17] = t8) : t8 = $[17];
   let t9;
-  $[17] !== space ? (t9 = _getArrayProp(space), $[17] = space, $[18] = t9) : t9 = $[18];
+  $[18] !== spacing ? (t9 = _getArrayProp(spacing), $[18] = spacing, $[19] = t9) : t9 = $[19];
   const t10 = disabled || readOnly;
   let t11;
-  $[19] !== children || $[20] !== restProps || $[21] !== t10 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t11 = /* @__PURE__ */ jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[19] = children, $[20] = restProps, $[21] = t10, $[22] = t5, $[23] = t6, $[24] = t7, $[25] = t8, $[26] = t9, $[27] = t11) : t11 = $[27];
+  $[20] !== children || $[21] !== restProps || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9 ? (t11 = /* @__PURE__ */ jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[20] = children, $[21] = restProps, $[22] = t10, $[23] = t5, $[24] = t6, $[25] = t7, $[26] = t8, $[27] = t9, $[28] = t11) : t11 = $[28];
   let t12;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[28] = t12) : t12 = $[28];
+  $[29] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[29] = t12) : t12 = $[29];
   let t13;
-  $[29] !== fontSize2 ? (t13 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t12 }), $[29] = fontSize2, $[30] = t13) : t13 = $[30];
+  $[30] !== fontSize2 ? (t13 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t12 }), $[30] = fontSize2, $[31] = t13) : t13 = $[31];
   let t14;
-  $[31] !== padding || $[32] !== t13 ? (t14 = /* @__PURE__ */ jsx(IconBox, { padding, children: t13 }), $[31] = padding, $[32] = t13, $[33] = t14) : t14 = $[33];
+  $[32] !== padding || $[33] !== t13 ? (t14 = /* @__PURE__ */ jsx(IconBox, { padding, children: t13 }), $[32] = padding, $[33] = t13, $[34] = t14) : t14 = $[34];
   let t15;
-  return $[34] !== t11 || $[35] !== t14 ? (t15 = /* @__PURE__ */ jsxs(StyledSelect, { "data-ui": "Select", children: [
+  return $[35] !== t11 || $[36] !== t14 ? (t15 = /* @__PURE__ */ jsxs(StyledSelect, { "data-ui": "Select", children: [
     t11,
     t14
-  ] }), $[34] = t11, $[35] = t14, $[36] = t15) : t15 = $[36], t15;
+  ] }), $[35] = t11, $[36] = t14, $[37] = t15) : t15 = $[37], t15;
 });
 Select.displayName = "ForwardRef(Select)";
 const BASE_STYLE = {
@@ -4296,21 +4318,23 @@ function responsiveStackSpaceStyle(props) {
 const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledStack",
   componentId: "sc-8dpfq2-0"
-})(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
-  const $ = c(12);
-  let as, restProps, space;
+})(stackBaseStyle, responsiveStackSpaceStyle), StackComponent = forwardRef(function(props, ref) {
+  const $ = c(13);
+  let as, deprecated_space, gap, restProps;
   $[0] !== props ? ({
     as,
-    space,
+    gap,
+    space: deprecated_space,
     ...restProps
-  } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = space) : (as = $[1], restProps = $[2], space = $[3]);
-  const t0 = typeof as == "string" ? as : void 0;
+  } = props, $[0] = props, $[1] = as, $[2] = deprecated_space, $[3] = gap, $[4] = restProps) : (as = $[1], deprecated_space = $[2], gap = $[3], restProps = $[4]);
+  const spacing = gap === void 0 ? deprecated_space : gap, t0 = typeof as == "string" ? as : void 0;
   let t1;
-  $[4] !== space ? (t1 = _getArrayProp(space), $[4] = space, $[5] = t1) : t1 = $[5];
+  $[5] !== spacing ? (t1 = _getArrayProp(spacing), $[5] = spacing, $[6] = t1) : t1 = $[6];
   let t2;
-  return $[6] !== as || $[7] !== ref || $[8] !== restProps || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledStack, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[6] = as, $[7] = ref, $[8] = restProps, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+  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;
 });
-Stack.displayName = "ForwardRef(Stack)";
+StackComponent.displayName = "ForwardRef(Stack)";
+const Stack = StackComponent;
 function switchBaseStyles() {
   return css`
     position: relative;
@@ -4609,14 +4633,15 @@ const CLEAR_BUTTON_BOX_STYLE = {
     display: "block"
   }
 }), TextInput = forwardRef(function(props, forwardedRef) {
-  const $ = c(92);
-  let IconComponent, IconRightComponent, __unstable_disableFocusRing, clearButton, customValidity, onClear, prefix, readOnly, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, weight;
+  const $ = c(93);
+  let IconComponent, IconRightComponent, __unstable_disableFocusRing, clearButton, customValidity, gap, onClear, prefix, readOnly, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, weight;
   $[0] !== props ? ({
     __unstable_disableFocusRing,
     border: t0,
     clearButton,
     disabled: t1,
     fontSize: t2,
+    gap,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClear,
@@ -4630,73 +4655,73 @@ const CLEAR_BUTTON_BOX_STYLE = {
     type: t6,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = __unstable_disableFocusRing, $[4] = clearButton, $[5] = customValidity, $[6] = onClear, $[7] = prefix, $[8] = readOnly, $[9] = restProps, $[10] = suffix, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5, $[17] = t6, $[18] = weight) : (IconComponent = $[1], IconRightComponent = $[2], __unstable_disableFocusRing = $[3], clearButton = $[4], customValidity = $[5], onClear = $[6], prefix = $[7], readOnly = $[8], restProps = $[9], suffix = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16], t6 = $[17], weight = $[18]);
-  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = useRef(null), rootTheme = useRootTheme();
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = __unstable_disableFocusRing, $[4] = clearButton, $[5] = customValidity, $[6] = gap, $[7] = onClear, $[8] = prefix, $[9] = readOnly, $[10] = restProps, $[11] = suffix, $[12] = t0, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = weight) : (IconComponent = $[1], IconRightComponent = $[2], __unstable_disableFocusRing = $[3], clearButton = $[4], customValidity = $[5], gap = $[6], onClear = $[7], prefix = $[8], readOnly = $[9], restProps = $[10], suffix = $[11], t0 = $[12], t1 = $[13], t2 = $[14], t3 = $[15], t4 = $[16], t5 = $[17], t6 = $[18], weight = $[19]);
+  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, deprecated_space = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = useRef(null), rootTheme = useRootTheme();
   let t7;
-  $[19] !== fontSizeProp ? (t7 = _getArrayProp(fontSizeProp), $[19] = fontSizeProp, $[20] = t7) : t7 = $[20];
+  $[20] !== fontSizeProp ? (t7 = _getArrayProp(fontSizeProp), $[20] = fontSizeProp, $[21] = t7) : t7 = $[21];
   const fontSize2 = t7;
   let t8;
-  $[21] !== paddingProp ? (t8 = _getArrayProp(paddingProp), $[21] = paddingProp, $[22] = t8) : t8 = $[22];
+  $[22] !== paddingProp ? (t8 = _getArrayProp(paddingProp), $[22] = paddingProp, $[23] = t8) : t8 = $[23];
   const padding = t8;
   let t9;
-  $[23] !== radiusProp ? (t9 = _getArrayProp(radiusProp), $[23] = radiusProp, $[24] = t9) : t9 = $[24];
-  const radius = t9;
-  let t10;
-  $[25] !== spaceProp ? (t10 = _getArrayProp(spaceProp), $[25] = spaceProp, $[26] = t10) : t10 = $[26];
-  const space = t10, $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  $[24] !== radiusProp ? (t9 = _getArrayProp(radiusProp), $[24] = radiusProp, $[25] = t9) : t9 = $[25];
+  const radius = t9, t10 = gap === void 0 ? deprecated_space : gap;
   let t11;
-  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t11 = () => ref.current, $[27] = t11) : t11 = $[27], useImperativeHandle(forwardedRef, t11), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$2;
+  $[26] !== t10 ? (t11 = _getArrayProp(t10), $[26] = t10, $[27] = t11) : t11 = $[27];
+  const space = t11, $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   let t12;
-  $[28] !== onClear ? (t12 = (event_0) => {
-    event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
-  }, $[28] = onClear, $[29] = t12) : t12 = $[29];
-  const handleClearClick = t12;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => ref.current, $[28] = t12) : t12 = $[28], useImperativeHandle(forwardedRef, t12), useCustomValidity(ref, customValidity);
+  const handleClearMouseDown = _temp$2;
   let t13;
-  $[30] !== prefix || $[31] !== radius ? (t13 = prefix && /* @__PURE__ */ jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[30] = prefix, $[31] = radius, $[32] = t13) : t13 = $[32];
-  const prefixNode = t13, t14 = border2 ? "" : void 0;
-  let t15;
-  $[33] !== IconComponent || $[34] !== fontSize2 || $[35] !== padding ? (t15 = IconComponent && /* @__PURE__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+  $[29] !== onClear ? (t13 = (event_0) => {
+    event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
+  }, $[29] = onClear, $[30] = t13) : t13 = $[30];
+  const handleClearClick = t13;
+  let t14;
+  $[31] !== prefix || $[32] !== radius ? (t14 = prefix && /* @__PURE__ */ jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[31] = prefix, $[32] = radius, $[33] = t14) : t14 = $[33];
+  const prefixNode = t14, t15 = border2 ? "" : void 0;
+  let t16;
+  $[34] !== IconComponent || $[35] !== fontSize2 || $[36] !== padding ? (t16 = IconComponent && /* @__PURE__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
     isValidElement(IconComponent) && IconComponent,
     isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-  ] }) }), $[33] = IconComponent, $[34] = fontSize2, $[35] = padding, $[36] = t15) : t15 = $[36];
-  let t16;
-  $[37] !== $hasClearButton || $[38] !== IconRightComponent || $[39] !== fontSize2 || $[40] !== padding ? (t16 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+  ] }) }), $[34] = IconComponent, $[35] = fontSize2, $[36] = padding, $[37] = t16) : t16 = $[37];
+  let t17;
+  $[38] !== $hasClearButton || $[39] !== IconRightComponent || $[40] !== fontSize2 || $[41] !== padding ? (t17 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
     isValidElement(IconRightComponent) && IconRightComponent,
     isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-  ] }) }), $[37] = $hasClearButton, $[38] = IconRightComponent, $[39] = fontSize2, $[40] = padding, $[41] = t16) : t16 = $[41];
-  let t17;
-  $[42] !== $hasPrefix || $[43] !== $hasSuffix || $[44] !== __unstable_disableFocusRing || $[45] !== radius || $[46] !== rootTheme.scheme || $[47] !== rootTheme.tone || $[48] !== t14 || $[49] !== t15 || $[50] !== t16 ? (t17 = /* @__PURE__ */ jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
-    t15,
-    t16
-  ] }), $[42] = $hasPrefix, $[43] = $hasSuffix, $[44] = __unstable_disableFocusRing, $[45] = radius, $[46] = rootTheme.scheme, $[47] = rootTheme.tone, $[48] = t14, $[49] = t15, $[50] = t16, $[51] = t17) : t17 = $[51];
-  const presentationNode = t17;
+  ] }) }), $[38] = $hasClearButton, $[39] = IconRightComponent, $[40] = fontSize2, $[41] = padding, $[42] = t17) : t17 = $[42];
   let t18;
-  $[52] !== padding ? (t18 = padding.map(_temp2), $[52] = padding, $[53] = t18) : t18 = $[53];
-  const clearButtonBoxPadding = t18;
+  $[43] !== $hasPrefix || $[44] !== $hasSuffix || $[45] !== __unstable_disableFocusRing || $[46] !== radius || $[47] !== rootTheme.scheme || $[48] !== rootTheme.tone || $[49] !== t15 || $[50] !== t16 || $[51] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t15, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
+    t16,
+    t17
+  ] }), $[43] = $hasPrefix, $[44] = $hasSuffix, $[45] = __unstable_disableFocusRing, $[46] = radius, $[47] = rootTheme.scheme, $[48] = rootTheme.tone, $[49] = t15, $[50] = t16, $[51] = t17, $[52] = t18) : t18 = $[52];
+  const presentationNode = t18;
   let t19;
-  $[54] !== padding ? (t19 = padding.map(_temp3), $[54] = padding, $[55] = t19) : t19 = $[55];
-  const clearButtonPadding = t19, clearButtonProps = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
+  $[53] !== padding ? (t19 = padding.map(_temp2), $[53] = padding, $[54] = t19) : t19 = $[54];
+  const clearButtonBoxPadding = t19;
   let t20;
-  $[56] !== clearButton || $[57] !== clearButtonBoxPadding || $[58] !== clearButtonPadding || $[59] !== clearButtonProps || $[60] !== customValidity || $[61] !== disabled || $[62] !== fontSize2 || $[63] !== handleClearClick || $[64] !== radius || $[65] !== readOnly ? (t20 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[56] = clearButton, $[57] = clearButtonBoxPadding, $[58] = clearButtonPadding, $[59] = clearButtonProps, $[60] = customValidity, $[61] = disabled, $[62] = fontSize2, $[63] = handleClearClick, $[64] = radius, $[65] = readOnly, $[66] = t20) : t20 = $[66];
-  const clearButtonNode = t20;
+  $[55] !== padding ? (t20 = padding.map(_temp3), $[55] = padding, $[56] = t20) : t20 = $[56];
+  const clearButtonPadding = t20, clearButtonProps = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
   let t21;
-  $[67] !== radius || $[68] !== suffix ? (t21 = suffix && /* @__PURE__ */ jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[67] = radius, $[68] = suffix, $[69] = t21) : t21 = $[69];
-  const suffixNode = t21, t22 = $hasIconRight || $hasClearButton;
-  let t23;
-  $[70] !== $hasIcon || $[71] !== disabled || $[72] !== fontSize2 || $[73] !== padding || $[74] !== readOnly || $[75] !== restProps || $[76] !== rootTheme.scheme || $[77] !== rootTheme.tone || $[78] !== space || $[79] !== t22 || $[80] !== type || $[81] !== weight ? (t23 = /* @__PURE__ */ jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t22, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[70] = $hasIcon, $[71] = disabled, $[72] = fontSize2, $[73] = padding, $[74] = readOnly, $[75] = restProps, $[76] = rootTheme.scheme, $[77] = rootTheme.tone, $[78] = space, $[79] = t22, $[80] = type, $[81] = weight, $[82] = t23) : t23 = $[82];
+  $[57] !== clearButton || $[58] !== clearButtonBoxPadding || $[59] !== clearButtonPadding || $[60] !== clearButtonProps || $[61] !== customValidity || $[62] !== disabled || $[63] !== fontSize2 || $[64] !== handleClearClick || $[65] !== radius || $[66] !== readOnly ? (t21 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[57] = clearButton, $[58] = clearButtonBoxPadding, $[59] = clearButtonPadding, $[60] = clearButtonProps, $[61] = customValidity, $[62] = disabled, $[63] = fontSize2, $[64] = handleClearClick, $[65] = radius, $[66] = readOnly, $[67] = t21) : t21 = $[67];
+  const clearButtonNode = t21;
+  let t22;
+  $[68] !== radius || $[69] !== suffix ? (t22 = suffix && /* @__PURE__ */ jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[68] = radius, $[69] = suffix, $[70] = t22) : t22 = $[70];
+  const suffixNode = t22, t23 = $hasIconRight || $hasClearButton;
   let t24;
-  $[83] !== clearButtonNode || $[84] !== presentationNode || $[85] !== t23 ? (t24 = /* @__PURE__ */ jsxs(InputRoot, { children: [
-    t23,
+  $[71] !== $hasIcon || $[72] !== disabled || $[73] !== fontSize2 || $[74] !== padding || $[75] !== readOnly || $[76] !== restProps || $[77] !== rootTheme.scheme || $[78] !== rootTheme.tone || $[79] !== space || $[80] !== t23 || $[81] !== type || $[82] !== weight ? (t24 = /* @__PURE__ */ jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t23, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[71] = $hasIcon, $[72] = disabled, $[73] = fontSize2, $[74] = padding, $[75] = readOnly, $[76] = restProps, $[77] = rootTheme.scheme, $[78] = rootTheme.tone, $[79] = space, $[80] = t23, $[81] = type, $[82] = weight, $[83] = t24) : t24 = $[83];
+  let t25;
+  $[84] !== clearButtonNode || $[85] !== presentationNode || $[86] !== t24 ? (t25 = /* @__PURE__ */ jsxs(InputRoot, { children: [
+    t24,
     presentationNode,
     clearButtonNode
-  ] }), $[83] = clearButtonNode, $[84] = presentationNode, $[85] = t23, $[86] = t24) : t24 = $[86];
-  let t25;
-  return $[87] !== prefixNode || $[88] !== rootTheme.tone || $[89] !== suffixNode || $[90] !== t24 ? (t25 = /* @__PURE__ */ jsxs(StyledTextInput, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
+  ] }), $[84] = clearButtonNode, $[85] = presentationNode, $[86] = t24, $[87] = t25) : t25 = $[87];
+  let t26;
+  return $[88] !== prefixNode || $[89] !== rootTheme.tone || $[90] !== suffixNode || $[91] !== t25 ? (t26 = /* @__PURE__ */ jsxs(StyledTextInput, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
-    t24,
+    t25,
     suffixNode
-  ] }), $[87] = prefixNode, $[88] = rootTheme.tone, $[89] = suffixNode, $[90] = t24, $[91] = t25) : t25 = $[91], t25;
+  ] }), $[88] = prefixNode, $[89] = rootTheme.tone, $[90] = suffixNode, $[91] = t25, $[92] = t26) : t26 = $[92], t26;
 });
 TextInput.displayName = "ForwardRef(TextInput)";
 function _temp$2(event) {
@@ -5094,34 +5119,35 @@ const StyledHotkeys = styled.kbd.withConfig({
   displayName: "Key",
   componentId: "sc-b37mge-1"
 })`&:not([hidden]){display:block;}`, Hotkeys = forwardRef(function(props, ref) {
-  const $ = c(26);
-  let fontSize2, keys, padding, radius, restProps, t0;
+  const $ = c(27);
+  let fontSize2, gap, keys, padding, radius, restProps, t0;
   $[0] !== props ? ({
     fontSize: fontSize2,
+    gap,
     keys,
     padding,
     radius,
     space: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = fontSize2, $[2] = keys, $[3] = padding, $[4] = radius, $[5] = restProps, $[6] = t0) : (fontSize2 = $[1], keys = $[2], padding = $[3], radius = $[4], restProps = $[5], t0 = $[6]);
-  const spaceProp = t0 === void 0 ? 0.5 : t0;
-  let t1;
-  $[7] !== spaceProp ? (t1 = _getArrayProp(spaceProp), $[7] = spaceProp, $[8] = t1) : t1 = $[8];
-  const space = t1;
-  if (!keys || keys.length === 0) {
-    let t22;
-    return $[9] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx(Fragment, {}), $[9] = t22) : t22 = $[9], t22;
-  }
+  } = props, $[0] = props, $[1] = fontSize2, $[2] = gap, $[3] = keys, $[4] = padding, $[5] = radius, $[6] = restProps, $[7] = t0) : (fontSize2 = $[1], gap = $[2], keys = $[3], padding = $[4], radius = $[5], restProps = $[6], t0 = $[7]);
+  const t1 = gap === void 0 ? t0 === void 0 ? 0.5 : t0 : gap;
   let t2;
-  if ($[10] !== fontSize2 || $[11] !== keys || $[12] !== padding || $[13] !== radius) {
+  $[8] !== t1 ? (t2 = _getArrayProp(t1), $[8] = t1, $[9] = t2) : t2 = $[9];
+  const spacing = t2;
+  if (!keys || keys.length === 0) {
     let t32;
-    $[15] !== fontSize2 || $[16] !== padding || $[17] !== radius ? (t32 = (key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[15] = fontSize2, $[16] = padding, $[17] = radius, $[18] = t32) : t32 = $[18], t2 = keys.map(t32), $[10] = fontSize2, $[11] = keys, $[12] = padding, $[13] = radius, $[14] = t2;
-  } else
-    t2 = $[14];
+    return $[10] === Symbol.for("react.memo_cache_sentinel") ? (t32 = /* @__PURE__ */ jsx(Fragment, {}), $[10] = t32) : t32 = $[10], t32;
+  }
   let t3;
-  $[19] !== space || $[20] !== t2 ? (t3 = /* @__PURE__ */ jsx(Inline, { as: "span", space, children: t2 }), $[19] = space, $[20] = t2, $[21] = t3) : t3 = $[21];
+  if ($[11] !== fontSize2 || $[12] !== keys || $[13] !== padding || $[14] !== radius) {
+    let t42;
+    $[16] !== fontSize2 || $[17] !== padding || $[18] !== radius ? (t42 = (key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[16] = fontSize2, $[17] = padding, $[18] = radius, $[19] = t42) : t42 = $[19], t3 = keys.map(t42), $[11] = fontSize2, $[12] = keys, $[13] = padding, $[14] = radius, $[15] = t3;
+  } else
+    t3 = $[15];
   let t4;
-  return $[22] !== ref || $[23] !== restProps || $[24] !== t3 ? (t4 = /* @__PURE__ */ jsx(StyledHotkeys, { "data-ui": "Hotkeys", ...restProps, ref, children: t3 }), $[22] = ref, $[23] = restProps, $[24] = t3, $[25] = t4) : t4 = $[25], t4;
+  $[20] !== spacing || $[21] !== t3 ? (t4 = /* @__PURE__ */ jsx(Inline, { as: "span", gap: spacing, children: t3 }), $[20] = spacing, $[21] = t3, $[22] = t4) : t4 = $[22];
+  let t5;
+  return $[23] !== ref || $[24] !== restProps || $[25] !== t4 ? (t5 = /* @__PURE__ */ jsx(StyledHotkeys, { "data-ui": "Hotkeys", ...restProps, ref, children: t4 }), $[23] = ref, $[24] = restProps, $[25] = t4, $[26] = t5) : t5 = $[26], t5;
 });
 Hotkeys.displayName = "ForwardRef(Hotkeys)";
 const MenuContext = createGlobalScopedContext("@sanity/ui/context/menu", null);
@@ -5294,8 +5320,8 @@ const StyledMenu = styled(Box).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-xt0tnv-0"
 })`outline:none;overflow:auto;`, Menu = forwardRef(function(props, forwardedRef) {
-  const $ = c(49);
-  let _shouldFocus, children, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
+  const $ = c(50);
+  let _shouldFocus, children, gap, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
   if ($[0] !== props) {
     const {
       children: t22,
@@ -5310,25 +5336,26 @@ const StyledMenu = styled(Box).withConfig({
       padding: t92,
       registerElement: t102,
       shouldFocus: t112,
-      space: t122,
-      ...t13
+      gap: t122,
+      space: t13,
+      ...t14
     } = props;
-    children = t22, onClickOutside = t32, onEscape = t42, onItemClick = t52, onItemSelect = t62, onKeyDown = t72, originElement = t82, t0 = t92, registerElement = t102, _shouldFocus = t112, t1 = t122, restProps = t13, $[0] = props, $[1] = _shouldFocus, $[2] = children, $[3] = onClickOutside, $[4] = onEscape, $[5] = onItemClick, $[6] = onItemSelect, $[7] = onKeyDown, $[8] = originElement, $[9] = registerElement, $[10] = restProps, $[11] = t0, $[12] = t1;
+    children = t22, onClickOutside = t32, onEscape = t42, onItemClick = t52, onItemSelect = t62, onKeyDown = t72, originElement = t82, t0 = t92, registerElement = t102, _shouldFocus = t112, gap = t122, t1 = t13, restProps = t14, $[0] = props, $[1] = _shouldFocus, $[2] = children, $[3] = gap, $[4] = onClickOutside, $[5] = onEscape, $[6] = onItemClick, $[7] = onItemSelect, $[8] = onKeyDown, $[9] = originElement, $[10] = registerElement, $[11] = restProps, $[12] = t0, $[13] = t1;
   } else
-    _shouldFocus = $[1], children = $[2], onClickOutside = $[3], onEscape = $[4], onItemClick = $[5], onItemSelect = $[6], onKeyDown = $[7], originElement = $[8], registerElement = $[9], restProps = $[10], t0 = $[11], t1 = $[12];
-  const padding = t0 === void 0 ? 1 : t0, space = t1 === void 0 ? 1 : t1, shouldFocus = _shouldFocus ?? (props.focusFirst && "first" || props.focusLast && "last" || null), ref = useRef(null);
+    _shouldFocus = $[1], children = $[2], gap = $[3], onClickOutside = $[4], onEscape = $[5], onItemClick = $[6], onItemSelect = $[7], onKeyDown = $[8], originElement = $[9], registerElement = $[10], restProps = $[11], t0 = $[12], t1 = $[13];
+  const padding = t0 === void 0 ? 1 : t0, spacing = gap === void 0 ? t1 === void 0 ? 1 : t1 : gap, shouldFocus = _shouldFocus ?? (props.focusFirst && "first" || props.focusLast && "last" || null), ref = useRef(null);
   let t2;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[13] = t2) : t2 = $[13], useImperativeHandle(forwardedRef, t2);
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[14] = t2) : t2 = $[14], useImperativeHandle(forwardedRef, t2);
   const {
     isTopLayer
   } = useLayer();
   let t3;
-  $[14] !== onKeyDown || $[15] !== originElement || $[16] !== shouldFocus ? (t3 = {
+  $[15] !== onKeyDown || $[16] !== originElement || $[17] !== shouldFocus ? (t3 = {
     onKeyDown,
     originElement,
     shouldFocus,
     rootElementRef: ref
-  }, $[14] = onKeyDown, $[15] = originElement, $[16] = shouldFocus, $[17] = t3) : t3 = $[17];
+  }, $[15] = onKeyDown, $[16] = originElement, $[17] = shouldFocus, $[18] = t3) : t3 = $[18];
   const {
     activeElement,
     activeIndex,
@@ -5338,22 +5365,22 @@ const StyledMenu = styled(Box).withConfig({
     mount
   } = useMenuController(t3), unregisterElementRef = useRef(null);
   let t4;
-  $[18] !== registerElement ? (t4 = (el) => {
+  $[19] !== registerElement ? (t4 = (el) => {
     unregisterElementRef.current && (unregisterElementRef.current(), unregisterElementRef.current = null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
-  }, $[18] = registerElement, $[19] = t4) : t4 = $[19];
+  }, $[19] = registerElement, $[20] = t4) : t4 = $[20];
   const handleRefChange = t4;
   let t5, t6;
-  $[20] !== activeIndex || $[21] !== onItemSelect ? (t5 = () => {
+  $[21] !== activeIndex || $[22] !== onItemSelect ? (t5 = () => {
     onItemSelect && onItemSelect(activeIndex);
-  }, t6 = [activeIndex, onItemSelect], $[20] = activeIndex, $[21] = onItemSelect, $[22] = t5, $[23] = t6) : (t5 = $[22], t6 = $[23]), useEffect(t5, t6);
+  }, t6 = [activeIndex, onItemSelect], $[21] = activeIndex, $[22] = onItemSelect, $[23] = t5, $[24] = t6) : (t5 = $[23], t6 = $[24]), useEffect(t5, t6);
   let t7;
-  $[24] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => [ref.current], $[24] = t7) : t7 = $[24], useClickOutsideEvent(isTopLayer && onClickOutside, t7);
+  $[25] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => [ref.current], $[25] = t7) : t7 = $[25], useClickOutsideEvent(isTopLayer && onClickOutside, t7);
   let t8;
-  $[25] !== isTopLayer || $[26] !== onEscape ? (t8 = (event) => {
+  $[26] !== isTopLayer || $[27] !== onEscape ? (t8 = (event) => {
     isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
-  }, $[25] = isTopLayer, $[26] = onEscape, $[27] = t8) : t8 = $[27], useGlobalKeyDown(t8);
+  }, $[26] = isTopLayer, $[27] = onEscape, $[28] = t8) : t8 = $[28], useGlobalKeyDown(t8);
   let t9;
-  $[28] !== activeElement || $[29] !== handleItemMouseEnter || $[30] !== handleItemMouseLeave || $[31] !== mount || $[32] !== onClickOutside || $[33] !== onEscape || $[34] !== onItemClick || $[35] !== registerElement ? (t9 = {
+  $[29] !== activeElement || $[30] !== handleItemMouseEnter || $[31] !== handleItemMouseLeave || $[32] !== mount || $[33] !== onClickOutside || $[34] !== onEscape || $[35] !== onItemClick || $[36] !== registerElement ? (t9 = {
     version: 2,
     activeElement,
     mount,
@@ -5363,21 +5390,22 @@ const StyledMenu = styled(Box).withConfig({
     onItemMouseEnter: handleItemMouseEnter,
     onItemMouseLeave: handleItemMouseLeave,
     registerElement
-  }, $[28] = activeElement, $[29] = handleItemMouseEnter, $[30] = handleItemMouseLeave, $[31] = mount, $[32] = onClickOutside, $[33] = onEscape, $[34] = onItemClick, $[35] = registerElement, $[36] = t9) : t9 = $[36];
+  }, $[29] = activeElement, $[30] = handleItemMouseEnter, $[31] = handleItemMouseLeave, $[32] = mount, $[33] = onClickOutside, $[34] = onEscape, $[35] = onItemClick, $[36] = registerElement, $[37] = t9) : t9 = $[37];
   const value = t9;
   let t10;
-  $[37] !== children || $[38] !== space ? (t10 = /* @__PURE__ */ jsx(Stack, { space, children }), $[37] = children, $[38] = space, $[39] = t10) : t10 = $[39];
+  $[38] !== children || $[39] !== spacing ? (t10 = /* @__PURE__ */ jsx(Stack, { gap: spacing, children }), $[38] = children, $[39] = spacing, $[40] = t10) : t10 = $[40];
   let t11;
-  $[40] !== handleKeyDown || $[41] !== handleRefChange || $[42] !== padding || $[43] !== restProps || $[44] !== t10 ? (t11 = /* @__PURE__ */ jsx(StyledMenu, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t10 }), $[40] = handleKeyDown, $[41] = handleRefChange, $[42] = padding, $[43] = restProps, $[44] = t10, $[45] = t11) : t11 = $[45];
+  $[41] !== handleKeyDown || $[42] !== handleRefChange || $[43] !== padding || $[44] !== restProps || $[45] !== t10 ? (t11 = /* @__PURE__ */ jsx(StyledMenu, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t10 }), $[41] = handleKeyDown, $[42] = handleRefChange, $[43] = padding, $[44] = restProps, $[45] = t10, $[46] = t11) : t11 = $[46];
   let t12;
-  return $[46] !== t11 || $[47] !== value ? (t12 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t11 }), $[46] = t11, $[47] = value, $[48] = t12) : t12 = $[48], t12;
+  return $[47] !== t11 || $[48] !== value ? (t12 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t11 }), $[47] = t11, $[48] = value, $[49] = t12) : t12 = $[49], t12;
 });
 Menu.displayName = "ForwardRef(Menu)";
-const MenuDivider = styled.hr.withConfig({
-  displayName: "MenuDivider",
+const StyledMenuDivider = 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 css`
     background-color: inherit;
@@ -5491,9 +5519,9 @@ function useMenu() {
     throw new Error("useMenu(): the context value is not compatible");
   return value;
 }
-function MenuGroup(props) {
-  const $ = c(81);
-  let IconComponent, children, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
+function MenuGroupComponent(props) {
+  const $ = c(82);
+  let IconComponent, children, gap, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
     as: t0,
     children,
@@ -5504,12 +5532,13 @@ function MenuGroup(props) {
     padding: t2,
     popover,
     radius: t3,
+    gap,
     space: t4,
     text,
     tone: t5,
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = menuProps, $[4] = onClick, $[5] = popover, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5, $[13] = text) : (IconComponent = $[1], children = $[2], menuProps = $[3], onClick = $[4], popover = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12], text = $[13]);
-  const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, menu = useMenu(), {
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = gap, $[4] = menuProps, $[5] = onClick, $[6] = popover, $[7] = restProps, $[8] = t0, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5, $[14] = text) : (IconComponent = $[1], children = $[2], gap = $[3], menuProps = $[4], onClick = $[5], popover = $[6], restProps = $[7], t0 = $[8], t1 = $[9], t2 = $[10], t3 = $[11], t4 = $[12], t5 = $[13], text = $[14]);
+  const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, deprecated_space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, spacing = gap === void 0 ? deprecated_space : gap, menu = useMenu(), {
     scheme
   } = useRootTheme(), {
     activeElement,
@@ -5521,88 +5550,88 @@ function MenuGroup(props) {
     registerElement
   } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1);
   let t6;
-  $[14] !== onItemMouseEnter ? (t6 = (event) => {
+  $[15] !== onItemMouseEnter ? (t6 = (event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
-  }, $[14] = onItemMouseEnter, $[15] = t6) : t6 = $[15];
+  }, $[15] = onItemMouseEnter, $[16] = t6) : t6 = $[16];
   const handleMouseEnter = t6;
   let t7;
-  $[16] !== rootElement ? (t7 = (event_0) => {
+  $[17] !== rootElement ? (t7 = (event_0) => {
     event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
       rootElement?.focus();
     }));
-  }, $[16] = rootElement, $[17] = t7) : t7 = $[17];
+  }, $[17] = rootElement, $[18] = t7) : t7 = $[18];
   const handleMenuKeyDown = t7;
   let t8;
-  $[18] !== onClick ? (t8 = (event_1) => {
+  $[19] !== onClick ? (t8 = (event_1) => {
     onClick?.(event_1), setShouldFocus("first"), setOpen(!0);
-  }, $[18] = onClick, $[19] = t8) : t8 = $[19];
+  }, $[19] = onClick, $[20] = t8) : t8 = $[20];
   const handleClick = t8;
   let t9;
-  $[20] !== onItemClick ? (t9 = () => {
+  $[21] !== onItemClick ? (t9 = () => {
     setOpen(!1), onItemClick?.();
-  }, $[20] = onItemClick, $[21] = t9) : t9 = $[21];
+  }, $[21] = onItemClick, $[22] = t9) : t9 = $[22];
   const handleChildItemClick = t9;
   let t10;
-  $[22] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[22] = t10) : t10 = $[22];
+  $[23] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[23] = t10) : t10 = $[23];
   const handleMenuMouseEnter = t10;
   let t11, t12;
-  $[23] !== mount || $[24] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[23] = mount, $[24] = rootElement, $[25] = t11, $[26] = t12) : (t11 = $[25], t12 = $[26]), useEffect(t11, t12);
+  $[24] !== mount || $[25] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[24] = mount, $[25] = rootElement, $[26] = t11, $[27] = t12) : (t11 = $[26], t12 = $[27]), useEffect(t11, t12);
   let t13, t14;
-  $[27] !== active ? (t13 = () => {
+  $[28] !== active ? (t13 = () => {
     active || setOpen(!1);
-  }, t14 = [active], $[27] = active, $[28] = t13, $[29] = t14) : (t13 = $[28], t14 = $[29]), useEffect(t13, t14);
+  }, t14 = [active], $[28] = active, $[29] = t13, $[30] = t14) : (t13 = $[29], t14 = $[30]), useEffect(t13, t14);
   let t15, t16;
-  $[30] !== open ? (t15 = () => {
+  $[31] !== open ? (t15 = () => {
     open || setWithinMenu(!1);
-  }, t16 = [open], $[30] = open, $[31] = t15, $[32] = t16) : (t15 = $[31], t16 = $[32]), useEffect(t15, t16);
+  }, t16 = [open], $[31] = open, $[32] = t15, $[33] = t16) : (t15 = $[32], t16 = $[33]), useEffect(t15, t16);
   let t17, t18;
-  $[33] !== shouldFocus ? (t17 = () => {
+  $[34] !== shouldFocus ? (t17 = () => {
     if (!shouldFocus)
       return;
     const rafId = requestAnimationFrame(() => setShouldFocus(null));
     return () => cancelAnimationFrame(rafId);
-  }, t18 = [shouldFocus], $[33] = shouldFocus, $[34] = t17, $[35] = t18) : (t17 = $[34], t18 = $[35]), useEffect(t17, t18);
+  }, t18 = [shouldFocus], $[34] = shouldFocus, $[35] = t17, $[36] = t18) : (t17 = $[35], t18 = $[36]), useEffect(t17, t18);
   let t19;
-  $[36] !== children || $[37] !== handleChildItemClick || $[38] !== handleMenuKeyDown || $[39] !== menuProps || $[40] !== onClickOutside || $[41] !== onEscape || $[42] !== registerElement || $[43] !== shouldFocus ? (t19 = /* @__PURE__ */ jsx(Menu, { ...menuProps, onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[36] = children, $[37] = handleChildItemClick, $[38] = handleMenuKeyDown, $[39] = menuProps, $[40] = onClickOutside, $[41] = onEscape, $[42] = registerElement, $[43] = shouldFocus, $[44] = t19) : t19 = $[44];
+  $[37] !== children || $[38] !== handleChildItemClick || $[39] !== handleMenuKeyDown || $[40] !== menuProps || $[41] !== onClickOutside || $[42] !== onEscape || $[43] !== registerElement || $[44] !== shouldFocus ? (t19 = /* @__PURE__ */ jsx(Menu, { ...menuProps, onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[37] = children, $[38] = handleChildItemClick, $[39] = handleMenuKeyDown, $[40] = menuProps, $[41] = onClickOutside, $[42] = onEscape, $[43] = registerElement, $[44] = shouldFocus, $[45] = t19) : t19 = $[45];
   const childMenu = t19;
   let t20;
-  $[45] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
+  $[46] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
     const target = event_2.currentTarget;
     if (document.activeElement === target && event_2.key === "ArrowRight") {
       setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
       return;
     }
-  }, $[45] = t20) : t20 = $[45];
+  }, $[46] = t20) : t20 = $[46];
   const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0;
   let t24;
-  $[46] !== radius ? (t24 = _getArrayProp(radius), $[46] = radius, $[47] = t24) : t24 = $[47];
+  $[47] !== radius ? (t24 = _getArrayProp(radius), $[47] = radius, $[48] = t24) : t24 = $[48];
   const t25 = as === "button" ? "button" : void 0;
   let t26;
-  $[48] !== IconComponent || $[49] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+  $[49] !== IconComponent || $[50] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
     isValidElement(IconComponent) && IconComponent,
     isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-  ] }), $[48] = IconComponent, $[49] = fontSize2, $[50] = t26) : t26 = $[50];
+  ] }), $[49] = IconComponent, $[50] = fontSize2, $[51] = t26) : t26 = $[51];
   let t27;
-  $[51] !== fontSize2 || $[52] !== text ? (t27 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[51] = fontSize2, $[52] = text, $[53] = t27) : t27 = $[53];
+  $[52] !== fontSize2 || $[53] !== text ? (t27 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[52] = fontSize2, $[53] = text, $[54] = t27) : t27 = $[54];
   let t28;
-  $[54] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsx(ChevronRightIcon, {}), $[54] = t28) : t28 = $[54];
+  $[55] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsx(ChevronRightIcon, {}), $[55] = t28) : t28 = $[55];
   let t29;
-  $[55] !== fontSize2 ? (t29 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t28 }), $[55] = fontSize2, $[56] = t29) : t29 = $[56];
+  $[56] !== fontSize2 ? (t29 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t28 }), $[56] = fontSize2, $[57] = t29) : t29 = $[57];
   let t30;
-  $[57] !== padding || $[58] !== space || $[59] !== t26 || $[60] !== t27 || $[61] !== t29 ? (t30 = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
+  $[58] !== padding || $[59] !== spacing || $[60] !== t26 || $[61] !== t27 || $[62] !== t29 ? (t30 = /* @__PURE__ */ jsxs(Flex, { gap: spacing, padding, children: [
     t26,
     t27,
     t29
-  ] }), $[57] = padding, $[58] = space, $[59] = t26, $[60] = t27, $[61] = t29, $[62] = t30) : t30 = $[62];
+  ] }), $[58] = padding, $[59] = spacing, $[60] = t26, $[61] = t27, $[62] = t29, $[63] = t30) : t30 = $[63];
   let t31;
-  $[63] !== as || $[64] !== handleClick || $[65] !== handleMouseEnter || $[66] !== restProps || $[67] !== scheme || $[68] !== t21 || $[69] !== t22 || $[70] !== t23 || $[71] !== t24 || $[72] !== t25 || $[73] !== t30 || $[74] !== tone ? (t31 = /* @__PURE__ */ jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[63] = as, $[64] = handleClick, $[65] = handleMouseEnter, $[66] = restProps, $[67] = scheme, $[68] = t21, $[69] = t22, $[70] = t23, $[71] = t24, $[72] = t25, $[73] = t30, $[74] = tone, $[75] = t31) : t31 = $[75];
+  $[64] !== as || $[65] !== handleClick || $[66] !== handleMouseEnter || $[67] !== restProps || $[68] !== scheme || $[69] !== t21 || $[70] !== t22 || $[71] !== t23 || $[72] !== t24 || $[73] !== t25 || $[74] !== t30 || $[75] !== tone ? (t31 = /* @__PURE__ */ jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[64] = as, $[65] = handleClick, $[66] = handleMouseEnter, $[67] = restProps, $[68] = scheme, $[69] = t21, $[70] = t22, $[71] = t23, $[72] = t24, $[73] = t25, $[74] = t30, $[75] = tone, $[76] = t31) : t31 = $[76];
   let t32;
-  return $[76] !== childMenu || $[77] !== open || $[78] !== popover || $[79] !== t31 ? (t32 = /* @__PURE__ */ jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[76] = childMenu, $[77] = open, $[78] = popover, $[79] = t31, $[80] = t32) : t32 = $[80], t32;
+  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;
 }
-MenuGroup.displayName = "MenuGroup";
-const MenuItem = forwardRef(function(props, forwardedRef) {
-  const $ = c(75);
-  let IconComponent, IconRightComponent, children, disabled, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, restProps, selectedProp, t0, t1, t2, t3, t4, t5, text;
+MenuGroupComponent.displayName = "MenuGroup";
+const MenuGroup = MenuGroupComponent, MenuItemComponent = forwardRef(function(props, forwardedRef) {
+  const $ = 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 ? ({
     as: t0,
     children,
@@ -5622,12 +5651,13 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     pressed,
     radius: t3,
     selected: selectedProp,
+    gap,
     space: t4,
     text,
     tone: t5,
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = hotkeys, $[6] = onClick, $[7] = paddingBottom, $[8] = paddingLeft, $[9] = paddingRight, $[10] = paddingTop, $[11] = paddingX, $[12] = paddingY, $[13] = pressed, $[14] = restProps, $[15] = selectedProp, $[16] = t0, $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = text) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], hotkeys = $[5], onClick = $[6], paddingBottom = $[7], paddingLeft = $[8], paddingRight = $[9], paddingTop = $[10], paddingX = $[11], paddingY = $[12], pressed = $[13], restProps = $[14], selectedProp = $[15], t0 = $[16], t1 = $[17], t2 = $[18], t3 = $[19], t4 = $[20], t5 = $[21], text = $[22]);
-  const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, {
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = gap, $[6] = hotkeys, $[7] = onClick, $[8] = paddingBottom, $[9] = paddingLeft, $[10] = paddingRight, $[11] = paddingTop, $[12] = paddingX, $[13] = paddingY, $[14] = pressed, $[15] = restProps, $[16] = selectedProp, $[17] = t0, $[18] = t1, $[19] = t2, $[20] = t3, $[21] = t4, $[22] = t5, $[23] = text) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], gap = $[5], hotkeys = $[6], onClick = $[7], paddingBottom = $[8], paddingLeft = $[9], paddingRight = $[10], paddingTop = $[11], paddingX = $[12], paddingY = $[13], pressed = $[14], restProps = $[15], selectedProp = $[16], t0 = $[17], t1 = $[18], t2 = $[19], t3 = $[20], t4 = $[21], t5 = $[22], text = $[23]);
+  const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, deprecated_space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, spacing = gap === void 0 ? deprecated_space : gap, {
     scheme
   } = useRootTheme(), menu = useMenu(), {
     activeElement,
@@ -5637,16 +5667,16 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     onItemMouseLeave: _onItemMouseLeave
   } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave, [rootElement, setRootElement] = useState(null), active = !!activeElement && activeElement === rootElement, ref = useRef(null);
   let t6;
-  $[23] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[23] = t6) : t6 = $[23], useImperativeHandle(forwardedRef, t6);
+  $[24] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[24] = t6) : t6 = $[24], useImperativeHandle(forwardedRef, t6);
   let t7, t8;
-  $[24] !== mount || $[25] !== rootElement || $[26] !== selectedProp ? (t7 = () => mount(rootElement, selectedProp), t8 = [mount, rootElement, selectedProp], $[24] = mount, $[25] = rootElement, $[26] = selectedProp, $[27] = t7, $[28] = t8) : (t7 = $[27], t8 = $[28]), useEffect(t7, t8);
+  $[25] !== mount || $[26] !== rootElement || $[27] !== selectedProp ? (t7 = () => mount(rootElement, selectedProp), t8 = [mount, rootElement, selectedProp], $[25] = mount, $[26] = rootElement, $[27] = selectedProp, $[28] = t7, $[29] = t8) : (t7 = $[28], t8 = $[29]), useEffect(t7, t8);
   let t9;
-  $[29] !== disabled || $[30] !== onClick || $[31] !== onItemClick ? (t9 = (event) => {
+  $[30] !== disabled || $[31] !== onClick || $[32] !== onItemClick ? (t9 = (event) => {
     disabled || (onClick && onClick(event), onItemClick && onItemClick());
-  }, $[29] = disabled, $[30] = onClick, $[31] = onItemClick, $[32] = t9) : t9 = $[32];
+  }, $[30] = disabled, $[31] = onClick, $[32] = onItemClick, $[33] = t9) : t9 = $[33];
   const handleClick = t9;
   let t10;
-  $[33] !== padding || $[34] !== paddingBottom || $[35] !== paddingLeft || $[36] !== paddingRight || $[37] !== paddingTop || $[38] !== paddingX || $[39] !== paddingY ? (t10 = {
+  $[34] !== padding || $[35] !== paddingBottom || $[36] !== paddingLeft || $[37] !== paddingRight || $[38] !== paddingTop || $[39] !== paddingX || $[40] !== paddingY ? (t10 = {
     padding,
     paddingX,
     paddingY,
@@ -5654,23 +5684,23 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     paddingRight,
     paddingBottom,
     paddingLeft
-  }, $[33] = padding, $[34] = paddingBottom, $[35] = paddingLeft, $[36] = paddingRight, $[37] = paddingTop, $[38] = paddingX, $[39] = paddingY, $[40] = t10) : t10 = $[40];
+  }, $[34] = padding, $[35] = paddingBottom, $[36] = paddingLeft, $[37] = paddingRight, $[38] = paddingTop, $[39] = paddingX, $[40] = paddingY, $[41] = t10) : t10 = $[41];
   const paddingProps = t10;
   let t11;
-  $[41] !== fontSize2 ? (t11 = _getArrayProp(fontSize2).map(_temp), $[41] = fontSize2, $[42] = t11) : t11 = $[42];
+  $[42] !== fontSize2 ? (t11 = _getArrayProp(fontSize2).map(_temp), $[42] = fontSize2, $[43] = t11) : t11 = $[43];
   const hotkeysFontSize = t11;
   let t12;
-  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (el) => {
+  $[44] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (el) => {
     ref.current = el, setRootElement(el);
-  }, $[43] = t12) : t12 = $[43];
+  }, $[44] = t12) : t12 = $[44];
   const setRef = t12, t13 = as !== "button" && pressed ? "" : void 0, t14 = active ? "" : void 0, t15 = disabled ? "" : void 0;
   let t16;
-  $[44] !== radius ? (t16 = _getArrayProp(radius), $[44] = radius, $[45] = t16) : t16 = $[45];
+  $[45] !== radius ? (t16 = _getArrayProp(radius), $[45] = radius, $[46] = t16) : t16 = $[46];
   let t17;
-  $[46] === Symbol.for("react.memo_cache_sentinel") ? (t17 = _getArrayProp(0), $[46] = t17) : t17 = $[46];
+  $[47] === Symbol.for("react.memo_cache_sentinel") ? (t17 = _getArrayProp(0), $[47] = t17) : t17 = $[47];
   const t18 = disabled ? "default" : tone, t19 = as === "button" ? "button" : void 0;
   let t20;
-  $[47] !== IconComponent || $[48] !== IconRightComponent || $[49] !== fontSize2 || $[50] !== hotkeys || $[51] !== hotkeysFontSize || $[52] !== paddingProps || $[53] !== space || $[54] !== text ? (t20 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+  $[48] !== IconComponent || $[49] !== IconRightComponent || $[50] !== fontSize2 || $[51] !== hotkeys || $[52] !== hotkeysFontSize || $[53] !== paddingProps || $[54] !== spacing || $[55] !== text ? (t20 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: spacing, align: "center", ...paddingProps, children: [
     IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
       isValidElement(IconComponent) && IconComponent,
       isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
@@ -5684,16 +5714,17 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       isValidElement(IconRightComponent) && IconRightComponent,
       isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
     ] })
-  ] }), $[47] = IconComponent, $[48] = IconRightComponent, $[49] = fontSize2, $[50] = hotkeys, $[51] = hotkeysFontSize, $[52] = paddingProps, $[53] = space, $[54] = text, $[55] = t20) : t20 = $[55];
+  ] }), $[48] = IconComponent, $[49] = IconRightComponent, $[50] = fontSize2, $[51] = hotkeys, $[52] = hotkeysFontSize, $[53] = paddingProps, $[54] = spacing, $[55] = text, $[56] = t20) : t20 = $[56];
   let t21;
-  $[56] !== children || $[57] !== paddingProps ? (t21 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children }), $[56] = children, $[57] = paddingProps, $[58] = t21) : t21 = $[58];
+  $[57] !== children || $[58] !== paddingProps ? (t21 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children }), $[57] = children, $[58] = paddingProps, $[59] = t21) : t21 = $[59];
   let t22;
-  return $[59] !== as || $[60] !== disabled || $[61] !== handleClick || $[62] !== onItemMouseEnter || $[63] !== onItemMouseLeave || $[64] !== restProps || $[65] !== scheme || $[66] !== t13 || $[67] !== t14 || $[68] !== t15 || $[69] !== t16 || $[70] !== t18 || $[71] !== t19 || $[72] !== t20 || $[73] !== t21 ? (t22 = /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", role: "menuitem", ...restProps, "data-pressed": t13, "data-selected": t14, "data-disabled": t15, forwardedAs: as, $radius: t16, $padding: t17, $tone: t18, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, tabIndex: -1, type: t19, children: [
+  return $[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 ? (t22 = /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", role: "menuitem", ...restProps, "data-pressed": t13, "data-selected": t14, "data-disabled": t15, forwardedAs: as, $radius: t16, $padding: t17, $tone: t18, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, tabIndex: -1, type: t19, children: [
     t20,
     t21
-  ] }), $[59] = as, $[60] = disabled, $[61] = handleClick, $[62] = onItemMouseEnter, $[63] = onItemMouseLeave, $[64] = restProps, $[65] = scheme, $[66] = t13, $[67] = t14, $[68] = t15, $[69] = t16, $[70] = t18, $[71] = t19, $[72] = t20, $[73] = t21, $[74] = t22) : t22 = $[74], t22;
+  ] }), $[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;
 }