@channel.io/bezier-react 2.6.2 → 3.0.0

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

@@ -1,23 +1,13 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var style = require('../../utils/style.js');
 var SmoothCornersBox_module = require('./SmoothCornersBox.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var FeatureProvider = require('../FeatureProvider/FeatureProvider.js');
 var FeatureProvider_types = require('../FeatureProvider/FeatureProvider.types.js');
 
-/**
- * `SmoothCornersBox` is a simple `div` element with smooth corners.
- * It is available by enabling the `SmoothCornersFeature`.
- * @example
- *
- * ```tsx
- * <AppProvider features={[SmoothCornersFeature]}>
- *   <SmoothCornersBox />
- * </AppProvider>
- * ```
- */
 const SmoothCornersBox = /*#__PURE__*/React.forwardRef(function SmoothCornersBox({
   children,
   style: style$1,
@@ -33,7 +23,8 @@ const SmoothCornersBox = /*#__PURE__*/React.forwardRef(function SmoothCornersBox
   var _shadow$blurRadius, _shadow$spreadRadius;
   const shadowBlurRadius = (_shadow$blurRadius = shadow === null || shadow === void 0 ? void 0 : shadow.blurRadius) !== null && _shadow$blurRadius !== void 0 ? _shadow$blurRadius : 0;
   const shadowSpreadRadius = (_shadow$spreadRadius = shadow === null || shadow === void 0 ? void 0 : shadow.spreadRadius) !== null && _shadow$spreadRadius !== void 0 ? _shadow$spreadRadius : 0;
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ...rest,
     ref: forwardedRef,
     style: {
       ...style$1,
@@ -53,8 +44,9 @@ const SmoothCornersBox = /*#__PURE__*/React.forwardRef(function SmoothCornersBox
       '--b-smooth-corners-box-background-image': style.cssUrl(backgroundImage)
     },
     className: index.default(SmoothCornersBox_module.default.SmoothCornersBox, className),
-    "data-state": FeatureProvider.useFeatureFlag(FeatureProvider_types.FeatureType.SmoothCorners) && !disabled ? 'enabled' : 'disabled'
-  }), children);
+    "data-state": FeatureProvider.useFeatureFlag(FeatureProvider_types.FeatureType.SmoothCorners) && !disabled ? 'enabled' : 'disabled',
+    children: children
+  });
 });
 
 exports.SmoothCornersBox = SmoothCornersBox;

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 React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssUrl, cssVar, 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': cssVar(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': cssVar(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","React","createElement","Object","assign","ref","px","offsetX","offsetY","cssVar","color","Math","max","cssUrl","classNames","styles","useFeatureFlag","FeatureType","SmoothCorners"],"mappings":";;;;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,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;EAEpD,oBACEK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,KACMX,IAAI,EAAA;AACRY,IAAAA,GAAG,EAAEX,YAAa;AAClBT,IAAAA,KAAK,EACH;AACE,MAAA,GAAGA,OAAK;AACR,MAAA,sCAAsC,EAAEG,YAAY;MACpD,wCAAwC,EAAEkB,QAAE,CAAChB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEiB,OAAO,CAAC;MAC7D,wCAAwC,EAAED,QAAE,CAAChB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEkB,OAAO,CAAC;MAC7D,2CAA2C,EAAE,CAAGX,EAAAA,gBAAgB,CAAI,EAAA,CAAA;MACpE,6CAA6C,EAAE,CAAGE,EAAAA,kBAAkB,CAAI,EAAA,CAAA;MACxE,qCAAqC,EAAEU,YAAM,CAACnB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEoB,KAAK,CAAC;AAC5D;AACV;AACA;AACA;AACU,MAAA,gCAAgC,EAAE,CAAA,EAAGC,IAAI,CAACC,GAAG,CAACf,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,EAAEoB,YAAM,CAAClB,eAAe,CAAC;MAClE,yCAAyC,EAAEsB,YAAM,CAACrB,eAAe;KAEpE;IACDN,SAAS,EAAE4B,aAAU,CAACC,+BAAM,CAACjC,gBAAgB,EAAEI,SAAS,CAAE;IAC1D,YACE8B,EAAAA,8BAAc,CAACC,iCAAW,CAACC,aAAa,CAAC,IAAI,CAAC/B,QAAQ,GAClD,SAAS,GACT;AACL,GAAA,CAAA,EAEAH,QACE,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 { cssUrl, cssVar, 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': cssVar(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': cssVar(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","cssVar","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,YAAM,CAAChB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEiB,KAAK,CAAC;AAC5D;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,EAAEiB,YAAM,CAACf,eAAe,CAAC;MAClE,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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var style = require('../../utils/style.js');
 var Spinner_module = require('./Spinner.module.scss.js');
 
@@ -13,7 +13,8 @@ const Spinner = /*#__PURE__*/React.forwardRef(function Spinner({
   color,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
+  return /*#__PURE__*/React.createElement("div", {
+    ...rest,
     ref: forwardedRef,
     style: {
       '--b-spinner-color': style.cssVar(color),
@@ -22,7 +23,7 @@ const Spinner = /*#__PURE__*/React.forwardRef(function Spinner({
     className: index.default(Spinner_module.default.Spinner, Spinner_module.default[`size-${size}`], className),
     key: "spinner",
     "data-testid": SPINNER_TEST_ID
-  }));
+  });
 });
 
 exports.SPINNER_TEST_ID = SPINNER_TEST_ID;

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 React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { cssVar } 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': cssVar(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","React","createElement","Object","assign","ref","cssVar","classNames","styles","key"],"mappings":";;;;;;;AAYO,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;EACA,oBACEC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,KACML,IAAI,EAAA;AACRM,IAAAA,GAAG,EAAEL,YAAa;AAClBL,IAAAA,KAAK,EACH;AACE,MAAA,mBAAmB,EAAEW,YAAM,CAACR,KAAK,CAAC;MAClC,GAAGH;KAEN;AACDC,IAAAA,SAAS,EAAEW,aAAU,CACnBC,sBAAM,CAACf,OAAO,EACde,sBAAM,CAAC,QAAQX,IAAI,CAAA,CAAE,CAAC,EACtBD,SACF,CAAE;AACFa,IAAAA,GAAG,EAAC,SAAS;IACb,aAAajB,EAAAA;AAAgB,GAAA,CAC9B,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 { cssVar } 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': cssVar(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","cssVar","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,YAAM,CAACL,KAAK,CAAC;MAClC,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/Stack/Stack.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var propsHelpers = require('../../types/props-helpers.js');
 var style = require('../../utils/style.js');
 var Stack_module = require('./Stack.module.scss.js');

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

@@ -2,9 +2,10 @@
 
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var style = require('../../utils/style.js');
 var Status_module = require('./Status.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
 
 const statusTypesWithIcon = ['online-crescent', 'offline-crescent', 'lock'];
@@ -28,19 +29,21 @@ const Status = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function St
 }, forwardedRef) {
   const withIcon = statusTypesWithIcon.includes(type);
   const backgroundColor = withIcon ? 'bg-white-high' : statusColor[type];
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: forwardedRef,
     style: {
       '--b-status-bg-color': style.cssVar(backgroundColor),
       ...style$1
     },
-    className: index.default(Status_module.default.Status, Status_module.default[`size-${size}`], className)
-  }, rest), withIcon && /*#__PURE__*/React.createElement(Icon.Icon, {
-    source: type === 'lock' ? bezierIcons.LockIcon : bezierIcons.MoonFilledIcon,
-    size: size === 'm' ? 'xxxs' : 'xs',
-    color: statusColor[type],
-    className: Status_module.default.Icon
-  }));
+    className: index.default(Status_module.default.Status, Status_module.default[`size-${size}`], className),
+    ...rest,
+    children: withIcon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      source: type === 'lock' ? bezierIcons.LockIcon : bezierIcons.MoonFilledIcon,
+      size: size === 'm' ? 'xxxs' : 'xs',
+      color: statusColor[type],
+      className: Status_module.default.Icon
+    })
+  });
 }));
 
 exports.Status = Status;

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 React, { type CSSProperties, forwardRef, memo } from 'react'\n\nimport { LockIcon, MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type SemanticColor } from '~/src/types/tokens'\nimport { cssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusProps, type StatusType } from './Status.types'\n\nimport styles from './Status.module.scss'\n\nconst statusTypesWithIcon: Readonly<StatusType[]> = [\n  'online-crescent',\n  'offline-crescent',\n  'lock',\n]\n\nconst statusColor: Readonly<Record<StatusType, SemanticColor>> = {\n  online: 'bgtxt-green-normal',\n  offline: 'bg-black-dark',\n  'online-crescent': 'bgtxt-green-normal',\n  'offline-crescent': 'bgtxt-yellow-normal',\n  lock: 'txt-black-darker',\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 ? 'bg-white-high' : statusColor[type]\n\n    return (\n      <div\n        ref={forwardedRef}\n        style={\n          {\n            '--b-status-bg-color': cssVar(backgroundColor),\n            ...style,\n          } as CSSProperties\n        }\n        className={classNames(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","React","createElement","Object","assign","ref","cssVar","classNames","styles","Icon","source","LockIcon","MoonFilledIcon","color"],"mappings":";;;;;;;;;AAgBA,MAAMA,mBAA2C,GAAG,CAClD,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,CACP;AAED,MAAMC,WAAwD,GAAG;AAC/DC,EAAAA,MAAM,EAAE,oBAAoB;AAC5BC,EAAAA,OAAO,EAAE,eAAe;AACxB,EAAA,iBAAiB,EAAE,oBAAoB;AACvC,EAAA,kBAAkB,EAAE,qBAAqB;AACzCC,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,eAAe,GAAGb,WAAW,CAACO,IAAI,CAAC;AAEtE,EAAA,oBACES,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAER,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEY,YAAM,CAACN,eAAe,CAAC;MAC9C,GAAGN;KAEN;AACDC,IAAAA,SAAS,EAAEY,aAAU,CAACC,qBAAM,CAACnB,MAAM,EAAEmB,qBAAM,CAAC,CAAQf,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EAAEE,SAAS;GAClEC,EAAAA,IAAI,GAEPE,QAAQ,iBACPG,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAElB,IAAI,KAAK,MAAM,GAAGmB,oBAAQ,GAAGC,0BAAe;AACpDnB,IAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCoB,IAAAA,KAAK,EAAE5B,WAAW,CAACO,IAAI,CAAE;IACzBG,SAAS,EAAEa,qBAAM,CAACC;AAAK,GACxB,CAEA,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 SemanticColor } from '~/src/types/tokens'\nimport { cssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusProps, type StatusType } from './Status.types'\n\nimport styles from './Status.module.scss'\n\nconst statusTypesWithIcon: Readonly<StatusType[]> = [\n  'online-crescent',\n  'offline-crescent',\n  'lock',\n]\n\nconst statusColor: Readonly<Record<StatusType, SemanticColor>> = {\n  online: 'bgtxt-green-normal',\n  offline: 'bg-black-dark',\n  'online-crescent': 'bgtxt-green-normal',\n  'offline-crescent': 'bgtxt-yellow-normal',\n  lock: 'txt-black-darker',\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 ? 'bg-white-high' : statusColor[type]\n\n    return (\n      <div\n        ref={forwardedRef}\n        style={\n          {\n            '--b-status-bg-color': cssVar(backgroundColor),\n            ...style,\n          } as CSSProperties\n        }\n        className={classNames(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","cssVar","classNames","styles","children","Icon","source","LockIcon","MoonFilledIcon","color"],"mappings":";;;;;;;;;;AAgBA,MAAMA,mBAA2C,GAAG,CAClD,iBAAiB,EACjB,kBAAkB,EAClB,MAAM,CACP;AAED,MAAMC,WAAwD,GAAG;AAC/DC,EAAAA,MAAM,EAAE,oBAAoB;AAC5BC,EAAAA,OAAO,EAAE,eAAe;AACxB,EAAA,iBAAiB,EAAE,oBAAoB;AACvC,EAAA,kBAAkB,EAAE,qBAAqB;AACzCC,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,eAAe,GAAGb,WAAW,CAACO,IAAI,CAAC;AAEtE,EAAA,oBACES,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEL,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAES,YAAM,CAACH,eAAe,CAAC;MAC9C,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/Switch/Switch.js

@@ -2,8 +2,9 @@
 
 var React = require('react');
 var index = require('../../node_modules/@radix-ui/react-switch/dist/index.js');
-var index$1 = require('../../node_modules/classnames/index.js');
+var index$1 = require('../../_virtual/index.js');
 var Switch_module = require('./Switch.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var FormControl = require('../FormControl/FormControl.js');
 var BaseButton = require('../BaseButton/BaseButton.js');
 
@@ -33,22 +34,26 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch({
     hasError,
     ...ownProps
   } = FormControl.useFormFieldProps(rest);
-  return /*#__PURE__*/React.createElement(index.Root, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(index.Root, {
     asChild: true,
     checked: checked,
     defaultChecked: defaultChecked,
     onCheckedChange: onCheckedChange,
     required: required,
     disabled: disabled,
-    "data-testid": SWITCH_TEST_ID
-  }, ownProps), /*#__PURE__*/React.createElement(BaseButton.BaseButton, {
-    ref: forwardedRef,
-    className: index$1.default(Switch_module.default.Switch, Switch_module.default[`size-${size}`], className)
-  }, /*#__PURE__*/React.createElement(index.Thumb, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement("span", {
-    className: Switch_module.default.SwitchThumb
-  }))));
+    "data-testid": SWITCH_TEST_ID,
+    ...ownProps,
+    children: /*#__PURE__*/jsxRuntime.jsx(BaseButton.BaseButton, {
+      ref: forwardedRef,
+      className: index$1.default(Switch_module.default.Switch, Switch_module.default[`size-${size}`], className),
+      children: /*#__PURE__*/jsxRuntime.jsx(index.Thumb, {
+        asChild: true,
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: Switch_module.default.SwitchThumb
+        })
+      })
+    })
+  });
 });
 
 exports.SWITCH_TEST_ID = SWITCH_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport classNames from 'classnames'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\n\nimport { type SwitchProps } from './Switch.types'\n\nimport styles from './Switch.module.scss'\n\nexport const SWITCH_TEST_ID = 'bezier-switch'\n\n/**\n * `Switch` is an input component where user can toggle checked state of the element.\n * @example\n * ```tsx\n * <Switch\n *   size=\"m\"\n *   checked\n * />\n * ```\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  function Switch(\n    {\n      checked,\n      defaultChecked = false,\n      onCheckedChange,\n      size = 'm',\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { disabled, required, hasError, ...ownProps } =\n      useFormFieldProps(rest)\n\n    return (\n      <SwitchPrimitive.Root\n        asChild\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onCheckedChange={onCheckedChange}\n        required={required}\n        disabled={disabled}\n        data-testid={SWITCH_TEST_ID}\n        {...ownProps}\n      >\n        <BaseButton\n          ref={forwardedRef}\n          className={classNames(\n            styles.Switch,\n            styles[`size-${size}`],\n            className\n          )}\n        >\n          <SwitchPrimitive.Thumb asChild>\n            <span className={styles.SwitchThumb} />\n          </SwitchPrimitive.Thumb>\n        </BaseButton>\n      </SwitchPrimitive.Root>\n    )\n  }\n)\n"],"names":["SWITCH_TEST_ID","Switch","forwardRef","checked","defaultChecked","onCheckedChange","size","className","rest","forwardedRef","disabled","required","hasError","ownProps","useFormFieldProps","React","createElement","SwitchPrimitive","Object","assign","asChild","BaseButton","ref","classNames","styles","SwitchThumb"],"mappings":";;;;;;;;;AAcO,MAAMA,cAAc,GAAG;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,MAAM,gBAAGC,gBAAU,CAC9B,SAASD,MAAMA,CACb;EACEE,OAAO;AACPC,EAAAA,cAAc,GAAG,KAAK;EACtBC,eAAe;AACfC,EAAAA,IAAI,GAAG,GAAG;EACVC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;AAAS,GAAC,GACjDC,6BAAiB,CAACN,IAAI,CAAC;EAEzB,oBACEO,KAAA,CAAAC,aAAA,CAACC,UAAoB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACnBC,OAAO,EAAA,IAAA;AACPjB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,eAAe,EAAEA,eAAgB;AACjCM,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,QAAQ,EAAEA,QAAS;IACnB,aAAaV,EAAAA;AAAe,GAAA,EACxBa,QAAQ,CAEZE,eAAAA,KAAA,CAAAC,aAAA,CAACK,qBAAU,EAAA;AACTC,IAAAA,GAAG,EAAEb,YAAa;AAClBF,IAAAA,SAAS,EAAEgB,eAAU,CACnBC,qBAAM,CAACvB,MAAM,EACbuB,qBAAM,CAAC,CAAQlB,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EACtBC,SACF;AAAE,GAAA,eAEFQ,KAAA,CAAAC,aAAA,CAACC,WAAqB,EAAA;IAACG,OAAO,EAAA;GAC5BL,eAAAA,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMT,SAAS,EAAEiB,qBAAM,CAACC;GAAc,CACjB,CACb,CACQ,CAAC;AAE3B,CACF;;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport classNames from 'classnames'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { useFormFieldProps } from '~/src/components/FormControl'\n\nimport { type SwitchProps } from './Switch.types'\n\nimport styles from './Switch.module.scss'\n\nexport const SWITCH_TEST_ID = 'bezier-switch'\n\n/**\n * `Switch` is an input component where user can toggle checked state of the element.\n * @example\n * ```tsx\n * <Switch\n *   size=\"m\"\n *   checked\n * />\n * ```\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  function Switch(\n    {\n      checked,\n      defaultChecked = false,\n      onCheckedChange,\n      size = 'm',\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { disabled, required, hasError, ...ownProps } =\n      useFormFieldProps(rest)\n\n    return (\n      <SwitchPrimitive.Root\n        asChild\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onCheckedChange={onCheckedChange}\n        required={required}\n        disabled={disabled}\n        data-testid={SWITCH_TEST_ID}\n        {...ownProps}\n      >\n        <BaseButton\n          ref={forwardedRef}\n          className={classNames(\n            styles.Switch,\n            styles[`size-${size}`],\n            className\n          )}\n        >\n          <SwitchPrimitive.Thumb asChild>\n            <span className={styles.SwitchThumb} />\n          </SwitchPrimitive.Thumb>\n        </BaseButton>\n      </SwitchPrimitive.Root>\n    )\n  }\n)\n"],"names":["SWITCH_TEST_ID","Switch","forwardRef","checked","defaultChecked","onCheckedChange","size","className","rest","forwardedRef","disabled","required","hasError","ownProps","useFormFieldProps","_jsx","SwitchPrimitive","asChild","children","BaseButton","ref","classNames","styles","SwitchThumb"],"mappings":";;;;;;;;;;AAcO,MAAMA,cAAc,GAAG;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,MAAM,gBAAGC,gBAAU,CAC9B,SAASD,MAAMA,CACb;EACEE,OAAO;AACPC,EAAAA,cAAc,GAAG,KAAK;EACtBC,eAAe;AACfC,EAAAA,IAAI,GAAG,GAAG;EACVC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;AAAS,GAAC,GACjDC,6BAAiB,CAACN,IAAI,CAAC;AAEzB,EAAA,oBACEO,cAAA,CAACC,UAAoB,EAAA;IACnBC,OAAO,EAAA,IAAA;AACPd,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,eAAe,EAAEA,eAAgB;AACjCM,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,aAAA,EAAaV,cAAe;AAAA,IAAA,GACxBa,QAAQ;IAAAK,QAAA,eAEZH,cAAA,CAACI,qBAAU,EAAA;AACTC,MAAAA,GAAG,EAAEX,YAAa;AAClBF,MAAAA,SAAS,EAAEc,eAAU,CACnBC,qBAAM,CAACrB,MAAM,EACbqB,qBAAM,CAAC,QAAQhB,IAAI,CAAA,CAAE,CAAC,EACtBC,SACF,CAAE;AAAAW,MAAAA,QAAA,eAEFH,cAAA,CAACC,WAAqB,EAAA;QAACC,OAAO,EAAA,IAAA;AAAAC,QAAAA,QAAA,eAC5BH,cAAA,CAAA,MAAA,EAAA;UAAMR,SAAS,EAAEe,qBAAM,CAACC;SAAc;OACjB;KACb;AAAC,GACO,CAAC;AAE3B,CACF;;;;;"}

package/dist/cjs/components/Tabs/Tabs.js

@@ -4,36 +4,16 @@ var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
 var index = require('../../node_modules/@radix-ui/react-tabs/dist/index.js');
 var index$2 = require('../../node_modules/@radix-ui/react-toolbar/dist/index.js');
-var index$1 = require('../../node_modules/classnames/index.js');
+var index$1 = require('../../_virtual/index.js');
 var react = require('../../utils/react.js');
 var type = require('../../utils/type.js');
 var Tabs_module = require('./Tabs.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Button = require('../Button/Button.js');
 var BaseButton = require('../BaseButton/BaseButton.js');
 var Text = require('../Text/Text.js');
 var Icon = require('../Icon/Icon.js');
 
-/**
- * `Tabs` is a set of layered section of content.
- *
- * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.
- * @example
- *
- * ```tsx
- * <Tabs>
- *  <TabList>
- *    <TabItems>
- *      <TabItem />
- *    <TabItems />
- *    <TabActions>
- *      <TabAction />
- *    </TabActions>
- *  </TabList>
- *  <TabContent />
- * </Tabs>
- * ```
- */
-
 const Tabs = /*#__PURE__*/React.forwardRef(function Tabs({
   className,
   activationMode = 'automatic',
@@ -41,12 +21,14 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs({
   children,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement(index.Root, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(index.Root, {
     className: index$1.default(Tabs_module.default.Tabs, className),
     activationMode: activationMode,
     ref: forwardedRef,
-    dir: dir
-  }, rest), children);
+    dir: dir,
+    ...rest,
+    children: children
+  });
 });
 const [TabListContextProvider, useTabListContext] = react.createContext({
   size: 'm'
@@ -64,12 +46,15 @@ const TabList = /*#__PURE__*/React.forwardRef(function TabList({
   const heightContextValue = React.useMemo(() => ({
     size
   }), [size]);
-  return /*#__PURE__*/React.createElement(TabListContextProvider, {
-    value: heightContextValue
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: index$1.default(Tabs_module.default.TabList, Tabs_module.default[`size-${size}`], className),
-    ref: forwardedRef
-  }, rest), children));
+  return /*#__PURE__*/jsxRuntime.jsx(TabListContextProvider, {
+    value: heightContextValue,
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: index$1.default(Tabs_module.default.TabList, Tabs_module.default[`size-${size}`], className),
+      ref: forwardedRef,
+      ...rest,
+      children: children
+    })
+  });
 });
 
 /**
@@ -80,10 +65,12 @@ const TabItems = /*#__PURE__*/React.forwardRef(function TabItems({
   children,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement(index.TabsList, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(index.TabsList, {
     className: index$1.default(Tabs_module.default.TabItems, className),
-    ref: forwardedRef
-  }, rest), children);
+    ref: forwardedRef,
+    ...rest,
+    children: children
+  });
 });
 function getButtonSizeBy(size) {
   return {
@@ -109,19 +96,21 @@ const TabItem = /*#__PURE__*/React.forwardRef(function TabItem({
   if (typeof children !== 'string') {
     return null;
   }
-  return /*#__PURE__*/React.createElement(index.TabsTrigger, {
+  return /*#__PURE__*/jsxRuntime.jsx(index.TabsTrigger, {
     disabled: disabled,
     value: value,
-    asChild: true
-  }, /*#__PURE__*/React.createElement(Button.Button, Object.assign({
-    className: index$1.default(Tabs_module.default.TabItem, className),
-    disabled: disabled,
-    text: children,
-    size: getButtonSizeBy(size),
-    colorVariant: "monochrome-light",
-    styleVariant: "tertiary",
-    ref: forwardedRef
-  }, rest)));
+    asChild: true,
+    children: /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+      className: index$1.default(Tabs_module.default.TabItem, className),
+      disabled: disabled,
+      text: children,
+      size: getButtonSizeBy(size),
+      colorVariant: "monochrome-light",
+      styleVariant: "tertiary",
+      ref: forwardedRef,
+      ...rest
+    })
+  });
 });
 
 /**
@@ -132,10 +121,12 @@ const TabContent = /*#__PURE__*/React.forwardRef(function TabContent({
   value,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement(index.Content, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(index.Content, {
     value: value,
-    ref: forwardedRef
-  }, rest), children);
+    ref: forwardedRef,
+    ...rest,
+    children: children
+  });
 });
 
 /**
@@ -148,12 +139,14 @@ const TabActions = /*#__PURE__*/React.forwardRef(function TabActions({
   children,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement(index$2.Root, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(index$2.Root, {
     className: index$1.default(Tabs_module.default.TabActions, className),
     "aria-label": "More actions",
     ref: forwardedRef,
-    dir: dir
-  }, rest), children);
+    dir: dir,
+    ...rest,
+    children: children
+  });
 });
 function getTypoBy(size) {
   return {
@@ -185,30 +178,38 @@ const TabAction = /*#__PURE__*/React.forwardRef(function TabAction({
     size
   } = useTabListContext();
   const className = index$1.default(Tabs_module.default.TabAction, Tabs_module.default[`size-${size}`], classNameProp);
-  return type.isNil(href) ? /*#__PURE__*/React.createElement(index$2.Button, Object.assign({
+  return type.isNil(href) ? /*#__PURE__*/jsxRuntime.jsx(index$2.Button, {
     asChild: true,
     className: className,
     onClick: onClick,
-    ref: forwardedRef
-  }, rest), /*#__PURE__*/React.createElement(BaseButton.BaseButton, null, /*#__PURE__*/React.createElement(Text.Text, {
-    bold: true,
-    typo: getTypoBy(size)
-  }, children))) : /*#__PURE__*/React.createElement(index$2.Link, Object.assign({
+    ref: forwardedRef,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(BaseButton.BaseButton, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+        bold: true,
+        typo: getTypoBy(size),
+        children: children
+      })
+    })
+  }) : /*#__PURE__*/jsxRuntime.jsxs(index$2.Link, {
     className: className,
     href: href,
     target: "_blank",
     rel: "noopener noreferrer"
     // @ts-expect-error
     ,
-    ref: forwardedRef
-  }, rest), /*#__PURE__*/React.createElement(Text.Text, {
-    bold: true,
-    typo: getTypoBy(size)
-  }, children), /*#__PURE__*/React.createElement(Icon.Icon, {
-    source: bezierIcons.OpenInNewIcon,
-    size: getIconSizeBy(size),
-    marginLeft: 5
-  }));
+    ref: forwardedRef,
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+      bold: true,
+      typo: getTypoBy(size),
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      source: bezierIcons.OpenInNewIcon,
+      size: getIconSizeBy(size),
+      marginLeft: 5
+    })]
+  });
 });
 
 exports.TabAction = TabAction;

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useMemo } from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport {\n  type TabActionElement,\n  type TabActionProps,\n  type TabActionsProps,\n  type TabContentProps,\n  type TabItemProps,\n  type TabItemsProps,\n  type TabListContextValue,\n  type TabListProps,\n  type TabSize,\n  type TabsProps,\n} from '~/src/components/Tabs/Tabs.types'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Tabs.module.scss'\n\n/**\n * `Tabs` is a set of layered section of content.\n *\n * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.\n * @example\n *\n * ```tsx\n * <Tabs>\n *  <TabList>\n *    <TabItems>\n *      <TabItem />\n *    <TabItems />\n *    <TabActions>\n *      <TabAction />\n *    </TabActions>\n *  </TabList>\n *  <TabContent />\n * </Tabs>\n * ```\n */\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, activationMode = 'automatic', dir, children, ...rest },\n  forwardedRef\n) {\n  return (\n    <TabsPrimitive.Root\n      className={classNames(styles.Tabs, className)}\n      activationMode={activationMode}\n      ref={forwardedRef}\n      dir={dir as 'ltr' | 'rtl'}\n      {...rest}\n    >\n      {children}\n    </TabsPrimitive.Root>\n  )\n})\n\nconst [TabListContextProvider, useTabListContext] =\n  createContext<TabListContextValue>({\n    size: 'm',\n  })\n\n/**\n * `TabList` gives size context to its children and decides the layout of `TabItems` and `TabActions`.\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList({ className, children, size = 'm', ...rest }, forwardedRef) {\n    const heightContextValue = useMemo(\n      () => ({\n        size,\n      }),\n      [size]\n    )\n\n    return (\n      <TabListContextProvider value={heightContextValue}>\n        <div\n          className={classNames(\n            styles.TabList,\n            styles[`size-${size}`],\n            className\n          )}\n          ref={forwardedRef}\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabListContextProvider>\n    )\n  }\n)\n\n/**\n * `TabItems` is a flex container which has `TabItem` flex items.\n */\nexport const TabItems = forwardRef<HTMLDivElement, TabItemsProps>(\n  function TabItems({ className, children, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.TabsList\n        className={classNames(styles.TabItems, className)}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.TabsList>\n    )\n  }\n)\n\nfunction getButtonSizeBy(size: TabSize) {\n  return (\n    {\n      l: 'l',\n      m: 'm',\n      s: 's',\n    } as const\n  )[size]\n}\n\n/**\n * `TabItem` is a button that activates its associated content.\n */\nexport const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(\n  function TabItem(\n    { className, disabled, value, children, ...rest },\n    forwardedRef\n  ) {\n    const { size } = useTabListContext()\n\n    if (typeof children !== 'string') {\n      return null\n    }\n\n    return (\n      <TabsPrimitive.TabsTrigger\n        disabled={disabled}\n        value={value}\n        asChild\n      >\n        <Button\n          className={classNames(styles.TabItem, className)}\n          disabled={disabled}\n          text={children}\n          size={getButtonSizeBy(size)}\n          colorVariant=\"monochrome-light\"\n          styleVariant=\"tertiary\"\n          ref={forwardedRef}\n          {...rest}\n        />\n      </TabsPrimitive.TabsTrigger>\n    )\n  }\n)\n\n/**\n * `TabContent` has content associated with `TabItem`.\n */\nexport const TabContent = forwardRef<HTMLDivElement, TabContentProps>(\n  function TabContent({ children, value, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.Content\n        value={value}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.Content>\n    )\n  }\n)\n\n/**\n * `TabActions` is a flex container which has `TabAction` flex items.\n *  It also gives accessibility properties to its children.\n */\nexport const TabActions = forwardRef<HTMLDivElement, TabActionsProps>(\n  function TabActions({ className, dir, children, ...rest }, forwardedRef) {\n    return (\n      <ToolbarPrimitive.Root\n        className={classNames(styles.TabActions, className)}\n        aria-label=\"More actions\"\n        ref={forwardedRef}\n        dir={dir as 'ltr' | 'rtl'}\n        {...rest}\n      >\n        {children}\n      </ToolbarPrimitive.Root>\n    )\n  }\n)\n\nfunction getTypoBy(size: TabSize) {\n  return (\n    {\n      l: '14',\n      m: '14',\n      s: '13',\n    } as const\n  )[size]\n}\n\nfunction getIconSizeBy(size: TabSize) {\n  return (\n    {\n      l: 's',\n      m: 'xs',\n      s: 'xs',\n    } as const\n  )[size]\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef<\n  TabActionElement<string | undefined>,\n  TabActionProps<string | undefined>\n>(function TabAction(\n  { className: classNameProp, href, children, onClick, ...rest },\n  forwardedRef\n) {\n  const { size } = useTabListContext()\n  const className = classNames(\n    styles.TabAction,\n    styles[`size-${size}`],\n    classNameProp\n  )\n\n  return isNil(href) ? (\n    <ToolbarPrimitive.Button\n      asChild\n      className={className}\n      onClick={onClick}\n      ref={forwardedRef}\n      {...rest}\n    >\n      <BaseButton>\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          {children}\n        </Text>\n      </BaseButton>\n    </ToolbarPrimitive.Button>\n  ) : (\n    <ToolbarPrimitive.Link\n      className={className}\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      // @ts-expect-error\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Text\n        bold\n        typo={getTypoBy(size)}\n      >\n        {children}\n      </Text>\n      <Icon\n        source={OpenInNewIcon}\n        size={getIconSizeBy(size)}\n        marginLeft={5}\n      />\n    </ToolbarPrimitive.Link>\n  )\n}) as <Link extends string | undefined>(\n  props: TabActionProps<Link> & {\n    ref?: React.ForwardedRef<TabActionElement<Link>>\n  }\n) => JSX.Element\n"],"names":["Tabs","forwardRef","className","activationMode","dir","children","rest","forwardedRef","React","createElement","TabsPrimitive","Object","assign","classNames","styles","ref","TabListContextProvider","useTabListContext","createContext","size","TabList","heightContextValue","useMemo","value","TabItems","getButtonSizeBy","l","m","s","TabItem","disabled","asChild","Button","text","colorVariant","styleVariant","TabContent","TabActions","ToolbarPrimitive","getTypoBy","getIconSizeBy","TabAction","classNameProp","href","onClick","isNil","BaseButton","Text","bold","typo","target","rel","Icon","source","OpenInNewIcon","marginLeft"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport { type JSX, forwardRef, useMemo } from 'react'\nimport * as React from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport {\n  type TabActionElement,\n  type TabActionProps,\n  type TabActionsProps,\n  type TabContentProps,\n  type TabItemProps,\n  type TabItemsProps,\n  type TabListContextValue,\n  type TabListProps,\n  type TabSize,\n  type TabsProps,\n} from '~/src/components/Tabs/Tabs.types'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Tabs.module.scss'\n\n/**\n * `Tabs` is a set of layered section of content.\n *\n * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.\n * @example\n *\n * ```tsx\n * <Tabs>\n *  <TabList>\n *    <TabItems>\n *      <TabItem />\n *    <TabItems />\n *    <TabActions>\n *      <TabAction />\n *    </TabActions>\n *  </TabList>\n *  <TabContent />\n * </Tabs>\n * ```\n */\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, activationMode = 'automatic', dir, children, ...rest },\n  forwardedRef\n) {\n  return (\n    <TabsPrimitive.Root\n      className={classNames(styles.Tabs, className)}\n      activationMode={activationMode}\n      ref={forwardedRef}\n      dir={dir as 'ltr' | 'rtl'}\n      {...rest}\n    >\n      {children}\n    </TabsPrimitive.Root>\n  )\n})\n\nconst [TabListContextProvider, useTabListContext] =\n  createContext<TabListContextValue>({\n    size: 'm',\n  })\n\n/**\n * `TabList` gives size context to its children and decides the layout of `TabItems` and `TabActions`.\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList({ className, children, size = 'm', ...rest }, forwardedRef) {\n    const heightContextValue = useMemo(\n      () => ({\n        size,\n      }),\n      [size]\n    )\n\n    return (\n      <TabListContextProvider value={heightContextValue}>\n        <div\n          className={classNames(\n            styles.TabList,\n            styles[`size-${size}`],\n            className\n          )}\n          ref={forwardedRef}\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabListContextProvider>\n    )\n  }\n)\n\n/**\n * `TabItems` is a flex container which has `TabItem` flex items.\n */\nexport const TabItems = forwardRef<HTMLDivElement, TabItemsProps>(\n  function TabItems({ className, children, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.TabsList\n        className={classNames(styles.TabItems, className)}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.TabsList>\n    )\n  }\n)\n\nfunction getButtonSizeBy(size: TabSize) {\n  return (\n    {\n      l: 'l',\n      m: 'm',\n      s: 's',\n    } as const\n  )[size]\n}\n\n/**\n * `TabItem` is a button that activates its associated content.\n */\nexport const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(\n  function TabItem(\n    { className, disabled, value, children, ...rest },\n    forwardedRef\n  ) {\n    const { size } = useTabListContext()\n\n    if (typeof children !== 'string') {\n      return null\n    }\n\n    return (\n      <TabsPrimitive.TabsTrigger\n        disabled={disabled}\n        value={value}\n        asChild\n      >\n        <Button\n          className={classNames(styles.TabItem, className)}\n          disabled={disabled}\n          text={children}\n          size={getButtonSizeBy(size)}\n          colorVariant=\"monochrome-light\"\n          styleVariant=\"tertiary\"\n          ref={forwardedRef}\n          {...rest}\n        />\n      </TabsPrimitive.TabsTrigger>\n    )\n  }\n)\n\n/**\n * `TabContent` has content associated with `TabItem`.\n */\nexport const TabContent = forwardRef<HTMLDivElement, TabContentProps>(\n  function TabContent({ children, value, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.Content\n        value={value}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.Content>\n    )\n  }\n)\n\n/**\n * `TabActions` is a flex container which has `TabAction` flex items.\n *  It also gives accessibility properties to its children.\n */\nexport const TabActions = forwardRef<HTMLDivElement, TabActionsProps>(\n  function TabActions({ className, dir, children, ...rest }, forwardedRef) {\n    return (\n      <ToolbarPrimitive.Root\n        className={classNames(styles.TabActions, className)}\n        aria-label=\"More actions\"\n        ref={forwardedRef}\n        dir={dir as 'ltr' | 'rtl'}\n        {...rest}\n      >\n        {children}\n      </ToolbarPrimitive.Root>\n    )\n  }\n)\n\nfunction getTypoBy(size: TabSize) {\n  return (\n    {\n      l: '14',\n      m: '14',\n      s: '13',\n    } as const\n  )[size]\n}\n\nfunction getIconSizeBy(size: TabSize) {\n  return (\n    {\n      l: 's',\n      m: 'xs',\n      s: 'xs',\n    } as const\n  )[size]\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef<\n  TabActionElement<string | undefined>,\n  TabActionProps<string | undefined>\n>(function TabAction(\n  { className: classNameProp, href, children, onClick, ...rest },\n  forwardedRef\n) {\n  const { size } = useTabListContext()\n  const className = classNames(\n    styles.TabAction,\n    styles[`size-${size}`],\n    classNameProp\n  )\n\n  return isNil(href) ? (\n    <ToolbarPrimitive.Button\n      asChild\n      className={className}\n      onClick={onClick}\n      ref={forwardedRef}\n      {...rest}\n    >\n      <BaseButton>\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          {children}\n        </Text>\n      </BaseButton>\n    </ToolbarPrimitive.Button>\n  ) : (\n    <ToolbarPrimitive.Link\n      className={className}\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      // @ts-expect-error\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Text\n        bold\n        typo={getTypoBy(size)}\n      >\n        {children}\n      </Text>\n      <Icon\n        source={OpenInNewIcon}\n        size={getIconSizeBy(size)}\n        marginLeft={5}\n      />\n    </ToolbarPrimitive.Link>\n  )\n}) as <Link extends string | undefined>(\n  props: TabActionProps<Link> & {\n    ref?: React.ForwardedRef<TabActionElement<Link>>\n  }\n) => JSX.Element\n"],"names":["Tabs","forwardRef","className","activationMode","dir","children","rest","forwardedRef","_jsx","TabsPrimitive","classNames","styles","ref","TabListContextProvider","useTabListContext","createContext","size","TabList","heightContextValue","useMemo","value","TabItems","getButtonSizeBy","l","m","s","TabItem","disabled","asChild","Button","text","colorVariant","styleVariant","TabContent","TabActions","ToolbarPrimitive","getTypoBy","getIconSizeBy","TabAction","classNameProp","href","onClick","isNil","BaseButton","Text","bold","typo","_jsxs","target","rel","Icon","source","OpenInNewIcon","marginLeft"],"mappings":"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"}

package/dist/cjs/components/Tag/Tag.js

@@ -4,6 +4,7 @@ var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
 var type = require('../../utils/type.js');
 var Tag_module = require('./Tag.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var BaseTagBadge = require('../BaseTagBadge/BaseTagBadge.js');
 var Icon = require('../Icon/Icon.js');
 
@@ -30,28 +31,31 @@ const Tag = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Tag({
   onDelete,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement(BaseTagBadge.BaseTagBadge, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsxs(BaseTagBadge.BaseTagBadge, {
     ref: forwardedRef,
     size: size,
     variant: variant,
-    "data-testid": TAG_TEST_ID
-  }, rest), !type.isEmpty(children) && /*#__PURE__*/React.createElement(BaseTagBadge.BaseTagBadgeText, {
-    size: size,
-    marginHorizontal: 2,
-    color: "txt-black-darkest"
-  }, children), !type.isNil(onDelete) && /*#__PURE__*/React.createElement(Icon.Icon, {
-    role: "button",
-    tabIndex: 0,
-    className: Tag_module.default.TagDeleteIcon,
-    source: bezierIcons.CancelSmallIcon,
-    size: "xs",
-    color: "txt-black-darker",
-    onClick: e => {
-      e.stopPropagation();
-      onDelete(e);
-    },
-    "data-testid": TAG_DELETE_TEST_ID
-  }));
+    "data-testid": TAG_TEST_ID,
+    ...rest,
+    children: [!type.isEmpty(children) && /*#__PURE__*/jsxRuntime.jsx(BaseTagBadge.BaseTagBadgeText, {
+      size: size,
+      marginHorizontal: 2,
+      color: "txt-black-darkest",
+      children: children
+    }), !type.isNil(onDelete) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      role: "button",
+      tabIndex: 0,
+      className: Tag_module.default.TagDeleteIcon,
+      source: bezierIcons.CancelSmallIcon,
+      size: "xs",
+      color: "txt-black-darker",
+      onClick: e => {
+        e.stopPropagation();
+        onDelete(e);
+      },
+      "data-testid": TAG_DELETE_TEST_ID
+    })]
+  });
 }));
 
 exports.TAG_DELETE_TEST_ID = TAG_DELETE_TEST_ID;

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, memo } from 'react'\n\nimport { CancelSmallIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty, isNil } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type TagProps } from './Tag.types'\n\nimport styles from './Tag.module.scss'\n\nexport const TAG_TEST_ID = 'bezier-tag'\nexport const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon'\n\n/**\n * `Tag` is a component for representing tag, which shows close icon when `onDelete` property is specified.\n * @example\n * ```tsx\n * <Tag\n *   size=\"m\"\n *   variant=\"default\"\n *   onDelete={handleDelete}\n * >\n *   Payment\n * </Tag>\n * ```\n */\nexport const Tag = memo(\n  forwardRef<HTMLDivElement, TagProps>(function Tag(\n    { size = 'm', variant = 'default', children, onDelete, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={TAG_TEST_ID}\n        {...rest}\n      >\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={2}\n            color=\"txt-black-darkest\"\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n\n        {!isNil(onDelete) && (\n          <Icon\n            role=\"button\"\n            tabIndex={0}\n            className={styles.TagDeleteIcon}\n            source={CancelSmallIcon}\n            size=\"xs\"\n            color=\"txt-black-darker\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDelete(e)\n            }}\n            data-testid={TAG_DELETE_TEST_ID}\n          />\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["TAG_TEST_ID","TAG_DELETE_TEST_ID","Tag","memo","forwardRef","size","variant","children","onDelete","rest","forwardedRef","React","createElement","BaseTagBadge","Object","assign","ref","isEmpty","BaseTagBadgeText","marginHorizontal","color","isNil","Icon","role","tabIndex","className","styles","TagDeleteIcon","source","CancelSmallIcon","onClick","e","stopPropagation"],"mappings":";;;;;;;;;AAeO,MAAMA,WAAW,GAAG;AACpB,MAAMC,kBAAkB,GAAG;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,GAAG,gBAAGC,UAAI,cACrBC,gBAAU,CAA2B,SAASF,GAAGA,CAC/C;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAChEC,YAAY,EACZ;EACA,oBACEC,KAAA,CAAAC,aAAA,CAACC,yBAAY,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACXC,IAAAA,GAAG,EAAEN,YAAa;AAClBL,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;IACjB,aAAaN,EAAAA;AAAY,GAAA,EACrBS,IAAI,CAAA,EAEP,CAACQ,YAAO,CAACV,QAAQ,CAAC,iBACjBI,KAAA,CAAAC,aAAA,CAACM,6BAAgB,EAAA;AACfb,IAAAA,IAAI,EAAEA,IAAK;AACXc,IAAAA,gBAAgB,EAAE,CAAE;AACpBC,IAAAA,KAAK,EAAC;AAAmB,GAAA,EAExBb,QACe,CACnB,EAEA,CAACc,UAAK,CAACb,QAAQ,CAAC,iBACfG,KAAA,CAAAC,aAAA,CAACU,SAAI,EAAA;AACHC,IAAAA,IAAI,EAAC,QAAQ;AACbC,IAAAA,QAAQ,EAAE,CAAE;IACZC,SAAS,EAAEC,kBAAM,CAACC,aAAc;AAChCC,IAAAA,MAAM,EAAEC,2BAAgB;AACxBxB,IAAAA,IAAI,EAAC,IAAI;AACTe,IAAAA,KAAK,EAAC,kBAAkB;IACxBU,OAAO,EAAGC,CAAC,IAAK;MACdA,CAAC,CAACC,eAAe,EAAE;MACnBxB,QAAQ,CAACuB,CAAC,CAAC;KACX;IACF,aAAa9B,EAAAA;AAAmB,GACjC,CAES,CAAC;AAEnB,CAAC,CACH;;;;;;"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\n\nimport { CancelSmallIcon } from '@channel.io/bezier-icons'\n\nimport { isEmpty, isNil } from '~/src/utils/type'\n\nimport { BaseTagBadge, BaseTagBadgeText } from '~/src/components/BaseTagBadge'\nimport { Icon } from '~/src/components/Icon'\n\nimport { type TagProps } from './Tag.types'\n\nimport styles from './Tag.module.scss'\n\nexport const TAG_TEST_ID = 'bezier-tag'\nexport const TAG_DELETE_TEST_ID = 'bezier-tag-delete-icon'\n\n/**\n * `Tag` is a component for representing tag, which shows close icon when `onDelete` property is specified.\n * @example\n * ```tsx\n * <Tag\n *   size=\"m\"\n *   variant=\"default\"\n *   onDelete={handleDelete}\n * >\n *   Payment\n * </Tag>\n * ```\n */\nexport const Tag = memo(\n  forwardRef<HTMLDivElement, TagProps>(function Tag(\n    { size = 'm', variant = 'default', children, onDelete, ...rest },\n    forwardedRef\n  ) {\n    return (\n      <BaseTagBadge\n        ref={forwardedRef}\n        size={size}\n        variant={variant}\n        data-testid={TAG_TEST_ID}\n        {...rest}\n      >\n        {!isEmpty(children) && (\n          <BaseTagBadgeText\n            size={size}\n            marginHorizontal={2}\n            color=\"txt-black-darkest\"\n          >\n            {children}\n          </BaseTagBadgeText>\n        )}\n\n        {!isNil(onDelete) && (\n          <Icon\n            role=\"button\"\n            tabIndex={0}\n            className={styles.TagDeleteIcon}\n            source={CancelSmallIcon}\n            size=\"xs\"\n            color=\"txt-black-darker\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onDelete(e)\n            }}\n            data-testid={TAG_DELETE_TEST_ID}\n          />\n        )}\n      </BaseTagBadge>\n    )\n  })\n)\n"],"names":["TAG_TEST_ID","TAG_DELETE_TEST_ID","Tag","memo","forwardRef","size","variant","children","onDelete","rest","forwardedRef","_jsxs","BaseTagBadge","ref","isEmpty","_jsx","BaseTagBadgeText","marginHorizontal","color","isNil","Icon","role","tabIndex","className","styles","TagDeleteIcon","source","CancelSmallIcon","onClick","e","stopPropagation"],"mappings":";;;;;;;;;;AAeO,MAAMA,WAAW,GAAG;AACpB,MAAMC,kBAAkB,GAAG;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,GAAG,gBAAGC,UAAI,cACrBC,gBAAU,CAA2B,SAASF,GAAGA,CAC/C;AAAEG,EAAAA,IAAI,GAAG,GAAG;AAAEC,EAAAA,OAAO,GAAG,SAAS;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAChEC,YAAY,EACZ;EACA,oBACEC,eAAA,CAACC,yBAAY,EAAA;AACXC,IAAAA,GAAG,EAAEH,YAAa;AAClBL,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,OAAO,EAAEA,OAAQ;AACjB,IAAA,aAAA,EAAaN,WAAY;AAAA,IAAA,GACrBS,IAAI;IAAAF,QAAA,EAAA,CAEP,CAACO,YAAO,CAACP,QAAQ,CAAC,iBACjBQ,cAAA,CAACC,6BAAgB,EAAA;AACfX,MAAAA,IAAI,EAAEA,IAAK;AACXY,MAAAA,gBAAgB,EAAE,CAAE;AACpBC,MAAAA,KAAK,EAAC,mBAAmB;AAAAX,MAAAA,QAAA,EAExBA;KACe,CACnB,EAEA,CAACY,UAAK,CAACX,QAAQ,CAAC,iBACfO,cAAA,CAACK,SAAI,EAAA;AACHC,MAAAA,IAAI,EAAC,QAAQ;AACbC,MAAAA,QAAQ,EAAE,CAAE;MACZC,SAAS,EAAEC,kBAAM,CAACC,aAAc;AAChCC,MAAAA,MAAM,EAAEC,2BAAgB;AACxBtB,MAAAA,IAAI,EAAC,IAAI;AACTa,MAAAA,KAAK,EAAC,kBAAkB;MACxBU,OAAO,EAAGC,CAAC,IAAK;QACdA,CAAC,CAACC,eAAe,EAAE;QACnBtB,QAAQ,CAACqB,CAAC,CAAC;OACX;MACF,aAAa5B,EAAAA;AAAmB,KACjC,CACF;AAAA,GACW,CAAC;AAEnB,CAAC,CACH;;;;;;"}