@sanity/ui 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/index.js

@@ -3836,16 +3836,16 @@ const studioTheme = {
   avatar: {
     sizes: [{
       distance: -3,
-      size: 25
+      size: 23
     }, {
       distance: -6,
-      size: 35
+      size: 33
     }, {
       distance: -9,
-      size: 55
+      size: 53
     }],
     focusRing: {
-      offset: 1,
+      offset: 0,
       width: 1
     }
   },
@@ -5017,7 +5017,7 @@ function avatarBgStrokeStyle() {
 }
 function avatarStrokeStyle() {
   return {
-    strokeWidth: "3px",
+    strokeWidth: "2px",
     '[data-status="editing"] &': {
       strokeDasharray: "2 4",
       strokeLinecap: "round"
@@ -5039,6 +5039,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
+    hideInnerStroke,
     status = "online",
     size: sizeProp = 0,
     ...restProps
@@ -5113,7 +5114,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
         cy: _radius,
         r: _radius,
         fill: "url(#".concat(imageId, ")")
-      }), /* @__PURE__ */jsxRuntime.jsx(BgStroke, {
+      }), !hideInnerStroke && /* @__PURE__ */jsxRuntime.jsx(BgStroke, {
         cx: _radius,
         cy: _radius,
         rx: _radius,
@@ -5132,9 +5133,8 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
         children: /* @__PURE__ */jsxRuntime.jsx(Text, {
           as: "span",
           size: initialsSize,
-          children: /* @__PURE__ */jsxRuntime.jsx("strong", {
-            children: initials
-          })
+          weight: "medium",
+          children: initials
         })
       })
     })]
@@ -5168,7 +5168,7 @@ function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return styled.css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return styled.css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
 }
 const Root$C = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
@@ -5185,9 +5185,8 @@ const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
     children: /* @__PURE__ */jsxRuntime.jsx(Text, {
       as: "span",
       size: counterSize,
-      children: /* @__PURE__ */jsxRuntime.jsx("strong", {
-        children: count
-      })
+      weight: "medium",
+      children: count
     })
   });
 });
@@ -5452,7 +5451,7 @@ function buttonBaseStyles(_ref24) {
   let {
     $width
   } = _ref24;
-  return styled.css(_b$k || (_b$k = __template$x(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    ", "\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])), $width === "fill" && styled.css(_a$x || (_a$x = __template$x(["\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
+  return styled.css(_b$k || (_b$k = __template$x(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    ", "\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])), $width === "fill" && styled.css(_a$x || (_a$x = __template$x(["\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
 const buttonTheme = {
   border: {
@@ -5630,7 +5629,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return styled.css(_b$j || (_b$j = __template$v(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && styled.css(_a$v || (_a$v = __template$v(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return styled.css(_b$j || (_b$j = __template$v(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && styled.css(_a$v || (_a$v = __template$v(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _a2, _b2;
@@ -7328,7 +7327,7 @@ var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
 }));
 var _a$j, _b$c, _c$7, _d$5;
 function rootStyle() {
-  return styled.css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
@@ -7994,19 +7993,21 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   const closeDelayProp = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.close) || 0;
   const openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp;
   const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
-  const handleIsOpenChange = react.useCallback(open => {
+  const handleIsOpenChange = react.useCallback((open, immediate) => {
     if (isInsideGroup) {
       if (open) {
-        delayGroupContext.setIsGroupActive(open, openDelay);
-        delayGroupContext.setOpenTooltipId(tooltipId, openDelay);
+        const groupedOpenDelay = immediate ? 0 : openDelay;
+        delayGroupContext.setIsGroupActive(open, groupedOpenDelay);
+        delayGroupContext.setOpenTooltipId(tooltipId, groupedOpenDelay);
       } else {
         const minimumGroupDeactivateDelay = 200;
         const groupDeactivateDelay = closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay;
         delayGroupContext.setIsGroupActive(open, groupDeactivateDelay);
-        delayGroupContext.setOpenTooltipId(null, closeDelay);
+        delayGroupContext.setOpenTooltipId(null, immediate ? 0 : closeDelay);
       }
     } else {
-      setIsOpen(open, open ? openDelay : closeDelay);
+      const standaloneDelay = immediate ? 0 : open ? openDelay : closeDelay;
+      setIsOpen(open, standaloneDelay);
     }
   }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
   const handleBlur = react.useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
@@ -8035,6 +8036,18 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     if (!content) handleIsOpenChange(false);
   }, [content, handleIsOpenChange]);
   react.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
+  react.useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
+      if (event.key === "Escape") {
+        handleIsOpenChange(false, true);
+      }
+    }
+    window.addEventListener("keydown", handleWindowKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleWindowKeyDown);
+    };
+  }, [handleIsOpenChange, showTooltip]);
   const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();
@@ -9510,7 +9523,7 @@ var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
 }));
 var _a$7, _b$4;
 function selectableBaseStyle() {
-  return styled.css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return styled.css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
   var _a2, _b2;