@channel.io/bezier-react 2.0.0-alpha.8 → 2.0.0

package/README.md

@@ -7,46 +7,74 @@ Bezier React is a React components library that implements Bezier design system.
 ### npm
 
 ```bash
-npm i @channel.io/bezier-react styled-components@5
-npm i -D @types/styled-components@5
+npm i @channel.io/bezier-react
 ```
 
 ### yarn
 
 ```bash
-yarn add @channel.io/bezier-react styled-components@5
-yarn add -D @types/styled-components@5
+yarn add @channel.io/bezier-react
 ```
 
 ### pnpm
 
 ```bash
-pnpm install @channel.io/bezier-react styled-components@5
-pnpm install -D @types/styled-components@5
+pnpm install @channel.io/bezier-react
 ```
 
-**bezier-react has [styled-components](https://styled-components.com/) as peer dependency** so don't forget to install it.
-
 ## Usage
 
-1. Wrap `BezierProvider` at the root of your application.
-2. Pass the `foundation` value like `LightFoundation` or `DarkFoundation`.
+### 1. CSS import
+
+In order to use bezier-react's styles, you need to import CSS. If you're using the module bundler, you can import CSS directly from within your JavaScript file.
+
+```tsx
+import '@channel.io/bezier-react/styles.css'
+```
+
+Or if you're not using the module bundler, you can add the CSS directly to your HTML. We recommend referring to your styles file and copy-pasting it. As bezier-react updates, your styles should update with it.
+
+```html
+<link
+  rel="stylesheet"
+  href="styles.css"
+/>
+```
+
+### 2. Wrap `AppProvider`
+
+Wrap `AppProvider` at the root of your application. If necessary, you can change the theme by specifying the `themeName` property.
 
 ```tsx
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { BezierProvider, LightFoundation, Text } from '@channel.io/bezier-react'
+import { AppProvider, Text } from '@channel.io/bezier-react'
 
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container)
 
 root.render(
-  <BezierProvider foundation={LightFoundation}>
+  <AppProvider themeName="dark">
     <Text as="h1">Hello World</Text>
-  </BezierProvider>,
+  </AppProvider>
 )
 ```
 
+### 3. Font import
+
+Import font from CDN of Channel Corp. Or you can import it from [Google Fonts](https://fonts.google.com/specimen/Inter).
+
+```html
+<link
+  rel="preconnect"
+  href="https://cf.channel.io"
+/>
+<link
+  rel="stylesheet"
+  href="https://cf.channel.io/asset/font/Inter/inter.css"
+/>
+```
+
 ## Contributing
 
 See [contribution guide](https://github.com/channel-io/bezier-react/wiki/Contribute).

package/dist/cjs/alpha-components/DialogPrimitive/DialogPrimitive.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var index = require('../../node_modules/@radix-ui/react-dialog/dist/index.js');
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#root}
+ */
+const DialogPrimitive = index.Dialog;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#close}
+ */
+const DialogPrimitiveClose = index.DialogClose;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#content}
+ */
+const DialogPrimitiveContent = index.DialogContent;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#description}
+ */
+const DialogPrimitiveDescription = index.DialogDescription;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#overlay}
+ */
+const DialogPrimitiveOverlay = index.DialogOverlay;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#portal}
+ */
+const DialogPrimitivePortal = index.DialogPortal;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#title}
+ */
+const DialogPrimitiveTitle = index.DialogTitle;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#trigger}
+ */
+const DialogPrimitiveTrigger = index.DialogTrigger;
+
+exports.DialogPrimitive = DialogPrimitive;
+exports.DialogPrimitiveClose = DialogPrimitiveClose;
+exports.DialogPrimitiveContent = DialogPrimitiveContent;
+exports.DialogPrimitiveDescription = DialogPrimitiveDescription;
+exports.DialogPrimitiveOverlay = DialogPrimitiveOverlay;
+exports.DialogPrimitivePortal = DialogPrimitivePortal;
+exports.DialogPrimitiveTitle = DialogPrimitiveTitle;
+exports.DialogPrimitiveTrigger = DialogPrimitiveTrigger;
+//# sourceMappingURL=DialogPrimitive.js.map

package/dist/cjs/alpha-components/DialogPrimitive/DialogPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogPrimitive.js","sources":["../../../../src/alpha-components/DialogPrimitive/DialogPrimitive.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from '@radix-ui/react-dialog'\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#root}\n */\nexport const DialogPrimitive = Dialog\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#close}\n */\nexport const DialogPrimitiveClose = DialogClose\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#content}\n */\nexport const DialogPrimitiveContent = DialogContent\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#description}\n */\nexport const DialogPrimitiveDescription = DialogDescription\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#overlay}\n */\nexport const DialogPrimitiveOverlay = DialogOverlay\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#portal}\n */\nexport const DialogPrimitivePortal = DialogPortal\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#title}\n */\nexport const DialogPrimitiveTitle = DialogTitle\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#trigger}\n */\nexport const DialogPrimitiveTrigger = DialogTrigger\n"],"names":["DialogPrimitive","Dialog","DialogPrimitiveClose","DialogClose","DialogPrimitiveContent","DialogContent","DialogPrimitiveDescription","DialogDescription","DialogPrimitiveOverlay","DialogOverlay","DialogPrimitivePortal","DialogPortal","DialogPrimitiveTitle","DialogTitle","DialogPrimitiveTrigger","DialogTrigger"],"mappings":";;;;AAWA;AACA;AACA;AACO,MAAMA,eAAe,GAAGC,aAAM;;AAErC;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGC,kBAAW;;AAE/C;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,oBAAa;;AAEnD;AACA;AACA;AACO,MAAMC,0BAA0B,GAAGC,wBAAiB;;AAE3D;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,oBAAa;;AAEnD;AACA;AACA;AACO,MAAMC,qBAAqB,GAAGC,mBAAY;;AAEjD;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGC,kBAAW;;AAE/C;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC;;;;;;;;;;;"}

package/dist/cjs/alpha-components/TooltipPrimitive/TooltipPrimitive.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('../../node_modules/@radix-ui/react-tooltip/dist/index.js');
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#provider}
+ */
+const TooltipPrimitiveProvider = index.TooltipProvider;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#root}
+ */
+const TooltipPrimitive = index.Tooltip;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#trigger}
+ */
+const TooltipPrimitiveTrigger = index.TooltipTrigger;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#portal}
+ */
+const TooltipPrimitivePortal = index.TooltipPortal;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#content}
+ */
+const TooltipPrimitiveContent = index.TooltipContent;
+
+/**
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#arrow}
+ */
+const TooltipPrimitiveArrow = index.TooltipArrow;
+
+exports.TooltipPrimitive = TooltipPrimitive;
+exports.TooltipPrimitiveArrow = TooltipPrimitiveArrow;
+exports.TooltipPrimitiveContent = TooltipPrimitiveContent;
+exports.TooltipPrimitivePortal = TooltipPrimitivePortal;
+exports.TooltipPrimitiveProvider = TooltipPrimitiveProvider;
+exports.TooltipPrimitiveTrigger = TooltipPrimitiveTrigger;
+//# sourceMappingURL=TooltipPrimitive.js.map

package/dist/cjs/alpha-components/TooltipPrimitive/TooltipPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipPrimitive.js","sources":["../../../../src/alpha-components/TooltipPrimitive/TooltipPrimitive.tsx"],"sourcesContent":["import {\n  Tooltip,\n  TooltipArrow,\n  TooltipContent,\n  TooltipPortal,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@radix-ui/react-tooltip'\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#provider}\n */\nexport const TooltipPrimitiveProvider = TooltipProvider\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#root}\n */\nexport const TooltipPrimitive = Tooltip\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#trigger}\n */\nexport const TooltipPrimitiveTrigger = TooltipTrigger\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#portal}\n */\nexport const TooltipPrimitivePortal = TooltipPortal\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#content}\n */\nexport const TooltipPrimitiveContent = TooltipContent\n\n/**\n * @see {@link https://www.radix-ui.com/primitives/docs/components/tooltip#arrow}\n */\nexport const TooltipPrimitiveArrow = TooltipArrow\n"],"names":["TooltipPrimitiveProvider","TooltipProvider","TooltipPrimitive","Tooltip","TooltipPrimitiveTrigger","TooltipTrigger","TooltipPrimitivePortal","TooltipPortal","TooltipPrimitiveContent","TooltipContent","TooltipPrimitiveArrow","TooltipArrow"],"mappings":";;;;AASA;AACA;AACA;AACO,MAAMA,wBAAwB,GAAGC,sBAAe;;AAEvD;AACA;AACA;AACO,MAAMC,gBAAgB,GAAGC,cAAO;;AAEvC;AACA;AACA;AACO,MAAMC,uBAAuB,GAAGC,qBAAc;;AAErD;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,oBAAa;;AAEnD;AACA;AACA;AACO,MAAMC,uBAAuB,GAAGC,qBAAc;;AAErD;AACA;AACA;AACO,MAAMC,qBAAqB,GAAGC;;;;;;;;;"}

package/dist/cjs/alpha-components/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var DialogPrimitive = require('./DialogPrimitive/DialogPrimitive.js');
+var TooltipPrimitive = require('./TooltipPrimitive/TooltipPrimitive.js');
+
+
+
+exports.DialogPrimitive = DialogPrimitive.DialogPrimitive;
+exports.DialogPrimitiveClose = DialogPrimitive.DialogPrimitiveClose;
+exports.DialogPrimitiveContent = DialogPrimitive.DialogPrimitiveContent;
+exports.DialogPrimitiveDescription = DialogPrimitive.DialogPrimitiveDescription;
+exports.DialogPrimitiveOverlay = DialogPrimitive.DialogPrimitiveOverlay;
+exports.DialogPrimitivePortal = DialogPrimitive.DialogPrimitivePortal;
+exports.DialogPrimitiveTitle = DialogPrimitive.DialogPrimitiveTitle;
+exports.DialogPrimitiveTrigger = DialogPrimitive.DialogPrimitiveTrigger;
+exports.TooltipPrimitive = TooltipPrimitive.TooltipPrimitive;
+exports.TooltipPrimitiveArrow = TooltipPrimitive.TooltipPrimitiveArrow;
+exports.TooltipPrimitiveContent = TooltipPrimitive.TooltipPrimitiveContent;
+exports.TooltipPrimitivePortal = TooltipPrimitive.TooltipPrimitivePortal;
+exports.TooltipPrimitiveProvider = TooltipPrimitive.TooltipPrimitiveProvider;
+exports.TooltipPrimitiveTrigger = TooltipPrimitive.TooltipPrimitiveTrigger;
+//# sourceMappingURL=index.js.map

package/dist/cjs/alpha-components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/AppProvider/AppProvider.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var React = require('react');
+var ssrWindow_esm = require('../../node_modules/ssr-window/ssr-window.esm.js');
+var WindowProvider = require('../WindowProvider/WindowProvider.js');
+var FeatureProvider = require('../FeatureProvider/FeatureProvider.js');
+var TokenProvider = require('../TokenProvider/TokenProvider.js');
+
+const defaultWindow = ssrWindow_esm.getWindow();
+
+/**
+ * `AppProvider` is a required wrapper component that provides context for the app.
+ * @example
+ *
+ * ```tsx
+ * import React from 'react'
+ * import { createRoot } from 'react-dom/client'
+ * import { AppProvider } from '@channel.io/bezier-react'
+ *
+ * const container = document.getElementById('root')
+ * const root = createRoot(container)
+ *
+ * root.render(
+ *   <AppProvider themeName="light">
+ *     <App />
+ *   </AppProvider>,
+ * )
+ * ```
+ */
+function AppProvider({
+  children,
+  themeName = 'light',
+  features = [],
+  window = defaultWindow
+}) {
+  React.useEffect(function updateRootThemeDataAttribute() {
+    const rootElement = window.document.documentElement;
+    // TODO: Change data attribute constant to import from bezier-tokens
+    rootElement.setAttribute('data-bezier-theme', themeName);
+    return function cleanup() {
+      rootElement.removeAttribute('data-bezier-theme');
+    };
+  }, [window, themeName]);
+  return /*#__PURE__*/React.createElement(WindowProvider.WindowProvider, {
+    window: window
+  }, /*#__PURE__*/React.createElement(FeatureProvider.FeatureProvider, {
+    features: features
+  }, /*#__PURE__*/React.createElement(TokenProvider.TokenProvider, {
+    themeName: themeName
+  }, children)));
+}
+
+exports.AppProvider = AppProvider;
+//# sourceMappingURL=AppProvider.js.map

package/dist/cjs/components/AppProvider/AppProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppProvider.js","sources":["../../../../src/components/AppProvider/AppProvider.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\n\nimport { getWindow } from 'ssr-window'\n\nimport { FeatureProvider } from '~/src/components/FeatureProvider'\nimport { TokenProvider } from '~/src/components/TokenProvider'\nimport { WindowProvider } from '~/src/components/WindowProvider'\n\nimport { type AppProviderProps } from './AppProvider.types'\n\nconst defaultWindow = getWindow()\n\n/**\n * `AppProvider` is a required wrapper component that provides context for the app.\n * @example\n *\n * ```tsx\n * import React from 'react'\n * import { createRoot } from 'react-dom/client'\n * import { AppProvider } from '@channel.io/bezier-react'\n *\n * const container = document.getElementById('root')\n * const root = createRoot(container)\n *\n * root.render(\n *   <AppProvider themeName=\"light\">\n *     <App />\n *   </AppProvider>,\n * )\n * ```\n */\nexport function AppProvider({\n  children,\n  themeName = 'light',\n  features = [],\n  window = defaultWindow,\n}: AppProviderProps) {\n  useEffect(\n    function updateRootThemeDataAttribute() {\n      const rootElement = window.document.documentElement\n      // TODO: Change data attribute constant to import from bezier-tokens\n      rootElement.setAttribute('data-bezier-theme', themeName)\n      return function cleanup() {\n        rootElement.removeAttribute('data-bezier-theme')\n      }\n    },\n    [window, themeName]\n  )\n\n  return (\n    <WindowProvider window={window}>\n      <FeatureProvider features={features}>\n        <TokenProvider themeName={themeName}>{children}</TokenProvider>\n      </FeatureProvider>\n    </WindowProvider>\n  )\n}\n"],"names":["defaultWindow","getWindow","AppProvider","children","themeName","features","window","useEffect","updateRootThemeDataAttribute","rootElement","document","documentElement","setAttribute","cleanup","removeAttribute","React","createElement","WindowProvider","FeatureProvider","TokenProvider"],"mappings":";;;;;;;;AAUA,MAAMA,aAAa,GAAGC,uBAAS,EAAE,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAAC;EAC1BC,QAAQ;AACRC,EAAAA,SAAS,GAAG,OAAO;AACnBC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,MAAM,GAAGN,aAAAA;AACO,CAAC,EAAE;AACnBO,EAAAA,eAAS,CACP,SAASC,4BAA4BA,GAAG;AACtC,IAAA,MAAMC,WAAW,GAAGH,MAAM,CAACI,QAAQ,CAACC,eAAe,CAAA;AACnD;AACAF,IAAAA,WAAW,CAACG,YAAY,CAAC,mBAAmB,EAAER,SAAS,CAAC,CAAA;IACxD,OAAO,SAASS,OAAOA,GAAG;AACxBJ,MAAAA,WAAW,CAACK,eAAe,CAAC,mBAAmB,CAAC,CAAA;KACjD,CAAA;AACH,GAAC,EACD,CAACR,MAAM,EAAEF,SAAS,CACpB,CAAC,CAAA;AAED,EAAA,oBACEW,KAAA,CAAAC,aAAA,CAACC,6BAAc,EAAA;AAACX,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,eAC7BS,KAAA,CAAAC,aAAA,CAACE,+BAAe,EAAA;AAACb,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,eAClCU,KAAA,CAAAC,aAAA,CAACG,2BAAa,EAAA;AAACf,IAAAA,SAAS,EAAEA,SAAAA;GAAYD,EAAAA,QAAwB,CAC/C,CACH,CAAC,CAAA;AAErB;;;;"}

package/dist/cjs/components/AutoFocus/AutoFocus.js

@@ -8,7 +8,6 @@ var useMergeRefs = require('../../hooks/useMergeRefs.js');
  * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.
  * It is useful when you want to focus on a specific element when the component is mounted.
  * It doesn't render any DOM node.
- *
  * @example
  *
  * ```tsx

package/dist/cjs/components/AutoFocus/AutoFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useLayoutEffect,\n  useState,\n} from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { type AutoFocusProps } from './AutoFocus.types'\n\n/**\n * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.\n * It is useful when you want to focus on a specific element when the component is mounted.\n * It doesn't render any DOM node.\n *\n * @example\n *\n * ```tsx\n * <AutoFocus>\n *   <button>Close</button>\n * </AutoFocus>\n *\n * // You can also use it with the additional condition\n * <AutoFocus when={condition}>\n *   <button>Close</button>\n * </AutoFocus>\n * ```\n */\nexport const AutoFocus = forwardRef<HTMLElement, AutoFocusProps>(function AutoFocus({\n  children,\n  when = true,\n  ...rest\n}, forwardedRef) {\n  const [target, setTarget] = useState<HTMLElement | null>(null)\n\n  useLayoutEffect(function focus() {\n    if (target && when) {\n      target.focus()\n    }\n  }, [\n    target,\n    when,\n  ])\n\n  const ref = useMergeRefs(\n    setTarget,\n    forwardedRef,\n  )\n\n  return (\n    <Slot\n      ref={ref}\n      {...rest}\n    >\n      { children }\n    </Slot>\n  )\n})\n"],"names":["AutoFocus","forwardRef","children","when","rest","forwardedRef","target","setTarget","useState","useLayoutEffect","focus","ref","useMergeRefs","React","createElement","Slot","Object","assign"],"mappings":";;;;;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,SAAS,gBAAGC,gBAAU,CAA8B,SAASD,SAASA,CAAC;EAClFE,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACX,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAE9DC,EAAAA,qBAAe,CAAC,SAASC,KAAKA,GAAG;IAC/B,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE,CAAA;AAChB,KAAA;AACF,GAAC,EAAE,CACDJ,MAAM,EACNH,IAAI,CACL,CAAC,CAAA;AAEF,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CACtBL,SAAS,EACTF,YACF,CAAC,CAAA;EAED,oBACEQ,KAAA,CAAAC,aAAA,CAACC,UAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHN,IAAAA,GAAG,EAAEA,GAAAA;GACDP,EAAAA,IAAI,CAENF,EAAAA,QACE,CAAC,CAAA;AAEX,CAAC;;;;"}
+{"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["import React, { forwardRef, useLayoutEffect, useState } from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { type AutoFocusProps } from './AutoFocus.types'\n\n/**\n * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.\n * It is useful when you want to focus on a specific element when the component is mounted.\n * It doesn't render any DOM node.\n * @example\n *\n * ```tsx\n * <AutoFocus>\n *   <button>Close</button>\n * </AutoFocus>\n *\n * // You can also use it with the additional condition\n * <AutoFocus when={condition}>\n *   <button>Close</button>\n * </AutoFocus>\n * ```\n */\nexport const AutoFocus = forwardRef<HTMLElement, AutoFocusProps>(\n  function AutoFocus({ children, when = true, ...rest }, forwardedRef) {\n    const [target, setTarget] = useState<HTMLElement | null>(null)\n\n    useLayoutEffect(\n      function focus() {\n        if (target && when) {\n          target.focus()\n        }\n      },\n      [target, when]\n    )\n\n    const ref = useMergeRefs(setTarget, forwardedRef)\n\n    return (\n      <Slot\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Slot>\n    )\n  }\n)\n"],"names":["AutoFocus","forwardRef","children","when","rest","forwardedRef","target","setTarget","useState","useLayoutEffect","focus","ref","useMergeRefs","React","createElement","Slot","Object","assign"],"mappings":";;;;;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,SAAS,gBAAGC,gBAAU,CACjC,SAASD,SAASA,CAAC;EAAEE,QAAQ;AAAEC,EAAAA,IAAI,GAAG,IAAI;EAAE,GAAGC,IAAAA;AAAK,CAAC,EAAEC,YAAY,EAAE;EACnE,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAE9DC,EAAAA,qBAAe,CACb,SAASC,KAAKA,GAAG;IACf,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE,CAAA;AAChB,KAAA;AACF,GAAC,EACD,CAACJ,MAAM,EAAEH,IAAI,CACf,CAAC,CAAA;AAED,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CAACL,SAAS,EAAEF,YAAY,CAAC,CAAA;EAEjD,oBACEQ,KAAA,CAAAC,aAAA,CAACC,UAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHN,IAAAA,GAAG,EAAEA,GAAAA;GACDP,EAAAA,IAAI,CAEPF,EAAAA,QACG,CAAC,CAAA;AAEX,CACF;;;;"}

package/dist/cjs/components/Avatar/Avatar.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../node_modules/classnames/index.js');
+var type = require('../../utils/type.js');
+var defaultAvatar = require('./assets/default-avatar.svg.js');
+var useProgressiveImage = require('./useProgressiveImage.js');
+var Avatar_module = require('./Avatar.module.scss.js');
+var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
+var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
+var Status = require('../Status/Status.js');
+
+const shadow = {
+  spreadRadius: 2,
+  color: 'bg-white-high'
+};
+function useAvatarRadiusToken() {
+  return ThemeProvider.useTokens().global.radius['radius-42-p'];
+}
+const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper';
+const AVATAR_TEST_ID = 'bezier-avatar';
+const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper';
+
+/**
+ * `Avatar` is a component for representing some profile image.
+ * @example
+ *
+ * ```tsx
+ * <Avatar
+ *   avatarUrl="https://..."
+ *   name="channel"
+ *   size="48"
+ *   showBorder
+ *   disabled
+ * />
+ * ```
+ */
+const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
+  avatarUrl = '',
+  fallbackUrl = defaultAvatar.default,
+  size = '24',
+  name,
+  disabled = false,
+  showBorder = false,
+  smoothCorners = true,
+  status,
+  className,
+  children,
+  ...rest
+}, forwardedRef) {
+  const loadedAvatarUrl = useProgressiveImage.default(avatarUrl, fallbackUrl);
+  const AVATAR_BORDER_RADIUS = useAvatarRadiusToken();
+  const StatusComponent = React.useMemo(() => {
+    if (type.isEmpty(children) && !status || children && ! /*#__PURE__*/React.isValidElement(children)) {
+      return null;
+    }
+    const statusSize = (() => {
+      switch (size) {
+        case '90':
+        case '120':
+          return 'l';
+        default:
+          return 'm';
+      }
+    })();
+    const Contents = (() => {
+      if (children) {
+        return children;
+      }
+      if (status) {
+        return /*#__PURE__*/React.createElement(Status.Status, {
+          type: status,
+          size: statusSize
+        });
+      }
+      return null;
+    })();
+    return Contents && /*#__PURE__*/React.createElement("div", {
+      className: Avatar_module.default.StatusWrapper,
+      "data-testid": STATUS_WRAPPER_TEST_ID
+    }, Contents);
+  }, [status, size, children]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: index.default(Avatar_module.default.Avatar, Avatar_module.default[`size-${size}`], disabled && Avatar_module.default.disabled, className),
+    "data-disabled": disabled,
+    "data-testid": AVATAR_WRAPPER_TEST_ID
+  }, rest), /*#__PURE__*/React.createElement(SmoothCornersBox.SmoothCornersBox, {
+    ref: forwardedRef,
+    "aria-label": name,
+    className: index.default(Avatar_module.default.AvatarImage, Number(size) >= 72 && Avatar_module.default['big-size'], showBorder && Avatar_module.default.bordered),
+    disabled: !smoothCorners,
+    borderRadius: AVATAR_BORDER_RADIUS,
+    shadow: showBorder ? shadow : undefined,
+    backgroundColor: "bg-white-normal",
+    backgroundImage: loadedAvatarUrl,
+    "data-testid": AVATAR_TEST_ID
+  }, StatusComponent));
+});
+
+exports.AVATAR_TEST_ID = AVATAR_TEST_ID;
+exports.AVATAR_WRAPPER_TEST_ID = AVATAR_WRAPPER_TEST_ID;
+exports.Avatar = Avatar;
+exports.STATUS_WRAPPER_TEST_ID = STATUS_WRAPPER_TEST_ID;
+exports.useAvatarRadiusToken = useAvatarRadiusToken;
+//# sourceMappingURL=Avatar.js.map

package/dist/cjs/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n  SmoothCornersBox,\n  type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n  spreadRadius: 2,\n  color: 'bg-white-high',\n}\n\nexport function useAvatarRadiusToken() {\n  return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n *   avatarUrl=\"https://...\"\n *   name=\"channel\"\n *   size=\"48\"\n *   showBorder\n *   disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    avatarUrl = '',\n    fallbackUrl = defaultAvatarUrl,\n    size = '24',\n    name,\n    disabled = false,\n    showBorder = false,\n    smoothCorners = true,\n    status,\n    className,\n    children,\n    ...rest\n  },\n  forwardedRef\n) {\n  const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n  const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n  const StatusComponent = useMemo(() => {\n    if (\n      (isEmpty(children) && !status) ||\n      (children && !React.isValidElement(children))\n    ) {\n      return null\n    }\n\n    const statusSize: StatusSize = (() => {\n      switch (size) {\n        case '90':\n        case '120':\n          return 'l'\n        default:\n          return 'm'\n      }\n    })()\n\n    const Contents = (() => {\n      if (children) {\n        return children\n      }\n      if (status) {\n        return (\n          <Status\n            type={status}\n            size={statusSize}\n          />\n        )\n      }\n      return null\n    })()\n\n    return (\n      Contents && (\n        <div\n          className={styles.StatusWrapper}\n          data-testid={STATUS_WRAPPER_TEST_ID}\n        >\n          {Contents}\n        </div>\n      )\n    )\n  }, [status, size, children])\n\n  return (\n    <div\n      className={classNames(\n        styles.Avatar,\n        styles[`size-${size}`],\n        disabled && styles.disabled,\n        className\n      )}\n      data-disabled={disabled}\n      data-testid={AVATAR_WRAPPER_TEST_ID}\n      {...rest}\n    >\n      <SmoothCornersBox\n        ref={forwardedRef}\n        aria-label={name}\n        className={classNames(\n          styles.AvatarImage,\n          Number(size) >= 72 && styles['big-size'],\n          showBorder && styles.bordered\n        )}\n        disabled={!smoothCorners}\n        borderRadius={AVATAR_BORDER_RADIUS}\n        shadow={showBorder ? shadow : undefined}\n        backgroundColor=\"bg-white-normal\"\n        backgroundImage={loadedAvatarUrl}\n        data-testid={AVATAR_TEST_ID}\n      >\n        {StatusComponent}\n      </SmoothCornersBox>\n    </div>\n  )\n})\n"],"names":["shadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","statusSize","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"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"}

package/dist/cjs/components/Avatar/Avatar.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"Avatar":"b-daVqx","disabled":"b--PqEs","size-20":"b-gBj9J","size-24":"b-LgHCs","size-30":"b-NSaUF","size-36":"b-8ORpR","size-42":"b-kVG56","size-48":"b-3dxeR","size-72":"b-prOXv","size-90":"b-tVKXF","size-120":"b-s58oP","AvatarImage":"b-TyQ0N","big-size":"b-2JDuX","bordered":"b-rIHyG","StatusWrapper":"b-SbqGC"};
+
+exports.default = styles;
+//# sourceMappingURL=Avatar.module.scss.js.map

package/dist/cjs/components/Avatar/assets/default-avatar.svg.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defaultAvatarUrl = "data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23cfccfb%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41%2023C41%2029.0744%2036.0744%2034%2030%2034C23.9256%2034%2019%2029.0744%2019%2023C19%2016.9256%2023.9256%2012%2030%2012C36.0744%2012%2041%2016.9256%2041%2023ZM30%2037C16.1929%2037%205%2048.1929%205%2062V90H55V62C55%2048.1929%2043.8071%2037%2030%2037Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
+
+exports.default = defaultAvatarUrl;
+//# sourceMappingURL=default-avatar.svg.js.map

package/dist/cjs/components/Avatar/assets/default-avatar.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-avatar.svg.js","sources":["../../../../../src/components/Avatar/assets/default-avatar.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23cfccfb%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41%2023C41%2029.0744%2036.0744%2034%2030%2034C23.9256%2034%2019%2029.0744%2019%2023C19%2016.9256%2023.9256%2012%2030%2012C36.0744%2012%2041%2016.9256%2041%2023ZM30%2037C16.1929%2037%205%2048.1929%205%2062V90H55V62C55%2048.1929%2043.8071%2037%2030%2037Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\""],"names":[],"mappings":";;;;AAAA,uBAAe;;;;"}

package/dist/cjs/components/Avatar/useProgressiveImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProgressiveImage.js","sources":["../../../../src/components/Avatar/useProgressiveImage.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nenum ImageEventType {\n  Load = 'load',\n  Error = 'error',\n}\n\nexport interface CachedImage {\n  src: string\n  isLoaded: boolean\n}\n\ntype ImageCacheMap = Map<string, CachedImage>\n\nconst defaultImageCache = new Map<string, CachedImage>()\n\nfunction getCachedImage(src: string, imageCache: ImageCacheMap) {\n  const cachedImage = imageCache.get(src)\n  if (!cachedImage) {\n    return null\n  }\n  return cachedImage\n}\n\nexport default function useProgressiveImage(\n  src: string,\n  defaultSrc: string,\n  imageCache: ImageCacheMap = defaultImageCache\n) {\n  const [source, setSource] = useState<CachedImage | null>(() =>\n    getCachedImage(src, imageCache)\n  )\n\n  useEffect(\n    function updateSource() {\n      if (source?.src === src) {\n        return undefined\n      }\n\n      const cachedImage = getCachedImage(src, imageCache)\n\n      if (cachedImage?.isLoaded) {\n        setSource(cachedImage)\n        return undefined\n      }\n\n      const image = new Image()\n      image.src = src\n\n      function loadImage(event: Event) {\n        const loadedImage = {\n          src,\n          isLoaded: event.type === ImageEventType.Load,\n        }\n        setSource(loadedImage)\n        imageCache.set(src, loadedImage)\n      }\n\n      image.addEventListener(ImageEventType.Load, loadImage)\n      image.addEventListener(ImageEventType.Error, loadImage)\n\n      return function cleanup() {\n        image.removeEventListener(ImageEventType.Load, loadImage)\n        image.removeEventListener(ImageEventType.Error, loadImage)\n      }\n    },\n    [src, source, imageCache]\n  )\n\n  if (!source || !source.isLoaded) {\n    return defaultSrc\n  }\n\n  return source.src\n}\n"],"names":["ImageEventType","defaultImageCache","Map","getCachedImage","src","imageCache","cachedImage","get","useProgressiveImage","defaultSrc","source","setSource","useState","useEffect","updateSource","undefined","isLoaded","image","Image","loadImage","event","loadedImage","type","Load","set","addEventListener","Error","cleanup","removeEventListener"],"mappings":";;;;;;AAA2C,IAEtCA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAdA,cAAc,IAAA,EAAA,CAAA,CAAA;AAYnB,MAAMC,iBAAiB,GAAG,IAAIC,GAAG,EAAuB,CAAA;AAExD,SAASC,cAAcA,CAACC,GAAW,EAAEC,UAAyB,EAAE;AAC9D,EAAA,MAAMC,WAAW,GAAGD,UAAU,CAACE,GAAG,CAACH,GAAG,CAAC,CAAA;EACvC,IAAI,CAACE,WAAW,EAAE;AAChB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACA,EAAA,OAAOA,WAAW,CAAA;AACpB,CAAA;AAEe,SAASE,mBAAmBA,CACzCJ,GAAW,EACXK,UAAkB,EAClBJ,UAAyB,GAAGJ,iBAAiB,EAC7C;AACA,EAAA,MAAM,CAACS,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,MACvDT,cAAc,CAACC,GAAG,EAAEC,UAAU,CAChC,CAAC,CAAA;AAEDQ,EAAAA,eAAS,CACP,SAASC,YAAYA,GAAG;AACtB,IAAA,IAAIJ,MAAM,EAAEN,GAAG,KAAKA,GAAG,EAAE;AACvB,MAAA,OAAOW,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAMT,WAAW,GAAGH,cAAc,CAACC,GAAG,EAAEC,UAAU,CAAC,CAAA;IAEnD,IAAIC,WAAW,EAAEU,QAAQ,EAAE;MACzBL,SAAS,CAACL,WAAW,CAAC,CAAA;AACtB,MAAA,OAAOS,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAME,KAAK,GAAG,IAAIC,KAAK,EAAE,CAAA;IACzBD,KAAK,CAACb,GAAG,GAAGA,GAAG,CAAA;IAEf,SAASe,SAASA,CAACC,KAAY,EAAE;AAC/B,MAAA,MAAMC,WAAW,GAAG;QAClBjB,GAAG;AACHY,QAAAA,QAAQ,EAAEI,KAAK,CAACE,IAAI,KAAKtB,cAAc,CAACuB,IAAAA;OACzC,CAAA;MACDZ,SAAS,CAACU,WAAW,CAAC,CAAA;AACtBhB,MAAAA,UAAU,CAACmB,GAAG,CAACpB,GAAG,EAAEiB,WAAW,CAAC,CAAA;AAClC,KAAA;IAEAJ,KAAK,CAACQ,gBAAgB,CAACzB,cAAc,CAACuB,IAAI,EAAEJ,SAAS,CAAC,CAAA;IACtDF,KAAK,CAACQ,gBAAgB,CAACzB,cAAc,CAAC0B,KAAK,EAAEP,SAAS,CAAC,CAAA;IAEvD,OAAO,SAASQ,OAAOA,GAAG;MACxBV,KAAK,CAACW,mBAAmB,CAAC5B,cAAc,CAACuB,IAAI,EAAEJ,SAAS,CAAC,CAAA;MACzDF,KAAK,CAACW,mBAAmB,CAAC5B,cAAc,CAAC0B,KAAK,EAAEP,SAAS,CAAC,CAAA;KAC3D,CAAA;GACF,EACD,CAACf,GAAG,EAAEM,MAAM,EAAEL,UAAU,CAC1B,CAAC,CAAA;AAED,EAAA,IAAI,CAACK,MAAM,IAAI,CAACA,MAAM,CAACM,QAAQ,EAAE;AAC/B,IAAA,OAAOP,UAAU,CAAA;AACnB,GAAA;EAEA,OAAOC,MAAM,CAACN,GAAG,CAAA;AACnB;;;;"}

package/dist/cjs/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
+var index = require('../../node_modules/classnames/index.js');
+var array = require('../../utils/array.js');
+var style = require('../../utils/style.js');
+var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
+var Avatar = require('../Avatar/Avatar.js');
+var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
+var Icon = require('../Icon/Icon.js');
+var Text = require('../Text/Text.js');
+
+const MAX_AVATAR_LIST_COUNT = 99;
+const AVATAR_GROUP_DEFAULT_SPACING = 4;
+const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-avatar-group-ellipsis-icon';
+function getRestAvatarListCountText(count, max) {
+  const restCount = count - max;
+  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`;
+}
+
+// TODO: Not specified
+function getProperIconSize(avatarSize) {
+  return {
+    20: 'xxs',
+    24: 'xs',
+    30: 's',
+    36: 'm',
+    42: 'm',
+    48: 'l',
+    72: 'l',
+    90: 'l',
+    120: 'l'
+  }[avatarSize];
+}
+
+// TODO: Not specified
+function getProperTypoSize(avatarSize) {
+  return {
+    20: '12',
+    24: '13',
+    30: '15',
+    36: '16',
+    42: '18',
+    48: '24',
+    72: '24',
+    90: '24',
+    120: '24'
+  }[avatarSize];
+}
+
+/**
+ * `AvatarGroup` is a component for grouping `Avatar` components
+ * @example
+ *
+ * ```tsx
+ * <AvatarGroup
+ *  max={2}
+ *  spacing={4}
+ *  ellipsisType="icon"
+ * >
+ *    <Avatar />
+ *    <Avatar />
+ *    <Avatar />
+ * </AvatarGroup>
+ * ```
+ */
+const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
+  max,
+  size = '24',
+  spacing = AVATAR_GROUP_DEFAULT_SPACING,
+  ellipsisType = 'icon',
+  onMouseEnterEllipsis,
+  onMouseLeaveEllipsis,
+  style: style$1,
+  className,
+  children,
+  ...rest
+}, forwardedRef) {
+  const AVATAR_BORDER_RADIUS = Avatar.useAvatarRadiusToken();
+  const renderAvatarElement = React.useCallback((avatar, avatarListCount) => {
+    const key = avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`;
+    const shouldShowBorder = avatarListCount > 1 && spacing < 0;
+    const showBorder = avatar.props.showBorder || shouldShowBorder;
+    return /*#__PURE__*/React.cloneElement(avatar, {
+      key,
+      size,
+      showBorder
+    });
+  }, [size, spacing]);
+  const avatarListCount = React.useMemo(() => React.Children.count(children), [children]);
+  const AvatarListComponent = React.useMemo(() => {
+    if (avatarListCount <= max) {
+      return React.Children.map(children, avatar => /*#__PURE__*/React.isValidElement(avatar) && renderAvatarElement(avatar, avatarListCount));
+    }
+    const sliceEndIndex = max - avatarListCount;
+    const slicedAvatarList = React.Children.toArray(children).slice(0, sliceEndIndex);
+    return slicedAvatarList.map((avatar, index$1, arr) => {
+      if (! /*#__PURE__*/React.isValidElement(avatar)) {
+        return null;
+      }
+      const AvatarElement = renderAvatarElement(avatar, slicedAvatarList.length);
+      if (!array.isLastIndex(arr, index$1)) {
+        return AvatarElement;
+      }
+      if (ellipsisType === 'icon') {
+        return /*#__PURE__*/React.createElement("div", {
+          key: "ellipsis",
+          className: AvatarGroup_module.default.AvatarEllipsisIconWrapper,
+          onMouseEnter: onMouseEnterEllipsis,
+          onMouseLeave: onMouseLeaveEllipsis,
+          "data-testid": AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID
+        }, /*#__PURE__*/React.createElement(SmoothCornersBox.SmoothCornersBox, {
+          borderRadius: AVATAR_BORDER_RADIUS,
+          backgroundColor: "bgtxt-absolute-black-lightest",
+          className: AvatarGroup_module.default.AvatarEllipsisIcon
+        }, /*#__PURE__*/React.createElement(Icon.Icon, {
+          source: bezierIcons.MoreIcon,
+          size: getProperIconSize(size),
+          color: "bgtxt-absolute-white-dark"
+        })), AvatarElement);
+      }
+      if (ellipsisType === 'count') {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: "ellipsis"
+        }, AvatarElement, /*#__PURE__*/React.createElement("div", {
+          style: {
+            '--b-avatar-group-ellipsis-ml': style.px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING))
+          },
+          className: index.default(AvatarGroup_module.default.AvatarEllipsisCountWrapper, AvatarGroup_module.default[`size-${size}`]),
+          onMouseEnter: onMouseEnterEllipsis,
+          onMouseLeave: onMouseLeaveEllipsis
+        }, /*#__PURE__*/React.createElement(Text.Text, {
+          typo: getProperTypoSize(size),
+          color: "txt-black-dark",
+          className: AvatarGroup_module.default.AvatarEllipsisCount
+        }, getRestAvatarListCountText(avatarListCount, max))));
+      }
+      return null;
+    });
+  }, [avatarListCount, max, children, renderAvatarElement, ellipsisType, onMouseEnterEllipsis, onMouseLeaveEllipsis, AVATAR_BORDER_RADIUS, size, spacing]);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    role: "group",
+    ref: forwardedRef,
+    className: index.default(AvatarGroup_module.default.AvatarGroup, AvatarGroup_module.default[`size-${size}`], className),
+    style: {
+      '--b-avatar-group-spacing': style.px(spacing),
+      ...style$1
+    }
+  }, rest), AvatarListComponent);
+});
+
+exports.AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID;
+exports.AvatarGroup = AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map