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

package/dist/index.d.ts

@@ -3426,6 +3426,7 @@ export declare interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
+  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
@@ -3541,6 +3542,7 @@ export declare interface TooltipDelayGroupProviderProps {
 export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
+  arrow?: boolean
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
   content?: React.ReactNode

package/dist/index.esm.js

@@ -3823,13 +3823,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,
@@ -4869,7 +4869,8 @@ const avatarStyle = {
   arrow: avatarArrowStyle,
   bgStroke: avatarBgStrokeStyle,
   stroke: avatarStrokeStyle,
-  initials: avatarInitialsStyle
+  initials: avatarInitialsStyle,
+  image: avatarImageStyle
 };
 function avatarArrowStyle() {
   return {
@@ -4976,6 +4977,11 @@ function responsiveAvatarSizeStyle(props) {
     };
   });
 }
+function avatarImageStyle() {
+  return {
+    position: "relative"
+  };
+}
 function avatarInitialsStyle(props) {
   const {
     theme
@@ -5017,6 +5023,7 @@ const Arrow = styled.div(avatarStyle.arrow);
 const BgStroke = styled.ellipse(avatarStyle.bgStroke);
 const Stroke = styled.ellipse(avatarStyle.stroke);
 const Initials = styled.div(avatarStyle.initials);
+const Image = styled.svg(avatarStyle.image);
 const Avatar = forwardRef(function Avatar2(props, ref) {
   const {
     __unstable_hideInnerStroke,
@@ -5081,7 +5088,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
           fill: color
         })
       })
-    }), !imageFailed && src && /* @__PURE__ */jsxs("svg", {
+    }), !imageFailed && src && /* @__PURE__ */jsxs(Image, {
       viewBox: "0 0 ".concat(_sizeRem, " ").concat(_sizeRem),
       fill: "none",
       children: [/* @__PURE__ */jsx("defs", {
@@ -5320,7 +5327,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",
@@ -7803,6 +7811,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"],
@@ -7898,6 +7907,7 @@ const Tooltip = 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,
@@ -7932,19 +7942,21 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       rootBoundary
     }));
     ret.push(offset({
-      mainAxis: 3
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
     }));
     ret.push(shift({
       boundary: boundaryElement || void 0,
       rootBoundary,
       padding: DEFAULT_TOOLTIP_PADDING
     }));
-    ret.push(arrow({
-      element: arrowRef,
-      padding: 2
-    }));
+    if (arrowProp) {
+      ret.push(arrow({
+        element: arrowRef,
+        padding: 2
+      }));
+    }
     return ret;
-  }, [boundaryElement, fallbackPlacements]);
+  }, [arrowProp, boundaryElement, fallbackPlacements]);
   const {
     floatingStyles,
     placement,
@@ -8104,7 +8116,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       radius: 3,
       scheme,
       shadow,
-      children: [content, /* @__PURE__ */jsx(TooltipArrow, {
+      children: [content, arrowProp && /* @__PURE__ */jsx(TooltipArrow, {
         ref: setArrow,
         style: arrowStyle
       })]
@@ -8249,7 +8261,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     padding: paddingProp = 3,
     popover = EMPTY_RECORD,
     prefix,
-    radius = 3,
+    radius = 2,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,
@@ -10074,6 +10086,7 @@ function Toast(props) {
     closable,
     description,
     onClose,
+    radius = 3,
     title,
     status,
     ...restProps
@@ -10085,7 +10098,7 @@ function Toast(props) {
     role,
     ...restProps,
     marginTop: 3,
-    radius: 2,
+    radius,
     shadow: 2,
     tone: cardTone,
     children: /* @__PURE__ */jsxs(Flex, {
@@ -10096,7 +10109,8 @@ function Toast(props) {
         children: /* @__PURE__ */jsxs(Stack, {
           space: 3,
           children: [title && /* @__PURE__ */jsx(Text, {
-            weight: "semibold",
+            size: 1,
+            weight: "medium",
             children: title
           }), description && /* @__PURE__ */jsx(Text, {
             muted: true,