@sanity/ui 0.37.21 → 0.37.22

package/lib/sanity-ui.module.js

@@ -2630,7 +2630,7 @@ globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/createContext(null);
 
 var ThemeContext = globalScope[key$7];
 
-var _excluded$H = ["color", "layer"];
+var _excluded$I = ["color", "layer"];
 /**
  * @public
  */
@@ -2649,7 +2649,7 @@ function ThemeProvider(props) {
 
     var rootColor = themeProp.color,
         rootLayer = themeProp.layer,
-        restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$H);
+        restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$I);
 
     var colorScheme = rootColor[scheme] || rootColor.light;
     var color = colorScheme[tone] || colorScheme["default"];
@@ -3705,7 +3705,7 @@ function textBaseStyle(props) {
   return css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
 
-var _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+var _excluded$H = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
 var _templateObject$B;
 var Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
@@ -3725,7 +3725,7 @@ var Text = /*#__PURE__*/forwardRef(function Text(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       textOverflow = props.textOverflow,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$H);
 
   var children = childrenProp;
 
@@ -3885,7 +3885,7 @@ function avatarStrokeStyle() {
   };
 }
 
-var _excluded$F = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
+var _excluded$G = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
 var Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
 var Arrow = styled.div(avatarStyle.arrow);
 var BgStroke = styled.ellipse(avatarStyle.bgStroke);
@@ -3908,7 +3908,7 @@ var Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
       _props$status = props.status,
       status = _props$status === void 0 ? 'online' : _props$status,
       sizeProp = props.size,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   var as = ReactIs.isValidElementType(asProp) ? asProp : 'div';
   var size = useResponsiveProp(sizeProp, [0]);
@@ -4061,7 +4061,7 @@ function childrenToElementArray(children) {
   });
 }
 
-var _excluded$E = ["children", "maxLength", "size", "tone"];
+var _excluded$F = ["children", "maxLength", "size", "tone"];
 
 var _templateObject$z;
 var BASE_STYLES = css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
@@ -4097,7 +4097,7 @@ var AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
       maxLengthProp = _props$maxLength === void 0 ? 4 : _props$maxLength,
       _props$size = props.size,
       size = _props$size === void 0 ? 0 : _props$size,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
 
   var maxLength = Math.max(maxLengthProp, 0);
   var children = childrenToElementArray(childrenProp).filter(function (child) {
@@ -4126,7 +4126,7 @@ var AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
   }));
 });
 
-var _excluded$D = ["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"];
+var _excluded$E = ["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"];
 var Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 /**
  * @public
@@ -4163,7 +4163,7 @@ var Box = /*#__PURE__*/forwardRef(function Box(props, ref) {
       rowStart = props.rowStart,
       rowEnd = props.rowEnd,
       sizing = props.sizing,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
 
   return /*#__PURE__*/React.createElement(Root$A, _extends({
     "data-as": typeof asProp === 'string' ? asProp : undefined,
@@ -4208,7 +4208,7 @@ function labelBaseStyle(props) {
   return css(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
 }
 
-var _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+var _excluded$D = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
 var _templateObject$x;
 var Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
@@ -4227,7 +4227,7 @@ var Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       textOverflow = props.textOverflow,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   var children = childrenProp;
 
@@ -4266,7 +4266,7 @@ function badgeStyle(props) {
   };
 }
 
-var _excluded$B = ["children", "fontSize", "mode", "padding", "radius", "tone"];
+var _excluded$C = ["children", "fontSize", "mode", "padding", "radius", "tone"];
 var Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
 /**
  * @public
@@ -4283,7 +4283,7 @@ var Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
       radius = _props$radius === void 0 ? 2 : _props$radius,
       _props$tone = props.tone,
       tone = _props$tone === void 0 ? 'default' : _props$tone,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
 
   return /*#__PURE__*/React.createElement(Root$y, _extends({
     "data-ui": "Badge"
@@ -4298,7 +4298,7 @@ var Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
   }, children));
 });
 
-var _excluded$A = ["align", "as", "direction", "gap", "justify", "wrap"];
+var _excluded$B = ["align", "as", "direction", "gap", "justify", "wrap"];
 var Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
 /**
  * @public
@@ -4312,7 +4312,7 @@ var Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
       gap = props.gap,
       justify = props.justify,
       wrap = props.wrap,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
 
   return /*#__PURE__*/React.createElement(Root$x, _extends({
     "data-ui": "Flex"
@@ -4328,16 +4328,56 @@ var Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
 });
 
 var _templateObject$w, _templateObject2$k;
-var rotate$1 = keyframes(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Root$w = styled(Text)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+var rotate$1 = keyframes(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\nfrom {\n  transform: rotate(0deg);\n}\n\nto {\n  transform: rotate(360deg);\n}\n"])));
+function spinnerStyle(props) {
+  var $muted = props.$muted;
+  return css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n    animation: ", " 500ms linear infinite;\n    color: ", ";\n  "])), rotate$1, $muted ? 'var(--card-muted-fg-color)' : 'var(--card-fg-color)');
+}
+function spinnerSizeStyle(props) {
+  var $size = props.$size;
+  var _props$theme$sanity = props.theme.sanity,
+      fonts = _props$theme$sanity.fonts,
+      media = _props$theme$sanity.media;
+  return responsive(media, $size, function (size) {
+    var _fonts$text$sizes$siz = fonts.text.sizes[size],
+        ascenderHeight = _fonts$text$sizes$siz.ascenderHeight,
+        descenderHeight = _fonts$text$sizes$siz.descenderHeight,
+        lineHeight = _fonts$text$sizes$siz.lineHeight,
+        iconSize = _fonts$text$sizes$siz.iconSize;
+    var capHeight = lineHeight - ascenderHeight - descenderHeight;
+    return {
+      width: rem(capHeight),
+      height: rem(capHeight),
+      '& > svg': {
+        display: 'block',
+        width: rem(iconSize),
+        height: rem(iconSize),
+        margin: (capHeight - iconSize) / 2
+      }
+    };
+  });
+}
+
+var _excluded$A = ["muted", "size"];
+var Root$w = styled.div(spinnerStyle, spinnerSizeStyle);
 /**
  * @public
  */
 
 var Spinner = /*#__PURE__*/forwardRef(function Spinner(props, ref) {
+  var muted = props.muted,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 2 : _props$size,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+
+  var $size = useMemo(function () {
+    return Array.isArray(size) ? size : [size];
+  }, [size]);
   return /*#__PURE__*/React.createElement(Root$w, _extends({
     "data-ui": "Spinner"
-  }, props, {
+  }, restProps, {
+    "$muted": muted,
+    "$size": $size,
     ref: ref
   }), /*#__PURE__*/React.createElement(SpinnerIcon, null));
 });