@channel.io/bezier-react 3.5.2-beta.8 → 3.6.0

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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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;;;;;"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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;;;;;"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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;;;;"}