npm - @channel.io/bezier-react - Versions diffs - 3.5.2-beta.2 → 3.5.2-beta.4 - Mend

@channel.io/bezier-react 3.5.2-beta.2 → 3.5.2-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

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

@@ -8,7 +8,6 @@ var defaultAvatar = require('./assets/default-avatar.svg.js');
 var useProgressiveImage = require('./useProgressiveImage.js');
 var Avatar_module = require('./Avatar.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
-var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Status = require('../Status/Status.js');
@@ -38,8 +37,7 @@ function getShadow(size) {
   };
 }
 function useAvatarRadiusToken() {
-  // TODO: Replace this with useAlphaTokens
-  return ThemeProvider.useTokens().global.radius['radius-42-p'];
+  return '42%';
 }
 const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper';
 const AVATAR_TEST_ID = 'bezier-avatar';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\~~nimport { useTokens } from '~/src/components/ThemeProvider'\~~n\nimport type { AvatarProps, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n const spreadRadius = (() => {\n switch (size) {\n case '90':\n return 3\n case '120':\n return 4\n default:\n return 2\n }\n })()\n\n return {\n spreadRadius,\n color: 'surface-higher',\n }\n}\n\nexport function useAvatarRadiusToken() {\n ~~// TODO: Replace this with useAlphaTokens\n~~ return ~~useTokens().global.radius[~~'~~radius-~~42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nconst AVATAR_TEST_ID = 'bezier-avatar'\nconst STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/*\n `Avatar` is a component for representing some profile image.\n * @example\n \n ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size: sizeProps = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const avatarGroupContext = useAvatarContext()\n const size = avatarGroupContext?.size ?? sizeProps\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) \|\|\n (children && !isValidElement(children))\n ) {\n return null\n }\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={getStatusSize(size)}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-description={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? getShadow(size) : undefined}\n backgroundColor=\"surface\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","~~useTokens","global","radius","~~AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","_avatarGroupContext$s","avatarGroupContext","useAvatarContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","isValidElement","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"~~;;;;;;;;;;;;;;AAsBA~~,SAASA,aAAaA,CAACC,IAAgB,EAAc;AACnD,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,IAAI;AACT,IAAA,KAAK,KAAK;AACR,MAAA,OAAO,GAAG;AACZ,IAAA;AACE,MAAA,OAAO,GAAG;AACd;AACF;AAEA,SAASC,SAASA,CAACD,IAAgB,EAAmC;EACpE,MAAME,YAAY,GAAG,CAAC,MAAM;AAC1B,IAAA,QAAQF,IAAI;AACV,MAAA,KAAK,IAAI;AACP,QAAA,OAAO,CAAC;AACV,MAAA,KAAK,KAAK;AACR,QAAA,OAAO,CAAC;AACV,MAAA;AACE,QAAA,OAAO,CAAC;AACZ;AACF,GAAC,GAAG;EAEJ,OAAO;IACLE,YAAY;AACZC,IAAAA,KAAK,EAAE;GACR;AACH;AAEO,SAASC,oBAAoBA,GAAG;AACrC~~;EACA~~,~~OAAOC~~,~~uBAAS~~,~~EAAE,CAACC,MAAM,CAACC,MAAM,CAAC,aAAa,CAAC~~;~~AACjD~~;AAEO,MAAMC,sBAAsB,GAAG;AACtC,MAAMC,cAAc,GAAG,eAAe;AACtC,MAAMC,sBAAsB,GAAG,uBAAuB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,MAAM,gBAAGC,gBAAU,CAA8B,SAASD,MAAMA,CAC3E;AACEE,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,WAAW,GAAGC,qBAAgB;~~EAC9Bf~~,IAAI,~~EAAEgB~~,SAAS,GAAG,IAAI;EACtBC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AAAA,EAAA,IAAAC,qBAAA;AACA,EAAA,MAAMC,kBAAkB,GAAGC,kCAAgB,EAAE;AAC7C,EAAA,~~MAAM5B~~,IAAI,~~GAAA0B~~,CAAAA,qBAAA,GAAGC,kBAAkB,aAAlBA,kBAAkB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAlBA,kBAAkB,~~CAAE3B~~,IAAI,~~MAAA0B~~,IAAAA,IAAAA,qBAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAA,GAAIV,SAAS;AAClD,EAAA,MAAMa,eAAe,GAAGC,2BAAmB,CAACjB,SAAS,EAAEC,WAAW,CAAC;AACnE,EAAA,MAAMiB,oBAAoB,~~GAAG3B~~,oBAAoB,EAAE;AAEnD,EAAA,~~MAAM4B~~,eAAe,GAAGC,aAAO,CAAC,MAAM;AACpC,IAAA,IACGC,YAAO,CAACX,QAAQ,CAAC,IAAI,CAACF,MAAM,IAC5BE,QAAQ,IAAI,eAACY,oBAAc,CAACZ,QAAQ,CAAE,EACvC;AACA,MAAA,OAAO,IAAI;AACb;IAEA,MAAMa,QAAQ,GAAG,CAAC,MAAM;AACtB,MAAA,IAAIb,QAAQ,EAAE;AACZ,QAAA,OAAOA,QAAQ;AACjB;AACA,MAAA,IAAIF,MAAM,EAAE;QACV,oBACEgB,cAAA,CAACC,aAAM,EAAA;AACLC,UAAAA,IAAI,EAAElB,MAAO;~~UACbrB~~,IAAI,EAAED,aAAa,CAACC,IAAI;AAAE,SAC3B,CAAC;AAEN;AACA,MAAA,OAAO,IAAI;AACb,KAAC,GAAG;IAEJ,~~OACEoC~~,QAAQ,iBACNC,cAAA,CAAA,KAAA,EAAA;MACEf,SAAS,EAAEkB,qBAAM,CAACC,aAAc;AAChC,MAAA,aAAA,EAAa/B,sBAAuB;AAAAa,MAAAA,QAAA,EAEnCa;AAAQ,KACN,CACN;GAEJ,EAAE,CAACf,MAAM,~~EAAErB~~,IAAI,~~EAAEuB~~,QAAQ,CAAC,CAAC;AAE5B,EAAA,oBACEc,cAAA,CAAA,KAAA,EAAA;IACEf,SAAS,EAAEoB,aAAU,CACnBF,qBAAM,CAAC7B,MAAM,EACb6B,qBAAM,CAAC,CAAA,KAAA,~~EAAQxC~~,IAAI,CAAE,CAAA,CAAC,~~EACtBkB~~,QAAQ,IAAIsB,qBAAM,CAACtB,QAAQ,EAC3BI,SACF,CAAE;AACF,IAAA,eAAA,EAAeJ,QAAS;AACxB,IAAA,aAAA,EAAaV,sBAAuB;AAAA,IAAA,GAChCgB,IAAI;IAAAD,QAAA,eAERc,cAAA,CAACM,iCAAgB,EAAA;AACfC,MAAAA,GAAG,EAAEnB,YAAa;AAClB,MAAA,kBAAA,EAAkBR,IAAK;MACvBK,SAAS,EAAEoB,aAAU,CACnBF,qBAAM,CAACK,WAAW,EAClBC,MAAM,~~CAAC9C~~,IAAI,CAAC,IAAI,EAAE,~~IAAIwC~~,qBAAM,CAAC,UAAU,CAAC,EACxCrB,UAAU,IAAIqB,qBAAM,CAACO,QACvB,CAAE;MACF7B,QAAQ,EAAE,CAACE,aAAc;AACzB4B,MAAAA,YAAY,EAAEjB,oBAAqB;MACnCkB,MAAM,EAAE9B,UAAU,~~GAAGlB~~,SAAS,CAACD,IAAI,CAAC,~~GAAGkD~~,SAAU;AACjDC,MAAAA,eAAe,EAAC,SAAS;AACzBC,MAAAA,eAAe,EAAEvB,eAAgB;AACjC,MAAA,aAAA,EAAapB,cAAe;AAAAc,MAAAA,QAAA,EAE3BS;KACe;AAAC,GAChB,CAAC;AAEV,CAAC;;;;;;"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/AlphaAvatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext'\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\n\nimport type { AvatarProps, AvatarSize } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nfunction getStatusSize(size: AvatarSize): StatusSize {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n}\n\nfunction getShadow(size: AvatarSize): SmoothCornersBoxProps['shadow'] {\n const spreadRadius = (() => {\n switch (size) {\n case '90':\n return 3\n case '120':\n return 4\n default:\n return 2\n }\n })()\n\n return {\n spreadRadius,\n color: 'surface-higher',\n }\n}\n\nexport function useAvatarRadiusToken() {\n return '42%' as const\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nconst AVATAR_TEST_ID = 'bezier-avatar'\nconst STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/*\n `Avatar` is a component for representing some profile image.\n * @example\n \n ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size: sizeProps = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const avatarGroupContext = useAvatarContext()\n const size = avatarGroupContext?.size ?? sizeProps\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) \|\|\n (children && !isValidElement(children))\n ) {\n return null\n }\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={getStatusSize(size)}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-description={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? getShadow(size) : undefined}\n backgroundColor=\"surface\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["getStatusSize","size","getShadow","spreadRadius","color","useAvatarRadiusToken","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","sizeProps","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","_avatarGroupContext$s","avatarGroupContext","useAvatarContext","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","isValidElement","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","shadow","undefined","backgroundColor","backgroundImage"],"mappings":"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"}

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

@@ -8,10 +8,10 @@ var style = require('../../utils/style.js');
 var AvatarSizeContext = require('../AlphaAvatar/AvatarSizeContext.js');
 var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Avatar = require('../AlphaAvatar/Avatar.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
+var Avatar = require('../AlphaAvatar/Avatar.js');
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

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

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

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

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

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

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

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

@@ -7,7 +7,6 @@ var defaultAvatar = require('./assets/default-avatar.svg.js');
 var useProgressiveImage = require('./useProgressiveImage.js');
 var Avatar_module = require('./Avatar.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
-var ThemeProvider = require('../ThemeProvider/ThemeProvider.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Status = require('../Status/Status.js');
@@ -16,7 +15,7 @@ const shadow = {
   color: 'surface-high'
 };
 function useAvatarRadiusToken() {
-  return ThemeProvider.useTokens().global.radius['radius-42-p'];
+  return '42%';
 }
 const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper';
 const AVATAR_TEST_ID = 'bezier-avatar';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\~~nimport { useTokens } from '~/src/components/ThemeProvider'\~~n\nimport type { AvatarProps } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n spreadRadius: 2,\n color: 'surface-high',\n}\n\nexport function useAvatarRadiusToken() {\n return ~~useTokens().global.radius[~~'~~radius-~~42-p']\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nconst AVATAR_TEST_ID = 'bezier-avatar'\nconst STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/*\n `Avatar` is a component for representing some profile image.\n * @example\n \n ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) \|\|\n (children && !isValidElement(children))\n ) {\n return null\n }\n\n const statusSize: StatusSize = (() => {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n })()\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={statusSize}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-description={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? shadow : undefined}\n backgroundColor=\"surface\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["shadow","spreadRadius","color","useAvatarRadiusToken","~~useTokens","global","radius","~~AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","isValidElement","statusSize","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"~~;;;;;;;;;;;;;AAqBA~~,MAAMA,MAAuC,GAAG;AAC9CC,EAAAA,YAAY,EAAE,CAAC;AACfC,EAAAA,KAAK,EAAE;AACT,CAAC;AAEM,SAASC,oBAAoBA,GAAG;~~EACrC~~,~~OAAOC~~,~~uBAAS~~,~~EAAE,CAACC,MAAM,CAACC,MAAM,CAAC,aAAa,CAAC~~;~~AACjD~~;AAEO,MAAMC,sBAAsB,GAAG;AACtC,MAAMC,cAAc,GAAG,eAAe;AACtC,MAAMC,sBAAsB,GAAG,uBAAuB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,MAAM,gBAAGC,gBAAU,CAA8B,SAASD,MAAMA,CAC3E;AACEE,EAAAA,SAAS,GAAG,EAAE;AACdC,EAAAA,WAAW,GAAGC,qBAAgB;AAC9BC,EAAAA,IAAI,GAAG,IAAI;EACXC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,aAAa,GAAG,IAAI;EACpBC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,MAAMC,eAAe,GAAGC,2BAAmB,CAACd,SAAS,EAAEC,WAAW,CAAC;AACnE,EAAA,MAAMc,oBAAoB,~~GAAGxB~~,oBAAoB,EAAE;AAEnD,EAAA,~~MAAMyB~~,eAAe,GAAGC,aAAO,CAAC,MAAM;AACpC,IAAA,IACGC,YAAO,CAACR,QAAQ,CAAC,IAAI,CAACF,MAAM,IAC5BE,QAAQ,IAAI,eAACS,oBAAc,CAACT,QAAQ,CAAE,EACvC;AACA,MAAA,OAAO,IAAI;AACb;IAEA,MAAMU,UAAsB,GAAG,CAAC,MAAM;AACpC,MAAA,QAAQjB,IAAI;AACV,QAAA,KAAK,IAAI;AACT,QAAA,KAAK,KAAK;AACR,UAAA,OAAO,GAAG;AACZ,QAAA;AACE,UAAA,OAAO,GAAG;AACd;AACF,KAAC,GAAG;IAEJ,MAAMkB,QAAQ,GAAG,CAAC,MAAM;AACtB,MAAA,IAAIX,QAAQ,EAAE;AACZ,QAAA,OAAOA,QAAQ;AACjB;AACA,MAAA,IAAIF,MAAM,EAAE;QACV,oBACEc,cAAA,CAACC,aAAM,EAAA;AACLC,UAAAA,IAAI,EAAEhB,MAAO;AACbL,UAAAA,IAAI,EAAEiB;AAAW,SAClB,CAAC;AAEN;AACA,MAAA,OAAO,IAAI;AACb,KAAC,GAAG;IAEJ,OACEC,QAAQ,iBACNC,cAAA,CAAA,KAAA,EAAA;MACEb,SAAS,EAAEgB,qBAAM,CAACC,aAAc;AAChC,MAAA,aAAA,EAAa7B,sBAAuB;AAAAa,MAAAA,QAAA,EAEnCW;AAAQ,KACN,CACN;GAEJ,EAAE,CAACb,MAAM,EAAEL,IAAI,EAAEO,QAAQ,CAAC,CAAC;AAE5B,EAAA,oBACEY,cAAA,CAAA,KAAA,EAAA;IACEb,SAAS,EAAEkB,aAAU,CACnBF,qBAAM,CAAC3B,MAAM,EACb2B,qBAAM,CAAC,CAAA,KAAA,EAAQtB,IAAI,CAAE,CAAA,CAAC,EACtBE,QAAQ,IAAIoB,qBAAM,CAACpB,QAAQ,EAC3BI,SACF,CAAE;AACF,IAAA,eAAA,EAAeJ,QAAS;AACxB,IAAA,aAAA,EAAaV,sBAAuB;AAAA,IAAA,GAChCgB,IAAI;IAAAD,QAAA,eAERY,cAAA,CAACM,iCAAgB,EAAA;AACfC,MAAAA,GAAG,EAAEjB,YAAa;AAClB,MAAA,kBAAA,EAAkBR,IAAK;MACvBK,SAAS,EAAEkB,aAAU,CACnBF,qBAAM,CAACK,WAAW,EAClBC,MAAM,CAAC5B,IAAI,CAAC,IAAI,EAAE,IAAIsB,qBAAM,CAAC,UAAU,CAAC,EACxCnB,UAAU,IAAImB,qBAAM,CAACO,QACvB,CAAE;MACF3B,QAAQ,EAAE,CAACE,aAAc;AACzB0B,MAAAA,YAAY,EAAElB,oBAAqB;~~AACnC3B~~,MAAAA,MAAM,~~EAAEkB~~,UAAU,~~GAAGlB~~,MAAM,~~GAAG8C~~,SAAU;AACxCC,MAAAA,eAAe,EAAC,SAAS;AACzBC,MAAAA,eAAe,EAAEvB,eAAgB;AACjC,MAAA,aAAA,EAAajB,cAAe;AAAAc,MAAAA,QAAA,EAE3BM;KACe;AAAC,GAChB,CAAC;AAEV,CAAC;;;;;;"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, isValidElement, useMemo } from 'react'\n\nimport classNames from 'classnames'\n\nimport { isEmpty } from '~/src/utils/type'\n\nimport {\n SmoothCornersBox,\n type SmoothCornersBoxProps,\n} from '~/src/components/SmoothCornersBox'\nimport { Status, type StatusSize } from '~/src/components/Status'\n\nimport type { AvatarProps } from './Avatar.types'\nimport defaultAvatarUrl from './assets/default-avatar.svg'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport styles from './Avatar.module.scss'\n\nconst shadow: SmoothCornersBoxProps['shadow'] = {\n spreadRadius: 2,\n color: 'surface-high',\n}\n\nexport function useAvatarRadiusToken() {\n return '42%' as const\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-avatar-wrapper'\nconst AVATAR_TEST_ID = 'bezier-avatar'\nconst STATUS_WRAPPER_TEST_ID = 'bezier-status-wrapper'\n\n/*\n `Avatar` is a component for representing some profile image.\n * @example\n \n ```tsx\n * <Avatar\n * avatarUrl=\"https://...\"\n * name=\"channel\"\n * size=\"48\"\n * showBorder\n * disabled\n * />\n * ```\n */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n {\n avatarUrl = '',\n fallbackUrl = defaultAvatarUrl,\n size = '24',\n name,\n disabled = false,\n showBorder = false,\n smoothCorners = true,\n status,\n className,\n children,\n ...rest\n },\n forwardedRef\n) {\n const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n const AVATAR_BORDER_RADIUS = useAvatarRadiusToken()\n\n const StatusComponent = useMemo(() => {\n if (\n (isEmpty(children) && !status) \|\|\n (children && !isValidElement(children))\n ) {\n return null\n }\n\n const statusSize: StatusSize = (() => {\n switch (size) {\n case '90':\n case '120':\n return 'l'\n default:\n return 'm'\n }\n })()\n\n const Contents = (() => {\n if (children) {\n return children\n }\n if (status) {\n return (\n <Status\n type={status}\n size={statusSize}\n />\n )\n }\n return null\n })()\n\n return (\n Contents && (\n <div\n className={styles.StatusWrapper}\n data-testid={STATUS_WRAPPER_TEST_ID}\n >\n {Contents}\n </div>\n )\n )\n }, [status, size, children])\n\n return (\n <div\n className={classNames(\n styles.Avatar,\n styles[`size-${size}`],\n disabled && styles.disabled,\n className\n )}\n data-disabled={disabled}\n data-testid={AVATAR_WRAPPER_TEST_ID}\n {...rest}\n >\n <SmoothCornersBox\n ref={forwardedRef}\n aria-description={name}\n className={classNames(\n styles.AvatarImage,\n Number(size) >= 72 && styles['big-size'],\n showBorder && styles.bordered\n )}\n disabled={!smoothCorners}\n borderRadius={AVATAR_BORDER_RADIUS}\n shadow={showBorder ? shadow : undefined}\n backgroundColor=\"surface\"\n backgroundImage={loadedAvatarUrl}\n data-testid={AVATAR_TEST_ID}\n >\n {StatusComponent}\n </SmoothCornersBox>\n </div>\n )\n})\n"],"names":["shadow","spreadRadius","color","useAvatarRadiusToken","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","name","disabled","showBorder","smoothCorners","status","className","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","AVATAR_BORDER_RADIUS","StatusComponent","useMemo","isEmpty","isValidElement","statusSize","Contents","_jsx","Status","type","styles","StatusWrapper","classNames","SmoothCornersBox","ref","AvatarImage","Number","bordered","borderRadius","undefined","backgroundColor","backgroundImage"],"mappings":"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"}

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

@@ -7,10 +7,10 @@ var array = require('../../utils/array.js');
 var style = require('../../utils/style.js');
 var AvatarGroup_module = require('./AvatarGroup.module.scss.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Avatar = require('../Avatar/Avatar.js');
 var SmoothCornersBox = require('../SmoothCornersBox/SmoothCornersBox.js');
 var Icon = require('../Icon/Icon.js');
 var Text = require('../Text/Text.js');
+var Avatar = require('../Avatar/Avatar.js');
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

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

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

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

@@ -0,0 +1 @@

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

package/dist/cjs/components/Status/Status.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Status.js","sources":["../../../../src/components/Status/Status.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSProperties, forwardRef, memo } from 'react'\n\nimport { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type ~~SemanticColor~~ } from '~/src/types/beta-tokens'\nimport { betaTokenCssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusProps, type StatusType } from './Status.types'\n\nimport styles from './Status.module.scss'\n\nconst statusTypesWithIcon: Readonly<StatusType[]> = [\n 'online-crescent',\n 'offline-crescent',\n 'lock',\n]\n\nconst statusColor: Readonly<Record<StatusType, ~~SemanticColor~~>> = {\n online: 'text-accent-green',\n offline: 'fill-neutral-heavy',\n 'online-crescent': 'text-accent-green',\n 'offline-crescent': 'text-accent-yellow',\n lock: 'text-neutral-light',\n}\n\n/*\n `Status` is a component to indicate user status.\n */\nexport const Status = memo(\n forwardRef<HTMLDivElement, StatusProps>(function Status(\n { type, size = 'm', style, className, ...rest },\n forwardedRef\n ) {\n const withIcon = statusTypesWithIcon.includes(type)\n const backgroundColor = withIcon ? 'surface-high' : statusColor[type]\n\n return (\n <div\n ref={forwardedRef}\n style={\n {\n '--b-status-bg-color': betaTokenCssVar(backgroundColor),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Status, styles[`size-${size}`], className)}\n {...rest}\n >\n {withIcon && (\n <Icon\n source={type === 'lock' ? LockIcon : MoonFilledIcon}\n size={size === 'm' ? 'xxxs' : 'xs'}\n color={statusColor[type]}\n className={styles.Icon}\n />\n )}\n </div>\n )\n })\n)\n"],"names":["statusTypesWithIcon","statusColor","online","offline","lock","Status","memo","forwardRef","type","size","style","className","rest","forwardedRef","withIcon","includes","backgroundColor","_jsx","ref","betaTokenCssVar","classNames","styles","children","Icon","source","LockIcon","MoonFilledIcon","color"],"mappings":";;;;;;;;;;AAgBA,MAAMA,mBAA2C,GAAG,CAClD,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,CACP;AAED,MAAMC,~~WAAwD~~,GAAG;~~AAC/DC~~,EAAAA,MAAM,EAAE,mBAAmB;AAC3BC,EAAAA,OAAO,EAAE,oBAAoB;AAC7B,EAAA,iBAAiB,EAAE,mBAAmB;AACtC,EAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,IAAI,EAAE;AACR,CAAC;;AAED;AACA;AACA;AACO,MAAMC,MAAM,gBAAGC,UAAI,cACxBC,gBAAU,CAA8B,SAASF,MAAMA,CACrD;EAAEG,IAAI;AAAEC,EAAAA,IAAI,GAAG,GAAG;SAAEC,OAAK;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAC,EAC/CC,YAAY,EACZ;AACA,EAAA,MAAMC,QAAQ,GAAGd,mBAAmB,CAACe,QAAQ,CAACP,IAAI,CAAC;EACnD,MAAMQ,eAAe,GAAGF,QAAQ,GAAG,cAAc,GAAGb,WAAW,CAACO,IAAI,CAAC;AAErE,EAAA,oBACES,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAES,qBAAe,CAACH,eAAe,CAAC;MACvD,GAAGN;KAEN;AACDC,IAAAA,SAAS,EAAES,aAAU,CAACC,qBAAM,CAAChB,MAAM,EAAEgB,qBAAM,CAAC,QAAQZ,IAAI,CAAA,CAAE,CAAC,EAAEE,SAAS,CAAE;AAAA,IAAA,GACpEC,IAAI;AAAAU,IAAAA,QAAA,EAEPR,QAAQ,iBACPG,cAAA,CAACM,SAAI,EAAA;AACHC,MAAAA,MAAM,EAAEhB,IAAI,KAAK,MAAM,GAAGiB,oBAAQ,GAAGC,0BAAe;AACpDjB,MAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCkB,MAAAA,KAAK,EAAE1B,WAAW,CAACO,IAAI,CAAE;MACzBG,SAAS,EAAEU,qBAAM,CAACE;KACnB;AACF,GACE,CAAC;AAEV,CAAC,CACH;;;;"}
1	+ {"version":3,"file":"Status.js","sources":["../../../../src/components/Status/Status.tsx"],"sourcesContent":["'use client'\n\nimport { type CSSProperties, forwardRef, memo } from 'react'\n\nimport { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type BetaSemanticColor } from '~/src/types/beta-tokens'\nimport { betaTokenCssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusProps, type StatusType } from './Status.types'\n\nimport styles from './Status.module.scss'\n\nconst statusTypesWithIcon: Readonly<StatusType[]> = [\n 'online-crescent',\n 'offline-crescent',\n 'lock',\n]\n\nconst statusColor: Readonly<Record<StatusType, BetaSemanticColor>> = {\n online: 'text-accent-green',\n offline: 'fill-neutral-heavy',\n 'online-crescent': 'text-accent-green',\n 'offline-crescent': 'text-accent-yellow',\n lock: 'text-neutral-light',\n}\n\n/*\n `Status` is a component to indicate user status.\n */\nexport const Status = memo(\n forwardRef<HTMLDivElement, StatusProps>(function Status(\n { type, size = 'm', style, className, ...rest },\n forwardedRef\n ) {\n const withIcon = statusTypesWithIcon.includes(type)\n const backgroundColor = withIcon ? 'surface-high' : statusColor[type]\n\n return (\n <div\n ref={forwardedRef}\n style={\n {\n '--b-status-bg-color': betaTokenCssVar(backgroundColor),\n ...style,\n } as CSSProperties\n }\n className={classNames(styles.Status, styles[`size-${size}`], className)}\n {...rest}\n >\n {withIcon && (\n <Icon\n source={type === 'lock' ? LockIcon : MoonFilledIcon}\n size={size === 'm' ? 'xxxs' : 'xs'}\n color={statusColor[type]}\n className={styles.Icon}\n />\n )}\n </div>\n )\n })\n)\n"],"names":["statusTypesWithIcon","statusColor","online","offline","lock","Status","memo","forwardRef","type","size","style","className","rest","forwardedRef","withIcon","includes","backgroundColor","_jsx","ref","betaTokenCssVar","classNames","styles","children","Icon","source","LockIcon","MoonFilledIcon","color"],"mappings":";;;;;;;;;;AAgBA,MAAMA,mBAA2C,GAAG,CAClD,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,CACP;AAED,MAAMC,WAA4D,GAAG;AACnEC,EAAAA,MAAM,EAAE,mBAAmB;AAC3BC,EAAAA,OAAO,EAAE,oBAAoB;AAC7B,EAAA,iBAAiB,EAAE,mBAAmB;AACtC,EAAA,kBAAkB,EAAE,oBAAoB;AACxCC,EAAAA,IAAI,EAAE;AACR,CAAC;;AAED;AACA;AACA;AACO,MAAMC,MAAM,gBAAGC,UAAI,cACxBC,gBAAU,CAA8B,SAASF,MAAMA,CACrD;EAAEG,IAAI;AAAEC,EAAAA,IAAI,GAAG,GAAG;SAAEC,OAAK;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAC,EAC/CC,YAAY,EACZ;AACA,EAAA,MAAMC,QAAQ,GAAGd,mBAAmB,CAACe,QAAQ,CAACP,IAAI,CAAC;EACnD,MAAMQ,eAAe,GAAGF,QAAQ,GAAG,cAAc,GAAGb,WAAW,CAACO,IAAI,CAAC;AAErE,EAAA,oBACES,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAES,qBAAe,CAACH,eAAe,CAAC;MACvD,GAAGN;KAEN;AACDC,IAAAA,SAAS,EAAES,aAAU,CAACC,qBAAM,CAAChB,MAAM,EAAEgB,qBAAM,CAAC,QAAQZ,IAAI,CAAA,CAAE,CAAC,EAAEE,SAAS,CAAE;AAAA,IAAA,GACpEC,IAAI;AAAAU,IAAAA,QAAA,EAEPR,QAAQ,iBACPG,cAAA,CAACM,SAAI,EAAA;AACHC,MAAAA,MAAM,EAAEhB,IAAI,KAAK,MAAM,GAAGiB,oBAAQ,GAAGC,0BAAe;AACpDjB,MAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCkB,MAAAA,KAAK,EAAE1B,WAAW,CAACO,IAAI,CAAE;MACzBG,SAAS,EAAEU,qBAAM,CAACE;KACnB;AACF,GACE,CAAC;AAEV,CAAC,CACH;;;;"}

package/dist/cjs/components/ThemeProvider/ThemeProvider.js CHANGED Viewed

@@ -5,6 +5,7 @@ var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
 var jsxRuntime = require('react/jsx-runtime');
 var TokenProvider = require('../TokenProvider/TokenProvider.js');
 var TokenProvider$1 = require('../AlphaTokenProvider/TokenProvider.js');
+var TokenProvider$2 = require('../BetaTokenProvider/TokenProvider.js');
 /**
  * `useThemeName` is a hook that returns the current theme name.
@@ -28,6 +29,14 @@ function useAlphaTokens() {
   return TokenProvider$1.useAlphaTokenContext('useAlphaTokens').tokens;
 }
+/**
+ * `useBetaTokens` is a hook that returns the beta tokens of the current theme.
+ * @internal
+ */
+function useBetaTokens() {
+  return TokenProvider$2.useBetaTokenContext('useBetaTokens').tokens;
+}
 /**
  * `ThemeProvider` is a wrapper component that provides theme context.
  *
@@ -42,13 +51,16 @@ const ThemeProvider = /*#__PURE__*/React.forwardRef(function ThemeProvider({
     themeName: themeName,
     children: /*#__PURE__*/jsxRuntime.jsx(TokenProvider$1.TokenProvider, {
       themeName: themeName,
-      children: /*#__PURE__*/jsxRuntime.jsx(index.Slot, {
-        ref: forwardedRef
-        // TODO: Change data attribute constant to import from bezier-tokens
-        ,
-        "data-bezier-theme": themeName,
-        ...rest,
-        children: children
+      children: /*#__PURE__*/jsxRuntime.jsx(TokenProvider$2.TokenProvider, {
+        themeName: themeName,
+        children: /*#__PURE__*/jsxRuntime.jsx(index.Slot, {
+          ref: forwardedRef
+          // TODO: Change data attribute constant to import from bezier-tokens
+          ,
+          "data-bezier-theme": themeName,
+          ...rest,
+          children: children
+        })
       })
     })
   });
@@ -108,6 +120,7 @@ exports.InvertedThemeProvider = InvertedThemeProvider;
 exports.LightThemeProvider = LightThemeProvider;
 exports.ThemeProvider = ThemeProvider;
 exports.useAlphaTokens = useAlphaTokens;
+exports.useBetaTokens = useBetaTokens;
 exports.useThemeName = useThemeName;
 exports.useTokens = useTokens;
 //# sourceMappingURL=ThemeProvider.js.map

package/dist/cjs/components/ThemeProvider/ThemeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeProvider.js","sources":["../../../../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport {\n AlphaTokenProvider,\n useAlphaTokenContext,\n} from '~/src/components/AlphaTokenProvider'\nimport { TokenProvider, useTokenContext } from '~/src/components/TokenProvider'\n\nimport {\n type FixedThemeProviderProps,\n type ThemeProviderProps,\n} from './ThemeProvider.types'\n\n/*\n `useThemeName` is a hook that returns the current theme name.\n /\nexport function useThemeName() {\n return useTokenContext('useThemeName').themeName\n}\n\n/\n `useTokens` is a hook that returns the design tokens of the current theme.\n /\nexport function useTokens() {\n return useTokenContext('useTokens').tokens\n}\n\n/\n `useAlphaTokens` is a hook that returns the alpha tokens of the current theme.\n * @internal\n /\nexport function useAlphaTokens() {\n return useAlphaTokenContext('useAlphaTokens').tokens\n}\n\n/\n `ThemeProvider` is a wrapper component that provides theme context.\n \n Components that pass to children must spread props and forward ref.\n /\nexport const ThemeProvider = forwardRef<HTMLElement, ThemeProviderProps>(\n function ThemeProvider({ themeName, children, ...rest }, forwardedRef) {\n return (\n <TokenProvider themeName={themeName}>\n <AlphaTokenProvider themeName={themeName}>\n <Slot\n ref={forwardedRef}\n // TODO: Change data attribute constant to import from bezier-tokens\n data-bezier-theme={themeName}\n {...rest}\n >\n {children}\n </Slot>\n </AlphaTokenProvider>\n </TokenProvider>\n )\n }\n)\n\n/\n `LightThemeProvider` is a wrapper component that provides light theme context.\n \n Components that pass to children must spread props and forward ref.\n /\nexport const LightThemeProvider = forwardRef<\n HTMLElement,\n FixedThemeProviderProps\n>(function LightTheme({ children, ...rest }, forwardedRef) {\n return (\n <ThemeProvider\n ref={forwardedRef}\n themeName=\"light\"\n {...rest}\n >\n {children}\n </ThemeProvider>\n )\n})\n\n/\n `DarkThemeProvider` is a wrapper component that provides dark theme context.\n \n Components that pass to children must spread props and forward ref.\n /\nexport const DarkThemeProvider = forwardRef<\n HTMLElement,\n FixedThemeProviderProps\n>(function DarkTheme({ children, ...rest }, forwardedRef) {\n return (\n <ThemeProvider\n ref={forwardedRef}\n themeName=\"dark\"\n {...rest}\n >\n {children}\n </ThemeProvider>\n )\n})\n\n/\n `InvertedThemeProvider` is a wrapper component that provides inverted theme context.\n */\nexport const InvertedThemeProvider = forwardRef<\n HTMLElement,\n FixedThemeProviderProps\n>(function InvertedTheme({ children, ...rest }, forwardedRef) {\n return (\n <ThemeProvider\n ref={forwardedRef}\n themeName={useThemeName() === 'light' ? 'dark' : 'light'}\n {...rest}\n >\n {children}\n </ThemeProvider>\n )\n})\n"],"names":["useThemeName","useTokenContext","themeName","useTokens","tokens","useAlphaTokens","useAlphaTokenContext","ThemeProvider","forwardRef","children","rest","forwardedRef","_jsx","TokenProvider","AlphaTokenProvider","Slot","ref","LightThemeProvider","LightTheme","DarkThemeProvider","DarkTheme","InvertedThemeProvider","InvertedTheme"],"mappings":"~~;;;;;;;;AAiBA~~;AACA;AACA;AACO,SAASA,YAAYA,GAAG;AAC7B,EAAA,OAAOC,6BAAe,CAAC,cAAc,CAAC,CAACC,SAAS;AAClD;;AAEA;AACA;AACA;AACO,SAASC,SAASA,GAAG;AAC1B,EAAA,OAAOF,6BAAe,CAAC,WAAW,CAAC,CAACG,MAAM;AAC5C;;AAEA;AACA;AACA;AACA;AACO,SAASC,cAAcA,GAAG;AAC/B,EAAA,OAAOC,oCAAoB,CAAC,gBAAgB,CAAC,CAACF,MAAM;AACtD;;AAEA;AACA;AACA;AACA;AACA;~~MACaG~~,aAAa,gBAAGC,gBAAU,CACrC,SAASD,aAAaA,CAAC;~~EAAEL~~,SAAS;~~EAAEO~~,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EACrE,oBACEC,cAAA,CAACC,2BAAa,EAAA;~~AAACX~~,IAAAA,SAAS,EAAEA,SAAU;~~IAAAO~~,QAAA,eAClCG,cAAA,CAACE,6BAAkB,EAAA;~~AAACZ~~,MAAAA,SAAS,EAAEA,SAAU;~~MAAAO~~,QAAA,eACvCG,cAAA,CAACG,UAAI,EAAA;AACHC,~~QAAAA~~,GAAG,~~EAAEL~~;AACL;AAAA;AACA,~~QAAA~~,mBAAA,~~EAAmBT~~,SAAU;AAAA,~~QAAA~~,~~GACzBQ~~,IAAI;AAAAD,~~QAAAA~~,QAAA,EAEPA;~~OACG~~;~~KACY~~;AAAC,GACR,CAAC;AAEpB,CACF;;AAEA;AACA;AACA;AACA;AACA;~~MACaQ~~,kBAAkB,~~gBAAGT~~,gBAAU,CAG1C,~~SAASU~~,UAAUA,CAAC;~~EAAET~~,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EACzD,oBACEC,cAAA,CAACL,aAAa,EAAA;~~AACZS~~,IAAAA,GAAG,~~EAAEL~~,YAAa;~~AAClBT~~,IAAAA,SAAS,EAAC,OAAO;AAAA,IAAA,~~GACbQ~~,IAAI;AAAAD,IAAAA,QAAA,EAEPA;AAAQ,GACI,CAAC;AAEpB,CAAC;;AAED;AACA;AACA;AACA;AACA;~~MACaU~~,iBAAiB,~~gBAAGX~~,gBAAU,CAGzC,~~SAASY~~,SAASA,CAAC;~~EAAEX~~,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EACxD,oBACEC,cAAA,CAACL,aAAa,EAAA;~~AACZS~~,IAAAA,GAAG,~~EAAEL~~,YAAa;~~AAClBT~~,IAAAA,SAAS,EAAC,MAAM;AAAA,IAAA,~~GACZQ~~,IAAI;AAAAD,IAAAA,QAAA,EAEPA;AAAQ,GACI,CAAC;AAEpB,CAAC;;AAED;AACA;AACA;~~MACaY~~,qBAAqB,~~gBAAGb~~,gBAAU,CAG7C,~~SAASc~~,aAAaA,CAAC;~~EAAEb~~,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EAC5D,oBACEC,cAAA,CAACL,aAAa,EAAA;~~AACZS~~,IAAAA,GAAG,~~EAAEL~~,YAAa;~~IAClBT~~,SAAS,EAAEF,YAAY,EAAE,KAAK,OAAO,GAAG,MAAM,GAAG,OAAQ;AAAA,IAAA,~~GACrDU~~,IAAI;AAAAD,IAAAA,QAAA,EAEPA;AAAQ,GACI,CAAC;AAEpB,CAAC~~;;;;;;;;;;~~"}
1	+ {"version":3,"file":"ThemeProvider.js","sources":["../../../../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport {\n AlphaTokenProvider,\n useAlphaTokenContext,\n} from '~/src/components/AlphaTokenProvider'\nimport {\n BetaTokenProvider,\n useBetaTokenContext,\n} from '~/src/components/BetaTokenProvider'\nimport { TokenProvider, useTokenContext } from '~/src/components/TokenProvider'\n\nimport {\n type FixedThemeProviderProps,\n type ThemeProviderProps,\n} from './ThemeProvider.types'\n\n/*\n `useThemeName` is a hook that returns the current theme name.\n /\nexport function useThemeName() {\n return useTokenContext('useThemeName').themeName\n}\n\n/\n `useTokens` is a hook that returns the design tokens of the current theme.\n /\nexport function useTokens() {\n return useTokenContext('useTokens').tokens\n}\n\n/\n `useAlphaTokens` is a hook that returns the alpha tokens of the current theme.\n * @internal\n /\nexport function useAlphaTokens() {\n return useAlphaTokenContext('useAlphaTokens').tokens\n}\n\n/\n `useBetaTokens` is a hook that returns the beta tokens of the current theme.\n * @internal\n /\nexport function useBetaTokens() {\n return useBetaTokenContext('useBetaTokens').tokens\n}\n\n/\n `ThemeProvider` is a wrapper component that provides theme context.\n \n Components that pass to children must spread props and forward ref.\n /\nexport const ThemeProvider = forwardRef<HTMLElement, ThemeProviderProps>(\n function ThemeProvider({ themeName, children, ...rest }, forwardedRef) {\n return (\n <TokenProvider themeName={themeName}>\n <AlphaTokenProvider themeName={themeName}>\n <BetaTokenProvider themeName={themeName}>\n <Slot\n ref={forwardedRef}\n // TODO: Change data attribute constant to import from bezier-tokens\n data-bezier-theme={themeName}\n {...rest}\n >\n {children}\n </Slot>\n </BetaTokenProvider>\n </AlphaTokenProvider>\n </TokenProvider>\n )\n }\n)\n\n/\n `LightThemeProvider` is a wrapper component that provides light theme context.\n \n Components that pass to children must spread props and forward ref.\n /\nexport const LightThemeProvider = forwardRef<\n HTMLElement,\n FixedThemeProviderProps\n>(function LightTheme({ children, ...rest }, forwardedRef) {\n return (\n <ThemeProvider\n ref={forwardedRef}\n themeName=\"light\"\n {...rest}\n >\n {children}\n </ThemeProvider>\n )\n})\n\n/\n `DarkThemeProvider` is a wrapper component that provides dark theme context.\n \n Components that pass to children must spread props and forward ref.\n /\nexport const DarkThemeProvider = forwardRef<\n HTMLElement,\n FixedThemeProviderProps\n>(function DarkTheme({ children, ...rest }, forwardedRef) {\n return (\n <ThemeProvider\n ref={forwardedRef}\n themeName=\"dark\"\n {...rest}\n >\n {children}\n </ThemeProvider>\n )\n})\n\n/\n `InvertedThemeProvider` is a wrapper component that provides inverted theme context.\n */\nexport const InvertedThemeProvider = forwardRef<\n HTMLElement,\n FixedThemeProviderProps\n>(function InvertedTheme({ children, ...rest }, forwardedRef) {\n return (\n <ThemeProvider\n ref={forwardedRef}\n themeName={useThemeName() === 'light' ? 'dark' : 'light'}\n {...rest}\n >\n {children}\n </ThemeProvider>\n )\n})\n"],"names":["useThemeName","useTokenContext","themeName","useTokens","tokens","useAlphaTokens","useAlphaTokenContext","useBetaTokens","useBetaTokenContext","ThemeProvider","forwardRef","children","rest","forwardedRef","_jsx","TokenProvider","AlphaTokenProvider","BetaTokenProvider","Slot","ref","LightThemeProvider","LightTheme","DarkThemeProvider","DarkTheme","InvertedThemeProvider","InvertedTheme"],"mappings":";;;;;;;;;AAqBA;AACA;AACA;AACO,SAASA,YAAYA,GAAG;AAC7B,EAAA,OAAOC,6BAAe,CAAC,cAAc,CAAC,CAACC,SAAS;AAClD;;AAEA;AACA;AACA;AACO,SAASC,SAASA,GAAG;AAC1B,EAAA,OAAOF,6BAAe,CAAC,WAAW,CAAC,CAACG,MAAM;AAC5C;;AAEA;AACA;AACA;AACA;AACO,SAASC,cAAcA,GAAG;AAC/B,EAAA,OAAOC,oCAAoB,CAAC,gBAAgB,CAAC,CAACF,MAAM;AACtD;;AAEA;AACA;AACA;AACA;AACO,SAASG,aAAaA,GAAG;AAC9B,EAAA,OAAOC,mCAAmB,CAAC,eAAe,CAAC,CAACJ,MAAM;AACpD;;AAEA;AACA;AACA;AACA;AACA;MACaK,aAAa,gBAAGC,gBAAU,CACrC,SAASD,aAAaA,CAAC;EAAEP,SAAS;EAAES,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EACrE,oBACEC,cAAA,CAACC,2BAAa,EAAA;AAACb,IAAAA,SAAS,EAAEA,SAAU;IAAAS,QAAA,eAClCG,cAAA,CAACE,6BAAkB,EAAA;AAACd,MAAAA,SAAS,EAAEA,SAAU;MAAAS,QAAA,eACvCG,cAAA,CAACG,6BAAiB,EAAA;AAACf,QAAAA,SAAS,EAAEA,SAAU;QAAAS,QAAA,eACtCG,cAAA,CAACI,UAAI,EAAA;AACHC,UAAAA,GAAG,EAAEN;AACL;AAAA;AACA,UAAA,mBAAA,EAAmBX,SAAU;AAAA,UAAA,GACzBU,IAAI;AAAAD,UAAAA,QAAA,EAEPA;SACG;OACW;KACD;AAAC,GACR,CAAC;AAEpB,CACF;;AAEA;AACA;AACA;AACA;AACA;MACaS,kBAAkB,gBAAGV,gBAAU,CAG1C,SAASW,UAAUA,CAAC;EAAEV,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EACzD,oBACEC,cAAA,CAACL,aAAa,EAAA;AACZU,IAAAA,GAAG,EAAEN,YAAa;AAClBX,IAAAA,SAAS,EAAC,OAAO;AAAA,IAAA,GACbU,IAAI;AAAAD,IAAAA,QAAA,EAEPA;AAAQ,GACI,CAAC;AAEpB,CAAC;;AAED;AACA;AACA;AACA;AACA;MACaW,iBAAiB,gBAAGZ,gBAAU,CAGzC,SAASa,SAASA,CAAC;EAAEZ,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EACxD,oBACEC,cAAA,CAACL,aAAa,EAAA;AACZU,IAAAA,GAAG,EAAEN,YAAa;AAClBX,IAAAA,SAAS,EAAC,MAAM;AAAA,IAAA,GACZU,IAAI;AAAAD,IAAAA,QAAA,EAEPA;AAAQ,GACI,CAAC;AAEpB,CAAC;;AAED;AACA;AACA;MACaa,qBAAqB,gBAAGd,gBAAU,CAG7C,SAASe,aAAaA,CAAC;EAAEd,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,YAAY,EAAE;EAC5D,oBACEC,cAAA,CAACL,aAAa,EAAA;AACZU,IAAAA,GAAG,EAAEN,YAAa;IAClBX,SAAS,EAAEF,YAAY,EAAE,KAAK,OAAO,GAAG,MAAM,GAAG,OAAQ;AAAA,IAAA,GACrDY,IAAI;AAAAD,IAAAA,QAAA,EAEPA;AAAQ,GACI,CAAC;AAEpB,CAAC;;;;;;;;;;;"}

package/dist/cjs/index.js CHANGED Viewed

@@ -2,6 +2,7 @@
 var index = require('./packages/bezier-tokens/dist/esm/index.js');
 var index$1 = require('./packages/bezier-tokens/dist/alpha/esm/index.js');
+var index$2 = require('./packages/bezier-tokens/dist/beta/esm/index.js');
 var useKeyboardActionLockerWhileComposing = require('./hooks/useKeyboardActionLockerWhileComposing.js');
 var Avatar = require('./components/AlphaAvatar/Avatar.js');
 var AvatarGroup = require('./components/AlphaAvatarGroup/AvatarGroup.js');
@@ -81,6 +82,7 @@ var WindowProvider = require('./components/WindowProvider/WindowProvider.js');
 exports.tokens = index.tokens;
 exports.alphaTokens = index$1.tokens;
+exports.betaTokens = index$2.tokens;
 exports.COMMON_IME_CONTROL_KEYS = useKeyboardActionLockerWhileComposing.COMMON_IME_CONTROL_KEYS;
 exports.useKeyboardActionLockerWhileComposing = useKeyboardActionLockerWhileComposing.useKeyboardActionLockerWhileComposing;
 exports.AlphaAvatar = Avatar.Avatar;
@@ -201,6 +203,7 @@ exports.InvertedThemeProvider = ThemeProvider.InvertedThemeProvider;
 exports.LightThemeProvider = ThemeProvider.LightThemeProvider;
 exports.ThemeProvider = ThemeProvider.ThemeProvider;
 exports.useAlphaTokens = ThemeProvider.useAlphaTokens;
+exports.useBetaTokens = ThemeProvider.useBetaTokens;
 exports.useThemeName = ThemeProvider.useThemeName;
 exports.useTokens = ThemeProvider.useTokens;
 exports.ToastProvider = Toast.ToastProvider;

package/dist/cjs/index.js.map CHANGED Viewed

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