@sanity/ui 0.37.21 → 0.37.22

package/lib/sanity-ui.modern.js

@@ -2544,7 +2544,7 @@ globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/createContext(null);
 
 const ThemeContext = globalScope[key$7];
 
-const _excluded$H = ["color", "layer"];
+const _excluded$I = ["color", "layer"];
 /**
  * @public
  */
@@ -2564,7 +2564,7 @@ function ThemeProvider(props) {
       color: rootColor,
       layer: rootLayer
     } = themeProp,
-          restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$H);
+          restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$I);
 
     const colorScheme = rootColor[scheme] || rootColor.light;
     const color = colorScheme[tone] || colorScheme.default;
@@ -3870,7 +3870,7 @@ function textBaseStyle(props) {
     `)), theme.sanity.fonts.code.family, weights.bold);
 }
 
-const _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+const _excluded$H = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
 let _$z = t => t,
     _t$B;
@@ -3895,7 +3895,7 @@ const Text = /*#__PURE__*/forwardRef(function Text(props, ref) {
     textOverflow,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$H);
 
   let children = childrenProp;
 
@@ -4066,7 +4066,7 @@ function avatarStrokeStyle() {
   };
 }
 
-const _excluded$F = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
+const _excluded$G = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
 const Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
 const Arrow = styled.div(avatarStyle.arrow);
 const BgStroke = styled.ellipse(avatarStyle.bgStroke);
@@ -4089,7 +4089,7 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
     status = 'online',
     size: sizeProp
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div';
   const size = useResponsiveProp(sizeProp, [0]);
@@ -4246,7 +4246,7 @@ function childrenToElementArray(children) {
   return childrenArray.filter(node => isElement(node) || isFragment(node) || typeof node === 'string');
 }
 
-const _excluded$E = ["children", "maxLength", "size", "tone"];
+const _excluded$F = ["children", "maxLength", "size", "tone"];
 
 let _$x = t => t,
     _t$z;
@@ -4296,7 +4296,7 @@ const AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
     maxLength: maxLengthProp = 4,
     size = 0
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
 
   const maxLength = Math.max(maxLengthProp, 0);
   const children = childrenToElementArray(childrenProp).filter(child => typeof child !== 'string');
@@ -4321,7 +4321,7 @@ const AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
   }))));
 });
 
-const _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"];
+const _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"];
 const Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 /**
  * @public
@@ -4356,7 +4356,7 @@ const Box = /*#__PURE__*/forwardRef(function Box(props, ref) {
     rowEnd,
     sizing
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
 
   return /*#__PURE__*/React.createElement(Root$A, _extends({
     "data-as": typeof asProp === 'string' ? asProp : undefined,
@@ -4432,7 +4432,7 @@ function labelBaseStyle(props) {
     `)), fonts.code.family);
 }
 
-const _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+const _excluded$D = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
 let _$v = t => t,
     _t$x;
@@ -4457,7 +4457,7 @@ const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
     textOverflow,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   let children = childrenProp;
 
@@ -4498,7 +4498,7 @@ function badgeStyle(props) {
   };
 }
 
-const _excluded$B = ["children", "fontSize", "mode", "padding", "radius", "tone"];
+const _excluded$C = ["children", "fontSize", "mode", "padding", "radius", "tone"];
 const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
 /**
  * @public
@@ -4513,7 +4513,7 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     radius = 2,
     tone = 'default'
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
 
   return /*#__PURE__*/React.createElement(Root$y, _extends({
     "data-ui": "Badge"
@@ -4528,7 +4528,7 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
   }, children));
 });
 
-const _excluded$A = ["align", "as", "direction", "gap", "justify", "wrap"];
+const _excluded$B = ["align", "as", "direction", "gap", "justify", "wrap"];
 const Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
 /**
  * @public
@@ -4543,7 +4543,7 @@ const Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
     justify,
     wrap
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
 
   return /*#__PURE__*/React.createElement(Root$x, _extends({
     "data-ui": "Flex"
@@ -4562,27 +4562,71 @@ let _$u = t => t,
     _t$w,
     _t2$k;
 const rotate$1 = keyframes(_t$w || (_t$w = _$u`
-  from {
-    transform: rotate(0deg);
-  }
+from {
+  transform: rotate(0deg);
+}
 
-  to {
-    transform: rotate(360deg);
-  }
+to {
+  transform: rotate(360deg);
+}
 `));
-const Root$w = styled(Text)(_t2$k || (_t2$k = _$u`
-  & > span > svg {
+function spinnerStyle(props) {
+  const {
+    $muted
+  } = props;
+  return css(_t2$k || (_t2$k = _$u`
     animation: ${0} 500ms linear infinite;
-  }
-`), rotate$1);
+    color: ${0};
+  `), rotate$1, $muted ? 'var(--card-muted-fg-color)' : 'var(--card-fg-color)');
+}
+function spinnerSizeStyle(props) {
+  const {
+    $size
+  } = props;
+  const {
+    fonts,
+    media
+  } = props.theme.sanity;
+  return responsive(media, $size, size => {
+    const {
+      ascenderHeight,
+      descenderHeight,
+      lineHeight,
+      iconSize
+    } = fonts.text.sizes[size];
+    const capHeight = lineHeight - ascenderHeight - descenderHeight;
+    return {
+      width: rem(capHeight),
+      height: rem(capHeight),
+      '& > svg': {
+        display: 'block',
+        width: rem(iconSize),
+        height: rem(iconSize),
+        margin: (capHeight - iconSize) / 2
+      }
+    };
+  });
+}
+
+const _excluded$A = ["muted", "size"];
+const Root$w = styled.div(spinnerStyle, spinnerSizeStyle);
 /**
  * @public
  */
 
 const Spinner = /*#__PURE__*/forwardRef(function Spinner(props, ref) {
+  const {
+    muted,
+    size = 2
+  } = props,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+
+  const $size = useMemo(() => 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));
 });