@sanity/ui 2.0.0-alpha.21 → 2.0.0-alpha.23

package/dist/index.js

@@ -3836,13 +3836,13 @@ const studioTheme = {
   avatar: {
     sizes: [{
       distance: -3,
-      size: 23
+      size: 19
     }, {
       distance: -6,
-      size: 33
+      size: 31
     }, {
       distance: -9,
-      size: 53
+      size: 51
     }],
     focusRing: {
       offset: 0,
@@ -4882,7 +4882,8 @@ const avatarStyle = {
   arrow: avatarArrowStyle,
   bgStroke: avatarBgStrokeStyle,
   stroke: avatarStrokeStyle,
-  initials: avatarInitialsStyle
+  initials: avatarInitialsStyle,
+  image: avatarImageStyle
 };
 function avatarArrowStyle() {
   return {
@@ -4989,6 +4990,11 @@ function responsiveAvatarSizeStyle(props) {
     };
   });
 }
+function avatarImageStyle() {
+  return {
+    position: "relative"
+  };
+}
 function avatarInitialsStyle(props) {
   const {
     theme
@@ -5030,6 +5036,7 @@ const Arrow = styled__default.default.div(avatarStyle.arrow);
 const BgStroke = styled__default.default.ellipse(avatarStyle.bgStroke);
 const Stroke = styled__default.default.ellipse(avatarStyle.stroke);
 const Initials = styled__default.default.div(avatarStyle.initials);
+const Image = styled__default.default.svg(avatarStyle.image);
 const Avatar = react.forwardRef(function Avatar2(props, ref) {
   const {
     __unstable_hideInnerStroke,
@@ -5094,7 +5101,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
           fill: color
         })
       })
-    }), !imageFailed && src && /* @__PURE__ */jsxRuntime.jsxs("svg", {
+    }), !imageFailed && src && /* @__PURE__ */jsxRuntime.jsxs(Image, {
       viewBox: "0 0 ".concat(_sizeRem, " ").concat(_sizeRem),
       fill: "none",
       children: [/* @__PURE__ */jsxRuntime.jsx("defs", {
@@ -5333,7 +5340,8 @@ function badgeStyle(props) {
   const palette = theme.sanity.color[$mode === "outline" ? "muted" : "solid"];
   const color = palette[$tone] || palette.default;
   return {
-    backgroundColor: color.enabled.bg,
+    "--card-fg-color": color.enabled.fg,
+    backgroundColor: color.enabled.bg2,
     color: color.enabled.fg,
     boxShadow: "inset 0 0 0 1px ".concat(color.enabled.border),
     cursor: "default",
@@ -7816,6 +7824,7 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
+const DEFAULT_TOOLTIP_DISTANCE = 4;
 const DEFAULT_TOOLTIP_PADDING = 4;
 const DEFAULT_FALLBACK_PLACEMENTS = {
   top: ["bottom", "left", "right"],
@@ -7911,6 +7920,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
   const {
+    arrow: arrowProp = true,
     boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
     children: childProp,
     content,
@@ -7945,19 +7955,21 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
       rootBoundary
     }));
     ret.push(reactDom$1.offset({
-      mainAxis: 3
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
     }));
     ret.push(reactDom$1.shift({
       boundary: boundaryElement || void 0,
       rootBoundary,
       padding: DEFAULT_TOOLTIP_PADDING
     }));
-    ret.push(reactDom$1.arrow({
-      element: arrowRef,
-      padding: 2
-    }));
+    if (arrowProp) {
+      ret.push(reactDom$1.arrow({
+        element: arrowRef,
+        padding: 2
+      }));
+    }
     return ret;
-  }, [boundaryElement, fallbackPlacements]);
+  }, [arrowProp, boundaryElement, fallbackPlacements]);
   const {
     floatingStyles,
     placement,
@@ -8117,7 +8129,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
       radius: 3,
       scheme,
       shadow,
-      children: [content, /* @__PURE__ */jsxRuntime.jsx(TooltipArrow, {
+      children: [content, arrowProp && /* @__PURE__ */jsxRuntime.jsx(TooltipArrow, {
         ref: setArrow,
         style: arrowStyle
       })]
@@ -8262,7 +8274,7 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     padding: paddingProp = 3,
     popover = EMPTY_RECORD,
     prefix,
-    radius = 3,
+    radius = 2,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,
@@ -10087,6 +10099,7 @@ function Toast(props) {
     closable,
     description,
     onClose,
+    radius = 3,
     title,
     status,
     ...restProps
@@ -10098,7 +10111,7 @@ function Toast(props) {
     role,
     ...restProps,
     marginTop: 3,
-    radius: 2,
+    radius,
     shadow: 2,
     tone: cardTone,
     children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
@@ -10109,7 +10122,8 @@ function Toast(props) {
         children: /* @__PURE__ */jsxRuntime.jsxs(Stack, {
           space: 3,
           children: [title && /* @__PURE__ */jsxRuntime.jsx(Text, {
-            weight: "semibold",
+            size: 1,
+            weight: "medium",
             children: title
           }), description && /* @__PURE__ */jsxRuntime.jsx(Text, {
             muted: true,