@sanity/ui 1.0.11 → 1.0.13

package/dist/index.esm.js

@@ -1,63 +1,5 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77, _templateObject78, _templateObject79, _templateObject80, _templateObject81, _templateObject82, _templateObject83, _templateObject84, _templateObject85, _templateObject86, _templateObject87, _templateObject88, _templateObject89, _templateObject90;
-const _excluded = ["color", "layer"],
-  _excluded2 = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"],
-  _excluded3 = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"],
-  _excluded4 = ["children", "maxLength", "size"],
-  _excluded5 = ["as", "column", "columnStart", "columnEnd", "display", "flex", "height", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "overflow", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "row", "rowStart", "rowEnd", "sizing"],
-  _excluded6 = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"],
-  _excluded7 = ["children", "fontSize", "mode", "padding", "radius", "tone"],
-  _excluded8 = ["align", "as", "direction", "gap", "justify", "wrap"],
-  _excluded9 = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"],
-  _excluded10 = ["__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "pressed", "radius", "scheme", "selected", "shadow", "tone"],
-  _excluded11 = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"],
-  _excluded12 = ["children", "language", "size", "weight"],
-  _excluded13 = ["as", "width"],
-  _excluded14 = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"],
-  _excluded15 = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"],
-  _excluded16 = ["as", "children", "space"],
-  _excluded17 = ["children", "fontSize", "padding", "radius"],
-  _excluded18 = ["children", "media"],
-  _excluded19 = ["children", "style"],
-  _excluded20 = ["children", "zOffset"],
-  _excluded21 = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"],
-  _excluded22 = ["__unstable_margins", "arrow", "arrowRef", "arrowX", "arrowY", "boundaryWidth", "children", "padding", "placement", "overflow", "radius", "scheme", "shadow", "strategy", "style", "tone", "width", "x", "y"],
-  _excluded23 = ["__unstable_margins", "arrow", "boundaryElement", "children", "constrainSize", "content", "disabled", "fallbackPlacements", "matchReferenceWidth", "open", "overflow", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "scheme", "shadow", "tone", "width", "zOffset"],
-  _excluded24 = ["className", "disabled", "style", "customValidity", "readOnly"],
-  _excluded25 = ["children", "customValidity", "disabled", "fontSize", "padding", "radius", "readOnly", "space"],
-  _excluded26 = ["as", "space"],
-  _excluded27 = ["checked", "className", "disabled", "indeterminate", "readOnly", "style"],
-  _excluded28 = ["border", "customValidity", "disabled", "fontSize", "padding", "radius", "weight"],
-  _excluded29 = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type", "weight"],
-  _excluded30 = ["boundaryElement", "children", "content", "disabled", "fallbackPlacements", "padding", "placement", "portal", "scheme", "shadow", "zOffset"],
-  _excluded31 = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "suffix", "value"],
-  _excluded32 = ["children", "maxLength", "separator", "space"],
-  _excluded33 = ["__unstable_autoFocus", "__unstable_hideCloseButton", "cardRadius", "cardShadow", "children", "contentRef", "footer", "header", "id", "onClickOutside", "onClose", "padding", "portal", "position", "scheme", "width", "zOffset"],
-  _excluded34 = ["fontSize", "keys", "padding", "radius", "space"],
-  _excluded35 = ["children", "focusFirst", "focusLast", "onClickOutside", "onEscape", "onItemClick", "onItemSelect", "onKeyDown", "originElement", "padding", "registerElement", "shouldFocus", "space"],
-  _excluded36 = ["as", "children", "fontSize", "icon", "onClick", "padding", "popover", "radius", "space", "text", "tone"],
-  _excluded37 = ["as", "children", "disabled", "fontSize", "hotkeys", "icon", "iconRight", "onClick", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "pressed", "radius", "selected", "space", "text", "tone"],
-  _excluded38 = ["animated", "delay", "radius"],
-  _excluded39 = ["size"],
-  _excluded40 = ["size"],
-  _excluded41 = ["size"],
-  _excluded42 = ["size"],
-  _excluded43 = ["icon", "id", "focused", "fontSize", "label", "onClick", "onFocus", "padding", "selected"],
-  _excluded44 = ["children"],
-  _excluded45 = ["flex"],
-  _excluded46 = ["closable", "description", "onClose", "title", "status"],
-  _excluded47 = ["children", "space"],
-  _excluded48 = ["children", "expanded"],
-  _excluded49 = ["children", "expanded", "fontSize", "href", "icon", "id", "muted", "onClick", "padding", "selected", "space", "text", "weight"];
-function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
 import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
@@ -223,7 +165,10 @@ function responsiveTextFont(props) {
 }
 function useArrayProp(val, defaultVal) {
   const __perf_hash__ = useMemo(() => JSON.stringify(val != null ? val : defaultVal), [defaultVal, val]);
-  return useMemo(() => _getArrayProp(val, defaultVal), [__perf_hash__]);
+  return useMemo(() => _getArrayProp(val, defaultVal),
+  // Improve performance: Keep object identify for a given hash of the value
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [__perf_hash__]);
 }
 function _getElements(element, elementsArg) {
   const ret = [element];
@@ -1396,7 +1341,8 @@ const defaultOpts = {
       solid
     } = _ref7;
     if (mode === "bleed") {
-      return _objectSpread(_objectSpread({}, muted), {}, {
+      return {
+        ...muted,
         enabled: {
           bg: "transparent",
           bg2: "transparent",
@@ -1437,11 +1383,12 @@ const defaultOpts = {
           },
           skeleton: base.skeleton
         }
-      });
+      };
     }
-    if (mode === "ghost") return _objectSpread(_objectSpread({}, solid), {}, {
+    if (mode === "ghost") return {
+      ...solid,
       enabled: muted.enabled
-    });
+    };
     return solid;
   },
   card: _ref8 => {
@@ -2158,7 +2105,10 @@ function createSpot(opts, base, dark) {
 }
 function createColorTheme() {
   let partialOpts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const builders = _objectSpread(_objectSpread({}, defaultOpts), partialOpts);
+  const builders = {
+    ...defaultOpts,
+    ...partialOpts
+  };
   return {
     light: _createColorScheme(builders, false),
     dark: _createColorScheme(builders, true)
@@ -2596,30 +2546,37 @@ const color = createColorTheme({
     } = _ref14;
     if (mode === "bleed") {
       return {
-        enabled: _objectSpread(_objectSpread({}, muted.enabled), {}, {
+        enabled: {
+          ...muted.enabled,
           border: muted.enabled.bg
-        }),
-        hovered: _objectSpread(_objectSpread({}, muted.hovered), {}, {
+        },
+        hovered: {
+          ...muted.hovered,
           border: muted.hovered.bg
-        }),
-        pressed: _objectSpread(_objectSpread({}, muted.pressed), {}, {
+        },
+        pressed: {
+          ...muted.pressed,
           border: muted.pressed.bg
-        }),
-        selected: _objectSpread(_objectSpread({}, muted.selected), {}, {
+        },
+        selected: {
+          ...muted.selected,
           border: muted.selected.bg
-        }),
-        disabled: _objectSpread(_objectSpread({}, muted.disabled), {}, {
+        },
+        disabled: {
+          ...muted.disabled,
           border: muted.disabled.bg
-        })
+        }
       };
     }
     if (mode === "ghost") {
-      return _objectSpread(_objectSpread({}, solid), {}, {
-        enabled: _objectSpread(_objectSpread({}, muted.enabled), {}, {
+      return {
+        ...solid,
+        enabled: {
+          ...muted.enabled,
           border: base.border
-        }),
+        },
         disabled: muted.disabled
-      });
+      };
     }
     return solid;
   },
@@ -2736,9 +2693,10 @@ const color = createColorTheme({
       state
     } = _ref17;
     if (state === "enabled") {
-      return _objectSpread(_objectSpread({}, muted[tone].enabled), {}, {
+      return {
+        ...muted[tone].enabled,
         bg: base.bg
-      });
+      };
     }
     if (state === "pressed") {
       if (tone === "default") {
@@ -2753,9 +2711,10 @@ const color = createColorTheme({
       return solid[tone].enabled;
     }
     if (state === "disabled") {
-      return _objectSpread(_objectSpread({}, muted[tone].disabled), {}, {
+      return {
+        ...muted[tone].disabled,
         bg: base.bg
-      });
+      };
     }
     return muted[tone][state];
   },
@@ -3071,7 +3030,20 @@ const studioTheme = {
       width: 1
     }
   }
+  // styles: {
+  //   button: {
+  //     root: {
+  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
+  //     },
+  //   },
+  //   card: {
+  //     root: {
+  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
+  //     },
+  //   },
+  // },
 };
+
 const DEFAULT_THEME_LAYER = {
   dialog: {
     zOffset: 600
@@ -3105,18 +3077,19 @@ function ThemeProvider(props) {
   const theme = useMemo(() => {
     if (!themeProp) return null;
     const {
-        color: rootColor,
-        layer: rootLayer
-      } = themeProp,
-      restTheme = _objectWithoutProperties(themeProp, _excluded);
+      color: rootColor,
+      layer: rootLayer,
+      ...restTheme
+    } = themeProp;
     const colorScheme = rootColor[scheme] || rootColor.light;
     const color = colorScheme[tone] || colorScheme.default;
     const layer = rootLayer || DEFAULT_THEME_LAYER;
     return {
-      sanity: _objectSpread(_objectSpread({}, restTheme), {}, {
+      sanity: {
+        ...restTheme,
         color,
         layer
-      })
+      }
     };
   }, [scheme, themeProp, tone]);
   const value = useMemo(() => themeProp && {
@@ -3785,9 +3758,10 @@ function responsiveInputPaddingStyle(props) {
   });
 }
 function responsiveInputPaddingIconRightStyle(props) {
-  return responsiveInputPaddingStyle(_objectSpread(_objectSpread({}, props), {}, {
+  return responsiveInputPaddingStyle({
+    ...props,
     $iconRight: true
-  }));
+  });
 }
 const ROOT_STYLE = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
@@ -3917,24 +3891,24 @@ const Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBase
 const SpanWithTextOverflow$2 = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 const Text = forwardRef(function Text2(props, ref) {
   const {
-      accent = false,
-      align,
-      children: childrenProp,
-      muted = false,
-      size = 2,
-      textOverflow,
-      weight
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded2);
+    accent = false,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
     children = /* @__PURE__ */jsx(SpanWithTextOverflow$2, {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$E, _objectSpread(_objectSpread({
-    "data-ui": "Text"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$E, {
+    "data-ui": "Text",
+    ...restProps,
     $accent: accent,
     $align: useArrayProp(align),
     $muted: muted,
@@ -3944,7 +3918,7 @@ const Text = forwardRef(function Text2(props, ref) {
     children: /* @__PURE__ */jsx("span", {
       children
     })
-  }));
+  });
 });
 const avatarStyle = {
   root: avatarRootStyle,
@@ -4012,6 +3986,7 @@ function avatarRootStyle(props) {
         display: "block"
       }
     },
+    /* &:is(button) */
     '&[data-as="button"]': {
       "-webkit-font-smoothing": "inherit",
       appearance: "none",
@@ -4097,18 +4072,18 @@ const Stroke = styled.ellipse(avatarStyle.stroke);
 const Initials = styled.div(avatarStyle.initials);
 const Avatar = forwardRef(function Avatar2(props, ref) {
   const {
-      as: asProp,
-      color: colorKey = "gray",
-      src,
-      title,
-      initials,
-      onImageLoadError,
-      arrowPosition: arrowPositionProp,
-      animateArrowFrom,
-      status = "online",
-      size: sizeProp = 0
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded3);
+    as: asProp,
+    color: colorKey = "gray",
+    src,
+    title,
+    initials,
+    onImageLoadError,
+    arrowPosition: arrowPositionProp,
+    animateArrowFrom,
+    status = "online",
+    size: sizeProp = 0,
+    ...restProps
+  } = props;
   const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
   const size = useArrayProp(sizeProp);
   const theme = useTheme();
@@ -4135,11 +4110,11 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
     }
   }, [onImageLoadError]);
   const initialsSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
-  return /* @__PURE__ */jsxs(Root$D, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxs(Root$D, {
     as,
     "data-as": typeof as === "string" ? as : void 0,
-    "data-ui": "Avatar"
-  }, restProps), {}, {
+    "data-ui": "Avatar",
+    ...restProps,
     $size: size,
     $color: color,
     "aria-label": title,
@@ -4204,7 +4179,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
         })
       })
     })]
-  }));
+  });
 });
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
@@ -4280,11 +4255,11 @@ function responsiveAvatarStackSizeStyle(props) {
 const Root$B = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
 const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
   const {
-      children: childrenProp,
-      maxLength: maxLengthProp = 4,
-      size: sizeProp = 0
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded4);
+    children: childrenProp,
+    maxLength: maxLengthProp = 4,
+    size: sizeProp = 0,
+    ...restProps
+  } = props;
   const children = childrenToElementArray(childrenProp).filter(child => typeof child !== "string");
   const maxLength = Math.max(maxLengthProp, 0);
   const size = useArrayProp(sizeProp);
@@ -4292,9 +4267,9 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */jsxs(Root$B, _objectSpread(_objectSpread({
-    "data-ui": "AvatarStack"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsxs(Root$B, {
+    "data-ui": "AvatarStack",
+    ...restProps,
     ref,
     $size: size,
     children: [len === 0 && /* @__PURE__ */jsx("div", {
@@ -4311,43 +4286,43 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
         size
       })
     }, String(childIndex)))]
-  }));
+  });
 });
 const Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 const Box = forwardRef(function Box2(props, ref) {
   const {
-      as: asProp = "div",
-      column,
-      columnStart,
-      columnEnd,
-      display = "block",
-      flex,
-      height,
-      margin = 0,
-      marginX,
-      marginY,
-      marginTop,
-      marginRight,
-      marginBottom,
-      marginLeft,
-      overflow,
-      padding = 0,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-      row,
-      rowStart,
-      rowEnd,
-      sizing
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded5);
-  return /* @__PURE__ */jsx(Root$A, _objectSpread(_objectSpread({
+    as: asProp = "div",
+    column,
+    columnStart,
+    columnEnd,
+    display = "block",
+    flex,
+    height,
+    margin = 0,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    overflow,
+    padding = 0,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    row,
+    rowStart,
+    rowEnd,
+    sizing,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Root$A, {
     "data-as": typeof asProp === "string" ? asProp : void 0,
-    "data-ui": "Box"
-  }, restProps), {}, {
+    "data-ui": "Box",
+    ...restProps,
     $column: useArrayProp(column),
     $columnStart: useArrayProp(columnStart),
     $columnEnd: useArrayProp(columnEnd),
@@ -4376,7 +4351,7 @@ const Box = forwardRef(function Box2(props, ref) {
     as: asProp,
     ref,
     children: props.children
-  }));
+  });
 });
 function labelBaseStyle(props) {
   const {
@@ -4393,15 +4368,15 @@ const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBa
 const SpanWithTextOverflow$1 = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 const Label = forwardRef(function Label2(props, ref) {
   const {
-      accent,
-      align,
-      children: childrenProp,
-      muted = false,
-      size = 2,
-      textOverflow,
-      weight
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded6);
+    accent,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
     children = /* @__PURE__ */jsx(SpanWithTextOverflow$1, {
@@ -4412,9 +4387,9 @@ const Label = forwardRef(function Label2(props, ref) {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$z, _objectSpread(_objectSpread({
-    "data-ui": "Label"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$z, {
+    "data-ui": "Label",
+    ...restProps,
     $accent: accent,
     $align: useArrayProp(align),
     $muted: muted,
@@ -4422,7 +4397,7 @@ const Label = forwardRef(function Label2(props, ref) {
     $weight: weight,
     ref,
     children
-  }));
+  });
 });
 function badgeStyle(props) {
   const {
@@ -4445,17 +4420,17 @@ function badgeStyle(props) {
 const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
 const Badge = forwardRef(function Badge2(props, ref) {
   const {
-      children,
-      fontSize,
-      mode = "default",
-      padding = 1,
-      radius = 2,
-      tone = "default"
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded7);
-  return /* @__PURE__ */jsx(Root$y, _objectSpread(_objectSpread({
-    "data-ui": "Badge"
-  }, restProps), {}, {
+    children,
+    fontSize,
+    mode = "default",
+    padding = 1,
+    radius = 2,
+    tone = "default",
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Root$y, {
+    "data-ui": "Badge",
+    ...restProps,
     $mode: mode,
     $tone: tone,
     $radius: useArrayProp(radius),
@@ -4465,22 +4440,22 @@ const Badge = forwardRef(function Badge2(props, ref) {
       size: fontSize,
       children
     })
-  }));
+  });
 });
 const Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
 const Flex = forwardRef(function Flex2(props, ref) {
   const {
-      align,
-      as,
-      direction = "row",
-      gap,
-      justify,
-      wrap
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded8);
-  return /* @__PURE__ */jsx(Root$x, _objectSpread(_objectSpread({
-    "data-ui": "Flex"
-  }, restProps), {}, {
+    align,
+    as,
+    direction = "row",
+    gap,
+    justify,
+    wrap,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Root$x, {
+    "data-ui": "Flex",
+    ...restProps,
     $align: useArrayProp(align),
     $direction: useArrayProp(direction),
     $gap: useArrayProp(gap),
@@ -4488,27 +4463,30 @@ const Flex = forwardRef(function Flex2(props, ref) {
     $wrap: useArrayProp(wrap),
     forwardedAs: as,
     ref
-  }));
+  });
 });
 const rotate$1 = keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 const Root$w = styled(Text)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 const Spinner = forwardRef(function Spinner2(props, ref) {
-  return /* @__PURE__ */jsx(Root$w, _objectSpread(_objectSpread({
-    "data-ui": "Spinner"
-  }, props), {}, {
+  return /* @__PURE__ */jsx(Root$w, {
+    "data-ui": "Spinner",
+    ...props,
     ref,
     children: /* @__PURE__ */jsx(SpinnerIcon, {})
-  }));
+  });
 });
 function _colorVarsStyle(base, color) {
   let checkered = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var _a, _b, _c, _d, _e, _f, _g, _h;
   return {
+    // Base
+    // @todo: rename to "--base-"?
     "--card-shadow-outline-color": base.shadow.outline,
     "--card-shadow-umbra-color": base.shadow.umbra,
     "--card-shadow-penumbra-color": base.shadow.penumbra,
     "--card-shadow-ambient-color": base.shadow.ambient,
     "--card-focus-ring-color": base.focusRing,
+    // Card
     "--card-bg-color": color.bg,
     "--card-bg-image": checkered ? "repeating-conic-gradient(".concat(color.bg, " 0% 25%, ").concat(color.bg2 || color.bg, " 0% 50%)") : void 0,
     "--card-fg-color": color.fg,
@@ -4520,6 +4498,7 @@ function _colorVarsStyle(base, color) {
     "--card-code-fg-color": (_e = color.code) == null ? void 0 : _e.fg,
     "--card-skeleton-color-from": (_f = color.skeleton) == null ? void 0 : _f.from,
     "--card-skeleton-color-to": (_g = color.skeleton) == null ? void 0 : _g.to,
+    // @todo: deprecate
     "--card-link-color": (_h = color.link) == null ? void 0 : _h.fg,
     "--card-hairline-soft-color": color.border,
     "--card-hairline-hard-color": color.border
@@ -4577,30 +4556,30 @@ const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
 const LoadingBox = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
 const Button = forwardRef(function Button2(props, ref) {
   const {
-      children,
-      disabled,
-      fontSize,
-      icon,
-      iconRight,
-      justify: justifyProp = "center",
-      loading,
-      mode = "default",
-      padding: paddingProp = 3,
-      paddingX: paddingXProp,
-      paddingY: paddingYProp,
-      paddingTop: paddingTopProp,
-      paddingBottom: paddingBottomProp,
-      paddingLeft: paddingLeftProp,
-      paddingRight: paddingRightProp,
-      radius: radiusProp = 2,
-      selected,
-      space: spaceProp = 3,
-      text,
-      textAlign,
-      tone = "default",
-      type = "button"
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded9);
+    children,
+    disabled,
+    fontSize,
+    icon,
+    iconRight,
+    justify: justifyProp = "center",
+    loading,
+    mode = "default",
+    padding: paddingProp = 3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: radiusProp = 2,
+    selected,
+    space: spaceProp = 3,
+    text,
+    textAlign,
+    tone = "default",
+    type = "button",
+    ...restProps
+  } = props;
   const justify = useArrayProp(justifyProp);
   const padding = useArrayProp(paddingProp);
   const paddingX = useArrayProp(paddingXProp);
@@ -4613,6 +4592,7 @@ const Button = forwardRef(function Button2(props, ref) {
   const space = useArrayProp(spaceProp);
   const theme = useTheme();
   const boxProps = useMemo(() => ({
+    // flex: 1,
     padding,
     paddingX,
     paddingY,
@@ -4621,9 +4601,9 @@ const Button = forwardRef(function Button2(props, ref) {
     paddingLeft,
     paddingRight
   }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
-  return /* @__PURE__ */jsxs(Root$v, _objectSpread(_objectSpread({
-    "data-ui": "Button"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsxs(Root$v, {
+    "data-ui": "Button",
+    ...restProps,
     $mode: mode,
     $radius: radius,
     $tone: tone,
@@ -4634,9 +4614,9 @@ const Button = forwardRef(function Button2(props, ref) {
     type,
     children: [Boolean(loading) && /* @__PURE__ */jsx(LoadingBox, {
       children: /* @__PURE__ */jsx(Spinner, {})
-    }), (icon || text || iconRight) && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
-      as: "span"
-    }, boxProps), {}, {
+    }), (icon || text || iconRight) && /* @__PURE__ */jsx(Box, {
+      as: "span",
+      ...boxProps,
       children: /* @__PURE__ */jsxs(Flex, {
         as: "span",
         justify,
@@ -4659,12 +4639,12 @@ const Button = forwardRef(function Button2(props, ref) {
           children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
         })]
       })
-    })), children && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
-      as: "span"
-    }, boxProps), {}, {
+    }), children && /* @__PURE__ */jsx(Box, {
+      as: "span",
+      ...boxProps,
       children
-    }))]
-  }));
+    })]
+  });
 });
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
@@ -4709,34 +4689,34 @@ function cardColorStyle(props) {
 const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 const Card = forwardRef(function Card2(props, ref) {
   const {
-      __unstable_checkered: checkered = false,
-      __unstable_focusRing: focusRing = false,
-      as: asProp,
-      border,
-      borderTop,
-      borderRight,
-      borderBottom,
-      borderLeft,
-      pressed,
-      radius = 0,
-      scheme,
-      selected,
-      shadow,
-      tone: toneProp = "default"
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded10);
+    __unstable_checkered: checkered = false,
+    __unstable_focusRing: focusRing = false,
+    as: asProp,
+    border,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    pressed,
+    radius = 0,
+    scheme,
+    selected,
+    shadow,
+    tone: toneProp = "default",
+    ...restProps
+  } = props;
   const as = isValidElementType(asProp) ? asProp : "div";
   const rootTheme = useRootTheme();
   const tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
   return /* @__PURE__ */jsx(ThemeColorProvider, {
     scheme,
     tone,
-    children: /* @__PURE__ */jsx(Root$u, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsx(Root$u, {
       "data-as": typeof as === "string" ? as : void 0,
       "data-scheme": rootTheme.scheme,
       "data-ui": "Card",
-      "data-tone": tone
-    }, restProps), {}, {
+      "data-tone": tone,
+      ...restProps,
       $border: useArrayProp(border),
       $borderTop: useArrayProp(borderTop),
       $borderRight: useArrayProp(borderRight),
@@ -4753,7 +4733,7 @@ const Card = forwardRef(function Card2(props, ref) {
       forwardedAs: as,
       ref,
       selected
-    }))
+    })
   });
 });
 function checkboxBaseStyles() {
@@ -4793,15 +4773,15 @@ const Root$t = styled.div(checkboxBaseStyles);
 const Input$5 = styled.input(inputElementStyles);
 const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
   const {
-      checked,
-      className,
-      disabled,
-      indeterminate,
-      customValidity,
-      readOnly,
-      style
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded11);
+    checked,
+    className,
+    disabled,
+    indeterminate,
+    customValidity,
+    readOnly,
+    style,
+    ...restProps
+  } = props;
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
   useEffect(() => {
@@ -4813,15 +4793,15 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
     className,
     "data-ui": "Checkbox",
     style,
-    children: [/* @__PURE__ */jsx(Input$5, _objectSpread(_objectSpread({
-      "data-read-only": !disabled && readOnly ? "" : void 0
-    }, restProps), {}, {
+    children: [/* @__PURE__ */jsx(Input$5, {
+      "data-read-only": !disabled && readOnly ? "" : void 0,
+      ...restProps,
       checked,
       disabled: disabled || readOnly,
       type: "checkbox",
       readOnly,
       ref
-    })), /* @__PURE__ */jsxs("span", {
+    }), /* @__PURE__ */jsxs("span", {
       children: [/* @__PURE__ */jsx(CheckmarkIcon, {}), /* @__PURE__ */jsx(RemoveIcon, {})]
     })]
   });
@@ -4948,17 +4928,17 @@ function codeBaseStyle() {
 const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = forwardRef(function Code2(props, ref) {
   const {
-      children,
-      language: languageProp,
-      size = 2,
-      weight
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded12);
+    children,
+    language: languageProp,
+    size = 2,
+    weight,
+    ...restProps
+  } = props;
   const language = typeof languageProp === "string" ? languageProp : void 0;
   const registered = language ? Refractor.hasLanguage(language) : false;
-  return /* @__PURE__ */jsxs(Root$s, _objectSpread(_objectSpread({
-    "data-ui": "Code"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsxs(Root$s, {
+    "data-ui": "Code",
+    ...restProps,
     $size: useArrayProp(size),
     $weight: weight,
     ref,
@@ -4969,7 +4949,7 @@ const Code = forwardRef(function Code2(props, ref) {
       language,
       value: String(children)
     })]
-  }));
+  });
 });
 const BASE_STYLE$1 = {
   width: "100%",
@@ -4993,37 +4973,37 @@ function responsiveContainerWidthStyle(props) {
 const Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
 const Container = forwardRef(function Container2(props, ref) {
   const {
-      as,
-      width = 2
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded13);
-  return /* @__PURE__ */jsx(Root$r, _objectSpread(_objectSpread({
-    "data-ui": "Container"
-  }, restProps), {}, {
+    as,
+    width = 2,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Root$r, {
+    "data-ui": "Container",
+    ...restProps,
     $width: useArrayProp(width),
     forwardedAs: as,
     ref
-  }));
+  });
 });
 const Root$q = styled(Box)(responsiveGridStyle);
 const Grid = forwardRef(function Grid2(props, ref) {
   const {
-      as,
-      autoRows,
-      autoCols,
-      autoFlow,
-      columns,
-      gap,
-      gapX,
-      gapY,
-      rows,
-      children
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded14);
-  return /* @__PURE__ */jsx(Root$q, _objectSpread(_objectSpread({
+    as,
+    autoRows,
+    autoCols,
+    autoFlow,
+    columns,
+    gap,
+    gapX,
+    gapY,
+    rows,
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Root$q, {
     "data-as": typeof as === "string" ? as : void 0,
-    "data-ui": "Grid"
-  }, restProps), {}, {
+    "data-ui": "Grid",
+    ...restProps,
     $autoRows: useArrayProp(autoRows),
     $autoCols: useArrayProp(autoCols),
     $autoFlow: useArrayProp(autoFlow),
@@ -5035,7 +5015,7 @@ const Grid = forwardRef(function Grid2(props, ref) {
     forwardedAs: as,
     ref,
     children
-  }));
+  });
 });
 function headingBaseStyle(props) {
   const {
@@ -5049,24 +5029,24 @@ const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsive
 const SpanWithTextOverflow = styled.span(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 const Heading = forwardRef(function Heading2(props, ref) {
   const {
-      accent = false,
-      align,
-      children: childrenProp,
-      muted = false,
-      size = 2,
-      textOverflow,
-      weight
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded15);
+    accent = false,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
     children = /* @__PURE__ */jsx(SpanWithTextOverflow, {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$p, _objectSpread(_objectSpread({
-    "data-ui": "Heading"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$p, {
+    "data-ui": "Heading",
+    ...restProps,
     $accent: accent,
     $align: useArrayProp(align),
     $muted: muted,
@@ -5076,7 +5056,7 @@ const Heading = forwardRef(function Heading2(props, ref) {
     children: /* @__PURE__ */jsx("span", {
       children
     })
-  }));
+  });
 });
 function inlineBaseStyle() {
   return {
@@ -5107,22 +5087,22 @@ function inlineSpaceStyle(props) {
 const Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
 const Inline = forwardRef(function Inline2(props, ref) {
   const {
-      as,
-      children: childrenProp,
-      space
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded16);
+    as,
+    children: childrenProp,
+    space,
+    ...restProps
+  } = props;
   const children = useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsx("div", {
     children: child
   }, idx)), [childrenProp]);
-  return /* @__PURE__ */jsx(Root$o, _objectSpread(_objectSpread({
-    "data-ui": "Inline"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$o, {
+    "data-ui": "Inline",
+    ...restProps,
     $space: useArrayProp(space),
     forwardedAs: as,
     ref,
     children
-  }));
+  });
 });
 function kbdStyle() {
   return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
@@ -5130,15 +5110,15 @@ function kbdStyle() {
 const Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
   const {
-      children,
-      fontSize = 1,
-      padding = 1,
-      radius = 2
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded17);
-  return /* @__PURE__ */jsx(Root$n, _objectSpread(_objectSpread({
-    "data-ui": "KBD"
-  }, restProps), {}, {
+    children,
+    fontSize = 1,
+    padding = 1,
+    radius = 2,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Root$n, {
+    "data-ui": "KBD",
+    ...restProps,
     $radius: useArrayProp(radius),
     ref,
     children: /* @__PURE__ */jsx(Box, {
@@ -5151,7 +5131,7 @@ const KBD = forwardRef(function KBD2(props, ref) {
         children
       })
     })
-  }));
+  });
 });
 const key$6 = Symbol.for("@sanity/ui/context/boundaryElement");
 globalScope[key$6] = globalScope[key$6] || createContext(null);
@@ -5204,10 +5184,10 @@ function findMinBreakpoints(media, width) {
 const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
   const theme = useTheme();
   const {
-      children,
-      media = theme.sanity.media
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded18);
+    children,
+    media = theme.sanity.media,
+    ...restProps
+  } = props;
   const forwardedRef = useForwardedRef(ref);
   const [element, setElement] = useState(null);
   const elementSize = useElementSize(element);
@@ -5221,14 +5201,14 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
     forwardedRef.current = el;
     setElement(el);
   }, [forwardedRef]);
-  return /* @__PURE__ */jsx("div", _objectSpread(_objectSpread({
-    "data-ui": "ElementQuery"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx("div", {
+    "data-ui": "ElementQuery",
+    ...restProps,
     "data-eq-max": max.length ? max.join(" ") : void 0,
     "data-eq-min": min.length ? min.join(" ") : void 0,
     ref: setRef,
     children
-  }));
+  });
 });
 class ErrorBoundary extends Component {
   constructor() {
@@ -5309,34 +5289,37 @@ function LayerProvider(props) {
 const Root$m = styled.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
   const {
-      children,
-      style = EMPTY_RECORD
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded19);
+    children,
+    style = EMPTY_RECORD,
+    ...restProps
+  } = props;
   const {
     zIndex
   } = useLayer();
-  return /* @__PURE__ */jsx(Root$m, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$m, {
+    ...restProps,
     "data-ui": "Layer",
     ref,
-    style: _objectSpread(_objectSpread({}, style), {}, {
+    style: {
+      ...style,
       zIndex
-    }),
+    },
     children
-  }));
+  });
 });
 const Layer = forwardRef(function Layer2(props, ref) {
   const {
-      children,
-      zOffset = 1
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded20);
+    children,
+    zOffset = 1,
+    ...restProps
+  } = props;
   return /* @__PURE__ */jsx(LayerProvider, {
     zOffset,
-    children: /* @__PURE__ */jsx(LayerChildren, _objectSpread(_objectSpread({}, restProps), {}, {
+    children: /* @__PURE__ */jsx(LayerChildren, {
+      ...restProps,
       ref,
       children
-    }))
+    })
   });
 });
 const key$4 = Symbol.for("@sanity/ui/context/portal");
@@ -5528,14 +5511,14 @@ const Root$k = styled.div(_templateObject31 || (_templateObject31 = _taggedTempl
 const ItemWrapper = styled.div(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const {
-      as = "div",
-      gap = 0,
-      getItemKey,
-      items = [],
-      onChange,
-      renderItem
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded21);
+    as = "div",
+    gap = 0,
+    getItemKey,
+    items = [],
+    onChange,
+    renderItem,
+    ...restProps
+  } = props;
   const {
     space
   } = useTheme().sanity;
@@ -5631,17 +5614,17 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const wrapperStyle = useMemo(() => ({
     height
   }), [height]);
-  return /* @__PURE__ */jsx(Root$k, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsx(Root$k, {
     as,
-    "data-ui": "VirtualList"
-  }, restProps), {}, {
+    "data-ui": "VirtualList",
+    ...restProps,
     ref: forwardedRef,
     children: /* @__PURE__ */jsx("div", {
       ref: wrapperRef,
       style: wrapperStyle,
       children
     })
-  }));
+  });
 });
 const DEFAULT_POPOVER_DISTANCE = 4;
 const DEFAULT_POPOVER_PADDING = 4;
@@ -5718,9 +5701,9 @@ const Root$j = styled.div(_templateObject33 || (_templateObject33 = _taggedTempl
 const BorderPath = styled.path(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
 const ShapePath = styled.path(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
 const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
-  return /* @__PURE__ */jsx(Root$j, _objectSpread(_objectSpread({
-    "data-ui": "Popover__arrow"
-  }, props), {}, {
+  return /* @__PURE__ */jsx(Root$j, {
+    "data-ui": "Popover__arrow",
+    ...props,
     ref,
     children: /* @__PURE__ */jsxs("svg", {
       width: DEFAULT_POPOVER_ARROW_WIDTH,
@@ -5734,7 +5717,7 @@ const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
         d: "M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z"
       })]
     })
-  }));
+  });
 });
 function popoverCardStyle(props) {
   const {
@@ -5754,39 +5737,40 @@ const Root$i = memo(styled(Card)(popoverCardStyle));
 const PopoverContainer = memo(styled(Container)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n  max-height: inherit;\n  max-width: inherit;\n"]))));
 const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
-      __unstable_margins: marginsProp,
-      arrow,
-      arrowRef,
-      arrowX,
-      arrowY,
-      boundaryWidth,
-      children,
-      padding,
-      placement,
-      overflow,
-      radius,
-      scheme,
-      shadow,
-      strategy,
-      style,
-      tone,
-      width = "auto",
-      x: xProp,
-      y: yProp
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded22);
+    __unstable_margins: marginsProp,
+    arrow,
+    arrowRef,
+    arrowX,
+    arrowY,
+    boundaryWidth,
+    children,
+    padding,
+    placement,
+    overflow,
+    radius,
+    scheme,
+    shadow,
+    strategy,
+    style,
+    tone,
+    width = "auto",
+    x: xProp,
+    y: yProp,
+    ...restProps
+  } = props;
   const {
     zIndex
   } = useLayer();
   const margins = useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]);
   const x = (xProp != null ? xProp : 0) + margins[3];
   const y = (yProp != null ? yProp : 0) + margins[0];
-  const rootStyle = useMemo(() => _objectSpread({
+  const rootStyle = useMemo(() => ({
     position: strategy,
     top: y,
     left: x,
-    zIndex
-  }, style), [strategy, style, x, y, zIndex]);
+    zIndex,
+    ...style
+  }), [strategy, style, x, y, zIndex]);
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
   const arrowStyle = useMemo(() => {
     const style2 = {
@@ -5798,7 +5782,8 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     if (staticSide) style2[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH;
     return style2;
   }, [arrowX, arrowY, staticSide]);
-  return /* @__PURE__ */jsxs(Root$i, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsxs(Root$i, {
+    ...restProps,
     $boundaryWidth: boundaryWidth,
     "data-placement": placement,
     "data-ui": "Popover",
@@ -5821,7 +5806,7 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
       ref: arrowRef,
       style: arrowStyle
     })]
-  }));
+  });
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = memo(forwardRef(function Popover2(props, ref) {
@@ -5829,30 +5814,30 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
   const theme = useTheme();
   const boundaryElementContext = useBoundaryElement();
   const {
-      __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-      arrow: arrowProp = true,
-      boundaryElement = boundaryElementContext.element,
-      children: childProp,
-      constrainSize = false,
-      content,
-      disabled,
-      fallbackPlacements,
-      matchReferenceWidth: matchReferenceWidthProp,
-      open,
-      overflow = "hidden",
-      padding: paddingProp,
-      placement: placementProp = "bottom",
-      portal,
-      preventOverflow = true,
-      radius: radiusProp = 3,
-      referenceElement,
-      scheme,
-      shadow: shadowProp = 3,
-      tone = "inherit",
-      width: widthProp = "auto",
-      zOffset: zOffsetProp = (_a = theme.sanity.layer) == null ? void 0 : _a.popover.zOffset
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded23);
+    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
+    arrow: arrowProp = true,
+    boundaryElement = boundaryElementContext.element,
+    children: childProp,
+    constrainSize = false,
+    content,
+    disabled,
+    fallbackPlacements,
+    matchReferenceWidth: matchReferenceWidthProp,
+    open,
+    overflow = "hidden",
+    padding: paddingProp,
+    placement: placementProp = "bottom",
+    portal,
+    preventOverflow = true,
+    radius: radiusProp = 3,
+    referenceElement,
+    scheme,
+    shadow: shadowProp = 3,
+    tone = "inherit",
+    width: widthProp = "auto",
+    zOffset: zOffsetProp = (_a = theme.sanity.layer) == null ? void 0 : _a.popover.zOffset,
+    ...restProps
+  } = props;
   const boundarySize = (_b = useElementSize(boundaryElement)) == null ? void 0 : _b.border;
   const padding = useArrayProp(paddingProp);
   const radius = useArrayProp(radiusProp);
@@ -5966,7 +5951,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
   }
   const popover = /* @__PURE__ */jsx(LayerProvider, {
     zOffset,
-    children: /* @__PURE__ */jsx(PopoverCard, _objectSpread(_objectSpread({}, restProps), {}, {
+    children: /* @__PURE__ */jsx(PopoverCard, {
+      ...restProps,
       __unstable_margins: margins,
       arrow: arrowProp,
       arrowRef: setArrow,
@@ -5987,7 +5973,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       y,
       width,
       children: content
-    }))
+    })
   });
   return /* @__PURE__ */jsxs(Fragment, {
     children: [open && /* @__PURE__ */jsx(Fragment, {
@@ -6030,27 +6016,27 @@ const Root$h = styled.div(radioBaseStyle);
 const Input$4 = styled.input(inputElementStyle);
 const Radio = forwardRef(function Radio2(props, forwardedRef) {
   const {
-      className,
-      disabled,
-      style,
-      customValidity,
-      readOnly
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded24);
+    className,
+    disabled,
+    style,
+    customValidity,
+    readOnly,
+    ...restProps
+  } = props;
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
   return /* @__PURE__ */jsxs(Root$h, {
     className,
     "data-ui": "Radio",
     style,
-    children: [/* @__PURE__ */jsx(Input$4, _objectSpread(_objectSpread({
-      "data-read-only": !disabled && readOnly ? "" : void 0
-    }, restProps), {}, {
+    children: [/* @__PURE__ */jsx(Input$4, {
+      "data-read-only": !disabled && readOnly ? "" : void 0,
+      ...restProps,
       disabled: disabled || readOnly,
       readOnly,
       ref,
       type: "radio"
-    })), /* @__PURE__ */jsx("span", {})]
+    }), /* @__PURE__ */jsx("span", {})]
   });
 });
 function rootStyle() {
@@ -6128,24 +6114,24 @@ const Input$3 = styled.select(selectStyle.input);
 const IconBox = styled(Box)(selectStyle.iconBox);
 const Select = forwardRef(function Select2(props, forwardedRef) {
   const {
-      children,
-      customValidity,
-      disabled,
-      fontSize = 2,
-      padding = 3,
-      radius = 1,
-      readOnly,
-      space = 3
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded25);
+    children,
+    customValidity,
+    disabled,
+    fontSize = 2,
+    padding = 3,
+    radius = 1,
+    readOnly,
+    space = 3,
+    ...restProps
+  } = props;
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
   return /* @__PURE__ */jsxs(Root$g, {
     "data-ui": "Select",
-    children: [/* @__PURE__ */jsx(Input$3, _objectSpread(_objectSpread({
+    children: [/* @__PURE__ */jsx(Input$3, {
       "data-read-only": !disabled && readOnly ? "" : void 0,
-      "data-ui": "Select"
-    }, restProps), {}, {
+      "data-ui": "Select",
+      ...restProps,
       $fontSize: useArrayProp(fontSize),
       $padding: useArrayProp(padding),
       $radius: useArrayProp(radius),
@@ -6153,7 +6139,7 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
       disabled: disabled || readOnly,
       ref,
       children
-    })), /* @__PURE__ */jsx(IconBox, {
+    }), /* @__PURE__ */jsx(IconBox, {
       padding,
       children: /* @__PURE__ */jsx(Text, {
         size: fontSize,
@@ -6190,18 +6176,18 @@ function responsiveStackSpaceStyle(props) {
 const Root$f = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle);
 const Stack = forwardRef(function Stack2(props, ref) {
   const {
-      as,
-      space
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded26);
-  return /* @__PURE__ */jsx(Root$f, _objectSpread(_objectSpread({
+    as,
+    space,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Root$f, {
     "data-as": typeof as === "string" ? as : void 0,
-    "data-ui": "Stack"
-  }, restProps), {}, {
+    "data-ui": "Stack",
+    ...restProps,
     $space: useArrayProp(space),
     forwardedAs: as,
     ref
-  }));
+  });
 });
 function switchBaseStyles() {
   return css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
@@ -6255,14 +6241,14 @@ const Track = styled.span(switchTrackStyles);
 const Thumb = styled.span(switchThumbStyles);
 const Switch = forwardRef(function Switch2(props, forwardedRef) {
   const {
-      checked,
-      className,
-      disabled,
-      indeterminate,
-      readOnly,
-      style
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded27);
+    checked,
+    className,
+    disabled,
+    indeterminate,
+    readOnly,
+    style,
+    ...restProps
+  } = props;
   const ref = useForwardedRef(forwardedRef);
   useEffect(() => {
     if (ref.current) {
@@ -6273,14 +6259,14 @@ const Switch = forwardRef(function Switch2(props, forwardedRef) {
     className,
     "data-ui": "Switch",
     style,
-    children: [/* @__PURE__ */jsx(Input$2, _objectSpread(_objectSpread({
-      "data-read-only": !disabled && readOnly ? "" : void 0
-    }, restProps), {}, {
+    children: [/* @__PURE__ */jsx(Input$2, {
+      "data-read-only": !disabled && readOnly ? "" : void 0,
+      ...restProps,
       checked: indeterminate !== true && checked,
       disabled: disabled || readOnly,
       type: "checkbox",
       ref
-    })), /* @__PURE__ */jsxs(Representation, {
+    }), /* @__PURE__ */jsxs(Representation, {
       "aria-hidden": true,
       "data-name": "representation",
       children: [/* @__PURE__ */jsx(Track, {}), /* @__PURE__ */jsx(Thumb, {
@@ -6296,26 +6282,26 @@ const Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle,
 const Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle);
 const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
   const {
-      border = true,
-      customValidity,
-      disabled = false,
-      fontSize = 2,
-      padding = 3,
-      radius = 1,
-      weight
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded28);
+    border = true,
+    customValidity,
+    disabled = false,
+    fontSize = 2,
+    padding = 3,
+    radius = 1,
+    weight,
+    ...restProps
+  } = props;
   const ref = useForwardedRef(forwardedRef);
   const rootTheme = useRootTheme();
   useCustomValidity(ref, customValidity);
   return /* @__PURE__ */jsx(Root$d, {
     "data-ui": "TextArea",
     children: /* @__PURE__ */jsxs(InputRoot$1, {
-      children: [/* @__PURE__ */jsx(Input$1, _objectSpread(_objectSpread({
+      children: [/* @__PURE__ */jsx(Input$1, {
         "data-as": "textarea",
         "data-scheme": rootTheme.scheme,
-        "data-tone": rootTheme.tone
-      }, restProps), {}, {
+        "data-tone": rootTheme.tone,
+        ...restProps,
         $fontSize: useArrayProp(fontSize),
         $padding: useArrayProp(padding),
         $scheme: rootTheme.scheme,
@@ -6324,7 +6310,7 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
         $weight: weight,
         disabled,
         ref
-      })), /* @__PURE__ */jsx(Presentation$1, {
+      }), /* @__PURE__ */jsx(Presentation$1, {
         $radius: useArrayProp(radius),
         $scheme: rootTheme.scheme,
         $tone: rootTheme.tone,
@@ -6355,24 +6341,24 @@ const RightBox = styled(Box)(_templateObject55 || (_templateObject55 = _taggedTe
 const RightCard = styled(Card)(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   const {
-      border = true,
-      clearButton,
-      disabled = false,
-      fontSize: fontSizeProp = 2,
-      icon,
-      iconRight,
-      onClear,
-      padding: paddingProp = 3,
-      prefix,
-      radius: radiusProp = 1,
-      readOnly,
-      space: spaceProp = 3,
-      suffix,
-      customValidity,
-      type = "text",
-      weight
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded29);
+    border = true,
+    clearButton,
+    disabled = false,
+    fontSize: fontSizeProp = 2,
+    icon,
+    iconRight,
+    onClear,
+    padding: paddingProp = 3,
+    prefix,
+    radius: radiusProp = 1,
+    readOnly,
+    space: spaceProp = 3,
+    suffix,
+    customValidity,
+    type = "text",
+    weight,
+    ...restProps
+  } = props;
   const ref = useForwardedRef(forwardedRef);
   const rootTheme = useRootTheme();
   const fontSize = useArrayProp(fontSizeProp);
@@ -6448,18 +6434,18 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     padding: clearButtonBoxPadding,
     style: CLEAR_BUTTON_BOX_STYLE,
     tone: customValidity ? "critical" : "inherit",
-    children: /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsx(Button, {
       "aria-label": "Clear",
       "data-qa": "clear-button",
       fontSize,
       icon: CloseIcon,
       mode: "bleed",
       padding: clearButtonPadding,
-      radius
-    }, clearButtonProps), {}, {
+      radius,
+      ...clearButtonProps,
       onClick: handleClearClick,
       onMouseDown: handleClearMouseDown
-    }))
+    })
   }), [clearButton, clearButtonBoxPadding, clearButtonPadding, clearButtonProps, customValidity, disabled, fontSize, handleClearClick, handleClearMouseDown, radius, readOnly]);
   const suffixNode = useMemo(() => suffix && /* @__PURE__ */jsx(Suffix, {
     borderTop: true,
@@ -6476,11 +6462,11 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     "data-ui": "TextInput",
     tone: rootTheme.tone,
     children: [prefixNode, /* @__PURE__ */jsxs(InputRoot, {
-      children: [/* @__PURE__ */jsx(Input, _objectSpread(_objectSpread({
+      children: [/* @__PURE__ */jsx(Input, {
         "data-as": "input",
         "data-scheme": rootTheme.scheme,
-        "data-tone": rootTheme.tone
-      }, restProps), {}, {
+        "data-tone": rootTheme.tone,
+        ...restProps,
         $fontSize: fontSize,
         $iconLeft: $hasIcon,
         $iconRight: $hasIconRight || $hasClearButton,
@@ -6493,7 +6479,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
         readOnly,
         ref,
         type
-      })), presentationNode, clearButtonNode]
+      }), presentationNode, clearButtonNode]
     }), suffixNode]
   });
 });
@@ -6501,10 +6487,12 @@ const Root$b = styled.div(_templateObject57 || (_templateObject57 = _taggedTempl
 const Border = styled.path(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["\n  fill: var(--card-shadow-outline-color);\n"])));
 const Shape = styled.path(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["\n  fill: var(--card-bg-color);\n"])));
 const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
-  const restProps = _extends({}, (_objectDestructuringEmpty(props), props));
-  return /* @__PURE__ */jsx(Root$b, _objectSpread(_objectSpread({
-    "data-ui": "Tooltip__arrow"
-  }, restProps), {}, {
+  const {
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Root$b, {
+    "data-ui": "Tooltip__arrow",
+    ...restProps,
     ref,
     children: /* @__PURE__ */jsxs("svg", {
       width: "15",
@@ -6516,7 +6504,7 @@ const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
         d: "M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z"
       })]
     })
-  }));
+  });
 });
 const Root$a = styled(Layer)(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
@@ -6524,19 +6512,19 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
   const {
-      boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
-      children: childProp,
-      content,
-      disabled,
-      fallbackPlacements: fallbackPlacementsProp,
-      padding,
-      placement: placementProp = "bottom",
-      portal,
-      scheme,
-      shadow = 2,
-      zOffset = (_a = theme.sanity.layer) == null ? void 0 : _a.tooltip.zOffset
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded30);
+    boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
+    children: childProp,
+    content,
+    disabled,
+    fallbackPlacements: fallbackPlacementsProp,
+    padding,
+    placement: placementProp = "bottom",
+    portal,
+    scheme,
+    shadow = 2,
+    zOffset = (_a = theme.sanity.layer) == null ? void 0 : _a.tooltip.zOffset,
+    ...restProps
+  } = props;
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
   const forwardedRef = useForwardedRef(ref);
   const [referenceElement, setReferenceElement] = useState(null);
@@ -6652,9 +6640,9 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
   if (!child) return /* @__PURE__ */jsx(Fragment, {});
   if (disabled) return child;
-  const root = /* @__PURE__ */jsx(Root$a, _objectSpread(_objectSpread({
-    "data-ui": "Tooltip"
-  }, restProps), {}, {
+  const root = /* @__PURE__ */jsx(Root$a, {
+    "data-ui": "Tooltip",
+    ...restProps,
     ref: setFloating,
     style: rootStyle,
     zOffset,
@@ -6670,7 +6658,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
         style: arrowStyle
       })]
     })
-  }));
+  });
   return /* @__PURE__ */jsxs(Fragment, {
     children: [child, isOpen && /* @__PURE__ */jsx(Fragment, {
       children: portal ? /* @__PURE__ */jsx(Portal, {
@@ -6714,58 +6702,67 @@ function AutocompleteOption(props) {
 }
 function autocompleteReducer(state, msg) {
   if (msg.type === "input/change") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       activeValue: null,
       focused: true,
       query: msg.query
-    });
+    };
   }
   if (msg.type === "input/focus") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       focused: true
-    });
+    };
   }
   if (msg.type === "root/blur") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       focused: false,
       query: null
-    });
+    };
   }
   if (msg.type === "root/clear") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       activeValue: null,
       query: null,
       value: null
-    });
+    };
   }
   if (msg.type === "root/escape") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       focused: false,
       query: null
-    });
+    };
   }
   if (msg.type === "root/open") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       query: state.query || msg.query
-    });
+    };
   }
   if (msg.type === "root/setActiveValue") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       activeValue: msg.value,
       listFocused: msg.listFocused || state.listFocused
-    });
+    };
   }
   if (msg.type === "root/setListFocused") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       listFocused: msg.listFocused
-    });
+    };
   }
   if (msg.type === "value/change") {
-    return _objectSpread(_objectSpread({}, state), {}, {
+    return {
+      ...state,
       activeValue: msg.value,
       query: null,
       value: msg.value
-    });
+    };
   }
   return state;
 }
@@ -6776,35 +6773,35 @@ const DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value;
 const DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
 const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   const {
-      border = true,
-      customValidity,
-      disabled,
-      filterOption: filterOptionProp,
-      fontSize = 2,
-      icon,
-      id,
-      listBox = EMPTY_RECORD,
-      loading,
-      onBlur,
-      onChange,
-      onFocus,
-      onQueryChange,
-      onSelect,
-      openButton,
-      options: optionsProp,
-      padding: paddingProp = 3,
-      popover = EMPTY_RECORD,
-      prefix,
-      radius = 3,
-      readOnly,
-      relatedElements,
-      renderOption: renderOptionProp,
-      renderPopover,
-      renderValue = DEFAULT_RENDER_VALUE,
-      suffix,
-      value: valueProp
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded31);
+    border = true,
+    customValidity,
+    disabled,
+    filterOption: filterOptionProp,
+    fontSize = 2,
+    icon,
+    id,
+    listBox = EMPTY_RECORD,
+    loading,
+    onBlur,
+    onChange,
+    onFocus,
+    onQueryChange,
+    onSelect,
+    openButton,
+    options: optionsProp,
+    padding: paddingProp = 3,
+    popover = EMPTY_RECORD,
+    prefix,
+    radius = 3,
+    readOnly,
+    relatedElements,
+    renderOption: renderOptionProp,
+    renderPopover,
+    renderValue = DEFAULT_RENDER_VALUE,
+    suffix,
+    value: valueProp,
+    ...restProps
+  } = props;
   const [state, dispatch] = useReducer(autocompleteReducer, {
     activeValue: valueProp || null,
     focused: false,
@@ -7067,16 +7064,16 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   const openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */jsx(Box, {
     "aria-hidden": expanded,
     padding: openButtonBoxPadding,
-    children: /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsx(Button, {
       "aria-label": "Open",
       disabled: expanded,
       fontSize,
       icon: ChevronDownIcon,
       mode: "bleed",
-      padding: openButtonPadding
-    }, openButtonProps), {}, {
+      padding: openButtonPadding,
+      ...openButtonProps,
       onClick: handleOpenClick
-    }))
+    })
   }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]);
   const inputValue = useMemo(() => {
     if (query === null) {
@@ -7087,7 +7084,8 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     }
     return query;
   }, [currentOption, query, renderValue, value]);
-  const input = /* @__PURE__ */jsx(TextInput, _objectSpread(_objectSpread({}, restProps), {}, {
+  const input = /* @__PURE__ */jsx(TextInput, {
+    ...restProps,
     "aria-activedescendant": activeItemId,
     "aria-autocomplete": "list",
     "aria-expanded": expanded,
@@ -7116,7 +7114,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     spellCheck: false,
     suffix: suffix || openButtonNode,
     value: inputValue
-  }));
+  });
   const handleListBoxKeyDown = useCallback(event => {
     var _a;
     if (event.key === "Tab") {
@@ -7125,11 +7123,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   }, [listFocused]);
   const content = useMemo(() => {
     if (filteredOptions.length === 0) return null;
-    return /* @__PURE__ */jsx(ListBox, _objectSpread(_objectSpread({
+    return /* @__PURE__ */jsx(ListBox, {
       "data-ui": "AutoComplete__results",
       onKeyDown: handleListBoxKeyDown,
-      padding: 1
-    }, listBox), {}, {
+      padding: 1,
+      ...listBox,
       tabIndex: -1,
       children: /* @__PURE__ */jsx(Stack, {
         as: "ul",
@@ -7154,7 +7152,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
           }, option.value);
         })
       })
-    }));
+    });
   }, [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]);
   const results = useMemo(() => {
     if (renderPopover) {
@@ -7169,7 +7167,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     if (filteredOptionsLen === 0) {
       return null;
     }
-    return /* @__PURE__ */jsx(Popover, _objectSpread({
+    return /* @__PURE__ */jsx(Popover, {
       arrow: false,
       constrainSize: true,
       content,
@@ -7183,8 +7181,9 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
       portal: true,
       radius,
       ref: resultsPopoverElementRef,
-      referenceElement: inputElementRef.current
-    }, popover));
+      referenceElement: inputElementRef.current,
+      ...popover
+    });
   }, [content, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
   return /* @__PURE__ */jsxs(Root$9, {
     "data-ui": "Autocomplete",
@@ -7200,12 +7199,12 @@ const Root$8 = styled.ol(_templateObject65 || (_templateObject65 = _taggedTempla
 const ExpandButton = styled(Button)(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["\n  appearance: none;\n  margin: -4px;\n"])));
 const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   const {
-      children,
-      maxLength,
-      separator,
-      space: spaceRaw = 2
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded32);
+    children,
+    maxLength,
+    separator,
+    space: spaceRaw = 2,
+    ...restProps
+  } = props;
   const space = useArrayProp(spaceRaw);
   const [open, setOpen] = useState(false);
   const [expandElement, setExpandElement] = useState(null);
@@ -7247,9 +7246,9 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }
     return rawItems;
   }, [collapse, expand, maxLength, open, rawItems, space]);
-  return /* @__PURE__ */jsx(Root$8, _objectSpread(_objectSpread({
-    "data-ui": "Breadcrumbs"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$8, {
+    "data-ui": "Breadcrumbs",
+    ...restProps,
     ref,
     children: items.map((item, itemIndex) => /* @__PURE__ */jsxs(Fragment$1, {
       children: [itemIndex > 0 && /* @__PURE__ */jsx(Box, {
@@ -7265,7 +7264,7 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
         children: item
       })]
     }, itemIndex))
-  }));
+  });
 });
 function dialogStyle(_ref23) {
   let {
@@ -7418,25 +7417,25 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
   const dialog = useDialog();
   const theme = useTheme();
   const {
-      __unstable_autoFocus: autoFocus = true,
-      __unstable_hideCloseButton: hideCloseButton = false,
-      cardRadius: cardRadiusProp = 3,
-      cardShadow = 4,
-      children,
-      contentRef,
-      footer,
-      header,
-      id,
-      onClickOutside,
-      onClose,
-      padding: paddingProp = 4,
-      portal,
-      position: positionProp = dialog.position || "fixed",
-      scheme,
-      width: widthProp = 0,
-      zOffset: zOffsetProp = dialog.zOffset || ((_a = theme.sanity.layer) == null ? void 0 : _a.dialog.zOffset)
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded33);
+    __unstable_autoFocus: autoFocus = true,
+    __unstable_hideCloseButton: hideCloseButton = false,
+    cardRadius: cardRadiusProp = 3,
+    cardShadow = 4,
+    children,
+    contentRef,
+    footer,
+    header,
+    id,
+    onClickOutside,
+    onClose,
+    padding: paddingProp = 4,
+    portal,
+    position: positionProp = dialog.position || "fixed",
+    scheme,
+    width: widthProp = 0,
+    zOffset: zOffsetProp = dialog.zOffset || ((_a = theme.sanity.layer) == null ? void 0 : _a.dialog.zOffset),
+    ...restProps
+  } = props;
   const cardRadius = useArrayProp(cardRadiusProp);
   const padding = useArrayProp(paddingProp);
   const position = useArrayProp(positionProp);
@@ -7463,7 +7462,8 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
   const labelId = "".concat(id, "_label");
   return /* @__PURE__ */jsx(Portal, {
     __unstable_name: portal,
-    children: /* @__PURE__ */jsxs(Root$7, _objectSpread(_objectSpread({}, restProps), {}, {
+    children: /* @__PURE__ */jsxs(Root$7, {
+      ...restProps,
       $padding: padding,
       $position: position,
       "aria-labelledby": labelId,
@@ -7496,7 +7496,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
         ref: postDivRef,
         tabIndex: 0
       })]
-    }))
+    })
   });
 });
 function DialogProvider(props) {
@@ -7519,20 +7519,20 @@ const Root$6 = styled.kbd(_templateObject73 || (_templateObject73 = _taggedTempl
 const Key = styled(KBD)(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
   const {
-      fontSize,
-      keys,
-      padding,
-      radius,
-      space: spaceProp = 1
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded34);
+    fontSize,
+    keys,
+    padding,
+    radius,
+    space: spaceProp = 1,
+    ...restProps
+  } = props;
   const space = useArrayProp(spaceProp);
   if (!keys || keys.length === 0) {
     return /* @__PURE__ */jsx(Fragment, {});
   }
-  return /* @__PURE__ */jsx(Root$6, _objectSpread(_objectSpread({
-    "data-ui": "Hotkeys"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$6, {
+    "data-ui": "Hotkeys",
+    ...restProps,
     ref,
     children: /* @__PURE__ */jsx(Inline, {
       as: "span",
@@ -7544,7 +7544,7 @@ const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
         children: key
       }, i))
     })
-  }));
+  });
 });
 const key$2 = Symbol.for("@sanity/ui/context/menu");
 globalScope[key$2] = globalScope[key$2] || createContext(null);
@@ -7740,21 +7740,23 @@ function useMenuController(props) {
 const Root$5 = styled(Box)(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["\n  outline: none;\n  overflow: auto;\n"])));
 const Menu = forwardRef(function Menu2(props, ref) {
   const {
-      children,
-      focusFirst,
-      focusLast,
-      onClickOutside,
-      onEscape,
-      onItemClick,
-      onItemSelect,
-      onKeyDown,
-      originElement,
-      padding = 1,
-      registerElement,
-      shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
-      space = 1
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded35);
+    children,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusFirst,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusLast,
+    onClickOutside,
+    onEscape,
+    onItemClick,
+    onItemSelect,
+    onKeyDown,
+    originElement,
+    padding = 1,
+    registerElement,
+    shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
+    space = 1,
+    ...restProps
+  } = props;
   const forwardedRef = useForwardedRef(ref);
   const {
     isTopLayer
@@ -7803,14 +7805,15 @@ const Menu = forwardRef(function Menu2(props, ref) {
     onItemMouseEnter: handleItemMouseEnter,
     onItemMouseLeave: handleItemMouseLeave,
     registerElement,
+    // deprecated
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave
   }), [activeElement, activeIndex, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
   return /* @__PURE__ */jsx(MenuContext.Provider, {
     value,
-    children: /* @__PURE__ */jsx(Root$5, _objectSpread(_objectSpread({
-      "data-ui": "Menu"
-    }, restProps), {}, {
+    children: /* @__PURE__ */jsx(Root$5, {
+      "data-ui": "Menu",
+      ...restProps,
       onKeyDown: handleKeyDown,
       padding,
       ref: handleRefChange,
@@ -7820,7 +7823,7 @@ const Menu = forwardRef(function Menu2(props, ref) {
         space,
         children
       })
-    }))
+    })
   });
 });
 const MenuButton = forwardRef(function MenuButton2(props, ref) {
@@ -7943,22 +7946,23 @@ const MenuButton = forwardRef(function MenuButton2(props, ref) {
     ref: setButtonRef,
     selected: open
   }) : null, [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]);
-  const popoverProps = useMemo(() => _objectSpread({
+  const popoverProps = useMemo(() => ({
     boundaryElement: deprecated_boundaryElement,
     overflow: "auto",
     placement: deprecated_placement,
     portal: deprecated_portal,
     preventOverflow: deprecated_preventOverflow,
     radius: deprecated_popoverRadius,
-    scheme: deprecated_popoverScheme
-  }, popover || {}), [deprecated_boundaryElement, deprecated_placement, deprecated_popoverRadius, deprecated_popoverScheme, deprecated_portal, deprecated_preventOverflow, popover]);
-  return /* @__PURE__ */jsx(Popover, _objectSpread(_objectSpread({
-    "data-ui": "MenuButton__popover"
-  }, popoverProps), {}, {
+    scheme: deprecated_popoverScheme,
+    ...(popover || {})
+  }), [deprecated_boundaryElement, deprecated_placement, deprecated_popoverRadius, deprecated_popoverScheme, deprecated_portal, deprecated_preventOverflow, popover]);
+  return /* @__PURE__ */jsx(Popover, {
+    "data-ui": "MenuButton__popover",
+    ...popoverProps,
     content: menu,
     open,
     children: button || /* @__PURE__ */jsx(Fragment, {})
-  }));
+  });
 });
 const MenuDivider = styled.hr(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
 function selectableBaseStyle() {
@@ -7991,19 +7995,19 @@ function useMenu() {
 }
 function MenuGroup(props) {
   const {
-      as = "button",
-      children,
-      fontSize,
-      icon,
-      onClick,
-      padding = 3,
-      popover,
-      radius = 2,
-      space = 3,
-      text,
-      tone = "default"
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded36);
+    as = "button",
+    children,
+    fontSize,
+    icon,
+    onClick,
+    padding = 3,
+    popover,
+    radius = 2,
+    space = 3,
+    text,
+    tone = "default",
+    ...restProps
+  } = props;
   const menu = useMenu();
   const {
     activeElement,
@@ -8078,15 +8082,16 @@ function MenuGroup(props) {
       return;
     }
   }, []);
-  return /* @__PURE__ */jsx(Popover, _objectSpread(_objectSpread({}, popover), {}, {
+  return /* @__PURE__ */jsx(Popover, {
+    ...popover,
     content: childMenu,
     "data-ui": "MenuGroup__popover",
     open,
-    children: /* @__PURE__ */jsx(Selectable, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsx(Selectable, {
       "data-as": as,
       "data-ui": "MenuGroup",
-      forwardedAs: as
-    }, restProps), {}, {
+      forwardedAs: as,
+      ...restProps,
       "aria-pressed": as === "button" ? withinMenu : void 0,
       "data-pressed": as !== "button" ? withinMenu : void 0,
       "data-selected": !withinMenu && active ? "" : void 0,
@@ -8121,34 +8126,34 @@ function MenuGroup(props) {
           })]
         })
       })
-    }))
-  }));
+    })
+  });
 }
 const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
   const {
-      as = "button",
-      children,
-      disabled,
-      fontSize = 2,
-      hotkeys,
-      icon,
-      iconRight,
-      onClick,
-      padding = 3,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-      pressed,
-      radius = 2,
-      selected: selectedProp,
-      space = 3,
-      text,
-      tone = "default"
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded37);
+    as = "button",
+    children,
+    disabled,
+    fontSize = 2,
+    hotkeys,
+    icon,
+    iconRight,
+    onClick,
+    padding = 3,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    pressed,
+    radius = 2,
+    selected: selectedProp,
+    space = 3,
+    text,
+    tone = "default",
+    ...restProps
+  } = props;
   const menu = useMenu();
   const {
     activeElement,
@@ -8179,9 +8184,9 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     ref.current = el;
     setRootElement(el);
   }, [ref]);
-  return /* @__PURE__ */jsxs(Selectable, _objectSpread(_objectSpread({
-    "data-ui": "MenuItem"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsxs(Selectable, {
+    "data-ui": "MenuItem",
+    ...restProps,
     "aria-pressed": as === "button" && pressed,
     "data-pressed": as !== "button" && pressed ? "" : void 0,
     "data-selected": active ? "" : void 0,
@@ -8198,9 +8203,9 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     role: "menuitem",
     tabIndex: -1,
     type: as === "button" ? "button" : void 0,
-    children: [(icon || text || iconRight) && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
-      as: "span"
-    }, paddingProps), {}, {
+    children: [(icon || text || iconRight) && /* @__PURE__ */jsx(Box, {
+      as: "span",
+      ...paddingProps,
       children: /* @__PURE__ */jsxs(Flex, {
         as: "span",
         children: [icon && /* @__PURE__ */jsxs(Text, {
@@ -8230,12 +8235,12 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
           children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
         })]
       })
-    })), children && /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
-      as: "span"
-    }, paddingProps), {}, {
+    }), children && /* @__PURE__ */jsx(Box, {
+      as: "span",
+      ...paddingProps,
       children
-    }))]
-  }));
+    })]
+  });
 });
 const keyframe = keyframes(_templateObject79 || (_templateObject79 = _taggedTemplateLiteral(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = css(_templateObject80 || (_templateObject80 = _taggedTemplateLiteral(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
@@ -8253,11 +8258,11 @@ const skeletonStyle = css(_templateObject81 || (_templateObject81 = _taggedTempl
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
 const Skeleton = forwardRef(function Skeleton2(props, ref) {
   const {
-      animated = false,
-      delay,
-      radius
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded38);
+    animated = false,
+    delay,
+    radius,
+    ...restProps
+  } = props;
   const [visible, setVisible] = useState(delay ? false : true);
   useEffect(() => {
     if (!delay) {
@@ -8270,12 +8275,13 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
       clearTimeout(timeout);
     };
   }, [delay]);
-  return /* @__PURE__ */jsx(Root$4, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$4, {
+    ...restProps,
     $animated: animated,
     $radius: useArrayProp(radius),
     $visible: visible,
     ref
-  }));
+  });
 });
 const Root$3 = styled(Skeleton)(_ref26 => {
   let {
@@ -8298,65 +8304,69 @@ const Root$3 = styled(Skeleton)(_ref26 => {
 });
 const TextSkeleton = forwardRef(function TextSkeleton2(props, ref) {
   const {
-      size = 2
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded39);
+    size = 2,
+    ...restProps
+  } = props;
   const $size = useArrayProp(size);
-  return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$3, {
+    ...restProps,
     $size,
     ref,
     $style: "text"
-  }));
+  });
 });
 const LabelSkeleton = forwardRef(function TextSkeleton3(props, ref) {
   const {
-      size = 2
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded40);
+    size = 2,
+    ...restProps
+  } = props;
   const $size = useArrayProp(size);
-  return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$3, {
+    ...restProps,
     $size,
     ref,
     $style: "label"
-  }));
+  });
 });
 const HeadingSkeleton = forwardRef(function TextSkeleton4(props, ref) {
   const {
-      size = 2
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded41);
+    size = 2,
+    ...restProps
+  } = props;
   const $size = useArrayProp(size);
-  return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$3, {
+    ...restProps,
     $size,
     ref,
     $style: "heading"
-  }));
+  });
 });
 const CodeSkeleton = forwardRef(function TextSkeleton5(props, ref) {
   const {
-      size = 2
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded42);
+    size = 2,
+    ...restProps
+  } = props;
   const $size = useArrayProp(size);
-  return /* @__PURE__ */jsx(Root$3, _objectSpread(_objectSpread({}, restProps), {}, {
+  return /* @__PURE__ */jsx(Root$3, {
+    ...restProps,
     $size,
     ref,
     $style: "code"
-  }));
+  });
 });
 const Tab = forwardRef(function Tab2(props, forwardedRef) {
   const {
-      icon,
-      id,
-      focused,
-      fontSize,
-      label,
-      onClick,
-      onFocus,
-      padding = 2,
-      selected
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded43);
+    icon,
+    id,
+    focused,
+    fontSize,
+    label,
+    onClick,
+    onFocus,
+    padding = 2,
+    selected,
+    ...restProps
+  } = props;
   const elementRef = useRef(null);
   const focusedRef = useRef(false);
   const handleBlur = useCallback(() => {
@@ -8377,9 +8387,9 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
     elementRef.current = el;
     ref.current = el;
   };
-  return /* @__PURE__ */jsx(Button, _objectSpread(_objectSpread({
-    "data-ui": "Tab"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx(Button, {
+    "data-ui": "Tab",
+    ...restProps,
     "aria-selected": selected ? "true" : "false",
     fontSize,
     icon,
@@ -8395,16 +8405,16 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
     tabIndex: selected ? 0 : -1,
     text: label,
     type: "button"
-  }));
+  });
 });
 function _isReactElement(node) {
   return Boolean(node);
 }
 const TabList = forwardRef(function TabList2(props, ref) {
   const {
-      children: childrenProp
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded44);
+    children: childrenProp,
+    ...restProps
+  } = props;
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const children = useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]);
   const tabs = children.map((child, childIndex) => cloneElement(child, {
@@ -8424,29 +8434,29 @@ const TabList = forwardRef(function TabList2(props, ref) {
       setFocusedIndex(prevIndex => (prevIndex + 1) % numTabs);
     }
   }, [numTabs]);
-  return /* @__PURE__ */jsx(Inline, _objectSpread(_objectSpread({
-    "data-ui": "TabList"
-  }, restProps), {}, {
+  return /* @__PURE__ */jsx(Inline, {
+    "data-ui": "TabList",
+    ...restProps,
     onKeyDown: handleKeyDown,
     ref,
     role: "tablist",
     children: tabs
-  }));
+  });
 });
 const TabPanel = forwardRef(function TabPanel2(props, ref) {
   const {
-      flex
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded45);
-  return /* @__PURE__ */jsx(Box, _objectSpread(_objectSpread({
-    "data-ui": "TabPanel"
-  }, restProps), {}, {
+    flex,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsx(Box, {
+    "data-ui": "TabPanel",
+    ...restProps,
     flex,
     ref,
     role: "tabpanel",
     tabIndex: props.tabIndex === void 0 ? 0 : props.tabIndex,
     children: props.children
-  }));
+  });
 });
 const STATUS_CARD_TONE = {
   error: "critical",
@@ -8464,19 +8474,19 @@ const Root$2 = styled(Card)(_templateObject83 || (_templateObject83 = _taggedTem
 const TextBox = styled(Flex)(_templateObject84 || (_templateObject84 = _taggedTemplateLiteral(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
-      closable,
-      description,
-      onClose,
-      title,
-      status
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded46);
+    closable,
+    description,
+    onClose,
+    title,
+    status,
+    ...restProps
+  } = props;
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
   const role = status ? ROLES[status] : "status";
-  return /* @__PURE__ */jsx(Root$2, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsx(Root$2, {
     "data-ui": "Toast",
-    role
-  }, restProps), {}, {
+    role,
+    ...restProps,
     marginTop: 3,
     radius: 2,
     shadow: 2,
@@ -8511,7 +8521,7 @@ function Toast(props) {
         })
       })]
     })
-  }));
+  });
 }
 function useMounted() {
   const [mounted, mount] = useReducer(() => true, false);
@@ -8559,9 +8569,10 @@ function ToastProvider(props) {
       return prevState.filter(t => t.id !== id).concat([{
         dismiss,
         id,
-        params: _objectSpread(_objectSpread({}, params), {}, {
+        params: {
+          ...params,
           duration
-        })
+        }
       }]);
     });
     if (toastsRef.current[id]) {
@@ -8728,10 +8739,10 @@ globalScope[key] = globalScope[key] || createContext(null);
 const TreeContext = globalScope[key];
 const Tree = memo(forwardRef(function Tree2(props, ref) {
   const {
-      children,
-      space = 1
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded47);
+    children,
+    space = 1,
+    ...restProps
+  } = props;
   const forwardedRef = useForwardedRef(ref);
   const [focusedElement, setFocusedElement] = useState(null);
   const focusedElementRef = useRef(focusedElement);
@@ -8746,7 +8757,8 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
     stateRef.current = state;
   }, [state]);
   const registerItem = useCallback((element, path2, expanded, selected) => {
-    setState(s => _objectSpread(_objectSpread({}, s), {}, {
+    setState(s => ({
+      ...s,
       [path2]: {
         element,
         expanded
@@ -8757,7 +8769,9 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
     }
     return () => {
       setState(s => {
-        const newState = _objectSpread({}, s);
+        const newState = {
+          ...s
+        };
         delete newState[path2];
         return newState;
       });
@@ -8767,11 +8781,13 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
     setState(s => {
       const itemState = s[path2];
       if (!itemState) return s;
-      return _objectSpread(_objectSpread({}, s), {}, {
-        [path2]: _objectSpread(_objectSpread({}, itemState), {}, {
+      return {
+        ...s,
+        [path2]: {
+          ...itemState,
           expanded
-        })
-      });
+        }
+      };
     });
   }, []);
   const contextValue = useMemo(() => ({
@@ -8816,11 +8832,13 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
         setState(s => {
           const itemState2 = s[itemKey];
           if (!itemState2) return s;
-          return _objectSpread(_objectSpread({}, s), {}, {
-            [itemKey]: _objectSpread(_objectSpread({}, itemState2), {}, {
+          return {
+            ...s,
+            [itemKey]: {
+              ...itemState2,
               expanded: false
-            })
-          });
+            }
+          };
         });
       } else {
         const itemPath = itemKey.split("/");
@@ -8842,11 +8860,13 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
         setState(s => {
           const itemState = s[focusedKey];
           if (!itemState) return s;
-          return _objectSpread(_objectSpread({}, s), {}, {
-            [focusedKey]: _objectSpread(_objectSpread({}, itemState), {}, {
+          return {
+            ...s,
+            [focusedKey]: {
+              ...itemState,
               expanded: true
-            })
-          });
+            }
+          };
         });
       }
       return;
@@ -8859,16 +8879,16 @@ const Tree = memo(forwardRef(function Tree2(props, ref) {
   }, [children, forwardedRef]);
   return /* @__PURE__ */jsx(TreeContext.Provider, {
     value: contextValue,
-    children: /* @__PURE__ */jsx(Stack, _objectSpread(_objectSpread({
+    children: /* @__PURE__ */jsx(Stack, {
       as: "ul",
-      "data-ui": "Tree"
-    }, restProps), {}, {
+      "data-ui": "Tree",
+      ...restProps,
       onKeyDown: handleKeyDown,
       ref: forwardedRef,
       role: "tree",
       space,
       children
-    }))
+    })
   });
 }));
 Tree.displayName = "Tree";
@@ -8907,21 +8927,21 @@ function useTree() {
 }
 const TreeGroup = memo(function TreeGroup2(props) {
   const {
-      children,
-      expanded = false
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded48);
+    children,
+    expanded = false,
+    ...restProps
+  } = props;
   const tree = useTree();
-  return /* @__PURE__ */jsx(Stack, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsx(Stack, {
     as: "ul",
-    "data-ui": "TreeGroup"
-  }, restProps), {}, {
+    "data-ui": "TreeGroup",
+    ...restProps,
     hidden: !expanded,
     marginTop: tree.space,
     role: "group",
     space: tree.space,
     children
-  }));
+  });
 });
 const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle));
 const TreeItemBox = styled(Box).attrs({
@@ -8930,21 +8950,21 @@ const TreeItemBox = styled(Box).attrs({
 const ToggleArrowText = styled(Text)(_templateObject90 || (_templateObject90 = _taggedTemplateLiteral(["\n  & > svg {\n    transition: transform 100ms;\n  }\n"])));
 const TreeItem = memo(function TreeItem2(props) {
   const {
-      children,
-      expanded: expandedProp = false,
-      fontSize,
-      href,
-      icon,
-      id: idProp,
-      muted,
-      onClick,
-      padding = 3,
-      selected = false,
-      space = 2,
-      text,
-      weight
-    } = props,
-    restProps = _objectWithoutProperties(props, _excluded49);
+    children,
+    expanded: expandedProp = false,
+    fontSize,
+    href,
+    icon,
+    id: idProp,
+    muted,
+    onClick,
+    padding = 3,
+    selected = false,
+    space = 2,
+    text,
+    weight,
+    ...restProps
+  } = props;
   const rootRef = useRef(null);
   const treeitemRef = useRef(null);
   const tree = useTree();
@@ -8962,7 +8982,8 @@ const TreeItem = memo(function TreeItem2(props) {
   const focused = tree.focusedElement === rootRef.current;
   const expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || false;
   const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1;
-  const contextValue = useMemo(() => _objectSpread(_objectSpread({}, tree), {}, {
+  const contextValue = useMemo(() => ({
+    ...tree,
     level: tree.level + 1,
     path: itemPath
   }), [itemPath, tree]);
@@ -9020,12 +9041,12 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
   if (href) {
-    return /* @__PURE__ */jsxs(Root, _objectSpread(_objectSpread({
+    return /* @__PURE__ */jsxs(Root, {
       "data-selected": selected ? "" : void 0,
       "data-tree-id": id,
       "data-tree-key": itemKey,
-      "data-ui": "TreeItem"
-    }, restProps), {}, {
+      "data-ui": "TreeItem",
+      ...restProps,
       onClick: handleClick,
       ref: rootRef,
       role: "none",
@@ -9045,14 +9066,14 @@ const TreeItem = memo(function TreeItem2(props) {
           children
         })
       })]
-    }));
+    });
   }
-  return /* @__PURE__ */jsxs(Root, _objectSpread(_objectSpread({
+  return /* @__PURE__ */jsxs(Root, {
     "data-selected": selected ? "" : void 0,
     "data-ui": "TreeItem",
     "data-tree-id": id,
-    "data-tree-key": itemKey
-  }, restProps), {}, {
+    "data-tree-key": itemKey,
+    ...restProps,
     "aria-expanded": expanded,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -9071,7 +9092,7 @@ const TreeItem = memo(function TreeItem2(props) {
         children
       })
     })]
-  }));
+  });
 });
 export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, useRootTheme, useTheme, useToast, useTree };
 //# sourceMappingURL=index.esm.js.map