npm - @channel.io/bezier-react - Versions diffs - 3.5.2-beta.10 → 3.5.2-beta.11 - Mend

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

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 (61) hide show

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

@@ -21,7 +21,7 @@ const StatusBadge = /*#__PURE__*/React.forwardRef(function StatusBadge({
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: forwardedRef,
     style: {
-      '--b-status-bg-color': style.betaTokenCssVar(backgroundColor),
+      '--b-status-bg-color': style.colorTokenCssVar(backgroundColor),
       ...style$1
     },
     className: index.default(StatusBadge_module.default.StatusBadge, StatusBadge_module.default[`size-${size}`], className),

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 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;;;;"}
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 { colorTokenCssVar } 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': colorTokenCssVar(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","colorTokenCssVar","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,sBAAgB,CAACH,eAAe,CAAC;MACxD,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/Icon/Icon.js CHANGED Viewed

@@ -22,7 +22,7 @@ const Icon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Icon
   return /*#__PURE__*/jsxRuntime.jsx(SourceElement, {
     ref: forwardedRef,
     style: {
-      '--b-icon-color': style.betaTokenCssVar(color),
+      '--b-icon-color': style.colorTokenCssVar(color),
       ...marginStyles.style,
       ...style$1
     },

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, memo } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { ~~betaTokenCssVar~~ } from '~/src/utils/style'\n\nimport { type IconProps } from './Icon.types'\n\nimport styles from './Icon.module.scss'\n\nexport const ICON_TEST_ID = 'bezier-icon'\n\nexport const Icon = memo(\n forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n className,\n size = 'm',\n color,\n source: SourceElement,\n style,\n ...rest\n } = marginRest\n\n return (\n <SourceElement\n ref={forwardedRef}\n style={\n {\n '--b-icon-color': ~~betaTokenCssVar~~(color),\n ...marginStyles.style,\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Icon,\n styles[`size-${size}`],\n marginStyles.className,\n className\n )}\n data-testid={ICON_TEST_ID}\n {...rest}\n />\n )\n })\n)\n"],"names":["ICON_TEST_ID","Icon","memo","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","className","size","color","source","SourceElement","style","rest","_jsx","ref","~~betaTokenCssVar~~","classNames","styles"],"mappings":";;;;;;;;;AAaO,MAAMA,YAAY,GAAG;AAEfC,MAAAA,IAAI,gBAAGC,UAAI,cACtBC,gBAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,GAAG;IACVC,KAAK;AACLC,IAAAA,MAAM,EAAEC,aAAa;WACrBC,OAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,cAAA,CAACH,aAAa,EAAA;AACZI,IAAAA,GAAG,EAAEd,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,gBAAgB,EAAEI,~~qBAAe~~,CAACP,KAAK,CAAC;~~MACxC~~,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEU,aAAU,CACnBC,mBAAM,CAACrB,IAAI,EACXqB,mBAAM,CAAC,QAAQV,IAAI,CAAA,CAAE,CAAC,EACtBH,YAAY,CAACE,SAAS,EACtBA,SACF,CAAE;AACF,IAAA,aAAA,EAAaX,YAAa;IAAA,GACtBiB;AAAI,GACT,CAAC;AAEN,CAAC,CACH;;;;;"}
1	+ {"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, memo } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { colorTokenCssVar } from '~/src/utils/style'\n\nimport { type IconProps } from './Icon.types'\n\nimport styles from './Icon.module.scss'\n\nexport const ICON_TEST_ID = 'bezier-icon'\n\nexport const Icon = memo(\n forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n className,\n size = 'm',\n color,\n source: SourceElement,\n style,\n ...rest\n } = marginRest\n\n return (\n <SourceElement\n ref={forwardedRef}\n style={\n {\n '--b-icon-color': colorTokenCssVar(color),\n ...marginStyles.style,\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Icon,\n styles[`size-${size}`],\n marginStyles.className,\n className\n )}\n data-testid={ICON_TEST_ID}\n {...rest}\n />\n )\n })\n)\n"],"names":["ICON_TEST_ID","Icon","memo","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","className","size","color","source","SourceElement","style","rest","_jsx","ref","colorTokenCssVar","classNames","styles"],"mappings":";;;;;;;;;AAaO,MAAMA,YAAY,GAAG;AAEfC,MAAAA,IAAI,gBAAGC,UAAI,cACtBC,gBAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,GAAG;IACVC,KAAK;AACLC,IAAAA,MAAM,EAAEC,aAAa;WACrBC,OAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,cAAA,CAACH,aAAa,EAAA;AACZI,IAAAA,GAAG,EAAEd,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,gBAAgB,EAAEI,sBAAgB,CAACP,KAAK,CAAC;MACzC,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEU,aAAU,CACnBC,mBAAM,CAACrB,IAAI,EACXqB,mBAAM,CAAC,QAAQV,IAAI,CAAA,CAAE,CAAC,EACtBH,YAAY,CAACE,SAAS,EACtBA,SACF,CAAE;AACF,IAAA,aAAA,EAAaX,YAAa;IAAA,GACtBiB;AAAI,GACT,CAAC;AAEN,CAAC,CACH;;;;;"}

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

@@ -33,14 +33,14 @@ const SmoothCornersBox = /*#__PURE__*/React.forwardRef(function SmoothCornersBox
       '--b-smooth-corners-box-shadow-offset-y': style.px(shadow === null || shadow === void 0 ? void 0 : shadow.offsetY),
       '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,
       '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,
-      '--b-smooth-corners-box-shadow-color': style.betaTokenCssVar(shadow === null || shadow === void 0 ? void 0 : shadow.color),
+      '--b-smooth-corners-box-shadow-color': style.colorTokenCssVar(shadow === null || shadow === void 0 ? void 0 : shadow.color),
       /**
        * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.
        * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}
        */
       '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`,
       '--b-smooth-corners-box-margin': `${margin !== null && margin !== void 0 ? margin : 0}px`,
-      '--b-smooth-corners-box-background-color': style.betaTokenCssVar(backgroundColor),
+      '--b-smooth-corners-box-background-color': style.colorTokenCssVar(backgroundColor),
       '--b-smooth-corners-box-background-image': style.cssUrl(backgroundImage)
     },
     className: index.default(SmoothCornersBox_module.default.SmoothCornersBox, className),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SmoothCornersBox.js","sources":["../../../../src/components/SmoothCornersBox/SmoothCornersBox.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { ~~betaTokenCssVar~~, cssUrl, px } from '~/src/utils/style'\n\nimport { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'\n\nimport { type SmoothCornersBoxProps } from './SmoothCornersBox.types'\n\nimport styles from './SmoothCornersBox.module.scss'\n\n/*\n `SmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n * @example\n \n ```tsx\n * <AppProvider features={[SmoothCornersFeature]}>\n * <SmoothCornersBox />\n * </AppProvider>\n * ```\n /\nexport const SmoothCornersBox = forwardRef<\n HTMLDivElement,\n SmoothCornersBoxProps\n>(function SmoothCornersBox(\n {\n children,\n style,\n className,\n disabled,\n borderRadius,\n margin,\n shadow,\n backgroundColor,\n backgroundImage,\n ...rest\n },\n forwardedRef\n) {\n const shadowBlurRadius = shadow?.blurRadius ?? 0\n const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n ...style,\n '--b-smooth-corners-box-border-radius': borderRadius,\n '--b-smooth-corners-box-shadow-offset-x': px(shadow?.offsetX),\n '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),\n '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,\n '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n '--b-smooth-corners-box-shadow-color': ~~betaTokenCssVar~~(shadow?.color),\n /\n NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.\n * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}\n /\n '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) 2}px`,\n '--b-smooth-corners-box-margin': `${margin ?? 0}px`,\n '--b-smooth-corners-box-background-color':\n ~~betaTokenCssVar~~(backgroundColor),\n '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),\n } as React.CSSProperties\n }\n className={classNames(styles.SmoothCornersBox, className)}\n data-state={\n useFeatureFlag(FeatureType.SmoothCorners) && !disabled\n ? 'enabled'\n : 'disabled'\n }\n >\n {children}\n </div>\n )\n})\n"],"names":["SmoothCornersBox","forwardRef","children","style","className","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","rest","forwardedRef","_shadow$blurRadius","_shadow$spreadRadius","shadowBlurRadius","blurRadius","shadowSpreadRadius","spreadRadius","_jsx","ref","px","offsetX","offsetY","~~betaTokenCssVar~~","color","Math","max","cssUrl","classNames","styles","useFeatureFlag","FeatureType","SmoothCorners"],"mappings":";;;;;;;;;;MA0BaA,gBAAgB,gBAAGC,gBAAU,CAGxC,SAASD,gBAAgBA,CACzB;EACEE,QAAQ;SACRC,OAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;EACf,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EAAA,IAAAC,kBAAA,EAAAC,oBAAA;AACA,EAAA,MAAMC,gBAAgB,GAAAF,CAAAA,kBAAA,GAAGL,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEQ,UAAU,MAAAH,IAAAA,IAAAA,kBAAA,KAAAA,KAAAA,CAAAA,GAAAA,kBAAA,GAAI,CAAC;AAChD,EAAA,MAAMI,kBAAkB,GAAAH,CAAAA,oBAAA,GAAGN,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEU,YAAY,MAAAJ,IAAAA,IAAAA,oBAAA,KAAAA,KAAAA,CAAAA,GAAAA,oBAAA,GAAI,CAAC;AAEpD,EAAA,oBACEK,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMR,IAAI;AACRS,IAAAA,GAAG,EAAER,YAAa;AAClBT,IAAAA,KAAK,EACH;AACE,MAAA,GAAGA,OAAK;AACR,MAAA,sCAAsC,EAAEG,YAAY;MACpD,wCAAwC,EAAEe,QAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEc,OAAO,CAAC;MAC7D,wCAAwC,EAAED,QAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEe,OAAO,CAAC;MAC7D,2CAA2C,EAAE,CAAGR,EAAAA,gBAAgB,CAAI,EAAA,CAAA;MACpE,6CAA6C,EAAE,CAAGE,EAAAA,kBAAkB,CAAI,EAAA,CAAA;MACxE,qCAAqC,EAAEO,~~qBAAe~~,CAAChB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEiB,KAAK,CAAC;~~AACrE~~;AACV;AACA;AACA;AACU,MAAA,gCAAgC,EAAE,CAAA,EAAGC,IAAI,CAACC,GAAG,CAACZ,gBAAgB,EAAEE,kBAAkB,CAAC,GAAG,CAAC,CAAI,EAAA,CAAA;MAC3F,+BAA+B,EAAE,GAAGV,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,MAAM,GAAI,CAAC,CAAI,EAAA,CAAA;AACnD,MAAA,yCAAyC,EACvCiB,~~qBAAe~~,CAACf,eAAe,CAAC;~~MAClC~~,yCAAyC,EAAEmB,YAAM,CAAClB,eAAe;KAEpE;IACDN,SAAS,EAAEyB,aAAU,CAACC,+BAAM,CAAC9B,gBAAgB,EAAEI,SAAS,CAAE;AAC1D,IAAA,YAAA,EACE2B,8BAAc,CAACC,iCAAW,CAACC,aAAa,CAAC,IAAI,CAAC5B,QAAQ,GAClD,SAAS,GACT,UACL;AAAAH,IAAAA,QAAA,EAEAA;AAAQ,GACN,CAAC;AAEV,CAAC;;;;"}
1	+ {"version":3,"file":"SmoothCornersBox.js","sources":["../../../../src/components/SmoothCornersBox/SmoothCornersBox.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { colorTokenCssVar, cssUrl, px } from '~/src/utils/style'\n\nimport { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'\n\nimport { type SmoothCornersBoxProps } from './SmoothCornersBox.types'\n\nimport styles from './SmoothCornersBox.module.scss'\n\n/*\n `SmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n * @example\n \n ```tsx\n * <AppProvider features={[SmoothCornersFeature]}>\n * <SmoothCornersBox />\n * </AppProvider>\n * ```\n /\nexport const SmoothCornersBox = forwardRef<\n HTMLDivElement,\n SmoothCornersBoxProps\n>(function SmoothCornersBox(\n {\n children,\n style,\n className,\n disabled,\n borderRadius,\n margin,\n shadow,\n backgroundColor,\n backgroundImage,\n ...rest\n },\n forwardedRef\n) {\n const shadowBlurRadius = shadow?.blurRadius ?? 0\n const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n ...style,\n '--b-smooth-corners-box-border-radius': borderRadius,\n '--b-smooth-corners-box-shadow-offset-x': px(shadow?.offsetX),\n '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),\n '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,\n '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n '--b-smooth-corners-box-shadow-color': colorTokenCssVar(shadow?.color),\n /\n NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.\n * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}\n /\n '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) 2}px`,\n '--b-smooth-corners-box-margin': `${margin ?? 0}px`,\n '--b-smooth-corners-box-background-color':\n colorTokenCssVar(backgroundColor),\n '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),\n } as React.CSSProperties\n }\n className={classNames(styles.SmoothCornersBox, className)}\n data-state={\n useFeatureFlag(FeatureType.SmoothCorners) && !disabled\n ? 'enabled'\n : 'disabled'\n }\n >\n {children}\n </div>\n )\n})\n"],"names":["SmoothCornersBox","forwardRef","children","style","className","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","rest","forwardedRef","_shadow$blurRadius","_shadow$spreadRadius","shadowBlurRadius","blurRadius","shadowSpreadRadius","spreadRadius","_jsx","ref","px","offsetX","offsetY","colorTokenCssVar","color","Math","max","cssUrl","classNames","styles","useFeatureFlag","FeatureType","SmoothCorners"],"mappings":";;;;;;;;;;MA0BaA,gBAAgB,gBAAGC,gBAAU,CAGxC,SAASD,gBAAgBA,CACzB;EACEE,QAAQ;SACRC,OAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;EACf,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EAAA,IAAAC,kBAAA,EAAAC,oBAAA;AACA,EAAA,MAAMC,gBAAgB,GAAAF,CAAAA,kBAAA,GAAGL,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEQ,UAAU,MAAAH,IAAAA,IAAAA,kBAAA,KAAAA,KAAAA,CAAAA,GAAAA,kBAAA,GAAI,CAAC;AAChD,EAAA,MAAMI,kBAAkB,GAAAH,CAAAA,oBAAA,GAAGN,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEU,YAAY,MAAAJ,IAAAA,IAAAA,oBAAA,KAAAA,KAAAA,CAAAA,GAAAA,oBAAA,GAAI,CAAC;AAEpD,EAAA,oBACEK,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMR,IAAI;AACRS,IAAAA,GAAG,EAAER,YAAa;AAClBT,IAAAA,KAAK,EACH;AACE,MAAA,GAAGA,OAAK;AACR,MAAA,sCAAsC,EAAEG,YAAY;MACpD,wCAAwC,EAAEe,QAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEc,OAAO,CAAC;MAC7D,wCAAwC,EAAED,QAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEe,OAAO,CAAC;MAC7D,2CAA2C,EAAE,CAAGR,EAAAA,gBAAgB,CAAI,EAAA,CAAA;MACpE,6CAA6C,EAAE,CAAGE,EAAAA,kBAAkB,CAAI,EAAA,CAAA;MACxE,qCAAqC,EAAEO,sBAAgB,CAAChB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEiB,KAAK,CAAC;AACtE;AACV;AACA;AACA;AACU,MAAA,gCAAgC,EAAE,CAAA,EAAGC,IAAI,CAACC,GAAG,CAACZ,gBAAgB,EAAEE,kBAAkB,CAAC,GAAG,CAAC,CAAI,EAAA,CAAA;MAC3F,+BAA+B,EAAE,GAAGV,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,MAAM,GAAI,CAAC,CAAI,EAAA,CAAA;AACnD,MAAA,yCAAyC,EACvCiB,sBAAgB,CAACf,eAAe,CAAC;MACnC,yCAAyC,EAAEmB,YAAM,CAAClB,eAAe;KAEpE;IACDN,SAAS,EAAEyB,aAAU,CAACC,+BAAM,CAAC9B,gBAAgB,EAAEI,SAAS,CAAE;AAC1D,IAAA,YAAA,EACE2B,8BAAc,CAACC,iCAAW,CAACC,aAAa,CAAC,IAAI,CAAC5B,QAAQ,GAClD,SAAS,GACT,UACL;AAAAH,IAAAA,QAAA,EAEAA;AAAQ,GACN,CAAC;AAEV,CAAC;;;;"}

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

@@ -17,7 +17,7 @@ const Spinner = /*#__PURE__*/React.forwardRef(function Spinner({
     ...rest,
     ref: forwardedRef,
     style: {
-      '--b-spinner-color': style.betaTokenCssVar(color),
+      '--b-spinner-color': style.colorTokenCssVar(color),
       ...style$1
     },
     className: index.default(Spinner_module.default.Spinner, Spinner_module.default[`size-${size}`], className),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { ~~betaTokenCssVar~~ } from '~/src/utils/style'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n { style, className, size = 'm', color, ...rest },\n forwardedRef\n ) {\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n '--b-spinner-color': ~~betaTokenCssVar~~(color),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Spinner,\n styles[`size-${size}`],\n className\n )}\n key=\"spinner\"\n data-testid={SPINNER_TEST_ID}\n />\n )\n }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","style","className","size","color","rest","forwardedRef","_createElement","ref","~~betaTokenCssVar~~","classNames","styles","key"],"mappings":";;;;;;;AAaO,MAAMA,eAAe,GAAG;MAElBC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;SAAEE,OAAK;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAChDC,YAAY,EACZ;AACA,EAAA,oBACEC,mBAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMF,IAAI;AACRG,IAAAA,GAAG,EAAEF,YAAa;AAClBL,IAAAA,KAAK,EACH;AACE,MAAA,mBAAmB,EAAEQ,~~qBAAe~~,CAACL,KAAK,CAAC;~~MAC3C~~,GAAGH;KAEN;AACDC,IAAAA,SAAS,EAAEQ,aAAU,CACnBC,sBAAM,CAACZ,OAAO,EACdY,sBAAM,CAAC,QAAQR,IAAI,CAAA,CAAE,CAAC,EACtBD,SACF,CAAE;AACFU,IAAAA,GAAG,EAAC,SAAS;IACb,aAAad,EAAAA;AAAgB,GAC9B,CAAC;AAEN,CACF;;;;;"}
1	+ {"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { colorTokenCssVar } from '~/src/utils/style'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n { style, className, size = 'm', color, ...rest },\n forwardedRef\n ) {\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n '--b-spinner-color': colorTokenCssVar(color),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Spinner,\n styles[`size-${size}`],\n className\n )}\n key=\"spinner\"\n data-testid={SPINNER_TEST_ID}\n />\n )\n }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","style","className","size","color","rest","forwardedRef","_createElement","ref","colorTokenCssVar","classNames","styles","key"],"mappings":";;;;;;;AAaO,MAAMA,eAAe,GAAG;MAElBC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;SAAEE,OAAK;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAChDC,YAAY,EACZ;AACA,EAAA,oBACEC,mBAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMF,IAAI;AACRG,IAAAA,GAAG,EAAEF,YAAa;AAClBL,IAAAA,KAAK,EACH;AACE,MAAA,mBAAmB,EAAEQ,sBAAgB,CAACL,KAAK,CAAC;MAC5C,GAAGH;KAEN;AACDC,IAAAA,SAAS,EAAEQ,aAAU,CACnBC,sBAAM,CAACZ,OAAO,EACdY,sBAAM,CAAC,QAAQR,IAAI,CAAA,CAAE,CAAC,EACtBD,SACF,CAAE;AACFU,IAAAA,GAAG,EAAC,SAAS;IACb,aAAad,EAAAA;AAAgB,GAC9B,CAAC;AAEN,CACF;;;;;"}

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

@@ -32,7 +32,7 @@ const Status = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function St
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: forwardedRef,
     style: {
-      '--b-status-bg-color': style.betaTokenCssVar(backgroundColor),
+      '--b-status-bg-color': style.colorTokenCssVar(backgroundColor),
       ...style$1
     },
     className: index.default(Status_module.default.Status, Status_module.default[`size-${size}`], className),

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 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;;;;"}
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 { colorTokenCssVar } 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': colorTokenCssVar(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","colorTokenCssVar","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,sBAAgB,CAACH,eAAe,CAAC;MACxD,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/Text/Text.js CHANGED Viewed

@@ -40,7 +40,7 @@ const Text = /*#__PURE__*/React.forwardRef(function Text(props, forwardedRef) {
   return /*#__PURE__*/React.createElement(as, {
     ref: forwardedRef,
     style: {
-      '--b-text-color': style.betaTokenCssVar(color),
+      '--b-text-color': style.colorTokenCssVar(color),
       '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,
       ...marginStyles.style,
       ...style$1

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { ~~betaTokenCssVar~~ } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\n/*\n `Text` is a component for representing the typography of a design system.\n * @example\n \n ```tsx\n * <Text\n * typo=\"15\"\n * color=\"text-neutral\"\n * >\n * Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n function Text(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n children,\n style,\n className,\n as = 'span',\n typo = '15',\n color,\n bold,\n italic,\n truncated,\n align,\n ...rest\n } = marginRest\n const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-text-color': ~~betaTokenCssVar~~(color),\n '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n ...marginStyles.style,\n ...style,\n },\n className: classNames(\n styles.Text,\n styles[`typo-${typo}`],\n bold && styles.bold,\n italic && styles.italic,\n truncated === true\n ? styles.truncated\n : isMultiLineTruncated && styles['multi-line-truncated'],\n align && styles[`align-${align}`],\n marginStyles.className,\n className\n ),\n 'data-testid': 'bezier-text',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","~~betaTokenCssVar~~","undefined","classNames","styles"],"mappings":";;;;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAAI,gBAAGC,gBAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGd,UAAU;EACd,MAAMe,oBAAoB,GAAGC,aAAQ,CAACJ,SAAS,CAAC,IAAIA,SAAS,IAAI,CAAC;EAElE,oBAAOK,mBAAa,CAClBV,EAAE,EACF;AACEW,IAAAA,GAAG,EAAEpB,YAAY;AACjBO,IAAAA,KAAK,EAAE;AACL,MAAA,gBAAgB,EAAEc,~~qBAAe~~,CAACV,KAAK,CAAC;~~AACxC~~,MAAA,qBAAqB,EAAEM,oBAAoB,GAAGH,SAAS,GAAGQ,SAAS;MACnE,GAAGlB,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;IACDC,SAAS,EAAEe,aAAU,CACnBC,mBAAM,CAAC3B,IAAI,EACX2B,mBAAM,CAAC,CAAA,KAAA,EAAQd,IAAI,CAAA,CAAE,CAAC,EACtBE,IAAI,IAAIY,mBAAM,CAACZ,IAAI,EACnBC,MAAM,IAAIW,mBAAM,CAACX,MAAM,EACvBC,SAAS,KAAK,IAAI,GACdU,mBAAM,CAACV,SAAS,GAChBG,oBAAoB,IAAIO,mBAAM,CAAC,sBAAsB,CAAC,EAC1DT,KAAK,IAAIS,mBAAM,CAAC,CAAST,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCX,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,aAAa;IAC5B,GAAGQ;GACJ,EACDV,QACF,CAAC;AACH,CACF;;;;"}
1	+ {"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { colorTokenCssVar } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\n/*\n `Text` is a component for representing the typography of a design system.\n * @example\n \n ```tsx\n * <Text\n * typo=\"15\"\n * color=\"text-neutral\"\n * >\n * Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n function Text(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n children,\n style,\n className,\n as = 'span',\n typo = '15',\n color,\n bold,\n italic,\n truncated,\n align,\n ...rest\n } = marginRest\n const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-text-color': colorTokenCssVar(color),\n '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n ...marginStyles.style,\n ...style,\n },\n className: classNames(\n styles.Text,\n styles[`typo-${typo}`],\n bold && styles.bold,\n italic && styles.italic,\n truncated === true\n ? styles.truncated\n : isMultiLineTruncated && styles['multi-line-truncated'],\n align && styles[`align-${align}`],\n marginStyles.className,\n className\n ),\n 'data-testid': 'bezier-text',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","colorTokenCssVar","undefined","classNames","styles"],"mappings":";;;;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAAI,gBAAGC,gBAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGd,UAAU;EACd,MAAMe,oBAAoB,GAAGC,aAAQ,CAACJ,SAAS,CAAC,IAAIA,SAAS,IAAI,CAAC;EAElE,oBAAOK,mBAAa,CAClBV,EAAE,EACF;AACEW,IAAAA,GAAG,EAAEpB,YAAY;AACjBO,IAAAA,KAAK,EAAE;AACL,MAAA,gBAAgB,EAAEc,sBAAgB,CAACV,KAAK,CAAC;AACzC,MAAA,qBAAqB,EAAEM,oBAAoB,GAAGH,SAAS,GAAGQ,SAAS;MACnE,GAAGlB,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;IACDC,SAAS,EAAEe,aAAU,CACnBC,mBAAM,CAAC3B,IAAI,EACX2B,mBAAM,CAAC,CAAA,KAAA,EAAQd,IAAI,CAAA,CAAE,CAAC,EACtBE,IAAI,IAAIY,mBAAM,CAACZ,IAAI,EACnBC,MAAM,IAAIW,mBAAM,CAACX,MAAM,EACvBC,SAAS,KAAK,IAAI,GACdU,mBAAM,CAACV,SAAS,GAChBG,oBAAoB,IAAIO,mBAAM,CAAC,sBAAsB,CAAC,EAC1DT,KAAK,IAAIS,mBAAM,CAAC,CAAST,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCX,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,aAAa;IAC5B,GAAGQ;GACJ,EACDV,QACF,CAAC;AACH,CACF;;;;"}

package/dist/cjs/types/props-helpers.js CHANGED Viewed

@@ -191,8 +191,8 @@ const getLayoutStyles = ({
     '--b-basis': style.cssDimension(basis),
     '--b-shrink': shrink,
     '--b-grow': grow,
-    '--b-background-color': style.betaTokenCssVar(backgroundColor),
-    '--b-border-color': style.betaTokenCssVar(borderColor),
+    '--b-background-color': style.colorTokenCssVar(backgroundColor),
+    '--b-border-color': style.colorTokenCssVar(borderColor),
     '--b-border-width': style.cssDimension(borderWidth),
     '--b-border-top-width': style.cssDimension(borderTopWidth),
     '--b-border-right-width': style.cssDimension(borderRightWidth),

package/dist/cjs/types/props-helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"props-helpers.js","sources":["../../../src/types/props-helpers.ts"],"sourcesContent":["import classNames from 'classnames'\n\nimport {\n type BetaElevation,\n type BetaRadius,\n type BetaZIndex,\n} from '~/src/types/beta-tokens'\nimport {\n type FormFieldSize,\n type LayoutProps,\n type MarginProps,\n} from '~/src/types/props'\nimport { betaTokenCssVar, cssDimension } from '~/src/utils/style'\n\n// NOTE: 'typescript-plugin-css-modules' does not support path alias\n/* eslint-disable no-restricted-imports /\nimport elevationStyles from '../styles/components/elevation.module.scss'\nimport formFieldSizeStyles from '../styles/components/form-field-size.module.scss'\nimport layoutStyles from '../styles/components/layout.module.scss'\nimport marginStyles from '../styles/components/margin.module.scss'\nimport radiusStyles from '../styles/components/radius.module.scss'\nimport zIndexStyles from '../styles/components/z-index.module.scss'\n/ eslint-enable no-restricted-imports */\n\nexport const splitByMarginProps = <Props extends MarginProps>({\n margin,\n marginHorizontal,\n marginVertical,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n ...rest\n}: Props): [MarginProps, Omit<Props, keyof MarginProps>] => [\n {\n margin,\n marginHorizontal,\n marginVertical,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n },\n rest,\n]\n\nexport const splitByLayoutProps = <Props extends LayoutProps>({\n padding,\n paddingHorizontal,\n paddingVertical,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n width,\n height,\n maxWidth,\n minWidth,\n maxHeight,\n minHeight,\n position,\n inset,\n top,\n right,\n bottom,\n left,\n basis,\n shrink,\n grow,\n backgroundColor,\n borderColor,\n borderRadius,\n borderWidth,\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n elevation,\n zIndex,\n overflow,\n overflowX,\n overflowY,\n ...rest\n}: Props): [LayoutProps, Omit<Props, keyof LayoutProps>] => [\n {\n padding,\n paddingHorizontal,\n paddingVertical,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n width,\n height,\n maxWidth,\n minWidth,\n maxHeight,\n minHeight,\n position,\n inset,\n top,\n right,\n bottom,\n left,\n basis,\n shrink,\n grow,\n backgroundColor,\n borderColor,\n borderRadius,\n borderWidth,\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n elevation,\n zIndex,\n overflow,\n overflowX,\n overflowY,\n },\n rest,\n]\n\nfunction getElevationClassName(elevation: BetaElevation) {\n return elevationStyles[`elevation-${elevation}`]\n}\n\nfunction getRadiusClassName(radius: BetaRadius) {\n return radiusStyles[`radius-${radius}`]\n}\n\nexport function getZIndexClassName(zIndex: BetaZIndex) {\n return zIndexStyles[`z-index-${zIndex}`]\n}\n\nexport const getMarginStyles = ({\n margin,\n marginHorizontal,\n marginVertical,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n}: MarginProps) => ({\n style: {\n '--b-margin': cssDimension(margin),\n '--b-margin-horizontal': cssDimension(marginHorizontal),\n '--b-margin-vertical': cssDimension(marginVertical),\n '--b-margin-top': cssDimension(marginTop),\n '--b-margin-right': cssDimension(marginRight),\n '--b-margin-bottom': cssDimension(marginBottom),\n '--b-margin-left': cssDimension(marginLeft),\n },\n className: marginStyles.margin,\n})\n\nexport const getLayoutStyles = ({\n padding,\n paddingHorizontal,\n paddingVertical,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n width,\n height,\n maxWidth,\n minWidth,\n maxHeight,\n minHeight,\n position,\n inset,\n top,\n right,\n bottom,\n left,\n basis,\n shrink,\n grow,\n backgroundColor,\n borderColor,\n borderRadius,\n borderWidth,\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n elevation,\n zIndex,\n overflow,\n overflowX,\n overflowY,\n}: LayoutProps) => ({\n style: {\n '--b-padding': cssDimension(padding),\n '--b-padding-horizontal': cssDimension(paddingHorizontal),\n '--b-padding-vertical': cssDimension(paddingVertical),\n '--b-padding-top': cssDimension(paddingTop),\n '--b-padding-right': cssDimension(paddingRight),\n '--b-padding-bottom': cssDimension(paddingBottom),\n '--b-padding-left': cssDimension(paddingLeft),\n '--b-width': cssDimension(width),\n '--b-height': cssDimension(height),\n '--b-max-width': cssDimension(maxWidth),\n '--b-min-width': cssDimension(minWidth),\n '--b-max-height': cssDimension(maxHeight),\n '--b-min-height': cssDimension(minHeight),\n '--b-inset': cssDimension(inset),\n '--b-top': cssDimension(top),\n '--b-right': cssDimension(right),\n '--b-bottom': cssDimension(bottom),\n '--b-left': cssDimension(left),\n '--b-basis': cssDimension(basis),\n '--b-shrink': shrink,\n '--b-grow': grow,\n '--b-background-color': betaTokenCssVar(backgroundColor),\n '--b-border-color': betaTokenCssVar(borderColor),\n '--b-border-width': cssDimension(borderWidth),\n '--b-border-top-width': cssDimension(borderTopWidth),\n '--b-border-right-width': cssDimension(borderRightWidth),\n '--b-border-bottom-width': cssDimension(borderBottomWidth),\n '--b-border-left-width': cssDimension(borderLeftWidth),\n },\n className: classNames(\n layoutStyles.layout,\n position && layoutStyles[`position-${position}`],\n overflow && layoutStyles[`overflow-${overflow}`],\n overflowX && layoutStyles[`overflow-x-${overflowX}`],\n overflowY && layoutStyles[`overflow-y-${overflowY}`],\n elevation && getElevationClassName(elevation),\n borderRadius && getRadiusClassName(borderRadius),\n zIndex && getZIndexClassName(zIndex)\n ),\n})\n\nexport function getFormFieldSizeClassName(size: FormFieldSize) {\n return formFieldSizeStyles[`size-${size}`]\n}\n"],"names":["splitByMarginProps","margin","marginHorizontal","marginVertical","marginTop","marginRight","marginBottom","marginLeft","rest","splitByLayoutProps","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","width","height","maxWidth","minWidth","maxHeight","minHeight","position","inset","top","right","bottom","left","basis","shrink","grow","backgroundColor","borderColor","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","elevation","zIndex","overflow","overflowX","overflowY","getElevationClassName","elevationStyles","getRadiusClassName","radius","radiusStyles","getZIndexClassName","zIndexStyles","getMarginStyles","style","cssDimension","className","marginStyles","getLayoutStyles","betaTokenCssVar","classNames","layoutStyles","layout","getFormFieldSizeClassName","size","formFieldSizeStyles"],"mappings":";;;;;;;;;;;AAsBA;;AAEO,MAAMA,kBAAkB,GAAGA,CAA4B;EAC5DC,MAAM;EACNC,gBAAgB;EAChBC,cAAc;EACdC,SAAS;EACTC,WAAW;EACXC,YAAY;EACZC,UAAU;EACV,GAAGC;AACE,CAAC,KAAoD,CAC1D;EACEP,MAAM;EACNC,gBAAgB;EAChBC,cAAc;EACdC,SAAS;EACTC,WAAW;EACXC,YAAY;AACZC,EAAAA;AACF,CAAC,EACDC,IAAI;AAGC,MAAMC,kBAAkB,GAAGA,CAA4B;EAC5DC,OAAO;EACPC,iBAAiB;EACjBC,eAAe;EACfC,UAAU;EACVC,YAAY;EACZC,aAAa;EACbC,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,GAAG;EACHC,KAAK;EACLC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,IAAI;EACJC,eAAe;EACfC,WAAW;EACXC,YAAY;EACZC,WAAW;EACXC,cAAc;EACdC,gBAAgB;EAChBC,iBAAiB;EACjBC,eAAe;EACfC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACT,GAAGpC;AACE,CAAC,KAAoD,CAC1D;EACEE,OAAO;EACPC,iBAAiB;EACjBC,eAAe;EACfC,UAAU;EACVC,YAAY;EACZC,aAAa;EACbC,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,GAAG;EACHC,KAAK;EACLC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,IAAI;EACJC,eAAe;EACfC,WAAW;EACXC,YAAY;EACZC,WAAW;EACXC,cAAc;EACdC,gBAAgB;EAChBC,iBAAiB;EACjBC,eAAe;EACfC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,SAAS;AACTC,EAAAA;AACF,CAAC,EACDpC,IAAI;AAGN,SAASqC,qBAAqBA,CAACL,SAAwB,EAAE;AACvD,EAAA,OAAOM,wBAAe,CAAC,CAAaN,UAAAA,EAAAA,SAAS,EAAE,CAAC;AAClD;AAEA,SAASO,kBAAkBA,CAACC,MAAkB,EAAE;AAC9C,EAAA,OAAOC,qBAAY,CAAC,CAAUD,OAAAA,EAAAA,MAAM,EAAE,CAAC;AACzC;AAEO,SAASE,kBAAkBA,CAACT,MAAkB,EAAE;AACrD,EAAA,OAAOU,qBAAY,CAAC,CAAWV,QAAAA,EAAAA,MAAM,EAAE,CAAC;AAC1C;AAEO,MAAMW,eAAe,GAAGA,CAAC;EAC9BnD,MAAM;EACNC,gBAAgB;EAChBC,cAAc;EACdC,SAAS;EACTC,WAAW;EACXC,YAAY;AACZC,EAAAA;AACW,CAAC,MAAM;AAClB8C,EAAAA,KAAK,EAAE;AACL,IAAA,YAAY,EAAEC,kBAAY,CAACrD,MAAM,CAAC;AAClC,IAAA,uBAAuB,EAAEqD,kBAAY,CAACpD,gBAAgB,CAAC;AACvD,IAAA,qBAAqB,EAAEoD,kBAAY,CAACnD,cAAc,CAAC;AACnD,IAAA,gBAAgB,EAAEmD,kBAAY,CAAClD,SAAS,CAAC;AACzC,IAAA,kBAAkB,EAAEkD,kBAAY,CAACjD,WAAW,CAAC;AAC7C,IAAA,mBAAmB,EAAEiD,kBAAY,CAAChD,YAAY,CAAC;IAC/C,iBAAiB,EAAEgD,kBAAY,CAAC/C,UAAU;GAC3C;EACDgD,SAAS,EAAEC,qBAAY,CAACvD;AAC1B,CAAC;AAEM,MAAMwD,eAAe,GAAGA,CAAC;EAC9B/C,OAAO;EACPC,iBAAiB;EACjBC,eAAe;EACfC,UAAU;EACVC,YAAY;EACZC,aAAa;EACbC,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,GAAG;EACHC,KAAK;EACLC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,IAAI;EACJC,eAAe;EACfC,WAAW;EACXC,YAAY;EACZC,WAAW;EACXC,cAAc;EACdC,gBAAgB;EAChBC,iBAAiB;EACjBC,eAAe;EACfC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,SAAS;AACTC,EAAAA;AACW,CAAC,MAAM;AAClBS,EAAAA,KAAK,EAAE;AACL,IAAA,aAAa,EAAEC,kBAAY,CAAC5C,OAAO,CAAC;AACpC,IAAA,wBAAwB,EAAE4C,kBAAY,CAAC3C,iBAAiB,CAAC;AACzD,IAAA,sBAAsB,EAAE2C,kBAAY,CAAC1C,eAAe,CAAC;AACrD,IAAA,iBAAiB,EAAE0C,kBAAY,CAACzC,UAAU,CAAC;AAC3C,IAAA,mBAAmB,EAAEyC,kBAAY,CAACxC,YAAY,CAAC;AAC/C,IAAA,oBAAoB,EAAEwC,kBAAY,CAACvC,aAAa,CAAC;AACjD,IAAA,kBAAkB,EAAEuC,kBAAY,CAACtC,WAAW,CAAC;AAC7C,IAAA,WAAW,EAAEsC,kBAAY,CAACrC,KAAK,CAAC;AAChC,IAAA,YAAY,EAAEqC,kBAAY,CAACpC,MAAM,CAAC;AAClC,IAAA,eAAe,EAAEoC,kBAAY,CAACnC,QAAQ,CAAC;AACvC,IAAA,eAAe,EAAEmC,kBAAY,CAAClC,QAAQ,CAAC;AACvC,IAAA,gBAAgB,EAAEkC,kBAAY,CAACjC,SAAS,CAAC;AACzC,IAAA,gBAAgB,EAAEiC,kBAAY,CAAChC,SAAS,CAAC;AACzC,IAAA,WAAW,EAAEgC,kBAAY,CAAC9B,KAAK,CAAC;AAChC,IAAA,SAAS,EAAE8B,kBAAY,CAAC7B,GAAG,CAAC;AAC5B,IAAA,WAAW,EAAE6B,kBAAY,CAAC5B,KAAK,CAAC;AAChC,IAAA,YAAY,EAAE4B,kBAAY,CAAC3B,MAAM,CAAC;AAClC,IAAA,UAAU,EAAE2B,kBAAY,CAAC1B,IAAI,CAAC;AAC9B,IAAA,WAAW,EAAE0B,kBAAY,CAACzB,KAAK,CAAC;AAChC,IAAA,YAAY,EAAEC,MAAM;AACpB,IAAA,UAAU,EAAEC,IAAI;AAChB,IAAA,sBAAsB,EAAE2B,qBAAe,CAAC1B,eAAe,CAAC;AACxD,IAAA,kBAAkB,EAAE0B,qBAAe,CAACzB,WAAW,CAAC;AAChD,IAAA,kBAAkB,EAAEqB,kBAAY,CAACnB,WAAW,CAAC;AAC7C,IAAA,sBAAsB,EAAEmB,kBAAY,CAAClB,cAAc,CAAC;AACpD,IAAA,wBAAwB,EAAEkB,kBAAY,CAACjB,gBAAgB,CAAC;AACxD,IAAA,yBAAyB,EAAEiB,kBAAY,CAAChB,iBAAiB,CAAC;IAC1D,uBAAuB,EAAEgB,kBAAY,CAACf,eAAe;GACtD;AACDgB,EAAAA,SAAS,EAAEI,aAAU,CACnBC,qBAAY,CAACC,MAAM,EACnBtC,QAAQ,IAAIqC,qBAAY,CAAC,CAAA,SAAA,EAAYrC,QAAQ,CAAA,CAAE,CAAC,EAChDmB,QAAQ,IAAIkB,qBAAY,CAAC,CAAYlB,SAAAA,EAAAA,QAAQ,CAAE,CAAA,CAAC,EAChDC,SAAS,IAAIiB,qBAAY,CAAC,CAAcjB,WAAAA,EAAAA,SAAS,CAAE,CAAA,CAAC,EACpDC,SAAS,IAAIgB,qBAAY,CAAC,CAAA,WAAA,EAAchB,SAAS,CAAA,CAAE,CAAC,EACpDJ,SAAS,IAAIK,qBAAqB,CAACL,SAAS,CAAC,EAC7CN,YAAY,IAAIa,kBAAkB,CAACb,YAAY,CAAC,EAChDO,MAAM,IAAIS,kBAAkB,CAACT,MAAM,CACrC;AACF,CAAC;AAEM,SAASqB,yBAAyBA,CAACC,IAAmB,EAAE;AAC7D,EAAA,OAAOC,4BAAmB,CAAC,CAAQD,KAAAA,EAAAA,IAAI,EAAE,CAAC;AAC5C;;;;;;;;;"}
1	+ {"version":3,"file":"props-helpers.js","sources":["../../../src/types/props-helpers.ts"],"sourcesContent":["import classNames from 'classnames'\n\nimport { colorTokenCssVar, cssDimension } from '~/src/utils/style'\n\n// NOTE: 'typescript-plugin-css-modules' does not support path alias\n/* eslint-disable no-restricted-imports /\nimport elevationStyles from '../styles/components/elevation.module.scss'\nimport formFieldSizeStyles from '../styles/components/form-field-size.module.scss'\nimport layoutStyles from '../styles/components/layout.module.scss'\nimport marginStyles from '../styles/components/margin.module.scss'\nimport radiusStyles from '../styles/components/radius.module.scss'\nimport zIndexStyles from '../styles/components/z-index.module.scss'\n/ eslint-enable no-restricted-imports */\n\nimport {\n type BetaElevation,\n type BetaRadius,\n type BetaZIndex,\n} from './beta-tokens'\nimport { type FormFieldSize, type LayoutProps, type MarginProps } from './props'\nimport { type Elevation, type Radius, type ZIndex } from './tokens'\n\nexport const splitByMarginProps = <Props extends MarginProps>({\n margin,\n marginHorizontal,\n marginVertical,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n ...rest\n}: Props): [MarginProps, Omit<Props, keyof MarginProps>] => [\n {\n margin,\n marginHorizontal,\n marginVertical,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n },\n rest,\n]\n\nexport const splitByLayoutProps = <Props extends LayoutProps>({\n padding,\n paddingHorizontal,\n paddingVertical,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n width,\n height,\n maxWidth,\n minWidth,\n maxHeight,\n minHeight,\n position,\n inset,\n top,\n right,\n bottom,\n left,\n basis,\n shrink,\n grow,\n backgroundColor,\n borderColor,\n borderRadius,\n borderWidth,\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n elevation,\n zIndex,\n overflow,\n overflowX,\n overflowY,\n ...rest\n}: Props): [LayoutProps, Omit<Props, keyof LayoutProps>] => [\n {\n padding,\n paddingHorizontal,\n paddingVertical,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n width,\n height,\n maxWidth,\n minWidth,\n maxHeight,\n minHeight,\n position,\n inset,\n top,\n right,\n bottom,\n left,\n basis,\n shrink,\n grow,\n backgroundColor,\n borderColor,\n borderRadius,\n borderWidth,\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n elevation,\n zIndex,\n overflow,\n overflowX,\n overflowY,\n },\n rest,\n]\n\nfunction getElevationClassName(elevation: Elevation \| BetaElevation) {\n return elevationStyles[`elevation-${elevation}`]\n}\n\nfunction getRadiusClassName(radius: Radius \| BetaRadius) {\n return radiusStyles[`radius-${radius}`]\n}\n\nexport function getZIndexClassName(zIndex: ZIndex \| BetaZIndex) {\n return zIndexStyles[`z-index-${zIndex}`]\n}\n\nexport const getMarginStyles = ({\n margin,\n marginHorizontal,\n marginVertical,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n}: MarginProps) => ({\n style: {\n '--b-margin': cssDimension(margin),\n '--b-margin-horizontal': cssDimension(marginHorizontal),\n '--b-margin-vertical': cssDimension(marginVertical),\n '--b-margin-top': cssDimension(marginTop),\n '--b-margin-right': cssDimension(marginRight),\n '--b-margin-bottom': cssDimension(marginBottom),\n '--b-margin-left': cssDimension(marginLeft),\n },\n className: marginStyles.margin,\n})\n\nexport const getLayoutStyles = ({\n padding,\n paddingHorizontal,\n paddingVertical,\n paddingTop,\n paddingRight,\n paddingBottom,\n paddingLeft,\n width,\n height,\n maxWidth,\n minWidth,\n maxHeight,\n minHeight,\n position,\n inset,\n top,\n right,\n bottom,\n left,\n basis,\n shrink,\n grow,\n backgroundColor,\n borderColor,\n borderRadius,\n borderWidth,\n borderTopWidth,\n borderRightWidth,\n borderBottomWidth,\n borderLeftWidth,\n elevation,\n zIndex,\n overflow,\n overflowX,\n overflowY,\n}: LayoutProps) => ({\n style: {\n '--b-padding': cssDimension(padding),\n '--b-padding-horizontal': cssDimension(paddingHorizontal),\n '--b-padding-vertical': cssDimension(paddingVertical),\n '--b-padding-top': cssDimension(paddingTop),\n '--b-padding-right': cssDimension(paddingRight),\n '--b-padding-bottom': cssDimension(paddingBottom),\n '--b-padding-left': cssDimension(paddingLeft),\n '--b-width': cssDimension(width),\n '--b-height': cssDimension(height),\n '--b-max-width': cssDimension(maxWidth),\n '--b-min-width': cssDimension(minWidth),\n '--b-max-height': cssDimension(maxHeight),\n '--b-min-height': cssDimension(minHeight),\n '--b-inset': cssDimension(inset),\n '--b-top': cssDimension(top),\n '--b-right': cssDimension(right),\n '--b-bottom': cssDimension(bottom),\n '--b-left': cssDimension(left),\n '--b-basis': cssDimension(basis),\n '--b-shrink': shrink,\n '--b-grow': grow,\n '--b-background-color': colorTokenCssVar(backgroundColor),\n '--b-border-color': colorTokenCssVar(borderColor),\n '--b-border-width': cssDimension(borderWidth),\n '--b-border-top-width': cssDimension(borderTopWidth),\n '--b-border-right-width': cssDimension(borderRightWidth),\n '--b-border-bottom-width': cssDimension(borderBottomWidth),\n '--b-border-left-width': cssDimension(borderLeftWidth),\n },\n className: classNames(\n layoutStyles.layout,\n position && layoutStyles[`position-${position}`],\n overflow && layoutStyles[`overflow-${overflow}`],\n overflowX && layoutStyles[`overflow-x-${overflowX}`],\n overflowY && layoutStyles[`overflow-y-${overflowY}`],\n elevation && getElevationClassName(elevation),\n borderRadius && getRadiusClassName(borderRadius),\n zIndex && getZIndexClassName(zIndex)\n ),\n})\n\nexport function getFormFieldSizeClassName(size: FormFieldSize) {\n return formFieldSizeStyles[`size-${size}`]\n}\n"],"names":["splitByMarginProps","margin","marginHorizontal","marginVertical","marginTop","marginRight","marginBottom","marginLeft","rest","splitByLayoutProps","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","width","height","maxWidth","minWidth","maxHeight","minHeight","position","inset","top","right","bottom","left","basis","shrink","grow","backgroundColor","borderColor","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","elevation","zIndex","overflow","overflowX","overflowY","getElevationClassName","elevationStyles","getRadiusClassName","radius","radiusStyles","getZIndexClassName","zIndexStyles","getMarginStyles","style","cssDimension","className","marginStyles","getLayoutStyles","colorTokenCssVar","classNames","layoutStyles","layout","getFormFieldSizeClassName","size","formFieldSizeStyles"],"mappings":"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"}

package/dist/cjs/utils/style.js CHANGED Viewed

@@ -43,24 +43,21 @@ function cssVar(propertyName) {
 }
 /**
- * Wrapper function for `cssVar` to handle tokens specifically.
- * It generates a CSS variable string for a given design token.
- * For beta color tokens (v3), it adds the 'color-' prefix to match CSS variable names.
- * For v1 tokens, it uses the token name directly.
+ * Wrapper function for `cssVar` to handle beta semantic color tokens specifically.
+ * It generates a CSS variable string for a given beta semantic color token.
+ * (e.g. `text-neutral` -> `var(--color-text-neutral)`).
  */
-function betaTokenCssVar(propertyName) {
+function colorTokenCssVar(propertyName) {
   if (!propertyName) {
     return undefined;
   }
-  // Beta color tokens (v3) need 'color-' prefix for CSS variables
-  // Check if the token starts with known beta color token prefixes
-  const betaColorTokenPrefixes = ['text-', 'icon-', 'fill-', 'border-', 'surface-', 'dim-', 'state-', 'elevation-'];
-  const betaBaseTokens = ['surface'];
-  const isBetaColorToken = betaColorTokenPrefixes.some(prefix => propertyName.startsWith(prefix)) || betaBaseTokens.includes(propertyName);
-  if (isBetaColorToken) {
-    return cssVar(`color-${propertyName}`);
+  const betaColorTokenPrefixes = ['text', 'icon', 'fill', 'border', 'surface', 'dim', 'state', 'elevation'];
+  /** @todo @timo Remove this condition in the next major release. */
+  if (!betaColorTokenPrefixes.some(prefix => propertyName.startsWith(prefix))) {
+    return cssVar(`${propertyName}`);
   }
-  return cssVar(propertyName);
+  return cssVar(`color-${propertyName}`);
 }
 /**
@@ -70,7 +67,7 @@ function cssUrl(url) {
   return type.isNil(url) ? undefined : `url(${url})`;
 }
-exports.betaTokenCssVar = betaTokenCssVar;
+exports.colorTokenCssVar = colorTokenCssVar;
 exports.cssDimension = cssDimension;
 exports.cssUrl = cssUrl;
 exports.cssVar = cssVar;

package/dist/cjs/utils/style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.js","sources":["../../../src/utils/style.ts"],"sourcesContent":["import type {\n BetaFlattenAllToken,\n BetaSemanticColor,\n} from '~/src/types/beta-tokens'\nimport type {\n FlattenAllToken~~,\n FlattenAllToken~~ ~~as V1FlattenAllToken,\n~~ SemanticColor ~~as V1SemanticColor,\n~~} from '~/src/types/tokens'\nimport { isNil, isString } from '~~~/src/utils/~~type'\n\n/*\n Convert a number to a string with `px` suffix.\n * If the value is `0`, it will return `0` instead of `0px`.\n /\nexport function px<Value extends number>(value?: Value) {\n if (isNil(value)) {\n return undefined\n }\n if (value !== 0) {\n return `${value}px` as const\n }\n return value as 0\n}\n\n/\n Convert a number or string to a string with `px` suffix.\n * If the value is `0`, it will return `0` instead of `0px`.\n /\nexport function cssDimension<Value extends number \| string>(value?: Value) {\n if (isNil(value)) {\n return undefined\n }\n if (isString(value)) {\n return value\n }\n if (value !== 0) {\n return `${value}px` as const\n }\n return value as 0\n}\n\n/\n Generates a CSS variable string with the given property name.\n /\nexport function cssVar<PropertyName extends string \| undefined>(\n propertyName: PropertyName\n) {\n / eslint-disable no-nested-ternary /\n return !isNil(propertyName) ? (`var(--${propertyName})` as const) : undefined\n / eslint-enable no-nested-ternary /\n}\n\n/\n Wrapper function for `cssVar` to handle tokens specifically.\n * It generates a CSS variable string for a given design token.\n /\nexport function tokenCssVar<PropertyName extends FlattenAllToken \| undefined>(\n propertyName: PropertyName\n) {\n return cssVar(propertyName)\n}\n\n/\n Wrapper function for `cssVar` to handle tokens specifically.\n * It generates a CSS variable string for a given ~~design~~ token.\n * ~~For~~ ~~beta~~ ~~color~~ ~~tokens~~ (~~v3), it adds the '~~color-~~' prefix to match CSS variable names~~.\n * For v1 tokens, it uses the token name directly.\n /\nexport function ~~betaTokenCssVar~~<\n PropertyName extends~~\n \|~~ ~~BetaFlattenAllToken\n~~ \| BetaSemanticColor~~\n \|~~ ~~V1FlattenAllToken\n~~ \| ~~V1SemanticColor\n \|~~ undefined,\n>(propertyName: PropertyName) {\n if (!propertyName) {\n return undefined\n }\n ~~// Beta color tokens (v3) need 'color-' prefix for CSS variables~~\n ~~// Check if the token starts with known beta color token prefixes\n~~ const betaColorTokenPrefixes = [\n 'text-',\n 'icon-',\n 'fill-',\n 'border-',\n 'surface-',\n 'dim-',\n 'state-',\n 'elevation-',\n ]\n ~~const~~ ~~betaBaseTokens~~ = ~~['surface']\~~n ~~const~~ ~~isBetaColorToken =\~~n betaColorTokenPrefixes.some((prefix) => propertyName.startsWith(prefix)) ~~\|\|\n betaBaseTokens.includes(propertyName)~~\n ~~if (isBetaColorToken~~) {\n return cssVar(~~`color-$~~{propertyName}`)\n }\n return cssVar(propertyName)\n}\n\n/\n Formats a given URL string into a CSS `url()` function format.\n */\nexport function cssUrl(url?: string) {\n return isNil(url) ? undefined : `url(${url})`\n}\n"],"names":["px","value","isNil","undefined","cssDimension","isString","cssVar","propertyName","~~betaTokenCssVar~~","betaColorTokenPrefixes","~~betaBaseTokens","isBetaColorToken","~~some","prefix","startsWith","~~includes","~~cssUrl","url"],"mappings":";;;;~~AAWA~~;AACA;AACA;AACA;AACO,SAASA,EAAEA,CAAuBC,KAAa,EAAE;AACtD,EAAA,IAAIC,UAAK,CAACD,KAAK,CAAC,EAAE;AAChB,IAAA,OAAOE,SAAS;AAClB;EACA,IAAIF,KAAK,KAAK,CAAC,EAAE;IACf,OAAO,CAAA,EAAGA,KAAK,CAAI,EAAA,CAAA;AACrB;AACA,EAAA,OAAOA,KAAK;AACd;;AAEA;AACA;AACA;AACA;AACO,SAASG,YAAYA,CAAgCH,KAAa,EAAE;AACzE,EAAA,IAAIC,UAAK,CAACD,KAAK,CAAC,EAAE;AAChB,IAAA,OAAOE,SAAS;AAClB;AACA,EAAA,IAAIE,aAAQ,CAACJ,KAAK,CAAC,EAAE;AACnB,IAAA,OAAOA,KAAK;AACd;EACA,IAAIA,KAAK,KAAK,CAAC,EAAE;IACf,OAAO,CAAA,EAAGA,KAAK,CAAI,EAAA,CAAA;AACrB;AACA,EAAA,OAAOA,KAAK;AACd;;AAEA;AACA;AACA;AACO,SAASK,MAAMA,CACpBC,YAA0B,EAC1B;AACA;EACA,OAAO,CAACL,UAAK,CAACK,YAAY,CAAC,GAAI,CAASA,MAAAA,EAAAA,YAAY,CAAG,CAAA,CAAA,GAAaJ,SAAS;AAC7E;AACF;;~~AAYA~~;AACA;AACA;AACA;AACA;~~AACA;~~AACO,SAASK,~~eAAeA~~,~~CAO7BD~~,YAA0B,EAAE;EAC5B,IAAI,CAACA,YAAY,EAAE;AACjB,IAAA,OAAOJ,SAAS;AAClB;~~AACA;AACA;AACA~~,EAAA,MAAMM,sBAAsB,GAAG,CAC7B,~~OAAO~~,~~EACP~~,~~OAAO~~,~~EACP~~,~~OAAO,EACP,SAAS,EACT,UAAU,EACV,~~MAAM,EACN,QAAQ,EACR,~~YAAY~~,~~CACb;AACD~~,~~EAAA~~,~~MAAMC~~,~~cAAc~~,~~GAAG~~,~~CAAC~~,~~SAAS,CAAC~~;~~EAClC~~,~~MAAMC~~,~~gBAAgB~~,~~GACpBF~~,sBAAsB,~~CAACG~~,IAAI,CAAEC,MAAM,~~IAAKN~~,YAAY,~~CAACO~~,UAAU,CAACD,MAAM,CAAC,CAAC,~~IACxEH~~,~~cAAc~~,~~CAACK~~,~~QAAQ~~,~~CAACR,YAAY,~~CAAC~~;AACvC~~,~~EAAA~~,~~IAAII~~,~~gBAAgB~~,EAAE;~~AACpB~~,~~IAAA~~,~~OAAOL~~,MAAM,CAAC,CAASC,MAAAA,EAAAA,YAAY,EAAE,CAAC;AACxC~~;EACA,OAAOD,MAAM,CAACC,YAAY,CAAC;AAC7B~~;;AAEA;AACA;AACA;AACO,~~SAASS~~,MAAMA,CAACC,GAAY,EAAE;EACnC,~~OAAOf~~,UAAK,~~CAACe~~,GAAG,CAAC,~~GAAGd~~,SAAS,GAAG,~~CAAOc~~,IAAAA,EAAAA,GAAG,CAAG,CAAA,CAAA;AAC/C;;;;;;;;"}
1	+ {"version":3,"file":"style.js","sources":["../../../src/utils/style.ts"],"sourcesContent":["import type {\n BetaFlattenAllToken,\n BetaSemanticColor,\n} from '~/src/types/beta-tokens'\nimport type { FlattenAllToken, SemanticColor } from '~/src/types/tokens'\n\nimport { isNil, isString } from './type'\n\n/*\n Convert a number to a string with `px` suffix.\n * If the value is `0`, it will return `0` instead of `0px`.\n /\nexport function px<Value extends number>(value?: Value) {\n if (isNil(value)) {\n return undefined\n }\n if (value !== 0) {\n return `${value}px` as const\n }\n return value as 0\n}\n\n/\n Convert a number or string to a string with `px` suffix.\n * If the value is `0`, it will return `0` instead of `0px`.\n /\nexport function cssDimension<Value extends number \| string>(value?: Value) {\n if (isNil(value)) {\n return undefined\n }\n if (isString(value)) {\n return value\n }\n if (value !== 0) {\n return `${value}px` as const\n }\n return value as 0\n}\n\n/\n Generates a CSS variable string with the given property name.\n /\nexport function cssVar<PropertyName extends string \| undefined>(\n propertyName: PropertyName\n) {\n / eslint-disable no-nested-ternary /\n return !isNil(propertyName) ? (`var(--${propertyName})` as const) : undefined\n / eslint-enable no-nested-ternary /\n}\n\n/\n Wrapper function for `cssVar` to handle tokens specifically.\n * It generates a CSS variable string for a given design token.\n /\nexport function tokenCssVar<\n PropertyName extends\n \| FlattenAllToken\n \| Exclude<BetaFlattenAllToken, BetaSemanticColor>\n \| undefined,\n>(propertyName: PropertyName) {\n return cssVar(propertyName)\n}\n\n/\n Wrapper function for `cssVar` to handle beta semantic color tokens specifically.\n * It generates a CSS variable string for a given beta semantic color token.\n * (e.g. `text-neutral` -> `var(--color-text-neutral)`).\n /\nexport function colorTokenCssVar<\n PropertyName extends SemanticColor \| BetaSemanticColor \| undefined,\n>(propertyName: PropertyName) {\n if (!propertyName) {\n return undefined\n }\n\n const betaColorTokenPrefixes = [\n 'text',\n 'icon',\n 'fill',\n 'border',\n 'surface',\n 'dim',\n 'state',\n 'elevation',\n ]\n\n /* @todo @timo Remove this condition in the next major release. /\n if (\n !betaColorTokenPrefixes.some((prefix) => propertyName.startsWith(prefix))\n ) {\n return cssVar(`${propertyName}`)\n }\n\n return cssVar(`color-${propertyName}`)\n}\n\n/\n Formats a given URL string into a CSS `url()` function format.\n */\nexport function cssUrl(url?: string) {\n return isNil(url) ? undefined : `url(${url})`\n}\n"],"names":["px","value","isNil","undefined","cssDimension","isString","cssVar","propertyName","colorTokenCssVar","betaColorTokenPrefixes","some","prefix","startsWith","cssUrl","url"],"mappings":";;;;AAQA;AACA;AACA;AACA;AACO,SAASA,EAAEA,CAAuBC,KAAa,EAAE;AACtD,EAAA,IAAIC,UAAK,CAACD,KAAK,CAAC,EAAE;AAChB,IAAA,OAAOE,SAAS;AAClB;EACA,IAAIF,KAAK,KAAK,CAAC,EAAE;IACf,OAAO,CAAA,EAAGA,KAAK,CAAI,EAAA,CAAA;AACrB;AACA,EAAA,OAAOA,KAAK;AACd;;AAEA;AACA;AACA;AACA;AACO,SAASG,YAAYA,CAAgCH,KAAa,EAAE;AACzE,EAAA,IAAIC,UAAK,CAACD,KAAK,CAAC,EAAE;AAChB,IAAA,OAAOE,SAAS;AAClB;AACA,EAAA,IAAIE,aAAQ,CAACJ,KAAK,CAAC,EAAE;AACnB,IAAA,OAAOA,KAAK;AACd;EACA,IAAIA,KAAK,KAAK,CAAC,EAAE;IACf,OAAO,CAAA,EAAGA,KAAK,CAAI,EAAA,CAAA;AACrB;AACA,EAAA,OAAOA,KAAK;AACd;;AAEA;AACA;AACA;AACO,SAASK,MAAMA,CACpBC,YAA0B,EAC1B;AACA;EACA,OAAO,CAACL,UAAK,CAACK,YAAY,CAAC,GAAI,CAASA,MAAAA,EAAAA,YAAY,CAAG,CAAA,CAAA,GAAaJ,SAAS;AAC7E;AACF;;AAeA;AACA;AACA;AACA;AACA;AACO,SAASK,gBAAgBA,CAE9BD,YAA0B,EAAE;EAC5B,IAAI,CAACA,YAAY,EAAE;AACjB,IAAA,OAAOJ,SAAS;AAClB;AAEA,EAAA,MAAMM,sBAAsB,GAAG,CAC7B,MAAM,EACN,MAAM,EACN,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,WAAW,CACZ;;AAED;AACA,EAAA,IACE,CAACA,sBAAsB,CAACC,IAAI,CAAEC,MAAM,IAAKJ,YAAY,CAACK,UAAU,CAACD,MAAM,CAAC,CAAC,EACzE;AACA,IAAA,OAAOL,MAAM,CAAC,CAAGC,EAAAA,YAAY,EAAE,CAAC;AAClC;AAEA,EAAA,OAAOD,MAAM,CAAC,CAASC,MAAAA,EAAAA,YAAY,EAAE,CAAC;AACxC;;AAEA;AACA;AACA;AACO,SAASM,MAAMA,CAACC,GAAY,EAAE;EACnC,OAAOZ,UAAK,CAACY,GAAG,CAAC,GAAGX,SAAS,GAAG,CAAOW,IAAAA,EAAAA,GAAG,CAAG,CAAA,CAAA;AAC/C;;;;;;;;"}

package/dist/esm/components/AlphaStatusBadge/StatusBadge.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import { MoonFilledIcon } from '@channel.io/bezier-icons';
 import classNames from '../../_virtual/index.mjs';
-import { betaTokenCssVar } from '../../utils/style.mjs';
+import { colorTokenCssVar } from '../../utils/style.mjs';
 import styles from './StatusBadge.module.scss.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { Icon } from '../Icon/Icon.mjs';
@@ -19,7 +19,7 @@ const StatusBadge = /*#__PURE__*/forwardRef(function StatusBadge({
   return /*#__PURE__*/jsx("div", {
     ref: forwardedRef,
     style: {
-      '--b-status-bg-color': betaTokenCssVar(backgroundColor),
+      '--b-status-bg-color': colorTokenCssVar(backgroundColor),
       ...style
     },
     className: classNames(styles.StatusBadge, styles[`size-${size}`], className),

package/dist/esm/components/AlphaStatusBadge/StatusBadge.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusBadge.mjs","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,UAAU,CACnC,SAASD,WAAWA,CAClB;AACEE,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,KAAK;EACpBC,KAAK;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,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEQ,~~eAAe~~,CAACH,eAAe,CAAC;~~MACvD~~,GAAGL;KAEN;AACDC,IAAAA,SAAS,EAAEQ,UAAU,CACnBC,MAAM,CAACf,WAAW,EAClBe,MAAM,CAAC,QAAQb,IAAI,CAAA,CAAE,CAAC,EACtBI,SACF,CAAE;AAAA,IAAA,GACEC,IAAI;AAAAS,IAAAA,QAAA,EAEPZ,YAAY,iBACXO,GAAA,CAACM,IAAI,EAAA;AACHC,MAAAA,MAAM,EAAEC,cAAe;AACvBjB,MAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCkB,MAAAA,KAAK,EAAEX,SAAU;MACjBH,SAAS,EAAES,MAAM,CAACE;KACnB;AACF,GACE,CAAC;AAEV,CACF;;;;"}
1	+ {"version":3,"file":"StatusBadge.mjs","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 { colorTokenCssVar } 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': colorTokenCssVar(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","colorTokenCssVar","classNames","styles","children","Icon","source","MoonFilledIcon","color"],"mappings":";;;;;;;;MA8BaA,WAAW,gBAAGC,UAAU,CACnC,SAASD,WAAWA,CAClB;AACEE,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,KAAK;EACpBC,KAAK;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,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEQ,gBAAgB,CAACH,eAAe,CAAC;MACxD,GAAGL;KAEN;AACDC,IAAAA,SAAS,EAAEQ,UAAU,CACnBC,MAAM,CAACf,WAAW,EAClBe,MAAM,CAAC,QAAQb,IAAI,CAAA,CAAE,CAAC,EACtBI,SACF,CAAE;AAAA,IAAA,GACEC,IAAI;AAAAS,IAAAA,QAAA,EAEPZ,YAAY,iBACXO,GAAA,CAACM,IAAI,EAAA;AACHC,MAAAA,MAAM,EAAEC,cAAe;AACvBjB,MAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCkB,MAAAA,KAAK,EAAEX,SAAU;MACjBH,SAAS,EAAES,MAAM,CAACE;KACnB;AACF,GACE,CAAC;AAEV,CACF;;;;"}

package/dist/esm/components/Icon/Icon.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { memo, forwardRef } from 'react';
 import classNames from '../../_virtual/index.mjs';
 import { getMarginStyles, splitByMarginProps } from '../../types/props-helpers.mjs';
-import { betaTokenCssVar } from '../../utils/style.mjs';
+import { colorTokenCssVar } from '../../utils/style.mjs';
 import styles from './Icon.module.scss.mjs';
 import { jsx } from 'react/jsx-runtime';
@@ -20,7 +20,7 @@ const Icon = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Icon(props, forw
   return /*#__PURE__*/jsx(SourceElement, {
     ref: forwardedRef,
     style: {
-      '--b-icon-color': betaTokenCssVar(color),
+      '--b-icon-color': colorTokenCssVar(color),
       ...marginStyles.style,
       ...style
     },

package/dist/esm/components/Icon/Icon.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.mjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, memo } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { ~~betaTokenCssVar~~ } from '~/src/utils/style'\n\nimport { type IconProps } from './Icon.types'\n\nimport styles from './Icon.module.scss'\n\nexport const ICON_TEST_ID = 'bezier-icon'\n\nexport const Icon = memo(\n forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n className,\n size = 'm',\n color,\n source: SourceElement,\n style,\n ...rest\n } = marginRest\n\n return (\n <SourceElement\n ref={forwardedRef}\n style={\n {\n '--b-icon-color': ~~betaTokenCssVar~~(color),\n ...marginStyles.style,\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Icon,\n styles[`size-${size}`],\n marginStyles.className,\n className\n )}\n data-testid={ICON_TEST_ID}\n {...rest}\n />\n )\n })\n)\n"],"names":["ICON_TEST_ID","Icon","memo","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","className","size","color","source","SourceElement","style","rest","_jsx","ref","~~betaTokenCssVar~~","classNames","styles"],"mappings":";;;;;;;AAaO,MAAMA,YAAY,GAAG;AAEfC,MAAAA,IAAI,gBAAGC,IAAI,cACtBC,UAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,kBAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,eAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,GAAG;IACVC,KAAK;AACLC,IAAAA,MAAM,EAAEC,aAAa;IACrBC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,GAAA,CAACH,aAAa,EAAA;AACZI,IAAAA,GAAG,EAAEd,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,gBAAgB,EAAEI,~~eAAe~~,CAACP,KAAK,CAAC;~~MACxC~~,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEU,UAAU,CACnBC,MAAM,CAACrB,IAAI,EACXqB,MAAM,CAAC,QAAQV,IAAI,CAAA,CAAE,CAAC,EACtBH,YAAY,CAACE,SAAS,EACtBA,SACF,CAAE;AACF,IAAA,aAAA,EAAaX,YAAa;IAAA,GACtBiB;AAAI,GACT,CAAC;AAEN,CAAC,CACH;;;;"}
1	+ {"version":3,"file":"Icon.mjs","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["'use client'\nimport { forwardRef, memo } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { colorTokenCssVar } from '~/src/utils/style'\n\nimport { type IconProps } from './Icon.types'\n\nimport styles from './Icon.module.scss'\n\nexport const ICON_TEST_ID = 'bezier-icon'\n\nexport const Icon = memo(\n forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n className,\n size = 'm',\n color,\n source: SourceElement,\n style,\n ...rest\n } = marginRest\n\n return (\n <SourceElement\n ref={forwardedRef}\n style={\n {\n '--b-icon-color': colorTokenCssVar(color),\n ...marginStyles.style,\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Icon,\n styles[`size-${size}`],\n marginStyles.className,\n className\n )}\n data-testid={ICON_TEST_ID}\n {...rest}\n />\n )\n })\n)\n"],"names":["ICON_TEST_ID","Icon","memo","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","className","size","color","source","SourceElement","style","rest","_jsx","ref","colorTokenCssVar","classNames","styles"],"mappings":";;;;;;;AAaO,MAAMA,YAAY,GAAG;AAEfC,MAAAA,IAAI,gBAAGC,IAAI,cACtBC,UAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,kBAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,eAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,GAAG;IACVC,KAAK;AACLC,IAAAA,MAAM,EAAEC,aAAa;IACrBC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,GAAA,CAACH,aAAa,EAAA;AACZI,IAAAA,GAAG,EAAEd,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,gBAAgB,EAAEI,gBAAgB,CAACP,KAAK,CAAC;MACzC,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEU,UAAU,CACnBC,MAAM,CAACrB,IAAI,EACXqB,MAAM,CAAC,QAAQV,IAAI,CAAA,CAAE,CAAC,EACtBH,YAAY,CAACE,SAAS,EACtBA,SACF,CAAE;AACF,IAAA,aAAA,EAAaX,YAAa;IAAA,GACtBiB;AAAI,GACT,CAAC;AAEN,CAAC,CACH;;;;"}

package/dist/esm/components/SmoothCornersBox/SmoothCornersBox.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import classNames from '../../_virtual/index.mjs';
-import { px, betaTokenCssVar, cssUrl } from '../../utils/style.mjs';
+import { px, colorTokenCssVar, cssUrl } from '../../utils/style.mjs';
 import styles from './SmoothCornersBox.module.scss.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { useFeatureFlag } from '../FeatureProvider/FeatureProvider.mjs';
@@ -31,14 +31,14 @@ const SmoothCornersBox = /*#__PURE__*/forwardRef(function SmoothCornersBox({
       '--b-smooth-corners-box-shadow-offset-y': px(shadow === null || shadow === void 0 ? void 0 : shadow.offsetY),
       '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,
       '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,
-      '--b-smooth-corners-box-shadow-color': betaTokenCssVar(shadow === null || shadow === void 0 ? void 0 : shadow.color),
+      '--b-smooth-corners-box-shadow-color': colorTokenCssVar(shadow === null || shadow === void 0 ? void 0 : shadow.color),
       /**
        * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.
        * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}
        */
       '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`,
       '--b-smooth-corners-box-margin': `${margin !== null && margin !== void 0 ? margin : 0}px`,
-      '--b-smooth-corners-box-background-color': betaTokenCssVar(backgroundColor),
+      '--b-smooth-corners-box-background-color': colorTokenCssVar(backgroundColor),
       '--b-smooth-corners-box-background-image': cssUrl(backgroundImage)
     },
     className: classNames(styles.SmoothCornersBox, className),

package/dist/esm/components/SmoothCornersBox/SmoothCornersBox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SmoothCornersBox.mjs","sources":["../../../../src/components/SmoothCornersBox/SmoothCornersBox.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { ~~betaTokenCssVar~~, cssUrl, px } from '~/src/utils/style'\n\nimport { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'\n\nimport { type SmoothCornersBoxProps } from './SmoothCornersBox.types'\n\nimport styles from './SmoothCornersBox.module.scss'\n\n/*\n `SmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n * @example\n \n ```tsx\n * <AppProvider features={[SmoothCornersFeature]}>\n * <SmoothCornersBox />\n * </AppProvider>\n * ```\n /\nexport const SmoothCornersBox = forwardRef<\n HTMLDivElement,\n SmoothCornersBoxProps\n>(function SmoothCornersBox(\n {\n children,\n style,\n className,\n disabled,\n borderRadius,\n margin,\n shadow,\n backgroundColor,\n backgroundImage,\n ...rest\n },\n forwardedRef\n) {\n const shadowBlurRadius = shadow?.blurRadius ?? 0\n const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n ...style,\n '--b-smooth-corners-box-border-radius': borderRadius,\n '--b-smooth-corners-box-shadow-offset-x': px(shadow?.offsetX),\n '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),\n '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,\n '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n '--b-smooth-corners-box-shadow-color': ~~betaTokenCssVar~~(shadow?.color),\n /\n NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.\n * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}\n /\n '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) 2}px`,\n '--b-smooth-corners-box-margin': `${margin ?? 0}px`,\n '--b-smooth-corners-box-background-color':\n ~~betaTokenCssVar~~(backgroundColor),\n '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),\n } as React.CSSProperties\n }\n className={classNames(styles.SmoothCornersBox, className)}\n data-state={\n useFeatureFlag(FeatureType.SmoothCorners) && !disabled\n ? 'enabled'\n : 'disabled'\n }\n >\n {children}\n </div>\n )\n})\n"],"names":["SmoothCornersBox","forwardRef","children","style","className","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","rest","forwardedRef","_shadow$blurRadius","_shadow$spreadRadius","shadowBlurRadius","blurRadius","shadowSpreadRadius","spreadRadius","_jsx","ref","px","offsetX","offsetY","~~betaTokenCssVar~~","color","Math","max","cssUrl","classNames","styles","useFeatureFlag","FeatureType","SmoothCorners"],"mappings":";;;;;;;;MA0BaA,gBAAgB,gBAAGC,UAAU,CAGxC,SAASD,gBAAgBA,CACzB;EACEE,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;EACf,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EAAA,IAAAC,kBAAA,EAAAC,oBAAA;AACA,EAAA,MAAMC,gBAAgB,GAAAF,CAAAA,kBAAA,GAAGL,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEQ,UAAU,MAAAH,IAAAA,IAAAA,kBAAA,KAAAA,KAAAA,CAAAA,GAAAA,kBAAA,GAAI,CAAC;AAChD,EAAA,MAAMI,kBAAkB,GAAAH,CAAAA,oBAAA,GAAGN,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEU,YAAY,MAAAJ,IAAAA,IAAAA,oBAAA,KAAAA,KAAAA,CAAAA,GAAAA,oBAAA,GAAI,CAAC;AAEpD,EAAA,oBACEK,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMR,IAAI;AACRS,IAAAA,GAAG,EAAER,YAAa;AAClBT,IAAAA,KAAK,EACH;AACE,MAAA,GAAGA,KAAK;AACR,MAAA,sCAAsC,EAAEG,YAAY;MACpD,wCAAwC,EAAEe,EAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEc,OAAO,CAAC;MAC7D,wCAAwC,EAAED,EAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEe,OAAO,CAAC;MAC7D,2CAA2C,EAAE,CAAGR,EAAAA,gBAAgB,CAAI,EAAA,CAAA;MACpE,6CAA6C,EAAE,CAAGE,EAAAA,kBAAkB,CAAI,EAAA,CAAA;MACxE,qCAAqC,EAAEO,~~eAAe~~,CAAChB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEiB,KAAK,CAAC;~~AACrE~~;AACV;AACA;AACA;AACU,MAAA,gCAAgC,EAAE,CAAA,EAAGC,IAAI,CAACC,GAAG,CAACZ,gBAAgB,EAAEE,kBAAkB,CAAC,GAAG,CAAC,CAAI,EAAA,CAAA;MAC3F,+BAA+B,EAAE,GAAGV,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,MAAM,GAAI,CAAC,CAAI,EAAA,CAAA;AACnD,MAAA,yCAAyC,EACvCiB,~~eAAe~~,CAACf,eAAe,CAAC;~~MAClC~~,yCAAyC,EAAEmB,MAAM,CAAClB,eAAe;KAEpE;IACDN,SAAS,EAAEyB,UAAU,CAACC,MAAM,CAAC9B,gBAAgB,EAAEI,SAAS,CAAE;AAC1D,IAAA,YAAA,EACE2B,cAAc,CAACC,WAAW,CAACC,aAAa,CAAC,IAAI,CAAC5B,QAAQ,GAClD,SAAS,GACT,UACL;AAAAH,IAAAA,QAAA,EAEAA;AAAQ,GACN,CAAC;AAEV,CAAC;;;;"}
1	+ {"version":3,"file":"SmoothCornersBox.mjs","sources":["../../../../src/components/SmoothCornersBox/SmoothCornersBox.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { colorTokenCssVar, cssUrl, px } from '~/src/utils/style'\n\nimport { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'\n\nimport { type SmoothCornersBoxProps } from './SmoothCornersBox.types'\n\nimport styles from './SmoothCornersBox.module.scss'\n\n/*\n `SmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n * @example\n \n ```tsx\n * <AppProvider features={[SmoothCornersFeature]}>\n * <SmoothCornersBox />\n * </AppProvider>\n * ```\n /\nexport const SmoothCornersBox = forwardRef<\n HTMLDivElement,\n SmoothCornersBoxProps\n>(function SmoothCornersBox(\n {\n children,\n style,\n className,\n disabled,\n borderRadius,\n margin,\n shadow,\n backgroundColor,\n backgroundImage,\n ...rest\n },\n forwardedRef\n) {\n const shadowBlurRadius = shadow?.blurRadius ?? 0\n const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n ...style,\n '--b-smooth-corners-box-border-radius': borderRadius,\n '--b-smooth-corners-box-shadow-offset-x': px(shadow?.offsetX),\n '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),\n '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,\n '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n '--b-smooth-corners-box-shadow-color': colorTokenCssVar(shadow?.color),\n /\n NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.\n * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}\n /\n '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) 2}px`,\n '--b-smooth-corners-box-margin': `${margin ?? 0}px`,\n '--b-smooth-corners-box-background-color':\n colorTokenCssVar(backgroundColor),\n '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),\n } as React.CSSProperties\n }\n className={classNames(styles.SmoothCornersBox, className)}\n data-state={\n useFeatureFlag(FeatureType.SmoothCorners) && !disabled\n ? 'enabled'\n : 'disabled'\n }\n >\n {children}\n </div>\n )\n})\n"],"names":["SmoothCornersBox","forwardRef","children","style","className","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","rest","forwardedRef","_shadow$blurRadius","_shadow$spreadRadius","shadowBlurRadius","blurRadius","shadowSpreadRadius","spreadRadius","_jsx","ref","px","offsetX","offsetY","colorTokenCssVar","color","Math","max","cssUrl","classNames","styles","useFeatureFlag","FeatureType","SmoothCorners"],"mappings":";;;;;;;;MA0BaA,gBAAgB,gBAAGC,UAAU,CAGxC,SAASD,gBAAgBA,CACzB;EACEE,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;EACf,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EAAA,IAAAC,kBAAA,EAAAC,oBAAA;AACA,EAAA,MAAMC,gBAAgB,GAAAF,CAAAA,kBAAA,GAAGL,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEQ,UAAU,MAAAH,IAAAA,IAAAA,kBAAA,KAAAA,KAAAA,CAAAA,GAAAA,kBAAA,GAAI,CAAC;AAChD,EAAA,MAAMI,kBAAkB,GAAAH,CAAAA,oBAAA,GAAGN,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEU,YAAY,MAAAJ,IAAAA,IAAAA,oBAAA,KAAAA,KAAAA,CAAAA,GAAAA,oBAAA,GAAI,CAAC;AAEpD,EAAA,oBACEK,GAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMR,IAAI;AACRS,IAAAA,GAAG,EAAER,YAAa;AAClBT,IAAAA,KAAK,EACH;AACE,MAAA,GAAGA,KAAK;AACR,MAAA,sCAAsC,EAAEG,YAAY;MACpD,wCAAwC,EAAEe,EAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEc,OAAO,CAAC;MAC7D,wCAAwC,EAAED,EAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEe,OAAO,CAAC;MAC7D,2CAA2C,EAAE,CAAGR,EAAAA,gBAAgB,CAAI,EAAA,CAAA;MACpE,6CAA6C,EAAE,CAAGE,EAAAA,kBAAkB,CAAI,EAAA,CAAA;MACxE,qCAAqC,EAAEO,gBAAgB,CAAChB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEiB,KAAK,CAAC;AACtE;AACV;AACA;AACA;AACU,MAAA,gCAAgC,EAAE,CAAA,EAAGC,IAAI,CAACC,GAAG,CAACZ,gBAAgB,EAAEE,kBAAkB,CAAC,GAAG,CAAC,CAAI,EAAA,CAAA;MAC3F,+BAA+B,EAAE,GAAGV,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,MAAM,GAAI,CAAC,CAAI,EAAA,CAAA;AACnD,MAAA,yCAAyC,EACvCiB,gBAAgB,CAACf,eAAe,CAAC;MACnC,yCAAyC,EAAEmB,MAAM,CAAClB,eAAe;KAEpE;IACDN,SAAS,EAAEyB,UAAU,CAACC,MAAM,CAAC9B,gBAAgB,EAAEI,SAAS,CAAE;AAC1D,IAAA,YAAA,EACE2B,cAAc,CAACC,WAAW,CAACC,aAAa,CAAC,IAAI,CAAC5B,QAAQ,GAClD,SAAS,GACT,UACL;AAAAH,IAAAA,QAAA,EAEAA;AAAQ,GACN,CAAC;AAEV,CAAC;;;;"}

package/dist/esm/components/Spinner/Spinner.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 import { forwardRef, createElement } from 'react';
 import classNames from '../../_virtual/index.mjs';
-import { betaTokenCssVar } from '../../utils/style.mjs';
+import { colorTokenCssVar } from '../../utils/style.mjs';
 import styles from './Spinner.module.scss.mjs';
 const SPINNER_TEST_ID = 'bezier-spinner';
@@ -15,7 +15,7 @@ const Spinner = /*#__PURE__*/forwardRef(function Spinner({
     ...rest,
     ref: forwardedRef,
     style: {
-      '--b-spinner-color': betaTokenCssVar(color),
+      '--b-spinner-color': colorTokenCssVar(color),
       ...style
     },
     className: classNames(styles.Spinner, styles[`size-${size}`], className),

package/dist/esm/components/Spinner/Spinner.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.mjs","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { ~~betaTokenCssVar~~ } from '~/src/utils/style'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n { style, className, size = 'm', color, ...rest },\n forwardedRef\n ) {\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n '--b-spinner-color': ~~betaTokenCssVar~~(color),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Spinner,\n styles[`size-${size}`],\n className\n )}\n key=\"spinner\"\n data-testid={SPINNER_TEST_ID}\n />\n )\n }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","style","className","size","color","rest","forwardedRef","_createElement","ref","~~betaTokenCssVar~~","classNames","styles","key"],"mappings":";;;;;AAaO,MAAMA,eAAe,GAAG;MAElBC,OAAO,gBAAGC,UAAU,CAC/B,SAASD,OAAOA,CACd;EAAEE,KAAK;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAChDC,YAAY,EACZ;AACA,EAAA,oBACEC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMF,IAAI;AACRG,IAAAA,GAAG,EAAEF,YAAa;AAClBL,IAAAA,KAAK,EACH;AACE,MAAA,mBAAmB,EAAEQ,~~eAAe~~,CAACL,KAAK,CAAC;~~MAC3C~~,GAAGH;KAEN;AACDC,IAAAA,SAAS,EAAEQ,UAAU,CACnBC,MAAM,CAACZ,OAAO,EACdY,MAAM,CAAC,QAAQR,IAAI,CAAA,CAAE,CAAC,EACtBD,SACF,CAAE;AACFU,IAAAA,GAAG,EAAC,SAAS;IACb,aAAad,EAAAA;AAAgB,GAC9B,CAAC;AAEN,CACF;;;;"}
1	+ {"version":3,"file":"Spinner.mjs","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { colorTokenCssVar } from '~/src/utils/style'\n\nimport { type SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nexport const SPINNER_TEST_ID = 'bezier-spinner'\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n function Spinner(\n { style, className, size = 'm', color, ...rest },\n forwardedRef\n ) {\n return (\n <div\n {...rest}\n ref={forwardedRef}\n style={\n {\n '--b-spinner-color': colorTokenCssVar(color),\n ...style,\n } as React.CSSProperties\n }\n className={classNames(\n styles.Spinner,\n styles[`size-${size}`],\n className\n )}\n key=\"spinner\"\n data-testid={SPINNER_TEST_ID}\n />\n )\n }\n)\n"],"names":["SPINNER_TEST_ID","Spinner","forwardRef","style","className","size","color","rest","forwardedRef","_createElement","ref","colorTokenCssVar","classNames","styles","key"],"mappings":";;;;;AAaO,MAAMA,eAAe,GAAG;MAElBC,OAAO,gBAAGC,UAAU,CAC/B,SAASD,OAAOA,CACd;EAAEE,KAAK;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAChDC,YAAY,EACZ;AACA,EAAA,oBACEC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMF,IAAI;AACRG,IAAAA,GAAG,EAAEF,YAAa;AAClBL,IAAAA,KAAK,EACH;AACE,MAAA,mBAAmB,EAAEQ,gBAAgB,CAACL,KAAK,CAAC;MAC5C,GAAGH;KAEN;AACDC,IAAAA,SAAS,EAAEQ,UAAU,CACnBC,MAAM,CAACZ,OAAO,EACdY,MAAM,CAAC,QAAQR,IAAI,CAAA,CAAE,CAAC,EACtBD,SACF,CAAE;AACFU,IAAAA,GAAG,EAAC,SAAS;IACb,aAAad,EAAAA;AAAgB,GAC9B,CAAC;AAEN,CACF;;;;"}

package/dist/esm/components/Status/Status.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { memo, forwardRef } from 'react';
 import { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons';
 import classNames from '../../_virtual/index.mjs';
-import { betaTokenCssVar } from '../../utils/style.mjs';
+import { colorTokenCssVar } from '../../utils/style.mjs';
 import styles from './Status.module.scss.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { Icon } from '../Icon/Icon.mjs';
@@ -30,7 +30,7 @@ const Status = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Status({
   return /*#__PURE__*/jsx("div", {
     ref: forwardedRef,
     style: {
-      '--b-status-bg-color': betaTokenCssVar(backgroundColor),
+      '--b-status-bg-color': colorTokenCssVar(backgroundColor),
       ...style
     },
     className: classNames(styles.Status, styles[`size-${size}`], className),

package/dist/esm/components/Status/Status.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Status.mjs","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,IAAI,cACxBC,UAAU,CAA8B,SAASF,MAAMA,CACrD;EAAEG,IAAI;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAEC,KAAK;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,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAES,~~eAAe~~,CAACH,eAAe,CAAC;~~MACvD~~,GAAGN;KAEN;AACDC,IAAAA,SAAS,EAAES,UAAU,CAACC,MAAM,CAAChB,MAAM,EAAEgB,MAAM,CAAC,QAAQZ,IAAI,CAAA,CAAE,CAAC,EAAEE,SAAS,CAAE;AAAA,IAAA,GACpEC,IAAI;AAAAU,IAAAA,QAAA,EAEPR,QAAQ,iBACPG,GAAA,CAACM,IAAI,EAAA;AACHC,MAAAA,MAAM,EAAEhB,IAAI,KAAK,MAAM,GAAGiB,QAAQ,GAAGC,cAAe;AACpDjB,MAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCkB,MAAAA,KAAK,EAAE1B,WAAW,CAACO,IAAI,CAAE;MACzBG,SAAS,EAAEU,MAAM,CAACE;KACnB;AACF,GACE,CAAC;AAEV,CAAC,CACH;;;;"}
1	+ {"version":3,"file":"Status.mjs","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 { colorTokenCssVar } 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': colorTokenCssVar(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","colorTokenCssVar","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,IAAI,cACxBC,UAAU,CAA8B,SAASF,MAAMA,CACrD;EAAEG,IAAI;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAEC,KAAK;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,GAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAES,gBAAgB,CAACH,eAAe,CAAC;MACxD,GAAGN;KAEN;AACDC,IAAAA,SAAS,EAAES,UAAU,CAACC,MAAM,CAAChB,MAAM,EAAEgB,MAAM,CAAC,QAAQZ,IAAI,CAAA,CAAE,CAAC,EAAEE,SAAS,CAAE;AAAA,IAAA,GACpEC,IAAI;AAAAU,IAAAA,QAAA,EAEPR,QAAQ,iBACPG,GAAA,CAACM,IAAI,EAAA;AACHC,MAAAA,MAAM,EAAEhB,IAAI,KAAK,MAAM,GAAGiB,QAAQ,GAAGC,cAAe;AACpDjB,MAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCkB,MAAAA,KAAK,EAAE1B,WAAW,CAACO,IAAI,CAAE;MACzBG,SAAS,EAAEU,MAAM,CAACE;KACnB;AACF,GACE,CAAC;AAEV,CAAC,CACH;;;;"}

package/dist/esm/components/Text/Text.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import { forwardRef, createElement } from 'react';
 import classNames from '../../_virtual/index.mjs';
 import { getMarginStyles, splitByMarginProps } from '../../types/props-helpers.mjs';
-import { betaTokenCssVar } from '../../utils/style.mjs';
+import { colorTokenCssVar } from '../../utils/style.mjs';
 import { isNumber } from '../../utils/type.mjs';
 import styles from './Text.module.scss.mjs';
@@ -38,7 +38,7 @@ const Text = /*#__PURE__*/forwardRef(function Text(props, forwardedRef) {
   return /*#__PURE__*/createElement(as, {
     ref: forwardedRef,
     style: {
-      '--b-text-color': betaTokenCssVar(color),
+      '--b-text-color': colorTokenCssVar(color),
       '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,
       ...marginStyles.style,
       ...style

package/dist/esm/components/Text/Text.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.mjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { ~~betaTokenCssVar~~ } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\n/*\n `Text` is a component for representing the typography of a design system.\n * @example\n \n ```tsx\n * <Text\n * typo=\"15\"\n * color=\"text-neutral\"\n * >\n * Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n function Text(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n children,\n style,\n className,\n as = 'span',\n typo = '15',\n color,\n bold,\n italic,\n truncated,\n align,\n ...rest\n } = marginRest\n const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-text-color': ~~betaTokenCssVar~~(color),\n '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n ...marginStyles.style,\n ...style,\n },\n className: classNames(\n styles.Text,\n styles[`typo-${typo}`],\n bold && styles.bold,\n italic && styles.italic,\n truncated === true\n ? styles.truncated\n : isMultiLineTruncated && styles['multi-line-truncated'],\n align && styles[`align-${align}`],\n marginStyles.className,\n className\n ),\n 'data-testid': 'bezier-text',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","~~betaTokenCssVar~~","undefined","classNames","styles"],"mappings":";;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAAI,gBAAGC,UAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,kBAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,eAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,QAAQ;IACRC,KAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGd,UAAU;EACd,MAAMe,oBAAoB,GAAGC,QAAQ,CAACJ,SAAS,CAAC,IAAIA,SAAS,IAAI,CAAC;EAElE,oBAAOK,aAAa,CAClBV,EAAE,EACF;AACEW,IAAAA,GAAG,EAAEpB,YAAY;AACjBO,IAAAA,KAAK,EAAE;AACL,MAAA,gBAAgB,EAAEc,~~eAAe~~,CAACV,KAAK,CAAC;~~AACxC~~,MAAA,qBAAqB,EAAEM,oBAAoB,GAAGH,SAAS,GAAGQ,SAAS;MACnE,GAAGlB,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;IACDC,SAAS,EAAEe,UAAU,CACnBC,MAAM,CAAC3B,IAAI,EACX2B,MAAM,CAAC,CAAA,KAAA,EAAQd,IAAI,CAAA,CAAE,CAAC,EACtBE,IAAI,IAAIY,MAAM,CAACZ,IAAI,EACnBC,MAAM,IAAIW,MAAM,CAACX,MAAM,EACvBC,SAAS,KAAK,IAAI,GACdU,MAAM,CAACV,SAAS,GAChBG,oBAAoB,IAAIO,MAAM,CAAC,sBAAsB,CAAC,EAC1DT,KAAK,IAAIS,MAAM,CAAC,CAAST,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCX,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,aAAa;IAC5B,GAAGQ;GACJ,EACDV,QACF,CAAC;AACH,CACF;;;;"}
1	+ {"version":3,"file":"Text.mjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { colorTokenCssVar } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\n/*\n `Text` is a component for representing the typography of a design system.\n * @example\n \n ```tsx\n * <Text\n * typo=\"15\"\n * color=\"text-neutral\"\n * >\n * Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n function Text(props, forwardedRef) {\n const [marginProps, marginRest] = splitByMarginProps(props)\n const marginStyles = getMarginStyles(marginProps)\n\n const {\n children,\n style,\n className,\n as = 'span',\n typo = '15',\n color,\n bold,\n italic,\n truncated,\n align,\n ...rest\n } = marginRest\n const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n return createElement(\n as,\n {\n ref: forwardedRef,\n style: {\n '--b-text-color': colorTokenCssVar(color),\n '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n ...marginStyles.style,\n ...style,\n },\n className: classNames(\n styles.Text,\n styles[`typo-${typo}`],\n bold && styles.bold,\n italic && styles.italic,\n truncated === true\n ? styles.truncated\n : isMultiLineTruncated && styles['multi-line-truncated'],\n align && styles[`align-${align}`],\n marginStyles.className,\n className\n ),\n 'data-testid': 'bezier-text',\n ...rest,\n },\n children\n )\n }\n)\n"],"names":["Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","colorTokenCssVar","undefined","classNames","styles"],"mappings":";;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,IAAI,gBAAGC,UAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,kBAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,eAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,QAAQ;IACRC,KAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGd,UAAU;EACd,MAAMe,oBAAoB,GAAGC,QAAQ,CAACJ,SAAS,CAAC,IAAIA,SAAS,IAAI,CAAC;EAElE,oBAAOK,aAAa,CAClBV,EAAE,EACF;AACEW,IAAAA,GAAG,EAAEpB,YAAY;AACjBO,IAAAA,KAAK,EAAE;AACL,MAAA,gBAAgB,EAAEc,gBAAgB,CAACV,KAAK,CAAC;AACzC,MAAA,qBAAqB,EAAEM,oBAAoB,GAAGH,SAAS,GAAGQ,SAAS;MACnE,GAAGlB,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;IACDC,SAAS,EAAEe,UAAU,CACnBC,MAAM,CAAC3B,IAAI,EACX2B,MAAM,CAAC,CAAA,KAAA,EAAQd,IAAI,CAAA,CAAE,CAAC,EACtBE,IAAI,IAAIY,MAAM,CAACZ,IAAI,EACnBC,MAAM,IAAIW,MAAM,CAACX,MAAM,EACvBC,SAAS,KAAK,IAAI,GACdU,MAAM,CAACV,SAAS,GAChBG,oBAAoB,IAAIO,MAAM,CAAC,sBAAsB,CAAC,EAC1DT,KAAK,IAAIS,MAAM,CAAC,CAAST,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCX,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,aAAa;IAC5B,GAAGQ;GACJ,EACDV,QACF,CAAC;AACH,CACF;;;;"}