@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/utils/portal/usePortal.ts

@@ -0,0 +1,24 @@
+import {useContext} from 'react'
+import {isRecord} from '../../lib/isRecord'
+import {PortalContext} from './portalContext'
+import {PortalContextValue} from './types'
+
+/**
+ * @public
+ */
+export function usePortal(): PortalContextValue {
+  const value = useContext(PortalContext)
+
+  if (!value) {
+    throw new Error('usePortal(): missing context value')
+  }
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 0.0) {
+    throw new Error('usePortal(): the context value is not compatible')
+  }
+
+  return value
+}

package/src/utils/srOnly/index.ts

@@ -0,0 +1 @@
+export * from './srOnly'

package/src/utils/srOnly/srOnly.tsx

@@ -0,0 +1,34 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+
+/**
+ * @public
+ */
+export interface SrOnlyProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  children?: React.ReactNode
+}
+
+const Root = styled.div`
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  overflow: hidden;
+`
+
+/**
+ * @public
+ */
+export const SrOnly = forwardRef(function SrOnly(
+  props: SrOnlyProps & Omit<React.HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const {as, children} = props
+
+  return (
+    <Root aria-hidden as={as} data-ui="SrOnly" ref={ref}>
+      {children}
+    </Root>
+  )
+})

package/src/utils/virtualList/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/utils/virtualList/__workshop__/changingProps.tsx

@@ -0,0 +1,36 @@
+import {Box, Card, Text, VirtualList} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+
+const data = Array.from(new Array(1000)).map((_, key) => ({key}))
+
+export default function ChangingProps() {
+  const [expanded, setExpanded] = useState(false)
+
+  const toggleExpand = useCallback(() => setExpanded((v) => !v), [])
+
+  const renderItem = useCallback(
+    (item: {key: number}) => (
+      <Card
+        as="button"
+        onClick={toggleExpand}
+        paddingX={4}
+        paddingY={expanded ? 5 : 4}
+        radius={2}
+        tone="primary"
+      >
+        <Text>Item #{item.key}</Text>
+      </Card>
+    ),
+    [expanded, toggleExpand]
+  )
+
+  return (
+    <Box padding={4}>
+      <Box marginBottom={5}>
+        <Text size={1}>Click any item to toggle expanded view</Text>
+      </Box>
+
+      <VirtualList gap={expanded ? 4 : 2} items={data} renderItem={renderItem} />
+    </Box>
+  )
+}

package/src/utils/virtualList/__workshop__/elementScroll.tsx

@@ -0,0 +1,24 @@
+import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
+import {useCallback} from 'react'
+
+const data = Array.from(new Array(1000)).map((_, key) => ({key}))
+
+export default function ElementScroll() {
+  const renderItem = useCallback((item: {key: number}) => {
+    return (
+      <Card padding={3} radius={2} shadow={1}>
+        <Text>Item #{item.key}</Text>
+      </Card>
+    )
+  }, [])
+
+  return (
+    <Box height="fill" padding={4} sizing="border">
+      <Card height="fill" overflow="auto" padding={4} shadow={1} sizing="border">
+        <Container width={1}>
+          <VirtualList gap={2} items={data} renderItem={renderItem} />
+        </Container>
+      </Card>
+    </Box>
+  )
+}

package/src/utils/virtualList/__workshop__/index.ts

@@ -0,0 +1,29 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'utils/virtual-list',
+  title: 'VirtualList',
+  stories: [
+    {
+      name: 'window-scroll',
+      title: 'Window scroll',
+      component: lazy(() => import('./windowScrolll')),
+    },
+    {
+      name: 'element-scroll',
+      title: 'Element scroll',
+      component: lazy(() => import('./elementScroll')),
+    },
+    {
+      name: 'infinite-list',
+      title: 'Infinite list',
+      component: lazy(() => import('./infiniteList')),
+    },
+    {
+      name: 'changing-props',
+      title: 'Changing props',
+      component: lazy(() => import('./changingProps')),
+    },
+  ],
+})

package/src/utils/virtualList/__workshop__/infiniteList.tsx

@@ -0,0 +1,48 @@
+import {Box, Card, Text, VirtualList, VirtualListChangeOpts} from '@sanity/ui'
+import {useCallback, useRef, useState} from 'react'
+
+interface Item {
+  key: string
+}
+
+function getData(len: number, offsetIndex = 0): Item[] {
+  return Array.from(new Array(len)).map((_, index) => ({key: String(offsetIndex + index)}))
+}
+
+const ITEMS_PER_PAGE = 1000
+
+export default function InfiniteList() {
+  const [data, setData] = useState<Item[]>(() => getData(ITEMS_PER_PAGE))
+  const offsetRef = useRef(0)
+
+  const getItemKey = useCallback((item: Item) => `item-${item.key}`, [])
+
+  const handleChange = useCallback((opts: VirtualListChangeOpts) => {
+    const maxIndex = (offsetRef.current + 1) * ITEMS_PER_PAGE
+
+    if (opts.toIndex >= maxIndex - 50) {
+      offsetRef.current += 1
+      setData((d) => d.concat(getData(ITEMS_PER_PAGE, offsetRef.current * ITEMS_PER_PAGE)))
+    }
+  }, [])
+
+  const renderItem = useCallback((item: Item) => {
+    return (
+      <Card padding={3} shadow={1}>
+        <Text align="center">Item #{item.key}</Text>
+      </Card>
+    )
+  }, [])
+
+  return (
+    <Box padding={4}>
+      <VirtualList
+        gap={3}
+        getItemKey={getItemKey}
+        items={data}
+        onChange={handleChange}
+        renderItem={renderItem}
+      />
+    </Box>
+  )
+}

package/src/utils/virtualList/__workshop__/windowScrolll.tsx

@@ -0,0 +1,22 @@
+import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
+import {useCallback} from 'react'
+
+const data = Array.from(new Array(1000)).map((_, key) => ({key}))
+
+export default function Example() {
+  const renderItem = useCallback((item: {key: number}) => {
+    return (
+      <Card padding={3} radius={2} shadow={1}>
+        <Text>Item #{item.key}</Text>
+      </Card>
+    )
+  }, [])
+
+  return (
+    <Box padding={4}>
+      <Container width={1}>
+        <VirtualList gap={2} items={data} renderItem={renderItem} />
+      </Container>
+    </Box>
+  )
+}

package/src/utils/virtualList/index.ts

@@ -0,0 +1 @@
+export * from './virtualList'

package/src/utils/virtualList/virtualList.tsx

@@ -0,0 +1,166 @@
+import {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
+import styled from 'styled-components'
+import {_isScrollable} from '../../helpers'
+import {useForwardedRef} from '../../hooks'
+import {_ResizeObserver} from '../../observers'
+import {StackProps} from '../../primitives'
+import {useTheme} from '../../theme'
+
+/**
+ * @beta
+ */
+export interface VirtualListChangeOpts {
+  fromIndex: number
+  gap: number
+  itemHeight: number
+  scrollHeight: number
+  scrollTop: number
+  toIndex: number
+}
+
+/**
+ * @beta
+ */
+export interface VirtualListProps<Item = any> {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  gap?: number
+  getItemKey?: (item: Item, itemIndex: number) => string
+  items?: Item[]
+  onChange?: (opts: VirtualListChangeOpts) => void
+  renderItem?: (item: Item) => React.ReactNode
+}
+
+const Root = styled.div`
+  position: relative;
+`
+
+const ItemWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+`
+
+/**
+ * @beta
+ */
+export const VirtualList = forwardRef(function VirtualList(
+  props: VirtualListProps &
+    StackProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+): React.ReactElement {
+  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
+  const {space} = useTheme().sanity
+  const forwardedRef = useForwardedRef(ref)
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const [scrollTop, setScrollTop] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
+  const [itemHeight, setItemHeight] = useState(-1)
+
+  useEffect(() => {
+    if (!wrapperRef.current) return
+
+    const firstElement = wrapperRef.current.firstChild
+
+    if (firstElement instanceof HTMLElement) {
+      setItemHeight(firstElement.offsetHeight)
+    }
+  }, [renderItem])
+
+  useEffect(() => {
+    if (!forwardedRef.current) return
+
+    let _scrollEl = forwardedRef.current.parentNode
+
+    while (_scrollEl && !_isScrollable(_scrollEl)) {
+      _scrollEl = _scrollEl.parentNode
+    }
+
+    if (_scrollEl) {
+      const scrollEl = _scrollEl
+
+      if (!(scrollEl instanceof HTMLElement)) return
+
+      const handleScroll = () => {
+        setScrollTop(scrollEl.scrollTop)
+      }
+
+      scrollEl.addEventListener('scroll', handleScroll, {passive: true})
+
+      const ro = new _ResizeObserver((entries) => {
+        setScrollHeight(entries[0].contentRect.height)
+      })
+
+      ro.observe(scrollEl)
+
+      handleScroll()
+
+      return () => {
+        scrollEl.removeEventListener('scroll', handleScroll)
+
+        ro.unobserve(scrollEl)
+        ro.disconnect()
+      }
+    }
+
+    const handleScroll = () => {
+      setScrollTop(window.scrollY)
+    }
+
+    const handleResize = () => {
+      setScrollHeight(window.innerHeight)
+    }
+
+    window.addEventListener('scroll', handleScroll, {passive: true})
+    window.addEventListener('resize', handleResize)
+
+    setScrollHeight(window.innerHeight)
+
+    handleScroll()
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [forwardedRef])
+
+  const len = items.length
+  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
+  const fromIndex = height ? Math.max(Math.floor((scrollTop / height) * len) - 2, 0) : 0
+  const toIndex = height ? Math.ceil(((scrollTop + scrollHeight) / height) * len) + 1 : 0
+
+  useEffect(() => {
+    if (!onChange) return
+    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
+  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
+
+  const children = useMemo(() => {
+    if (!renderItem || items.length === 0) return null
+
+    if (itemHeight === -1) {
+      return [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
+    }
+
+    return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
+      const itemIndex = fromIndex + _itemIndex
+      const node = renderItem(item)
+      const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
+
+      return (
+        <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
+          {node}
+        </ItemWrapper>
+      )
+    })
+  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
+
+  const wrapperStyle = useMemo(() => ({height}), [height])
+
+  return (
+    <Root as={as} data-ui="VirtualList" {...restProps} ref={forwardedRef}>
+      <div ref={wrapperRef} style={wrapperStyle}>
+        {children}
+      </div>
+    </Root>
+  )
+})

package/dist/cjs/atoms/avatar/avatar.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { AvatarColorKey } from '../../theme';
-import { AvatarPosition, AvatarSize, AvatarStatus } from './types';
-export interface AvatarProps {
-    animateArrowFrom?: AvatarPosition;
-    arrowPosition?: AvatarPosition;
-    as?: React.ElementType | keyof JSX.IntrinsicElements;
-    color?: AvatarColorKey;
-    initials?: string;
-    onImageLoadError?: (event: Error) => void;
-    size?: AvatarSize;
-    src?: string;
-    status?: AvatarStatus;
-    title?: string;
-}
-export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & Pick<React.HTMLProps<HTMLDivElement>, "color" | "media" | "content" | "hidden" | "height" | "wrap" | "label" | "size" | "sizes" | "min" | "max" | "rows" | "default" | "children" | "cite" | "data" | "form" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "value" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "useMap" | "width" | "wmode"> & React.RefAttributes<unknown>>;

package/dist/cjs/atoms/avatar/avatar.js

@@ -1,141 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-var auto_id_1 = require("@reach/auto-id");
-var react_1 = __importStar(require("react"));
-var react_is_1 = __importDefault(require("react-is"));
-var styled_components_1 = __importStar(require("styled-components"));
-var styles_1 = require("../../styles");
-var theme_1 = require("../../theme");
-var card_1 = require("../card");
-var text_1 = require("../text");
-var theme_2 = require("./theme");
-var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  position: relative;\n  box-sizing: border-box;\n  user-select: none;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: 0 0 0 1px var(--card-bg-color);\n\n  &[data-status='inactive'] {\n    opacity: 0.5;\n  }\n\n  & > svg {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    &:not([hidden]) {\n      display: block;\n    }\n  }\n\n  &:is(button) {\n    appearance: none;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font: inherit;\n    -webkit-font-smoothing: inherit;\n    color: inherit;\n    outline: none;\n\n    &:focus {\n      box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n    }\n\n    &:focus:not(:focus-visible) {\n      box-shadow: none;\n    }\n  }\n"], ["\n  background-color: ", ";\n  position: relative;\n  box-sizing: border-box;\n  user-select: none;\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  box-shadow: 0 0 0 1px var(--card-bg-color);\n\n  &[data-status='inactive'] {\n    opacity: 0.5;\n  }\n\n  & > svg {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    &:not([hidden]) {\n      display: block;\n    }\n  }\n\n  &:is(button) {\n    appearance: none;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font: inherit;\n    -webkit-font-smoothing: inherit;\n    color: inherit;\n    outline: none;\n\n    &:focus {\n      box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n    }\n\n    &:focus:not(:focus-visible) {\n      box-shadow: none;\n    }\n  }\n"])), function (_a) {
-    var uiColor = _a.uiColor;
-    return uiColor;
-}, function (_a) {
-    var size = _a.size;
-    return styles_1.rem(theme_2.avatarTheme.size[size]);
-}, function (_a) {
-    var size = _a.size;
-    return styles_1.rem(theme_2.avatarTheme.size[size]);
-}, function (_a) {
-    var size = _a.size;
-    return styles_1.rem(theme_2.avatarTheme.size[size] / 2);
-}, function (_a) {
-    var size = _a.size;
-    return styles_1.rem(theme_2.avatarTheme.size[size]);
-}, function (_a) {
-    var size = _a.size;
-    return styles_1.rem(theme_2.avatarTheme.size[size]);
-}, function (_a) {
-    var size = _a.size;
-    return styles_1.rem(theme_2.avatarTheme.size[size] / 2);
-});
-var Arrow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  box-sizing: border-box;\n  z-index: 0;\n  opacity: 0;\n  transition: all 0.2s linear;\n  transform: rotate(-90deg) translate3d(0, 6px, 0);\n\n  & > svg {\n    width: 11px;\n    height: 7px;\n    position: absolute;\n    top: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n\n    &:not([hidden]) {\n      display: block;\n    }\n  }\n\n  [data-arrow-position='inside'] > & {\n    transform: rotate(-90deg) translate3d(0, 6px, 0);\n    opacity: 0;\n  }\n\n  [data-arrow-position='top'] > & {\n    opacity: 1;\n    transform: rotate(0deg);\n  }\n\n  [data-arrow-position='bottom'] > & {\n    opacity: 1;\n    transform: rotate(-180deg);\n  }\n"], ["\n  position: absolute;\n  box-sizing: border-box;\n  z-index: 0;\n  opacity: 0;\n  transition: all 0.2s linear;\n  transform: rotate(-90deg) translate3d(0, 6px, 0);\n\n  & > svg {\n    width: 11px;\n    height: 7px;\n    position: absolute;\n    top: -5px;\n    left: 50%;\n    transform: translateX(-50%);\n\n    &:not([hidden]) {\n      display: block;\n    }\n  }\n\n  [data-arrow-position='inside'] > & {\n    transform: rotate(-90deg) translate3d(0, 6px, 0);\n    opacity: 0;\n  }\n\n  [data-arrow-position='top'] > & {\n    opacity: 1;\n    transform: rotate(0deg);\n  }\n\n  [data-arrow-position='bottom'] > & {\n    opacity: 1;\n    transform: rotate(-180deg);\n  }\n"])));
-var BgStroke = styled_components_1.default.ellipse(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  stroke-width: 4px;\n  vector-effect: non-scaling-stroke;\n  stroke: var(--card-bg-color);\n"], ["\n  stroke-width: 4px;\n  vector-effect: non-scaling-stroke;\n  stroke: var(--card-bg-color);\n"])));
-var Stroke = styled_components_1.default.ellipse(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  stroke-width: 3px;\n  vector-effect: non-scaling-stroke;\n\n  ", "[data-status='editing'] & {\n    stroke-dasharray: 2 4;\n    stroke-linecap: round;\n    animation: avatarEditingSpin 250ms infinite linear;\n  }\n"], ["\n  stroke-width: 3px;\n  vector-effect: non-scaling-stroke;\n\n  ", "[data-status='editing'] & {\n    stroke-dasharray: 2 4;\n    stroke-linecap: round;\n    animation: avatarEditingSpin 250ms infinite linear;\n  }\n"])), Root);
-var Initials = styled_components_1.default.div(function (props) {
-    var scheme = props.scheme, theme = props.theme;
-    var tone = theme.color[scheme].card.tones.default;
-    return styled_components_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: 100%;\n      height: 100%;\n      color: ", ";\n      align-items: center;\n      justify-content: center;\n      text-transform: uppercase;\n      text-align: center;\n      border-radius: 50%;\n\n      &:not([hidden]) {\n        display: flex;\n      }\n    "], ["\n      width: 100%;\n      height: 100%;\n      color: ", ";\n      align-items: center;\n      justify-content: center;\n      text-transform: uppercase;\n      text-align: center;\n      border-radius: 50%;\n\n      &:not([hidden]) {\n        display: flex;\n      }\n    "])), tone.enabled.fg);
-});
-exports.Avatar = react_1.forwardRef(function (props, ref) {
-    var asProp = props.as, _a = props.color, colorKey = _a === void 0 ? 'gray' : _a, src = props.src, title = props.title, initials = props.initials, onImageLoadError = props.onImageLoadError, arrowPositionProp = props.arrowPosition, animateArrowFrom = props.animateArrowFrom, _b = props.status, status = _b === void 0 ? 'online' : _b, _c = props.size, size = _c === void 0 ? 0 : _c, restProps = __rest(props, ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"]);
-    var as = react_is_1.default.isValidElementType(asProp) ? asProp : 'div';
-    var theme = theme_1.useTheme();
-    var card = card_1.useCard();
-    var color = theme.color[card.scheme].avatar[colorKey];
-    var _sizeRem = theme_2.avatarTheme.size[size];
-    var _radius = theme_2.avatarTheme.size[size] / 2;
-    var elementId = auto_id_1.useId();
-    var _d = react_1.useState(animateArrowFrom || arrowPositionProp || 'inside'), arrowPosition = _d[0], setArrowPosition = _d[1];
-    var _e = react_1.useState(false), imageFailed = _e[0], setImageFailed = _e[1];
-    react_1.useEffect(function () {
-        if (arrowPosition === arrowPositionProp)
-            return undefined;
-        // Start animation in the next frame
-        var raf = requestAnimationFrame(function () { return setArrowPosition(arrowPositionProp); });
-        return function () { return cancelAnimationFrame(raf); };
-    }, [arrowPosition, arrowPositionProp]);
-    react_1.useEffect(function () {
-        if (src)
-            setImageFailed(false);
-    }, [src]);
-    var handleImageError = react_1.useCallback(function () {
-        setImageFailed(true);
-        if (onImageLoadError) {
-            onImageLoadError(new Error('Avatar: the image failed to load'));
-        }
-    }, [onImageLoadError]);
-    return (react_1.default.createElement(Root, __assign({ as: as, "data-ui": "Avatar" }, restProps, { "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref: ref, size: size, title: title, uiColor: color }),
-        react_1.default.createElement(Arrow, null,
-            react_1.default.createElement("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none" },
-                react_1.default.createElement("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }))),
-        !imageFailed && src && (react_1.default.createElement("svg", { viewBox: "0 0 " + _sizeRem + " " + _sizeRem, fill: "none" },
-            react_1.default.createElement("defs", null,
-                react_1.default.createElement("pattern", { id: elementId + "-image-url", patternContentUnits: "objectBoundingBox", width: "1", height: "1" },
-                    react_1.default.createElement("image", { href: src, width: "1", height: "1", onError: handleImageError }))),
-            react_1.default.createElement("circle", { cx: _radius, cy: _radius, r: _radius, fill: "url(#" + elementId + "-image-url)" }),
-            react_1.default.createElement(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius }),
-            react_1.default.createElement(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, stroke: color }))),
-        (imageFailed || !src) && initials && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Initials, { scheme: card.scheme },
-                size === 0 && (react_1.default.createElement(text_1.Text, { as: "span", size: 0 },
-                    react_1.default.createElement("strong", null, initials))),
-                size === 1 && (react_1.default.createElement(text_1.Text, { as: "span", size: 2 },
-                    react_1.default.createElement("strong", null, initials))),
-                size === 2 && (react_1.default.createElement(text_1.Text, { as: "span", size: 3 },
-                    react_1.default.createElement("strong", null, initials))))))));
-});
-exports.Avatar.displayName = 'Avatar';
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
-//# sourceMappingURL=avatar.js.map

package/dist/cjs/atoms/avatar/avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../../src/atoms/avatar/avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0CAAoC;AACpC,6CAAyE;AACzE,sDAA8B;AAC9B,qEAA6C;AAC7C,uCAAgC;AAChC,qCAAgF;AAChF,gCAA+B;AAC/B,gCAA4B;AAC5B,iCAAmC;AAiBnC,IAAM,IAAI,GAAG,2BAAM,CAAC,GAAG,i1BAAqC,wBACtC,EAAsB,sFAIjC,EAAuC,eACtC,EAAuC,sBAChC,EAA2C,uIAQjD,EAAuC,iBACtC,EAAuC,wBAChC,EAA2C,6bAyB/D,KAzCqB,UAAC,EAAS;QAAR,OAAO,aAAA;IAAM,OAAA,OAAO;AAAP,CAAO,EAIjC,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,YAAG,CAAC,mBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAA3B,CAA2B,EACtC,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,YAAG,CAAC,mBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAA3B,CAA2B,EAChC,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,YAAG,CAAC,mBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAA/B,CAA+B,EAQjD,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,YAAG,CAAC,mBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAA3B,CAA2B,EACtC,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,YAAG,CAAC,mBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAA3B,CAA2B,EAChC,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,YAAG,CAAC,mBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAA/B,CAA+B,CAyB/D,CAAA;AAED,IAAM,KAAK,GAAG,2BAAM,CAAC,GAAG,yuBAAA,sqBAmCvB,IAAA,CAAA;AAED,IAAM,QAAQ,GAAG,2BAAM,CAAC,OAAO,oKAAA,iGAI9B,IAAA,CAAA;AAED,IAAM,MAAM,GAAG,2BAAM,CAAC,OAAO,8RAAA,oEAIzB,EAAI,qJAKP,KALG,IAAI,CAKP,CAAA;AAED,IAAM,QAAQ,GAAG,2BAAM,CAAC,GAAG,CACzB,UAAC,KAAkD;IAC1C,IAAA,MAAM,GAAW,KAAK,OAAhB,EAAE,KAAK,GAAI,KAAK,MAAT,CAAS;IAC7B,IAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAA;IAEnD,OAAO,uBAAG,wVAAA,0DAGC,EAAe,yNAUzB,KAVU,IAAI,CAAC,OAAO,CAAC,EAAE,EAUzB;AACH,CAAC,CACF,CAAA;AAEY,QAAA,MAAM,GAAG,kBAAU,CAC9B,UAAC,KAAiE,EAAE,GAAG;IAEnE,IAAI,MAAM,GAWR,KAAK,GAXG,EACV,KAUE,KAAK,MAViB,EAAjB,QAAQ,mBAAG,MAAM,KAAA,EACxB,GAAG,GASD,KAAK,IATJ,EACH,KAAK,GAQH,KAAK,MARF,EACL,QAAQ,GAON,KAAK,SAPC,EACR,gBAAgB,GAMd,KAAK,iBANS,EACD,iBAAiB,GAK9B,KAAK,cALyB,EAChC,gBAAgB,GAId,KAAK,iBAJS,EAChB,KAGE,KAAK,OAHU,EAAjB,MAAM,mBAAG,QAAQ,KAAA,EACjB,KAEE,KAAK,KAFC,EAAR,IAAI,mBAAG,CAAC,KAAA,EACL,SAAS,UACV,KAAK,EAZH,sHAYL,CADa,CACL;IACT,IAAM,EAAE,GAAG,kBAAO,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAA;IAC9D,IAAM,KAAK,GAAG,gBAAQ,EAAE,CAAA;IACxB,IAAM,IAAI,GAAG,cAAO,EAAE,CAAA;IACtB,IAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IAEvD,IAAM,QAAQ,GAAG,mBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACvC,IAAM,OAAO,GAAG,mBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAE1C,IAAM,SAAS,GAAG,eAAK,EAAE,CAAA;IACnB,IAAA,KAAoC,gBAAQ,CAChD,gBAAgB,IAAI,iBAAiB,IAAI,QAAQ,CAClD,EAFM,aAAa,QAAA,EAAE,gBAAgB,QAErC,CAAA;IAEK,IAAA,KAAgC,gBAAQ,CAAU,KAAK,CAAC,EAAvD,WAAW,QAAA,EAAE,cAAc,QAA4B,CAAA;IAE9D,iBAAS,CAAC;QACR,IAAI,aAAa,KAAK,iBAAiB;YAAE,OAAO,SAAS,CAAA;QAEzD,oCAAoC;QACpC,IAAM,GAAG,GAAG,qBAAqB,CAAC,cAAM,OAAA,gBAAgB,CAAC,iBAAiB,CAAC,EAAnC,CAAmC,CAAC,CAAA;QAE5E,OAAO,cAAM,OAAA,oBAAoB,CAAC,GAAG,CAAC,EAAzB,CAAyB,CAAA;IACxC,CAAC,EAAE,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEtC,iBAAS,CAAC;QACR,IAAI,GAAG;YAAE,cAAc,CAAC,KAAK,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,IAAM,gBAAgB,GAAG,mBAAW,CAAC;QACnC,cAAc,CAAC,IAAI,CAAC,CAAA;QAEpB,IAAI,gBAAgB,EAAE;YACpB,gBAAgB,CAAC,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC,CAAA;SAChE;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,OAAO,CACL,8BAAC,IAAI,aACH,EAAE,EAAE,EAAE,aACE,QAAQ,IACZ,SAAS,kBACD,KAAK,yBACI,aAAa,iBACrB,MAAM,EACnB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK;QAEd,8BAAC,KAAK;YACJ,uCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM;gBACvD,wCACE,CAAC,EAAC,8FAA8F,EAChG,IAAI,EAAE,KAAK,GACX,CACE,CACA;QAEP,CAAC,WAAW,IAAI,GAAG,IAAI,CACtB,uCAAK,OAAO,EAAE,SAAO,QAAQ,SAAI,QAAU,EAAE,IAAI,EAAC,MAAM;YACtD;gBACE,2CACE,EAAE,EAAK,SAAS,eAAY,EAC5B,mBAAmB,EAAC,mBAAmB,EACvC,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG;oBAEV,yCAAO,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAE,gBAAgB,GAAI,CAC5D,CACL;YAEP,0CAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,UAAQ,SAAS,gBAAa,GAAI;YACtF,8BAAC,QAAQ,IAAC,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,GAAI;YAChE,8BAAC,MAAM,IAAC,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,GAAI,CACzE,CACP;QAEA,CAAC,WAAW,IAAI,CAAC,GAAG,CAAC,IAAI,QAAQ,IAAI,CACpC;YACE,8BAAC,QAAQ,IAAC,MAAM,EAAE,IAAI,CAAC,MAAM;gBAC1B,IAAI,KAAK,CAAC,IAAI,CACb,8BAAC,WAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,CAAC;oBACrB,8CAAS,QAAQ,CAAU,CACtB,CACR;gBACA,IAAI,KAAK,CAAC,IAAI,CACb,8BAAC,WAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,CAAC;oBACrB,8CAAS,QAAQ,CAAU,CACtB,CACR;gBACA,IAAI,KAAK,CAAC,IAAI,CACb,8BAAC,WAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAE,CAAC;oBACrB,8CAAS,QAAQ,CAAU,CACtB,CACR,CACQ,CACV,CACJ,CACI,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}

package/dist/cjs/atoms/avatar/avatarCounter.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { AvatarSize } from './types';
-interface AvatarCounterProps {
-    count: number;
-    size?: AvatarSize;
-    tone?: 'navbar';
-}
-export declare function AvatarCounter({ count, size, tone }: AvatarCounterProps): JSX.Element;
-export {};

package/dist/cjs/atoms/avatar/avatarCounter.js

@@ -1,47 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarCounter = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var styles_1 = require("../../styles");
-var text_1 = require("../text");
-var theme_1 = require("./theme");
-var Root = styled_components_1.default.div(function (_a) {
-    var size = _a.size, theme = _a.theme;
-    return styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    align-items: center;\n    justify-content: center;\n    border-radius: ", ";\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    min-width: ", ";\n    height: ", ";\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "], ["\n    align-items: center;\n    justify-content: center;\n    border-radius: ", ";\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    min-width: ", ";\n    height: ", ";\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), styles_1.rem(theme_1.avatarTheme.size[size] / 2), styles_1.rem(theme_1.avatarTheme.size[size]), styles_1.rem(theme_1.avatarTheme.size[size]), styles_1.rem(theme.space[2]));
-});
-function AvatarCounter(_a) {
-    var count = _a.count, _b = _a.size, size = _b === void 0 ? 0 : _b, tone = _a.tone;
-    return (react_1.default.createElement(Root, { size: size, "data-tone": tone },
-        react_1.default.createElement(text_1.Text, { as: "span", size: size },
-            react_1.default.createElement("strong", null, count))));
-}
-exports.AvatarCounter = AvatarCounter;
-var templateObject_1;
-//# sourceMappingURL=avatarCounter.js.map