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

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

@@ -8,7 +8,6 @@ var defaultAvatar = require('./assets/default-avatar.svg.js');
 var useProgressiveImage = require('./useProgressiveImage.js');
 var Avatar_module = require('./Avatar.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
-var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Status = require('../Status/Status.js');
 
@@ -34,12 +33,11 @@ function getShadow(size) {
   })();
   return {
     spreadRadius,
-    color: 'bg-white-high'
+    color: 'surface-higher'
   };
 }
 function useAvatarRadiusToken() {
-  // TODO: Replace this with useAlphaTokens
-  return ThemeProvider.useTokens().global.radius['radius-42-p'];
+  return '42%';
 }
 const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper';
 const AVATAR_TEST_ID = 'bezier-avatar';
@@ -111,7 +109,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
       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":";;;;;;;;;;;;;;AAsBA,SAASA,aAAaA,CAACC,IAAgB,EAAc;AACnD,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACT,IAAA,KAAK,KAAK;AACR,MAAA,OAAO,GAAG;AACZ,IAAA;AACE,MAAA,OAAO,GAAG;AACd;AACF;AAEA,SAASC,SAASA,CAACD,IAAgB,EAAmC;EACpE,MAAME,YAAY,GAAG,CAAC,MAAM;AAC1B,IAAA,QAAQF,IAAI;AACV,MAAA,KAAK,IAAI;AACP,QAAA,OAAO,CAAC;AACV,MAAA,KAAK,KAAK;AACR,QAAA,OAAO,CAAC;AACV,MAAA;AACE,QAAA,OAAO,CAAC;AACZ;AACF,GAAC,GAAG;EAEJ,OAAO;IACLE,YAAY;AACZC,IAAAA,KAAK,EAAE;GACR;AACH;AAEO,SAASC,oBAAoBA,GAAG;AACrC;EACA,OAAOC,uBAAS,EAAE,CAACC,MAAM,CAACC,MAAM,CAAC,aAAa,CAAC;AACjD;AAEO,MAAMC,sBAAsB,GAAG;AACtC,MAAMC,cAAc,GAAG,eAAe;AACtC,MAAMC,sBAAsB,GAAG,uBAAuB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,MAAM,gBAAGC,gBAAU,CAA8B,SAASD,MAAMA,CAC3E;AACEE,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,WAAW,GAAGC,qBAAgB;EAC9Bf,IAAI,EAAEgB,SAAS,GAAG,IAAI;EACtBC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AAAA,EAAA,IAAAC,qBAAA;AACA,EAAA,MAAMC,kBAAkB,GAAGC,kCAAgB,EAAE;AAC7C,EAAA,MAAM5B,IAAI,GAAA0B,CAAAA,qBAAA,GAAGC,kBAAkB,aAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAlBA,kBAAkB,CAAE3B,IAAI,MAAA0B,IAAAA,IAAAA,qBAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAA,GAAIV,SAAS;AAClD,EAAA,MAAMa,eAAe,GAAGC,2BAAmB,CAACjB,SAAS,EAAEC,WAAW,CAAC;AACnE,EAAA,MAAMiB,oBAAoB,GAAG3B,oBAAoB,EAAE;AAEnD,EAAA,MAAM4B,eAAe,GAAGC,aAAO,CAAC,MAAM;AACpC,IAAA,IACGC,YAAO,CAACX,QAAQ,CAAC,IAAI,CAACF,MAAM,IAC5BE,QAAQ,IAAI,eAACY,oBAAc,CAACZ,QAAQ,CAAE,EACvC;AACA,MAAA,OAAO,IAAI;AACb;IAEA,MAAMa,QAAQ,GAAG,CAAC,MAAM;AACtB,MAAA,IAAIb,QAAQ,EAAE;AACZ,QAAA,OAAOA,QAAQ;AACjB;AACA,MAAA,IAAIF,MAAM,EAAE;QACV,oBACEgB,cAAA,CAACC,aAAM,EAAA;AACLC,UAAAA,IAAI,EAAElB,MAAO;UACbrB,IAAI,EAAED,aAAa,CAACC,IAAI;AAAE,SAC3B,CAAC;AAEN;AACA,MAAA,OAAO,IAAI;AACb,KAAC,GAAG;IAEJ,OACEoC,QAAQ,iBACNC,cAAA,CAAA,KAAA,EAAA;MACEf,SAAS,EAAEkB,qBAAM,CAACC,aAAc;AAChC,MAAA,aAAA,EAAa/B,sBAAuB;AAAAa,MAAAA,QAAA,EAEnCa;AAAQ,KACN,CACN;GAEJ,EAAE,CAACf,MAAM,EAAErB,IAAI,EAAEuB,QAAQ,CAAC,CAAC;AAE5B,EAAA,oBACEc,cAAA,CAAA,KAAA,EAAA;IACEf,SAAS,EAAEoB,aAAU,CACnBF,qBAAM,CAAC7B,MAAM,EACb6B,qBAAM,CAAC,CAAA,KAAA,EAAQxC,IAAI,CAAE,CAAA,CAAC,EACtBkB,QAAQ,IAAIsB,qBAAM,CAACtB,QAAQ,EAC3BI,SACF,CAAE;AACF,IAAA,eAAA,EAAeJ,QAAS;AACxB,IAAA,aAAA,EAAaV,sBAAuB;AAAA,IAAA,GAChCgB,IAAI;IAAAD,QAAA,eAERc,cAAA,CAACM,iCAAgB,EAAA;AACfC,MAAAA,GAAG,EAAEnB,YAAa;AAClB,MAAA,kBAAA,EAAkBR,IAAK;MACvBK,SAAS,EAAEoB,aAAU,CACnBF,qBAAM,CAACK,WAAW,EAClBC,MAAM,CAAC9C,IAAI,CAAC,IAAI,EAAE,IAAIwC,qBAAM,CAAC,UAAU,CAAC,EACxCrB,UAAU,IAAIqB,qBAAM,CAACO,QACvB,CAAE;MACF7B,QAAQ,EAAE,CAACE,aAAc;AACzB4B,MAAAA,YAAY,EAAEjB,oBAAqB;MACnCkB,MAAM,EAAE9B,UAAU,GAAGlB,SAAS,CAACD,IAAI,CAAC,GAAGkD,SAAU;AACjDC,MAAAA,eAAe,EAAC,iBAAiB;AACjCC,MAAAA,eAAe,EAAEvB,eAAgB;AACjC,MAAA,aAAA,EAAapB,cAAe;AAAAc,MAAAA,QAAA,EAE3BS;KACe;AAAC,GAChB,CAAC;AAEV,CAAC;;;;;;"}
+{"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'\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  return '42%' as const\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","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

@@ -8,10 +8,10 @@ var style = require('../../utils/style.js');
 var AvatarSizeContext = require('../AlphaAvatar/AvatarSizeContext.js');
 var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Avatar = require('../AlphaAvatar/Avatar.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
+var Avatar = require('../AlphaAvatar/Avatar.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -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");
@@ -145,7 +145,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
             className: index.default(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)
             })

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAMA,qBAAqB,GAAG,EAAE;AAChC,MAAMC,4BAA4B,GAAG,CAAC;AAC/B,MAAMC,kCAAkC,GAC7C;AAEF,SAASC,0BAA0BA,CAACC,KAAa,EAAEC,GAAW,EAAE;AAC9D,EAAA,MAAMC,SAAS,GAAGF,KAAK,GAAGC,GAAG;EAC7B,OAAO,CAAA,CAAA,EAAIC,SAAS,GAAGN,qBAAqB,GAAGA,qBAAqB,GAAGM,SAAS,CAAE,CAAA;AACpF;;AAEA;AACA,SAASC,iBAAiBA,CAACC,IAAqB,EAAE;EAChD,OACE;AACE,IAAA,EAAE,EAAE,KAAK;AACT,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,EAAE,EAAE,GAAG;AACP,IAAA,GAAG,EAAE;GACN,CACDA,IAAI,CAAC;AACT;;AAEA;AACA,SAASC,iBAAiBA,CAACD,IAAqB,EAAE;EAChD,OACE;AACE,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,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,GAAG,EAAE;GACN,CACDA,IAAI,CAAC;AACT;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaE,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;AACEL,EAAAA,GAAG,GAAG,CAAC;AACPG,EAAAA,IAAI,GAAG,IAAI;AACXI,EAAAA,OAAO,GAAGX,4BAA4B;AACtCY,EAAAA,YAAY,GAAG,MAAM;SACrBC,OAAK;EACLC,SAAS;EACTC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMC,oBAAoB,GAAGC,2BAAyB,EAAE;EACxD,MAAMC,eAAe,GAAGC,gBAAK,CAACC,QAAQ,CAACnB,KAAK,CAACY,QAAQ,CAAC;AAEtD,EAAA,MAAMQ,mBAAmB,GAAGC,iBAAW,CACpCC,MAA4C,IAAK;AAAA,IAAA,IAAAC,WAAA;IAChD,MAAMC,GAAG,GAAAD,CAAAA,WAAA,GACPD,MAAM,CAACE,GAAG,MAAA,IAAA,IAAAD,WAAA,KAAA,KAAA,CAAA,GAAAA,WAAA,GAAI,GAAGD,MAAM,CAACG,KAAK,CAACC,IAAI,CAAA,CAAA,EAAIJ,MAAM,CAACG,KAAK,CAACE,SAAS,CAAE,CAAA;AAChE,IAAA,MAAMC,gBAAgB,GAAG3B,GAAG,GAAG,CAAC,IAAIgB,eAAe,GAAG,CAAC,IAAIT,OAAO,GAAG,CAAC;IACtE,MAAMqB,UAAU,GAAGP,MAAM,CAACG,KAAK,CAACI,UAAU,IAAID,gBAAgB;AAC9D,IAAA,oBAAOV,gBAAK,CAACY,YAAY,CAACR,MAAM,EAAE;MAAEE,GAAG;AAAEK,MAAAA;AAAW,KAAC,CAAC;GACvD,EACD,CAACZ,eAAe,EAAEhB,GAAG,EAAEO,OAAO,CAChC,CAAC;AAED,EAAA,MAAMuB,mBAAmB,GAAGC,aAAO,CAAC,MAAM;IACxC,OAAOd,gBAAK,CAACC,QAAQ,CAACc,OAAO,CAACrB,QAAQ,CAAC,CACpCsB,KAAK,CAAC,CAAC,EAAEjC,GAAG,CAAC,CACbkC,GAAG,CAAC,CAACb,MAAM,EAAEc,OAAK,EAAEC,GAAG,KAAK;AAC3B,MAAA,IAAI,eAACnB,gBAAK,CAACoB,cAAc,CAAmBhB,MAAM,CAAC,EAAE;AACnD,QAAA,OAAO,IAAI;AACb;AAEA,MAAA,MAAMiB,aAAa,GAAGnB,mBAAmB,CAACE,MAAM,CAAC;MAEjD,IAAI,CAACkB,iBAAW,CAACH,GAAG,EAAED,OAAK,CAAC,IAAInB,eAAe,IAAIhB,GAAG,EAAE;AACtD,QAAA,OAAOsC,aAAa;AACtB;MAEA,IAAI9B,YAAY,KAAK,MAAM,EAAE;AAC3B,QAAA,oBACEgC,eAAA,CAAA,KAAA,EAAA;UAEE9B,SAAS,EAAE+B,0BAAM,CAACC,yBAA0B;AAC5C,UAAA,aAAA,EAAa7C,kCAAmC;UAAAc,QAAA,EAAA,cAEhDgC,cAAA,CAACC,iCAAgB,EAAA;AACfC,YAAAA,YAAY,EAAE/B,oBAAqB;AACnCgC,YAAAA,eAAe,EAAC,2BAA2B;YAC3CpC,SAAS,EAAE+B,0BAAM,CAACM,kBAAmB;YAAApC,QAAA,eAErCgC,cAAA,CAACK,SAAI,EAAA;AACHC,cAAAA,MAAM,EAAEC,oBAAS;AACjB/C,cAAAA,IAAI,EAAED,iBAAiB,CAACC,IAAI,CAAE;AAC9BgD,cAAAA,KAAK,EAAC;aACP;WACe,CAAC,EAClBb,aAAa;AAAA,SAAA,EAfV,UAgBD,CAAC;AAEV;MAEA,IAAI9B,YAAY,KAAK,OAAO,EAAE;AAC5B,QAAA,oBACEgC,eAAA,CAACvB,gBAAK,CAACmC,QAAQ,EAAA;UAAAzC,QAAA,EAAA,CACZ2B,aAAa,eACdK,cAAA,CAAA,KAAA,EAAA;AACElC,YAAAA,KAAK,EACH;cACE,8BAA8B,EAAE4C,QAAE,CAChCC,IAAI,CAACtD,GAAG,CAACO,OAAO,EAAEX,4BAA4B,CAChD;aAEH;AACDc,YAAAA,SAAS,EAAE6C,aAAU,CAACd,0BAAM,CAACe,0BAA0B,CAAE;YAAA7C,QAAA,eAEzDgC,cAAA,CAACc,SAAI,EAAA;AACHC,cAAAA,IAAI,EAAEtD,iBAAiB,CAACD,IAAI,CAAE;AAC9BgD,cAAAA,KAAK,EAAC,sBAAsB;cAC5BzC,SAAS,EAAE+B,0BAAM,CAACkB,mBAAoB;AAAAhD,cAAAA,QAAA,EAErCb,0BAA0B,CAACkB,eAAe,EAAEhB,GAAG;aAC5C;AAAC,WACJ,CAAC;AAAA,SAAA,EAnBY,UAoBJ,CAAC;AAErB;AAEA,MAAA,OAAO,IAAI;AACb,KAAC,CAAC;AACN,GAAC,EAAE,CACDgB,eAAe,EACfhB,GAAG,EACHW,QAAQ,EACRQ,mBAAmB,EACnBX,YAAY,EACZM,oBAAoB,EACpBX,IAAI,EACJI,OAAO,CACR,CAAC;EAEF,oBACEoC,cAAA,CAACiB,uCAAqB,EAAA;IACpBC,KAAK,EAAE9B,aAAO,CACZ,OAAO;AACL5B,MAAAA;AACF,KAAC,CAAC,EACF,CAACA,IAAI,CACP,CAAE;AAAAQ,IAAAA,QAAA,eAEFgC,cAAA,CAAA,KAAA,EAAA;AACEmB,MAAAA,IAAI,EAAC,OAAO;AACZC,MAAAA,GAAG,EAAElD,YAAa;AAClBH,MAAAA,SAAS,EAAE6C,aAAU,CACnBd,0BAAM,CAACpC,WAAW,EAClBoC,0BAAM,CAAC,QAAQtC,IAAI,CAAA,CAAE,CAAC,EACtBO,SACF,CAAE;AACFD,MAAAA,KAAK,EACH;AACE,QAAA,0BAA0B,EAAE4C,QAAE,CAAC9C,OAAO,CAAC;QACvC,GAAGE;OAEN;AAAA,MAAA,GACGG,IAAI;AAAAD,MAAAA,QAAA,EAEPmB;KACE;AAAC,GACe,CAAC;AAE5B,CACF;;;;;"}

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

@@ -16,12 +16,12 @@ 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),

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 BetaSemanticColor } 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: BetaSemanticColor = online\n      ? 'text-accent-green'\n      : doNotDisturb\n        ? 'text-accent-yellow'\n        : 'fill-neutral-heavy'\n    const backgroundColor: BetaSemanticColor = 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,SAA4B,GAAGN,MAAM,GACvC,mBAAmB,GACnBC,YAAY,GACV,oBAAoB,GACpB,oBAAoB;AAC1B,EAAA,MAAMM,eAAkC,GAAGN,YAAY,GACnD,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,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;;;;"}

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

@@ -7,6 +7,7 @@ var WindowProvider = require('../WindowProvider/WindowProvider.js');
 var FeatureProvider = require('../FeatureProvider/FeatureProvider.js');
 var TokenProvider = require('../TokenProvider/TokenProvider.js');
 var TokenProvider$1 = require('../AlphaTokenProvider/TokenProvider.js');
+var TokenProvider$2 = require('../BetaTokenProvider/TokenProvider.js');
 
 const defaultWindow = ssrWindow_esm.getWindow();
 
@@ -51,7 +52,10 @@ function AppProvider({
         themeName: themeName,
         children: /*#__PURE__*/jsxRuntime.jsx(TokenProvider$1.TokenProvider, {
           themeName: themeName,
-          children: children
+          children: /*#__PURE__*/jsxRuntime.jsx(TokenProvider$2.TokenProvider, {
+            themeName: themeName,
+            children: children
+          })
         })
       })
     })

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

@@ -1 +1 @@
-{"version":3,"file":"AppProvider.js","sources":["../../../../src/components/AppProvider/AppProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport { getWindow } from 'ssr-window'\n\nimport { AlphaTokenProvider } from '~/src/components/AlphaTokenProvider'\nimport { FeatureProvider } from '~/src/components/FeatureProvider'\nimport { TokenProvider } from '~/src/components/TokenProvider'\nimport { WindowProvider } from '~/src/components/WindowProvider'\n\nimport { type AppProviderProps } from './AppProvider.types'\n\nconst defaultWindow = getWindow()\n\n/**\n * `AppProvider` is a required wrapper component that provides context for the app.\n * @example\n *\n * ```tsx\n * import React from 'react'\n * import { createRoot } from 'react-dom/client'\n * import { AppProvider } from '@channel.io/bezier-react'\n *\n * const container = document.getElementById('root')\n * const root = createRoot(container)\n *\n * root.render(\n *   <AppProvider themeName=\"light\">\n *     <App />\n *   </AppProvider>,\n * )\n * ```\n */\nexport function AppProvider({\n  children,\n  themeName = 'light',\n  features = [],\n  window = defaultWindow,\n}: AppProviderProps) {\n  useEffect(\n    function updateRootThemeDataAttribute() {\n      const rootElement = window.document.documentElement\n      // TODO: Change data attribute constant to import from bezier-tokens\n      rootElement.setAttribute('data-bezier-theme', themeName)\n      return function cleanup() {\n        rootElement.removeAttribute('data-bezier-theme')\n      }\n    },\n    [window, themeName]\n  )\n\n  return (\n    <WindowProvider window={window}>\n      <FeatureProvider features={features}>\n        <TokenProvider themeName={themeName}>\n          <AlphaTokenProvider themeName={themeName}>\n            {children}\n          </AlphaTokenProvider>\n        </TokenProvider>\n      </FeatureProvider>\n    </WindowProvider>\n  )\n}\n"],"names":["defaultWindow","getWindow","AppProvider","children","themeName","features","window","useEffect","updateRootThemeDataAttribute","rootElement","document","documentElement","setAttribute","cleanup","removeAttribute","_jsx","WindowProvider","FeatureProvider","TokenProvider","AlphaTokenProvider"],"mappings":";;;;;;;;;;AAaA,MAAMA,aAAa,GAAGC,uBAAS,EAAE;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAAC;EAC1BC,QAAQ;AACRC,EAAAA,SAAS,GAAG,OAAO;AACnBC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,MAAM,GAAGN;AACO,CAAC,EAAE;AACnBO,EAAAA,eAAS,CACP,SAASC,4BAA4BA,GAAG;AACtC,IAAA,MAAMC,WAAW,GAAGH,MAAM,CAACI,QAAQ,CAACC,eAAe;AACnD;AACAF,IAAAA,WAAW,CAACG,YAAY,CAAC,mBAAmB,EAAER,SAAS,CAAC;IACxD,OAAO,SAASS,OAAOA,GAAG;AACxBJ,MAAAA,WAAW,CAACK,eAAe,CAAC,mBAAmB,CAAC;KACjD;AACH,GAAC,EACD,CAACR,MAAM,EAAEF,SAAS,CACpB,CAAC;EAED,oBACEW,cAAA,CAACC,6BAAc,EAAA;AAACV,IAAAA,MAAM,EAAEA,MAAO;IAAAH,QAAA,eAC7BY,cAAA,CAACE,+BAAe,EAAA;AAACZ,MAAAA,QAAQ,EAAEA,QAAS;MAAAF,QAAA,eAClCY,cAAA,CAACG,2BAAa,EAAA;AAACd,QAAAA,SAAS,EAAEA,SAAU;QAAAD,QAAA,eAClCY,cAAA,CAACI,6BAAkB,EAAA;AAACf,UAAAA,SAAS,EAAEA,SAAU;AAAAD,UAAAA,QAAA,EACtCA;SACiB;OACP;KACA;AAAC,GACJ,CAAC;AAErB;;;;"}
+{"version":3,"file":"AppProvider.js","sources":["../../../../src/components/AppProvider/AppProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport { getWindow } from 'ssr-window'\n\nimport { AlphaTokenProvider } from '~/src/components/AlphaTokenProvider'\nimport { BetaTokenProvider } from '~/src/components/BetaTokenProvider'\nimport { FeatureProvider } from '~/src/components/FeatureProvider'\nimport { TokenProvider } from '~/src/components/TokenProvider'\nimport { WindowProvider } from '~/src/components/WindowProvider'\n\nimport { type AppProviderProps } from './AppProvider.types'\n\nconst defaultWindow = getWindow()\n\n/**\n * `AppProvider` is a required wrapper component that provides context for the app.\n * @example\n *\n * ```tsx\n * import React from 'react'\n * import { createRoot } from 'react-dom/client'\n * import { AppProvider } from '@channel.io/bezier-react'\n *\n * const container = document.getElementById('root')\n * const root = createRoot(container)\n *\n * root.render(\n *   <AppProvider themeName=\"light\">\n *     <App />\n *   </AppProvider>,\n * )\n * ```\n */\nexport function AppProvider({\n  children,\n  themeName = 'light',\n  features = [],\n  window = defaultWindow,\n}: AppProviderProps) {\n  useEffect(\n    function updateRootThemeDataAttribute() {\n      const rootElement = window.document.documentElement\n      // TODO: Change data attribute constant to import from bezier-tokens\n      rootElement.setAttribute('data-bezier-theme', themeName)\n      return function cleanup() {\n        rootElement.removeAttribute('data-bezier-theme')\n      }\n    },\n    [window, themeName]\n  )\n\n  return (\n    <WindowProvider window={window}>\n      <FeatureProvider features={features}>\n        <TokenProvider themeName={themeName}>\n          <AlphaTokenProvider themeName={themeName}>\n            <BetaTokenProvider themeName={themeName}>\n              {children}\n            </BetaTokenProvider>\n          </AlphaTokenProvider>\n        </TokenProvider>\n      </FeatureProvider>\n    </WindowProvider>\n  )\n}\n"],"names":["defaultWindow","getWindow","AppProvider","children","themeName","features","window","useEffect","updateRootThemeDataAttribute","rootElement","document","documentElement","setAttribute","cleanup","removeAttribute","_jsx","WindowProvider","FeatureProvider","TokenProvider","AlphaTokenProvider","BetaTokenProvider"],"mappings":";;;;;;;;;;;AAcA,MAAMA,aAAa,GAAGC,uBAAS,EAAE;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAAC;EAC1BC,QAAQ;AACRC,EAAAA,SAAS,GAAG,OAAO;AACnBC,EAAAA,QAAQ,GAAG,EAAE;AACbC,EAAAA,MAAM,GAAGN;AACO,CAAC,EAAE;AACnBO,EAAAA,eAAS,CACP,SAASC,4BAA4BA,GAAG;AACtC,IAAA,MAAMC,WAAW,GAAGH,MAAM,CAACI,QAAQ,CAACC,eAAe;AACnD;AACAF,IAAAA,WAAW,CAACG,YAAY,CAAC,mBAAmB,EAAER,SAAS,CAAC;IACxD,OAAO,SAASS,OAAOA,GAAG;AACxBJ,MAAAA,WAAW,CAACK,eAAe,CAAC,mBAAmB,CAAC;KACjD;AACH,GAAC,EACD,CAACR,MAAM,EAAEF,SAAS,CACpB,CAAC;EAED,oBACEW,cAAA,CAACC,6BAAc,EAAA;AAACV,IAAAA,MAAM,EAAEA,MAAO;IAAAH,QAAA,eAC7BY,cAAA,CAACE,+BAAe,EAAA;AAACZ,MAAAA,QAAQ,EAAEA,QAAS;MAAAF,QAAA,eAClCY,cAAA,CAACG,2BAAa,EAAA;AAACd,QAAAA,SAAS,EAAEA,SAAU;QAAAD,QAAA,eAClCY,cAAA,CAACI,6BAAkB,EAAA;AAACf,UAAAA,SAAS,EAAEA,SAAU;UAAAD,QAAA,eACvCY,cAAA,CAACK,6BAAiB,EAAA;AAAChB,YAAAA,SAAS,EAAEA,SAAU;AAAAD,YAAAA,QAAA,EACrCA;WACgB;SACD;OACP;KACA;AAAC,GACJ,CAAC;AAErB;;;;"}

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

@@ -7,16 +7,15 @@ var defaultAvatar = require('./assets/default-avatar.svg.js');
 var useProgressiveImage = require('./useProgressiveImage.js');
 var Avatar_module = require('./Avatar.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
-var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Status = require('../Status/Status.js');
 
 const shadow = {
   spreadRadius: 2,
-  color: 'bg-white-high'
+  color: 'surface-high'
 };
 function useAvatarRadiusToken() {
-  return ThemeProvider.useTokens().global.radius['radius-42-p'];
+  return '42%';
 }
 const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper';
 const AVATAR_TEST_ID = 'bezier-avatar';
@@ -94,7 +93,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
       disabled: !smoothCorners,
       borderRadius: AVATAR_BORDER_RADIUS,
       shadow: showBorder ? shadow : undefined,
-      backgroundColor: "bg-white-normal",
+      backgroundColor: "surface",
       backgroundImage: loadedAvatarUrl,
       "data-testid": AVATAR_TEST_ID,
       children: StatusComponent

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

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

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

@@ -7,10 +7,10 @@ var array = require('../../utils/array.js');
 var style = require('../../utils/style.js');
 var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Avatar = require('../Avatar/Avatar.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
+var Avatar = require('../Avatar/Avatar.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -132,12 +132,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");
@@ -153,7 +153,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
             onMouseLeave: onMouseLeaveEllipsis,
             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)
             })

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

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

package/dist/cjs/components/BetaTokenProvider/TokenProvider.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../packages/bezier-tokens/dist/beta/esm/index.js');
+var react = require('../../utils/react.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const [TokenContextProvider, useTokenContext] = react.createContext(null, 'BetaTokenProvider');
+const tokenSet = Object.freeze({
+  light: {
+    global: index.tokens.global,
+    semantic: index.tokens.lightTheme
+  },
+  dark: {
+    global: index.tokens.global,
+    semantic: index.tokens.darkTheme
+  }
+});
+
+/**
+ * @private
+ */
+function TokenProvider({
+  themeName,
+  children
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(TokenContextProvider, {
+    value: React.useMemo(() => ({
+      themeName,
+      tokens: tokenSet[themeName]
+    }), [themeName]),
+    children: children
+  });
+}
+
+exports.TokenProvider = TokenProvider;
+exports.useBetaTokenContext = useTokenContext;
+//# sourceMappingURL=TokenProvider.js.map

package/dist/cjs/components/BetaTokenProvider/TokenProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenProvider.js","sources":["../../../../src/components/BetaTokenProvider/TokenProvider.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo } from 'react'\n\nimport { tokens } from '@channel.io/bezier-tokens/beta'\n\nimport { type BetaThemeName } from '~/src/types/beta-tokens'\nimport { createContext } from '~/src/utils/react'\n\nimport {\n  type ThemeSpecificTokens,\n  type TokenContextValue,\n  type TokenProviderProps,\n} from './TokenProvider.types'\n\nconst [TokenContextProvider, useTokenContext] =\n  createContext<TokenContextValue | null>(null, 'BetaTokenProvider')\n\nexport { useTokenContext as useBetaTokenContext }\n\nconst tokenSet: Record<BetaThemeName, ThemeSpecificTokens> = Object.freeze({\n  light: {\n    global: tokens.global,\n    semantic: tokens.lightTheme,\n  },\n  dark: {\n    global: tokens.global,\n    semantic: tokens.darkTheme,\n  },\n})\n\n/**\n * @private\n */\nexport function TokenProvider({ themeName, children }: TokenProviderProps) {\n  return (\n    <TokenContextProvider\n      value={useMemo(\n        () => ({\n          themeName,\n          tokens: tokenSet[themeName],\n        }),\n        [themeName]\n      )}\n    >\n      {children}\n    </TokenContextProvider>\n  )\n}\n\n"],"names":["TokenContextProvider","useTokenContext","createContext","tokenSet","Object","freeze","light","global","tokens","semantic","lightTheme","dark","darkTheme","TokenProvider","themeName","children","_jsx","value","useMemo"],"mappings":";;;;;;;AAeM,MAAA,CAACA,oBAAoB,EAAEC,eAAe,CAAC,GAC3CC,mBAAa,CAA2B,IAAI,EAAE,mBAAmB;AAInE,MAAMC,QAAoD,GAAGC,MAAM,CAACC,MAAM,CAAC;AACzEC,EAAAA,KAAK,EAAE;IACLC,MAAM,EAAEC,YAAM,CAACD,MAAM;IACrBE,QAAQ,EAAED,YAAM,CAACE;GAClB;AACDC,EAAAA,IAAI,EAAE;IACJJ,MAAM,EAAEC,YAAM,CAACD,MAAM;IACrBE,QAAQ,EAAED,YAAM,CAACI;AACnB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACO,SAASC,aAAaA,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAA6B,CAAC,EAAE;EACzE,oBACEC,cAAA,CAAChB,oBAAoB,EAAA;IACnBiB,KAAK,EAAEC,aAAO,CACZ,OAAO;MACLJ,SAAS;MACTN,MAAM,EAAEL,QAAQ,CAACW,SAAS;AAC5B,KAAC,CAAC,EACF,CAACA,SAAS,CACZ,CAAE;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACW,CAAC;AAE3B;;;;;"}

package/dist/cjs/components/Box/Box.js

@@ -15,7 +15,7 @@ var Box_module = require('./Box.module.scss.js');
  *   height="100px"
  *   p="6px"
  *   m="6px"
- *   bgColor="bg-black-light"
+ *   bgColor="fill-neutral-light"
  * >
  *   <div>{ ... }</div>
  * </Box>

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n  getLayoutStyles,\n  getMarginStyles,\n  splitByLayoutProps,\n  splitByMarginProps,\n} from '~/src/types/props-helpers'\n\nimport { type BoxProps } from './Box.types'\n\nimport styles from './Box.module.scss'\n\n/**\n * `Box` is a primitive layout component. It provides an easy way to access design tokens.\n * @example\n *\n * ```tsx\n * <Box\n *   width=\"100px\"\n *   height=\"100px\"\n *   p=\"6px\"\n *   m=\"6px\"\n *   bgColor=\"bg-black-light\"\n * >\n *   <div>{ ... }</div>\n * </Box>\n * ```\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n  function Box(props, forwardedRef) {\n    const [marginProps, marginRest] = splitByMarginProps(props)\n    const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)\n    const marginStyles = getMarginStyles(marginProps)\n    const layoutStyles = getLayoutStyles(layoutProps)\n\n    const {\n      children,\n      style,\n      className,\n      as = 'div',\n      display,\n      ...rest\n    } = layoutRest\n\n    /**\n     * NOTE: Using the createElement function directly because of a ref type related error.\n     * TODO: Fix type error.\n     */\n    return createElement(\n      as,\n      {\n        ref: forwardedRef,\n        style: {\n          ...marginStyles.style,\n          ...layoutStyles.style,\n          ...style,\n        },\n        className: classNames(\n          styles.Box,\n          display && styles[`display-${display}`],\n          marginStyles.className,\n          layoutStyles.className,\n          className\n        ),\n        'data-testid': 'bezier-box',\n        ...rest,\n      },\n      children\n    )\n  }\n)\n"],"names":["Box","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","layoutProps","layoutRest","splitByLayoutProps","marginStyles","getMarginStyles","layoutStyles","getLayoutStyles","children","style","className","as","display","rest","createElement","ref","classNames","styles"],"mappings":";;;;;;;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,gBAAGC,gBAAU,CAC3B,SAASD,GAAGA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAChC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;EAC3D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,UAAU,CAAC;AAChE,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACP,WAAW,CAAC;AACjD,EAAA,MAAMQ,YAAY,GAAGC,4BAAe,CAACN,WAAW,CAAC;EAEjD,MAAM;IACJO,QAAQ;IACRC,KAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;IACVC,OAAO;IACP,GAAGC;AACL,GAAC,GAAGX,UAAU;;AAEd;AACJ;AACA;AACA;EACI,oBAAOY,mBAAa,CAClBH,EAAE,EACF;AACEI,IAAAA,GAAG,EAAElB,YAAY;AACjBY,IAAAA,KAAK,EAAE;MACL,GAAGL,YAAY,CAACK,KAAK;MACrB,GAAGH,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;IACDC,SAAS,EAAEM,aAAU,CACnBC,kBAAM,CAACvB,GAAG,EACVkB,OAAO,IAAIK,kBAAM,CAAC,CAAA,QAAA,EAAWL,OAAO,CAAE,CAAA,CAAC,EACvCR,YAAY,CAACM,SAAS,EACtBJ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,YAAY;IAC3B,GAAGG;GACJ,EACDL,QACF,CAAC;AACH,CACF;;;;"}
+{"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n  getLayoutStyles,\n  getMarginStyles,\n  splitByLayoutProps,\n  splitByMarginProps,\n} from '~/src/types/props-helpers'\n\nimport { type BoxProps } from './Box.types'\n\nimport styles from './Box.module.scss'\n\n/**\n * `Box` is a primitive layout component. It provides an easy way to access design tokens.\n * @example\n *\n * ```tsx\n * <Box\n *   width=\"100px\"\n *   height=\"100px\"\n *   p=\"6px\"\n *   m=\"6px\"\n *   bgColor=\"fill-neutral-light\"\n * >\n *   <div>{ ... }</div>\n * </Box>\n * ```\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n  function Box(props, forwardedRef) {\n    const [marginProps, marginRest] = splitByMarginProps(props)\n    const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)\n    const marginStyles = getMarginStyles(marginProps)\n    const layoutStyles = getLayoutStyles(layoutProps)\n\n    const {\n      children,\n      style,\n      className,\n      as = 'div',\n      display,\n      ...rest\n    } = layoutRest\n\n    /**\n     * NOTE: Using the createElement function directly because of a ref type related error.\n     * TODO: Fix type error.\n     */\n    return createElement(\n      as,\n      {\n        ref: forwardedRef,\n        style: {\n          ...marginStyles.style,\n          ...layoutStyles.style,\n          ...style,\n        },\n        className: classNames(\n          styles.Box,\n          display && styles[`display-${display}`],\n          marginStyles.className,\n          layoutStyles.className,\n          className\n        ),\n        'data-testid': 'bezier-box',\n        ...rest,\n      },\n      children\n    )\n  }\n)\n"],"names":["Box","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","layoutProps","layoutRest","splitByLayoutProps","marginStyles","getMarginStyles","layoutStyles","getLayoutStyles","children","style","className","as","display","rest","createElement","ref","classNames","styles"],"mappings":";;;;;;;AAiBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,gBAAGC,gBAAU,CAC3B,SAASD,GAAGA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAChC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;EAC3D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,UAAU,CAAC;AAChE,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACP,WAAW,CAAC;AACjD,EAAA,MAAMQ,YAAY,GAAGC,4BAAe,CAACN,WAAW,CAAC;EAEjD,MAAM;IACJO,QAAQ;IACRC,KAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;IACVC,OAAO;IACP,GAAGC;AACL,GAAC,GAAGX,UAAU;;AAEd;AACJ;AACA;AACA;EACI,oBAAOY,mBAAa,CAClBH,EAAE,EACF;AACEI,IAAAA,GAAG,EAAElB,YAAY;AACjBY,IAAAA,KAAK,EAAE;MACL,GAAGL,YAAY,CAACK,KAAK;MACrB,GAAGH,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;IACDC,SAAS,EAAEM,aAAU,CACnBC,kBAAM,CAACvB,GAAG,EACVkB,OAAO,IAAIK,kBAAM,CAAC,CAAA,QAAA,EAAWL,OAAO,CAAE,CAAA,CAAC,EACvCR,YAAY,CAACM,SAAS,EACtBJ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,YAAY;IAC3B,GAAGG;GACJ,EACDL,QACF,CAAC;AACH,CACF;;;;"}

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

@@ -41,7 +41,7 @@ const CheckableAvatar = /*#__PURE__*/React.forwardRef(function CheckableAvatar({
         children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
           className: index$1.default(CheckableAvatar_module.default.CheckIcon, CheckableAvatar_module.default[`size-${size}`]),
           source: bezierIcons.CheckIcon,
-          color: "bgtxt-absolute-white-normal"
+          color: "text-absolute-white"
         })
       }), /*#__PURE__*/jsxRuntime.jsx(Avatar.Avatar, {
         className: CheckableAvatar_module.default.Avatar,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckableAvatar.js","sources":["../../../../src/components/CheckableAvatar/CheckableAvatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { CheckIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\n\nimport { Avatar } from '~/src/components/Avatar'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport type { CheckableAvatarProps } from './CheckableAvatar.types'\n\nimport styles from './CheckableAvatar.module.scss'\n\n/**\n * `CheckableAvatar` is a checkbox component that looks like `Avatar`.\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   defaultChecked\n * />\n * ```\n */\nexport const CheckableAvatar = forwardRef<\n  HTMLButtonElement,\n  CheckableAvatarProps\n>(function CheckableAvatar(\n  {\n    children,\n    className,\n    id: idProp,\n    name,\n    size = '24',\n    disabled,\n    avatarUrl,\n    fallbackUrl,\n    status,\n    showBorder,\n    ...props\n  },\n  forwardedRef\n) {\n  const id = useId(idProp, 'bezier-checkable-avatar')\n\n  return (\n    <CheckboxPrimitive.Root\n      asChild\n      className={classNames(styles.Checkbox, className)}\n      ref={forwardedRef}\n      id={id}\n      name={name}\n      disabled={disabled}\n      {...props}\n    >\n      <BaseButton>\n        <CheckboxPrimitive.Indicator\n          asChild\n          forceMount\n        >\n          <Icon\n            className={classNames(styles.CheckIcon, styles[`size-${size}`])}\n            source={CheckIcon}\n            color=\"bgtxt-absolute-white-normal\"\n          />\n        </CheckboxPrimitive.Indicator>\n\n        <Avatar\n          className={styles.Avatar}\n          aria-hidden\n          size={size}\n          name={name}\n          disabled={disabled}\n          avatarUrl={avatarUrl}\n          fallbackUrl={fallbackUrl}\n          status={status}\n          showBorder={showBorder}\n        >\n          {children}\n        </Avatar>\n\n        <VisuallyHidden>\n          <label htmlFor={id}>{name}</label>\n        </VisuallyHidden>\n      </BaseButton>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckableAvatar","forwardRef","children","className","id","idProp","name","size","disabled","avatarUrl","fallbackUrl","status","showBorder","props","forwardedRef","useId","_jsx","CheckboxPrimitive","asChild","classNames","styles","Checkbox","ref","_jsxs","BaseButton","forceMount","Icon","CheckIcon","source","color","Avatar","VisuallyHidden","htmlFor"],"mappings":";;;;;;;;;;;;;;MAwCaA,eAAe,gBAAGC,gBAAU,CAGvC,SAASD,eAAeA,CACxB;EACEE,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAE,EAAEC,MAAM;EACVC,IAAI;AACJC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,MAAM;EACNC,UAAU;EACV,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMV,EAAE,GAAGW,aAAK,CAACV,MAAM,EAAE,yBAAyB,CAAC;AAEnD,EAAA,oBACEW,cAAA,CAACC,UAAsB,EAAA;IACrBC,OAAO,EAAA,IAAA;IACPf,SAAS,EAAEgB,eAAU,CAACC,8BAAM,CAACC,QAAQ,EAAElB,SAAS,CAAE;AAClDmB,IAAAA,GAAG,EAAER,YAAa;AAClBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,IAAI,EAAEA,IAAK;AACXE,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfK,KAAK;IAAAX,QAAA,eAETqB,eAAA,CAACC,qBAAU,EAAA;AAAAtB,MAAAA,QAAA,EACTc,cAAAA,cAAA,CAACC,eAA2B,EAAA;QAC1BC,OAAO,EAAA,IAAA;QACPO,UAAU,EAAA,IAAA;QAAAvB,QAAA,eAEVc,cAAA,CAACU,SAAI,EAAA;AACHvB,UAAAA,SAAS,EAAEgB,eAAU,CAACC,8BAAM,CAACO,SAAS,EAAEP,8BAAM,CAAC,CAAA,KAAA,EAAQb,IAAI,CAAA,CAAE,CAAC,CAAE;AAChEqB,UAAAA,MAAM,EAAED,qBAAU;AAClBE,UAAAA,KAAK,EAAC;SACP;AAAC,OACyB,CAAC,eAE9Bb,cAAA,CAACc,aAAM,EAAA;QACL3B,SAAS,EAAEiB,8BAAM,CAACU,MAAO;QACzB,aAAW,EAAA,IAAA;AACXvB,QAAAA,IAAI,EAAEA,IAAK;AACXD,QAAAA,IAAI,EAAEA,IAAK;AACXE,QAAAA,QAAQ,EAAEA,QAAS;AACnBC,QAAAA,SAAS,EAAEA,SAAU;AACrBC,QAAAA,WAAW,EAAEA,WAAY;AACzBC,QAAAA,MAAM,EAAEA,MAAO;AACfC,QAAAA,UAAU,EAAEA,UAAW;AAAAV,QAAAA,QAAA,EAEtBA;AAAQ,OACH,CAAC,eAETc,cAAA,CAACe,6BAAc,EAAA;AAAA7B,QAAAA,QAAA,eACbc,cAAA,CAAA,OAAA,EAAA;AAAOgB,UAAAA,OAAO,EAAE5B,EAAG;AAAAF,UAAAA,QAAA,EAAEI;SAAY;AAAC,OACpB,CAAC;KACP;AAAC,GACS,CAAC;AAE7B,CAAC;;;;"}
+{"version":3,"file":"CheckableAvatar.js","sources":["../../../../src/components/CheckableAvatar/CheckableAvatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { CheckIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\n\nimport { Avatar } from '~/src/components/Avatar'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport type { CheckableAvatarProps } from './CheckableAvatar.types'\n\nimport styles from './CheckableAvatar.module.scss'\n\n/**\n * `CheckableAvatar` is a checkbox component that looks like `Avatar`.\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   defaultChecked\n * />\n * ```\n */\nexport const CheckableAvatar = forwardRef<\n  HTMLButtonElement,\n  CheckableAvatarProps\n>(function CheckableAvatar(\n  {\n    children,\n    className,\n    id: idProp,\n    name,\n    size = '24',\n    disabled,\n    avatarUrl,\n    fallbackUrl,\n    status,\n    showBorder,\n    ...props\n  },\n  forwardedRef\n) {\n  const id = useId(idProp, 'bezier-checkable-avatar')\n\n  return (\n    <CheckboxPrimitive.Root\n      asChild\n      className={classNames(styles.Checkbox, className)}\n      ref={forwardedRef}\n      id={id}\n      name={name}\n      disabled={disabled}\n      {...props}\n    >\n      <BaseButton>\n        <CheckboxPrimitive.Indicator\n          asChild\n          forceMount\n        >\n          <Icon\n            className={classNames(styles.CheckIcon, styles[`size-${size}`])}\n            source={CheckIcon}\n            color=\"text-absolute-white\"\n          />\n        </CheckboxPrimitive.Indicator>\n\n        <Avatar\n          className={styles.Avatar}\n          aria-hidden\n          size={size}\n          name={name}\n          disabled={disabled}\n          avatarUrl={avatarUrl}\n          fallbackUrl={fallbackUrl}\n          status={status}\n          showBorder={showBorder}\n        >\n          {children}\n        </Avatar>\n\n        <VisuallyHidden>\n          <label htmlFor={id}>{name}</label>\n        </VisuallyHidden>\n      </BaseButton>\n    </CheckboxPrimitive.Root>\n  )\n})\n"],"names":["CheckableAvatar","forwardRef","children","className","id","idProp","name","size","disabled","avatarUrl","fallbackUrl","status","showBorder","props","forwardedRef","useId","_jsx","CheckboxPrimitive","asChild","classNames","styles","Checkbox","ref","_jsxs","BaseButton","forceMount","Icon","CheckIcon","source","color","Avatar","VisuallyHidden","htmlFor"],"mappings":";;;;;;;;;;;;;;MAwCaA,eAAe,gBAAGC,gBAAU,CAGvC,SAASD,eAAeA,CACxB;EACEE,QAAQ;EACRC,SAAS;AACTC,EAAAA,EAAE,EAAEC,MAAM;EACVC,IAAI;AACJC,EAAAA,IAAI,GAAG,IAAI;EACXC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,MAAM;EACNC,UAAU;EACV,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMV,EAAE,GAAGW,aAAK,CAACV,MAAM,EAAE,yBAAyB,CAAC;AAEnD,EAAA,oBACEW,cAAA,CAACC,UAAsB,EAAA;IACrBC,OAAO,EAAA,IAAA;IACPf,SAAS,EAAEgB,eAAU,CAACC,8BAAM,CAACC,QAAQ,EAAElB,SAAS,CAAE;AAClDmB,IAAAA,GAAG,EAAER,YAAa;AAClBV,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,IAAI,EAAEA,IAAK;AACXE,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfK,KAAK;IAAAX,QAAA,eAETqB,eAAA,CAACC,qBAAU,EAAA;AAAAtB,MAAAA,QAAA,EACTc,cAAAA,cAAA,CAACC,eAA2B,EAAA;QAC1BC,OAAO,EAAA,IAAA;QACPO,UAAU,EAAA,IAAA;QAAAvB,QAAA,eAEVc,cAAA,CAACU,SAAI,EAAA;AACHvB,UAAAA,SAAS,EAAEgB,eAAU,CAACC,8BAAM,CAACO,SAAS,EAAEP,8BAAM,CAAC,CAAA,KAAA,EAAQb,IAAI,CAAA,CAAE,CAAC,CAAE;AAChEqB,UAAAA,MAAM,EAAED,qBAAU;AAClBE,UAAAA,KAAK,EAAC;SACP;AAAC,OACyB,CAAC,eAE9Bb,cAAA,CAACc,aAAM,EAAA;QACL3B,SAAS,EAAEiB,8BAAM,CAACU,MAAO;QACzB,aAAW,EAAA,IAAA;AACXvB,QAAAA,IAAI,EAAEA,IAAK;AACXD,QAAAA,IAAI,EAAEA,IAAK;AACXE,QAAAA,QAAQ,EAAEA,QAAS;AACnBC,QAAAA,SAAS,EAAEA,SAAU;AACrBC,QAAAA,WAAW,EAAEA,WAAY;AACzBC,QAAAA,MAAM,EAAEA,MAAO;AACfC,QAAAA,UAAU,EAAEA,UAAW;AAAAV,QAAAA,QAAA,EAEtBA;AAAQ,OACH,CAAC,eAETc,cAAA,CAACe,6BAAc,EAAA;AAAA7B,QAAAA,QAAA,eACbc,cAAA,CAAA,OAAA,EAAA;AAAOgB,UAAAA,OAAO,EAAE5B,EAAG;AAAAF,UAAAA,QAAA,EAAEI;SAAY;AAAC,OACpB,CAAC;KACP;AAAC,GACS,CAAC;AAE7B,CAAC;;;;"}

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -23,7 +23,7 @@ const CheckIcon = /*#__PURE__*/React.forwardRef(function CheckIcon(props, forwar
     className: Checkbox_module.default.CheckIcon,
     ref: forwardedRef,
     source: !isIndeterminate ? bezierIcons.CheckBoldIcon : bezierIcons.HyphenBoldIcon,
-    color: isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark',
+    color: isUnchecked ? 'fill-neutral-heavy' : 'text-absolute-white',
     ...props
   });
 });
@@ -70,7 +70,7 @@ function CheckboxImpl({
       htmlFor: id,
       className: Checkbox_module.default.Label,
       typo: "14",
-      color: "txt-black-darkest",
+      color: "text-neutral",
       children: children
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type CheckboxProps, type CheckedState } from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ninterface CheckIconProps {\n  style: React.CSSProperties\n  'data-state': 'checked' | 'unchecked' | 'indeterminate'\n  'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(\n  function CheckIcon(props, forwardedRef) {\n    // eslint-disable-next-line react/destructuring-assignment\n    const state = props['data-state']\n    const isUnchecked = state === 'unchecked'\n    const isIndeterminate = state === 'indeterminate'\n\n    return (\n      <Icon\n        className={styles.CheckIcon}\n        ref={forwardedRef}\n        source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n        color={isUnchecked ? 'bg-black-dark' : 'bgtxt-absolute-white-dark'}\n        {...props}\n      />\n    )\n  }\n)\n\nfunction CheckboxImpl<Checked extends CheckedState>(\n  { children, className, checked, size = 'm', id: idProp, ...rest }: CheckboxProps<Checked>,\n  forwardedRef: React.Ref<HTMLButtonElement>\n) {\n  const {\n    id: formFieldId,\n    hasError,\n    ...formFieldProps\n  } = useFormFieldProps(rest)\n\n  const id = useId(idProp ?? formFieldId, 'bezier-checkbox')\n  const iconSize = size === 's' ? 'xxs' : 'xs'\n\n  return (\n    <div\n      className={classNames(styles.Container, getFormFieldSizeClassName('m'))}\n    >\n      <CheckboxPrimitive.Root\n        asChild\n        className={classNames(styles.Checkbox, styles[`size-${size}`], className)}\n        ref={forwardedRef}\n        id={id}\n        checked={checked}\n        data-invalid={formFieldProps['aria-invalid']}\n        {...formFieldProps}\n      >\n        <BaseButton>\n          <CheckboxPrimitive.Indicator\n            asChild\n            /* NOTE: To allow the icon to be rendered even if unchecked. */\n            forceMount\n          >\n            {/* @ts-expect-error */}\n            <CheckIcon size={iconSize} />\n          </CheckboxPrimitive.Indicator>\n        </BaseButton>\n      </CheckboxPrimitive.Root>\n      {children && (\n        <Text\n          as=\"label\"\n          // TODO: Apply polymorphic types to `as` prop.\n          // @ts-expect-error\n          htmlFor={id}\n          className={styles.Label}\n          typo=\"14\"\n          color=\"txt-black-darkest\"\n        >\n          {children}\n        </Text>\n      )}\n    </div>\n  )\n}\n\n/* NOTE: This is a workaround to avoid infinite type recursion when directly using `ReturnType` */\ntype ReturnTypeOfCheckboxImpl<Checked extends CheckedState> = ReturnType<\n  typeof CheckboxImpl<Checked>\n>\n\n/**\n * `Checkbox` is a control that allows the user to toggle between checked and not checked.\n * It can be used with labels or standalone.\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled / With label\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * >\n *   Label\n * </Checkbox>\n * // Controlled / Standalone\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <Checkbox\n *   defaultChecked={true}\n * >\n *   Label\n * </Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(CheckboxImpl) as <\n  Checked extends CheckedState,\n>(\n  props: CheckboxProps<Checked> & {\n    ref?: React.ForwardedRef<HTMLButtonElement>\n  }\n) => ReturnTypeOfCheckboxImpl<Checked>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","_jsx","Icon","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","color","CheckboxImpl","children","checked","size","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","iconSize","_jsxs","classNames","Container","getFormFieldSizeClassName","CheckboxPrimitive","asChild","Checkbox","BaseButton","forceMount","Text","as","htmlFor","Label","typo"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport { CheckBoldIcon, HyphenBoldIcon } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport classNames from 'classnames'\n\nimport useId from '~/src/hooks/useId'\nimport { getFormFieldSizeClassName } from '~/src/types/props-helpers'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type CheckboxProps, type CheckedState } from './Checkbox.types'\n\nimport styles from './Checkbox.module.scss'\n\ninterface CheckIconProps {\n  style: React.CSSProperties\n  'data-state': 'checked' | 'unchecked' | 'indeterminate'\n  'data-disabled': boolean | undefined\n}\n\n/* NOTE: Props are injected at runtime by `CheckboxPrimitive.Indicator`. */\nconst CheckIcon = forwardRef<SVGSVGElement, CheckIconProps>(\n  function CheckIcon(props, forwardedRef) {\n    // eslint-disable-next-line react/destructuring-assignment\n    const state = props['data-state']\n    const isUnchecked = state === 'unchecked'\n    const isIndeterminate = state === 'indeterminate'\n\n    return (\n      <Icon\n        className={styles.CheckIcon}\n        ref={forwardedRef}\n        source={!isIndeterminate ? CheckBoldIcon : HyphenBoldIcon}\n        color={isUnchecked ? 'fill-neutral-heavy' : 'text-absolute-white'}\n        {...props}\n      />\n    )\n  }\n)\n\nfunction CheckboxImpl<Checked extends CheckedState>(\n  { children, className, checked, size = 'm', id: idProp, ...rest }: CheckboxProps<Checked>,\n  forwardedRef: React.Ref<HTMLButtonElement>\n) {\n  const {\n    id: formFieldId,\n    hasError,\n    ...formFieldProps\n  } = useFormFieldProps(rest)\n\n  const id = useId(idProp ?? formFieldId, 'bezier-checkbox')\n  const iconSize = size === 's' ? 'xxs' : 'xs'\n\n  return (\n    <div\n      className={classNames(styles.Container, getFormFieldSizeClassName('m'))}\n    >\n      <CheckboxPrimitive.Root\n        asChild\n        className={classNames(styles.Checkbox, styles[`size-${size}`], className)}\n        ref={forwardedRef}\n        id={id}\n        checked={checked}\n        data-invalid={formFieldProps['aria-invalid']}\n        {...formFieldProps}\n      >\n        <BaseButton>\n          <CheckboxPrimitive.Indicator\n            asChild\n            /* NOTE: To allow the icon to be rendered even if unchecked. */\n            forceMount\n          >\n            {/* @ts-expect-error */}\n            <CheckIcon size={iconSize} />\n          </CheckboxPrimitive.Indicator>\n        </BaseButton>\n      </CheckboxPrimitive.Root>\n      {children && (\n        <Text\n          as=\"label\"\n          // TODO: Apply polymorphic types to `as` prop.\n          // @ts-expect-error\n          htmlFor={id}\n          className={styles.Label}\n          typo=\"14\"\n          color=\"text-neutral\"\n        >\n          {children}\n        </Text>\n      )}\n    </div>\n  )\n}\n\n/* NOTE: This is a workaround to avoid infinite type recursion when directly using `ReturnType` */\ntype ReturnTypeOfCheckboxImpl<Checked extends CheckedState> = ReturnType<\n  typeof CheckboxImpl<Checked>\n>\n\n/**\n * `Checkbox` is a control that allows the user to toggle between checked and not checked.\n * It can be used with labels or standalone.\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled / With label\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * >\n *   Label\n * </Checkbox>\n * // Controlled / Standalone\n * <Checkbox\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <Checkbox\n *   defaultChecked={true}\n * >\n *   Label\n * </Checkbox>\n * ```\n */\nexport const Checkbox = forwardRef(CheckboxImpl) as <\n  Checked extends CheckedState,\n>(\n  props: CheckboxProps<Checked> & {\n    ref?: React.ForwardedRef<HTMLButtonElement>\n  }\n) => ReturnTypeOfCheckboxImpl<Checked>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","_jsx","Icon","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","color","CheckboxImpl","children","checked","size","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","iconSize","_jsxs","classNames","Container","getFormFieldSizeClassName","CheckboxPrimitive","asChild","Checkbox","BaseButton","forceMount","Text","as","htmlFor","Label","typo"],"mappings":";;;;;;;;;;;;;;;AA0BA;AACA,MAAMA,SAAS,gBAAGC,gBAAU,CAC1B,SAASD,SAASA,CAACE,KAAK,EAAEC,YAAY,EAAE;AACtC;AACA,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAAC,YAAY,CAAC;AACjC,EAAA,MAAMG,WAAW,GAAGD,KAAK,KAAK,WAAW;AACzC,EAAA,MAAME,eAAe,GAAGF,KAAK,KAAK,eAAe;EAEjD,oBACEG,cAAA,CAACC,SAAI,EAAA;IACHC,SAAS,EAAEC,uBAAM,CAACV,SAAU;AAC5BW,IAAAA,GAAG,EAAER,YAAa;AAClBS,IAAAA,MAAM,EAAE,CAACN,eAAe,GAAGO,yBAAa,GAAGC,0BAAe;AAC1DC,IAAAA,KAAK,EAAEV,WAAW,GAAG,oBAAoB,GAAG,qBAAsB;IAAA,GAC9DH;AAAK,GACV,CAAC;AAEN,CACF,CAAC;AAED,SAASc,YAAYA,CACnB;EAAEC,QAAQ;EAAER,SAAS;EAAES,OAAO;AAAEC,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,EAAE,EAAEC,MAAM;EAAE,GAAGC;AAA6B,CAAC,EACzFnB,YAA0C,EAC1C;EACA,MAAM;AACJiB,IAAAA,EAAE,EAAEG,WAAW;IACfC,QAAQ;IACR,GAAGC;AACL,GAAC,GAAGC,6BAAiB,CAACJ,IAAI,CAAC;AAE3B,EAAA,MAAMF,EAAE,GAAGO,aAAK,CAACN,MAAM,KAAA,IAAA,IAANA,MAAM,KAAA,KAAA,CAAA,GAANA,MAAM,GAAIE,WAAW,EAAE,iBAAiB,CAAC;EAC1D,MAAMK,QAAQ,GAAGT,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,IAAI;AAE5C,EAAA,oBACEU,eAAA,CAAA,KAAA,EAAA;IACEpB,SAAS,EAAEqB,aAAU,CAACpB,uBAAM,CAACqB,SAAS,EAAEC,sCAAyB,CAAC,GAAG,CAAC,CAAE;AAAAf,IAAAA,QAAA,EAExEV,cAAAA,cAAA,CAAC0B,YAAsB,EAAA;MACrBC,OAAO,EAAA,IAAA;AACPzB,MAAAA,SAAS,EAAEqB,aAAU,CAACpB,uBAAM,CAACyB,QAAQ,EAAEzB,uBAAM,CAAC,QAAQS,IAAI,CAAA,CAAE,CAAC,EAAEV,SAAS,CAAE;AAC1EE,MAAAA,GAAG,EAAER,YAAa;AAClBiB,MAAAA,EAAE,EAAEA,EAAG;AACPF,MAAAA,OAAO,EAAEA,OAAQ;MACjB,cAAcO,EAAAA,cAAc,CAAC,cAAc,CAAE;AAAA,MAAA,GACzCA,cAAc;MAAAR,QAAA,eAElBV,cAAA,CAAC6B,qBAAU,EAAA;AAAAnB,QAAAA,QAAA,eACTV,cAAA,CAAC0B,iBAA2B,EAAA;UAC1BC,OAAO,EAAA;AACP;UACAG,UAAU,EAAA,IAAA;UAAApB,QAAA,eAGVV,cAAA,CAACP,SAAS,EAAA;AAACmB,YAAAA,IAAI,EAAES;WAAW;SACD;OACnB;AAAC,KACS,CAAC,EACxBX,QAAQ,iBACPV,cAAA,CAAC+B,SAAI,EAAA;AACHC,MAAAA,EAAE,EAAC;AACH;AACA;AAAA;AACAC,MAAAA,OAAO,EAAEpB,EAAG;MACZX,SAAS,EAAEC,uBAAM,CAAC+B,KAAM;AACxBC,MAAAA,IAAI,EAAC,IAAI;AACT3B,MAAAA,KAAK,EAAC,cAAc;AAAAE,MAAAA,QAAA,EAEnBA;AAAQ,KACL,CACP;AAAA,GACE,CAAC;AAEV;;AAEA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACakB,QAAQ,gBAAGlC,gBAAU,CAACe,YAAY;;;;"}