@channel.io/bezier-react 2.6.2 → 3.0.1

package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js

@@ -2,8 +2,9 @@
 
 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 FloatingIconButton_module = require('./FloatingIconButton.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
 var Loader = require('../AlphaLoader/Loader.js');
 var BaseButton = require('../BaseButton/BaseButton.js');
@@ -31,24 +32,28 @@ const FloatingIconButton = /*#__PURE__*/React.forwardRef(function FloatingIconBu
 }, forwardedRef) {
   const Comp = as;
   const disabled = loading || disabledProp;
-  return /*#__PURE__*/React.createElement(Comp, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsxs(Comp, {
     ref: forwardedRef,
     className: index.default(FloatingIconButton_module.default.FloatingIconButton, FloatingIconButton_module.default[`size-${size}`], FloatingIconButton_module.default[`variant-${variant}`], FloatingIconButton_module.default[`color-${color}`], active && FloatingIconButton_module.default.active, className),
-    disabled: disabled
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: index.default(FloatingIconButton_module.default.ButtonContent, loading && FloatingIconButton_module.default.loading)
-  }, bezierIcons.isBezierIcon(content) ? /*#__PURE__*/React.createElement(Icon.Icon, {
-    size: getIconSize(size),
-    source: content
-  }) : content), loading && /*#__PURE__*/React.createElement("div", {
-    className: index.default(FloatingIconButton_module.default.ButtonLoader,
-    // NOTE: Loader size is the same as icon size
-    FloatingIconButton_module.default[`size-${getIconSize(size)}`])
-  }, /*#__PURE__*/React.createElement(Loader.Loader, {
-    size: "s",
-    className: FloatingIconButton_module.default.Loader,
-    variant: variant === 'primary' ? 'on-overlay' : 'secondary'
-  })));
+    disabled: disabled,
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: index.default(FloatingIconButton_module.default.ButtonContent, loading && FloatingIconButton_module.default.loading),
+      children: bezierIcons.isBezierIcon(content) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        size: getIconSize(size),
+        source: content
+      }) : content
+    }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: index.default(FloatingIconButton_module.default.ButtonLoader,
+      // NOTE: Loader size is the same as icon size
+      FloatingIconButton_module.default[`size-${getIconSize(size)}`]),
+      children: /*#__PURE__*/jsxRuntime.jsx(Loader.Loader, {
+        size: "s",
+        className: FloatingIconButton_module.default.Loader,
+        variant: variant === 'primary' ? 'on-overlay' : 'secondary'
+      })
+    })]
+  });
 });
 
 exports.FloatingIconButton = FloatingIconButton;

package/dist/cjs/components/AlphaFloatingIconButton/FloatingIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingIconButton.js","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './FloatingIconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nexport const FloatingIconButton = forwardRef<\n  HTMLButtonElement,\n  AlphaFloatingIconButtonProps\n>(function FloatingIconButton(\n  {\n    as = BaseButton,\n    color = 'blue',\n    variant = 'primary',\n    size = 'm',\n    active,\n    content,\n    loading = false,\n    disabled: disabledProp = false,\n    className,\n    ...rest\n  },\n  forwardedRef\n) {\n  const Comp = as as typeof BaseButton\n  const disabled = loading || disabledProp\n\n  return (\n    <Comp\n      ref={forwardedRef}\n      className={classNames(\n        styles.FloatingIconButton,\n        styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        styles[`color-${color}`],\n        active && styles.active,\n        className\n      )}\n      disabled={disabled}\n      {...rest}\n    >\n      <div\n        className={classNames(styles.ButtonContent, loading && styles.loading)}\n      >\n        {isBezierIcon(content) ? (\n          <Icon\n            size={getIconSize(size)}\n            source={content}\n          />\n        ) : (\n          content\n        )}\n      </div>\n\n      {loading && (\n        <div\n          className={classNames(\n            styles.ButtonLoader,\n            // NOTE: Loader size is the same as icon size\n            styles[`size-${getIconSize(size)}`]\n          )}\n        >\n          <AlphaLoader\n            size=\"s\"\n            className={styles.Loader}\n            variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n          />\n        </div>\n      )}\n    </Comp>\n  )\n})\n"],"names":["getIconSize","size","xs","s","m","l","xl","FloatingIconButton","forwardRef","as","BaseButton","color","variant","active","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","isBezierIcon","Icon","source","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,kBAAkB,gBAAGC,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;EACNC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGZ,EAAuB;AACpC,EAAA,MAAMO,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,KAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,aAAU,CACnBC,iCAAM,CAACrB,kBAAkB,EACzBqB,iCAAM,CAAC,QAAQ3B,IAAI,CAAA,CAAE,CAAC,EACtB2B,iCAAM,CAAC,CAAA,QAAA,EAAWhB,OAAO,CAAA,CAAE,CAAC,EAC5BgB,iCAAM,CAAC,CAAA,MAAA,EAASjB,KAAK,CAAE,CAAA,CAAC,EACxBE,MAAM,IAAIe,iCAAM,CAACf,MAAM,EACvBK,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA;AAAS,GAAA,EACfG,IAAI,CAAA,eAERG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,aAAU,CAACC,iCAAM,CAACC,aAAa,EAAEd,OAAO,IAAIa,iCAAM,CAACb,OAAO;GAEpEe,EAAAA,wBAAY,CAAChB,OAAO,CAAC,gBACpBQ,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH9B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB+B,IAAAA,MAAM,EAAElB;GACT,CAAC,GAEFA,OAEC,CAAC,EAELC,OAAO,iBACNO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEL,IAAAA,SAAS,EAAES,aAAU,CACnBC,iCAAM,CAACK,YAAY;AACnB;AACAL,IAAAA,iCAAM,CAAC,CAAQ5B,KAAAA,EAAAA,WAAW,CAACC,IAAI,CAAC,EAAE,CACpC;AAAE,GAAA,eAEFqB,KAAA,CAAAC,aAAA,CAACW,aAAW,EAAA;AACVjC,IAAAA,IAAI,EAAC,GAAG;IACRiB,SAAS,EAAEU,iCAAM,CAACO,MAAO;AACzBvB,IAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;GACjD,CACE,CAEH,CAAC;AAEX,CAAC;;;;"}
+{"version":3,"file":"FloatingIconButton.js","sources":["../../../../src/components/AlphaFloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaFloatingIconButtonProps } from '~/src/components/AlphaFloatingIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './FloatingIconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nexport const FloatingIconButton = forwardRef<\n  HTMLButtonElement,\n  AlphaFloatingIconButtonProps\n>(function FloatingIconButton(\n  {\n    as = BaseButton,\n    color = 'blue',\n    variant = 'primary',\n    size = 'm',\n    active,\n    content,\n    loading = false,\n    disabled: disabledProp = false,\n    className,\n    ...rest\n  },\n  forwardedRef\n) {\n  const Comp = as as typeof BaseButton\n  const disabled = loading || disabledProp\n\n  return (\n    <Comp\n      ref={forwardedRef}\n      className={classNames(\n        styles.FloatingIconButton,\n        styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        styles[`color-${color}`],\n        active && styles.active,\n        className\n      )}\n      disabled={disabled}\n      {...rest}\n    >\n      <div\n        className={classNames(styles.ButtonContent, loading && styles.loading)}\n      >\n        {isBezierIcon(content) ? (\n          <Icon\n            size={getIconSize(size)}\n            source={content}\n          />\n        ) : (\n          content\n        )}\n      </div>\n\n      {loading && (\n        <div\n          className={classNames(\n            styles.ButtonLoader,\n            // NOTE: Loader size is the same as icon size\n            styles[`size-${getIconSize(size)}`]\n          )}\n        >\n          <AlphaLoader\n            size=\"s\"\n            className={styles.Loader}\n            variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n          />\n        </div>\n      )}\n    </Comp>\n  )\n})\n"],"names":["getIconSize","size","xs","s","m","l","xl","FloatingIconButton","forwardRef","as","BaseButton","color","variant","active","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","_jsxs","ref","classNames","styles","children","_jsx","ButtonContent","isBezierIcon","Icon","source","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,kBAAkB,gBAAGC,gBAAU,CAG1C,SAASD,kBAAkBA,CAC3B;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;EACNC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGZ,EAAuB;AACpC,EAAA,MAAMO,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBF,IAAAA,SAAS,EAAEM,aAAU,CACnBC,iCAAM,CAAClB,kBAAkB,EACzBkB,iCAAM,CAAC,QAAQxB,IAAI,CAAA,CAAE,CAAC,EACtBwB,iCAAM,CAAC,CAAA,QAAA,EAAWb,OAAO,CAAA,CAAE,CAAC,EAC5Ba,iCAAM,CAAC,CAAA,MAAA,EAASd,KAAK,CAAE,CAAA,CAAC,EACxBE,MAAM,IAAIY,iCAAM,CAACZ,MAAM,EACvBK,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfG,IAAI;AAAAO,IAAAA,QAAA,gBAERC,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CAACC,iCAAM,CAACG,aAAa,EAAEb,OAAO,IAAIU,iCAAM,CAACV,OAAO,CAAE;MAAAW,QAAA,EAEtEG,wBAAY,CAACf,OAAO,CAAC,gBACpBa,cAAA,CAACG,SAAI,EAAA;AACH7B,QAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB8B,QAAAA,MAAM,EAAEjB;AAAQ,OACjB,CAAC,GAEFA;AACD,KACE,CAAC,EAELC,OAAO,iBACNY,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CACnBC,iCAAM,CAACO,YAAY;AACnB;MACAP,iCAAM,CAAC,QAAQzB,WAAW,CAACC,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAAyB,QAAA,eAEFC,cAAA,CAACM,aAAW,EAAA;AACVhC,QAAAA,IAAI,EAAC,GAAG;QACRiB,SAAS,EAAEO,iCAAM,CAACS,MAAO;AACzBtB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CAAC;;;;"}

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

@@ -2,8 +2,9 @@
 
 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 IconButton_module = require('./IconButton.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
 var Loader = require('../AlphaLoader/Loader.js');
 var BaseButton = require('../BaseButton/BaseButton.js');
@@ -32,25 +33,29 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton({
 }, forwardedRef) {
   const Comp = as;
   const disabled = loading || disabledProp;
-  return /*#__PURE__*/React.createElement(Comp, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsxs(Comp, {
     ref: forwardedRef,
     className: index.default(IconButton_module.default.IconButton, IconButton_module.default[`size-${size}`], IconButton_module.default[`variant-${variant}`], IconButton_module.default[`color-${color}`], IconButton_module.default[`shape-${shape}`], active && IconButton_module.default.active, className),
-    disabled: disabled
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: index.default(IconButton_module.default.ButtonContent, loading && IconButton_module.default.loading)
-  }, bezierIcons.isBezierIcon(content) ? /*#__PURE__*/React.createElement(Icon.Icon, {
-    size: getIconSize(size),
-    source: content,
-    className: IconButton_module.default.ButtonIcon
-  }) : content), loading && /*#__PURE__*/React.createElement("div", {
-    className: index.default(IconButton_module.default.ButtonLoader,
-    // NOTE: Loader size is the same as icon size
-    IconButton_module.default[`size-${getIconSize(size)}`])
-  }, /*#__PURE__*/React.createElement(Loader.Loader, {
-    size: "s",
-    className: IconButton_module.default.Loader,
-    variant: variant === 'primary' ? 'on-overlay' : 'secondary'
-  })));
+    disabled: disabled,
+    ...rest,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: index.default(IconButton_module.default.ButtonContent, loading && IconButton_module.default.loading),
+      children: bezierIcons.isBezierIcon(content) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        size: getIconSize(size),
+        source: content,
+        className: IconButton_module.default.ButtonIcon
+      }) : content
+    }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: index.default(IconButton_module.default.ButtonLoader,
+      // NOTE: Loader size is the same as icon size
+      IconButton_module.default[`size-${getIconSize(size)}`]),
+      children: /*#__PURE__*/jsxRuntime.jsx(Loader.Loader, {
+        size: "s",
+        className: IconButton_module.default.Loader,
+        variant: variant === 'primary' ? 'on-overlay' : 'secondary'
+      })
+    })]
+  });
 });
 
 exports.IconButton = IconButton;

package/dist/cjs/components/AlphaIconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './IconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(\n  function IconButton(\n    {\n      as = BaseButton,\n      color = 'blue',\n      variant = 'primary',\n      size = 'm',\n      active,\n      shape = 'rectangle',\n      content,\n      loading = false,\n      disabled: disabledProp = false,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as as typeof BaseButton\n\n    const disabled = loading || disabledProp\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={classNames(\n          styles.IconButton,\n          styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          styles[`color-${color}`],\n          styles[`shape-${shape}`],\n          active && styles.active,\n          className\n        )}\n        disabled={disabled}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.ButtonContent,\n            loading && styles.loading\n          )}\n        >\n          {isBezierIcon(content) ? (\n            <Icon\n              size={getIconSize(size)}\n              source={content}\n              className={styles.ButtonIcon}\n            />\n          ) : (\n            content\n          )}\n        </div>\n\n        {loading && (\n          <div\n            className={classNames(\n              styles.ButtonLoader,\n              // NOTE: Loader size is the same as icon size\n              styles[`size-${getIconSize(size)}`]\n            )}\n          >\n            <AlphaLoader\n              size=\"s\"\n              className={styles.Loader}\n              variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n            />\n          </div>\n        )}\n      </Comp>\n    )\n  }\n)\n"],"names":["getIconSize","size","xs","s","m","l","xl","IconButton","forwardRef","as","BaseButton","color","variant","active","shape","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","React","createElement","Object","assign","ref","classNames","styles","ButtonContent","isBezierIcon","Icon","source","ButtonIcon","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,UAAU,gBAAGC,gBAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;AACNC,EAAAA,KAAK,GAAG,WAAW;EACnBC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGb,EAAuB;AAEpC,EAAA,MAAMQ,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,KAAA,CAAAC,aAAA,CAACF,IAAI,EAAAG,MAAA,CAAAC,MAAA,CAAA;AACHC,IAAAA,GAAG,EAAEN,YAAa;AAClBF,IAAAA,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACtB,UAAU,EACjBsB,yBAAM,CAAC,QAAQ5B,IAAI,CAAA,CAAE,CAAC,EACtB4B,yBAAM,CAAC,CAAWjB,QAAAA,EAAAA,OAAO,EAAE,CAAC,EAC5BiB,yBAAM,CAAC,SAASlB,KAAK,CAAA,CAAE,CAAC,EACxBkB,yBAAM,CAAC,CAASf,MAAAA,EAAAA,KAAK,EAAE,CAAC,EACxBD,MAAM,IAAIgB,yBAAM,CAAChB,MAAM,EACvBM,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA;AAAS,GAAA,EACfG,IAAI,CAAA,eAERG,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IACEL,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACC,aAAa,EACpBd,OAAO,IAAIa,yBAAM,CAACb,OACpB;GAECe,EAAAA,wBAAY,CAAChB,OAAO,CAAC,gBACpBQ,KAAA,CAAAC,aAAA,CAACQ,SAAI,EAAA;AACH/B,IAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxBgC,IAAAA,MAAM,EAAElB,OAAQ;IAChBI,SAAS,EAAEU,yBAAM,CAACK;GACnB,CAAC,GAEFnB,OAEC,CAAC,EAELC,OAAO,iBACNO,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEL,IAAAA,SAAS,EAAES,aAAU,CACnBC,yBAAM,CAACM,YAAY;AACnB;AACAN,IAAAA,yBAAM,CAAC,CAAQ7B,KAAAA,EAAAA,WAAW,CAACC,IAAI,CAAC,EAAE,CACpC;AAAE,GAAA,eAEFsB,KAAA,CAAAC,aAAA,CAACY,aAAW,EAAA;AACVnC,IAAAA,IAAI,EAAC,GAAG;IACRkB,SAAS,EAAEU,yBAAM,CAACQ,MAAO;AACzBzB,IAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;GACjD,CACE,CAEH,CAAC;AAEX,CACF;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/AlphaIconButton/IconButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton'\nimport { AlphaLoader } from '~/src/components/AlphaLoader'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { type ButtonSize } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\n\nimport styles from './IconButton.module.scss'\n\nfunction getIconSize(size: ButtonSize) {\n  return (\n    {\n      xs: 'xs',\n      s: 'xs',\n      m: 's',\n      l: 's',\n      xl: 'm',\n    } as const\n  )[size]\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, AlphaIconButtonProps>(\n  function IconButton(\n    {\n      as = BaseButton,\n      color = 'blue',\n      variant = 'primary',\n      size = 'm',\n      active,\n      shape = 'rectangle',\n      content,\n      loading = false,\n      disabled: disabledProp = false,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const Comp = as as typeof BaseButton\n\n    const disabled = loading || disabledProp\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={classNames(\n          styles.IconButton,\n          styles[`size-${size}`],\n          styles[`variant-${variant}`],\n          styles[`color-${color}`],\n          styles[`shape-${shape}`],\n          active && styles.active,\n          className\n        )}\n        disabled={disabled}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.ButtonContent,\n            loading && styles.loading\n          )}\n        >\n          {isBezierIcon(content) ? (\n            <Icon\n              size={getIconSize(size)}\n              source={content}\n              className={styles.ButtonIcon}\n            />\n          ) : (\n            content\n          )}\n        </div>\n\n        {loading && (\n          <div\n            className={classNames(\n              styles.ButtonLoader,\n              // NOTE: Loader size is the same as icon size\n              styles[`size-${getIconSize(size)}`]\n            )}\n          >\n            <AlphaLoader\n              size=\"s\"\n              className={styles.Loader}\n              variant={variant === 'primary' ? 'on-overlay' : 'secondary'}\n            />\n          </div>\n        )}\n      </Comp>\n    )\n  }\n)\n"],"names":["getIconSize","size","xs","s","m","l","xl","IconButton","forwardRef","as","BaseButton","color","variant","active","shape","content","loading","disabled","disabledProp","className","rest","forwardedRef","Comp","_jsxs","ref","classNames","styles","children","_jsx","ButtonContent","isBezierIcon","Icon","source","ButtonIcon","ButtonLoader","AlphaLoader","Loader"],"mappings":";;;;;;;;;;;AAeA,SAASA,WAAWA,CAACC,IAAgB,EAAE;EACrC,OACE;AACEC,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,CAAC,EAAE,IAAI;AACPC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,CAAC,EAAE,GAAG;AACNC,IAAAA,EAAE,EAAE;GACL,CACDL,IAAI,CAAC;AACT;MAEaM,UAAU,gBAAGC,gBAAU,CAClC,SAASD,UAAUA,CACjB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;AACfC,EAAAA,KAAK,GAAG,MAAM;AACdC,EAAAA,OAAO,GAAG,SAAS;AACnBX,EAAAA,IAAI,GAAG,GAAG;EACVY,MAAM;AACNC,EAAAA,KAAK,GAAG,WAAW;EACnBC,OAAO;AACPC,EAAAA,OAAO,GAAG,KAAK;EACfC,QAAQ,EAAEC,YAAY,GAAG,KAAK;EAC9BC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,IAAI,GAAGb,EAAuB;AAEpC,EAAA,MAAMQ,QAAQ,GAAGD,OAAO,IAAIE,YAAY;EAExC,oBACEK,eAAA,CAACD,IAAI,EAAA;AACHE,IAAAA,GAAG,EAAEH,YAAa;AAClBF,IAAAA,SAAS,EAAEM,aAAU,CACnBC,yBAAM,CAACnB,UAAU,EACjBmB,yBAAM,CAAC,QAAQzB,IAAI,CAAA,CAAE,CAAC,EACtByB,yBAAM,CAAC,CAAWd,QAAAA,EAAAA,OAAO,EAAE,CAAC,EAC5Bc,yBAAM,CAAC,SAASf,KAAK,CAAA,CAAE,CAAC,EACxBe,yBAAM,CAAC,CAASZ,MAAAA,EAAAA,KAAK,EAAE,CAAC,EACxBD,MAAM,IAAIa,yBAAM,CAACb,MAAM,EACvBM,SACF,CAAE;AACFF,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfG,IAAI;AAAAO,IAAAA,QAAA,gBAERC,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CACnBC,yBAAM,CAACG,aAAa,EACpBb,OAAO,IAAIU,yBAAM,CAACV,OACpB,CAAE;MAAAW,QAAA,EAEDG,wBAAY,CAACf,OAAO,CAAC,gBACpBa,cAAA,CAACG,SAAI,EAAA;AACH9B,QAAAA,IAAI,EAAED,WAAW,CAACC,IAAI,CAAE;AACxB+B,QAAAA,MAAM,EAAEjB,OAAQ;QAChBI,SAAS,EAAEO,yBAAM,CAACO;AAAW,OAC9B,CAAC,GAEFlB;AACD,KACE,CAAC,EAELC,OAAO,iBACNY,cAAA,CAAA,KAAA,EAAA;AACET,MAAAA,SAAS,EAAEM,aAAU,CACnBC,yBAAM,CAACQ,YAAY;AACnB;MACAR,yBAAM,CAAC,QAAQ1B,WAAW,CAACC,IAAI,CAAC,CAAA,CAAE,CACpC,CAAE;MAAA0B,QAAA,eAEFC,cAAA,CAACO,aAAW,EAAA;AACVlC,QAAAA,IAAI,EAAC,GAAG;QACRkB,SAAS,EAAEO,yBAAM,CAACU,MAAO;AACzBxB,QAAAA,OAAO,EAAEA,OAAO,KAAK,SAAS,GAAG,YAAY,GAAG;OACjD;AAAC,KACC,CACN;AAAA,GACG,CAAC;AAEX,CACF;;;;"}

package/dist/cjs/components/AlphaLoader/Loader.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var React = require('react');
-var index = require('../../node_modules/classnames/index.js');
+var index = require('../../_virtual/index.js');
 var Loader_module = require('./Loader.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 const LOADER_TEST_ID = 'bezier-loader';
 const Loader = /*#__PURE__*/React.forwardRef(function Loader({
@@ -11,24 +12,27 @@ const Loader = /*#__PURE__*/React.forwardRef(function Loader({
   variant = 'secondary',
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement("span", Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
     className: index.default(Loader_module.default.Loader, size && Loader_module.default[`size-${size}`], Loader_module.default[`variant-${variant}`], className),
     ref: forwardedRef,
-    "data-testid": LOADER_TEST_ID
-  }, rest), /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 16 16"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "6.5",
-    className: Loader_module.default.track
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "6.5",
-    className: Loader_module.default.indicator
-  })));
+    "data-testid": LOADER_TEST_ID,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6.5",
+        className: Loader_module.default.track
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "8",
+        cy: "8",
+        r: "6.5",
+        className: Loader_module.default.indicator
+      })]
+    })
+  });
 });
 
 exports.LOADER_TEST_ID = LOADER_TEST_ID;

package/dist/cjs/components/AlphaLoader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../../src/components/AlphaLoader/Loader.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type LoaderProps } from './Loader.types'\n\nimport styles from './Loader.module.scss'\n\nexport const LOADER_TEST_ID = 'bezier-loader'\n\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { className, size, variant = 'secondary', ...rest },\n  forwardedRef\n) {\n  return (\n    <span\n      className={classNames(\n        styles.Loader,\n        size && styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        className\n      )}\n      ref={forwardedRef}\n      data-testid={LOADER_TEST_ID}\n      {...rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 16 16\"\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          className={styles.track}\n        />\n\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          className={styles.indicator}\n        />\n      </svg>\n    </span>\n  )\n})\n"],"names":["LOADER_TEST_ID","Loader","forwardRef","className","size","variant","rest","forwardedRef","React","createElement","Object","assign","classNames","styles","ref","xmlns","viewBox","cx","cy","r","track","indicator"],"mappings":";;;;;;AAUO,MAAMA,cAAc,GAAG;MAEjBC,MAAM,gBAAGC,gBAAU,CAA+B,SAASD,MAAMA,CAC5E;EAAEE,SAAS;EAAEC,IAAI;AAAEC,EAAAA,OAAO,GAAG,WAAW;EAAE,GAAGC;AAAK,CAAC,EACnDC,YAAY,EACZ;AACA,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAAAC,MAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;IACER,SAAS,EAAES,aAAU,CACnBC,qBAAM,CAACZ,MAAM,EACbG,IAAI,IAAIS,qBAAM,CAAC,CAAA,KAAA,EAAQT,IAAI,CAAE,CAAA,CAAC,EAC9BS,qBAAM,CAAC,CAAA,QAAA,EAAWR,OAAO,CAAE,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFW,IAAAA,GAAG,EAAEP,YAAa;IAClB,aAAaP,EAAAA;AAAe,GAAA,EACxBM,IAAI,CAAA,eAERE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEM,IAAAA,KAAK,EAAC,4BAA4B;AAClCC,IAAAA,OAAO,EAAC;GAERR,eAAAA,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,KAAK;IACPhB,SAAS,EAAEU,qBAAM,CAACO;AAAM,GACzB,CAAC,eAEFZ,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,EAAE,EAAC,GAAG;AACNC,IAAAA,CAAC,EAAC,KAAK;IACPhB,SAAS,EAAEU,qBAAM,CAACQ;GACnB,CACE,CACD,CAAC;AAEX,CAAC;;;;;"}
+{"version":3,"file":"Loader.js","sources":["../../../../src/components/AlphaLoader/Loader.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { type LoaderProps } from './Loader.types'\n\nimport styles from './Loader.module.scss'\n\nexport const LOADER_TEST_ID = 'bezier-loader'\n\nexport const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(\n  { className, size, variant = 'secondary', ...rest },\n  forwardedRef\n) {\n  return (\n    <span\n      className={classNames(\n        styles.Loader,\n        size && styles[`size-${size}`],\n        styles[`variant-${variant}`],\n        className\n      )}\n      ref={forwardedRef}\n      data-testid={LOADER_TEST_ID}\n      {...rest}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 16 16\"\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          className={styles.track}\n        />\n\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6.5\"\n          className={styles.indicator}\n        />\n      </svg>\n    </span>\n  )\n})\n"],"names":["LOADER_TEST_ID","Loader","forwardRef","className","size","variant","rest","forwardedRef","_jsx","classNames","styles","ref","children","_jsxs","xmlns","viewBox","cx","cy","r","track","indicator"],"mappings":";;;;;;;AAUO,MAAMA,cAAc,GAAG;MAEjBC,MAAM,gBAAGC,gBAAU,CAA+B,SAASD,MAAMA,CAC5E;EAAEE,SAAS;EAAEC,IAAI;AAAEC,EAAAA,OAAO,GAAG,WAAW;EAAE,GAAGC;AAAK,CAAC,EACnDC,YAAY,EACZ;AACA,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IACEL,SAAS,EAAEM,aAAU,CACnBC,qBAAM,CAACT,MAAM,EACbG,IAAI,IAAIM,qBAAM,CAAC,CAAA,KAAA,EAAQN,IAAI,CAAE,CAAA,CAAC,EAC9BM,qBAAM,CAAC,CAAA,QAAA,EAAWL,OAAO,CAAE,CAAA,CAAC,EAC5BF,SACF,CAAE;AACFQ,IAAAA,GAAG,EAAEJ,YAAa;AAClB,IAAA,aAAA,EAAaP,cAAe;AAAA,IAAA,GACxBM,IAAI;AAAAM,IAAAA,QAAA,eAERC,eAAA,CAAA,KAAA,EAAA;AACEC,MAAAA,KAAK,EAAC,4BAA4B;AAClCC,MAAAA,OAAO,EAAC,WAAW;AAAAH,MAAAA,QAAA,gBAEnBJ,cAAA,CAAA,QAAA,EAAA;AACEQ,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,CAAC,EAAC,KAAK;QACPf,SAAS,EAAEO,qBAAM,CAACS;OACnB,CAAC,eAEFX,cAAA,CAAA,QAAA,EAAA;AACEQ,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,EAAE,EAAC,GAAG;AACNC,QAAAA,CAAC,EAAC,KAAK;QACPf,SAAS,EAAEO,qBAAM,CAACU;AAAU,OAC7B,CAAC;KACC;AAAC,GACF,CAAC;AAEX,CAAC;;;;;"}

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

@@ -2,25 +2,12 @@
 
 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 StatusBadge_module = require('./StatusBadge.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Icon = require('../Icon/Icon.js');
 
-// TODO: Change to use AlphaIcon and alpha color tokens
-
-/**
- * `StatusBadge` is a component to indicate user status.
- * @example
- *
- * ```tsx
- * <StatusBadge
- *   size="m"
- *   online
- *   doNotDisturb
- * />
- * ```
- */
 const StatusBadge = /*#__PURE__*/React.forwardRef(function StatusBadge({
   size = 'm',
   online = false,
@@ -31,19 +18,21 @@ const StatusBadge = /*#__PURE__*/React.forwardRef(function StatusBadge({
 }, forwardedRef) {
   const iconColor = online ? 'bgtxt-green-normal' : doNotDisturb ? 'bgtxt-yellow-normal' : 'bg-black-dark';
   const backgroundColor = doNotDisturb ? 'bg-white-high' : iconColor;
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: forwardedRef,
     style: {
       '--b-status-bg-color': style.cssVar(backgroundColor),
       ...style$1
     },
-    className: index.default(StatusBadge_module.default.StatusBadge, StatusBadge_module.default[`size-${size}`], className)
-  }, rest), doNotDisturb && /*#__PURE__*/React.createElement(Icon.Icon, {
-    source: bezierIcons.MoonFilledIcon,
-    size: size === 'm' ? 'xxxs' : 'xs',
-    color: iconColor,
-    className: StatusBadge_module.default.Icon
-  }));
+    className: index.default(StatusBadge_module.default.StatusBadge, StatusBadge_module.default[`size-${size}`], className),
+    ...rest,
+    children: doNotDisturb && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      source: bezierIcons.MoonFilledIcon,
+      size: size === 'm' ? 'xxxs' : 'xs',
+      color: iconColor,
+      className: StatusBadge_module.default.Icon
+    })
+  });
 });
 
 exports.StatusBadge = StatusBadge;

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 React, { type CSSProperties, forwardRef } from 'react'\n\nimport { MoonFilledIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { type SemanticColor } from '~/src/types/tokens'\nimport { cssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusBadgeProps } from './StatusBadge.types'\n\nimport styles from './StatusBadge.module.scss'\n\n// TODO: Change to use AlphaIcon and alpha color tokens\n\n/**\n * `StatusBadge` is a component to indicate user status.\n * @example\n *\n * ```tsx\n * <StatusBadge\n *   size=\"m\"\n *   online\n *   doNotDisturb\n * />\n * ```\n */\nexport const StatusBadge = forwardRef<HTMLDivElement, StatusBadgeProps>(\n  function StatusBadge(\n    {\n      size = 'm',\n      online = false,\n      doNotDisturb = false,\n      style,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const iconColor: SemanticColor = online\n      ? 'bgtxt-green-normal'\n      : doNotDisturb\n        ? 'bgtxt-yellow-normal'\n        : 'bg-black-dark'\n    const backgroundColor: SemanticColor = doNotDisturb\n      ? 'bg-white-high'\n      : iconColor\n\n    return (\n      <div\n        ref={forwardedRef}\n        style={\n          {\n            '--b-status-bg-color': cssVar(backgroundColor),\n            ...style,\n          } as CSSProperties\n        }\n        className={classNames(\n          styles.StatusBadge,\n          styles[`size-${size}`],\n          className\n        )}\n        {...rest}\n      >\n        {doNotDisturb && (\n          <Icon\n            source={MoonFilledIcon}\n            size={size === 'm' ? 'xxxs' : 'xs'}\n            color={iconColor}\n            className={styles.Icon}\n          />\n        )}\n      </div>\n    )\n  }\n)\n"],"names":["StatusBadge","forwardRef","size","online","doNotDisturb","style","className","rest","forwardedRef","iconColor","backgroundColor","React","createElement","Object","assign","ref","cssVar","classNames","styles","Icon","source","MoonFilledIcon","color"],"mappings":";;;;;;;;;AAgBA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;AACEE,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,KAAK;SACpBC,OAAK;EACLC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,SAAwB,GAAGN,MAAM,GACnC,oBAAoB,GACpBC,YAAY,GACV,qBAAqB,GACrB,eAAe;AACrB,EAAA,MAAMM,eAA8B,GAAGN,YAAY,GAC/C,eAAe,GACfK,SAAS;AAEb,EAAA,oBACEE,KAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,MAAA,CAAAC,MAAA,CAAA;AACEC,IAAAA,GAAG,EAAEP,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEW,YAAM,CAACN,eAAe,CAAC;MAC9C,GAAGL;KAEN;AACDC,IAAAA,SAAS,EAAEW,aAAU,CACnBC,0BAAM,CAAClB,WAAW,EAClBkB,0BAAM,CAAC,CAAQhB,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EACtBI,SACF;GACIC,EAAAA,IAAI,GAEPH,YAAY,iBACXO,KAAA,CAAAC,aAAA,CAACO,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEC,0BAAe;AACvBnB,IAAAA,IAAI,EAAEA,IAAI,KAAK,GAAG,GAAG,MAAM,GAAG,IAAK;AACnCoB,IAAAA,KAAK,EAAEb,SAAU;IACjBH,SAAS,EAAEY,0BAAM,CAACC;AAAK,GACxB,CAEA,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 SemanticColor } from '~/src/types/tokens'\nimport { cssVar } from '~/src/utils/style'\n\nimport { Icon } from '~/src/components/Icon'\n\nimport { type StatusBadgeProps } from './StatusBadge.types'\n\nimport styles from './StatusBadge.module.scss'\n\n// TODO: Change to use AlphaIcon and alpha color tokens\n\n/**\n * `StatusBadge` is a component to indicate user status.\n * @example\n *\n * ```tsx\n * <StatusBadge\n *   size=\"m\"\n *   online\n *   doNotDisturb\n * />\n * ```\n */\nexport const StatusBadge = forwardRef<HTMLDivElement, StatusBadgeProps>(\n  function StatusBadge(\n    {\n      size = 'm',\n      online = false,\n      doNotDisturb = false,\n      style,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const iconColor: SemanticColor = online\n      ? 'bgtxt-green-normal'\n      : doNotDisturb\n        ? 'bgtxt-yellow-normal'\n        : 'bg-black-dark'\n    const backgroundColor: SemanticColor = doNotDisturb\n      ? 'bg-white-high'\n      : iconColor\n\n    return (\n      <div\n        ref={forwardedRef}\n        style={\n          {\n            '--b-status-bg-color': cssVar(backgroundColor),\n            ...style,\n          } as CSSProperties\n        }\n        className={classNames(\n          styles.StatusBadge,\n          styles[`size-${size}`],\n          className\n        )}\n        {...rest}\n      >\n        {doNotDisturb && (\n          <Icon\n            source={MoonFilledIcon}\n            size={size === 'm' ? 'xxxs' : 'xs'}\n            color={iconColor}\n            className={styles.Icon}\n          />\n        )}\n      </div>\n    )\n  }\n)\n"],"names":["StatusBadge","forwardRef","size","online","doNotDisturb","style","className","rest","forwardedRef","iconColor","backgroundColor","_jsx","ref","cssVar","classNames","styles","children","Icon","source","MoonFilledIcon","color"],"mappings":";;;;;;;;;;MA8BaA,WAAW,gBAAGC,gBAAU,CACnC,SAASD,WAAWA,CAClB;AACEE,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,YAAY,GAAG,KAAK;SACpBC,OAAK;EACLC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,SAAwB,GAAGN,MAAM,GACnC,oBAAoB,GACpBC,YAAY,GACV,qBAAqB,GACrB,eAAe;AACrB,EAAA,MAAMM,eAA8B,GAAGN,YAAY,GAC/C,eAAe,GACfK,SAAS;AAEb,EAAA,oBACEE,cAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,YAAa;AAClBH,IAAAA,KAAK,EACH;AACE,MAAA,qBAAqB,EAAEQ,YAAM,CAACH,eAAe,CAAC;MAC9C,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/AlphaToggleButton/ToggleButton.js

@@ -3,9 +3,10 @@
 var React = require('react');
 var bezierIcons = require('@channel.io/bezier-icons');
 var index = require('../../node_modules/@radix-ui/react-toggle/dist/index.js');
-var index$1 = require('../../node_modules/classnames/index.js');
+var index$1 = require('../../_virtual/index.js');
 var ToggleButtonContext = require('./ToggleButtonContext.js');
 var ToggleButton_module = require('./ToggleButton.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Text = require('../Text/Text.js');
 var BaseButton = require('../BaseButton/BaseButton.js');
 var Icon = require('../Icon/Icon.js');
@@ -14,7 +15,7 @@ function SideContent({
   size,
   content
 }) {
-  return bezierIcons.isBezierIcon(content) ? /*#__PURE__*/React.createElement(Icon.Icon, {
+  return bezierIcons.isBezierIcon(content) ? /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
     source: content,
     size: size,
     className: ToggleButton_module.default.ButtonIcon
@@ -39,26 +40,31 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton({
   const shape = (_ref = shapeProps !== null && shapeProps !== void 0 ? shapeProps : shapeContext) !== null && _ref !== void 0 ? _ref : 'capsule';
   const Comp = as;
   const ICON_SIZE = 's';
-  return /*#__PURE__*/React.createElement(index.Root, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(index.Root, {
     asChild: true,
-    onPressedChange: onSelectedChange
-  }, rest), /*#__PURE__*/React.createElement(Comp, {
-    ref: forwardedRef,
-    className: index$1.default(ToggleButton_module.default.Button, ToggleButton_module.default[`size-${size}`], ToggleButton_module.default[`variant-${variant}`], shape && ToggleButton_module.default[`shape-${shape}`], className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: index$1.default(ToggleButton_module.default.ButtonContent)
-  }, /*#__PURE__*/React.createElement(SideContent, {
-    size: ICON_SIZE,
-    content: prefixContent
-  }), /*#__PURE__*/React.createElement(Text.Text, {
-    className: ToggleButton_module.default.ButtonText,
-    typo: "14",
-    "data-text": text,
-    truncated: true
-  }, text), /*#__PURE__*/React.createElement(SideContent, {
-    size: ICON_SIZE,
-    content: suffixContent
-  }))));
+    onPressedChange: onSelectedChange,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(Comp, {
+      ref: forwardedRef,
+      className: index$1.default(ToggleButton_module.default.Button, ToggleButton_module.default[`size-${size}`], ToggleButton_module.default[`variant-${variant}`], shape && ToggleButton_module.default[`shape-${shape}`], className),
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: index$1.default(ToggleButton_module.default.ButtonContent),
+        children: [/*#__PURE__*/jsxRuntime.jsx(SideContent, {
+          size: ICON_SIZE,
+          content: prefixContent
+        }), /*#__PURE__*/jsxRuntime.jsx(Text.Text, {
+          className: ToggleButton_module.default.ButtonText,
+          typo: "14",
+          "data-text": text,
+          truncated: true,
+          children: text
+        }), /*#__PURE__*/jsxRuntime.jsx(SideContent, {
+          size: ICON_SIZE,
+          content: suffixContent
+        })]
+      })
+    })
+  });
 });
 
 exports.ToggleButton = ToggleButton;

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport classNames from 'classnames'\n\nimport { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ToggleButtonProps } from './ToggleButton.types'\n\nimport styles from './ToggleButton.module.scss'\n\nfunction SideContent({\n  size,\n  content,\n}: {\n  size: IconSize\n  content?: ToggleButtonProps['prefixContent']\n}) {\n  return isBezierIcon(content) ? (\n    <Icon\n      source={content}\n      size={size}\n      className={styles.ButtonIcon}\n    />\n  ) : (\n    content\n  )\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(\n    {\n      as = BaseButton,\n      text,\n      prefixContent,\n      suffixContent,\n      variant = 'primary',\n      shape: shapeProps,\n      size = 'm',\n      className,\n      onSelectedChange,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { shape: shapeContext } = useToggleButtonContext()\n    const shape = shapeProps ?? shapeContext ?? 'capsule'\n    const Comp = as as typeof BaseButton\n    const ICON_SIZE = 's'\n\n    return (\n      <TogglePrimitive.Root\n        asChild\n        onPressedChange={onSelectedChange}\n        {...rest}\n      >\n        <Comp\n          ref={forwardedRef}\n          className={classNames(\n            styles.Button,\n            styles[`size-${size}`],\n            styles[`variant-${variant}`],\n            shape && styles[`shape-${shape}`],\n            className\n          )}\n        >\n          <div className={classNames(styles.ButtonContent)}>\n            <SideContent\n              size={ICON_SIZE}\n              content={prefixContent}\n            />\n\n            {/* TODO: use AlphaText later, add typo */}\n            <Text\n              className={styles.ButtonText}\n              typo=\"14\"\n              data-text={text}\n              truncated\n            >\n              {text}\n            </Text>\n\n            <SideContent\n              size={ICON_SIZE}\n              content={suffixContent}\n            />\n          </div>\n        </Comp>\n      </TogglePrimitive.Root>\n    )\n  }\n)\n"],"names":["SideContent","size","content","isBezierIcon","React","createElement","Icon","source","className","styles","ButtonIcon","ToggleButton","forwardRef","as","BaseButton","text","prefixContent","suffixContent","variant","shape","shapeProps","onSelectedChange","rest","forwardedRef","_ref","shapeContext","useToggleButtonContext","Comp","ICON_SIZE","TogglePrimitive","Object","assign","asChild","onPressedChange","ref","classNames","Button","ButtonContent","Text","ButtonText","typo","truncated"],"mappings":";;;;;;;;;;;;AAiBA,SAASA,WAAWA,CAAC;EACnBC,IAAI;AACJC,EAAAA;AAIF,CAAC,EAAE;EACD,OAAOC,wBAAY,CAACD,OAAO,CAAC,gBAC1BE,KAAA,CAAAC,aAAA,CAACC,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEL,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXO,SAAS,EAAEC,2BAAM,CAACC;GACnB,CAAC,GAEFR,OACD;AACH;MAEaS,YAAY,gBAAGC,gBAAU,CACpC,SAASD,YAAYA,CACnB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,OAAO,GAAG,SAAS;AACnBC,EAAAA,KAAK,EAAEC,UAAU;AACjBnB,EAAAA,IAAI,GAAG,GAAG;EACVO,SAAS;EACTa,gBAAgB;EAChB,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AAAA,EAAA,IAAAC,IAAA;EACA,MAAM;AAAEL,IAAAA,KAAK,EAAEM;GAAc,GAAGC,0CAAsB,EAAE;AACxD,EAAA,MAAMP,KAAK,GAAAK,CAAAA,IAAA,GAAGJ,UAAU,aAAVA,UAAU,KAAA,KAAA,CAAA,GAAVA,UAAU,GAAIK,YAAY,MAAAD,IAAAA,IAAAA,IAAA,KAAAA,KAAAA,CAAAA,GAAAA,IAAA,GAAI,SAAS;EACrD,MAAMG,IAAI,GAAGd,EAAuB;EACpC,MAAMe,SAAS,GAAG,GAAG;EAErB,oBACExB,KAAA,CAAAC,aAAA,CAACwB,UAAoB,EAAAC,MAAA,CAAAC,MAAA,CAAA;IACnBC,OAAO,EAAA,IAAA;AACPC,IAAAA,eAAe,EAAEZ;AAAiB,GAAA,EAC9BC,IAAI,CAERlB,eAAAA,KAAA,CAAAC,aAAA,CAACsB,IAAI,EAAA;AACHO,IAAAA,GAAG,EAAEX,YAAa;AAClBf,IAAAA,SAAS,EAAE2B,eAAU,CACnB1B,2BAAM,CAAC2B,MAAM,EACb3B,2BAAM,CAAC,CAAA,KAAA,EAAQR,IAAI,CAAA,CAAE,CAAC,EACtBQ,2BAAM,CAAC,CAAA,QAAA,EAAWS,OAAO,CAAA,CAAE,CAAC,EAC5BC,KAAK,IAAIV,2BAAM,CAAC,CAASU,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCX,SACF;GAEAJ,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKG,IAAAA,SAAS,EAAE2B,eAAU,CAAC1B,2BAAM,CAAC4B,aAAa;AAAE,GAAA,eAC/CjC,KAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAE2B,SAAU;AAChB1B,IAAAA,OAAO,EAAEc;AAAc,GACxB,CAAC,eAGFZ,KAAA,CAAAC,aAAA,CAACiC,SAAI,EAAA;IACH9B,SAAS,EAAEC,2BAAM,CAAC8B,UAAW;AAC7BC,IAAAA,IAAI,EAAC,IAAI;AACT,IAAA,WAAA,EAAWzB,IAAK;IAChB0B,SAAS,EAAA;AAAA,GAAA,EAER1B,IACG,CAAC,eAEPX,KAAA,CAAAC,aAAA,CAACL,WAAW,EAAA;AACVC,IAAAA,IAAI,EAAE2B,SAAU;AAChB1B,IAAAA,OAAO,EAAEe;GACV,CACE,CACD,CACc,CAAC;AAE3B,CACF;;;;"}
+{"version":3,"file":"ToggleButton.js","sources":["../../../../src/components/AlphaToggleButton/ToggleButton.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport * as TogglePrimitive from '@radix-ui/react-toggle'\nimport classNames from 'classnames'\n\nimport { useToggleButtonContext } from '~/src/components/AlphaToggleButton/ToggleButtonContext'\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon, type IconSize } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ToggleButtonProps } from './ToggleButton.types'\n\nimport styles from './ToggleButton.module.scss'\n\nfunction SideContent({\n  size,\n  content,\n}: {\n  size: IconSize\n  content?: ToggleButtonProps['prefixContent']\n}) {\n  return isBezierIcon(content) ? (\n    <Icon\n      source={content}\n      size={size}\n      className={styles.ButtonIcon}\n    />\n  ) : (\n    content\n  )\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(\n    {\n      as = BaseButton,\n      text,\n      prefixContent,\n      suffixContent,\n      variant = 'primary',\n      shape: shapeProps,\n      size = 'm',\n      className,\n      onSelectedChange,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    const { shape: shapeContext } = useToggleButtonContext()\n    const shape = shapeProps ?? shapeContext ?? 'capsule'\n    const Comp = as as typeof BaseButton\n    const ICON_SIZE = 's'\n\n    return (\n      <TogglePrimitive.Root\n        asChild\n        onPressedChange={onSelectedChange}\n        {...rest}\n      >\n        <Comp\n          ref={forwardedRef}\n          className={classNames(\n            styles.Button,\n            styles[`size-${size}`],\n            styles[`variant-${variant}`],\n            shape && styles[`shape-${shape}`],\n            className\n          )}\n        >\n          <div className={classNames(styles.ButtonContent)}>\n            <SideContent\n              size={ICON_SIZE}\n              content={prefixContent}\n            />\n\n            {/* TODO: use AlphaText later, add typo */}\n            <Text\n              className={styles.ButtonText}\n              typo=\"14\"\n              data-text={text}\n              truncated\n            >\n              {text}\n            </Text>\n\n            <SideContent\n              size={ICON_SIZE}\n              content={suffixContent}\n            />\n          </div>\n        </Comp>\n      </TogglePrimitive.Root>\n    )\n  }\n)\n"],"names":["SideContent","size","content","isBezierIcon","_jsx","Icon","source","className","styles","ButtonIcon","ToggleButton","forwardRef","as","BaseButton","text","prefixContent","suffixContent","variant","shape","shapeProps","onSelectedChange","rest","forwardedRef","_ref","shapeContext","useToggleButtonContext","Comp","ICON_SIZE","TogglePrimitive","asChild","onPressedChange","children","ref","classNames","Button","_jsxs","ButtonContent","Text","ButtonText","typo","truncated"],"mappings":";;;;;;;;;;;;;AAiBA,SAASA,WAAWA,CAAC;EACnBC,IAAI;AACJC,EAAAA;AAIF,CAAC,EAAE;AACD,EAAA,OAAOC,wBAAY,CAACD,OAAO,CAAC,gBAC1BE,cAAA,CAACC,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEJ,OAAQ;AAChBD,IAAAA,IAAI,EAAEA,IAAK;IACXM,SAAS,EAAEC,2BAAM,CAACC;GACnB,CAAC,GAEFP,OACD;AACH;MAEaQ,YAAY,gBAAGC,gBAAU,CACpC,SAASD,YAAYA,CACnB;AACEE,EAAAA,EAAE,GAAGC,qBAAU;EACfC,IAAI;EACJC,aAAa;EACbC,aAAa;AACbC,EAAAA,OAAO,GAAG,SAAS;AACnBC,EAAAA,KAAK,EAAEC,UAAU;AACjBlB,EAAAA,IAAI,GAAG,GAAG;EACVM,SAAS;EACTa,gBAAgB;EAChB,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AAAA,EAAA,IAAAC,IAAA;EACA,MAAM;AAAEL,IAAAA,KAAK,EAAEM;GAAc,GAAGC,0CAAsB,EAAE;AACxD,EAAA,MAAMP,KAAK,GAAAK,CAAAA,IAAA,GAAGJ,UAAU,aAAVA,UAAU,KAAA,KAAA,CAAA,GAAVA,UAAU,GAAIK,YAAY,MAAAD,IAAAA,IAAAA,IAAA,KAAAA,KAAAA,CAAAA,GAAAA,IAAA,GAAI,SAAS;EACrD,MAAMG,IAAI,GAAGd,EAAuB;EACpC,MAAMe,SAAS,GAAG,GAAG;AAErB,EAAA,oBACEvB,cAAA,CAACwB,UAAoB,EAAA;IACnBC,OAAO,EAAA,IAAA;AACPC,IAAAA,eAAe,EAAEV,gBAAiB;AAAA,IAAA,GAC9BC,IAAI;IAAAU,QAAA,eAER3B,cAAA,CAACsB,IAAI,EAAA;AACHM,MAAAA,GAAG,EAAEV,YAAa;AAClBf,MAAAA,SAAS,EAAE0B,eAAU,CACnBzB,2BAAM,CAAC0B,MAAM,EACb1B,2BAAM,CAAC,CAAA,KAAA,EAAQP,IAAI,CAAA,CAAE,CAAC,EACtBO,2BAAM,CAAC,CAAA,QAAA,EAAWS,OAAO,CAAA,CAAE,CAAC,EAC5BC,KAAK,IAAIV,2BAAM,CAAC,CAAA,MAAA,EAASU,KAAK,CAAA,CAAE,CAAC,EACjCX,SACF,CAAE;AAAAwB,MAAAA,QAAA,eAEFI,eAAA,CAAA,KAAA,EAAA;AAAK5B,QAAAA,SAAS,EAAE0B,eAAU,CAACzB,2BAAM,CAAC4B,aAAa,CAAE;QAAAL,QAAA,EAAA,cAC/C3B,cAAA,CAACJ,WAAW,EAAA;AACVC,UAAAA,IAAI,EAAE0B,SAAU;AAChBzB,UAAAA,OAAO,EAAEa;AAAc,SACxB,CAAC,eAGFX,cAAA,CAACiC,SAAI,EAAA;UACH9B,SAAS,EAAEC,2BAAM,CAAC8B,UAAW;AAC7BC,UAAAA,IAAI,EAAC,IAAI;AACT,UAAA,WAAA,EAAWzB,IAAK;UAChB0B,SAAS,EAAA,IAAA;AAAAT,UAAAA,QAAA,EAERjB;AAAI,SACD,CAAC,eAEPV,cAAA,CAACJ,WAAW,EAAA;AACVC,UAAAA,IAAI,EAAE0B,SAAU;AAChBzB,UAAAA,OAAO,EAAEc;AAAc,SACxB,CAAC;OACC;KACD;AAAC,GACa,CAAC;AAE3B,CACF;;;;"}

package/dist/cjs/components/AlphaToggleButtonGroup/ToggleButtonGroup.js

@@ -2,35 +2,11 @@
 
 var React = require('react');
 var index = require('../../node_modules/@radix-ui/react-toggle-group/dist/index.js');
-var index$1 = require('../../node_modules/classnames/index.js');
+var index$1 = require('../../_virtual/index.js');
 var ToggleButtonContext = require('../AlphaToggleButton/ToggleButtonContext.js');
 var ToggleButtonGroup_module = require('./ToggleButtonGroup.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 
-/**
- * `ToggleButtonGroup` is a group of two-state buttons that can be toggled.
- *  Notice that it keeps at least one button selected.
- *  @example
- *
- * ```tsx
- * <ToggleButtonGroup
- *   shape="rectangle"
- *   value="two"
- * >
- *   <ToggleButton
- *     value="one"
- *     text="left"
- *   />
- *   <ToggleButton
- *     value="two"
- *     text="center"
- *   />
- *   <ToggleButton
- *     value="three"
- *     text="right"
- *   />
- * </ToggleButtonGroup>
- * ```
- */
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(props, forwardedRef) {
   const {
     children,
@@ -54,22 +30,25 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     if (! /*#__PURE__*/React.isValidElement(toggleButton)) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(index.Item, {
+    return /*#__PURE__*/jsxRuntime.jsx(index.Item, {
       asChild: true,
       value: toggleButton.props.value,
-      key: toggleButton.props.value,
-      className: ToggleButtonGroup_module.default.item
-    }, toggleButton);
+      className: ToggleButtonGroup_module.default.item,
+      children: toggleButton
+    }, toggleButton.props.value);
   });
-  return /*#__PURE__*/React.createElement(index.Root, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(index.Root, {
     ref: forwardedRef,
     className: index$1.default(ToggleButtonGroup_module.default.ToggleButtonGroup, fullWidth && ToggleButtonGroup_module.default.fullWidth, className),
-    onValueChange: handleValueChange
-  }, rest), /*#__PURE__*/React.createElement(ToggleButtonContext.ToggleButtonProvider, {
-    value: React.useMemo(() => ({
-      shape
-    }), [shape])
-  }, ToggleButtons));
+    onValueChange: handleValueChange,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(ToggleButtonContext.ToggleButtonProvider, {
+      value: React.useMemo(() => ({
+        shape
+      }), [shape]),
+      children: ToggleButtons
+    })
+  });
 });
 
 exports.ToggleButtonGroup = ToggleButtonGroup;

package/dist/cjs/components/AlphaToggleButtonGroup/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","sources":["../../../../src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef, useMemo } from 'react'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport classNames from 'classnames'\n\nimport { type ToggleButtonProps } from '~/src/components/AlphaToggleButton/ToggleButton.types'\nimport { ToggleButtonProvider } from '~/src/components/AlphaToggleButton/ToggleButtonContext'\nimport {\n  type ToggleButtonMultipleGroupProps,\n  type ToggleButtonSingleGroupProps,\n} from '~/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.types'\n\nimport styles from './ToggleButtonGroup.module.scss'\n\n/**\n * `ToggleButtonGroup` is a group of two-state buttons that can be toggled.\n *  Notice that it keeps at least one button selected.\n *  @example\n *\n * ```tsx\n * <ToggleButtonGroup\n *   shape=\"rectangle\"\n *   value=\"two\"\n * >\n *   <ToggleButton\n *     value=\"one\"\n *     text=\"left\"\n *   />\n *   <ToggleButton\n *     value=\"two\"\n *     text=\"center\"\n *   />\n *   <ToggleButton\n *     value=\"three\"\n *     text=\"right\"\n *   />\n * </ToggleButtonGroup>\n * ```\n */\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonMultipleGroupProps | ToggleButtonSingleGroupProps\n>(function ToggleButtonGroup(props, forwardedRef) {\n  const { children, shape, className, fullWidth, onValueChange, ...rest } =\n    props\n\n  const handleValueChange = (value: string | string[]) => {\n    if (!props.onValueChange || !value.length) {\n      return\n    }\n\n    if (props.type === 'single' && typeof value === 'string') {\n      props.onValueChange(value)\n    } else if (props.type === 'multiple' && Array.isArray(value)) {\n      props.onValueChange(value)\n    }\n  }\n\n  const ToggleButtons = React.Children.map(children, (toggleButton) => {\n    if (!React.isValidElement<ToggleButtonProps>(toggleButton)) {\n      return null\n    }\n\n    return (\n      <ToggleGroupPrimitive.Item\n        asChild\n        value={toggleButton.props.value}\n        key={toggleButton.props.value}\n        className={styles.item}\n      >\n        {toggleButton}\n      </ToggleGroupPrimitive.Item>\n    )\n  })\n\n  return (\n    <ToggleGroupPrimitive.Root\n      ref={forwardedRef}\n      className={classNames(\n        styles.ToggleButtonGroup,\n        fullWidth && styles.fullWidth,\n        className\n      )}\n      onValueChange={handleValueChange}\n      {...rest}\n    >\n      <ToggleButtonProvider value={useMemo(() => ({ shape }), [shape])}>\n        {ToggleButtons}\n      </ToggleButtonProvider>\n    </ToggleGroupPrimitive.Root>\n  )\n})\n"],"names":["ToggleButtonGroup","forwardRef","props","forwardedRef","children","shape","className","fullWidth","onValueChange","rest","handleValueChange","value","length","type","Array","isArray","ToggleButtons","React","Children","map","toggleButton","isValidElement","createElement","ToggleGroupPrimitive","asChild","key","styles","item","Object","assign","ref","classNames","ToggleButtonProvider","useMemo"],"mappings":";;;;;;;;AAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,iBAAiB,gBAAGC,gBAAU,CAGzC,SAASD,iBAAiBA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAChD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,SAAS;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;AAAK,GAAC,GACrEP,KAAK;EAEP,MAAMQ,iBAAiB,GAAIC,KAAwB,IAAK;IACtD,IAAI,CAACT,KAAK,CAACM,aAAa,IAAI,CAACG,KAAK,CAACC,MAAM,EAAE;AACzC,MAAA;AACF;IAEA,IAAIV,KAAK,CAACW,IAAI,KAAK,QAAQ,IAAI,OAAOF,KAAK,KAAK,QAAQ,EAAE;AACxDT,MAAAA,KAAK,CAACM,aAAa,CAACG,KAAK,CAAC;AAC5B,KAAC,MAAM,IAAIT,KAAK,CAACW,IAAI,KAAK,UAAU,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;AAC5DT,MAAAA,KAAK,CAACM,aAAa,CAACG,KAAK,CAAC;AAC5B;GACD;EAED,MAAMK,aAAa,GAAGC,KAAK,CAACC,QAAQ,CAACC,GAAG,CAACf,QAAQ,EAAGgB,YAAY,IAAK;AACnE,IAAA,IAAI,eAACH,KAAK,CAACI,cAAc,CAAoBD,YAAY,CAAC,EAAE;AAC1D,MAAA,OAAO,IAAI;AACb;AAEA,IAAA,oBACEH,KAAA,CAAAK,aAAA,CAACC,UAAyB,EAAA;MACxBC,OAAO,EAAA,IAAA;AACPb,MAAAA,KAAK,EAAES,YAAY,CAAClB,KAAK,CAACS,KAAM;AAChCc,MAAAA,GAAG,EAAEL,YAAY,CAAClB,KAAK,CAACS,KAAM;MAC9BL,SAAS,EAAEoB,gCAAM,CAACC;AAAK,KAAA,EAEtBP,YACwB,CAAC;AAEhC,GAAC,CAAC;EAEF,oBACEH,KAAA,CAAAK,aAAA,CAACC,UAAyB,EAAAK,MAAA,CAAAC,MAAA,CAAA;AACxBC,IAAAA,GAAG,EAAE3B,YAAa;AAClBG,IAAAA,SAAS,EAAEyB,eAAU,CACnBL,gCAAM,CAAC1B,iBAAiB,EACxBO,SAAS,IAAImB,gCAAM,CAACnB,SAAS,EAC7BD,SACF,CAAE;AACFE,IAAAA,aAAa,EAAEE;AAAkB,GAAA,EAC7BD,IAAI,CAERQ,eAAAA,KAAA,CAAAK,aAAA,CAACU,wCAAoB,EAAA;IAACrB,KAAK,EAAEsB,aAAO,CAAC,OAAO;AAAE5B,MAAAA;AAAM,KAAC,CAAC,EAAE,CAACA,KAAK,CAAC;GAC5DW,EAAAA,aACmB,CACG,CAAC;AAEhC,CAAC;;;;"}
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../../../../src/components/AlphaToggleButtonGroup/ToggleButtonGroup.tsx"],"sourcesContent":["'use client'\n\nimport { Children, forwardRef, isValidElement, useMemo } from 'react'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport classNames from 'classnames'\n\nimport { type ToggleButtonProps } from '~/src/components/AlphaToggleButton/ToggleButton.types'\nimport { ToggleButtonProvider } from '~/src/components/AlphaToggleButton/ToggleButtonContext'\nimport {\n  type ToggleButtonMultipleGroupProps,\n  type ToggleButtonSingleGroupProps,\n} from '~/src/components/AlphaToggleButtonGroup/ToggleButtonGroup.types'\n\nimport styles from './ToggleButtonGroup.module.scss'\n\n/**\n * `ToggleButtonGroup` is a group of two-state buttons that can be toggled.\n *  Notice that it keeps at least one button selected.\n *  @example\n *\n * ```tsx\n * <ToggleButtonGroup\n *   shape=\"rectangle\"\n *   value=\"two\"\n * >\n *   <ToggleButton\n *     value=\"one\"\n *     text=\"left\"\n *   />\n *   <ToggleButton\n *     value=\"two\"\n *     text=\"center\"\n *   />\n *   <ToggleButton\n *     value=\"three\"\n *     text=\"right\"\n *   />\n * </ToggleButtonGroup>\n * ```\n */\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonMultipleGroupProps | ToggleButtonSingleGroupProps\n>(function ToggleButtonGroup(props, forwardedRef) {\n  const { children, shape, className, fullWidth, onValueChange, ...rest } =\n    props\n\n  const handleValueChange = (value: string | string[]) => {\n    if (!props.onValueChange || !value.length) {\n      return\n    }\n\n    if (props.type === 'single' && typeof value === 'string') {\n      props.onValueChange(value)\n    } else if (props.type === 'multiple' && Array.isArray(value)) {\n      props.onValueChange(value)\n    }\n  }\n\n  const ToggleButtons = Children.map(children, (toggleButton) => {\n    if (!isValidElement<ToggleButtonProps>(toggleButton)) {\n      return null\n    }\n\n    return (\n      <ToggleGroupPrimitive.Item\n        asChild\n        value={toggleButton.props.value}\n        key={toggleButton.props.value}\n        className={styles.item}\n      >\n        {toggleButton}\n      </ToggleGroupPrimitive.Item>\n    )\n  })\n\n  return (\n    <ToggleGroupPrimitive.Root\n      ref={forwardedRef}\n      className={classNames(\n        styles.ToggleButtonGroup,\n        fullWidth && styles.fullWidth,\n        className\n      )}\n      onValueChange={handleValueChange}\n      {...rest}\n    >\n      <ToggleButtonProvider value={useMemo(() => ({ shape }), [shape])}>\n        {ToggleButtons}\n      </ToggleButtonProvider>\n    </ToggleGroupPrimitive.Root>\n  )\n})\n"],"names":["ToggleButtonGroup","forwardRef","props","forwardedRef","children","shape","className","fullWidth","onValueChange","rest","handleValueChange","value","length","type","Array","isArray","ToggleButtons","Children","map","toggleButton","isValidElement","_jsx","ToggleGroupPrimitive","asChild","styles","item","ref","classNames","ToggleButtonProvider","useMemo"],"mappings":";;;;;;;;;AAyCO,MAAMA,iBAAiB,gBAAGC,gBAAU,CAGzC,SAASD,iBAAiBA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAChD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,SAAS;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;AAAK,GAAC,GACrEP,KAAK;EAEP,MAAMQ,iBAAiB,GAAIC,KAAwB,IAAK;IACtD,IAAI,CAACT,KAAK,CAACM,aAAa,IAAI,CAACG,KAAK,CAACC,MAAM,EAAE;AACzC,MAAA;AACF;IAEA,IAAIV,KAAK,CAACW,IAAI,KAAK,QAAQ,IAAI,OAAOF,KAAK,KAAK,QAAQ,EAAE;AACxDT,MAAAA,KAAK,CAACM,aAAa,CAACG,KAAK,CAAC;AAC5B,KAAC,MAAM,IAAIT,KAAK,CAACW,IAAI,KAAK,UAAU,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;AAC5DT,MAAAA,KAAK,CAACM,aAAa,CAACG,KAAK,CAAC;AAC5B;GACD;EAED,MAAMK,aAAa,GAAGC,cAAQ,CAACC,GAAG,CAACd,QAAQ,EAAGe,YAAY,IAAK;AAC7D,IAAA,IAAI,eAACC,oBAAc,CAAoBD,YAAY,CAAC,EAAE;AACpD,MAAA,OAAO,IAAI;AACb;AAEA,IAAA,oBACEE,cAAA,CAACC,UAAyB,EAAA;MACxBC,OAAO,EAAA,IAAA;AACPZ,MAAAA,KAAK,EAAEQ,YAAY,CAACjB,KAAK,CAACS,KAAM;MAEhCL,SAAS,EAAEkB,gCAAM,CAACC,IAAK;AAAArB,MAAAA,QAAA,EAEtBe;AAAY,KAAA,EAHRA,YAAY,CAACjB,KAAK,CAACS,KAIC,CAAC;AAEhC,GAAC,CAAC;AAEF,EAAA,oBACEU,cAAA,CAACC,UAAyB,EAAA;AACxBI,IAAAA,GAAG,EAAEvB,YAAa;AAClBG,IAAAA,SAAS,EAAEqB,eAAU,CACnBH,gCAAM,CAACxB,iBAAiB,EACxBO,SAAS,IAAIiB,gCAAM,CAACjB,SAAS,EAC7BD,SACF,CAAE;AACFE,IAAAA,aAAa,EAAEE,iBAAkB;AAAA,IAAA,GAC7BD,IAAI;IAAAL,QAAA,eAERiB,cAAA,CAACO,wCAAoB,EAAA;MAACjB,KAAK,EAAEkB,aAAO,CAAC,OAAO;AAAExB,QAAAA;AAAM,OAAC,CAAC,EAAE,CAACA,KAAK,CAAC,CAAE;AAAAD,MAAAA,QAAA,EAC9DY;KACmB;AAAC,GACE,CAAC;AAEhC,CAAC;;;;"}

package/dist/cjs/components/AlphaToggleEmojiButtonGroup/ToggleEmojiButtonGroup.js

@@ -2,11 +2,12 @@
 
 var React = require('react');
 var index = require('../../node_modules/@radix-ui/react-toggle-group/dist/index.js');
-var index$1 = require('../../node_modules/classnames/index.js');
+var index$1 = require('../../_virtual/index.js');
 var useMergeRefs = require('../../hooks/useMergeRefs.js');
 var style = require('../../utils/style.js');
 var useToggleEmojiButtonSize = require('./useToggleEmojiButtonSize.js');
 var ToggleEmojiButtonGroup_module = require('./ToggleEmojiButtonGroup.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
 var BaseButton = require('../BaseButton/BaseButton.js');
 var Emoji = require('../Emoji/Emoji.js');
 
@@ -37,18 +38,22 @@ const ToggleEmojiButtonSource = /*#__PURE__*/React.forwardRef(function ToggleEmo
   onResize,
   ...rest
 }, forwardedRef) {
-  return /*#__PURE__*/React.createElement(index.Item, {
+  return /*#__PURE__*/jsxRuntime.jsx(index.Item, {
     value: value,
-    asChild: true
-  }, /*#__PURE__*/React.createElement(BaseButton.BaseButton, Object.assign({
-    ref: forwardedRef,
-    className: index$1.default(ToggleEmojiButtonGroup_module.default.ToggleEmojiButtonSource, ToggleEmojiButtonGroup_module.default[`size-${size}`], ToggleEmojiButtonGroup_module.default[`variant-${variant}`], className)
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: index$1.default(ToggleEmojiButtonGroup_module.default.ButtonContent)
-  }, /*#__PURE__*/React.createElement(Emoji.Emoji, {
-    name: name,
-    size: `${EMOJI_SIZE}`
-  }))));
+    asChild: true,
+    children: /*#__PURE__*/jsxRuntime.jsx(BaseButton.BaseButton, {
+      ref: forwardedRef,
+      className: index$1.default(ToggleEmojiButtonGroup_module.default.ToggleEmojiButtonSource, ToggleEmojiButtonGroup_module.default[`size-${size}`], ToggleEmojiButtonGroup_module.default[`variant-${variant}`], className),
+      ...rest,
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: index$1.default(ToggleEmojiButtonGroup_module.default.ButtonContent),
+        children: /*#__PURE__*/jsxRuntime.jsx(Emoji.Emoji, {
+          name: name,
+          size: `${EMOJI_SIZE}`
+        })
+      })
+    })
+  });
 });
 
 /**
@@ -82,7 +87,7 @@ const ToggleEmojiButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleEmoj
     enabled: shouldResizeButton,
     buttonCount: React.Children.count(children)
   });
-  return /*#__PURE__*/React.createElement(index.Root, Object.assign({
+  return /*#__PURE__*/jsxRuntime.jsx(index.Root, {
     type: "single",
     defaultValue: defaultValue,
     onValueChange: onValueChange,
@@ -94,8 +99,10 @@ const ToggleEmojiButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleEmoj
       '--b-toggle-emoji-button-group-gap': style.cssDimension(useToggleEmojiButtonSize.EMOJI_BUTTON_GROUP_GAP),
       ...style$1
     },
-    className: index$1.default(ToggleEmojiButtonGroup_module.default.ToggleEmojiButtonGroup, fillDirection && ToggleEmojiButtonGroup_module.default[`fillDirection-${fillDirection}`], className)
-  }, rest), children);
+    className: index$1.default(ToggleEmojiButtonGroup_module.default.ToggleEmojiButtonGroup, fillDirection && ToggleEmojiButtonGroup_module.default[`fillDirection-${fillDirection}`], className),
+    ...rest,
+    children: children
+  });
 });
 
 exports.ToggleEmojiButtonGroup = ToggleEmojiButtonGroup;