@sanity/ui 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/index.js

@@ -1827,14 +1827,14 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = "online",
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props;
-  const as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div";
-  const size = useArrayProp(sizeProp);
   const {
     avatar
   } = useTheme_v2();
+  const as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div";
+  const size = useArrayProp(sizeProp);
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0];
   const _sizeRem = avatarSize.size;
   const _radius = _sizeRem / 2;
@@ -1856,7 +1856,12 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
       onImageLoadError(new Error("Avatar: the image failed to load"));
     }
   }, [onImageLoadError]);
-  const initialsSize = react.useMemo(() => size.map(s => s === 0 ? 0 : s * 2), [size]);
+  const initialsSize = react.useMemo(() => size.map(s => {
+    if (s === 1) return 1;
+    if (s === 2) return 3;
+    if (s === 3) return 5;
+    return 0;
+  }), [size]);
   return /* @__PURE__ */jsxRuntime.jsxs(Root$C, {
     as,
     "data-as": typeof as === "string" ? as : void 0,
@@ -1919,6 +1924,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
         children: /* @__PURE__ */jsxRuntime.jsx(InitialsLabel, {
           forwardedAs: "span",
           size: initialsSize,
+          weight: "medium",
           children: initials
         })
       })
@@ -1930,62 +1936,7 @@ var __defProp$B = Object.defineProperty;
 var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", {
   value: __freeze$A(raw || cooked.slice())
 }));
-var _a$A, _b$l, _c$a;
-function textBaseStyle(props) {
-  const {
-    $accent,
-    $muted
-  } = props;
-  const {
-    font
-  } = theme.getTheme_v2(props.theme);
-  return styled.css(_c$a || (_c$a = __template$A(["\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:\n          0 0 0 1px var(--card-bg-color),\n          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    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n      color: var(--card-icon-color);\n\n      & path {\n        vector-effect: non-scaling-stroke !important;\n      }\n    }\n  "])), $accent && styled.css(_a$A || (_a$A = __template$A(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$l || (_b$l = __template$A(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.text.weights.bold);
-}
-var __freeze$z = Object.freeze;
-var __defProp$A = Object.defineProperty;
-var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
-  value: __freeze$z(raw || cooked.slice())
-}));
-var _a$z;
-const Root$B = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$1 = styled__default.default.span(_a$z || (_a$z = __template$z(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
-const Text = react.forwardRef(function Text2(props, ref) {
-  const {
-    accent = false,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props;
-  let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
-      children
-    });
-  }
-  return /* @__PURE__ */jsxRuntime.jsx(Root$B, {
-    "data-ui": "Text",
-    ...restProps,
-    $accent: accent,
-    $align: useArrayProp(align),
-    $muted: muted,
-    ref,
-    $size: useArrayProp(size),
-    $weight: weight,
-    children: /* @__PURE__ */jsxRuntime.jsx("span", {
-      children
-    })
-  });
-});
-var __freeze$y = Object.freeze;
-var __defProp$z = Object.defineProperty;
-var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
-  value: __freeze$y(raw || cooked.slice())
-}));
-var _a$y;
+var _a$A;
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
     avatar,
@@ -2005,23 +1956,28 @@ function _avatarCounterBaseStyle(props) {
   const {
     space
   } = theme.getTheme_v2(props.theme);
-  return styled.css(_a$y || (_a$y = __template$y(["\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(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(space[2]));
 }
-const Root$A = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
+const Root$B = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
   const {
     count,
-    size: sizeProp = 0
+    size: sizeProp = 1
   } = props;
   const size = useArrayProp(sizeProp);
-  const counterSize = react.useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
-  return /* @__PURE__ */jsxRuntime.jsx(Root$A, {
+  const fontSize = react.useMemo(() => size.map(s => {
+    if (s === 1) return 1;
+    if (s === 2) return 3;
+    if (s === 3) return 5;
+    return 0;
+  }), [size]);
+  return /* @__PURE__ */jsxRuntime.jsx(Root$B, {
     $size: size,
     "data-ui": "AvatarCounter",
     ref,
-    children: /* @__PURE__ */jsxRuntime.jsx(Text, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Label, {
       as: "span",
-      size: counterSize,
+      size: fontSize,
       weight: "medium",
       children: count
     })
@@ -2031,13 +1987,13 @@ function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
   return childrenArray.filter(node => ReactIs.isElement(node) || ReactIs.isFragment(node) || typeof node === "string");
 }
-var __freeze$x = Object.freeze;
-var __defProp$y = Object.defineProperty;
-var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
-  value: __freeze$x(raw || cooked.slice())
+var __freeze$z = Object.freeze;
+var __defProp$A = Object.defineProperty;
+var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
+  value: __freeze$z(raw || cooked.slice())
 }));
-var _a$x;
-const BASE_STYLES = styled.css(_a$x || (_a$x = __template$x(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+var _a$z;
+const BASE_STYLES = styled.css(_a$z || (_a$z = __template$z(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
 function avatarStackStyle() {
   return BASE_STYLES;
 }
@@ -2056,12 +2012,12 @@ function responsiveAvatarStackSizeStyle(props) {
     };
   });
 }
-const Root$z = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
+const Root$A = styled__default.default.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
 const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props;
   const children = childrenToElementArray(childrenProp).filter(child => typeof child !== "string");
@@ -2071,14 +2027,15 @@ const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$z, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$A, {
     "data-ui": "AvatarStack",
     ...restProps,
     ref,
     $size: size,
     children: [len === 0 && /* @__PURE__ */jsxRuntime.jsx("div", {
       children: /* @__PURE__ */jsxRuntime.jsx(AvatarCounter, {
-        count: len
+        count: len,
+        size
       })
     }), len !== 0 && extraCount > 1 && /* @__PURE__ */jsxRuntime.jsx("div", {
       children: /* @__PURE__ */jsxRuntime.jsx(AvatarCounter, {
@@ -2092,7 +2049,7 @@ const AvatarStack = react.forwardRef(function AvatarStack2(props, ref) {
     }, String(childIndex)))]
   });
 });
-const Root$y = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
+const Root$z = styled__default.default.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 const Box = react.forwardRef(function Box2(props, ref) {
   const {
     as: asProp = "div",
@@ -2123,7 +2080,7 @@ const Box = react.forwardRef(function Box2(props, ref) {
     sizing,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$y, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$z, {
     "data-as": typeof asProp === "string" ? asProp : void 0,
     "data-ui": "Box",
     ...restProps,
@@ -2157,6 +2114,61 @@ const Box = react.forwardRef(function Box2(props, ref) {
     children: props.children
   });
 });
+var __freeze$y = Object.freeze;
+var __defProp$z = Object.defineProperty;
+var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
+  value: __freeze$y(raw || cooked.slice())
+}));
+var _a$y, _b$l, _c$a;
+function textBaseStyle(props) {
+  const {
+    $accent,
+    $muted
+  } = props;
+  const {
+    font
+  } = theme.getTheme_v2(props.theme);
+  return styled.css(_c$a || (_c$a = __template$y(["\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:\n          0 0 0 1px var(--card-bg-color),\n          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    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n      color: var(--card-icon-color);\n\n      & path {\n        vector-effect: non-scaling-stroke !important;\n      }\n    }\n  "])), $accent && styled.css(_a$y || (_a$y = __template$y(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$l || (_b$l = __template$y(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.text.weights.bold);
+}
+var __freeze$x = Object.freeze;
+var __defProp$y = Object.defineProperty;
+var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
+  value: __freeze$x(raw || cooked.slice())
+}));
+var _a$x;
+const Root$y = styled__default.default.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
+const SpanWithTextOverflow$1 = styled__default.default.span(_a$x || (_a$x = __template$x(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const Text = react.forwardRef(function Text2(props, ref) {
+  const {
+    accent = false,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props;
+  let children = childrenProp;
+  if (textOverflow === "ellipsis") {
+    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
+      children
+    });
+  }
+  return /* @__PURE__ */jsxRuntime.jsx(Root$y, {
+    "data-ui": "Text",
+    ...restProps,
+    $accent: accent,
+    $align: useArrayProp(align),
+    $muted: muted,
+    ref,
+    $size: useArrayProp(size),
+    $weight: weight,
+    children: /* @__PURE__ */jsxRuntime.jsx("span", {
+      children
+    })
+  });
+});
 function badgeStyle(props) {
   const {
     $tone
@@ -4788,7 +4800,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     content,
     disabled,
     fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a2 = props.placement) != null ? _a2 : "bottom"],
-    padding = 3,
+    padding = 2,
     placement: placementProp = "bottom",
     portal: portalProp,
     radius = 2,