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

package/dist/index.esm.js

@@ -1,5 +1,4 @@
-import { getTheme_v2, getScopedTheme } from '@sanity/ui/theme';
-export { COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_CARD_KEYS, COLOR_CONFIG_CARD_TONES, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_CARD_TONES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES, buildTheme, createColorTheme, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueKey, isColorOpacityValue, isColorTintKey, isColorTokenValue, isColorValue, multiply, parseColor, parseTokenKey, parseTokenValue, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen, defaultTheme as studioTheme } from '@sanity/ui/theme';
+import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from '@sanity/ui/theme';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
 import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
@@ -9,6 +8,16 @@ import Refractor from 'react-refractor';
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
+const createColorTheme = createColorTheme$1;
+const hexToRgb = hexToRgb$1;
+const hslToRgb = hslToRgb$1;
+const multiply = multiply$1;
+const parseColor = parseColor$1;
+const rgbToHex = rgbToHex$1;
+const rgbToHsl = rgbToHsl$1;
+const rgba = rgba$1;
+const screen = screen$1;
+const studioTheme = buildTheme();
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
 function _fillCSSObject(keys, value) {
@@ -1815,14 +1824,14 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = "online",
-    size: sizeProp = 0,
+    size: sizeProp = 1,
     ...restProps
   } = props;
-  const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
-  const size = useArrayProp(sizeProp);
   const {
     avatar
   } = useTheme_v2();
+  const as = ReactIs.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;
@@ -1844,7 +1853,12 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
       onImageLoadError(new Error("Avatar: the image failed to load"));
     }
   }, [onImageLoadError]);
-  const initialsSize = useMemo(() => size.map(s => s === 0 ? 0 : s * 2), [size]);
+  const initialsSize = useMemo(() => size.map(s => {
+    if (s === 1) return 1;
+    if (s === 2) return 3;
+    if (s === 3) return 5;
+    return 0;
+  }), [size]);
   return /* @__PURE__ */jsxs(Root$C, {
     as,
     "data-as": typeof as === "string" ? as : void 0,
@@ -1907,6 +1921,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
         children: /* @__PURE__ */jsx(InitialsLabel, {
           forwardedAs: "span",
           size: initialsSize,
+          weight: "medium",
           children: initials
         })
       })
@@ -1918,62 +1933,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
-  } = getTheme_v2(props.theme);
-  return 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 && css(_a$A || (_a$A = __template$A(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && 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.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$1 = styled.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 = 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__ */jsx(SpanWithTextOverflow$1, {
-      children
-    });
-  }
-  return /* @__PURE__ */jsx(Root$B, {
-    "data-ui": "Text",
-    ...restProps,
-    $accent: accent,
-    $align: useArrayProp(align),
-    $muted: muted,
-    ref,
-    $size: useArrayProp(size),
-    $weight: weight,
-    children: /* @__PURE__ */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,
@@ -1993,23 +1953,28 @@ function _avatarCounterBaseStyle(props) {
   const {
     space
   } = getTheme_v2(props.theme);
-  return 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 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.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
+const Root$B = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
   const {
     count,
-    size: sizeProp = 0
+    size: sizeProp = 1
   } = props;
   const size = useArrayProp(sizeProp);
-  const counterSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
-  return /* @__PURE__ */jsx(Root$A, {
+  const fontSize = useMemo(() => size.map(s => {
+    if (s === 1) return 1;
+    if (s === 2) return 3;
+    if (s === 3) return 5;
+    return 0;
+  }), [size]);
+  return /* @__PURE__ */jsx(Root$B, {
     $size: size,
     "data-ui": "AvatarCounter",
     ref,
-    children: /* @__PURE__ */jsx(Text, {
+    children: /* @__PURE__ */jsx(Label, {
       as: "span",
-      size: counterSize,
+      size: fontSize,
       weight: "medium",
       children: count
     })
@@ -2019,13 +1984,13 @@ function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
   return childrenArray.filter(node => isElement$1(node) || 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 = 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 = 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;
 }
@@ -2044,12 +2009,12 @@ function responsiveAvatarStackSizeStyle(props) {
     };
   });
 }
-const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
+const Root$A = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
 const AvatarStack = 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");
@@ -2059,14 +2024,15 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */jsxs(Root$z, {
+  return /* @__PURE__ */jsxs(Root$A, {
     "data-ui": "AvatarStack",
     ...restProps,
     ref,
     $size: size,
     children: [len === 0 && /* @__PURE__ */jsx("div", {
       children: /* @__PURE__ */jsx(AvatarCounter, {
-        count: len
+        count: len,
+        size
       })
     }), len !== 0 && extraCount > 1 && /* @__PURE__ */jsx("div", {
       children: /* @__PURE__ */jsx(AvatarCounter, {
@@ -2080,7 +2046,7 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
     }, String(childIndex)))]
   });
 });
-const Root$y = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
+const Root$z = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 const Box = forwardRef(function Box2(props, ref) {
   const {
     as: asProp = "div",
@@ -2111,7 +2077,7 @@ const Box = forwardRef(function Box2(props, ref) {
     sizing,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$y, {
+  return /* @__PURE__ */jsx(Root$z, {
     "data-as": typeof asProp === "string" ? asProp : void 0,
     "data-ui": "Box",
     ...restProps,
@@ -2145,6 +2111,61 @@ const Box = 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
+  } = getTheme_v2(props.theme);
+  return 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 && css(_a$y || (_a$y = __template$y(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && 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.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
+const SpanWithTextOverflow$1 = styled.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 = 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__ */jsx(SpanWithTextOverflow$1, {
+      children
+    });
+  }
+  return /* @__PURE__ */jsx(Root$y, {
+    "data-ui": "Text",
+    ...restProps,
+    $accent: accent,
+    $align: useArrayProp(align),
+    $muted: muted,
+    ref,
+    $size: useArrayProp(size),
+    $weight: weight,
+    children: /* @__PURE__ */jsx("span", {
+      children
+    })
+  });
+});
 function badgeStyle(props) {
   const {
     $tone
@@ -2978,7 +2999,7 @@ var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
 }));
 var _a$o;
 function kbdStyle() {
-  return css(_a$o || (_a$o = __template$o(["\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$o || (_a$o = __template$o(["\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 const Root$m = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
@@ -4776,7 +4797,7 @@ const Tooltip = 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,
@@ -7605,5 +7626,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Arrow, Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, focusFirstDescendant, focusLastDescendant, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useTheme_v2, useToast, useTooltipDelayGroup, useTree };
+export { Arrow, Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useTheme_v2, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map