@channel.io/bezier-react 2.0.0-alpha.16 → 2.0.0-alpha.17

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

@@ -3,12 +3,10 @@
 var React = require('react');
 var index = require('../../node_modules/classnames/index.js');
 var type = require('../../utils/type.js');
-var Avatar_types = require('./Avatar.types.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 Status_types = require('../Status/Status.types.js');
 var AlphaSmoothCornersBox = require('../AlphaSmoothCornersBox/AlphaSmoothCornersBox.js');
 var Status = require('../Status/Status.js');
 
@@ -31,7 +29,7 @@ const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper';
  * <Avatar
  *   avatarUrl="'https://cf.channel.io/thumb/200x200/pub-file/1/606d87d059a6093594c0/ch-symbol-filled-smiley-bg.png"
  *   name="channel"
- *   size={AvatarSize.Size48}
+ *   size="48"
  *   showBorder
  *   disabled
  * />
@@ -40,7 +38,7 @@ const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper';
 const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
   avatarUrl = '',
   fallbackUrl = defaultAvatar.default,
-  size = Avatar_types.AvatarSize.Size24,
+  size = '24',
   name,
   disabled = false,
   showBorder = false,
@@ -56,7 +54,15 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
     if (type.isEmpty(children) && !status || children && ! /*#__PURE__*/React.isValidElement(children)) {
       return null;
     }
-    const statusSize = size >= Avatar_types.AvatarSize.Size90 ? Status_types.StatusSize.L : Status_types.StatusSize.M;
+    const statusSize = (() => {
+      switch (size) {
+        case '90':
+        case '120':
+          return 'l';
+        default:
+          return 'm';
+      }
+    })();
     const Contents = (() => {
       if (children) {
         return children;
@@ -81,7 +87,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
   }, rest), /*#__PURE__*/React.createElement(AlphaSmoothCornersBox.AlphaSmoothCornersBox, {
     ref: forwardedRef,
     "aria-label": name,
-    className: index.default(Avatar_module.default.AvatarImage, size >= Avatar_types.AvatarSize.Size72 && Avatar_module.default['big-size'], showBorder && Avatar_module.default.bordered),
+    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,

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n  AlphaSmoothCornersBox,\n  type AlphaSmoothCornersBoxProps,\n} from '~/src/components/AlphaSmoothCornersBox'\nimport {\n  Status,\n  StatusSize,\n} from '~/src/components/Status'\nimport { useTokens } from '~/src/components/ThemeProvider'\n\nimport type { AvatarProps } from './Avatar.types'\nimport { AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: AlphaSmoothCornersBoxProps['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://cf.channel.io/thumb/200x200/pub-file/1/606d87d059a6093594c0/ch-symbol-filled-smiley-bg.png\"\n *   name=\"channel\"\n *   size={AvatarSize.Size48}\n *   showBorder\n *   disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar({\n  avatarUrl = '',\n  fallbackUrl = defaultAvatarUrl,\n  size = AvatarSize.Size24,\n  name,\n  disabled = false,\n  showBorder = false,\n  smoothCorners = true,\n  status,\n  className,\n  children,\n  ...rest\n}, forwardedRef) {\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 = size >= AvatarSize.Size90 ? StatusSize.L : StatusSize.M\n\n    const Contents = (() => {\n      if (children) { return children }\n      if (status) {\n        return (\n          <Status\n            type={status}\n            size={statusSize}\n          />\n        )\n      }\n      return null\n    })()\n\n    return Contents && (\n      <div\n        className={styles.StatusWrapper}\n        data-testid={STATUS_WRAPPER_TEST_ID}\n      >\n        { Contents }\n      </div>\n    )\n  }, [\n    status,\n    size,\n    children,\n  ])\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      <AlphaSmoothCornersBox\n        ref={forwardedRef}\n        aria-label={name}\n        className={classNames(\n          styles.AvatarImage,\n          size >= AvatarSize.Size72 && 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      </AlphaSmoothCornersBox>\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","AvatarSize","Size24","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","statusSize","Size90","StatusSize","L","M","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","AlphaSmoothCornersBox","ref","AvatarImage","Size72","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n  AlphaSmoothCornersBox,\n  type AlphaSmoothCornersBoxProps,\n} from '~/src/components/AlphaSmoothCornersBox'\nimport {\n  Status,\n  type StatusSize,\n} 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: AlphaSmoothCornersBoxProps['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://cf.channel.io/thumb/200x200/pub-file/1/606d87d059a6093594c0/ch-symbol-filled-smiley-bg.png\"\n *   name=\"channel\"\n *   size=\"48\"\n *   showBorder\n *   disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar({\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}, forwardedRef) {\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) { return children }\n      if (status) {\n        return (\n          <Status\n            type={status}\n            size={statusSize}\n          />\n        )\n      }\n      return null\n    })()\n\n    return Contents && (\n      <div\n        className={styles.StatusWrapper}\n        data-testid={STATUS_WRAPPER_TEST_ID}\n      >\n        { Contents }\n      </div>\n    )\n  }, [\n    status,\n    size,\n    children,\n  ])\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      <AlphaSmoothCornersBox\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      </AlphaSmoothCornersBox>\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","AlphaSmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"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"}

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

@@ -5,14 +5,11 @@ 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_types = require('./AvatarGroup.types.js');
 var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
 var Avatar = require('../Avatar/Avatar.js');
 var AlphaSmoothCornersBox = require('../AlphaSmoothCornersBox/AlphaSmoothCornersBox.js');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
-var Avatar_types = require('../Avatar/Avatar.types.js');
-var Icon_types = require('../Icon/Icon.types.js');
 
 const MAX_AVATAR_LIST_COUNT = 99;
 const AVATAR_GROUP_DEFAULT_SPACING = 4;
@@ -25,28 +22,28 @@ function getRestAvatarListCountText(count, max) {
 // TODO: Not specified
 function getProperIconSize(avatarSize) {
   return {
-    [Avatar_types.AvatarSize.Size20]: Icon_types.IconSize.XXS,
-    [Avatar_types.AvatarSize.Size24]: Icon_types.IconSize.XS,
-    [Avatar_types.AvatarSize.Size30]: Icon_types.IconSize.S,
-    [Avatar_types.AvatarSize.Size36]: Icon_types.IconSize.Normal,
-    [Avatar_types.AvatarSize.Size42]: Icon_types.IconSize.Normal,
-    [Avatar_types.AvatarSize.Size48]: Icon_types.IconSize.L,
-    [Avatar_types.AvatarSize.Size90]: Icon_types.IconSize.L,
-    [Avatar_types.AvatarSize.Size120]: Icon_types.IconSize.L
+    20: 'xxs',
+    24: 'xs',
+    30: 's',
+    36: 'm',
+    42: 'm',
+    48: 'l',
+    90: 'l',
+    120: 'l'
   }[avatarSize];
 }
 
 // TODO: Not specified
 function getProperTypoSize(avatarSize) {
   return {
-    [Avatar_types.AvatarSize.Size20]: '12',
-    [Avatar_types.AvatarSize.Size24]: '13',
-    [Avatar_types.AvatarSize.Size30]: '15',
-    [Avatar_types.AvatarSize.Size36]: '16',
-    [Avatar_types.AvatarSize.Size42]: '18',
-    [Avatar_types.AvatarSize.Size48]: '24',
-    [Avatar_types.AvatarSize.Size90]: '24',
-    [Avatar_types.AvatarSize.Size120]: '24'
+    20: '12',
+    24: '13',
+    30: '15',
+    36: '16',
+    42: '18',
+    48: '24',
+    90: '24',
+    120: '24'
   }[avatarSize];
 }
 
@@ -58,7 +55,7 @@ function getProperTypoSize(avatarSize) {
  * <AvatarGroup
  *  max={2}
  *  spacing={4}
- *  ellipsisType={AvatarGroupEllipsisType.Icon}
+ *  ellipsisType="icon"
  * >
  *    <Avatar />
  *    <Avatar />
@@ -68,9 +65,9 @@ function getProperTypoSize(avatarSize) {
  */
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
   max,
-  size = Avatar_types.AvatarSize.Size24,
+  size = '24',
   spacing = AVATAR_GROUP_DEFAULT_SPACING,
-  ellipsisType = AvatarGroup_types.AvatarGroupEllipsisType.Icon,
+  ellipsisType = 'icon',
   onMouseEnterEllipsis,
   onMouseLeaveEllipsis,
   style: style$1,
@@ -104,7 +101,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
       if (!array.isLastIndex(arr, index$1)) {
         return AvatarElement;
       }
-      if (ellipsisType === AvatarGroup_types.AvatarGroupEllipsisType.Icon) {
+      if (ellipsisType === 'icon') {
         return /*#__PURE__*/React.createElement("div", {
           key: "ellipsis",
           className: AvatarGroup_module.default.AvatarEllipsisIconWrapper,
@@ -121,7 +118,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
           color: "bgtxt-absolute-white-dark"
         })), AvatarElement);
       }
-      if (ellipsisType === AvatarGroup_types.AvatarGroupEllipsisType.Count) {
+      if (ellipsisType === 'count') {
         return /*#__PURE__*/React.createElement(React.Fragment, {
           key: "ellipsis"
         }, AvatarElement, /*#__PURE__*/React.createElement("div", {
@@ -143,10 +140,9 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
   return /*#__PURE__*/React.createElement("div", Object.assign({
     role: "group",
     ref: forwardedRef,
-    className: index.default(AvatarGroup_module.default.AvatarGroup, className),
+    className: index.default(AvatarGroup_module.default.AvatarGroup, AvatarGroup_module.default[`size-${size}`], className),
     style: {
       '--b-avatar-group-spacing': style.px(spacing),
-      '--b-avatar-group-size': style.px(size),
       ...style$1
     }
   }, rest), AvatarListComponent);

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n} 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 { AlphaSmoothCornersBox } from '~/src/components/AlphaSmoothCornersBox'\nimport {\n  type AvatarProps,\n  AvatarSize,\n  useAvatarRadiusToken,\n} from '~/src/components/Avatar'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  AvatarGroupEllipsisType,\n  type AvatarGroupProps,\n} 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 = '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    [AvatarSize.Size20]: IconSize.XXS,\n    [AvatarSize.Size24]: IconSize.XS,\n    [AvatarSize.Size30]: IconSize.S,\n    [AvatarSize.Size36]: IconSize.Normal,\n    [AvatarSize.Size42]: IconSize.Normal,\n    [AvatarSize.Size48]: IconSize.L,\n    [AvatarSize.Size90]: IconSize.L,\n    [AvatarSize.Size120]: IconSize.L,\n  }[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(avatarSize: AvatarSize) {\n  return {\n    [AvatarSize.Size20]: '12',\n    [AvatarSize.Size24]: '13',\n    [AvatarSize.Size30]: '15',\n    [AvatarSize.Size36]: '16',\n    [AvatarSize.Size42]: '18',\n    [AvatarSize.Size48]: '24',\n    [AvatarSize.Size90]: '24',\n    [AvatarSize.Size120]: '24',\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={AvatarGroupEllipsisType.Icon}\n * >\n *    <Avatar />\n *    <Avatar />\n *    <Avatar />\n * </AvatarGroup>\n * ```\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup({\n  max,\n  size = AvatarSize.Size24,\n  spacing = AVATAR_GROUP_DEFAULT_SPACING,\n  ellipsisType = AvatarGroupEllipsisType.Icon,\n  onMouseEnterEllipsis,\n  onMouseLeaveEllipsis,\n  style,\n  className,\n  children,\n  ...rest\n}, forwardedRef) {\n  const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n  const renderAvatarElement = useCallback((\n    avatar: React.ReactElement<AvatarProps>,\n    avatarListCount: number,\n  ) => {\n    const key = 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,\n    spacing,\n  ])\n\n  const avatarListCount = useMemo(() => (\n    React.Children.count(children)\n  ), [children])\n\n  const AvatarListComponent = useMemo(() => {\n    if (avatarListCount <= max) {\n      return React.Children.map(children, (avatar) => (\n        React.isValidElement<AvatarProps>(avatar) && renderAvatarElement(avatar, avatarListCount)\n      ))\n    }\n\n    const sliceEndIndex = max - avatarListCount\n    const slicedAvatarList = React.Children.toArray(children).slice(0, sliceEndIndex)\n\n    return slicedAvatarList.map((avatar, index, arr) => {\n      if (!React.isValidElement<AvatarProps>(avatar)) { return null }\n\n      const AvatarElement = renderAvatarElement(avatar, slicedAvatarList.length)\n\n      if (!isLastIndex(arr, index)) {\n        return AvatarElement\n      }\n\n      if (ellipsisType === AvatarGroupEllipsisType.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            <AlphaSmoothCornersBox\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            </AlphaSmoothCornersBox>\n            { AvatarElement }\n          </div>\n        )\n      }\n\n      if (ellipsisType === AvatarGroupEllipsisType.Count) {\n        return (\n          <React.Fragment key=\"ellipsis\">\n            { AvatarElement }\n            <div\n              style={{\n                '--b-avatar-group-ellipsis-ml': px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)),\n              } as React.CSSProperties}\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        className,\n      )}\n      style={{\n        '--b-avatar-group-spacing': px(spacing),\n        '--b-avatar-group-size': px(size),\n        ...style,\n      } as React.CSSProperties}\n      {...rest}\n    >\n      { AvatarListComponent }\n    </div>\n  )\n})\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","avatarSize","AvatarSize","Size20","IconSize","XXS","Size24","XS","Size30","S","Size36","Normal","Size42","Size48","L","Size90","Size120","getProperTypoSize","AvatarGroup","forwardRef","size","spacing","ellipsisType","AvatarGroupEllipsisType","Icon","onMouseEnterEllipsis","onMouseLeaveEllipsis","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAvatarRadiusToken","renderAvatarElement","useCallback","avatar","avatarListCount","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","AlphaSmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","source","MoreIcon","color","Count","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":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n} 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 { AlphaSmoothCornersBox } from '~/src/components/AlphaSmoothCornersBox'\nimport {\n  type AvatarProps,\n  type AvatarSize,\n  useAvatarRadiusToken,\n} from '~/src/components/Avatar'\nimport { Icon } from '~/src/components/Icon'\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 = '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    20: 'xxs',\n    24: 'xs',\n    30: 's',\n    36: 'm',\n    42: 'm',\n    48: 'l',\n    90: 'l',\n    120: 'l',\n  }[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(avatarSize: AvatarSize) {\n  return {\n    20: '12',\n    24: '13',\n    30: '15',\n    36: '16',\n    42: '18',\n    48: '24',\n    90: '24',\n    120: '24',\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>(function AvatarGroup({\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}, forwardedRef) {\n  const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n  const renderAvatarElement = useCallback((\n    avatar: React.ReactElement<AvatarProps>,\n    avatarListCount: number,\n  ) => {\n    const key = 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,\n    spacing,\n  ])\n\n  const avatarListCount = useMemo(() => (\n    React.Children.count(children)\n  ), [children])\n\n  const AvatarListComponent = useMemo(() => {\n    if (avatarListCount <= max) {\n      return React.Children.map(children, (avatar) => (\n        React.isValidElement<AvatarProps>(avatar) && renderAvatarElement(avatar, avatarListCount)\n      ))\n    }\n\n    const sliceEndIndex = max - avatarListCount\n    const slicedAvatarList = React.Children.toArray(children).slice(0, sliceEndIndex)\n\n    return slicedAvatarList.map((avatar, index, arr) => {\n      if (!React.isValidElement<AvatarProps>(avatar)) { return null }\n\n      const AvatarElement = renderAvatarElement(avatar, slicedAvatarList.length)\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            <AlphaSmoothCornersBox\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            </AlphaSmoothCornersBox>\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                '--b-avatar-group-ellipsis-ml': px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)),\n              } as React.CSSProperties}\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        '--b-avatar-group-spacing': px(spacing),\n        ...style,\n      } as React.CSSProperties}\n      {...rest}\n    >\n      { AvatarListComponent }\n    </div>\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","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","AlphaSmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","Object","assign","role","ref"],"mappings":";;;;;;;;;;;;;AAyBA,MAAMA,qBAAqB,GAAG,EAAE,CAAA;AAChC,MAAMC,4BAA4B,GAAG,CAAC,CAAA;AAC/B,MAAMC,kCAAkC,GAAG,oCAAmC;AAErF,SAASC,0BAA0BA,CAACC,KAAa,EAAEC,GAAW,EAAE;AAC9D,EAAA,MAAMC,SAAS,GAAGF,KAAK,GAAGC,GAAG,CAAA;EAC7B,OAAQ,CAAA,CAAA,EAAGC,SAAS,GAAGN,qBAAqB,GAAGA,qBAAqB,GAAGM,SAAU,CAAC,CAAA,CAAA;AACpF,CAAA;;AAEA;AACA,SAASC,iBAAiBA,CAACC,UAAsB,EAAE;EACjD,OAAO;AACL,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,GAAG,EAAE,GAAA;GACN,CAACA,UAAU,CAAC,CAAA;AACf,CAAA;;AAEA;AACA,SAASC,iBAAiBA,CAACD,UAAsB,EAAE;EACjD,OAAO;AACL,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,GAAG,EAAE,IAAA;GACN,CAACA,UAAU,CAAC,CAAA;AACf,CAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaE,WAAW,gBAAGC,gBAAU,CAAmC,SAASD,WAAWA,CAAC;EAC3FL,GAAG;AACHO,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,OAAO,GAAGZ,4BAA4B;AACtCa,EAAAA,YAAY,GAAG,MAAM;EACrBC,oBAAoB;EACpBC,oBAAoB;SACpBC,OAAK;EACLC,SAAS;EACTC,QAAQ;EACR,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,oBAAoB,GAAGC,2BAAoB,EAAE,CAAA;EAEnD,MAAMC,mBAAmB,GAAGC,iBAAW,CAAC,CACtCC,MAAuC,EACvCC,eAAuB,KACpB;AACH,IAAA,MAAMC,GAAG,GAAGF,MAAM,CAACE,GAAG,IAAK,GAAEF,MAAM,CAACG,KAAK,CAACC,IAAK,CAAGJ,CAAAA,EAAAA,MAAM,CAACG,KAAK,CAACE,SAAU,CAAC,CAAA,CAAA;IAC1E,MAAMC,gBAAgB,GAAGL,eAAe,GAAG,CAAC,IAAId,OAAO,GAAG,CAAC,CAAA;IAC3D,MAAMoB,UAAU,GAAGP,MAAM,CAACG,KAAK,CAACI,UAAU,IAAID,gBAAgB,CAAA;AAC9D,IAAA,oBAAOE,KAAK,CAACC,YAAY,CAACT,MAAM,EAAE;MAAEE,GAAG;MAAEhB,IAAI;AAAEqB,MAAAA,UAAAA;AAAW,KAAC,CAAC,CAAA;AAC9D,GAAC,EAAE,CACDrB,IAAI,EACJC,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,MAAMc,eAAe,GAAGS,aAAO,CAAC,MAC9BF,KAAK,CAACG,QAAQ,CAACjC,KAAK,CAACe,QAAQ,CAC9B,EAAE,CAACA,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,MAAMmB,mBAAmB,GAAGF,aAAO,CAAC,MAAM;IACxC,IAAIT,eAAe,IAAItB,GAAG,EAAE;MAC1B,OAAO6B,KAAK,CAACG,QAAQ,CAACE,GAAG,CAACpB,QAAQ,EAAGO,MAAM,iBACzCQ,KAAK,CAACM,cAAc,CAAcd,MAAM,CAAC,IAAIF,mBAAmB,CAACE,MAAM,EAAEC,eAAe,CACzF,CAAC,CAAA;AACJ,KAAA;AAEA,IAAA,MAAMc,aAAa,GAAGpC,GAAG,GAAGsB,eAAe,CAAA;AAC3C,IAAA,MAAMe,gBAAgB,GAAGR,KAAK,CAACG,QAAQ,CAACM,OAAO,CAACxB,QAAQ,CAAC,CAACyB,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,CAAA;IAEjF,OAAOC,gBAAgB,CAACH,GAAG,CAAC,CAACb,MAAM,EAAEmB,OAAK,EAAEC,GAAG,KAAK;AAClD,MAAA,IAAI,eAACZ,KAAK,CAACM,cAAc,CAAcd,MAAM,CAAC,EAAE;AAAE,QAAA,OAAO,IAAI,CAAA;AAAC,OAAA;MAE9D,MAAMqB,aAAa,GAAGvB,mBAAmB,CAACE,MAAM,EAAEgB,gBAAgB,CAACM,MAAM,CAAC,CAAA;AAE1E,MAAA,IAAI,CAACC,iBAAW,CAACH,GAAG,EAAED,OAAK,CAAC,EAAE;AAC5B,QAAA,OAAOE,aAAa,CAAA;AACtB,OAAA;MAEA,IAAIjC,YAAY,KAAK,MAAM,EAAE;QAC3B,oBACEoB,KAAA,CAAAgB,aAAA,CAAA,KAAA,EAAA;AACEtB,UAAAA,GAAG,EAAC,UAAU;UACdV,SAAS,EAAEiC,0BAAM,CAACC,yBAA0B;AAC5CC,UAAAA,YAAY,EAAEtC,oBAAqB;AACnCuC,UAAAA,YAAY,EAAEtC,oBAAqB;UACnC,aAAad,EAAAA,kCAAAA;AAAmC,SAAA,eAEhDgC,KAAA,CAAAgB,aAAA,CAACK,2CAAqB,EAAA;AACpBC,UAAAA,YAAY,EAAElC,oBAAqB;AACnCmC,UAAAA,eAAe,EAAC,+BAA+B;UAC/CvC,SAAS,EAAEiC,0BAAM,CAACO,kBAAAA;AAAmB,SAAA,eAErCxB,KAAA,CAAAgB,aAAA,CAACS,SAAI,EAAA;AACHC,UAAAA,MAAM,EAAEC,oBAAS;AACjBjD,UAAAA,IAAI,EAAEL,iBAAiB,CAACK,IAAI,CAAE;AAC9BkD,UAAAA,KAAK,EAAC,2BAAA;AAA2B,SAClC,CACoB,CAAC,EACtBf,aACC,CAAC,CAAA;AAEV,OAAA;MAEA,IAAIjC,YAAY,KAAK,OAAO,EAAE;AAC5B,QAAA,oBACEoB,KAAA,CAAAgB,aAAA,CAAChB,KAAK,CAAC6B,QAAQ,EAAA;AAACnC,UAAAA,GAAG,EAAC,UAAA;AAAU,SAAA,EAC1BmB,aAAa,eACfb,KAAA,CAAAgB,aAAA,CAAA,KAAA,EAAA;AACEjC,UAAAA,KAAK,EAAE;YACL,8BAA8B,EAAE+C,QAAE,CAACC,IAAI,CAAC5D,GAAG,CAACQ,OAAO,EAAEZ,4BAA4B,CAAC,CAAA;WAC3D;AACzBiB,UAAAA,SAAS,EAAEgD,aAAU,CACnBf,0BAAM,CAACgB,0BAA0B,EACjChB,0BAAM,CAAE,CAAA,KAAA,EAAOvC,IAAK,CAAA,CAAC,CACvB,CAAE;AACFyC,UAAAA,YAAY,EAAEtC,oBAAqB;AACnCuC,UAAAA,YAAY,EAAEtC,oBAAAA;AAAqB,SAAA,eAEnCkB,KAAA,CAAAgB,aAAA,CAACkB,SAAI,EAAA;AACHC,UAAAA,IAAI,EAAE5D,iBAAiB,CAACG,IAAI,CAAE;AAC9BkD,UAAAA,KAAK,EAAC,gBAAgB;UACtB5C,SAAS,EAAEiC,0BAAM,CAACmB,mBAAAA;SAEhBnE,EAAAA,0BAA0B,CAACwB,eAAe,EAAEtB,GAAG,CAC7C,CACH,CACS,CAAC,CAAA;AAErB,OAAA;AAEA,MAAA,OAAO,IAAI,CAAA;AACb,KAAC,CAAC,CAAA;GACH,EAAE,CACDsB,eAAe,EACftB,GAAG,EACHc,QAAQ,EACRK,mBAAmB,EACnBV,YAAY,EACZC,oBAAoB,EACpBC,oBAAoB,EACpBM,oBAAoB,EACpBV,IAAI,EACJC,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEqB,KAAA,CAAAgB,aAAA,CAAAqB,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AACZC,IAAAA,GAAG,EAAErD,YAAa;AAClBH,IAAAA,SAAS,EAAEgD,aAAU,CACnBf,0BAAM,CAACzC,WAAW,EAClByC,0BAAM,CAAE,QAAOvC,IAAK,CAAA,CAAC,CAAC,EACtBM,SACF,CAAE;AACFD,IAAAA,KAAK,EAAE;AACL,MAAA,0BAA0B,EAAE+C,QAAE,CAACnD,OAAO,CAAC;MACvC,GAAGI,OAAAA;AACL,KAAA;GACIG,EAAAA,IAAI,CAENkB,EAAAA,mBACC,CAAC,CAAA;AAEV,CAAC;;;;;"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"AvatarGroup":"b-nEfe0","AvatarEllipsisIconWrapper":"b-kIpTJ","AvatarEllipsisIcon":"b-drbDA","AvatarEllipsisCountWrapper":"b-8gUkO","size-20":"b-r6x2x","size-24":"b-tDhcr","size-30":"b-KAI9C","size-36":"b-I5CLS","size-42":"b-IVyku","size-48":"b--zJNr","size-72":"b-q8Br5","size-90":"b-B4vlm","size-120":"b-mdxiX","AvatarEllipsisCount":"b-xRhEZ"};
+var styles = {"AvatarGroup":"b-nEfe0","size-20":"b-r6x2x","size-24":"b-tDhcr","size-30":"b-KAI9C","size-36":"b-I5CLS","size-42":"b-IVyku","size-48":"b--zJNr","size-72":"b-q8Br5","size-90":"b-B4vlm","size-120":"b-mdxiX","AvatarEllipsisIconWrapper":"b-kIpTJ","AvatarEllipsisIcon":"b-drbDA","AvatarEllipsisCountWrapper":"b-8gUkO","AvatarEllipsisCount":"b-xRhEZ"};
 
 exports.default = styles;
 //# sourceMappingURL=AvatarGroup.module.scss.js.map

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

@@ -6,7 +6,6 @@ var type = require('../../utils/type.js');
 var TagBadge_module = require('../TagBadgeCommon/TagBadge.module.scss.js');
 var Badge_module = require('./Badge.module.scss.js');
 var Icon = require('../Icon/Icon.js');
-var Icon_types = require('../Icon/Icon.types.js');
 var Text = require('../Text/Text.js');
 var TagBadgeCommon = require('../TagBadgeCommon/TagBadgeCommon.js');
 
@@ -17,8 +16,8 @@ const BADGE_TEST_ID = 'bezier-badge';
  * @example
  * ```tsx
  * <Badge
- *   size={TagBadgeSize.XS}
- *   variant={TagBadgeVariant.Blue}
+ *   size="xs"
+ *   variant="blue"
  *   icon={AppleIcon}
  * >
  *   Beta
@@ -26,8 +25,8 @@ const BADGE_TEST_ID = 'bezier-badge';
  * ```
  */
 const Badge = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Badge({
-  size = TagBadgeCommon.TagBadgeSize.M,
-  variant = TagBadgeCommon.TagBadgeVariant.Default,
+  size = 'm',
+  variant = 'default',
   icon,
   children,
   className,
@@ -39,7 +38,7 @@ const Badge = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Ba
     "data-testid": BADGE_TEST_ID
   }, rest), icon && /*#__PURE__*/React.createElement(Icon.Icon, {
     source: icon,
-    size: Icon_types.IconSize.XS
+    size: "xs"
   }), !type.isEmpty(children) && /*#__PURE__*/React.createElement(Text.Text, {
     typo: TagBadgeCommon.getProperTagBadgeTypo(size),
     marginHorizontal: 3

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  memo,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport {\n  TagBadgeSize,\n  TagBadgeVariant,\n  getProperTagBadgeTypo,\n} from '~/src/components/TagBadgeCommon'\nimport commonStyles from '~/src/components/TagBadgeCommon/TagBadge.module.scss'\nimport { Text } from '~/src/components/Text'\n\nimport { type BadgeProps } from './Badge.types'\n\nimport styles from './Badge.module.scss'\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={TagBadgeSize.XS}\n *   variant={TagBadgeVariant.Blue}\n *   icon={AppleIcon}\n * >\n *   Beta\n * </Badge>\n * ```\n */\nexport const Badge = memo(forwardRef<HTMLDivElement, BadgeProps>(function Badge({\n  size = TagBadgeSize.M,\n  variant = TagBadgeVariant.Default,\n  icon,\n  children,\n  className,\n  ...rest\n}, forwardedRef) {\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames(\n        styles.Badge,\n        styles[`variant-${variant}`],\n        commonStyles.TagBadge,\n        commonStyles[`size-${size}`],\n        className,\n      )}\n      data-testid={BADGE_TEST_ID}\n      {...rest}\n    >\n      { icon && (\n        <Icon\n          source={icon}\n          size={IconSize.XS}\n        />\n      ) }\n\n      { !isEmpty(children) && (\n        <Text\n          typo={getProperTagBadgeTypo(size)}\n          marginHorizontal={3}\n        >\n          { children }\n        </Text>\n      ) }\n    </div>\n  )\n}))\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","TagBadgeSize","M","variant","TagBadgeVariant","Default","icon","children","className","rest","forwardedRef","React","createElement","Object","assign","ref","classNames","styles","commonStyles","TagBadge","Icon","source","IconSize","XS","isEmpty","Text","typo","getProperTagBadgeTypo","marginHorizontal"],"mappings":";;;;;;;;;;;;AAyBO,MAAMA,aAAa,GAAG,eAAc;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,UAAI,eAACC,gBAAU,CAA6B,SAASF,KAAKA,CAAC;EAC9EG,IAAI,GAAGC,2BAAY,CAACC,CAAC;EACrBC,OAAO,GAAGC,8BAAe,CAACC,OAAO;EACjCC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;IAClBF,SAAS,EAAEQ,aAAU,CACnBC,oBAAM,CAACpB,KAAK,EACZoB,oBAAM,CAAE,CAAUd,QAAAA,EAAAA,OAAQ,CAAC,CAAA,CAAC,EAC5Be,uBAAY,CAACC,QAAQ,EACrBD,uBAAY,CAAE,CAAOlB,KAAAA,EAAAA,IAAK,CAAC,CAAA,CAAC,EAC5BQ,SACF,CAAE;IACF,aAAaZ,EAAAA,aAAAA;GACTa,EAAAA,IAAI,GAENH,IAAI,iBACJK,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEf,IAAK;IACbN,IAAI,EAAEsB,mBAAQ,CAACC,EAAAA;AAAG,GACnB,CACF,EAEC,CAACC,YAAO,CAACjB,QAAQ,CAAC,iBAClBI,KAAA,CAAAC,aAAA,CAACa,SAAI,EAAA;AACHC,IAAAA,IAAI,EAAEC,oCAAqB,CAAC3B,IAAI,CAAE;AAClC4B,IAAAA,gBAAgB,EAAE,CAAA;GAEhBrB,EAAAA,QACE,CAEL,CAAC,CAAA;AAEV,CAAC,CAAC;;;;;"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  memo,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { getProperTagBadgeTypo } from '~/src/components/TagBadgeCommon'\nimport commonStyles from '~/src/components/TagBadgeCommon/TagBadge.module.scss'\nimport { Text } from '~/src/components/Text'\n\nimport { type BadgeProps } from './Badge.types'\n\nimport styles from './Badge.module.scss'\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(forwardRef<HTMLDivElement, BadgeProps>(function Badge({\n  size = 'm',\n  variant = 'default',\n  icon,\n  children,\n  className,\n  ...rest\n}, forwardedRef) {\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames(\n        styles.Badge,\n        styles[`variant-${variant}`],\n        commonStyles.TagBadge,\n        commonStyles[`size-${size}`],\n        className,\n      )}\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        <Text\n          typo={getProperTagBadgeTypo(size)}\n          marginHorizontal={3}\n        >\n          { children }\n        </Text>\n      ) }\n    </div>\n  )\n}))\n"],"names":["BADGE_TEST_ID","Badge","memo","forwardRef","size","variant","icon","children","className","rest","forwardedRef","React","createElement","Object","assign","ref","classNames","styles","commonStyles","TagBadge","Icon","source","isEmpty","Text","typo","getProperTagBadgeTypo","marginHorizontal"],"mappings":";;;;;;;;;;;AAkBO,MAAMA,aAAa,GAAG,eAAc;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,gBAAGC,UAAI,eAACC,gBAAU,CAA6B,SAASF,KAAKA,CAAC;AAC9EG,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,OAAO,GAAG,SAAS;EACnBC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACT,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;IAClBF,SAAS,EAAEQ,aAAU,CACnBC,oBAAM,CAAChB,KAAK,EACZgB,oBAAM,CAAE,CAAUZ,QAAAA,EAAAA,OAAQ,CAAC,CAAA,CAAC,EAC5Ba,uBAAY,CAACC,QAAQ,EACrBD,uBAAY,CAAE,CAAOd,KAAAA,EAAAA,IAAK,CAAC,CAAA,CAAC,EAC5BI,SACF,CAAE;IACF,aAAaR,EAAAA,aAAAA;GACTS,EAAAA,IAAI,GAENH,IAAI,iBACJK,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEf,IAAK;AACbF,IAAAA,IAAI,EAAC,IAAA;AAAI,GACV,CACF,EAEC,CAACkB,YAAO,CAACf,QAAQ,CAAC,iBAClBI,KAAA,CAAAC,aAAA,CAACW,SAAI,EAAA;AACHC,IAAAA,IAAI,EAAEC,oCAAqB,CAACrB,IAAI,CAAE;AAClCsB,IAAAA,gBAAgB,EAAE,CAAA;GAEhBnB,EAAAA,QACE,CAEL,CAAC,CAAA;AAEV,CAAC,CAAC;;;;;"}

package/dist/cjs/components/Banner/Banner.js

@@ -5,26 +5,23 @@ var bezierIcons = require('@channel.io/bezier-icons');
 var index = require('../../node_modules/classnames/index.js');
 var assert = require('../../utils/assert.js');
 var type = require('../../utils/type.js');
-var Banner_types = require('./Banner.types.js');
 var Banner_module = require('./Banner.module.scss.js');
 var utils = require('../LegacyIcon/utils.js');
 var Icon = require('../Icon/Icon.js');
-var Icon_types = require('../Icon/Icon.types.js');
 var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
 var Text = require('../Text/Text.js');
 var Button = require('../Button/Button.js');
-var Button_types = require('../Button/Button.types.js');
 
 const BANNER_TEST_ID = 'bezier-banner';
 function getActionButtonColorVariant(variant) {
   return {
-    [Banner_types.BannerVariant.Default]: Button_types.ButtonColorVariant.MonochromeDark,
-    [Banner_types.BannerVariant.Blue]: Button_types.ButtonColorVariant.Blue,
-    [Banner_types.BannerVariant.Cobalt]: Button_types.ButtonColorVariant.Cobalt,
-    [Banner_types.BannerVariant.Green]: Button_types.ButtonColorVariant.Green,
-    [Banner_types.BannerVariant.Orange]: Button_types.ButtonColorVariant.Orange,
-    [Banner_types.BannerVariant.Red]: Button_types.ButtonColorVariant.Red,
-    [Banner_types.BannerVariant.Alt]: Button_types.ButtonColorVariant.MonochromeDark
+    default: 'monochrome-dark',
+    blue: 'blue',
+    cobalt: 'cobalt',
+    green: 'green',
+    orange: 'orange',
+    red: 'red',
+    alt: 'monochrome-dark'
   }[variant];
 }
 const externalLinkRenderer = ({
@@ -41,7 +38,7 @@ const externalLinkRenderer = ({
  * @example
  * ```tsx
  * <Banner
- *   variant={BannerVariant.Blue}
+ *   variant="blue"
  *   icon={LightbulbIcon}
  *   content="Information here."
  * />
@@ -49,7 +46,7 @@ const externalLinkRenderer = ({
  */
 const Banner = /*#__PURE__*/React.forwardRef(function Banner({
   className,
-  variant = Banner_types.BannerVariant.Default,
+  variant = 'default',
   icon,
   iconColor,
   content,
@@ -74,12 +71,12 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner({
     className: Banner_module.default.Icon,
     source: icon,
     color: iconColor,
-    size: Icon_types.IconSize.S
+    size: "s"
   }) : /*#__PURE__*/React.createElement(LegacyIcon.LegacyIcon, {
     className: Banner_module.default.Icon,
     name: icon,
     color: iconColor,
-    size: Icon_types.IconSize.S
+    size: "s"
   })), /*#__PURE__*/React.createElement("div", {
     className: Banner_module.default.Content
   }, /*#__PURE__*/React.createElement(Text.Text, {
@@ -94,9 +91,9 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner({
   }))), !type.isNil(actionIcon) && /*#__PURE__*/React.createElement("div", {
     className: Banner_module.default.Center
   }, /*#__PURE__*/React.createElement(Button.Button, {
-    size: Button_types.ButtonSize.XS,
+    size: "xs",
     colorVariant: getActionButtonColorVariant(variant),
-    styleVariant: Button_types.ButtonStyleVariant.Tertiary,
+    styleVariant: "tertiary",
     leftContent: actionIcon,
     onClick: onClickAction
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\nimport { isNil } from '~/src/utils/type'\n\nimport {\n  Button,\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  type BannerProps,\n  BannerVariant,\n  type RenderLinkFunc,\n} from './Banner.types'\n\nimport styles from './Banner.module.scss'\n\nconst BANNER_TEST_ID = 'bezier-banner'\n\nfunction getActionButtonColorVariant(variant: BannerVariant) {\n  return ({\n    [BannerVariant.Default]: ButtonColorVariant.MonochromeDark,\n    [BannerVariant.Blue]: ButtonColorVariant.Blue,\n    [BannerVariant.Cobalt]: ButtonColorVariant.Cobalt,\n    [BannerVariant.Green]: ButtonColorVariant.Green,\n    [BannerVariant.Orange]: ButtonColorVariant.Orange,\n    [BannerVariant.Red]: ButtonColorVariant.Red,\n    [BannerVariant.Alt]: ButtonColorVariant.MonochromeDark,\n  } as const)[variant]\n}\n\nconst externalLinkRenderer: RenderLinkFunc = ({\n  content,\n  linkTo,\n}) => (\n  <a\n    href={linkTo}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n  >\n    { content }\n  </a>\n)\n\n/**\n * `Banner` is a component you use when you want to communicate instructions, warnings, recommendations, and other information well.\n * @example\n * ```tsx\n * <Banner\n *   variant={BannerVariant.Blue}\n *   icon={LightbulbIcon}\n *   content=\"Information here.\"\n * />\n * ```\n */\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner({\n  className,\n  variant = BannerVariant.Default,\n  icon,\n  iconColor,\n  content,\n  hasLink = false,\n  linkText,\n  linkTo,\n  renderLink = externalLinkRenderer,\n  actionIcon,\n  onClickAction,\n  ...rest\n}, forwardedRef) {\n  if (isIconName(icon)) {\n    warn('Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.')\n  }\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames(\n        styles.Banner,\n        styles[`variant-${variant}`],\n        className,\n      )}\n      data-testid={BANNER_TEST_ID}\n      {...rest}\n    >\n      { !isNil(icon) && (\n        <div className={styles.Center}>\n          { isBezierIcon(icon) ? (\n            <Icon\n              className={styles.Icon}\n              source={icon}\n              color={iconColor}\n              size={IconSize.S}\n            />\n          ) : (\n            <LegacyIcon\n              className={styles.Icon}\n              name={icon}\n              color={iconColor}\n              size={IconSize.S}\n            />\n          ) }\n        </div>\n      ) }\n\n      <div className={styles.Content}>\n        <Text typo=\"14\">\n          { content }\n\n          { hasLink && (\n            renderLink({\n              content: (\n                <Text\n                  className={styles.Link}\n                  typo=\"14\"\n                  bold\n                >\n                  { linkText }\n                </Text>\n              ),\n              linkTo,\n            })\n          ) }\n        </Text>\n      </div>\n\n      { !isNil(actionIcon) && (\n        <div className={styles.Center}>\n          <Button\n            size={ButtonSize.XS}\n            colorVariant={getActionButtonColorVariant(variant)}\n            styleVariant={ButtonStyleVariant.Tertiary}\n            leftContent={actionIcon}\n            onClick={onClickAction}\n          />\n        </div>\n      ) }\n    </div>\n  )\n})\n"],"names":["BANNER_TEST_ID","getActionButtonColorVariant","variant","BannerVariant","Default","ButtonColorVariant","MonochromeDark","Blue","Cobalt","Green","Orange","Red","Alt","externalLinkRenderer","content","linkTo","React","createElement","href","target","rel","Banner","forwardRef","className","icon","iconColor","hasLink","linkText","renderLink","actionIcon","onClickAction","rest","forwardedRef","isIconName","warn","Object","assign","ref","classNames","styles","isNil","Center","isBezierIcon","Icon","source","color","size","IconSize","S","LegacyIcon","name","Content","Text","typo","Link","bold","Button","ButtonSize","XS","colorVariant","styleVariant","ButtonStyleVariant","Tertiary","leftContent","onClick"],"mappings":"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"}
+{"version":3,"file":"Banner.js","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\nimport { isNil } from '~/src/utils/type'\n\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  type BannerProps,\n  type BannerVariant,\n  type RenderLinkFunc,\n} from './Banner.types'\n\nimport styles from './Banner.module.scss'\n\nconst BANNER_TEST_ID = 'bezier-banner'\n\nfunction getActionButtonColorVariant(variant: BannerVariant) {\n  return ({\n    default: 'monochrome-dark',\n    blue: 'blue',\n    cobalt: 'cobalt',\n    green: 'green',\n    orange: 'orange',\n    red: 'red',\n    alt: 'monochrome-dark',\n  } as const)[variant]\n}\n\nconst externalLinkRenderer: RenderLinkFunc = ({\n  content,\n  linkTo,\n}) => (\n  <a\n    href={linkTo}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n  >\n    { content }\n  </a>\n)\n\n/**\n * `Banner` is a component you use when you want to communicate instructions, warnings, recommendations, and other information well.\n * @example\n * ```tsx\n * <Banner\n *   variant=\"blue\"\n *   icon={LightbulbIcon}\n *   content=\"Information here.\"\n * />\n * ```\n */\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner({\n  className,\n  variant = 'default',\n  icon,\n  iconColor,\n  content,\n  hasLink = false,\n  linkText,\n  linkTo,\n  renderLink = externalLinkRenderer,\n  actionIcon,\n  onClickAction,\n  ...rest\n}, forwardedRef) {\n  if (isIconName(icon)) {\n    warn('Deprecation: IconName as a value for the icon property of Banner has been deprecated. Use the Icon of bezier-icons instead.')\n  }\n\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames(\n        styles.Banner,\n        styles[`variant-${variant}`],\n        className,\n      )}\n      data-testid={BANNER_TEST_ID}\n      {...rest}\n    >\n      { !isNil(icon) && (\n        <div className={styles.Center}>\n          { isBezierIcon(icon) ? (\n            <Icon\n              className={styles.Icon}\n              source={icon}\n              color={iconColor}\n              size=\"s\"\n            />\n          ) : (\n            <LegacyIcon\n              className={styles.Icon}\n              name={icon}\n              color={iconColor}\n              size=\"s\"\n            />\n          ) }\n        </div>\n      ) }\n\n      <div className={styles.Content}>\n        <Text typo=\"14\">\n          { content }\n\n          { hasLink && (\n            renderLink({\n              content: (\n                <Text\n                  className={styles.Link}\n                  typo=\"14\"\n                  bold\n                >\n                  { linkText }\n                </Text>\n              ),\n              linkTo,\n            })\n          ) }\n        </Text>\n      </div>\n\n      { !isNil(actionIcon) && (\n        <div className={styles.Center}>\n          <Button\n            size=\"xs\"\n            colorVariant={getActionButtonColorVariant(variant)}\n            styleVariant=\"tertiary\"\n            leftContent={actionIcon}\n            onClick={onClickAction}\n          />\n        </div>\n      ) }\n    </div>\n  )\n})\n"],"names":["BANNER_TEST_ID","getActionButtonColorVariant","variant","default","blue","cobalt","green","orange","red","alt","externalLinkRenderer","content","linkTo","React","createElement","href","target","rel","Banner","forwardRef","className","icon","iconColor","hasLink","linkText","renderLink","actionIcon","onClickAction","rest","forwardedRef","isIconName","warn","Object","assign","ref","classNames","styles","isNil","Center","isBezierIcon","Icon","source","color","size","LegacyIcon","name","Content","Text","typo","Link","bold","Button","colorVariant","styleVariant","leftContent","onClick"],"mappings":"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"}

package/dist/cjs/components/Button/Button.js

@@ -4,43 +4,40 @@ var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
 var index = require('../../node_modules/classnames/index.js');
 var assert = require('../../utils/assert.js');
-var Button_types = require('./Button.types.js');
 var Button_module = require('./Button.module.scss.js');
 var Text = require('../Text/Text.js');
 var Spinner = require('../Spinner/Spinner.js');
 var BaseButton = require('../BaseButton/BaseButton.js');
-var Spinner_types = require('../Spinner/Spinner.types.js');
 var utils = require('../LegacyIcon/utils.js');
 var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
 var Icon = require('../Icon/Icon.js');
-var Icon_types = require('../Icon/Icon.types.js');
 
 const BUTTON_TEST_ID = 'bezier-button';
 function getTypography(size) {
   return {
-    [Button_types.ButtonSize.XS]: '13',
-    [Button_types.ButtonSize.S]: '13',
-    [Button_types.ButtonSize.M]: '14',
-    [Button_types.ButtonSize.L]: '15',
-    [Button_types.ButtonSize.XL]: '18'
+    xs: '13',
+    s: '13',
+    m: '14',
+    l: '15',
+    xl: '18'
   }[size];
 }
 function getIconSize(size) {
   return {
-    [Button_types.ButtonSize.XS]: Icon_types.IconSize.XS,
-    [Button_types.ButtonSize.S]: Icon_types.IconSize.XS,
-    [Button_types.ButtonSize.M]: Icon_types.IconSize.S,
-    [Button_types.ButtonSize.L]: Icon_types.IconSize.S,
-    [Button_types.ButtonSize.XL]: Icon_types.IconSize.Normal
+    xs: 'xs',
+    s: 'xs',
+    m: 's',
+    l: 's',
+    xl: 'm'
   }[size];
 }
 function getSpinnerSize(size) {
   return {
-    [Button_types.ButtonSize.XS]: Spinner_types.SpinnerSize.XS,
-    [Button_types.ButtonSize.S]: Spinner_types.SpinnerSize.XS,
-    [Button_types.ButtonSize.M]: Spinner_types.SpinnerSize.S,
-    [Button_types.ButtonSize.L]: Spinner_types.SpinnerSize.S,
-    [Button_types.ButtonSize.XL]: Spinner_types.SpinnerSize.S
+    xs: 'xs',
+    s: 'xs',
+    m: 's',
+    l: 's',
+    xl: 's'
   }[size];
 }
 function ButtonSideContent({
@@ -72,9 +69,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
   disabled = false,
   loading = false,
   active = false,
-  size = Button_types.ButtonSize.M,
-  styleVariant = Button_types.ButtonStyleVariant.Primary,
-  colorVariant = Button_types.ButtonColorVariant.Blue,
+  size = 'm',
+  styleVariant = 'primary',
+  colorVariant = 'blue',
   leftContent,
   rightContent,
   onClick,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport {\n  Spinner,\n  SpinnerSize,\n} from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport type {\n  ButtonProps,\n  SideContent,\n} from './Button.types'\nimport {\n  ButtonColorVariant,\n  ButtonSize,\n  ButtonStyleVariant,\n} from './Button.types'\n\nimport styles from './Button.module.scss'\n\nexport const BUTTON_TEST_ID = 'bezier-button'\n\nfunction getTypography(size: ButtonSize) {\n  return ({\n    [ButtonSize.XS]: '13',\n    [ButtonSize.S]: '13',\n    [ButtonSize.M]: '14',\n    [ButtonSize.L]: '15',\n    [ButtonSize.XL]: '18',\n  } as const)[size]\n}\n\nfunction getIconSize(size: ButtonSize) {\n  return ({\n    [ButtonSize.XS]: IconSize.XS,\n    [ButtonSize.S]: IconSize.XS,\n    [ButtonSize.M]: IconSize.S,\n    [ButtonSize.L]: IconSize.S,\n    [ButtonSize.XL]: IconSize.Normal,\n  } as const)[size]\n}\n\nfunction getSpinnerSize(size: ButtonSize) {\n  return ({\n    [ButtonSize.XS]: SpinnerSize.XS,\n    [ButtonSize.S]: SpinnerSize.XS,\n    [ButtonSize.M]: SpinnerSize.S,\n    [ButtonSize.L]: SpinnerSize.S,\n    [ButtonSize.XL]: SpinnerSize.S,\n  } as const)[size]\n}\n\nfunction ButtonSideContent({\n  size,\n  children,\n}: {\n  size: ButtonSize\n  children: SideContent\n}) {\n  if (isIconName(children)) {\n    warn('Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.')\n    return (\n      <LegacyIcon\n        className={styles.ButtonIcon}\n        name={children}\n        size={getIconSize(size)}\n      />\n    )\n  }\n\n  if (isBezierIcon(children)) {\n    return (\n      <Icon\n        className={styles.ButtonIcon}\n        source={children}\n        size={getIconSize(size)}\n      />\n    )\n  }\n\n  return <>{ children }</>\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({\n  as = BaseButton,\n  className,\n  type = 'button',\n  text,\n  disabled = false,\n  loading = false,\n  active = false,\n  size = ButtonSize.M,\n  styleVariant = ButtonStyleVariant.Primary,\n  colorVariant = ButtonColorVariant.Blue,\n  leftContent,\n  rightContent,\n  onClick,\n  ...rest\n}, forwardedRef) {\n  const Comp = as as typeof BaseButton\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>((event) => {\n    if (!disabled) {\n      onClick?.(event)\n    }\n  }, [\n    onClick,\n    disabled,\n  ])\n\n  return (\n    <Comp\n      // eslint-disable-next-line react/button-has-type\n      type={type}\n      ref={forwardedRef}\n      className={classNames(\n        styles.Button,\n        styles[`size-${size}`],\n        styles[`style-${styleVariant}`],\n        styles[`color-${colorVariant}`],\n        active && styles.active,\n        className,\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      data-testid={BUTTON_TEST_ID}\n      data-bezier-component=\"Button\"\n      {...rest}\n    >\n      <div\n        className={classNames(\n          styles.ButtonContent,\n          loading && styles.loading,\n        )}\n      >\n        <ButtonSideContent size={size}>\n          { leftContent }\n        </ButtonSideContent>\n\n        { text && (\n          <Text\n            className={styles.ButtonText}\n            typo={getTypography(size)}\n            bold\n          >\n            { text }\n          </Text>\n        ) }\n\n        <ButtonSideContent size={size}>\n          { rightContent }\n        </ButtonSideContent>\n      </div>\n\n      { loading && (\n        <div className={styles.ButtonLoader}>\n          <Spinner size={getSpinnerSize(size)} />\n        </div>\n      ) }\n    </Comp>\n  )\n})\n"],"names":["BUTTON_TEST_ID","getTypography","size","ButtonSize","XS","S","M","L","XL","getIconSize","IconSize","Normal","getSpinnerSize","SpinnerSize","ButtonSideContent","children","isIconName","warn","React","createElement","LegacyIcon","className","styles","ButtonIcon","name","isBezierIcon","Icon","source","Fragment","Button","forwardRef","as","BaseButton","type","text","disabled","loading","active","styleVariant","ButtonStyleVariant","Primary","colorVariant","ButtonColorVariant","Blue","leftContent","rightContent","onClick","rest","forwardedRef","Comp","handleClick","useCallback","event","Object","assign","ref","classNames","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { warn } from '~/src/utils/assert'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport {\n  LegacyIcon,\n  isIconName,\n} from '~/src/components/LegacyIcon'\nimport { Spinner } from '~/src/components/Spinner'\nimport { Text } from '~/src/components/Text'\n\nimport type {\n  ButtonProps,\n  ButtonSize,\n  SideContent,\n} from './Button.types'\n\nimport styles from './Button.module.scss'\n\nexport const BUTTON_TEST_ID = 'bezier-button'\n\nfunction getTypography(size: ButtonSize) {\n  return ({\n    xs: '13',\n    s: '13',\n    m: '14',\n    l: '15',\n    xl: '18',\n  } as const)[size]\n}\n\nfunction getIconSize(size: ButtonSize) {\n  return ({\n    xs: 'xs',\n    s: 'xs',\n    m: 's',\n    l: 's',\n    xl: 'm',\n  } as const)[size]\n}\n\nfunction getSpinnerSize(size: ButtonSize) {\n  return ({\n    xs: 'xs',\n    s: 'xs',\n    m: 's',\n    l: 's',\n    xl: 's',\n  } as const)[size]\n}\n\nfunction ButtonSideContent({\n  size,\n  children,\n}: {\n  size: ButtonSize\n  children: SideContent\n}) {\n  if (isIconName(children)) {\n    warn('Deprecation: IconName as a value for the leftContent property of a Button has been deprecated. Use the Icon of bezier-icons instead.')\n    return (\n      <LegacyIcon\n        className={styles.ButtonIcon}\n        name={children}\n        size={getIconSize(size)}\n      />\n    )\n  }\n\n  if (isBezierIcon(children)) {\n    return (\n      <Icon\n        className={styles.ButtonIcon}\n        source={children}\n        size={getIconSize(size)}\n      />\n    )\n  }\n\n  return <>{ children }</>\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({\n  as = BaseButton,\n  className,\n  type = 'button',\n  text,\n  disabled = false,\n  loading = false,\n  active = false,\n  size = 'm',\n  styleVariant = 'primary',\n  colorVariant = 'blue',\n  leftContent,\n  rightContent,\n  onClick,\n  ...rest\n}, forwardedRef) {\n  const Comp = as as typeof BaseButton\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>((event) => {\n    if (!disabled) {\n      onClick?.(event)\n    }\n  }, [\n    onClick,\n    disabled,\n  ])\n\n  return (\n    <Comp\n      // eslint-disable-next-line react/button-has-type\n      type={type}\n      ref={forwardedRef}\n      className={classNames(\n        styles.Button,\n        styles[`size-${size}`],\n        styles[`style-${styleVariant}`],\n        styles[`color-${colorVariant}`],\n        active && styles.active,\n        className,\n      )}\n      disabled={disabled}\n      onClick={handleClick}\n      data-testid={BUTTON_TEST_ID}\n      data-bezier-component=\"Button\"\n      {...rest}\n    >\n      <div\n        className={classNames(\n          styles.ButtonContent,\n          loading && styles.loading,\n        )}\n      >\n        <ButtonSideContent size={size}>\n          { leftContent }\n        </ButtonSideContent>\n\n        { text && (\n          <Text\n            className={styles.ButtonText}\n            typo={getTypography(size)}\n            bold\n          >\n            { text }\n          </Text>\n        ) }\n\n        <ButtonSideContent size={size}>\n          { rightContent }\n        </ButtonSideContent>\n      </div>\n\n      { loading && (\n        <div className={styles.ButtonLoader}>\n          <Spinner size={getSpinnerSize(size)} />\n        </div>\n      ) }\n    </Comp>\n  )\n})\n"],"names":["BUTTON_TEST_ID","getTypography","size","xs","s","m","l","xl","getIconSize","getSpinnerSize","ButtonSideContent","children","isIconName","warn","React","createElement","LegacyIcon","className","styles","ButtonIcon","name","isBezierIcon","Icon","source","Fragment","Button","forwardRef","as","BaseButton","type","text","disabled","loading","active","styleVariant","colorVariant","leftContent","rightContent","onClick","rest","forwardedRef","Comp","handleClick","useCallback","event","Object","assign","ref","classNames","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","Spinner"],"mappings":"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"}

package/dist/cjs/components/CheckableAvatar/CheckableAvatar.js

@@ -10,7 +10,6 @@ var BaseButton = require('../BaseButton/BaseButton.js');
 var Icon = require('../Icon/Icon.js');
 var Avatar = require('../Avatar/Avatar.js');
 var VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-var Avatar_types = require('../Avatar/Avatar.types.js');
 
 /**
  * `CheckableAvatar` is a checkbox component that looks like `Avatar`.
@@ -38,7 +37,7 @@ const CheckableAvatar = /*#__PURE__*/React.forwardRef(function CheckableAvatar({
   className,
   id: idProp,
   name,
-  size = Avatar_types.AvatarSize.Size24,
+  size = '24',
   disabled,
   avatarUrl,
   fallbackUrl,