@channel.io/bezier-react 2.2.4 → 2.3.1

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

@@ -71,8 +71,9 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
   children,
   ...rest
 }, forwardedRef) {
+  var _avatarGroupContext$s;
   const avatarGroupContext = AvatarSizeContext.useAvatarContext();
-  const size = avatarGroupContext?.size ?? sizeProps;
+  const size = (_avatarGroupContext$s = avatarGroupContext === null || avatarGroupContext === void 0 ? void 0 : avatarGroupContext.size) !== null && _avatarGroupContext$s !== void 0 ? _avatarGroupContext$s : sizeProps;
   const loadedAvatarUrl = useProgressiveImage.default(avatarUrl, fallbackUrl);
   const AVATAR_BORDER_RADIUS = useAvatarRadiusToken();
   const StatusComponent = React.useMemo(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, 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'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n *   avatarUrl=\"https://...\"\n *   name=\"channel\"\n *   size=\"48\"\n *   showBorder\n *   disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    avatarUrl = '',\n    fallbackUrl = defaultAvatarUrl,\n    size: 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 && !React.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","useAvatarContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","React","isValidElement","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, 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'\nexport const AVATAR_TEST_ID = 'bezier-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/**\n * `Avatar` is a component for representing some profile image.\n * @example\n *\n * ```tsx\n * <Avatar\n *   avatarUrl=\"https://...\"\n *   name=\"channel\"\n *   size=\"48\"\n *   showBorder\n *   disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    avatarUrl = '',\n    fallbackUrl = defaultAvatarUrl,\n    size: 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 && !React.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","React","isValidElement","Contents","createElement","Status","type","styles","StatusWrapper","Object","assign","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}

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

@@ -15,11 +15,11 @@ function getCachedImage(src) {
 function useProgressiveImage(src, defaultSrc) {
   const [source, setSource] = React.useState(() => getCachedImage(src));
   React.useEffect(function updateSource() {
-    if (source?.src === src) {
+    if ((source === null || source === void 0 ? void 0 : source.src) === src) {
       return undefined;
     }
     const cachedImage = getCachedImage(src);
-    if (cachedImage?.isLoaded) {
+    if (cachedImage !== null && cachedImage !== void 0 && cachedImage.isLoaded) {
       setSource(cachedImage);
       return undefined;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"useProgressiveImage.js","sources":["../../../../src/components/AlphaAvatar/useProgressiveImage.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\ninterface CachedImage {\n  src: string\n  isLoaded: boolean\n}\n\nconst imageCache = new Map<string, CachedImage>()\n\nfunction getCachedImage(src: string) {\n  const cachedImage = imageCache.get(src)\n  if (!cachedImage) {\n    return null\n  }\n  return cachedImage\n}\n\nexport default function useProgressiveImage(src: string, defaultSrc: string) {\n  const [source, setSource] = useState<CachedImage | null>(() =>\n    getCachedImage(src)\n  )\n\n  useEffect(\n    function updateSource() {\n      if (source?.src === src) {\n        return undefined\n      }\n\n      const cachedImage = getCachedImage(src)\n\n      if (cachedImage?.isLoaded) {\n        setSource(cachedImage)\n        return undefined\n      }\n\n      const image = new Image()\n      image.src = src\n      image.onload = loadImage(true)\n      image.onerror = loadImage(false)\n\n      function loadImage(isLoaded: boolean) {\n        return () => {\n          const loadedImage = {\n            src,\n            isLoaded,\n          }\n          setSource(loadedImage)\n          imageCache.set(src, loadedImage)\n        }\n      }\n    },\n    [src, source]\n  )\n\n  if (!source || !source.isLoaded) {\n    return defaultSrc\n  }\n\n  return source.src\n}\n"],"names":["imageCache","Map","getCachedImage","src","cachedImage","get","useProgressiveImage","defaultSrc","source","setSource","useState","useEffect","updateSource","undefined","isLoaded","image","Image","onload","loadImage","onerror","loadedImage","set"],"mappings":";;;;;;AAOA,MAAMA,UAAU,GAAG,IAAIC,GAAG,EAAuB,CAAA;AAEjD,SAASC,cAAcA,CAACC,GAAW,EAAE;AACnC,EAAA,MAAMC,WAAW,GAAGJ,UAAU,CAACK,GAAG,CAACF,GAAG,CAAC,CAAA;EACvC,IAAI,CAACC,WAAW,EAAE;AAChB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACA,EAAA,OAAOA,WAAW,CAAA;AACpB,CAAA;AAEe,SAASE,mBAAmBA,CAACH,GAAW,EAAEI,UAAkB,EAAE;AAC3E,EAAA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,MACvDR,cAAc,CAACC,GAAG,CACpB,CAAC,CAAA;AAEDQ,EAAAA,eAAS,CACP,SAASC,YAAYA,GAAG;AACtB,IAAA,IAAIJ,MAAM,EAAEL,GAAG,KAAKA,GAAG,EAAE;AACvB,MAAA,OAAOU,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAMT,WAAW,GAAGF,cAAc,CAACC,GAAG,CAAC,CAAA;IAEvC,IAAIC,WAAW,EAAEU,QAAQ,EAAE;MACzBL,SAAS,CAACL,WAAW,CAAC,CAAA;AACtB,MAAA,OAAOS,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAME,KAAK,GAAG,IAAIC,KAAK,EAAE,CAAA;IACzBD,KAAK,CAACZ,GAAG,GAAGA,GAAG,CAAA;AACfY,IAAAA,KAAK,CAACE,MAAM,GAAGC,SAAS,CAAC,IAAI,CAAC,CAAA;AAC9BH,IAAAA,KAAK,CAACI,OAAO,GAAGD,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,SAASA,SAASA,CAACJ,QAAiB,EAAE;AACpC,MAAA,OAAO,MAAM;AACX,QAAA,MAAMM,WAAW,GAAG;UAClBjB,GAAG;AACHW,UAAAA,QAAAA;SACD,CAAA;QACDL,SAAS,CAACW,WAAW,CAAC,CAAA;AACtBpB,QAAAA,UAAU,CAACqB,GAAG,CAAClB,GAAG,EAAEiB,WAAW,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACF,GAAC,EACD,CAACjB,GAAG,EAAEK,MAAM,CACd,CAAC,CAAA;AAED,EAAA,IAAI,CAACA,MAAM,IAAI,CAACA,MAAM,CAACM,QAAQ,EAAE;AAC/B,IAAA,OAAOP,UAAU,CAAA;AACnB,GAAA;EAEA,OAAOC,MAAM,CAACL,GAAG,CAAA;AACnB;;;;"}
+{"version":3,"file":"useProgressiveImage.js","sources":["../../../../src/components/AlphaAvatar/useProgressiveImage.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\ninterface CachedImage {\n  src: string\n  isLoaded: boolean\n}\n\nconst imageCache = new Map<string, CachedImage>()\n\nfunction getCachedImage(src: string) {\n  const cachedImage = imageCache.get(src)\n  if (!cachedImage) {\n    return null\n  }\n  return cachedImage\n}\n\nexport default function useProgressiveImage(src: string, defaultSrc: string) {\n  const [source, setSource] = useState<CachedImage | null>(() =>\n    getCachedImage(src)\n  )\n\n  useEffect(\n    function updateSource() {\n      if (source?.src === src) {\n        return undefined\n      }\n\n      const cachedImage = getCachedImage(src)\n\n      if (cachedImage?.isLoaded) {\n        setSource(cachedImage)\n        return undefined\n      }\n\n      const image = new Image()\n      image.src = src\n      image.onload = loadImage(true)\n      image.onerror = loadImage(false)\n\n      function loadImage(isLoaded: boolean) {\n        return () => {\n          const loadedImage = {\n            src,\n            isLoaded,\n          }\n          setSource(loadedImage)\n          imageCache.set(src, loadedImage)\n        }\n      }\n    },\n    [src, source]\n  )\n\n  if (!source || !source.isLoaded) {\n    return defaultSrc\n  }\n\n  return source.src\n}\n"],"names":["imageCache","Map","getCachedImage","src","cachedImage","get","useProgressiveImage","defaultSrc","source","setSource","useState","useEffect","updateSource","undefined","isLoaded","image","Image","onload","loadImage","onerror","loadedImage","set"],"mappings":";;;;;;AAOA,MAAMA,UAAU,GAAG,IAAIC,GAAG,EAAuB,CAAA;AAEjD,SAASC,cAAcA,CAACC,GAAW,EAAE;AACnC,EAAA,MAAMC,WAAW,GAAGJ,UAAU,CAACK,GAAG,CAACF,GAAG,CAAC,CAAA;EACvC,IAAI,CAACC,WAAW,EAAE;AAChB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AACA,EAAA,OAAOA,WAAW,CAAA;AACpB,CAAA;AAEe,SAASE,mBAAmBA,CAACH,GAAW,EAAEI,UAAkB,EAAE;AAC3E,EAAA,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,MACvDR,cAAc,CAACC,GAAG,CACpB,CAAC,CAAA;AAEDQ,EAAAA,eAAS,CACP,SAASC,YAAYA,GAAG;IACtB,IAAI,CAAAJ,MAAM,KAAA,IAAA,IAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEL,GAAG,MAAKA,GAAG,EAAE;AACvB,MAAA,OAAOU,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAMT,WAAW,GAAGF,cAAc,CAACC,GAAG,CAAC,CAAA;AAEvC,IAAA,IAAIC,WAAW,KAAXA,IAAAA,IAAAA,WAAW,eAAXA,WAAW,CAAEU,QAAQ,EAAE;MACzBL,SAAS,CAACL,WAAW,CAAC,CAAA;AACtB,MAAA,OAAOS,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAME,KAAK,GAAG,IAAIC,KAAK,EAAE,CAAA;IACzBD,KAAK,CAACZ,GAAG,GAAGA,GAAG,CAAA;AACfY,IAAAA,KAAK,CAACE,MAAM,GAAGC,SAAS,CAAC,IAAI,CAAC,CAAA;AAC9BH,IAAAA,KAAK,CAACI,OAAO,GAAGD,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,SAASA,SAASA,CAACJ,QAAiB,EAAE;AACpC,MAAA,OAAO,MAAM;AACX,QAAA,MAAMM,WAAW,GAAG;UAClBjB,GAAG;AACHW,UAAAA,QAAAA;SACD,CAAA;QACDL,SAAS,CAACW,WAAW,CAAC,CAAA;AACtBpB,QAAAA,UAAU,CAACqB,GAAG,CAAClB,GAAG,EAAEiB,WAAW,CAAC,CAAA;OACjC,CAAA;AACH,KAAA;AACF,GAAC,EACD,CAACjB,GAAG,EAAEK,MAAM,CACd,CAAC,CAAA;AAED,EAAA,IAAI,CAACA,MAAM,IAAI,CAACA,MAAM,CAACM,QAAQ,EAAE;AAC/B,IAAA,OAAOP,UAAU,CAAA;AACnB,GAAA;EAEA,OAAOC,MAAM,CAACL,GAAG,CAAA;AACnB;;;;"}

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

@@ -82,7 +82,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
   const AVATAR_BORDER_RADIUS = Avatar.useAvatarRadiusToken();
   const avatarListCount = React.Children.count(children);
   const renderAvatarElement = React.useCallback(avatar => {
-    const key = avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`;
+    var _avatar$key;
+    const key = (_avatar$key = avatar.key) !== null && _avatar$key !== void 0 ? _avatar$key : `${avatar.props.name}-${avatar.props.avatarUrl}`;
     const shouldShowBorder = max > 1 && avatarListCount > 1 && spacing < 0;
     const showBorder = avatar.props.showBorder || shouldShowBorder;
     return /*#__PURE__*/React.cloneElement(avatar, {

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { px } from '~/src/utils/style'\n\nimport {\n  type 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","key","props","name","avatarUrl","shouldShowBorder","showBorder","cloneElement","AvatarListComponent","useMemo","toArray","slice","map","index","arr","isValidElement","AvatarElement","isLastIndex","createElement","styles","AvatarEllipsisIconWrapper","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","AvatarContextProvider","value","Object","assign","role","ref"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../src/components/AlphaAvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { px } from '~/src/utils/style'\n\nimport {\n  type 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","createElement","styles","AvatarEllipsisIconWrapper","SmoothCornersBox","borderRadius","backgroundColor","AvatarEllipsisIcon","Icon","source","MoreIcon","color","Fragment","px","Math","classNames","AvatarEllipsisCountWrapper","Text","typo","AvatarEllipsisCount","AvatarContextProvider","value","Object","assign","role","ref"],"mappings":"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"}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"Icon":"b--FZGN","size-xxxs":"b-o9swE","size-xxs":"b-xlhxz","size-xs":"b-dMl6r","size-s":"b-FZTyp","size-m":"b-Tenxe","size-l":"b-IJLB6","size-xl":"b-xKsUH","Button":"b-Bu63w","ButtonText":"b-Xr8t8","ButtonContent":"b-nSti0","variant-primary":"b-ohV3j","color-blue":"b-EL8PY","color-cobalt":"b--YAo9","color-red":"b-EAdoN","color-orange":"b-k-FfG","color-green":"b-REP7x","color-pink":"b-dkbxj","color-purple":"b-k3Z8M","color-dark-grey":"b-BudYM","color-light-grey":"b-eO-XU","color-white":"b-x9nmp","variant-secondary":"b-l8-bH","variant-tertiary":"b-PB-TW","ButtonIcon":"b-HX6lq","active":"b-Y2foo","ButtonLoader":"b-TRaYF","loading":"b-rUXJx","Loader":"b-Y9S8P"};
+var styles = {"Icon":"b--FZGN","size-xxxs":"b-o9swE","size-xxs":"b-xlhxz","size-xs":"b-dMl6r","size-s":"b-FZTyp","size-m":"b-Tenxe","size-l":"b-IJLB6","size-xl":"b-xKsUH","Button":"b-Bu63w","ButtonText":"b-Xr8t8","ButtonContent":"b-nSti0","variant-primary":"b-ohV3j","color-blue":"b-EL8PY","color-cobalt":"b--YAo9","color-red":"b-EAdoN","color-orange":"b-k-FfG","color-green":"b-REP7x","color-pink":"b-dkbxj","color-purple":"b-k3Z8M","color-dark-grey":"b-BudYM","color-light-grey":"b-eO-XU","color-white-absolute":"b-RsMAO","variant-secondary":"b-l8-bH","variant-tertiary":"b-PB-TW","ButtonIcon":"b-HX6lq","active":"b-Y2foo","ButtonLoader":"b-TRaYF","loading":"b-rUXJx","Loader":"b-Y9S8P"};
 
 exports.default = styles;
 //# sourceMappingURL=Button.module.scss.js.map

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"Icon":"b-cK83D","size-xxxs":"b-ATSdQ","size-xxs":"b-506kS","size-xs":"b-mWKOx","size-s":"b-8N-9n","size-m":"b-pDYUy","size-l":"b-YJw65","size-xl":"b-tjHwL","IconButton":"b-xyUBm","variant-primary":"b-Ff2Fz","color-blue":"b-ne4OD","color-cobalt":"b-5zudh","color-red":"b-plyr-","color-orange":"b-h5y75","color-green":"b-Tnm-7","color-pink":"b-uZ0LR","color-purple":"b-5-tPX","color-dark-grey":"b-BN6Xk","color-light-grey":"b-paZDh","color-white":"b--tIjF","variant-secondary":"b-ucRsW","variant-tertiary":"b-WHAB-","ButtonIcon":"b-Ty8vu","shape-rectangle":"b-hyTqW","shape-circle":"b-03MST","active":"b-P0tkF","ButtonLoader":"b-lfx3h","ButtonContent":"b-r9mfO","loading":"b--Ij3P","Loader":"b-kjV8d"};
+var styles = {"Icon":"b-cK83D","size-xxxs":"b-ATSdQ","size-xxs":"b-506kS","size-xs":"b-mWKOx","size-s":"b-8N-9n","size-m":"b-pDYUy","size-l":"b-YJw65","size-xl":"b-tjHwL","IconButton":"b-xyUBm","variant-primary":"b-Ff2Fz","color-blue":"b-ne4OD","color-cobalt":"b-5zudh","color-red":"b-plyr-","color-orange":"b-h5y75","color-green":"b-Tnm-7","color-pink":"b-uZ0LR","color-purple":"b-5-tPX","color-dark-grey":"b-BN6Xk","color-light-grey":"b-paZDh","color-white-absolute":"b-4O2E3","variant-secondary":"b-ucRsW","variant-tertiary":"b-WHAB-","ButtonIcon":"b-Ty8vu","shape-rectangle":"b-hyTqW","shape-circle":"b-03MST","active":"b-P0tkF","ButtonLoader":"b-lfx3h","ButtonContent":"b-r9mfO","loading":"b--Ij3P","Loader":"b-kjV8d"};
 
 exports.default = styles;
 //# sourceMappingURL=IconButton.module.scss.js.map

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

@@ -0,0 +1,50 @@
+'use strict';
+
+var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
+var index = require('../../node_modules/classnames/index.js');
+var style = require('../../utils/style.js');
+var StatusBadge_module = require('./StatusBadge.module.scss.js');
+var Icon = require('../Icon/Icon.js');
+
+// TODO: Change to use AlphaIcon and alpha color tokens
+
+/**
+ * `StatusBadge` is a component to indicate user status.
+ * @example
+ *
+ * ```tsx
+ * <StatusBadge
+ *   size="m"
+ *   online
+ *   doNotDisturb
+ * />
+ * ```
+ */
+const StatusBadge = /*#__PURE__*/React.forwardRef(function StatusBadge({
+  size = 'm',
+  online = false,
+  doNotDisturb = false,
+  style: style$1,
+  className,
+  ...rest
+}, forwardedRef) {
+  const iconColor = online ? 'bgtxt-green-normal' : doNotDisturb ? 'bgtxt-yellow-normal' : 'bg-black-dark';
+  const backgroundColor = doNotDisturb ? 'bg-white-high' : iconColor;
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    ref: forwardedRef,
+    style: {
+      '--b-status-bg-color': style.cssVar(backgroundColor),
+      ...style$1
+    },
+    className: index.default(StatusBadge_module.default.StatusBadge, StatusBadge_module.default[`size-${size}`], className)
+  }, rest), doNotDisturb && /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: bezierIcons.MoonFilledIcon,
+    size: size === 'm' ? 'xxxs' : 'xs',
+    color: iconColor,
+    className: StatusBadge_module.default.Icon
+  }));
+});
+
+exports.StatusBadge = StatusBadge;
+//# sourceMappingURL=StatusBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.js","sources":["../../../../src/components/AlphaStatusBadge/StatusBadge.tsx"],"sourcesContent":["import React, { 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","React","createElement","Object","assign","ref","cssVar","classNames","styles","Icon","source","MoonFilledIcon","color"],"mappings":";;;;;;;;;AAcA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,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,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,SAAwB,GAAGN,MAAM,GACnC,oBAAoB,GACpBC,YAAY,GACV,qBAAqB,GACrB,eAAe,CAAA;AACrB,EAAA,MAAMM,eAA8B,GAAGN,YAAY,GAC/C,eAAe,GACfK,SAAS,CAAA;AAEb,EAAA,oBACEE,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEP,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEW,YAAM,CAACN,eAAe,CAAC;MAC9C,GAAGL,OAAAA;KAEN;AACDC,IAAAA,SAAS,EAAEW,aAAU,CACnBC,0BAAM,CAAClB,WAAW,EAClBkB,0BAAM,CAAC,CAAQhB,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EACtBI,SACF,CAAA;GACIC,EAAAA,IAAI,GAEPH,YAAY,iBACXO,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEC,0BAAe;AACvBnB,IAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCoB,IAAAA,KAAK,EAAEb,SAAU;IACjBH,SAAS,EAAEY,0BAAM,CAACC,IAAAA;AAAK,GACxB,CAEA,CAAC,CAAA;AAEV,CACF;;;;"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"StatusBadge":"b-iLbsT","size-m":"b-LJFq4","size-l":"b-x-5nM","Icon":"b-vpP5C"};
+
+exports.default = styles;
+//# sourceMappingURL=StatusBadge.module.scss.js.map

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

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

package/dist/cjs/components/AlphaToggleButton/ToggleButton.js

@@ -34,10 +34,11 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton({
   onSelectedChange,
   ...rest
 }, forwardedRef) {
+  var _ref;
   const {
     shape: shapeContext
   } = ToggleButtonContext.useToggleButtonContext();
-  const shape = shapeProps ?? shapeContext ?? 'capsule';
+  const shape = (_ref = shapeProps !== null && shapeProps !== void 0 ? shapeProps : shapeContext) !== null && _ref !== void 0 ? _ref : 'capsule';
   const Comp = as;
   const ICON_SIZE = 's';
   return /*#__PURE__*/React.createElement(index.Root, Object.assign({

package/dist/cjs/components/AlphaToggleButton/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport classNames from 'classnames'\n\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ToggleButtonProps } from './ToggleButton.types'\n\nimport styles from './ToggleButton.module.scss'\n\nfunction SideContent({\n  size,\n  content,\n}: {\n  size: IconSize\n  content?: ToggleButtonProps['prefixContent']\n}) {\n  return isBezierIcon(content) ? (\n    <Icon\n      source={content}\n      size={size}\n      className={styles.ButtonIcon}\n    />\n  ) : (\n    content\n  )\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(\n    {\n      as = BaseButton,\n      text,\n      prefixContent,\n      suffixContent,\n      variant = 'primary',\n      shape: shapeProps,\n      size = 'm',\n      className,\n      loading,\n      onSelectedChange,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { shape: shapeContext } = useToggleButtonContext()\n    const shape = shapeProps ?? shapeContext ?? 'capsule'\n    const Comp = as as typeof BaseButton\n    const ICON_SIZE = 's'\n\n    return (\n      <TogglePrimitive.Root\n        asChild\n        onPressedChange={onSelectedChange}\n        {...rest}\n      >\n        <Comp\n          ref={forwardedRef}\n          className={classNames(\n            styles.Button,\n            styles[`size-${size}`],\n            styles[`variant-${variant}`],\n            shape && styles[`shape-${shape}`],\n            className\n          )}\n        >\n          <div\n            className={classNames(\n              styles.ButtonContent,\n              loading && styles.loading\n            )}\n          >\n            <SideContent\n              size={ICON_SIZE}\n              content={prefixContent}\n            />\n\n            {/* TODO: use AlphaText later, add typo */}\n            <Text\n              className={styles.ButtonText}\n              typo=\"14\"\n              data-text={text}\n              truncated\n            >\n              {text}\n            </Text>\n\n            <SideContent\n              size={ICON_SIZE}\n              content={suffixContent}\n            />\n          </div>\n\n          {loading && (\n            <div\n              className={classNames(\n                styles.ButtonLoader,\n                styles[`size-${ICON_SIZE}`]\n              )}\n            >\n              <AlphaLoader\n                className={styles.Loader}\n                variant=\"secondary\"\n              />\n            </div>\n          )}\n        </Comp>\n      </TogglePrimitive.Root>\n    )\n  }\n)\n"],"names":["SideContent","size","content","isBezierIcon","React","createElement","Icon","source","className","styles","ButtonIcon","ToggleButton","forwardRef","as","BaseButton","text","prefixContent","suffixContent","variant","shape","shapeProps","loading","onSelectedChange","rest","forwardedRef","shapeContext","useToggleButtonContext","Comp","ICON_SIZE","TogglePrimitive","Object","assign","asChild","onPressedChange","ref","classNames","Button","ButtonContent","Text","ButtonText","typo","truncated","ButtonLoader","AlphaLoader","Loader"],"mappings":"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"}
+{"version":3,"file":"ToggleButton.js","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport classNames from 'classnames'\n\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ToggleButtonProps } from './ToggleButton.types'\n\nimport styles from './ToggleButton.module.scss'\n\nfunction SideContent({\n  size,\n  content,\n}: {\n  size: IconSize\n  content?: ToggleButtonProps['prefixContent']\n}) {\n  return isBezierIcon(content) ? (\n    <Icon\n      source={content}\n      size={size}\n      className={styles.ButtonIcon}\n    />\n  ) : (\n    content\n  )\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(\n    {\n      as = BaseButton,\n      text,\n      prefixContent,\n      suffixContent,\n      variant = 'primary',\n      shape: shapeProps,\n      size = 'm',\n      className,\n      loading,\n      onSelectedChange,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { shape: shapeContext } = useToggleButtonContext()\n    const shape = shapeProps ?? shapeContext ?? 'capsule'\n    const Comp = as as typeof BaseButton\n    const ICON_SIZE = 's'\n\n    return (\n      <TogglePrimitive.Root\n        asChild\n        onPressedChange={onSelectedChange}\n        {...rest}\n      >\n        <Comp\n          ref={forwardedRef}\n          className={classNames(\n            styles.Button,\n            styles[`size-${size}`],\n            styles[`variant-${variant}`],\n            shape && styles[`shape-${shape}`],\n            className\n          )}\n        >\n          <div\n            className={classNames(\n              styles.ButtonContent,\n              loading && styles.loading\n            )}\n          >\n            <SideContent\n              size={ICON_SIZE}\n              content={prefixContent}\n            />\n\n            {/* TODO: use AlphaText later, add typo */}\n            <Text\n              className={styles.ButtonText}\n              typo=\"14\"\n              data-text={text}\n              truncated\n            >\n              {text}\n            </Text>\n\n            <SideContent\n              size={ICON_SIZE}\n              content={suffixContent}\n            />\n          </div>\n\n          {loading && (\n            <div\n              className={classNames(\n                styles.ButtonLoader,\n                styles[`size-${ICON_SIZE}`]\n              )}\n            >\n              <AlphaLoader\n                className={styles.Loader}\n                variant=\"secondary\"\n              />\n            </div>\n          )}\n        </Comp>\n      </TogglePrimitive.Root>\n    )\n  }\n)\n"],"names":["SideContent","size","content","isBezierIcon","React","createElement","Icon","source","className","styles","ButtonIcon","ToggleButton","forwardRef","as","BaseButton","text","prefixContent","suffixContent","variant","shape","shapeProps","loading","onSelectedChange","rest","forwardedRef","_ref","shapeContext","useToggleButtonContext","Comp","ICON_SIZE","TogglePrimitive","Object","assign","asChild","onPressedChange","ref","classNames","Button","ButtonContent","Text","ButtonText","typo","truncated","ButtonLoader","AlphaLoader","Loader"],"mappings":"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"}

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

@@ -20,11 +20,11 @@ function getCachedImage(src, imageCache) {
 function useProgressiveImage(src, defaultSrc, imageCache = defaultImageCache) {
   const [source, setSource] = React.useState(() => getCachedImage(src, imageCache));
   React.useEffect(function updateSource() {
-    if (source?.src === src) {
+    if ((source === null || source === void 0 ? void 0 : source.src) === src) {
       return undefined;
     }
     const cachedImage = getCachedImage(src, imageCache);
-    if (cachedImage?.isLoaded) {
+    if (cachedImage !== null && cachedImage !== void 0 && cachedImage.isLoaded) {
       setSource(cachedImage);
       return undefined;
     }

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

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

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

@@ -79,7 +79,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
 }, forwardedRef) {
   const AVATAR_BORDER_RADIUS = Avatar.useAvatarRadiusToken();
   const renderAvatarElement = React.useCallback((avatar, avatarListCount) => {
-    const key = avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`;
+    var _avatar$key;
+    const key = (_avatar$key = avatar.key) !== null && _avatar$key !== void 0 ? _avatar$key : `${avatar.props.name}-${avatar.props.avatarUrl}`;
     const shouldShowBorder = avatarListCount > 1 && spacing < 0;
     const showBorder = avatar.props.showBorder || shouldShowBorder;
     return /*#__PURE__*/React.cloneElement(avatar, {

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

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

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

@@ -20,7 +20,7 @@ const BADGE_TEST_ID = 'bezier-badge';
  * </Badge>
  * ```
  */
-const Badge = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Badge({
+const Badge = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Badge({
   size = 'm',
   variant = 'default',
   icon,

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

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

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

@@ -79,7 +79,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button({
   const Comp = as;
   const handleClick = React.useCallback(event => {
     if (!disabled) {
-      onClick?.(event);
+      onClick === null || onClick === void 0 || onClick(event);
     }
   }, [onClick, disabled]);
   return /*#__PURE__*/React.createElement(Comp, Object.assign({

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

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

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

@@ -38,7 +38,7 @@ function CheckboxImpl({
     hasError,
     ...formFieldProps
   } = FormControl.useFormFieldProps(rest);
-  const id = useId.default(idProp ?? formFieldId, 'bezier-checkbox');
+  const id = useId.default(idProp !== null && idProp !== void 0 ? idProp : formFieldId, 'bezier-checkbox');
   return /*#__PURE__*/React.createElement("div", {
     className: index.default(Checkbox_module.default.Container, propsHelpers.getFormFieldSizeClassName('m'))
   }, /*#__PURE__*/React.createElement(index$1.Root, Object.assign({

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } 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        size=\"xs\"\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, 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\n  return (\n    <div\n      className={classNames(styles.Container, getFormFieldSizeClassName('m'))}\n    >\n      <CheckboxPrimitive.Root\n        asChild\n        className={classNames(styles.Checkbox, 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 />\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/**\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) => ReturnType<typeof CheckboxImpl<Checked>>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","React","createElement","Icon","Object","assign","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","size","color","CheckboxImpl","children","checked","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","classNames","Container","getFormFieldSizeClassName","CheckboxPrimitive","asChild","Checkbox","BaseButton","forceMount","Text","as","htmlFor","Label","typo"],"mappings":";;;;;;;;;;;;;;AAwBA;AACA,MAAMA,SAAS,gBAAGC,gBAAU,CAC1B,SAASD,SAASA,CAACE,KAAK,EAAEC,YAAY,EAAE;AACtC;AACA,EAAA,MAAMC,KAAK,GAAGF,KAAK,CAAC,YAAY,CAAC,CAAA;AACjC,EAAA,MAAMG,WAAW,GAAGD,KAAK,KAAK,WAAW,CAAA;AACzC,EAAA,MAAME,eAAe,GAAGF,KAAK,KAAK,eAAe,CAAA;EAEjD,oBACEG,KAAA,CAAAC,aAAA,CAACC,SAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACHC,SAAS,EAAEC,uBAAM,CAACb,SAAU;AAC5Bc,IAAAA,GAAG,EAAEX,YAAa;AAClBY,IAAAA,MAAM,EAAE,CAACT,eAAe,GAAGU,yBAAa,GAAGC,0BAAe;AAC1DC,IAAAA,IAAI,EAAC,IAAI;AACTC,IAAAA,KAAK,EAAEd,WAAW,GAAG,eAAe,GAAG,2BAAA;GACnCH,EAAAA,KAAK,CACV,CAAC,CAAA;AAEN,CACF,CAAC,CAAA;AAED,SAASkB,YAAYA,CACnB;EAAEC,QAAQ;EAAET,SAAS;EAAEU,OAAO;AAAEC,EAAAA,EAAE,EAAEC,MAAM;EAAE,GAAGC,IAAAA;AAA6B,CAAC,EAC7EtB,YAA0C,EAC1C;EACA,MAAM;AACJoB,IAAAA,EAAE,EAAEG,WAAW;IACfC,QAAQ;IACR,GAAGC,cAAAA;AACL,GAAC,GAAGC,6BAAiB,CAACJ,IAAI,CAAC,CAAA;EAE3B,MAAMF,EAAE,GAAGO,aAAK,CAACN,MAAM,IAAIE,WAAW,EAAE,iBAAiB,CAAC,CAAA;EAE1D,oBACEnB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEI,SAAS,EAAEmB,aAAU,CAAClB,uBAAM,CAACmB,SAAS,EAAEC,sCAAyB,CAAC,GAAG,CAAC,CAAA;GAEtE1B,eAAAA,KAAA,CAAAC,aAAA,CAAC0B,YAAsB,EAAAxB,MAAA,CAAAC,MAAA,CAAA;IACrBwB,OAAO,EAAA,IAAA;IACPvB,SAAS,EAAEmB,aAAU,CAAClB,uBAAM,CAACuB,QAAQ,EAAExB,SAAS,CAAE;AAClDE,IAAAA,GAAG,EAAEX,YAAa;AAClBoB,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;IACjB,cAAcM,EAAAA,cAAc,CAAC,cAAc,CAAA;AAAE,GAAA,EACzCA,cAAc,CAAA,eAElBrB,KAAA,CAAAC,aAAA,CAAC6B,qBAAU,EACT9B,IAAAA,eAAAA,KAAA,CAAAC,aAAA,CAAC0B,iBAA2B,EAAA;IAC1BC,OAAO,EAAA,IAAA;AACP;IACAG,UAAU,EAAA,IAAA;AAAA,GAAA,eAGV/B,KAAA,CAAAC,aAAA,CAACR,SAAS,MAAE,CACe,CACnB,CACU,CAAC,EACxBqB,QAAQ,iBACPd,KAAA,CAAAC,aAAA,CAAC+B,SAAI,EAAA;AACHC,IAAAA,EAAE,EAAC,OAAA;AACH;AACA;AAAA;AACAC,IAAAA,OAAO,EAAElB,EAAG;IACZX,SAAS,EAAEC,uBAAM,CAAC6B,KAAM;AACxBC,IAAAA,IAAI,EAAC,IAAI;AACTxB,IAAAA,KAAK,EAAC,mBAAA;GAELE,EAAAA,QACG,CAEL,CAAC,CAAA;AAEV,CAAA;;AAEA;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;MACae,QAAQ,gBAAGnC,gBAAU,CAACmB,YAAY;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } 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        size=\"xs\"\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, 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\n  return (\n    <div\n      className={classNames(styles.Container, getFormFieldSizeClassName('m'))}\n    >\n      <CheckboxPrimitive.Root\n        asChild\n        className={classNames(styles.Checkbox, 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 />\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/**\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) => ReturnType<typeof CheckboxImpl<Checked>>\n"],"names":["CheckIcon","forwardRef","props","forwardedRef","state","isUnchecked","isIndeterminate","React","createElement","Icon","Object","assign","className","styles","ref","source","CheckBoldIcon","HyphenBoldIcon","size","color","CheckboxImpl","children","checked","id","idProp","rest","formFieldId","hasError","formFieldProps","useFormFieldProps","useId","classNames","Container","getFormFieldSizeClassName","CheckboxPrimitive","asChild","Checkbox","BaseButton","forceMount","Text","as","htmlFor","Label","typo"],"mappings":"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"}

package/dist/cjs/components/Emoji/Emoji.js

@@ -35,7 +35,7 @@ const Emoji = /*#__PURE__*/React.forwardRef(function Emoji({
     role: "img",
     "aria-description": name,
     style: {
-      '--b-emoji-background-image': style.cssUrl(imageUrl ?? getEmojiUrl(name, assetSize)),
+      '--b-emoji-background-image': style.cssUrl(imageUrl !== null && imageUrl !== void 0 ? imageUrl : getEmojiUrl(name, assetSize)),
       ...style$1
     },
     className: index.default(Emoji_module.default.Emoji, Emoji_module.default[`size-${size}`], className),