@channel.io/bezier-react 2.6.2 → 3.0.0

package/dist/cjs/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleEmojiButtonGroup.js","sources":["../../../../src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx"],"sourcesContent":["import React, { type CSSProperties, forwardRef, useState } from 'react'\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { cssDimension } from '~/src/utils/style'\n\nimport {\n  EMOJI_BUTTON_GROUP_GAP,\n  EMOJI_BUTTON_SIZE,\n  useToggleEmojiButtonSize,\n} from '~/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Emoji } from '~/src/components/Emoji'\n\nimport {\n  type ToggleEmojiButtonGroupProps,\n  type ToggleEmojiButtonSourceProps,\n} from './ToggleEmojiButtonGroup.types'\n\nimport styles from './ToggleEmojiButtonGroup.module.scss'\n\nconst EMOJI_SIZE = 30\n\n/**\n * Toggle Button that contains `Emoji` component with size fixed to 30.\n * It should be used with `ToggleEmojiButtonGroup` component.\n * @example\n * ```tsx\n * <ToggleEmojiButtonSource\n *   content={\n *     <Emoji\n *       imageUrl=\"https://cf.exp.channel.io/asset/emoji/images/80/a.png\"\n *       name=\"A\"\n *    />\n *   }\n * />\n * ```\n */\nexport const ToggleEmojiButtonSource = forwardRef<\n  HTMLButtonElement,\n  ToggleEmojiButtonSourceProps\n>(function ToggleEmojiButtonSource(\n  { name, variant, className, selected, size = 'm', value, onResize, ...rest },\n  forwardedRef\n) {\n  return (\n    <ToggleGroup.Item\n      value={value}\n      asChild\n    >\n      <BaseButton\n        ref={forwardedRef}\n        className={classNames(\n          styles.ToggleEmojiButtonSource,\n          styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          className\n        )}\n        {...rest}\n      >\n        <div className={classNames(styles.ButtonContent)}>\n          <Emoji\n            name={name}\n            size={`${EMOJI_SIZE}`}\n          />\n        </div>\n      </BaseButton>\n    </ToggleGroup.Item>\n  )\n})\n\n/**\n * Component for grouping `ToggleEmojiButtonSource`.\n * @example\n * ```tsx\n * <ToggleEmojiButtonGroup\n *   fillDirection=\"horizontal\"\n * >\n *   <ToggleEmojiButtonSource content={<Emoji />} />\n *   <ToggleEmojiButtonSource content={<Emoji />} />\n * </ToggleEmojiButtonGroup>\n * ```\n */\nexport const ToggleEmojiButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleEmojiButtonGroupProps\n>(function ToggleEmojiButtonGroup(\n  {\n    fillDirection,\n    value,\n    className,\n    defaultValue,\n    children,\n    style,\n    dir = 'ltr',\n    onValueChange,\n    ...rest\n  },\n  forwardedRef\n) {\n  const [container, setContainer] = useState<null | HTMLDivElement>(null)\n  const mergedRefs = useMergeRefs(setContainer, forwardedRef)\n  const shouldResizeButton = fillDirection === 'all'\n  const resizedButtonSize = useToggleEmojiButtonSize({\n    container,\n    enabled: shouldResizeButton,\n    buttonCount: React.Children.count(children),\n  })\n\n  return (\n    <ToggleGroup.Root\n      type=\"single\"\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      value={value}\n      ref={mergedRefs}\n      style={\n        {\n          '--b-toggle-emoji-button-emoji-size': cssDimension(EMOJI_SIZE),\n          '--b-toggle-emoji-button-size': cssDimension(\n            shouldResizeButton ? resizedButtonSize : EMOJI_BUTTON_SIZE\n          ),\n          '--b-toggle-emoji-button-group-gap': cssDimension(\n            EMOJI_BUTTON_GROUP_GAP\n          ),\n          ...style,\n        } as CSSProperties\n      }\n      className={classNames(\n        styles.ToggleEmojiButtonGroup,\n        fillDirection && styles[`fillDirection-${fillDirection}`],\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </ToggleGroup.Root>\n  )\n})\n"],"names":["EMOJI_SIZE","ToggleEmojiButtonSource","forwardRef","name","variant","className","selected","size","value","onResize","rest","forwardedRef","React","createElement","ToggleGroup","asChild","BaseButton","Object","assign","ref","classNames","styles","ButtonContent","Emoji","ToggleEmojiButtonGroup","fillDirection","defaultValue","children","style","dir","onValueChange","container","setContainer","useState","mergedRefs","useMergeRefs","shouldResizeButton","resizedButtonSize","useToggleEmojiButtonSize","enabled","buttonCount","Children","count","type","cssDimension","EMOJI_BUTTON_SIZE","EMOJI_BUTTON_GROUP_GAP"],"mappings":"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"}
+{"version":3,"file":"ToggleEmojiButtonGroup.js","sources":["../../../../src/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { Children, forwardRef, useState } from 'react'\n\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport classNames from 'classnames'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\nimport { cssDimension } from '~/src/utils/style'\n\nimport {\n  EMOJI_BUTTON_GROUP_GAP,\n  EMOJI_BUTTON_SIZE,\n  useToggleEmojiButtonSize,\n} from '~/src/components/AlphaToggleEmojiButtonGroup/useToggleEmojiButtonSize'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Emoji } from '~/src/components/Emoji'\n\nimport {\n  type ToggleEmojiButtonGroupProps,\n  type ToggleEmojiButtonSourceProps,\n} from './ToggleEmojiButtonGroup.types'\n\nimport styles from './ToggleEmojiButtonGroup.module.scss'\n\nconst EMOJI_SIZE = 30\n\n/**\n * Toggle Button that contains `Emoji` component with size fixed to 30.\n * It should be used with `ToggleEmojiButtonGroup` component.\n * @example\n * ```tsx\n * <ToggleEmojiButtonSource\n *   content={\n *     <Emoji\n *       imageUrl=\"https://cf.exp.channel.io/asset/emoji/images/80/a.png\"\n *       name=\"A\"\n *    />\n *   }\n * />\n * ```\n */\nexport const ToggleEmojiButtonSource = forwardRef<\n  HTMLButtonElement,\n  ToggleEmojiButtonSourceProps\n>(function ToggleEmojiButtonSource(\n  { name, variant, className, selected, size = 'm', value, onResize, ...rest },\n  forwardedRef\n) {\n  return (\n    <ToggleGroup.Item\n      value={value}\n      asChild\n    >\n      <BaseButton\n        ref={forwardedRef}\n        className={classNames(\n          styles.ToggleEmojiButtonSource,\n          styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          className\n        )}\n        {...rest}\n      >\n        <div className={classNames(styles.ButtonContent)}>\n          <Emoji\n            name={name}\n            size={`${EMOJI_SIZE}`}\n          />\n        </div>\n      </BaseButton>\n    </ToggleGroup.Item>\n  )\n})\n\n/**\n * Component for grouping `ToggleEmojiButtonSource`.\n * @example\n * ```tsx\n * <ToggleEmojiButtonGroup\n *   fillDirection=\"horizontal\"\n * >\n *   <ToggleEmojiButtonSource content={<Emoji />} />\n *   <ToggleEmojiButtonSource content={<Emoji />} />\n * </ToggleEmojiButtonGroup>\n * ```\n */\nexport const ToggleEmojiButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleEmojiButtonGroupProps\n>(function ToggleEmojiButtonGroup(\n  {\n    fillDirection,\n    value,\n    className,\n    defaultValue,\n    children,\n    style,\n    dir = 'ltr',\n    onValueChange,\n    ...rest\n  },\n  forwardedRef\n) {\n  const [container, setContainer] = useState<null | HTMLDivElement>(null)\n  const mergedRefs = useMergeRefs(setContainer, forwardedRef)\n  const shouldResizeButton = fillDirection === 'all'\n  const resizedButtonSize = useToggleEmojiButtonSize({\n    container,\n    enabled: shouldResizeButton,\n    buttonCount: Children.count(children),\n  })\n\n  return (\n    <ToggleGroup.Root\n      type=\"single\"\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      value={value}\n      ref={mergedRefs}\n      style={\n        {\n          '--b-toggle-emoji-button-emoji-size': cssDimension(EMOJI_SIZE),\n          '--b-toggle-emoji-button-size': cssDimension(\n            shouldResizeButton ? resizedButtonSize : EMOJI_BUTTON_SIZE\n          ),\n          '--b-toggle-emoji-button-group-gap': cssDimension(\n            EMOJI_BUTTON_GROUP_GAP\n          ),\n          ...style,\n        } as CSSProperties\n      }\n      className={classNames(\n        styles.ToggleEmojiButtonGroup,\n        fillDirection && styles[`fillDirection-${fillDirection}`],\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </ToggleGroup.Root>\n  )\n})\n"],"names":["EMOJI_SIZE","ToggleEmojiButtonSource","forwardRef","name","variant","className","selected","size","value","onResize","rest","forwardedRef","_jsx","ToggleGroup","asChild","children","BaseButton","ref","classNames","styles","ButtonContent","Emoji","ToggleEmojiButtonGroup","fillDirection","defaultValue","style","dir","onValueChange","container","setContainer","useState","mergedRefs","useMergeRefs","shouldResizeButton","resizedButtonSize","useToggleEmojiButtonSize","enabled","buttonCount","Children","count","type","cssDimension","EMOJI_BUTTON_SIZE","EMOJI_BUTTON_GROUP_GAP"],"mappings":"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"}

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

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var ssrWindow_esm = require('../../node_modules/ssr-window/ssr-window.esm.js');
+var jsxRuntime = require('react/jsx-runtime');
 var WindowProvider = require('../WindowProvider/WindowProvider.js');
 var FeatureProvider = require('../FeatureProvider/FeatureProvider.js');
 var TokenProvider = require('../TokenProvider/TokenProvider.js');
@@ -41,13 +42,16 @@ function AppProvider({
       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)));
+  return /*#__PURE__*/jsxRuntime.jsx(WindowProvider.WindowProvider, {
+    window: window,
+    children: /*#__PURE__*/jsxRuntime.jsx(FeatureProvider.FeatureProvider, {
+      features: features,
+      children: /*#__PURE__*/jsxRuntime.jsx(TokenProvider.TokenProvider, {
+        themeName: themeName,
+        children: children
+      })
+    })
+  });
 }
 
 exports.AppProvider = AppProvider;

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

@@ -1 +1 @@
-{"version":3,"file":"AppProvider.js","sources":["../../../../src/components/AppProvider/AppProvider.tsx"],"sourcesContent":["'use client'\n\nimport 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":";;;;;;;;AAYA,MAAMA,aAAa,GAAGC,uBAAS,EAAE;;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;AACO,CAAC,EAAE;AACnBO,EAAAA,eAAS,CACP,SAASC,4BAA4BA,GAAG;AACtC,IAAA,MAAMC,WAAW,GAAGH,MAAM,CAACI,QAAQ,CAACC,eAAe;AACnD;AACAF,IAAAA,WAAW,CAACG,YAAY,CAAC,mBAAmB,EAAER,SAAS,CAAC;IACxD,OAAO,SAASS,OAAOA,GAAG;AACxBJ,MAAAA,WAAW,CAACK,eAAe,CAAC,mBAAmB,CAAC;KACjD;AACH,GAAC,EACD,CAACR,MAAM,EAAEF,SAAS,CACpB,CAAC;AAED,EAAA,oBACEW,KAAA,CAAAC,aAAA,CAACC,6BAAc,EAAA;AAACX,IAAAA,MAAM,EAAEA;AAAO,GAAA,eAC7BS,KAAA,CAAAC,aAAA,CAACE,+BAAe,EAAA;AAACb,IAAAA,QAAQ,EAAEA;AAAS,GAAA,eAClCU,KAAA,CAAAC,aAAA,CAACG,2BAAa,EAAA;AAACf,IAAAA,SAAS,EAAEA;GAAYD,EAAAA,QAAwB,CAC/C,CACH,CAAC;AAErB;;;;"}
+{"version":3,"file":"AppProvider.js","sources":["../../../../src/components/AppProvider/AppProvider.tsx"],"sourcesContent":["'use client'\n\nimport { 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","_jsx","WindowProvider","FeatureProvider","TokenProvider"],"mappings":";;;;;;;;;AAYA,MAAMA,aAAa,GAAGC,uBAAS,EAAE;;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;AACO,CAAC,EAAE;AACnBO,EAAAA,eAAS,CACP,SAASC,4BAA4BA,GAAG;AACtC,IAAA,MAAMC,WAAW,GAAGH,MAAM,CAACI,QAAQ,CAACC,eAAe;AACnD;AACAF,IAAAA,WAAW,CAACG,YAAY,CAAC,mBAAmB,EAAER,SAAS,CAAC;IACxD,OAAO,SAASS,OAAOA,GAAG;AACxBJ,MAAAA,WAAW,CAACK,eAAe,CAAC,mBAAmB,CAAC;KACjD;AACH,GAAC,EACD,CAACR,MAAM,EAAEF,SAAS,CACpB,CAAC;EAED,oBACEW,cAAA,CAACC,6BAAc,EAAA;AAACV,IAAAA,MAAM,EAAEA,MAAO;IAAAH,QAAA,eAC7BY,cAAA,CAACE,+BAAe,EAAA;AAACZ,MAAAA,QAAQ,EAAEA,QAAS;MAAAF,QAAA,eAClCY,cAAA,CAACG,2BAAa,EAAA;AAACd,QAAAA,SAAS,EAAEA,SAAU;AAAAD,QAAAA,QAAA,EAAEA;OAAwB;KAC/C;AAAC,GACJ,CAAC;AAErB;;;;"}

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

@@ -4,6 +4,7 @@ var React = require('react');
 var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var useIsomorphicLayoutEffect = require('../../hooks/useIsomorphicLayoutEffect.js');
 var useMergeRefs = require('../../hooks/useMergeRefs.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 /**
  * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.
@@ -34,9 +35,11 @@ const AutoFocus = /*#__PURE__*/React.forwardRef(function AutoFocus({
     }
   }, [target, when]);
   const ref = useMergeRefs.default(setTarget, forwardedRef);
-  return /*#__PURE__*/React.createElement(index.Slot, Object.assign({
-    ref: ref
-  }, rest), children);
+  return /*#__PURE__*/jsxRuntime.jsx(index.Slot, {
+    ref: ref,
+    ...rest,
+    children: children
+  });
 });
 
 exports.AutoFocus = AutoFocus;

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

@@ -1 +1 @@
-{"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useState } from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'\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    useIsomorphicLayoutEffect(\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","useIsomorphicLayoutEffect","focus","ref","useMergeRefs","React","createElement","Slot","Object","assign"],"mappings":";;;;;;;AAWA;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;AAAK,CAAC,EAAEC,YAAY,EAAE;EACnE,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC;AAE9DC,EAAAA,mDAAyB,CACvB,SAASC,KAAKA,GAAG;IACf,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE;AAChB;AACF,GAAC,EACD,CAACJ,MAAM,EAAEH,IAAI,CACf,CAAC;AAED,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CAACL,SAAS,EAAEF,YAAY,CAAC;EAEjD,oBACEQ,KAAA,CAAAC,aAAA,CAACC,UAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHN,IAAAA,GAAG,EAAEA;GACDP,EAAAA,IAAI,CAEPF,EAAAA,QACG,CAAC;AAEX,CACF;;;;"}
+{"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useState } from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'\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    useIsomorphicLayoutEffect(\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","useIsomorphicLayoutEffect","focus","ref","useMergeRefs","_jsx","Slot"],"mappings":";;;;;;;;AAWA;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;AAAK,CAAC,EAAEC,YAAY,EAAE;EACnE,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC;AAE9DC,EAAAA,mDAAyB,CACvB,SAASC,KAAKA,GAAG;IACf,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE;AAChB;AACF,GAAC,EACD,CAACJ,MAAM,EAAEH,IAAI,CACf,CAAC;AAED,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CAACL,SAAS,EAAEF,YAAY,CAAC;EAEjD,oBACEQ,cAAA,CAACC,UAAI,EAAA;AACHH,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLP,IAAI;AAAAF,IAAAA,QAAA,EAEPA;AAAQ,GACL,CAAC;AAEX,CACF;;;;"}

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

@@ -1,11 +1,12 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/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 jsxRuntime = require('react/jsx-runtime');
 var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Status = require('../Status/Status.js');
@@ -68,33 +69,37 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
         return children;
       }
       if (status) {
-        return /*#__PURE__*/React.createElement(Status.Status, {
+        return /*#__PURE__*/jsxRuntime.jsx(Status.Status, {
           type: status,
           size: statusSize
         });
       }
       return null;
     })();
-    return Contents && /*#__PURE__*/React.createElement("div", {
+    return Contents && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: Avatar_module.default.StatusWrapper,
-      "data-testid": STATUS_WRAPPER_TEST_ID
-    }, Contents);
+      "data-testid": STATUS_WRAPPER_TEST_ID,
+      children: Contents
+    });
   }, [status, size, children]);
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     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-description": 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));
+    "data-testid": AVATAR_WRAPPER_TEST_ID,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(SmoothCornersBox.SmoothCornersBox, {
+      ref: forwardedRef,
+      "aria-description": 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,
+      children: StatusComponent
+    })
+  });
 });
 
 exports.AVATAR_TEST_ID = AVATAR_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport 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-description={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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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, 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 && !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-description={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","isValidElement","statusSize","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"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"}

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

@@ -2,15 +2,35 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var array = require('../../utils/array.js');
 var style = require('../../utils/style.js');
 var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Avatar = require('../Avatar/Avatar.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 const MAX_AVATAR_LIST_COUNT = 99;
 const AVATAR_GROUP_DEFAULT_SPACING = 4;
 const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-avatar-group-ellipsis-icon';
@@ -83,21 +103,21 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
     const key = (_avatar$key = avatar.key) !== null && _avatar$key !== void 0 ? _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, {
+    return /*#__PURE__*/React__namespace.cloneElement(avatar, {
       key,
       size,
       showBorder
     });
   }, [size, spacing]);
-  const avatarListCount = React.useMemo(() => React.Children.count(children), [children]);
+  const avatarListCount = React.useMemo(() => React__namespace.Children.count(children), [children]);
   const AvatarListComponent = React.useMemo(() => {
     if (avatarListCount <= max) {
-      return React.Children.map(children, avatar => /*#__PURE__*/React.isValidElement(avatar) && renderAvatarElement(avatar, avatarListCount));
+      return React__namespace.Children.map(children, avatar => /*#__PURE__*/React__namespace.isValidElement(avatar) && renderAvatarElement(avatar, avatarListCount));
     }
     const sliceEndIndex = max - avatarListCount;
-    const slicedAvatarList = React.Children.toArray(children).slice(0, sliceEndIndex);
+    const slicedAvatarList = React__namespace.Children.toArray(children).slice(0, sliceEndIndex);
     return slicedAvatarList.map((avatar, index$1, arr) => {
-      if (! /*#__PURE__*/React.isValidElement(avatar)) {
+      if (! /*#__PURE__*/React__namespace.isValidElement(avatar)) {
         return null;
       }
       const AvatarElement = renderAvatarElement(avatar, slicedAvatarList.length);
@@ -105,50 +125,55 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
         return AvatarElement;
       }
       if (ellipsisType === 'icon') {
-        return /*#__PURE__*/React.createElement("div", {
-          key: "ellipsis",
+        return /*#__PURE__*/jsxRuntime.jsxs("div", {
           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);
+          "data-testid": AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID,
+          children: [/*#__PURE__*/jsxRuntime.jsx(SmoothCornersBox.SmoothCornersBox, {
+            borderRadius: AVATAR_BORDER_RADIUS,
+            backgroundColor: "bgtxt-absolute-black-lightest",
+            className: AvatarGroup_module.default.AvatarEllipsisIcon,
+            children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+              source: bezierIcons.MoreIcon,
+              size: getProperIconSize(size),
+              color: "bgtxt-absolute-white-dark"
+            })
+          }), AvatarElement]
+        }, "ellipsis");
       }
       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 /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
+          children: [AvatarElement, /*#__PURE__*/jsxRuntime.jsx("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,
+            children: /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+              typo: getProperTypoSize(size),
+              color: "txt-black-dark",
+              className: AvatarGroup_module.default.AvatarEllipsisCount,
+              children: getRestAvatarListCountText(avatarListCount, max)
+            })
+          })]
+        }, "ellipsis");
       }
       return null;
     });
   }, [avatarListCount, max, children, renderAvatarElement, ellipsisType, onMouseEnterEllipsis, onMouseLeaveEllipsis, AVATAR_BORDER_RADIUS, size, spacing]);
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     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);
+    },
+    ...rest,
+    children: AvatarListComponent
+  });
 });
 
 exports.AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["'use client' \n\nimport React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { px } from '~/src/utils/style'\n\nimport {\n  type AvatarProps,\n  type AvatarSize,\n  useAvatarRadiusToken,\n} from '~/src/components/Avatar'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport { type AvatarGroupProps } from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n  'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n  const restCount = count - max\n  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(avatarSize: AvatarSize) {\n  return (\n    {\n      20: 'xxs',\n      24: 'xs',\n      30: 's',\n      36: 'm',\n      42: 'm',\n      48: 'l',\n      72: 'l',\n      90: 'l',\n      120: 'l',\n    } as const\n  )[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(avatarSize: AvatarSize) {\n  return (\n    {\n      20: '12',\n      24: '13',\n      30: '15',\n      36: '16',\n      42: '18',\n      48: '24',\n      72: '24',\n      90: '24',\n      120: '24',\n    } as const\n  )[avatarSize]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n *  max={2}\n *  spacing={4}\n *  ellipsisType=\"icon\"\n * >\n *    <Avatar />\n *    <Avatar />\n *    <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup(\n    {\n      max,\n      size = '24',\n      spacing = AVATAR_GROUP_DEFAULT_SPACING,\n      ellipsisType = 'icon',\n      onMouseEnterEllipsis,\n      onMouseLeaveEllipsis,\n      style,\n      className,\n      children,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n    const renderAvatarElement = useCallback(\n      (avatar: React.ReactElement<AvatarProps>, avatarListCount: number) => {\n        const key =\n          avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n        const shouldShowBorder = avatarListCount > 1 && spacing < 0\n        const showBorder = avatar.props.showBorder || shouldShowBorder\n        return React.cloneElement(avatar, { key, size, showBorder })\n      },\n      [size, spacing]\n    )\n\n    const avatarListCount = useMemo(\n      () => React.Children.count(children),\n      [children]\n    )\n\n    const AvatarListComponent = useMemo(() => {\n      if (avatarListCount <= max) {\n        return React.Children.map(\n          children,\n          (avatar) =>\n            React.isValidElement<AvatarProps>(avatar) &&\n            renderAvatarElement(avatar, avatarListCount)\n        )\n      }\n\n      const sliceEndIndex = max - avatarListCount\n      const slicedAvatarList = React.Children.toArray(children).slice(\n        0,\n        sliceEndIndex\n      )\n\n      return slicedAvatarList.map((avatar, index, arr) => {\n        if (!React.isValidElement<AvatarProps>(avatar)) {\n          return null\n        }\n\n        const AvatarElement = renderAvatarElement(\n          avatar,\n          slicedAvatarList.length\n        )\n\n        if (!isLastIndex(arr, index)) {\n          return AvatarElement\n        }\n\n        if (ellipsisType === 'icon') {\n          return (\n            <div\n              key=\"ellipsis\"\n              className={styles.AvatarEllipsisIconWrapper}\n              onMouseEnter={onMouseEnterEllipsis}\n              onMouseLeave={onMouseLeaveEllipsis}\n              data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n            >\n              <SmoothCornersBox\n                borderRadius={AVATAR_BORDER_RADIUS}\n                backgroundColor=\"bgtxt-absolute-black-lightest\"\n                className={styles.AvatarEllipsisIcon}\n              >\n                <Icon\n                  source={MoreIcon}\n                  size={getProperIconSize(size)}\n                  color=\"bgtxt-absolute-white-dark\"\n                />\n              </SmoothCornersBox>\n              {AvatarElement}\n            </div>\n          )\n        }\n\n        if (ellipsisType === 'count') {\n          return (\n            <React.Fragment key=\"ellipsis\">\n              {AvatarElement}\n              <div\n                style={\n                  {\n                    '--b-avatar-group-ellipsis-ml': px(\n                      Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n                    ),\n                  } as React.CSSProperties\n                }\n                className={classNames(\n                  styles.AvatarEllipsisCountWrapper,\n                  styles[`size-${size}`]\n                )}\n                onMouseEnter={onMouseEnterEllipsis}\n                onMouseLeave={onMouseLeaveEllipsis}\n              >\n                <Text\n                  typo={getProperTypoSize(size)}\n                  color=\"txt-black-dark\"\n                  className={styles.AvatarEllipsisCount}\n                >\n                  {getRestAvatarListCountText(avatarListCount, max)}\n                </Text>\n              </div>\n            </React.Fragment>\n          )\n        }\n\n        return null\n      })\n    }, [\n      avatarListCount,\n      max,\n      children,\n      renderAvatarElement,\n      ellipsisType,\n      onMouseEnterEllipsis,\n      onMouseLeaveEllipsis,\n      AVATAR_BORDER_RADIUS,\n      size,\n      spacing,\n    ])\n\n    return (\n      <div\n        role=\"group\"\n        ref={forwardedRef}\n        className={classNames(\n          styles.AvatarGroup,\n          styles[`size-${size}`],\n          className\n        )}\n        style={\n          {\n            '--b-avatar-group-spacing': px(spacing),\n            ...style,\n          } as React.CSSProperties\n        }\n        {...rest}\n      >\n        {AvatarListComponent}\n      </div>\n    )\n  }\n)\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","avatarSize","getProperTypoSize","AvatarGroup","forwardRef","size","spacing","ellipsisType","onMouseEnterEllipsis","onMouseLeaveEllipsis","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAvatarRadiusToken","renderAvatarElement","useCallback","avatar","avatarListCount","_avatar$key","key","props","name","avatarUrl","shouldShowBorder","showBorder","React","cloneElement","useMemo","Children","AvatarListComponent","map","isValidElement","sliceEndIndex","slicedAvatarList","toArray","slice","index","arr","AvatarElement","length","isLastIndex","createElement","styles","AvatarEllipsisIconWrapper","onMouseEnter","onMouseLeave","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","Object","assign","role","ref"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, useCallback, useMemo } from 'react'\nimport * as React from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { px } from '~/src/utils/style'\n\nimport {\n  type AvatarProps,\n  type AvatarSize,\n  useAvatarRadiusToken,\n} from '~/src/components/Avatar'\nimport { Icon } from '~/src/components/Icon'\nimport { SmoothCornersBox } from '~/src/components/SmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nimport { type AvatarGroupProps } from './AvatarGroup.types'\n\nimport styles from './AvatarGroup.module.scss'\n\nconst MAX_AVATAR_LIST_COUNT = 99\nconst AVATAR_GROUP_DEFAULT_SPACING = 4\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID =\n  'bezier-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n  const restCount = count - max\n  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(avatarSize: AvatarSize) {\n  return (\n    {\n      20: 'xxs',\n      24: 'xs',\n      30: 's',\n      36: 'm',\n      42: 'm',\n      48: 'l',\n      72: 'l',\n      90: 'l',\n      120: 'l',\n    } as const\n  )[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(avatarSize: AvatarSize) {\n  return (\n    {\n      20: '12',\n      24: '13',\n      30: '15',\n      36: '16',\n      42: '18',\n      48: '24',\n      72: '24',\n      90: '24',\n      120: '24',\n    } as const\n  )[avatarSize]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n *  max={2}\n *  spacing={4}\n *  ellipsisType=\"icon\"\n * >\n *    <Avatar />\n *    <Avatar />\n *    <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  function AvatarGroup(\n    {\n      max,\n      size = '24',\n      spacing = AVATAR_GROUP_DEFAULT_SPACING,\n      ellipsisType = 'icon',\n      onMouseEnterEllipsis,\n      onMouseLeaveEllipsis,\n      style,\n      className,\n      children,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n    const renderAvatarElement = useCallback(\n      (avatar: React.ReactElement<AvatarProps>, avatarListCount: number) => {\n        const key =\n          avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n        const shouldShowBorder = avatarListCount > 1 && spacing < 0\n        const showBorder = avatar.props.showBorder || shouldShowBorder\n        return React.cloneElement(avatar, { key, size, showBorder })\n      },\n      [size, spacing]\n    )\n\n    const avatarListCount = useMemo(\n      () => React.Children.count(children),\n      [children]\n    )\n\n    const AvatarListComponent = useMemo(() => {\n      if (avatarListCount <= max) {\n        return React.Children.map(\n          children,\n          (avatar) =>\n            React.isValidElement<AvatarProps>(avatar) &&\n            renderAvatarElement(avatar, avatarListCount)\n        )\n      }\n\n      const sliceEndIndex = max - avatarListCount\n      const slicedAvatarList = React.Children.toArray(children).slice(\n        0,\n        sliceEndIndex\n      )\n\n      return slicedAvatarList.map((avatar, index, arr) => {\n        if (!React.isValidElement<AvatarProps>(avatar)) {\n          return null\n        }\n\n        const AvatarElement = renderAvatarElement(\n          avatar,\n          slicedAvatarList.length\n        )\n\n        if (!isLastIndex(arr, index)) {\n          return AvatarElement\n        }\n\n        if (ellipsisType === 'icon') {\n          return (\n            <div\n              key=\"ellipsis\"\n              className={styles.AvatarEllipsisIconWrapper}\n              onMouseEnter={onMouseEnterEllipsis}\n              onMouseLeave={onMouseLeaveEllipsis}\n              data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n            >\n              <SmoothCornersBox\n                borderRadius={AVATAR_BORDER_RADIUS}\n                backgroundColor=\"bgtxt-absolute-black-lightest\"\n                className={styles.AvatarEllipsisIcon}\n              >\n                <Icon\n                  source={MoreIcon}\n                  size={getProperIconSize(size)}\n                  color=\"bgtxt-absolute-white-dark\"\n                />\n              </SmoothCornersBox>\n              {AvatarElement}\n            </div>\n          )\n        }\n\n        if (ellipsisType === 'count') {\n          return (\n            <React.Fragment key=\"ellipsis\">\n              {AvatarElement}\n              <div\n                style={\n                  {\n                    '--b-avatar-group-ellipsis-ml': px(\n                      Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)\n                    ),\n                  } as React.CSSProperties\n                }\n                className={classNames(\n                  styles.AvatarEllipsisCountWrapper,\n                  styles[`size-${size}`]\n                )}\n                onMouseEnter={onMouseEnterEllipsis}\n                onMouseLeave={onMouseLeaveEllipsis}\n              >\n                <Text\n                  typo={getProperTypoSize(size)}\n                  color=\"txt-black-dark\"\n                  className={styles.AvatarEllipsisCount}\n                >\n                  {getRestAvatarListCountText(avatarListCount, max)}\n                </Text>\n              </div>\n            </React.Fragment>\n          )\n        }\n\n        return null\n      })\n    }, [\n      avatarListCount,\n      max,\n      children,\n      renderAvatarElement,\n      ellipsisType,\n      onMouseEnterEllipsis,\n      onMouseLeaveEllipsis,\n      AVATAR_BORDER_RADIUS,\n      size,\n      spacing,\n    ])\n\n    return (\n      <div\n        role=\"group\"\n        ref={forwardedRef}\n        className={classNames(\n          styles.AvatarGroup,\n          styles[`size-${size}`],\n          className\n        )}\n        style={\n          {\n            '--b-avatar-group-spacing': px(spacing),\n            ...style,\n          } as React.CSSProperties\n        }\n        {...rest}\n      >\n        {AvatarListComponent}\n      </div>\n    )\n  }\n)\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","avatarSize","getProperTypoSize","AvatarGroup","forwardRef","size","spacing","ellipsisType","onMouseEnterEllipsis","onMouseLeaveEllipsis","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAvatarRadiusToken","renderAvatarElement","useCallback","avatar","avatarListCount","_avatar$key","key","props","name","avatarUrl","shouldShowBorder","showBorder","React","cloneElement","useMemo","Children","AvatarListComponent","map","isValidElement","sliceEndIndex","slicedAvatarList","toArray","slice","index","arr","AvatarElement","length","isLastIndex","_jsxs","styles","AvatarEllipsisIconWrapper","onMouseEnter","onMouseLeave","_jsx","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","role","ref"],"mappings":"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"}

package/dist/cjs/components/Badge/Badge.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var type = require('../../utils/type.js');
+var jsxRuntime = require('react/jsx-runtime');
 var BaseTagBadge = require('../BaseTagBadge/BaseTagBadge.js');
 var Icon = require('../Icon/Icon.js');
 
@@ -27,18 +28,21 @@ const Badge = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Bad
   children,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement(BaseTagBadge.BaseTagBadge, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsxs(BaseTagBadge.BaseTagBadge, {
     ref: forwardedRef,
     size: size,
     variant: variant,
-    "data-testid": BADGE_TEST_ID
-  }, rest), icon && /*#__PURE__*/React.createElement(Icon.Icon, {
-    source: icon,
-    size: "xs"
-  }), !type.isEmpty(children) && /*#__PURE__*/React.createElement(BaseTagBadge.BaseTagBadgeText, {
-    size: size,
-    marginHorizontal: 3
-  }, children));
+    "data-testid": BADGE_TEST_ID,
+    ...rest,
+    children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      source: icon,
+      size: "xs"
+    }), !type.isEmpty(children) && /*#__PURE__*/jsxRuntime.jsx(BaseTagBadge.BaseTagBadgeText, {
+      size: size,
+      marginHorizontal: 3,
+      children: children
+    })]
+  });
 }));
 
 exports.BADGE_TEST_ID = BADGE_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client' \n\nimport React, { forwardRef, memo } from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type BadgeProps } from './Badge.types'\n\nexport const BADGE_TEST_ID = 'bezier-badge'\n\n/**\n * `Badge` is a component for representing badge, which consists of text and icon.\n * @example\n * ```tsx\n * <Badge\n *   size=\"xs\"\n *   variant=\"blue\"\n *   icon={AppleIcon}\n * >\n *   Beta\n * </Badge>\n * ```\n */\nexport const Badge = memo(\n  forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n    { size = 'm', variant = 'default', icon, children, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={BADGE_TEST_ID}\n        {...rest}\n      >\n        {icon && (\n          <Icon\n            source={icon}\n            size=\"xs\"\n          />\n        )}\n\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={3}\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","variant","icon","children","rest","forwardedRef","React","createElement","BaseTagBadge","Object","assign","ref","Icon","source","isEmpty","BaseTagBadgeText","marginHorizontal"],"mappings":";;;;;;;AAWO,MAAMA,aAAa,GAAG;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,UAAI,cACvBC,gBAAU,CAA6B,SAASF,KAAKA,CACnD;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAC5DC,YAAY,EACZ;EACA,oBACEC,KAAA,CAAAC,aAAA,CAACC,yBAAY,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACXC,IAAAA,GAAG,EAAEN,YAAa;AAClBL,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;IACjB,aAAaL,EAAAA;GACTQ,EAAAA,IAAI,GAEPF,IAAI,iBACHI,KAAA,CAAAC,aAAA,CAACK,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEX,IAAK;AACbF,IAAAA,IAAI,EAAC;AAAI,GACV,CACF,EAEA,CAACc,YAAO,CAACX,QAAQ,CAAC,iBACjBG,KAAA,CAAAC,aAAA,CAACQ,6BAAgB,EAAA;AACff,IAAAA,IAAI,EAAEA,IAAK;AACXgB,IAAAA,gBAAgB,EAAE;GAEjBb,EAAAA,QACe,CAER,CAAC;AAEnB,CAAC,CACH;;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type BadgeProps } from './Badge.types'\n\nexport const BADGE_TEST_ID = 'bezier-badge'\n\n/**\n * `Badge` is a component for representing badge, which consists of text and icon.\n * @example\n * ```tsx\n * <Badge\n *   size=\"xs\"\n *   variant=\"blue\"\n *   icon={AppleIcon}\n * >\n *   Beta\n * </Badge>\n * ```\n */\nexport const Badge = memo(\n  forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n    { size = 'm', variant = 'default', icon, children, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={BADGE_TEST_ID}\n        {...rest}\n      >\n        {icon && (\n          <Icon\n            source={icon}\n            size=\"xs\"\n          />\n        )}\n\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={3}\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","variant","icon","children","rest","forwardedRef","_jsxs","BaseTagBadge","ref","_jsx","Icon","source","isEmpty","BaseTagBadgeText","marginHorizontal"],"mappings":";;;;;;;;AAWO,MAAMA,aAAa,GAAG;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,UAAI,cACvBC,gBAAU,CAA6B,SAASF,KAAKA,CACnD;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAC5DC,YAAY,EACZ;EACA,oBACEC,eAAA,CAACC,yBAAY,EAAA;AACXC,IAAAA,GAAG,EAAEH,YAAa;AAClBL,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaL,aAAc;AAAA,IAAA,GACvBQ,IAAI;AAAAD,IAAAA,QAAA,EAEPD,CAAAA,IAAI,iBACHO,cAAA,CAACC,SAAI,EAAA;AACHC,MAAAA,MAAM,EAAET,IAAK;AACbF,MAAAA,IAAI,EAAC;KACN,CACF,EAEA,CAACY,YAAO,CAACT,QAAQ,CAAC,iBACjBM,cAAA,CAACI,6BAAgB,EAAA;AACfb,MAAAA,IAAI,EAAEA,IAAK;AACXc,MAAAA,gBAAgB,EAAE,CAAE;AAAAX,MAAAA,QAAA,EAEnBA;AAAQ,KACO,CACnB;AAAA,GACW,CAAC;AAEnB,CAAC,CACH;;;;;"}