@channel.io/bezier-react 3.5.2-beta.0 → 3.5.2-beta.1

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../_virtual/index.js');
+var classNames = require('classnames');
 var type = require('../../utils/type.js');
 var AvatarSizeContext = require('./AvatarSizeContext.js');
 var defaultAvatar = require('./assets/default-avatar.svg.js');
@@ -34,7 +34,7 @@ function getShadow(size) {
   })();
   return {
     spreadRadius,
-    color: 'bg-white-high'
+    color: 'surface-higher'
   };
 }
 function useAvatarRadiusToken() {
@@ -100,18 +100,18 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
     });
   }, [status, size, children]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: index.default(Avatar_module.default.Avatar, Avatar_module.default[`size-${size}`], disabled && Avatar_module.default.disabled, className),
+    className: classNames(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,
     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),
+      className: classNames(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 ? getShadow(size) : undefined,
-      backgroundColor: "bg-white-normal",
+      backgroundColor: "surface",
       backgroundImage: loadedAvatarUrl,
       "data-testid": AVATAR_TEST_ID,
       children: StatusComponent

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/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 { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'\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, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n  switch (size) {\n    case '90':\n    case '120':\n      return 'l'\n    default:\n      return 'm'\n  }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n  const spreadRadius = (() => {\n    switch (size) {\n      case '90':\n        return 3\n      case '120':\n        return 4\n      default:\n        return 2\n    }\n  })()\n\n  return {\n    spreadRadius,\n    color: 'bg-white-high',\n  }\n}\n\nexport function useAvatarRadiusToken() {\n  // TODO: Replace this with useAlphaTokens\n  return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nconst AVATAR_TEST_ID = 'bezier-avatar'\nconst 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: sizeProps = '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 avatarGroupContext = useAvatarContext()\n  const size = avatarGroupContext?.size ?? sizeProps\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 Contents = (() => {\n      if (children) {\n        return children\n      }\n      if (status) {\n        return (\n          <Status\n            type={status}\n            size={getStatusSize(size)}\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 ? getShadow(size) : 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":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","_avatarGroupContext$s","avatarGroupContext","useAvatarContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","isValidElement","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/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 { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'\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, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n  switch (size) {\n    case '90':\n    case '120':\n      return 'l'\n    default:\n      return 'm'\n  }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n  const spreadRadius = (() => {\n    switch (size) {\n      case '90':\n        return 3\n      case '120':\n        return 4\n      default:\n        return 2\n    }\n  })()\n\n  return {\n    spreadRadius,\n    color: 'surface-higher',\n  }\n}\n\nexport function useAvatarRadiusToken() {\n  // TODO: Replace this with useAlphaTokens\n  return useTokens().global.radius['radius-42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nconst AVATAR_TEST_ID = 'bezier-avatar'\nconst 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: sizeProps = '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 avatarGroupContext = useAvatarContext()\n  const size = avatarGroupContext?.size ?? sizeProps\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 Contents = (() => {\n      if (children) {\n        return children\n      }\n      if (status) {\n        return (\n          <Status\n            type={status}\n            size={getStatusSize(size)}\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 ? getShadow(size) : undefined}\n        backgroundColor=\"surface\"\n        backgroundImage={loadedAvatarUrl}\n        data-testid={AVATAR_TEST_ID}\n      >\n        {StatusComponent}\n      </SmoothCornersBox>\n    </div>\n  )\n})\n"],"names":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","useTokens","global","radius","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","_avatarGroupContext$s","avatarGroupContext","useAvatarContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","isValidElement","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}

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

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../_virtual/index.js');
+var classNames = require('classnames');
 var array = require('../../utils/array.js');
 var style = require('../../utils/style.js');
 var AvatarSizeContext = require('../AlphaAvatar/AvatarSizeContext.js');
@@ -112,12 +112,12 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
     });
   }, [avatarListCount, max, spacing]);
   const AvatarListComponent = React.useMemo(() => {
-    return React__namespace.Children.toArray(children).slice(0, max).map((avatar, index$1, arr) => {
+    return React__namespace.Children.toArray(children).slice(0, max).map((avatar, index, arr) => {
       if (! /*#__PURE__*/React__namespace.isValidElement(avatar)) {
         return null;
       }
       const AvatarElement = renderAvatarElement(avatar);
-      if (!array.isLastIndex(arr, index$1) || avatarListCount <= max) {
+      if (!array.isLastIndex(arr, index) || avatarListCount <= max) {
         return AvatarElement;
       }
       if (ellipsisType === 'icon') {
@@ -126,12 +126,12 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
           "data-testid": AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID,
           children: [/*#__PURE__*/jsxRuntime.jsx(SmoothCornersBox.SmoothCornersBox, {
             borderRadius: AVATAR_BORDER_RADIUS,
-            backgroundColor: "bgtxt-absolute-black-lightest",
+            backgroundColor: "fill-absolute-black-light",
             className: AvatarGroup_module.default.AvatarEllipsisIcon,
             children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
               source: bezierIcons.MoreIcon,
               size: getProperIconSize(size),
-              color: "bgtxt-absolute-white-dark"
+              color: "text-absolute-white"
             })
           }), AvatarElement]
         }, "ellipsis");
@@ -142,10 +142,10 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
             style: {
               '--b-avatar-group-ellipsis-ml': style.px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING))
             },
-            className: index.default(AvatarGroup_module.default.AvatarEllipsisCountWrapper),
+            className: classNames(AvatarGroup_module.default.AvatarEllipsisCountWrapper),
             children: /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
               typo: getProperTypoSize(size),
-              color: "txt-black-dark",
+              color: "text-neutral-lighter",
               className: AvatarGroup_module.default.AvatarEllipsisCount,
               children: getRestAvatarListCountText(avatarListCount, max)
             })
@@ -162,7 +162,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       role: "group",
       ref: forwardedRef,
-      className: index.default(AvatarGroup_module.default.AvatarGroup, AvatarGroup_module.default[`size-${size}`], className),
+      className: classNames(AvatarGroup_module.default.AvatarGroup, AvatarGroup_module.default[`size-${size}`], className),
       style: {
         '--b-avatar-group-spacing': style.px(spacing),
         ...style$1

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/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 AlphaAvatarProps,\n  type AlphaAvatarSize,\n  useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { AvatarContextProvider } from '~/src/components/AlphaAvatar/AvatarSizeContext'\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(size: AlphaAvatarSize) {\n  return (\n    {\n      16: 'xxs',\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  )[size]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(size: AlphaAvatarSize) {\n  return (\n    {\n      16: '12',\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  )[size]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n *  max={2}\n *  size=\"24\"\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 = 5,\n      size = '24',\n      spacing = AVATAR_GROUP_DEFAULT_SPACING,\n      ellipsisType = 'icon',\n      style,\n      className,\n      children,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()\n    const avatarListCount = React.Children.count(children)\n\n    const renderAvatarElement = useCallback(\n      (avatar: React.ReactElement<AlphaAvatarProps>) => {\n        const key =\n          avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n        const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0\n        const showBorder = avatar.props.showBorder || shouldShowBorder\n        return React.cloneElement(avatar, { key, showBorder })\n      },\n      [avatarListCount, max, spacing]\n    )\n\n    const AvatarListComponent = useMemo(() => {\n      return React.Children.toArray(children)\n        .slice(0, max)\n        .map((avatar, index, arr) => {\n          if (!React.isValidElement<AlphaAvatarProps>(avatar)) {\n            return null\n          }\n\n          const AvatarElement = renderAvatarElement(avatar)\n\n          if (!isLastIndex(arr, index) || avatarListCount <= max) {\n            return AvatarElement\n          }\n\n          if (ellipsisType === 'icon') {\n            return (\n              <div\n                key=\"ellipsis\"\n                className={styles.AvatarEllipsisIconWrapper}\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(styles.AvatarEllipsisCountWrapper)}\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      AVATAR_BORDER_RADIUS,\n      size,\n      spacing,\n    ])\n\n    return (\n      <AvatarContextProvider\n        value={useMemo(\n          () => ({\n            size,\n          }),\n          [size]\n        )}\n      >\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      </AvatarContextProvider>\n    )\n  }\n)\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","size","getProperTypoSize","AvatarGroup","forwardRef","spacing","ellipsisType","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAlphaAvatarRadiusToken","avatarListCount","React","Children","renderAvatarElement","useCallback","avatar","_avatar$key","key","props","name","avatarUrl","shouldShowBorder","showBorder","cloneElement","AvatarListComponent","useMemo","toArray","slice","map","index","arr","isValidElement","AvatarElement","isLastIndex","_jsxs","styles","AvatarEllipsisIconWrapper","_jsx","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","AvatarContextProvider","value","role","ref"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/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 AlphaAvatarProps,\n  type AlphaAvatarSize,\n  useAlphaAvatarRadiusToken,\n} from '~/src/components/AlphaAvatar'\nimport { AvatarContextProvider } from '~/src/components/AlphaAvatar/AvatarSizeContext'\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(size: AlphaAvatarSize) {\n  return (\n    {\n      16: 'xxs',\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  )[size]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(size: AlphaAvatarSize) {\n  return (\n    {\n      16: '12',\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  )[size]\n}\n\n/**\n * `AvatarGroup` is a component for grouping `Avatar` components\n * @example\n *\n * ```tsx\n * <AvatarGroup\n *  max={2}\n *  size=\"24\"\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 = 5,\n      size = '24',\n      spacing = AVATAR_GROUP_DEFAULT_SPACING,\n      ellipsisType = 'icon',\n      style,\n      className,\n      children,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const AVATAR_BORDER_RADIUS = useAlphaAvatarRadiusToken()\n    const avatarListCount = React.Children.count(children)\n\n    const renderAvatarElement = useCallback(\n      (avatar: React.ReactElement<AlphaAvatarProps>) => {\n        const key =\n          avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n        const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0\n        const showBorder = avatar.props.showBorder || shouldShowBorder\n        return React.cloneElement(avatar, { key, showBorder })\n      },\n      [avatarListCount, max, spacing]\n    )\n\n    const AvatarListComponent = useMemo(() => {\n      return React.Children.toArray(children)\n        .slice(0, max)\n        .map((avatar, index, arr) => {\n          if (!React.isValidElement<AlphaAvatarProps>(avatar)) {\n            return null\n          }\n\n          const AvatarElement = renderAvatarElement(avatar)\n\n          if (!isLastIndex(arr, index) || avatarListCount <= max) {\n            return AvatarElement\n          }\n\n          if (ellipsisType === 'icon') {\n            return (\n              <div\n                key=\"ellipsis\"\n                className={styles.AvatarEllipsisIconWrapper}\n                data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n              >\n                <SmoothCornersBox\n                  borderRadius={AVATAR_BORDER_RADIUS}\n                  backgroundColor=\"fill-absolute-black-light\"\n                  className={styles.AvatarEllipsisIcon}\n                >\n                  <Icon\n                    source={MoreIcon}\n                    size={getProperIconSize(size)}\n                    color=\"text-absolute-white\"\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(styles.AvatarEllipsisCountWrapper)}\n                >\n                  <Text\n                    typo={getProperTypoSize(size)}\n                    color=\"text-neutral-lighter\"\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      AVATAR_BORDER_RADIUS,\n      size,\n      spacing,\n    ])\n\n    return (\n      <AvatarContextProvider\n        value={useMemo(\n          () => ({\n            size,\n          }),\n          [size]\n        )}\n      >\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      </AvatarContextProvider>\n    )\n  }\n)\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_DEFAULT_SPACING","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","size","getProperTypoSize","AvatarGroup","forwardRef","spacing","ellipsisType","style","className","children","rest","forwardedRef","AVATAR_BORDER_RADIUS","useAlphaAvatarRadiusToken","avatarListCount","React","Children","renderAvatarElement","useCallback","avatar","_avatar$key","key","props","name","avatarUrl","shouldShowBorder","showBorder","cloneElement","AvatarListComponent","useMemo","toArray","slice","map","index","arr","isValidElement","AvatarElement","isLastIndex","_jsxs","styles","AvatarEllipsisIconWrapper","_jsx","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","AvatarContextProvider","value","role","ref"],"mappings":"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"}

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

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../_virtual/index.js');
+var classNames = require('classnames');
 var Button_module = require('./Button.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Text = require('../Text/Text.js');
@@ -56,11 +56,11 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
   const disabled = loading || disabledProp;
   return /*#__PURE__*/jsxRuntime.jsxs(Comp, {
     ref: forwardedRef,
-    className: index.default(Button_module.default.Button, Button_module.default[`size-${size}`], Button_module.default[`variant-${variant}`], Button_module.default[`color-${color}`], active && Button_module.default.active, className),
+    className: classNames(Button_module.default.Button, Button_module.default[`size-${size}`], Button_module.default[`variant-${variant}`], Button_module.default[`color-${color}`], active && Button_module.default.active, className),
     disabled: disabled,
     ...rest,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: index.default(Button_module.default.ButtonContent, loading && Button_module.default.loading),
+      className: classNames(Button_module.default.ButtonContent, loading && Button_module.default.loading),
       children: [/*#__PURE__*/jsxRuntime.jsx(SideContent, {
         size: getIconSize(size),
         content: prefixContent
@@ -74,7 +74,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
         content: suffixContent
       })]
     }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: index.default(Button_module.default.ButtonLoader,
+      className: classNames(Button_module.default.ButtonLoader,
       // NOTE: Loader size is the same as icon size
       Button_module.default[`size-${getIconSize(size)}`]),
       children: /*#__PURE__*/jsxRuntime.jsx(Loader.Loader, {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n  type ButtonProps,\n  type ButtonSize,\n} from '~/src/components/AlphaButton/Button.types'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Button.module.scss'\n\nfunction SideContent({\n  size,\n  content,\n}: {\n  size: IconSize\n  content?: ButtonProps['prefixContent']\n}) {\n  return isBezierIcon(content) ? (\n    <Icon\n      source={content}\n      size={size}\n      className={styles.ButtonIcon}\n    />\n  ) : (\n    content\n  )\n}\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nfunction getTypography(size: ButtonSize) {\n  return (\n    {\n      xs: '13',\n      s: '13',\n      m: '14',\n      l: '15',\n      xl: '18',\n    } as const\n  )[size]\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      as = BaseButton,\n      text,\n      prefixContent,\n      suffixContent,\n      color = 'blue',\n      variant = 'primary',\n      size = 'm',\n      active,\n      className,\n      loading,\n      disabled: disabledProp,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as as typeof BaseButton\n\n    const disabled = loading || disabledProp\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={classNames(\n          styles.Button,\n          styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          styles[`color-${color}`],\n          active && styles.active,\n          className\n        )}\n        disabled={disabled}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.ButtonContent,\n            loading && styles.loading\n          )}\n        >\n          <SideContent\n            size={getIconSize(size)}\n            content={prefixContent}\n          />\n\n          {/* TODO: use AlphaText later, add typo */}\n          <Text\n            className={styles.ButtonText}\n            typo={getTypography(size)}\n            bold\n          >\n            {text}\n          </Text>\n\n          <SideContent\n            size={getIconSize(size)}\n            content={suffixContent}\n          />\n        </div>\n\n        {loading && (\n          <div\n            className={classNames(\n              styles.ButtonLoader,\n              // NOTE: Loader size is the same as icon size\n              styles[`size-${getIconSize(size)}`]\n            )}\n          >\n            <AlphaLoader\n              size=\"s\"\n              className={styles.Loader}\n              variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n            />\n          </div>\n        )}\n      </Comp>\n    )\n  }\n)\n"],"names":["SideContent","size","content","isBezierIcon","_jsx","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getTypography","Button","forwardRef","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","disabled","disabledProp","rest","forwardedRef","Comp","_jsxs","ref","classNames","children","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","AlphaLoader","Loader"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/AlphaButton/Button.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n  type ButtonProps,\n  type ButtonSize,\n} from '~/src/components/AlphaButton/Button.types'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Button.module.scss'\n\nfunction SideContent({\n  size,\n  content,\n}: {\n  size: IconSize\n  content?: ButtonProps['prefixContent']\n}) {\n  return isBezierIcon(content) ? (\n    <Icon\n      source={content}\n      size={size}\n      className={styles.ButtonIcon}\n    />\n  ) : (\n    content\n  )\n}\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nfunction getTypography(size: ButtonSize) {\n  return (\n    {\n      xs: '13',\n      s: '13',\n      m: '14',\n      l: '15',\n      xl: '18',\n    } as const\n  )[size]\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      as = BaseButton,\n      text,\n      prefixContent,\n      suffixContent,\n      color = 'blue',\n      variant = 'primary',\n      size = 'm',\n      active,\n      className,\n      loading,\n      disabled: disabledProp,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as as typeof BaseButton\n\n    const disabled = loading || disabledProp\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={classNames(\n          styles.Button,\n          styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          styles[`color-${color}`],\n          active && styles.active,\n          className\n        )}\n        disabled={disabled}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.ButtonContent,\n            loading && styles.loading\n          )}\n        >\n          <SideContent\n            size={getIconSize(size)}\n            content={prefixContent}\n          />\n\n          {/* TODO: use AlphaText later, add typo */}\n          <Text\n            className={styles.ButtonText}\n            typo={getTypography(size)}\n            bold\n          >\n            {text}\n          </Text>\n\n          <SideContent\n            size={getIconSize(size)}\n            content={suffixContent}\n          />\n        </div>\n\n        {loading && (\n          <div\n            className={classNames(\n              styles.ButtonLoader,\n              // NOTE: Loader size is the same as icon size\n              styles[`size-${getIconSize(size)}`]\n            )}\n          >\n            <AlphaLoader\n              size=\"s\"\n              className={styles.Loader}\n              variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n            />\n          </div>\n        )}\n      </Comp>\n    )\n  }\n)\n"],"names":["SideContent","size","content","isBezierIcon","_jsx","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getTypography","Button","forwardRef","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","disabled","disabledProp","rest","forwardedRef","Comp","_jsxs","ref","classNames","children","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","AlphaLoader","Loader"],"mappings":"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"}

package/dist/cjs/components/AlphaDialogPrimitive/DialogPrimitive.js

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

package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../_virtual/index.js');
+var classNames = require('classnames');
 var FloatingButton_module = require('./FloatingButton.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Text = require('../Text/Text.js');
@@ -56,11 +56,11 @@ const FloatingButton = /*#__PURE__*/React.forwardRef(function Button({
   const disabled = loading || disabledProp;
   return /*#__PURE__*/jsxRuntime.jsxs(Comp, {
     ref: forwardedRef,
-    className: index.default(FloatingButton_module.default.FloatingButton, FloatingButton_module.default[`size-${size}`], FloatingButton_module.default[`variant-${variant}`], FloatingButton_module.default[`color-${color}`], active && FloatingButton_module.default.active, className),
+    className: classNames(FloatingButton_module.default.FloatingButton, FloatingButton_module.default[`size-${size}`], FloatingButton_module.default[`variant-${variant}`], FloatingButton_module.default[`color-${color}`], active && FloatingButton_module.default.active, className),
     disabled: disabled,
     ...rest,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: index.default(FloatingButton_module.default.ButtonContent, loading && FloatingButton_module.default.loading),
+      className: classNames(FloatingButton_module.default.ButtonContent, loading && FloatingButton_module.default.loading),
       children: [/*#__PURE__*/jsxRuntime.jsx(SideContent, {
         size: getIconSize(size),
         content: prefixContent
@@ -74,7 +74,7 @@ const FloatingButton = /*#__PURE__*/React.forwardRef(function Button({
         content: suffixContent
       })]
     }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: index.default(FloatingButton_module.default.ButtonLoader,
+      className: classNames(FloatingButton_module.default.ButtonLoader,
       // NOTE: Loader size is the same as icon size
       FloatingButton_module.default[`size-${getIconSize(size)}`]),
       children: /*#__PURE__*/jsxRuntime.jsx(Loader.Loader, {

package/dist/cjs/components/AlphaFloatingButton/FloatingButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingButton.js","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n  type FloatingButtonProps,\n  type FloatingButtonSize,\n} from '~/src/components/AlphaFloatingButton/FloatingButton.types'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './FloatingButton.module.scss'\n\nfunction SideContent({\n  size,\n  content,\n}: {\n  size: IconSize\n  content?: FloatingButtonProps['prefixContent']\n}) {\n  return isBezierIcon(content) ? (\n    <Icon\n      source={content}\n      size={size}\n      className={styles.ButtonIcon}\n    />\n  ) : (\n    content\n  )\n}\n\nfunction getIconSize(size: FloatingButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nfunction getTypography(size: FloatingButtonSize) {\n  return (\n    {\n      xs: '13',\n      s: '13',\n      m: '14',\n      l: '15',\n      xl: '18',\n    } as const\n  )[size]\n}\n\nexport const FloatingButton = forwardRef<\n  HTMLButtonElement,\n  FloatingButtonProps\n>(function Button(\n  {\n    as = BaseButton,\n    text,\n    prefixContent,\n    suffixContent,\n    color = 'blue',\n    variant = 'primary',\n    size = 'm',\n    active,\n    className,\n    loading = false,\n    disabled: disabledProp = false,\n    ...rest\n  },\n  forwardedRef\n) {\n  const Comp = as as typeof BaseButton\n  const disabled = loading || disabledProp\n\n  return (\n    <Comp\n      ref={forwardedRef}\n      className={classNames(\n        styles.FloatingButton,\n        styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        styles[`color-${color}`],\n        active && styles.active,\n        className\n      )}\n      disabled={disabled}\n      {...rest}\n    >\n      <div\n        className={classNames(styles.ButtonContent, loading && styles.loading)}\n      >\n        <SideContent\n          size={getIconSize(size)}\n          content={prefixContent}\n        />\n\n        {/* TODO: use AlphaText later, add typo */}\n        <Text\n          className={styles.ButtonText}\n          typo={getTypography(size)}\n          bold\n        >\n          {text}\n        </Text>\n\n        <SideContent\n          size={getIconSize(size)}\n          content={suffixContent}\n        />\n      </div>\n\n      {loading && (\n        <div\n          className={classNames(\n            styles.ButtonLoader,\n            // NOTE: Loader size is the same as icon size\n            styles[`size-${getIconSize(size)}`]\n          )}\n        >\n          <AlphaLoader\n            size=\"s\"\n            className={styles.Loader}\n            variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n          />\n        </div>\n      )}\n    </Comp>\n  )\n})\n"],"names":["SideContent","size","content","isBezierIcon","_jsx","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getTypography","FloatingButton","forwardRef","Button","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","disabled","disabledProp","rest","forwardedRef","Comp","_jsxs","ref","classNames","children","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","AlphaLoader","Loader"],"mappings":"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"}
+{"version":3,"file":"FloatingButton.js","sources":["../../../../src/components/AlphaFloatingButton/FloatingButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport {\n  type FloatingButtonProps,\n  type FloatingButtonSize,\n} from '~/src/components/AlphaFloatingButton/FloatingButton.types'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './FloatingButton.module.scss'\n\nfunction SideContent({\n  size,\n  content,\n}: {\n  size: IconSize\n  content?: FloatingButtonProps['prefixContent']\n}) {\n  return isBezierIcon(content) ? (\n    <Icon\n      source={content}\n      size={size}\n      className={styles.ButtonIcon}\n    />\n  ) : (\n    content\n  )\n}\n\nfunction getIconSize(size: FloatingButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nfunction getTypography(size: FloatingButtonSize) {\n  return (\n    {\n      xs: '13',\n      s: '13',\n      m: '14',\n      l: '15',\n      xl: '18',\n    } as const\n  )[size]\n}\n\nexport const FloatingButton = forwardRef<\n  HTMLButtonElement,\n  FloatingButtonProps\n>(function Button(\n  {\n    as = BaseButton,\n    text,\n    prefixContent,\n    suffixContent,\n    color = 'blue',\n    variant = 'primary',\n    size = 'm',\n    active,\n    className,\n    loading = false,\n    disabled: disabledProp = false,\n    ...rest\n  },\n  forwardedRef\n) {\n  const Comp = as as typeof BaseButton\n  const disabled = loading || disabledProp\n\n  return (\n    <Comp\n      ref={forwardedRef}\n      className={classNames(\n        styles.FloatingButton,\n        styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        styles[`color-${color}`],\n        active && styles.active,\n        className\n      )}\n      disabled={disabled}\n      {...rest}\n    >\n      <div\n        className={classNames(styles.ButtonContent, loading && styles.loading)}\n      >\n        <SideContent\n          size={getIconSize(size)}\n          content={prefixContent}\n        />\n\n        {/* TODO: use AlphaText later, add typo */}\n        <Text\n          className={styles.ButtonText}\n          typo={getTypography(size)}\n          bold\n        >\n          {text}\n        </Text>\n\n        <SideContent\n          size={getIconSize(size)}\n          content={suffixContent}\n        />\n      </div>\n\n      {loading && (\n        <div\n          className={classNames(\n            styles.ButtonLoader,\n            // NOTE: Loader size is the same as icon size\n            styles[`size-${getIconSize(size)}`]\n          )}\n        >\n          <AlphaLoader\n            size=\"s\"\n            className={styles.Loader}\n            variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n          />\n        </div>\n      )}\n    </Comp>\n  )\n})\n"],"names":["SideContent","size","content","isBezierIcon","_jsx","Icon","source","className","styles","ButtonIcon","getIconSize","xs","s","m","l","xl","getTypography","FloatingButton","forwardRef","Button","as","BaseButton","text","prefixContent","suffixContent","color","variant","active","loading","disabled","disabledProp","rest","forwardedRef","Comp","_jsxs","ref","classNames","children","ButtonContent","Text","ButtonText","typo","bold","ButtonLoader","AlphaLoader","Loader"],"mappings":"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"}

package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../_virtual/index.js');
+var classNames = require('classnames');
 var FloatingIconButton_module = require('./FloatingIconButton.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
@@ -34,17 +34,17 @@ const FloatingIconButton = /*#__PURE__*/React.forwardRef(function FloatingIconBu
   const disabled = loading || disabledProp;
   return /*#__PURE__*/jsxRuntime.jsxs(Comp, {
     ref: forwardedRef,
-    className: index.default(FloatingIconButton_module.default.FloatingIconButton, FloatingIconButton_module.default[`size-${size}`], FloatingIconButton_module.default[`variant-${variant}`], FloatingIconButton_module.default[`color-${color}`], active && FloatingIconButton_module.default.active, className),
+    className: classNames(FloatingIconButton_module.default.FloatingIconButton, FloatingIconButton_module.default[`size-${size}`], FloatingIconButton_module.default[`variant-${variant}`], FloatingIconButton_module.default[`color-${color}`], active && FloatingIconButton_module.default.active, className),
     disabled: disabled,
     ...rest,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: index.default(FloatingIconButton_module.default.ButtonContent, loading && FloatingIconButton_module.default.loading),
+      className: classNames(FloatingIconButton_module.default.ButtonContent, loading && FloatingIconButton_module.default.loading),
       children: bezierIcons.isBezierIcon(content) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         size: getIconSize(size),
         source: content
       }) : content
     }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: index.default(FloatingIconButton_module.default.ButtonLoader,
+      className: classNames(FloatingIconButton_module.default.ButtonLoader,
       // NOTE: Loader size is the same as icon size
       FloatingIconButton_module.default[`size-${getIconSize(size)}`]),
       children: /*#__PURE__*/jsxRuntime.jsx(Loader.Loader, {

package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingIconButton.js","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './FloatingIconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nexport const FloatingIconButton = forwardRef<\n  HTMLButtonElement,\n  AlphaFloatingIconButtonProps\n>(function FloatingIconButton(\n  {\n    as = BaseButton,\n    color = 'blue',\n    variant = 'primary',\n    size = 'm',\n    active,\n    content,\n    loading = false,\n    disabled: disabledProp = false,\n    className,\n    ...rest\n  },\n  forwardedRef\n) {\n  const Comp = as as typeof BaseButton\n  const disabled = loading || disabledProp\n\n  return (\n    <Comp\n      ref={forwardedRef}\n      className={classNames(\n        styles.FloatingIconButton,\n        styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        styles[`color-${color}`],\n        active && styles.active,\n        className\n      )}\n      disabled={disabled}\n      {...rest}\n    >\n      <div\n        className={classNames(styles.ButtonContent, loading && styles.loading)}\n      >\n        {isBezierIcon(content) ? (\n          <Icon\n            size={getIconSize(size)}\n            source={content}\n          />\n        ) : (\n          content\n        )}\n      </div>\n\n      {loading && (\n        <div\n          className={classNames(\n            styles.ButtonLoader,\n            // NOTE: Loader size is the same as icon size\n            styles[`size-${getIconSize(size)}`]\n          )}\n        >\n          <AlphaLoader\n            size=\"s\"\n            className={styles.Loader}\n            variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n          />\n        </div>\n      )}\n    </Comp>\n  )\n})\n"],"names":["getIconSize","size","xs","s","m","l","xl","FloatingIconButton","forwardRef","as","BaseButton","color","variant","active","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","_jsxs","ref","classNames","styles","children","_jsx","ButtonContent","isBezierIcon","Icon","source","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,kBAAkB,gBAAGC,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;EACNC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGZ,EAAuB;AACpC,EAAA,MAAMO,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBF,IAAAA,SAAS,EAAEM,aAAU,CACnBC,iCAAM,CAAClB,kBAAkB,EACzBkB,iCAAM,CAAC,QAAQxB,IAAI,CAAA,CAAE,CAAC,EACtBwB,iCAAM,CAAC,CAAA,QAAA,EAAWb,OAAO,CAAA,CAAE,CAAC,EAC5Ba,iCAAM,CAAC,CAAA,MAAA,EAASd,KAAK,CAAE,CAAA,CAAC,EACxBE,MAAM,IAAIY,iCAAM,CAACZ,MAAM,EACvBK,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfG,IAAI;AAAAO,IAAAA,QAAA,gBAERC,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CAACC,iCAAM,CAACG,aAAa,EAAEb,OAAO,IAAIU,iCAAM,CAACV,OAAO,CAAE;MAAAW,QAAA,EAEtEG,wBAAY,CAACf,OAAO,CAAC,gBACpBa,cAAA,CAACG,SAAI,EAAA;AACH7B,QAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,QAAAA,MAAM,EAAEjB;AAAQ,OACjB,CAAC,GAEFA;AACD,KACE,CAAC,EAELC,OAAO,iBACNY,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CACnBC,iCAAM,CAACO,YAAY;AACnB;MACAP,iCAAM,CAAC,QAAQzB,WAAW,CAACC,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAAyB,QAAA,eAEFC,cAAA,CAACM,aAAW,EAAA;AACVhC,QAAAA,IAAI,EAAC,GAAG;QACRiB,SAAS,EAAEO,iCAAM,CAACS,MAAO;AACzBtB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CAAC;;;;"}
+{"version":3,"file":"FloatingIconButton.js","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './FloatingIconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nexport const FloatingIconButton = forwardRef<\n  HTMLButtonElement,\n  AlphaFloatingIconButtonProps\n>(function FloatingIconButton(\n  {\n    as = BaseButton,\n    color = 'blue',\n    variant = 'primary',\n    size = 'm',\n    active,\n    content,\n    loading = false,\n    disabled: disabledProp = false,\n    className,\n    ...rest\n  },\n  forwardedRef\n) {\n  const Comp = as as typeof BaseButton\n  const disabled = loading || disabledProp\n\n  return (\n    <Comp\n      ref={forwardedRef}\n      className={classNames(\n        styles.FloatingIconButton,\n        styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        styles[`color-${color}`],\n        active && styles.active,\n        className\n      )}\n      disabled={disabled}\n      {...rest}\n    >\n      <div\n        className={classNames(styles.ButtonContent, loading && styles.loading)}\n      >\n        {isBezierIcon(content) ? (\n          <Icon\n            size={getIconSize(size)}\n            source={content}\n          />\n        ) : (\n          content\n        )}\n      </div>\n\n      {loading && (\n        <div\n          className={classNames(\n            styles.ButtonLoader,\n            // NOTE: Loader size is the same as icon size\n            styles[`size-${getIconSize(size)}`]\n          )}\n        >\n          <AlphaLoader\n            size=\"s\"\n            className={styles.Loader}\n            variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n          />\n        </div>\n      )}\n    </Comp>\n  )\n})\n"],"names":["getIconSize","size","xs","s","m","l","xl","FloatingIconButton","forwardRef","as","BaseButton","color","variant","active","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","_jsxs","ref","classNames","styles","children","_jsx","ButtonContent","isBezierIcon","Icon","source","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,kBAAkB,gBAAGC,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;EACNC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGZ,EAAuB;AACpC,EAAA,MAAMO,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBF,IAAAA,SAAS,EAAEM,UAAU,CACnBC,iCAAM,CAAClB,kBAAkB,EACzBkB,iCAAM,CAAC,QAAQxB,IAAI,CAAA,CAAE,CAAC,EACtBwB,iCAAM,CAAC,CAAA,QAAA,EAAWb,OAAO,CAAA,CAAE,CAAC,EAC5Ba,iCAAM,CAAC,CAAA,MAAA,EAASd,KAAK,CAAE,CAAA,CAAC,EACxBE,MAAM,IAAIY,iCAAM,CAACZ,MAAM,EACvBK,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfG,IAAI;AAAAO,IAAAA,QAAA,gBAERC,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,UAAU,CAACC,iCAAM,CAACG,aAAa,EAAEb,OAAO,IAAIU,iCAAM,CAACV,OAAO,CAAE;MAAAW,QAAA,EAEtEG,wBAAY,CAACf,OAAO,CAAC,gBACpBa,cAAA,CAACG,SAAI,EAAA;AACH7B,QAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,QAAAA,MAAM,EAAEjB;AAAQ,OACjB,CAAC,GAEFA;AACD,KACE,CAAC,EAELC,OAAO,iBACNY,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,UAAU,CACnBC,iCAAM,CAACO,YAAY;AACnB;MACAP,iCAAM,CAAC,QAAQzB,WAAW,CAACC,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAAyB,QAAA,eAEFC,cAAA,CAACM,aAAW,EAAA;AACVhC,QAAAA,IAAI,EAAC,GAAG;QACRiB,SAAS,EAAEO,iCAAM,CAACS,MAAO;AACzBtB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CAAC;;;;"}

package/dist/cjs/components/AlphaIconButton/IconButton.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../_virtual/index.js');
+var classNames = require('classnames');
 var IconButton_module = require('./IconButton.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
@@ -35,18 +35,18 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton({
   const disabled = loading || disabledProp;
   return /*#__PURE__*/jsxRuntime.jsxs(Comp, {
     ref: forwardedRef,
-    className: index.default(IconButton_module.default.IconButton, IconButton_module.default[`size-${size}`], IconButton_module.default[`variant-${variant}`], IconButton_module.default[`color-${color}`], IconButton_module.default[`shape-${shape}`], active && IconButton_module.default.active, className),
+    className: classNames(IconButton_module.default.IconButton, IconButton_module.default[`size-${size}`], IconButton_module.default[`variant-${variant}`], IconButton_module.default[`color-${color}`], IconButton_module.default[`shape-${shape}`], active && IconButton_module.default.active, className),
     disabled: disabled,
     ...rest,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: index.default(IconButton_module.default.ButtonContent, loading && IconButton_module.default.loading),
+      className: classNames(IconButton_module.default.ButtonContent, loading && IconButton_module.default.loading),
       children: bezierIcons.isBezierIcon(content) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         size: getIconSize(size),
         source: content,
         className: IconButton_module.default.ButtonIcon
       }) : content
     }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: index.default(IconButton_module.default.ButtonLoader,
+      className: classNames(IconButton_module.default.ButtonLoader,
       // NOTE: Loader size is the same as icon size
       IconButton_module.default[`size-${getIconSize(size)}`]),
       children: /*#__PURE__*/jsxRuntime.jsx(Loader.Loader, {

package/dist/cjs/components/AlphaIconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './IconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(\n  function IconButton(\n    {\n      as = BaseButton,\n      color = 'blue',\n      variant = 'primary',\n      size = 'm',\n      active,\n      shape = 'rectangle',\n      content,\n      loading = false,\n      disabled: disabledProp = false,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as as typeof BaseButton\n\n    const disabled = loading || disabledProp\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={classNames(\n          styles.IconButton,\n          styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          styles[`color-${color}`],\n          styles[`shape-${shape}`],\n          active && styles.active,\n          className\n        )}\n        disabled={disabled}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.ButtonContent,\n            loading && styles.loading\n          )}\n        >\n          {isBezierIcon(content) ? (\n            <Icon\n              size={getIconSize(size)}\n              source={content}\n              className={styles.ButtonIcon}\n            />\n          ) : (\n            content\n          )}\n        </div>\n\n        {loading && (\n          <div\n            className={classNames(\n              styles.ButtonLoader,\n              // NOTE: Loader size is the same as icon size\n              styles[`size-${getIconSize(size)}`]\n            )}\n          >\n            <AlphaLoader\n              size=\"s\"\n              className={styles.Loader}\n              variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n            />\n          </div>\n        )}\n      </Comp>\n    )\n  }\n)\n"],"names":["getIconSize","size","xs","s","m","l","xl","IconButton","forwardRef","as","BaseButton","color","variant","active","shape","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","_jsxs","ref","classNames","styles","children","_jsx","ButtonContent","isBezierIcon","Icon","source","ButtonIcon","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,UAAU,gBAAGC,gBAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;AACNC,EAAAA,KAAK,GAAG,WAAW;EACnBC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGb,EAAuB;AAEpC,EAAA,MAAMQ,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBF,IAAAA,SAAS,EAAEM,aAAU,CACnBC,yBAAM,CAACnB,UAAU,EACjBmB,yBAAM,CAAC,QAAQzB,IAAI,CAAA,CAAE,CAAC,EACtByB,yBAAM,CAAC,CAAWd,QAAAA,EAAAA,OAAO,EAAE,CAAC,EAC5Bc,yBAAM,CAAC,SAASf,KAAK,CAAA,CAAE,CAAC,EACxBe,yBAAM,CAAC,CAASZ,MAAAA,EAAAA,KAAK,EAAE,CAAC,EACxBD,MAAM,IAAIa,yBAAM,CAACb,MAAM,EACvBM,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfG,IAAI;AAAAO,IAAAA,QAAA,gBAERC,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CACnBC,yBAAM,CAACG,aAAa,EACpBb,OAAO,IAAIU,yBAAM,CAACV,OACpB,CAAE;MAAAW,QAAA,EAEDG,wBAAY,CAACf,OAAO,CAAC,gBACpBa,cAAA,CAACG,SAAI,EAAA;AACH9B,QAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB+B,QAAAA,MAAM,EAAEjB,OAAQ;QAChBI,SAAS,EAAEO,yBAAM,CAACO;AAAW,OAC9B,CAAC,GAEFlB;AACD,KACE,CAAC,EAELC,OAAO,iBACNY,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CACnBC,yBAAM,CAACQ,YAAY;AACnB;MACAR,yBAAM,CAAC,QAAQ1B,WAAW,CAACC,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAA0B,QAAA,eAEFC,cAAA,CAACO,aAAW,EAAA;AACVlC,QAAAA,IAAI,EAAC,GAAG;QACRkB,SAAS,EAAEO,yBAAM,CAACU,MAAO;AACzBxB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CACF;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './IconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(\n  function IconButton(\n    {\n      as = BaseButton,\n      color = 'blue',\n      variant = 'primary',\n      size = 'm',\n      active,\n      shape = 'rectangle',\n      content,\n      loading = false,\n      disabled: disabledProp = false,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as as typeof BaseButton\n\n    const disabled = loading || disabledProp\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={classNames(\n          styles.IconButton,\n          styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          styles[`color-${color}`],\n          styles[`shape-${shape}`],\n          active && styles.active,\n          className\n        )}\n        disabled={disabled}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.ButtonContent,\n            loading && styles.loading\n          )}\n        >\n          {isBezierIcon(content) ? (\n            <Icon\n              size={getIconSize(size)}\n              source={content}\n              className={styles.ButtonIcon}\n            />\n          ) : (\n            content\n          )}\n        </div>\n\n        {loading && (\n          <div\n            className={classNames(\n              styles.ButtonLoader,\n              // NOTE: Loader size is the same as icon size\n              styles[`size-${getIconSize(size)}`]\n            )}\n          >\n            <AlphaLoader\n              size=\"s\"\n              className={styles.Loader}\n              variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n            />\n          </div>\n        )}\n      </Comp>\n    )\n  }\n)\n"],"names":["getIconSize","size","xs","s","m","l","xl","IconButton","forwardRef","as","BaseButton","color","variant","active","shape","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","_jsxs","ref","classNames","styles","children","_jsx","ButtonContent","isBezierIcon","Icon","source","ButtonIcon","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,UAAU,gBAAGC,gBAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;AACNC,EAAAA,KAAK,GAAG,WAAW;EACnBC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGb,EAAuB;AAEpC,EAAA,MAAMQ,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBF,IAAAA,SAAS,EAAEM,UAAU,CACnBC,yBAAM,CAACnB,UAAU,EACjBmB,yBAAM,CAAC,QAAQzB,IAAI,CAAA,CAAE,CAAC,EACtByB,yBAAM,CAAC,CAAWd,QAAAA,EAAAA,OAAO,EAAE,CAAC,EAC5Bc,yBAAM,CAAC,SAASf,KAAK,CAAA,CAAE,CAAC,EACxBe,yBAAM,CAAC,CAASZ,MAAAA,EAAAA,KAAK,EAAE,CAAC,EACxBD,MAAM,IAAIa,yBAAM,CAACb,MAAM,EACvBM,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfG,IAAI;AAAAO,IAAAA,QAAA,gBAERC,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,UAAU,CACnBC,yBAAM,CAACG,aAAa,EACpBb,OAAO,IAAIU,yBAAM,CAACV,OACpB,CAAE;MAAAW,QAAA,EAEDG,wBAAY,CAACf,OAAO,CAAC,gBACpBa,cAAA,CAACG,SAAI,EAAA;AACH9B,QAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB+B,QAAAA,MAAM,EAAEjB,OAAQ;QAChBI,SAAS,EAAEO,yBAAM,CAACO;AAAW,OAC9B,CAAC,GAEFlB;AACD,KACE,CAAC,EAELC,OAAO,iBACNY,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,UAAU,CACnBC,yBAAM,CAACQ,YAAY;AACnB;MACAR,yBAAM,CAAC,QAAQ1B,WAAW,CAACC,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAA0B,QAAA,eAEFC,cAAA,CAACO,aAAW,EAAA;AACVlC,QAAAA,IAAI,EAAC,GAAG;QACRkB,SAAS,EAAEO,yBAAM,CAACU,MAAO;AACzBxB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CACF;;;;"}

package/dist/cjs/components/AlphaLoader/Loader.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../_virtual/index.js');
+var classNames = require('classnames');
 var Loader_module = require('./Loader.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -13,7 +13,7 @@ const Loader = /*#__PURE__*/React.forwardRef(function Loader({
   ...rest
 }, forwardedRef) {
   return /*#__PURE__*/jsxRuntime.jsx("span", {
-    className: index.default(Loader_module.default.Loader, size && Loader_module.default[`size-${size}`], Loader_module.default[`variant-${variant}`], className),
+    className: classNames(Loader_module.default.Loader, size && Loader_module.default[`size-${size}`], Loader_module.default[`variant-${variant}`], className),
     ref: forwardedRef,
     "data-testid": LOADER_TEST_ID,
     ...rest,

package/dist/cjs/components/AlphaLoader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../../src/components/AlphaLoader/Loader.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type LoaderProps } from './Loader.types'\n\nimport styles from './Loader.module.scss'\n\nexport const LOADER_TEST_ID = 'bezier-loader'\n\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { className, size, variant = 'secondary', ...rest },\n  forwardedRef\n) {\n  return (\n    <span\n      className={classNames(\n        styles.Loader,\n        size && styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        className\n      )}\n      ref={forwardedRef}\n      data-testid={LOADER_TEST_ID}\n      {...rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 16 16\"\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          className={styles.track}\n        />\n\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          className={styles.indicator}\n        />\n      </svg>\n    </span>\n  )\n})\n"],"names":["LOADER_TEST_ID","Loader","forwardRef","className","size","variant","rest","forwardedRef","_jsx","classNames","styles","ref","children","_jsxs","xmlns","viewBox","cx","cy","r","track","indicator"],"mappings":";;;;;;;AAUO,MAAMA,cAAc,GAAG;MAEjBC,MAAM,gBAAGC,gBAAU,CAA+B,SAASD,MAAMA,CAC5E;EAAEE,SAAS;EAAEC,IAAI;AAAEC,EAAAA,OAAO,GAAG,WAAW;EAAE,GAAGC;AAAK,CAAC,EACnDC,YAAY,EACZ;AACA,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IACEL,SAAS,EAAEM,aAAU,CACnBC,qBAAM,CAACT,MAAM,EACbG,IAAI,IAAIM,qBAAM,CAAC,CAAA,KAAA,EAAQN,IAAI,CAAE,CAAA,CAAC,EAC9BM,qBAAM,CAAC,CAAA,QAAA,EAAWL,OAAO,CAAE,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFQ,IAAAA,GAAG,EAAEJ,YAAa;AAClB,IAAA,aAAA,EAAaP,cAAe;AAAA,IAAA,GACxBM,IAAI;AAAAM,IAAAA,QAAA,eAERC,eAAA,CAAA,KAAA,EAAA;AACEC,MAAAA,KAAK,EAAC,4BAA4B;AAClCC,MAAAA,OAAO,EAAC,WAAW;AAAAH,MAAAA,QAAA,gBAEnBJ,cAAA,CAAA,QAAA,EAAA;AACEQ,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,CAAC,EAAC,KAAK;QACPf,SAAS,EAAEO,qBAAM,CAACS;OACnB,CAAC,eAEFX,cAAA,CAAA,QAAA,EAAA;AACEQ,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,CAAC,EAAC,KAAK;QACPf,SAAS,EAAEO,qBAAM,CAACU;AAAU,OAC7B,CAAC;KACC;AAAC,GACF,CAAC;AAEX,CAAC;;;;;"}
+{"version":3,"file":"Loader.js","sources":["../../../../src/components/AlphaLoader/Loader.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type LoaderProps } from './Loader.types'\n\nimport styles from './Loader.module.scss'\n\nexport const LOADER_TEST_ID = 'bezier-loader'\n\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { className, size, variant = 'secondary', ...rest },\n  forwardedRef\n) {\n  return (\n    <span\n      className={classNames(\n        styles.Loader,\n        size && styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        className\n      )}\n      ref={forwardedRef}\n      data-testid={LOADER_TEST_ID}\n      {...rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 16 16\"\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          className={styles.track}\n        />\n\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          className={styles.indicator}\n        />\n      </svg>\n    </span>\n  )\n})\n"],"names":["LOADER_TEST_ID","Loader","forwardRef","className","size","variant","rest","forwardedRef","_jsx","classNames","styles","ref","children","_jsxs","xmlns","viewBox","cx","cy","r","track","indicator"],"mappings":";;;;;;;AAUO,MAAMA,cAAc,GAAG;MAEjBC,MAAM,gBAAGC,gBAAU,CAA+B,SAASD,MAAMA,CAC5E;EAAEE,SAAS;EAAEC,IAAI;AAAEC,EAAAA,OAAO,GAAG,WAAW;EAAE,GAAGC;AAAK,CAAC,EACnDC,YAAY,EACZ;AACA,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IACEL,SAAS,EAAEM,UAAU,CACnBC,qBAAM,CAACT,MAAM,EACbG,IAAI,IAAIM,qBAAM,CAAC,CAAA,KAAA,EAAQN,IAAI,CAAE,CAAA,CAAC,EAC9BM,qBAAM,CAAC,CAAA,QAAA,EAAWL,OAAO,CAAE,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFQ,IAAAA,GAAG,EAAEJ,YAAa;AAClB,IAAA,aAAA,EAAaP,cAAe;AAAA,IAAA,GACxBM,IAAI;AAAAM,IAAAA,QAAA,eAERC,eAAA,CAAA,KAAA,EAAA;AACEC,MAAAA,KAAK,EAAC,4BAA4B;AAClCC,MAAAA,OAAO,EAAC,WAAW;AAAAH,MAAAA,QAAA,gBAEnBJ,cAAA,CAAA,QAAA,EAAA;AACEQ,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,CAAC,EAAC,KAAK;QACPf,SAAS,EAAEO,qBAAM,CAACS;OACnB,CAAC,eAEFX,cAAA,CAAA,QAAA,EAAA;AACEQ,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,CAAC,EAAC,KAAK;QACPf,SAAS,EAAEO,qBAAM,CAACU;AAAU,OAC7B,CAAC;KACC;AAAC,GACF,CAAC;AAEX,CAAC;;;;;"}

package/dist/cjs/components/AlphaStatusBadge/StatusBadge.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../_virtual/index.js');
+var classNames = require('classnames');
 var style = require('../../utils/style.js');
 var StatusBadge_module = require('./StatusBadge.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -16,15 +16,15 @@ const StatusBadge = /*#__PURE__*/React.forwardRef(function StatusBadge({
   className,
   ...rest
 }, forwardedRef) {
-  const iconColor = online ? 'bgtxt-green-normal' : doNotDisturb ? 'bgtxt-yellow-normal' : 'bg-black-dark';
-  const backgroundColor = doNotDisturb ? 'bg-white-high' : iconColor;
+  const iconColor = online ? 'text-accent-green' : doNotDisturb ? 'text-accent-yellow' : 'fill-neutral-heavy';
+  const backgroundColor = doNotDisturb ? 'surface-high' : iconColor;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: forwardedRef,
     style: {
-      '--b-status-bg-color': style.cssVar(backgroundColor),
+      '--b-status-bg-color': style.betaTokenCssVar(backgroundColor),
       ...style$1
     },
-    className: index.default(StatusBadge_module.default.StatusBadge, StatusBadge_module.default[`size-${size}`], className),
+    className: classNames(StatusBadge_module.default.StatusBadge, StatusBadge_module.default[`size-${size}`], className),
     ...rest,
     children: doNotDisturb && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       source: bezierIcons.MoonFilledIcon,

package/dist/cjs/components/AlphaStatusBadge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sources":["../../../../src/components/AlphaStatusBadge/StatusBadge.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSProperties, forwardRef } from 'react'\n\nimport { MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type SemanticColor } from '~/src/types/tokens'\nimport { cssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusBadgeProps } from './StatusBadge.types'\n\nimport styles from './StatusBadge.module.scss'\n\n// TODO: Change to use AlphaIcon and alpha color tokens\n\n/**\n * `StatusBadge` is a component to indicate user status.\n * @example\n *\n * ```tsx\n * <StatusBadge\n *   size=\"m\"\n *   online\n *   doNotDisturb\n * />\n * ```\n */\nexport const StatusBadge = forwardRef<HTMLDivElement, StatusBadgeProps>(\n  function StatusBadge(\n    {\n      size = 'm',\n      online = false,\n      doNotDisturb = false,\n      style,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const iconColor: SemanticColor = online\n      ? 'bgtxt-green-normal'\n      : doNotDisturb\n        ? 'bgtxt-yellow-normal'\n        : 'bg-black-dark'\n    const backgroundColor: SemanticColor = doNotDisturb\n      ? 'bg-white-high'\n      : iconColor\n\n    return (\n      <div\n        ref={forwardedRef}\n        style={\n          {\n            '--b-status-bg-color': cssVar(backgroundColor),\n            ...style,\n          } as CSSProperties\n        }\n        className={classNames(\n          styles.StatusBadge,\n          styles[`size-${size}`],\n          className\n        )}\n        {...rest}\n      >\n        {doNotDisturb && (\n          <Icon\n            source={MoonFilledIcon}\n            size={size === 'm' ? 'xxxs' : 'xs'}\n            color={iconColor}\n            className={styles.Icon}\n          />\n        )}\n      </div>\n    )\n  }\n)\n"],"names":["StatusBadge","forwardRef","size","online","doNotDisturb","style","className","rest","forwardedRef","iconColor","backgroundColor","_jsx","ref","cssVar","classNames","styles","children","Icon","source","MoonFilledIcon","color"],"mappings":";;;;;;;;;;MA8BaA,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;AACEE,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,KAAK;SACpBC,OAAK;EACLC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,SAAwB,GAAGN,MAAM,GACnC,oBAAoB,GACpBC,YAAY,GACV,qBAAqB,GACrB,eAAe;AACrB,EAAA,MAAMM,eAA8B,GAAGN,YAAY,GAC/C,eAAe,GACfK,SAAS;AAEb,EAAA,oBACEE,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEQ,YAAM,CAACH,eAAe,CAAC;MAC9C,GAAGL;KAEN;AACDC,IAAAA,SAAS,EAAEQ,aAAU,CACnBC,0BAAM,CAACf,WAAW,EAClBe,0BAAM,CAAC,QAAQb,IAAI,CAAA,CAAE,CAAC,EACtBI,SACF,CAAE;AAAA,IAAA,GACEC,IAAI;AAAAS,IAAAA,QAAA,EAEPZ,YAAY,iBACXO,cAAA,CAACM,SAAI,EAAA;AACHC,MAAAA,MAAM,EAAEC,0BAAe;AACvBjB,MAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCkB,MAAAA,KAAK,EAAEX,SAAU;MACjBH,SAAS,EAAES,0BAAM,CAACE;KACnB;AACF,GACE,CAAC;AAEV,CACF;;;;"}
+{"version":3,"file":"StatusBadge.js","sources":["../../../../src/components/AlphaStatusBadge/StatusBadge.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSProperties, forwardRef } from 'react'\n\nimport { MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type SemanticColor } from '~/src/types/beta-tokens'\nimport { betaTokenCssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusBadgeProps } from './StatusBadge.types'\n\nimport styles from './StatusBadge.module.scss'\n\n// TODO: Change to use AlphaIcon and alpha color tokens\n\n/**\n * `StatusBadge` is a component to indicate user status.\n * @example\n *\n * ```tsx\n * <StatusBadge\n *   size=\"m\"\n *   online\n *   doNotDisturb\n * />\n * ```\n */\nexport const StatusBadge = forwardRef<HTMLDivElement, StatusBadgeProps>(\n  function StatusBadge(\n    {\n      size = 'm',\n      online = false,\n      doNotDisturb = false,\n      style,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const iconColor: SemanticColor = online\n      ? 'text-accent-green'\n      : doNotDisturb\n        ? 'text-accent-yellow'\n        : 'fill-neutral-heavy'\n    const backgroundColor: SemanticColor = doNotDisturb\n      ? 'surface-high'\n      : iconColor\n\n    return (\n      <div\n        ref={forwardedRef}\n        style={\n          {\n            '--b-status-bg-color': betaTokenCssVar(backgroundColor),\n            ...style,\n          } as CSSProperties\n        }\n        className={classNames(\n          styles.StatusBadge,\n          styles[`size-${size}`],\n          className\n        )}\n        {...rest}\n      >\n        {doNotDisturb && (\n          <Icon\n            source={MoonFilledIcon}\n            size={size === 'm' ? 'xxxs' : 'xs'}\n            color={iconColor}\n            className={styles.Icon}\n          />\n        )}\n      </div>\n    )\n  }\n)\n"],"names":["StatusBadge","forwardRef","size","online","doNotDisturb","style","className","rest","forwardedRef","iconColor","backgroundColor","_jsx","ref","betaTokenCssVar","classNames","styles","children","Icon","source","MoonFilledIcon","color"],"mappings":";;;;;;;;;;MA8BaA,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;AACEE,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,KAAK;SACpBC,OAAK;EACLC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,SAAwB,GAAGN,MAAM,GACnC,mBAAmB,GACnBC,YAAY,GACV,oBAAoB,GACpB,oBAAoB;AAC1B,EAAA,MAAMM,eAA8B,GAAGN,YAAY,GAC/C,cAAc,GACdK,SAAS;AAEb,EAAA,oBACEE,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEQ,qBAAe,CAACH,eAAe,CAAC;MACvD,GAAGL;KAEN;AACDC,IAAAA,SAAS,EAAEQ,UAAU,CACnBC,0BAAM,CAACf,WAAW,EAClBe,0BAAM,CAAC,QAAQb,IAAI,CAAA,CAAE,CAAC,EACtBI,SACF,CAAE;AAAA,IAAA,GACEC,IAAI;AAAAS,IAAAA,QAAA,EAEPZ,YAAY,iBACXO,cAAA,CAACM,SAAI,EAAA;AACHC,MAAAA,MAAM,EAAEC,0BAAe;AACvBjB,MAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCkB,MAAAA,KAAK,EAAEX,SAAU;MACjBH,SAAS,EAAES,0BAAM,CAACE;KACnB;AACF,GACE,CAAC;AAEV,CACF;;;;"}