@channel.io/bezier-react 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/cjs/_virtual/_commonjsHelpers.js

@@ -1,11 +1,8 @@
 'use strict';
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
-exports.commonjsGlobal = commonjsGlobal;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 //# sourceMappingURL=_commonjsHelpers.js.map

package/dist/cjs/_virtual/_commonjsHelpers.js.map

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

package/dist/cjs/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.js

@@ -6,8 +6,6 @@ var AlphaSmoothCornersBox_styled = require('./AlphaSmoothCornersBox.styled.js');
 var FeatureProvider = require('../../features/FeatureProvider.js');
 var Feature = require('../../features/Feature.js');
 
-const cv = style.cssVarName('alpha-smooth-corners-box');
-
 /**
  * `AlphaSmoothCornersBox` is a simple `div` element with smooth corners.
  * It is available by enabling the `SmoothCornersFeature`.
@@ -36,21 +34,21 @@ const AlphaSmoothCornersBox = /*#__PURE__*/React.forwardRef(function AlphaSmooth
   const shadowSpreadRadius = shadow?.spreadRadius ?? 0;
   const style$1 = React.useMemo(() => ({
     ...styleProp,
-    [cv('border-radius')]: borderRadius,
-    [cv('border-radius-type')]: typeof borderRadius,
-    [cv('shadow-offset-x')]: shadow?.offsetX,
-    [cv('shadow-offset-y')]: shadow?.offsetY,
-    [cv('shadow-blur-radius')]: style.px(shadow?.blurRadius ?? 0),
-    [cv('shadow-spread-radius')]: style.px(shadowSpreadRadius),
-    [cv('shadow-color')]: style.cssVarValue(shadow?.color),
+    '--b-alpha-smooth-corners-box-border-radius': borderRadius,
+    '--b-alpha-smooth-corners-box-border-radius-type': typeof borderRadius,
+    '--b-alpha-smooth-corners-box-shadow-offset-x': shadow?.offsetX,
+    '--b-alpha-smooth-corners-box-shadow-offset-y': shadow?.offsetY,
+    '--b-alpha-smooth-corners-box-shadow-blur-radius': `${shadow?.blurRadius ?? 0}px`,
+    '--b-alpha-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,
+    '--b-alpha-smooth-corners-box-shadow-color': style.cssVar(shadow?.color),
     /**
      * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.
      * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}
      */
-    [cv('padding')]: style.px(shadowSpreadRadius * 2),
-    [cv('margin')]: style.px(margin ?? 0),
-    [cv('background-color')]: style.cssVarValue(backgroundColor),
-    [cv('background-image')]: style.cssUrl(backgroundImage)
+    '--b-alpha-smooth-corners-box-padding': `${shadowSpreadRadius * 2}px`,
+    '--b-alpha-smooth-corners-box-margin': `${margin ?? 0}px`,
+    '--b-alpha-smooth-corners-box-background-color': style.cssVar(backgroundColor),
+    '--b-alpha-smooth-corners-box-background-image': style.cssUrl(backgroundImage)
   }), [styleProp, borderRadius, margin, shadow, shadowSpreadRadius, backgroundColor, backgroundImage]);
   return /*#__PURE__*/React.createElement(AlphaSmoothCornersBox_styled.Box, Object.assign({}, rest, {
     ref: forwardedRef,

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

@@ -1 +1 @@
-{"version":3,"file":"AlphaSmoothCornersBox.js","sources":["../../../../src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport {\n  FeatureType,\n  useFeatureFlag,\n} from '~/src/features'\nimport {\n  cssUrl,\n  cssVarName,\n  cssVarValue,\n  px,\n} from '~/src/utils/style'\n\nimport { type AlphaSmoothCornersBoxProps } from './AlphaSmoothCornersBox.types'\n\nimport * as Styled from './AlphaSmoothCornersBox.styled'\n\nconst cv = cssVarName('alpha-smooth-corners-box')\n\n/**\n * `AlphaSmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n *\n * @example\n *\n * ```tsx\n * <FeatureProvider features={[SmoothCornersFeature]}>\n *   <AlphaSmoothCornersBox />\n * </FeatureProvider>\n * ```\n */\nexport const AlphaSmoothCornersBox = forwardRef<HTMLElement, AlphaSmoothCornersBoxProps>(function AlphaSmoothCornersBox({\n  children,\n  disabled,\n  borderRadius,\n  margin,\n  shadow,\n  backgroundColor,\n  backgroundImage,\n  style: styleProp,\n  ...rest\n}, forwardedRef) {\n  const smoothCornersEnabled = useFeatureFlag(FeatureType.SmoothCorners)\n  const enabled = !disabled && smoothCornersEnabled\n\n  const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n  const style = useMemo(() => ({\n    ...styleProp,\n    [cv('border-radius')]: borderRadius,\n    [cv('border-radius-type')]: typeof borderRadius,\n    [cv('shadow-offset-x')]: shadow?.offsetX,\n    [cv('shadow-offset-y')]: shadow?.offsetY,\n    [cv('shadow-blur-radius')]: px(shadow?.blurRadius ?? 0),\n    [cv('shadow-spread-radius')]: px(shadowSpreadRadius),\n    [cv('shadow-color')]: cssVarValue(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    [cv('padding')]: px(shadowSpreadRadius * 2),\n    [cv('margin')]: px(margin ?? 0),\n    [cv('background-color')]: cssVarValue(backgroundColor),\n    [cv('background-image')]: cssUrl(backgroundImage),\n  }), [\n    styleProp,\n    borderRadius,\n    margin,\n    shadow,\n    shadowSpreadRadius,\n    backgroundColor,\n    backgroundImage,\n  ])\n\n  return (\n    <Styled.Box\n      {...rest}\n      ref={forwardedRef}\n      style={style}\n      data-state={enabled ? 'enabled' : 'disabled'}\n    >\n      { children }\n    </Styled.Box>\n  )\n})\n"],"names":["cv","cssVarName","AlphaSmoothCornersBox","forwardRef","children","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","style","styleProp","rest","forwardedRef","smoothCornersEnabled","useFeatureFlag","FeatureType","SmoothCorners","enabled","shadowSpreadRadius","spreadRadius","useMemo","offsetX","offsetY","px","blurRadius","cssVarValue","color","cssUrl","React","createElement","Styled","Object","assign","ref"],"mappings":";;;;;;;;AAoBA,MAAMA,EAAE,GAAGC,gBAAU,CAAC,0BAA0B,CAAC,CAAA;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,qBAAqB,gBAAGC,gBAAU,CAA0C,SAASD,qBAAqBA,CAAC;EACtHE,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;AACfC,EAAAA,KAAK,EAAEC,SAAS;EAChB,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,oBAAoB,GAAGC,8BAAc,CAACC,mBAAW,CAACC,aAAa,CAAC,CAAA;AACtE,EAAA,MAAMC,OAAO,GAAG,CAACd,QAAQ,IAAIU,oBAAoB,CAAA;AAEjD,EAAA,MAAMK,kBAAkB,GAAGZ,MAAM,EAAEa,YAAY,IAAI,CAAC,CAAA;AAEpD,EAAA,MAAMV,OAAK,GAAGW,aAAO,CAAC,OAAO;AAC3B,IAAA,GAAGV,SAAS;AACZ,IAAA,CAACZ,EAAE,CAAC,eAAe,CAAC,GAAGM,YAAY;AACnC,IAAA,CAACN,EAAE,CAAC,oBAAoB,CAAC,GAAG,OAAOM,YAAY;AAC/C,IAAA,CAACN,EAAE,CAAC,iBAAiB,CAAC,GAAGQ,MAAM,EAAEe,OAAO;AACxC,IAAA,CAACvB,EAAE,CAAC,iBAAiB,CAAC,GAAGQ,MAAM,EAAEgB,OAAO;AACxC,IAAA,CAACxB,EAAE,CAAC,oBAAoB,CAAC,GAAGyB,QAAE,CAACjB,MAAM,EAAEkB,UAAU,IAAI,CAAC,CAAC;IACvD,CAAC1B,EAAE,CAAC,sBAAsB,CAAC,GAAGyB,QAAE,CAACL,kBAAkB,CAAC;IACpD,CAACpB,EAAE,CAAC,cAAc,CAAC,GAAG2B,iBAAW,CAACnB,MAAM,EAAEoB,KAAK,CAAC;AAChD;AACJ;AACA;AACA;IACI,CAAC5B,EAAE,CAAC,SAAS,CAAC,GAAGyB,QAAE,CAACL,kBAAkB,GAAG,CAAC,CAAC;IAC3C,CAACpB,EAAE,CAAC,QAAQ,CAAC,GAAGyB,QAAE,CAAClB,MAAM,IAAI,CAAC,CAAC;IAC/B,CAACP,EAAE,CAAC,kBAAkB,CAAC,GAAG2B,iBAAW,CAAClB,eAAe,CAAC;AACtD,IAAA,CAACT,EAAE,CAAC,kBAAkB,CAAC,GAAG6B,YAAM,CAACnB,eAAe,CAAA;AAClD,GAAC,CAAC,EAAE,CACFE,SAAS,EACTN,YAAY,EACZC,MAAM,EACNC,MAAM,EACNY,kBAAkB,EAClBX,eAAe,EACfC,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,oBACEoB,KAAA,CAAAC,aAAA,CAACC,gCAAU,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACLrB,IAAI,EAAA;AACRsB,IAAAA,GAAG,EAAErB,YAAa;AAClBH,IAAAA,KAAK,EAAEA,OAAM;IACb,YAAYQ,EAAAA,OAAO,GAAG,SAAS,GAAG,UAAA;AAAW,GAAA,CAAA,EAE3Cf,QACQ,CAAC,CAAA;AAEjB,CAAC;;;;"}
+{"version":3,"file":"AlphaSmoothCornersBox.js","sources":["../../../../src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport {\n  FeatureType,\n  useFeatureFlag,\n} from '~/src/features'\nimport {\n  cssUrl,\n  cssVar,\n} from '~/src/utils/style'\n\nimport { type AlphaSmoothCornersBoxProps } from './AlphaSmoothCornersBox.types'\n\nimport * as Styled from './AlphaSmoothCornersBox.styled'\n\n/**\n * `AlphaSmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n *\n * @example\n *\n * ```tsx\n * <FeatureProvider features={[SmoothCornersFeature]}>\n *   <AlphaSmoothCornersBox />\n * </FeatureProvider>\n * ```\n */\nexport const AlphaSmoothCornersBox = forwardRef<HTMLElement, AlphaSmoothCornersBoxProps>(function AlphaSmoothCornersBox({\n  children,\n  disabled,\n  borderRadius,\n  margin,\n  shadow,\n  backgroundColor,\n  backgroundImage,\n  style: styleProp,\n  ...rest\n}, forwardedRef) {\n  const smoothCornersEnabled = useFeatureFlag(FeatureType.SmoothCorners)\n  const enabled = !disabled && smoothCornersEnabled\n\n  const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n  const style = useMemo(() => ({\n    ...styleProp,\n    '--b-alpha-smooth-corners-box-border-radius': borderRadius,\n    '--b-alpha-smooth-corners-box-border-radius-type': typeof borderRadius,\n    '--b-alpha-smooth-corners-box-shadow-offset-x': shadow?.offsetX,\n    '--b-alpha-smooth-corners-box-shadow-offset-y': shadow?.offsetY,\n    '--b-alpha-smooth-corners-box-shadow-blur-radius': `${shadow?.blurRadius ?? 0}px`,\n    '--b-alpha-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n    '--b-alpha-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-alpha-smooth-corners-box-padding': `${shadowSpreadRadius * 2}px`,\n    '--b-alpha-smooth-corners-box-margin': `${margin ?? 0}px`,\n    '--b-alpha-smooth-corners-box-background-color': cssVar(backgroundColor),\n    '--b-alpha-smooth-corners-box-background-image': cssUrl(backgroundImage),\n  }), [\n    styleProp,\n    borderRadius,\n    margin,\n    shadow,\n    shadowSpreadRadius,\n    backgroundColor,\n    backgroundImage,\n  ])\n\n  return (\n    <Styled.Box\n      {...rest}\n      ref={forwardedRef}\n      style={style}\n      data-state={enabled ? 'enabled' : 'disabled'}\n    >\n      { children }\n    </Styled.Box>\n  )\n})\n"],"names":["AlphaSmoothCornersBox","forwardRef","children","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","style","styleProp","rest","forwardedRef","smoothCornersEnabled","useFeatureFlag","FeatureType","SmoothCorners","enabled","shadowSpreadRadius","spreadRadius","useMemo","offsetX","offsetY","blurRadius","cssVar","color","cssUrl","React","createElement","Styled","Object","assign","ref"],"mappings":";;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,qBAAqB,gBAAGC,gBAAU,CAA0C,SAASD,qBAAqBA,CAAC;EACtHE,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;AACfC,EAAAA,KAAK,EAAEC,SAAS;EAChB,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMC,oBAAoB,GAAGC,8BAAc,CAACC,mBAAW,CAACC,aAAa,CAAC,CAAA;AACtE,EAAA,MAAMC,OAAO,GAAG,CAACd,QAAQ,IAAIU,oBAAoB,CAAA;AAEjD,EAAA,MAAMK,kBAAkB,GAAGZ,MAAM,EAAEa,YAAY,IAAI,CAAC,CAAA;AAEpD,EAAA,MAAMV,OAAK,GAAGW,aAAO,CAAC,OAAO;AAC3B,IAAA,GAAGV,SAAS;AACZ,IAAA,4CAA4C,EAAEN,YAAY;IAC1D,iDAAiD,EAAE,OAAOA,YAAY;IACtE,8CAA8C,EAAEE,MAAM,EAAEe,OAAO;IAC/D,8CAA8C,EAAEf,MAAM,EAAEgB,OAAO;AAC/D,IAAA,iDAAiD,EAAG,CAAEhB,EAAAA,MAAM,EAAEiB,UAAU,IAAI,CAAE,CAAG,EAAA,CAAA;IACjF,mDAAmD,EAAG,CAAEL,EAAAA,kBAAmB,CAAG,EAAA,CAAA;AAC9E,IAAA,2CAA2C,EAAEM,YAAM,CAAClB,MAAM,EAAEmB,KAAK,CAAC;AAClE;AACJ;AACA;AACA;AACI,IAAA,sCAAsC,EAAG,CAAA,EAAEP,kBAAkB,GAAG,CAAE,CAAG,EAAA,CAAA;AACrE,IAAA,qCAAqC,EAAG,CAAA,EAAEb,MAAM,IAAI,CAAE,CAAG,EAAA,CAAA;AACzD,IAAA,+CAA+C,EAAEmB,YAAM,CAACjB,eAAe,CAAC;IACxE,+CAA+C,EAAEmB,YAAM,CAAClB,eAAe,CAAA;AACzE,GAAC,CAAC,EAAE,CACFE,SAAS,EACTN,YAAY,EACZC,MAAM,EACNC,MAAM,EACNY,kBAAkB,EAClBX,eAAe,EACfC,eAAe,CAChB,CAAC,CAAA;AAEF,EAAA,oBACEmB,KAAA,CAAAC,aAAA,CAACC,gCAAU,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EACLpB,IAAI,EAAA;AACRqB,IAAAA,GAAG,EAAEpB,YAAa;AAClBH,IAAAA,KAAK,EAAEA,OAAM;IACb,YAAYQ,EAAAA,OAAO,GAAG,SAAS,GAAG,UAAA;AAAW,GAAA,CAAA,EAE3Cf,QACQ,CAAC,CAAA;AAEjB,CAAC;;;;"}

package/dist/cjs/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.js

@@ -6,7 +6,7 @@ var FoundationStyledComponent = require('../../foundation/FoundationStyledCompon
 const Box = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "AlphaSmoothCornersBoxstyled__Box",
   componentId: "sc-1rjgm3y-0"
-})(["--bezier-alpha-smooth-corners-box-border-radius:0;--bezier-alpha-smooth-corners-box-shadow-offset-x:0;--bezier-alpha-smooth-corners-box-shadow-offset-y:0;--bezier-alpha-smooth-corners-box-shadow-blur-radius:0px;--bezier-alpha-smooth-corners-box-shadow-spread-radius:0px;--bezier-alpha-smooth-corners-box-shadow-color:transparent;--bezier-alpha-smooth-corners-box-padding:0px;--bezier-alpha-smooth-corners-box-margin:0px;--bezier-alpha-smooth-corners-box-background-color:transparent;margin:var(--bezier-alpha-smooth-corners-box-margin);background-color:var(--bezier-alpha-smooth-corners-box-background-color);background-image:var(--bezier-alpha-smooth-corners-box-background-image);background-size:cover;border-radius:var(--bezier-alpha-smooth-corners-box-border-radius);box-shadow:var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color);&[data-state=\"enabled\"]{@supports (background:paint(smooth-corners)){padding:var(--bezier-alpha-smooth-corners-box-padding);margin:calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding)));background:paint(smooth-corners);border-radius:0;border-image-source:var(--bezier-alpha-smooth-corners-box-background-image);box-shadow:none;--smooth-corners:var(--bezier-alpha-smooth-corners-box-border-radius);--smooth-corners-shadow:var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color);--smooth-corners-bg-color:var(--bezier-alpha-smooth-corners-box-background-color);--smooth-corners-padding:var(--bezier-alpha-smooth-corners-box-padding);--smooth-corners-radius-unit:var(--bezier-alpha-smooth-corners-box-border-radius-type);}}"]);
+})(["--b-alpha-smooth-corners-box-border-radius:0;--b-alpha-smooth-corners-box-shadow-offset-x:0;--b-alpha-smooth-corners-box-shadow-offset-y:0;--b-alpha-smooth-corners-box-shadow-blur-radius:0px;--b-alpha-smooth-corners-box-shadow-spread-radius:0px;--b-alpha-smooth-corners-box-shadow-color:transparent;--b-alpha-smooth-corners-box-padding:0px;--b-alpha-smooth-corners-box-margin:0px;--b-alpha-smooth-corners-box-background-color:transparent;box-sizing:content-box;margin:var(--b-alpha-smooth-corners-box-margin);background-color:var(--b-alpha-smooth-corners-box-background-color);background-image:var(--b-alpha-smooth-corners-box-background-image);background-size:cover;border-radius:var(--b-alpha-smooth-corners-box-border-radius);box-shadow:var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color);&[data-state=\"enabled\"]{@supports (background:paint(smooth-corners)){padding:var(--b-alpha-smooth-corners-box-padding);margin:calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding)));background:paint(smooth-corners);border-radius:0;border-image-source:var(--b-alpha-smooth-corners-box-background-image);box-shadow:none;--smooth-corners:var(--b-alpha-smooth-corners-box-border-radius);--smooth-corners-shadow:var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color);--smooth-corners-bg-color:var(--b-alpha-smooth-corners-box-background-color);--smooth-corners-padding:var(--b-alpha-smooth-corners-box-padding);--smooth-corners-radius-unit:var(--b-alpha-smooth-corners-box-border-radius-type);}}"]);
 
 exports.Box = Box;
 //# sourceMappingURL=AlphaSmoothCornersBox.styled.js.map

package/dist/cjs/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaSmoothCornersBox.styled.js","sources":["../../../../src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.ts"],"sourcesContent":["/* stylelint-disable function-whitespace-after, length-zero-no-unit */\nimport { styled } from '~/src/foundation'\n\nexport const Box = styled.div`\n  --bezier-alpha-smooth-corners-box-border-radius: 0;\n  --bezier-alpha-smooth-corners-box-shadow-offset-x: 0;\n  --bezier-alpha-smooth-corners-box-shadow-offset-y: 0;\n  --bezier-alpha-smooth-corners-box-shadow-blur-radius: 0px;\n  --bezier-alpha-smooth-corners-box-shadow-spread-radius: 0px;\n  --bezier-alpha-smooth-corners-box-shadow-color: transparent;\n  --bezier-alpha-smooth-corners-box-padding: 0px;\n  --bezier-alpha-smooth-corners-box-margin: 0px;\n  --bezier-alpha-smooth-corners-box-background-color: transparent;\n\n  margin: var(--bezier-alpha-smooth-corners-box-margin);\n  background-color: var(--bezier-alpha-smooth-corners-box-background-color);\n  background-image: var(--bezier-alpha-smooth-corners-box-background-image);\n  background-size: cover;\n  border-radius: var(--bezier-alpha-smooth-corners-box-border-radius);\n  box-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color);\n\n  &[data-state=\"enabled\"] {\n    @supports (background: paint(smooth-corners)) {\n      padding: var(--bezier-alpha-smooth-corners-box-padding);\n      margin: calc(var(--bezier-alpha-smooth-corners-box-margin) + (-1 * var(--bezier-alpha-smooth-corners-box-padding)));\n      background: paint(smooth-corners);\n      border-radius: 0;\n      border-image-source: var(--bezier-alpha-smooth-corners-box-background-image);\n      box-shadow: none;\n\n      --smooth-corners: var(--bezier-alpha-smooth-corners-box-border-radius);\n      --smooth-corners-shadow: var(--bezier-alpha-smooth-corners-box-shadow-offset-x) var(--bezier-alpha-smooth-corners-box-shadow-offset-y) var(--bezier-alpha-smooth-corners-box-shadow-blur-radius) var(--bezier-alpha-smooth-corners-box-shadow-spread-radius) var(--bezier-alpha-smooth-corners-box-shadow-color);\n      --smooth-corners-bg-color: var(--bezier-alpha-smooth-corners-box-background-color);\n      --smooth-corners-padding: var(--bezier-alpha-smooth-corners-box-padding);\n      --smooth-corners-radius-unit: var(--bezier-alpha-smooth-corners-box-border-radius-type);\n    }\n  }\n`\n"],"names":["Box","styled","div","withConfig","displayName","componentId"],"mappings":";;;;AAAA;MAGaA,GAAG,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAkC5B,CAAA,CAAA,CAAA,+gEAAA,CAAA;;;;"}
+{"version":3,"file":"AlphaSmoothCornersBox.styled.js","sources":["../../../../src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.styled.ts"],"sourcesContent":["/* stylelint-disable function-whitespace-after, length-zero-no-unit */\nimport { styled } from '~/src/foundation'\n\nexport const Box = styled.div`\n  --b-alpha-smooth-corners-box-border-radius: 0;\n  --b-alpha-smooth-corners-box-shadow-offset-x: 0;\n  --b-alpha-smooth-corners-box-shadow-offset-y: 0;\n  --b-alpha-smooth-corners-box-shadow-blur-radius: 0px;\n  --b-alpha-smooth-corners-box-shadow-spread-radius: 0px;\n  --b-alpha-smooth-corners-box-shadow-color: transparent;\n  --b-alpha-smooth-corners-box-padding: 0px;\n  --b-alpha-smooth-corners-box-margin: 0px;\n  --b-alpha-smooth-corners-box-background-color: transparent;\n\n  box-sizing: content-box;\n  margin: var(--b-alpha-smooth-corners-box-margin);\n  background-color: var(--b-alpha-smooth-corners-box-background-color);\n  background-image: var(--b-alpha-smooth-corners-box-background-image);\n  background-size: cover;\n  border-radius: var(--b-alpha-smooth-corners-box-border-radius);\n  box-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color);\n\n  &[data-state=\"enabled\"] {\n    @supports (background: paint(smooth-corners)) {\n      padding: var(--b-alpha-smooth-corners-box-padding);\n      margin: calc(var(--b-alpha-smooth-corners-box-margin) + (-1 * var(--b-alpha-smooth-corners-box-padding)));\n      background: paint(smooth-corners);\n      border-radius: 0;\n      border-image-source: var(--b-alpha-smooth-corners-box-background-image);\n      box-shadow: none;\n\n      --smooth-corners: var(--b-alpha-smooth-corners-box-border-radius);\n      --smooth-corners-shadow: var(--b-alpha-smooth-corners-box-shadow-offset-x) var(--b-alpha-smooth-corners-box-shadow-offset-y) var(--b-alpha-smooth-corners-box-shadow-blur-radius) var(--b-alpha-smooth-corners-box-shadow-spread-radius) var(--b-alpha-smooth-corners-box-shadow-color);\n      --smooth-corners-bg-color: var(--b-alpha-smooth-corners-box-background-color);\n      --smooth-corners-padding: var(--b-alpha-smooth-corners-box-padding);\n      --smooth-corners-radius-unit: var(--b-alpha-smooth-corners-box-border-radius-type);\n    }\n  }\n`\n"],"names":["Box","styled","div","withConfig","displayName","componentId"],"mappings":";;;;AAAA;MAGaA,GAAG,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAmC5B,CAAA,CAAA,CAAA,24DAAA,CAAA;;;;"}

package/dist/cjs/components/AlphaStack/AlphaStack.js

@@ -5,8 +5,6 @@ var style = require('../../utils/style.js');
 var AlphaStack_styled = require('./AlphaStack.styled.js');
 var flexAdapter = require('../Stack/util/flexAdapter.js');
 
-const cv = style.cssVarName('alpha-stack');
-
 /**
  * `AlphaStack` provides an abstraction of **flex layout** so that
  * rendering of child elements **linearly** can be done
@@ -40,10 +38,10 @@ const AlphaStack = /*#__PURE__*/React.forwardRef(function AlphaStack({
 }, forwardedRef) {
   const stackStyle = React.useMemo(() => ({
     ...style$1,
-    [cv('direction')]: direction === 'horizontal' ? 'row' : 'column',
-    [cv('justify')]: flexAdapter.flex(justify),
-    [cv('align')]: flexAdapter.flex(align),
-    [cv('spacing')]: style.px(spacing)
+    '--b-alpha-stack-direction': direction === 'horizontal' ? 'row' : 'column',
+    '--b-alpha-stack-justify': flexAdapter.flex(justify),
+    '--b-alpha-stack-align': flexAdapter.flex(align),
+    '--b-alpha-stack-spacing': style.px(spacing)
   }), [align, direction, justify, spacing, style$1]);
   return /*#__PURE__*/React.createElement(AlphaStack_styled.Container, Object.assign({
     ref: forwardedRef,

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

@@ -1 +1 @@
-{"version":3,"file":"AlphaStack.js","sources":["../../../../src/components/AlphaStack/AlphaStack.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport {\n  cssVarName,\n  px,\n} from '~/src/utils/style'\n\nimport { flex } from '~/src/components/Stack/util'\n\nimport type { AlphaStackProps } from './AlphaStack.types'\n\nimport * as Styled from './AlphaStack.styled'\n\nconst cv = cssVarName('alpha-stack')\n\n/**\n * `AlphaStack` provides an abstraction of **flex layout** so that\n * rendering of child elements **linearly** can be done\n * with simplified options.\n *\n * `AlphaStack` always fills the parent element.\n *\n * Be reminded that the first depth children element of AlphaStack would be StackItem that is adjusted by flex layout\n *\n * @example\n *\n * ```tsx\n * <AlphaStack direction=\"horizontal\" spacing={8}>\n *  <div>{ ... }</div>\n *  <div>{ ... }</div>\n * </AlphaStack>\n * ```\n */\nexport const AlphaStack = forwardRef(function AlphaStack(\n  {\n    as = 'div',\n    testId = 'bezier-react-alpha-stack',\n    className,\n    interpolation,\n    style,\n    children,\n    direction,\n    justify = 'start',\n    align = 'stretch',\n    spacing = 0,\n    ...rest\n  }: AlphaStackProps,\n  forwardedRef: Ref<HTMLElement>,\n) {\n  const stackStyle = useMemo(() => ({\n    ...style,\n    [cv('direction')]: direction === 'horizontal' ? 'row' : 'column',\n    [cv('justify')]: flex(justify),\n    [cv('align')]: flex(align),\n    [cv('spacing')]: px(spacing),\n  } as React.CSSProperties),\n  [\n    align,\n    direction,\n    justify,\n    spacing,\n    style,\n  ])\n\n  return (\n    <Styled.Container\n      ref={forwardedRef}\n      as={as}\n      data-testid={testId}\n      style={stackStyle}\n      className={className}\n      interpolation={interpolation}\n      {...rest}\n    >\n      { children }\n    </Styled.Container>\n  )\n})\n"],"names":["cv","cssVarName","AlphaStack","forwardRef","as","testId","className","interpolation","style","children","direction","justify","align","spacing","rest","forwardedRef","stackStyle","useMemo","flex","px","React","createElement","Styled","Object","assign","ref"],"mappings":";;;;;;;AAiBA,MAAMA,EAAE,GAAGC,gBAAU,CAAC,aAAa,CAAC,CAAA;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CACtD;AACEE,EAAAA,EAAE,GAAG,KAAK;AACVC,EAAAA,MAAM,GAAG,0BAA0B;EACnCC,SAAS;EACTC,aAAa;SACbC,OAAK;EACLC,QAAQ;EACRC,SAAS;AACTC,EAAAA,OAAO,GAAG,OAAO;AACjBC,EAAAA,KAAK,GAAG,SAAS;AACjBC,EAAAA,OAAO,GAAG,CAAC;EACX,GAAGC,IAAAA;AACY,CAAC,EAClBC,YAA8B,EAC9B;AACA,EAAA,MAAMC,UAAU,GAAGC,aAAO,CAAC,OAAO;AAChC,IAAA,GAAGT,OAAK;IACR,CAACR,EAAE,CAAC,WAAW,CAAC,GAAGU,SAAS,KAAK,YAAY,GAAG,KAAK,GAAG,QAAQ;IAChE,CAACV,EAAE,CAAC,SAAS,CAAC,GAAGkB,gBAAI,CAACP,OAAO,CAAC;IAC9B,CAACX,EAAE,CAAC,OAAO,CAAC,GAAGkB,gBAAI,CAACN,KAAK,CAAC;AAC1B,IAAA,CAACZ,EAAE,CAAC,SAAS,CAAC,GAAGmB,QAAE,CAACN,OAAO,CAAA;AAC7B,GAAC,CAAwB,EACzB,CACED,KAAK,EACLF,SAAS,EACTC,OAAO,EACPE,OAAO,EACPL,OAAK,CACN,CAAC,CAAA;EAEF,oBACEY,KAAA,CAAAC,aAAA,CAACC,2BAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACfC,IAAAA,GAAG,EAAEV,YAAa;AAClBX,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaC,MAAO;AACpBG,IAAAA,KAAK,EAAEQ,UAAW;AAClBV,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAAA;GACXO,EAAAA,IAAI,CAENL,EAAAA,QACc,CAAC,CAAA;AAEvB,CAAC;;;;"}
+{"version":3,"file":"AlphaStack.js","sources":["../../../../src/components/AlphaStack/AlphaStack.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport { px } from '~/src/utils/style'\n\nimport { flex } from '~/src/components/Stack/util'\n\nimport type { AlphaStackProps } from './AlphaStack.types'\n\nimport * as Styled from './AlphaStack.styled'\n\n/**\n * `AlphaStack` provides an abstraction of **flex layout** so that\n * rendering of child elements **linearly** can be done\n * with simplified options.\n *\n * `AlphaStack` always fills the parent element.\n *\n * Be reminded that the first depth children element of AlphaStack would be StackItem that is adjusted by flex layout\n *\n * @example\n *\n * ```tsx\n * <AlphaStack direction=\"horizontal\" spacing={8}>\n *  <div>{ ... }</div>\n *  <div>{ ... }</div>\n * </AlphaStack>\n * ```\n */\nexport const AlphaStack = forwardRef(function AlphaStack(\n  {\n    as = 'div',\n    testId = 'bezier-react-alpha-stack',\n    className,\n    interpolation,\n    style,\n    children,\n    direction,\n    justify = 'start',\n    align = 'stretch',\n    spacing = 0,\n    ...rest\n  }: AlphaStackProps,\n  forwardedRef: Ref<HTMLElement>,\n) {\n  const stackStyle = useMemo(() => ({\n    ...style,\n    '--b-alpha-stack-direction': direction === 'horizontal' ? 'row' : 'column',\n    '--b-alpha-stack-justify': flex(justify),\n    '--b-alpha-stack-align': flex(align),\n    '--b-alpha-stack-spacing': px(spacing),\n  } as React.CSSProperties),\n  [\n    align,\n    direction,\n    justify,\n    spacing,\n    style,\n  ])\n\n  return (\n    <Styled.Container\n      ref={forwardedRef}\n      as={as}\n      data-testid={testId}\n      style={stackStyle}\n      className={className}\n      interpolation={interpolation}\n      {...rest}\n    >\n      { children }\n    </Styled.Container>\n  )\n})\n"],"names":["AlphaStack","forwardRef","as","testId","className","interpolation","style","children","direction","justify","align","spacing","rest","forwardedRef","stackStyle","useMemo","flex","px","React","createElement","Styled","Object","assign","ref"],"mappings":";;;;;;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CACtD;AACEE,EAAAA,EAAE,GAAG,KAAK;AACVC,EAAAA,MAAM,GAAG,0BAA0B;EACnCC,SAAS;EACTC,aAAa;SACbC,OAAK;EACLC,QAAQ;EACRC,SAAS;AACTC,EAAAA,OAAO,GAAG,OAAO;AACjBC,EAAAA,KAAK,GAAG,SAAS;AACjBC,EAAAA,OAAO,GAAG,CAAC;EACX,GAAGC,IAAAA;AACY,CAAC,EAClBC,YAA8B,EAC9B;AACA,EAAA,MAAMC,UAAU,GAAGC,aAAO,CAAC,OAAO;AAChC,IAAA,GAAGT,OAAK;AACR,IAAA,2BAA2B,EAAEE,SAAS,KAAK,YAAY,GAAG,KAAK,GAAG,QAAQ;AAC1E,IAAA,yBAAyB,EAAEQ,gBAAI,CAACP,OAAO,CAAC;AACxC,IAAA,uBAAuB,EAAEO,gBAAI,CAACN,KAAK,CAAC;IACpC,yBAAyB,EAAEO,QAAE,CAACN,OAAO,CAAA;AACvC,GAAC,CAAwB,EACzB,CACED,KAAK,EACLF,SAAS,EACTC,OAAO,EACPE,OAAO,EACPL,OAAK,CACN,CAAC,CAAA;EAEF,oBACEY,KAAA,CAAAC,aAAA,CAACC,2BAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACfC,IAAAA,GAAG,EAAEV,YAAa;AAClBX,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaC,MAAO;AACpBG,IAAAA,KAAK,EAAEQ,UAAW;AAClBV,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,aAAa,EAAEA,aAAAA;GACXO,EAAAA,IAAI,CAENL,EAAAA,QACc,CAAC,CAAA;AAEvB,CAAC;;;;"}

package/dist/cjs/components/AlphaStack/AlphaStack.styled.js

@@ -5,7 +5,7 @@ var FoundationStyledComponent = require('../../foundation/FoundationStyledCompon
 const Container = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "AlphaStackstyled__Container",
   componentId: "sc-kysqdx-0"
-})(["display:flex;flex-direction:var(--bezier-alpha-stack-direction);gap:var(--bezier-alpha-stack-spacing);align-items:var(--bezier-alpha-stack-align);justify-content:var(--bezier-alpha-stack-justify);@supports not(gap:var(--bezier-alpha-stack-spacing)){margin-top:calc(var(--bezier-alpha-stack-spacing) * -1);margin-left:calc(var(--bezier-alpha-stack-spacing) * -1);> *{margin-top:var(--bezier-alpha-stack-spacing);margin-left:var(--bezier-alpha-stack-spacing);}}", ""], ({
+})(["display:flex;flex-direction:var(--b-alpha-stack-direction);gap:var(--b-alpha-stack-spacing);align-items:var(--b-alpha-stack-align);justify-content:var(--b-alpha-stack-justify);@supports not(gap:var(--b-alpha-stack-spacing)){margin-top:calc(var(--b-alpha-stack-spacing) * -1);margin-left:calc(var(--b-alpha-stack-spacing) * -1);> *{margin-top:var(--b-alpha-stack-spacing);margin-left:var(--b-alpha-stack-spacing);}}", ""], ({
   interpolation
 }) => interpolation);
 

package/dist/cjs/components/AlphaStack/AlphaStack.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlphaStack.styled.js","sources":["../../../../src/components/AlphaStack/AlphaStack.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport type { AlphaStackProps } from './AlphaStack.types'\n\ninterface ContainerProps extends\n  Required<Pick<AlphaStackProps, 'interpolation' | 'direction' | 'justify' | 'align' | 'spacing'>> {}\n\nexport const Container = styled.div<ContainerProps>`\n  display: flex;\n  flex-direction: var(--bezier-alpha-stack-direction);\n  gap: var(--bezier-alpha-stack-spacing);\n  align-items: var(--bezier-alpha-stack-align);\n  justify-content: var(--bezier-alpha-stack-justify);\n\n  @supports not(gap: var(--bezier-alpha-stack-spacing)) {\n    margin-top: calc(var(--bezier-alpha-stack-spacing) * -1);\n    margin-left: calc(var(--bezier-alpha-stack-spacing) * -1);\n\n    > * {\n      margin-top: var(--bezier-alpha-stack-spacing);\n      margin-left: var(--bezier-alpha-stack-spacing);\n    }\n  }\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["Container","styled","div","withConfig","displayName","componentId","interpolation"],"mappings":";;;;MAOaA,SAAS,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6cAAA,EAAA,EAAA,CAAA,EAgB/B,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}
+{"version":3,"file":"AlphaStack.styled.js","sources":["../../../../src/components/AlphaStack/AlphaStack.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport type { AlphaStackProps } from './AlphaStack.types'\n\ninterface ContainerProps extends\n  Required<Pick<AlphaStackProps, 'interpolation' | 'direction' | 'justify' | 'align' | 'spacing'>> {}\n\nexport const Container = styled.div<ContainerProps>`\n  display: flex;\n  flex-direction: var(--b-alpha-stack-direction);\n  gap: var(--b-alpha-stack-spacing);\n  align-items: var(--b-alpha-stack-align);\n  justify-content: var(--b-alpha-stack-justify);\n\n  @supports not(gap: var(--b-alpha-stack-spacing)) {\n    margin-top: calc(var(--b-alpha-stack-spacing) * -1);\n    margin-left: calc(var(--b-alpha-stack-spacing) * -1);\n\n    > * {\n      margin-top: var(--b-alpha-stack-spacing);\n      margin-left: var(--b-alpha-stack-spacing);\n    }\n  }\n  ${({ interpolation }) => interpolation}\n`\n"],"names":["Container","styled","div","withConfig","displayName","componentId","interpolation"],"mappings":";;;;MAOaA,SAAS,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gaAAA,EAAA,EAAA,CAAA,EAgB/B,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;"}

package/dist/cjs/components/Avatars/Avatar/Avatar.js

@@ -12,7 +12,6 @@ var Avatar_styled = require('./Avatar.styled.js');
 var Status_types = require('../../Status/Status.types.js');
 var Status = require('../../Status/Status.js');
 
-const cv = style.cssVarName('avatar');
 const shadow = {
   spreadRadius: 2,
   color: 'bg-white-high'
@@ -58,7 +57,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
   }, [status, size, children]);
   const className = index.default(classNameProp, size && `size-${size}`, disabled && 'disabled');
   const avatarStyle = React.useMemo(() => ({
-    [cv('status-gap')]: style.px(size >= Avatar_types.AvatarSize.Size72 ? 4 : -2)
+    '--b-avatar-status-gap': style.px(size >= Avatar_types.AvatarSize.Size72 ? 4 : -2)
   }), [size]);
   return /*#__PURE__*/React.createElement(Avatar_styled.AvatarWrapper, Object.assign({}, rest, {
     "data-testid": AVATAR_WRAPPER_TEST_ID,

package/dist/cjs/components/Avatars/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../../src/components/Avatars/Avatar/Avatar.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n  cssVarName,\n  px,\n} from '~/src/utils/style'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { type BoxShadow } from '~/src/components/AlphaSmoothCornersBox'\nimport { AVATAR_BORDER_RADIUS_PERCENTAGE } from '~/src/components/Avatars/AvatarStyle'\nimport {\n  Status,\n  StatusSize,\n} from '~/src/components/Status'\n\n// NOTE: Don't fix it. When using absolute paths, a module resolve error occurs at the runtime of the library consumer.\n// eslint-disable-next-line no-restricted-imports\nimport defaultAvatarUrl from '../assets/defaultAvatar.svg'\n\nimport type AvatarProps from './Avatar.types'\nimport { AvatarSize } from './Avatar.types'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport * as Styled from './Avatar.styled'\n\nconst cv = cssVarName('avatar')\n\nconst shadow: BoxShadow = {\n  spreadRadius: 2,\n  color: 'bg-white-high',\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-react-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-react-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-react-status-wrapper'\n\nexport const Avatar = forwardRef(function Avatar({\n  avatarUrl = '',\n  fallbackUrl = defaultAvatarUrl,\n  size = AvatarSize.Size24,\n  name,\n  testId = AVATAR_TEST_ID,\n  disabled = false,\n  showBorder = false,\n  smoothCorners = true,\n  status,\n  className: classNameProp,\n  children,\n  ...rest\n}: AvatarProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n\n  const StatusComponent = useMemo(() => {\n    if (\n      (isEmpty(children) && !status)\n      || (children && !React.isValidElement(children))\n    ) {\n      return null\n    }\n\n    const statusSize = size >= AvatarSize.Size90 ? StatusSize.L : StatusSize.M\n\n    const Contents = (() => {\n      if (children) { return children }\n      if (status) {\n        return (\n          <Status\n            type={status}\n            size={statusSize}\n          />\n        )\n      }\n      return null\n    })()\n\n    return Contents && (\n      <Styled.StatusWrapper data-testid={STATUS_WRAPPER_TEST_ID}>\n        { Contents }\n      </Styled.StatusWrapper>\n    )\n  }, [\n    status,\n    size,\n    children,\n  ])\n\n  const className = classNames(\n    classNameProp,\n    size && `size-${size}`,\n    disabled && 'disabled',\n  )\n\n  const avatarStyle = useMemo(() => ({\n    [cv('status-gap')]: px(size >= AvatarSize.Size72 ? 4 : -2),\n  } as React.CSSProperties), [size])\n\n  return (\n    <Styled.AvatarWrapper\n      {...rest}\n      data-testid={AVATAR_WRAPPER_TEST_ID}\n      data-disabled={disabled}\n      className={className}\n    >\n      <Styled.AvatarImage\n        ref={forwardedRef}\n        data-testid={testId}\n        aria-label={name}\n        style={avatarStyle}\n        className={showBorder ? 'bordered' : undefined}\n        disabled={!smoothCorners}\n        borderRadius={`${AVATAR_BORDER_RADIUS_PERCENTAGE}%`}\n        shadow={showBorder ? shadow : undefined}\n        backgroundColor=\"bg-white-normal\"\n        backgroundImage={loadedAvatarUrl}\n      >\n        { StatusComponent }\n      </Styled.AvatarImage>\n    </Styled.AvatarWrapper>\n  )\n})\n"],"names":["cv","cssVarName","shadow","spreadRadius","color","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","AvatarSize","Size24","name","testId","disabled","showBorder","smoothCorners","status","className","classNameProp","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","StatusComponent","useMemo","isEmpty","React","isValidElement","statusSize","Size90","StatusSize","L","M","Contents","createElement","Status","type","Styled","classNames","avatarStyle","px","Size72","Object","assign","ref","style","undefined","borderRadius","AVATAR_BORDER_RADIUS_PERCENTAGE","backgroundColor","backgroundImage"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../../src/components/Avatars/Avatar/Avatar.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport { px } from '~/src/utils/style'\nimport { isEmpty } from '~/src/utils/type'\n\nimport { type BoxShadow } from '~/src/components/AlphaSmoothCornersBox'\nimport { AVATAR_BORDER_RADIUS_PERCENTAGE } from '~/src/components/Avatars/AvatarStyle'\nimport {\n  Status,\n  StatusSize,\n} from '~/src/components/Status'\n\n// NOTE: Don't fix it. When using absolute paths, a module resolve error occurs at the runtime of the library consumer.\n// eslint-disable-next-line no-restricted-imports\nimport defaultAvatarUrl from '../assets/defaultAvatar.svg'\n\nimport type AvatarProps from './Avatar.types'\nimport { AvatarSize } from './Avatar.types'\nimport useProgressiveImage from './useProgressiveImage'\n\nimport * as Styled from './Avatar.styled'\n\nconst shadow: BoxShadow = {\n  spreadRadius: 2,\n  color: 'bg-white-high',\n}\n\nexport const AVATAR_WRAPPER_TEST_ID = 'bezier-react-avatar-wrapper'\nexport const AVATAR_TEST_ID = 'bezier-react-avatar'\nexport const STATUS_WRAPPER_TEST_ID = 'bezier-react-status-wrapper'\n\nexport const Avatar = forwardRef(function Avatar({\n  avatarUrl = '',\n  fallbackUrl = defaultAvatarUrl,\n  size = AvatarSize.Size24,\n  name,\n  testId = AVATAR_TEST_ID,\n  disabled = false,\n  showBorder = false,\n  smoothCorners = true,\n  status,\n  className: classNameProp,\n  children,\n  ...rest\n}: AvatarProps, forwardedRef: React.Ref<HTMLDivElement>) {\n  const loadedAvatarUrl = useProgressiveImage(avatarUrl, fallbackUrl)\n\n  const StatusComponent = useMemo(() => {\n    if (\n      (isEmpty(children) && !status)\n      || (children && !React.isValidElement(children))\n    ) {\n      return null\n    }\n\n    const statusSize = size >= AvatarSize.Size90 ? StatusSize.L : StatusSize.M\n\n    const Contents = (() => {\n      if (children) { return children }\n      if (status) {\n        return (\n          <Status\n            type={status}\n            size={statusSize}\n          />\n        )\n      }\n      return null\n    })()\n\n    return Contents && (\n      <Styled.StatusWrapper data-testid={STATUS_WRAPPER_TEST_ID}>\n        { Contents }\n      </Styled.StatusWrapper>\n    )\n  }, [\n    status,\n    size,\n    children,\n  ])\n\n  const className = classNames(\n    classNameProp,\n    size && `size-${size}`,\n    disabled && 'disabled',\n  )\n\n  const avatarStyle = useMemo(() => ({\n    '--b-avatar-status-gap': px(size >= AvatarSize.Size72 ? 4 : -2),\n  } as React.CSSProperties), [size])\n\n  return (\n    <Styled.AvatarWrapper\n      {...rest}\n      data-testid={AVATAR_WRAPPER_TEST_ID}\n      data-disabled={disabled}\n      className={className}\n    >\n      <Styled.AvatarImage\n        ref={forwardedRef}\n        data-testid={testId}\n        aria-label={name}\n        style={avatarStyle}\n        className={showBorder ? 'bordered' : undefined}\n        disabled={!smoothCorners}\n        borderRadius={`${AVATAR_BORDER_RADIUS_PERCENTAGE}%`}\n        shadow={showBorder ? shadow : undefined}\n        backgroundColor=\"bg-white-normal\"\n        backgroundImage={loadedAvatarUrl}\n      >\n        { StatusComponent }\n      </Styled.AvatarImage>\n    </Styled.AvatarWrapper>\n  )\n})\n"],"names":["shadow","spreadRadius","color","AVATAR_WRAPPER_TEST_ID","AVATAR_TEST_ID","STATUS_WRAPPER_TEST_ID","Avatar","forwardRef","avatarUrl","fallbackUrl","defaultAvatarUrl","size","AvatarSize","Size24","name","testId","disabled","showBorder","smoothCorners","status","className","classNameProp","children","rest","forwardedRef","loadedAvatarUrl","useProgressiveImage","StatusComponent","useMemo","isEmpty","React","isValidElement","statusSize","Size90","StatusSize","L","M","Contents","createElement","Status","type","Styled","classNames","avatarStyle","px","Size72","Object","assign","ref","style","undefined","borderRadius","AVATAR_BORDER_RADIUS_PERCENTAGE","backgroundColor","backgroundImage"],"mappings":"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"}

package/dist/cjs/components/Avatars/Avatar/Avatar.styled.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var DisabledOpacity = require('../../../constants/DisabledOpacity.js');
 var Avatar_types = require('./Avatar.types.js');
 var AlphaSmoothCornersBox = require('../../AlphaSmoothCornersBox/AlphaSmoothCornersBox.js');
 var FoundationStyledComponent = require('../../../foundation/FoundationStyledComponent.js');
@@ -9,17 +8,17 @@ var FoundationStyledComponent = require('../../../foundation/FoundationStyledCom
 const AvatarWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "Avatarstyled__AvatarWrapper",
   componentId: "sc-11qhpri-0"
-})(["all:unset;position:relative;display:block;flex:none;&.disabled{pointer-events:none;opacity:", ";}&.size-", "{width:20px;height:20px;}&.size-", "{width:24px;height:24px;}&.size-", "{width:30px;height:30px;}&.size-", "{width:36px;height:36px;}&.size-", "{width:42px;height:42px;}&.size-", "{width:48px;height:48px;}&.size-", "{width:72px;height:72px;}&.size-", "{width:90px;height:90px;}&.size-", "{width:120px;height:120px;}", ""], DisabledOpacity.default, Avatar_types.AvatarSize.Size20, Avatar_types.AvatarSize.Size24, Avatar_types.AvatarSize.Size30, Avatar_types.AvatarSize.Size36, Avatar_types.AvatarSize.Size42, Avatar_types.AvatarSize.Size48, Avatar_types.AvatarSize.Size72, Avatar_types.AvatarSize.Size90, Avatar_types.AvatarSize.Size120, ({
+})(["all:unset;position:relative;display:block;flex:none;&.disabled{pointer-events:none;opacity:var(--opacity-disabled);}&.size-", "{width:20px;height:20px;}&.size-", "{width:24px;height:24px;}&.size-", "{width:30px;height:30px;}&.size-", "{width:36px;height:36px;}&.size-", "{width:42px;height:42px;}&.size-", "{width:48px;height:48px;}&.size-", "{width:72px;height:72px;}&.size-", "{width:90px;height:90px;}&.size-", "{width:120px;height:120px;}", ""], Avatar_types.AvatarSize.Size20, Avatar_types.AvatarSize.Size24, Avatar_types.AvatarSize.Size30, Avatar_types.AvatarSize.Size36, Avatar_types.AvatarSize.Size42, Avatar_types.AvatarSize.Size48, Avatar_types.AvatarSize.Size72, Avatar_types.AvatarSize.Size90, Avatar_types.AvatarSize.Size120, ({
   interpolation
 }) => interpolation);
 const AvatarImage = /*#__PURE__*/FoundationStyledComponent.styled(AlphaSmoothCornersBox.AlphaSmoothCornersBox).withConfig({
   displayName: "Avatarstyled__AvatarImage",
   componentId: "sc-11qhpri-1"
-})(["--bezier-avatar-computed-status-gap:var(--bezier-avatar-status-gap);position:relative;box-sizing:content-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;outline:none;&.bordered[data-state=\"enabled\"]{--bezier-avatar-computed-status-gap:calc(var(--bezier-avatar-status-gap) + (2 * var(--bezier-alpha-smooth-corners-box-shadow-spread-radius)));}"]);
+})(["--b-avatar-computed-status-gap:var(--b-avatar-status-gap);position:relative;box-sizing:content-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;outline:none;&.bordered[data-state=\"enabled\"]{--b-avatar-computed-status-gap:calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius)));}"]);
 const StatusWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "Avatarstyled__StatusWrapper",
   componentId: "sc-11qhpri-2"
-})(["position:absolute;right:var(--bezier-avatar-computed-status-gap,0);bottom:var(--bezier-avatar-computed-status-gap,0);display:flex;"]);
+})(["position:absolute;right:var(--b-avatar-computed-status-gap,0);bottom:var(--b-avatar-computed-status-gap,0);display:flex;"]);
 
 exports.AvatarImage = AvatarImage;
 exports.AvatarWrapper = AvatarWrapper;

package/dist/cjs/components/Avatars/Avatar/Avatar.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styled.js","sources":["../../../../../src/components/Avatars/Avatar/Avatar.styled.ts"],"sourcesContent":["/* stylelint-disable function-whitespace-after */\nimport { styled } from '~/src/foundation'\n\nimport DisabledOpacity from '~/src/constants/DisabledOpacity'\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\nimport { AlphaSmoothCornersBox } from '~/src/components/AlphaSmoothCornersBox'\n\nimport { AvatarSize } from './Avatar.types'\n\nexport const AvatarWrapper = styled.div<InterpolationProps>`\n  all: unset;\n  position: relative;\n  display: block;\n  flex: none;\n\n  &.disabled {\n    pointer-events: none;\n    opacity: ${DisabledOpacity};\n  }\n\n  &.size-${AvatarSize.Size20} {\n    width: 20px;\n    height: 20px;\n  }\n\n  &.size-${AvatarSize.Size24} {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.size-${AvatarSize.Size30} {\n    width: 30px;\n    height: 30px;\n  }\n\n  &.size-${AvatarSize.Size36} {\n    width: 36px;\n    height: 36px;\n  }\n\n  &.size-${AvatarSize.Size42} {\n    width: 42px;\n    height: 42px;\n  }\n\n  &.size-${AvatarSize.Size48} {\n    width: 48px;\n    height: 48px;\n  }\n\n  &.size-${AvatarSize.Size72} {\n    width: 72px;\n    height: 72px;\n  }\n\n  &.size-${AvatarSize.Size90} {\n    width: 90px;\n    height: 90px;\n  }\n\n  &.size-${AvatarSize.Size120} {\n    width: 120px;\n    height: 120px;\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const AvatarImage = styled(AlphaSmoothCornersBox)`\n  --bezier-avatar-computed-status-gap: var(--bezier-avatar-status-gap);\n\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  outline: none;\n\n  &.bordered[data-state=\"enabled\"] {\n    --bezier-avatar-computed-status-gap: calc(var(--bezier-avatar-status-gap) + (2 * var(--bezier-alpha-smooth-corners-box-shadow-spread-radius)));\n  }\n`\n\nexport const StatusWrapper = styled.div`\n  position: absolute;\n  right: var(--bezier-avatar-computed-status-gap, 0);\n  bottom: var(--bezier-avatar-computed-status-gap, 0);\n  display: flex;\n`\n"],"names":["AvatarWrapper","styled","div","withConfig","displayName","componentId","DisabledOpacity","AvatarSize","Size20","Size24","Size30","Size36","Size42","Size48","Size72","Size90","Size120","interpolation","AvatarImage","AlphaSmoothCornersBox","StatusWrapper"],"mappings":";;;;;;;AAAA;MAUaA,aAAa,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6FAAA,EAAA,WAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,6BAAA,EAAA,EAAA,CAAA,EAQxBC,uBAAe,EAGnBC,uBAAU,CAACC,MAAM,EAKjBD,uBAAU,CAACE,MAAM,EAKjBF,uBAAU,CAACG,MAAM,EAKjBH,uBAAU,CAACI,MAAM,EAKjBJ,uBAAU,CAACK,MAAM,EAKjBL,uBAAU,CAACM,MAAM,EAKjBN,uBAAU,CAACO,MAAM,EAKjBP,uBAAU,CAACQ,MAAM,EAKjBR,uBAAU,CAACS,OAAO,EAKzB,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;AAEM,MAAMC,WAAW,gBAAGjB,gCAAM,CAACkB,2CAAqB,CAAC,CAAAhB,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAgBvD,CAAA,CAAA,CAAA,0YAAA,CAAA,EAAA;MAEYe,aAAa,gBAAGnB,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAKtC,CAAA,CAAA,CAAA,oIAAA,CAAA;;;;;;"}
+{"version":3,"file":"Avatar.styled.js","sources":["../../../../../src/components/Avatars/Avatar/Avatar.styled.ts"],"sourcesContent":["/* stylelint-disable function-whitespace-after */\nimport { styled } from '~/src/foundation'\n\nimport type { InterpolationProps } from '~/src/types/Foundation'\n\nimport { AlphaSmoothCornersBox } from '~/src/components/AlphaSmoothCornersBox'\n\nimport { AvatarSize } from './Avatar.types'\n\nexport const AvatarWrapper = styled.div<InterpolationProps>`\n  all: unset;\n  position: relative;\n  display: block;\n  flex: none;\n\n  &.disabled {\n    pointer-events: none;\n    opacity: var(--opacity-disabled);\n  }\n\n  &.size-${AvatarSize.Size20} {\n    width: 20px;\n    height: 20px;\n  }\n\n  &.size-${AvatarSize.Size24} {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.size-${AvatarSize.Size30} {\n    width: 30px;\n    height: 30px;\n  }\n\n  &.size-${AvatarSize.Size36} {\n    width: 36px;\n    height: 36px;\n  }\n\n  &.size-${AvatarSize.Size42} {\n    width: 42px;\n    height: 42px;\n  }\n\n  &.size-${AvatarSize.Size48} {\n    width: 48px;\n    height: 48px;\n  }\n\n  &.size-${AvatarSize.Size72} {\n    width: 72px;\n    height: 72px;\n  }\n\n  &.size-${AvatarSize.Size90} {\n    width: 90px;\n    height: 90px;\n  }\n\n  &.size-${AvatarSize.Size120} {\n    width: 120px;\n    height: 120px;\n  }\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const AvatarImage = styled(AlphaSmoothCornersBox)`\n  --b-avatar-computed-status-gap: var(--b-avatar-status-gap);\n\n  position: relative;\n  box-sizing: content-box;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  outline: none;\n\n  &.bordered[data-state=\"enabled\"] {\n    --b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius)));\n  }\n`\n\nexport const StatusWrapper = styled.div`\n  position: absolute;\n  right: var(--b-avatar-computed-status-gap, 0);\n  bottom: var(--b-avatar-computed-status-gap, 0);\n  display: flex;\n`\n"],"names":["AvatarWrapper","styled","div","withConfig","displayName","componentId","AvatarSize","Size20","Size24","Size30","Size36","Size42","Size48","Size72","Size90","Size120","interpolation","AvatarImage","AlphaSmoothCornersBox","StatusWrapper"],"mappings":";;;;;;AAAA;MASaA,aAAa,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6HAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,6BAAA,EAAA,EAAA,CAAA,EAW5BC,uBAAU,CAACC,MAAM,EAKjBD,uBAAU,CAACE,MAAM,EAKjBF,uBAAU,CAACG,MAAM,EAKjBH,uBAAU,CAACI,MAAM,EAKjBJ,uBAAU,CAACK,MAAM,EAKjBL,uBAAU,CAACM,MAAM,EAKjBN,uBAAU,CAACO,MAAM,EAKjBP,uBAAU,CAACQ,MAAM,EAKjBR,uBAAU,CAACS,OAAO,EAKzB,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;AAEM,MAAMC,WAAW,gBAAGhB,gCAAM,CAACiB,2CAAqB,CAAC,CAAAf,UAAA,CAAA;EAAAC,WAAA,EAAA,2BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAgBvD,CAAA,CAAA,CAAA,iXAAA,CAAA,EAAA;MAEYc,aAAa,gBAAGlB,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAKtC,CAAA,CAAA,CAAA,0HAAA,CAAA;;;;;;"}

package/dist/cjs/components/Avatars/AvatarGroup/AvatarGroup.js

@@ -13,7 +13,6 @@ var Icon = require('../../Icon/Icon.js');
 var Icon_types = require('../../Icon/Icon.types.js');
 var Typography = require('../../../foundation/Typography.js');
 
-const cv = style.cssVarName('avatar-group');
 const MAX_AVATAR_LIST_COUNT = 99;
 const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-react-avatar-group-ellipsis-icon';
 function getRestAvatarListCountText(count, max) {
@@ -121,8 +120,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
           key: "ellipsis"
         }, AvatarElement, /*#__PURE__*/React.createElement(AvatarGroup_styled.AvatarEllipsisCountWrapper, {
           style: {
-            [cv('ellipsis-mr')]: style.px(getProperEllipsisCountMarginRight(size)),
-            [cv('ellipsis-ml')]: style.px(Math.max(spacing, AvatarStyle.AVATAR_GROUP_DEFAULT_SPACING))
+            '--b-avatar-group-ellipsis-mr': style.px(getProperEllipsisCountMarginRight(size)),
+            '--b-avatar-group-ellipsis-ml': style.px(Math.max(spacing, AvatarStyle.AVATAR_GROUP_DEFAULT_SPACING))
           },
           onMouseEnter: onMouseEnterEllipsis,
           onMouseLeave: onMouseLeaveEllipsis
@@ -141,8 +140,8 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup({
     className: className,
     style: {
       ...style$1,
-      [cv('spacing')]: style.px(spacing),
-      [cv('size')]: style.px(size)
+      '--b-avatar-group-spacing': style.px(spacing),
+      '--b-avatar-group-size': style.px(size)
     }
   }, rest), AvatarListComponent);
 });

package/dist/cjs/components/Avatars/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../../../src/components/Avatars/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\n\nimport { Typography } from '~/src/foundation'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { noop } from '~/src/utils/function'\nimport {\n  cssVarName,\n  px,\n} from '~/src/utils/style'\n\nimport {\n  type AvatarProps,\n  AvatarSize,\n} from '~/src/components/Avatars/Avatar'\nimport {\n  AVATAR_BORDER_RADIUS_PERCENTAGE,\n  AVATAR_GROUP_DEFAULT_SPACING,\n} from '~/src/components/Avatars/AvatarStyle'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\n\nimport {\n  AvatarGroupEllipsisType,\n  type AvatarGroupProps,\n} from './AvatarGroup.types'\n\nimport * as Styled from './AvatarGroup.styled'\n\nconst cv = cssVarName('avatar-group')\n\nconst MAX_AVATAR_LIST_COUNT = 99\n\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-react-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n  const restCount = count - max\n  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(avatarSize: AvatarSize) {\n  return {\n    [AvatarSize.Size20]: IconSize.XXS,\n    [AvatarSize.Size24]: IconSize.XS,\n    [AvatarSize.Size30]: IconSize.S,\n    [AvatarSize.Size36]: IconSize.Normal,\n    [AvatarSize.Size42]: IconSize.Normal,\n    [AvatarSize.Size48]: IconSize.L,\n    [AvatarSize.Size90]: IconSize.L,\n    [AvatarSize.Size120]: IconSize.L,\n  }[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(avatarSize: AvatarSize) {\n  return {\n    [AvatarSize.Size20]: Typography.Size12,\n    [AvatarSize.Size24]: Typography.Size13,\n    [AvatarSize.Size30]: Typography.Size15,\n    [AvatarSize.Size36]: Typography.Size16,\n    [AvatarSize.Size42]: Typography.Size18,\n    [AvatarSize.Size48]: Typography.Size24,\n    [AvatarSize.Size90]: Typography.Size24,\n    [AvatarSize.Size120]: Typography.Size24,\n  }[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperEllipsisCountMarginRight(avatarSize: AvatarSize) {\n  return {\n    [AvatarSize.Size20]: 4,\n    [AvatarSize.Size24]: 5,\n    [AvatarSize.Size30]: 6,\n    [AvatarSize.Size36]: 6,\n    [AvatarSize.Size42]: 6,\n    [AvatarSize.Size48]: 6,\n    [AvatarSize.Size90]: 6,\n    [AvatarSize.Size120]: 6,\n  }[avatarSize]\n}\n\nexport const AvatarGroup = forwardRef(function AvatarGroup({\n  max,\n  size = AvatarSize.Size24,\n  spacing = AVATAR_GROUP_DEFAULT_SPACING,\n  ellipsisType = AvatarGroupEllipsisType.Icon,\n  onMouseEnterEllipsis = noop,\n  onMouseLeaveEllipsis = noop,\n  ellipsisInterpolation,\n  style,\n  className,\n  children,\n  ...rest\n}: AvatarGroupProps,\nforwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const renderAvatarElement = useCallback((\n    avatar: React.ReactElement<AvatarProps>,\n    avatarListCount: number,\n  ) => {\n    const key = avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n    const shouldShowBorder = avatarListCount > 1 && spacing < 0\n    const showBorder = avatar.props.showBorder || shouldShowBorder\n    return React.cloneElement(avatar, { key, size, showBorder })\n  }, [\n    size,\n    spacing,\n  ])\n\n  const avatarListCount = useMemo(() => (\n    React.Children.count(children)\n  ), [children])\n\n  const AvatarListComponent = useMemo(() => {\n    if (avatarListCount <= max) {\n      return React.Children.map(children, (avatar) => (\n        React.isValidElement<AvatarProps>(avatar) && renderAvatarElement(avatar, avatarListCount)\n      ))\n    }\n\n    const sliceEndIndex = max - avatarListCount\n    const slicedAvatarList = React.Children.toArray(children).slice(0, sliceEndIndex)\n\n    return slicedAvatarList.map((avatar, index, arr) => {\n      if (!React.isValidElement<AvatarProps>(avatar)) { return null }\n\n      const AvatarElement = renderAvatarElement(avatar, slicedAvatarList.length)\n\n      if (!isLastIndex(arr, index)) {\n        return AvatarElement\n      }\n\n      if (ellipsisType === AvatarGroupEllipsisType.Icon) {\n        return (\n          <Styled.AvatarEllipsisIconWrapper\n            data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n            key=\"ellipsis\"\n            interpolation={ellipsisInterpolation}\n            onMouseEnter={onMouseEnterEllipsis}\n            onMouseLeave={onMouseLeaveEllipsis}\n          >\n            <Styled.AvatarEllipsisIcon\n              borderRadius={`${AVATAR_BORDER_RADIUS_PERCENTAGE}%`}\n              backgroundColor=\"bgtxt-absolute-black-lightest\"\n            >\n              <Icon\n                source={MoreIcon}\n                size={getProperIconSize(size)}\n                color=\"bgtxt-absolute-white-dark\"\n              />\n            </Styled.AvatarEllipsisIcon>\n            { AvatarElement }\n          </Styled.AvatarEllipsisIconWrapper>\n        )\n      }\n\n      if (ellipsisType === AvatarGroupEllipsisType.Count) {\n        return (\n          <React.Fragment key=\"ellipsis\">\n            { AvatarElement }\n            <Styled.AvatarEllipsisCountWrapper\n              style={{\n                [cv('ellipsis-mr')]: px(getProperEllipsisCountMarginRight(size)),\n                [cv('ellipsis-ml')]: px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)),\n              } as React.CSSProperties}\n              onMouseEnter={onMouseEnterEllipsis}\n              onMouseLeave={onMouseLeaveEllipsis}\n            >\n              <Styled.AvatarEllipsisCount\n                forwardedAs=\"span\"\n                interpolation={ellipsisInterpolation}\n                typo={getProperTypoSize(size)}\n              >\n                { getRestAvatarListCountText(avatarListCount, max) }\n              </Styled.AvatarEllipsisCount>\n            </Styled.AvatarEllipsisCountWrapper>\n          </React.Fragment>\n        )\n      }\n\n      return null\n    })\n  }, [\n    max,\n    size,\n    children,\n    spacing,\n    ellipsisType,\n    ellipsisInterpolation,\n    avatarListCount,\n    renderAvatarElement,\n    onMouseEnterEllipsis,\n    onMouseLeaveEllipsis,\n  ])\n\n  return (\n    <Styled.AvatarGroup\n      role=\"group\"\n      ref={forwardedRef}\n      className={className}\n      style={{\n        ...style,\n        [cv('spacing')]: px(spacing),\n        [cv('size')]: px(size),\n      } as React.CSSProperties}\n      {...rest}\n    >\n      { AvatarListComponent }\n    </Styled.AvatarGroup>\n  )\n})\n"],"names":["cv","cssVarName","MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","avatarSize","AvatarSize","Size20","IconSize","XXS","Size24","XS","Size30","S","Size36","Normal","Size42","Size48","L","Size90","Size120","getProperTypoSize","Typography","Size12","Size13","Size15","Size16","Size18","getProperEllipsisCountMarginRight","AvatarGroup","forwardRef","size","spacing","AVATAR_GROUP_DEFAULT_SPACING","ellipsisType","AvatarGroupEllipsisType","Icon","onMouseEnterEllipsis","noop","onMouseLeaveEllipsis","ellipsisInterpolation","style","className","children","rest","forwardedRef","renderAvatarElement","useCallback","avatar","avatarListCount","key","props","name","avatarUrl","shouldShowBorder","showBorder","React","cloneElement","useMemo","Children","AvatarListComponent","map","isValidElement","sliceEndIndex","slicedAvatarList","toArray","slice","index","arr","AvatarElement","length","isLastIndex","createElement","Styled","interpolation","onMouseEnter","onMouseLeave","borderRadius","AVATAR_BORDER_RADIUS_PERCENTAGE","backgroundColor","source","MoreIcon","color","Count","Fragment","px","Math","forwardedAs","typo","Object","assign","role","ref"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../../src/components/Avatars/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react'\n\nimport { MoreIcon } from '@channel.io/bezier-icons'\n\nimport { Typography } from '~/src/foundation'\n\nimport { isLastIndex } from '~/src/utils/array'\nimport { noop } from '~/src/utils/function'\nimport { px } from '~/src/utils/style'\n\nimport {\n  type AvatarProps,\n  AvatarSize,\n} from '~/src/components/Avatars/Avatar'\nimport {\n  AVATAR_BORDER_RADIUS_PERCENTAGE,\n  AVATAR_GROUP_DEFAULT_SPACING,\n} from '~/src/components/Avatars/AvatarStyle'\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\n\nimport {\n  AvatarGroupEllipsisType,\n  type AvatarGroupProps,\n} from './AvatarGroup.types'\n\nimport * as Styled from './AvatarGroup.styled'\n\nconst MAX_AVATAR_LIST_COUNT = 99\n\nexport const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-react-avatar-group-ellipsis-icon'\n\nfunction getRestAvatarListCountText(count: number, max: number) {\n  const restCount = count - max\n  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`\n}\n\n// TODO: Not specified\nfunction getProperIconSize(avatarSize: AvatarSize) {\n  return {\n    [AvatarSize.Size20]: IconSize.XXS,\n    [AvatarSize.Size24]: IconSize.XS,\n    [AvatarSize.Size30]: IconSize.S,\n    [AvatarSize.Size36]: IconSize.Normal,\n    [AvatarSize.Size42]: IconSize.Normal,\n    [AvatarSize.Size48]: IconSize.L,\n    [AvatarSize.Size90]: IconSize.L,\n    [AvatarSize.Size120]: IconSize.L,\n  }[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperTypoSize(avatarSize: AvatarSize) {\n  return {\n    [AvatarSize.Size20]: Typography.Size12,\n    [AvatarSize.Size24]: Typography.Size13,\n    [AvatarSize.Size30]: Typography.Size15,\n    [AvatarSize.Size36]: Typography.Size16,\n    [AvatarSize.Size42]: Typography.Size18,\n    [AvatarSize.Size48]: Typography.Size24,\n    [AvatarSize.Size90]: Typography.Size24,\n    [AvatarSize.Size120]: Typography.Size24,\n  }[avatarSize]\n}\n\n// TODO: Not specified\nfunction getProperEllipsisCountMarginRight(avatarSize: AvatarSize) {\n  return {\n    [AvatarSize.Size20]: 4,\n    [AvatarSize.Size24]: 5,\n    [AvatarSize.Size30]: 6,\n    [AvatarSize.Size36]: 6,\n    [AvatarSize.Size42]: 6,\n    [AvatarSize.Size48]: 6,\n    [AvatarSize.Size90]: 6,\n    [AvatarSize.Size120]: 6,\n  }[avatarSize]\n}\n\nexport const AvatarGroup = forwardRef(function AvatarGroup({\n  max,\n  size = AvatarSize.Size24,\n  spacing = AVATAR_GROUP_DEFAULT_SPACING,\n  ellipsisType = AvatarGroupEllipsisType.Icon,\n  onMouseEnterEllipsis = noop,\n  onMouseLeaveEllipsis = noop,\n  ellipsisInterpolation,\n  style,\n  className,\n  children,\n  ...rest\n}: AvatarGroupProps,\nforwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const renderAvatarElement = useCallback((\n    avatar: React.ReactElement<AvatarProps>,\n    avatarListCount: number,\n  ) => {\n    const key = avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`\n    const shouldShowBorder = avatarListCount > 1 && spacing < 0\n    const showBorder = avatar.props.showBorder || shouldShowBorder\n    return React.cloneElement(avatar, { key, size, showBorder })\n  }, [\n    size,\n    spacing,\n  ])\n\n  const avatarListCount = useMemo(() => (\n    React.Children.count(children)\n  ), [children])\n\n  const AvatarListComponent = useMemo(() => {\n    if (avatarListCount <= max) {\n      return React.Children.map(children, (avatar) => (\n        React.isValidElement<AvatarProps>(avatar) && renderAvatarElement(avatar, avatarListCount)\n      ))\n    }\n\n    const sliceEndIndex = max - avatarListCount\n    const slicedAvatarList = React.Children.toArray(children).slice(0, sliceEndIndex)\n\n    return slicedAvatarList.map((avatar, index, arr) => {\n      if (!React.isValidElement<AvatarProps>(avatar)) { return null }\n\n      const AvatarElement = renderAvatarElement(avatar, slicedAvatarList.length)\n\n      if (!isLastIndex(arr, index)) {\n        return AvatarElement\n      }\n\n      if (ellipsisType === AvatarGroupEllipsisType.Icon) {\n        return (\n          <Styled.AvatarEllipsisIconWrapper\n            data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}\n            key=\"ellipsis\"\n            interpolation={ellipsisInterpolation}\n            onMouseEnter={onMouseEnterEllipsis}\n            onMouseLeave={onMouseLeaveEllipsis}\n          >\n            <Styled.AvatarEllipsisIcon\n              borderRadius={`${AVATAR_BORDER_RADIUS_PERCENTAGE}%`}\n              backgroundColor=\"bgtxt-absolute-black-lightest\"\n            >\n              <Icon\n                source={MoreIcon}\n                size={getProperIconSize(size)}\n                color=\"bgtxt-absolute-white-dark\"\n              />\n            </Styled.AvatarEllipsisIcon>\n            { AvatarElement }\n          </Styled.AvatarEllipsisIconWrapper>\n        )\n      }\n\n      if (ellipsisType === AvatarGroupEllipsisType.Count) {\n        return (\n          <React.Fragment key=\"ellipsis\">\n            { AvatarElement }\n            <Styled.AvatarEllipsisCountWrapper\n              style={{\n                '--b-avatar-group-ellipsis-mr': px(getProperEllipsisCountMarginRight(size)),\n                '--b-avatar-group-ellipsis-ml': px(Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)),\n              } as React.CSSProperties}\n              onMouseEnter={onMouseEnterEllipsis}\n              onMouseLeave={onMouseLeaveEllipsis}\n            >\n              <Styled.AvatarEllipsisCount\n                forwardedAs=\"span\"\n                interpolation={ellipsisInterpolation}\n                typo={getProperTypoSize(size)}\n              >\n                { getRestAvatarListCountText(avatarListCount, max) }\n              </Styled.AvatarEllipsisCount>\n            </Styled.AvatarEllipsisCountWrapper>\n          </React.Fragment>\n        )\n      }\n\n      return null\n    })\n  }, [\n    max,\n    size,\n    children,\n    spacing,\n    ellipsisType,\n    ellipsisInterpolation,\n    avatarListCount,\n    renderAvatarElement,\n    onMouseEnterEllipsis,\n    onMouseLeaveEllipsis,\n  ])\n\n  return (\n    <Styled.AvatarGroup\n      role=\"group\"\n      ref={forwardedRef}\n      className={className}\n      style={{\n        ...style,\n        '--b-avatar-group-spacing': px(spacing),\n        '--b-avatar-group-size': px(size),\n      } as React.CSSProperties}\n      {...rest}\n    >\n      { AvatarListComponent }\n    </Styled.AvatarGroup>\n  )\n})\n"],"names":["MAX_AVATAR_LIST_COUNT","AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID","getRestAvatarListCountText","count","max","restCount","getProperIconSize","avatarSize","AvatarSize","Size20","IconSize","XXS","Size24","XS","Size30","S","Size36","Normal","Size42","Size48","L","Size90","Size120","getProperTypoSize","Typography","Size12","Size13","Size15","Size16","Size18","getProperEllipsisCountMarginRight","AvatarGroup","forwardRef","size","spacing","AVATAR_GROUP_DEFAULT_SPACING","ellipsisType","AvatarGroupEllipsisType","Icon","onMouseEnterEllipsis","noop","onMouseLeaveEllipsis","ellipsisInterpolation","style","className","children","rest","forwardedRef","renderAvatarElement","useCallback","avatar","avatarListCount","key","props","name","avatarUrl","shouldShowBorder","showBorder","React","cloneElement","useMemo","Children","AvatarListComponent","map","isValidElement","sliceEndIndex","slicedAvatarList","toArray","slice","index","arr","AvatarElement","length","isLastIndex","createElement","Styled","interpolation","onMouseEnter","onMouseLeave","borderRadius","AVATAR_BORDER_RADIUS_PERCENTAGE","backgroundColor","source","MoreIcon","color","Count","Fragment","px","Math","forwardedAs","typo","Object","assign","role","ref"],"mappings":"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"}

package/dist/cjs/components/Avatars/AvatarGroup/AvatarGroup.styled.js

@@ -8,13 +8,13 @@ var FoundationStyledComponent = require('../../../foundation/FoundationStyledCom
 const AvatarEllipsisCount = /*#__PURE__*/FoundationStyledComponent.styled(Text.default).withConfig({
   displayName: "AvatarGroupstyled__AvatarEllipsisCount",
   componentId: "sc-khfa1l-0"
-})(["position:relative;display:flex;align-items:center;height:var(--bezier-avatar-group-size);color:var(--txt-black-dark);", ""], ({
+})(["position:relative;display:flex;align-items:center;height:var(--b-avatar-group-size);color:var(--txt-black-dark);", ""], ({
   interpolation
 }) => interpolation);
 const AvatarGroup = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "AvatarGroupstyled__AvatarGroup",
   componentId: "sc-khfa1l-1"
-})(["position:relative;z-index:", ";display:flex;& > * + *{margin-left:var(--bezier-avatar-group-spacing);}"], ZIndex.ZIndex.Base);
+})(["position:relative;z-index:", ";display:flex;& > * + *{margin-left:var(--b-avatar-group-spacing);}"], ZIndex.ZIndex.Base);
 const AvatarEllipsisIconWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "AvatarGroupstyled__AvatarEllipsisIconWrapper",
   componentId: "sc-khfa1l-2"
@@ -24,7 +24,7 @@ const AvatarEllipsisIconWrapper = /*#__PURE__*/FoundationStyledComponent.styled.
 const AvatarEllipsisCountWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
   displayName: "AvatarGroupstyled__AvatarEllipsisCountWrapper",
   componentId: "sc-khfa1l-3"
-})(["padding-right:var(--bezier-avatar-group-ellipsis-mr);&&{margin-left:var(--bezier-avatar-group-ellipsis-ml);}"]);
+})(["padding-right:var(--b-avatar-group-ellipsis-mr);&&{margin-left:var(--b-avatar-group-ellipsis-ml);}"]);
 const AvatarEllipsisIcon = /*#__PURE__*/FoundationStyledComponent.styled(AlphaSmoothCornersBox.AlphaSmoothCornersBox).withConfig({
   displayName: "AvatarGroupstyled__AvatarEllipsisIcon",
   componentId: "sc-khfa1l-4"

package/dist/cjs/components/Avatars/AvatarGroup/AvatarGroup.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.styled.js","sources":["../../../../../src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport { AlphaSmoothCornersBox } from '~/src/components/AlphaSmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nexport const AvatarEllipsisCount = styled(Text)`\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: var(--bezier-avatar-group-size);\n  color: var(--txt-black-dark);\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const AvatarGroup = styled.div`\n  position: relative;\n  z-index: ${ZIndex.Base};\n  display: flex;\n\n  & > * + * {\n    margin-left: var(--bezier-avatar-group-spacing);\n  }\n`\n\nexport const AvatarEllipsisIconWrapper = styled.div<InterpolationProps>`\n  position: relative;\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const AvatarEllipsisCountWrapper = styled.div`\n  padding-right: var(--bezier-avatar-group-ellipsis-mr);\n\n  && {\n    margin-left: var(--bezier-avatar-group-ellipsis-ml);\n  }\n`\n\nexport const AvatarEllipsisIcon = styled(AlphaSmoothCornersBox)`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: ${ZIndex.Float};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  outline: none;\n`\n"],"names":["AvatarEllipsisCount","styled","Text","withConfig","displayName","componentId","interpolation","AvatarGroup","div","ZIndex","Base","AvatarEllipsisIconWrapper","AvatarEllipsisCountWrapper","AvatarEllipsisIcon","AlphaSmoothCornersBox","Float"],"mappings":";;;;;;;AAQO,MAAMA,mBAAmB,gBAAGC,gCAAM,CAACC,YAAI,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uHAAA,EAAA,EAAA,CAAA,EAO3C,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,WAAW,gBAAGN,gCAAM,CAACO,GAAG,CAAAL,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAExBI,CAAAA,CAAAA,CAAAA,4BAAAA,EAAAA,0EAAAA,CAAAA,EAAAA,aAAM,CAACC,IAAI,EAMvB;MAEYC,yBAAyB,gBAAGV,gCAAM,CAACO,GAAG,CAAAL,UAAA,CAAA;EAAAC,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,EAAA,CAAA,EAG/C,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYM,0BAA0B,gBAAGX,gCAAM,CAACO,GAAG,CAAAL,UAAA,CAAA;EAAAC,WAAA,EAAA,+CAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAMnD,CAAA,CAAA,CAAA,8GAAA,CAAA,EAAA;AAEM,MAAMQ,kBAAkB,gBAAGZ,gCAAM,CAACa,2CAAqB,CAAC,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,uCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAIlDI,CAAAA,CAAAA,CAAAA,0CAAAA,EAAAA,8FAAAA,CAAAA,EAAAA,aAAM,CAACM,KAAK;;;;;;;;"}
+{"version":3,"file":"AvatarGroup.styled.js","sources":["../../../../../src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { type InterpolationProps } from '~/src/types/Foundation'\n\nimport { AlphaSmoothCornersBox } from '~/src/components/AlphaSmoothCornersBox'\nimport { Text } from '~/src/components/Text'\n\nexport const AvatarEllipsisCount = styled(Text)`\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: var(--b-avatar-group-size);\n  color: var(--txt-black-dark);\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const AvatarGroup = styled.div`\n  position: relative;\n  z-index: ${ZIndex.Base};\n  display: flex;\n\n  & > * + * {\n    margin-left: var(--b-avatar-group-spacing);\n  }\n`\n\nexport const AvatarEllipsisIconWrapper = styled.div<InterpolationProps>`\n  position: relative;\n\n  ${({ interpolation }) => interpolation}\n`\n\nexport const AvatarEllipsisCountWrapper = styled.div`\n  padding-right: var(--b-avatar-group-ellipsis-mr);\n\n  && {\n    margin-left: var(--b-avatar-group-ellipsis-ml);\n  }\n`\n\nexport const AvatarEllipsisIcon = styled(AlphaSmoothCornersBox)`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: ${ZIndex.Float};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  outline: none;\n`\n"],"names":["AvatarEllipsisCount","styled","Text","withConfig","displayName","componentId","interpolation","AvatarGroup","div","ZIndex","Base","AvatarEllipsisIconWrapper","AvatarEllipsisCountWrapper","AvatarEllipsisIcon","AlphaSmoothCornersBox","Float"],"mappings":";;;;;;;AAQO,MAAMA,mBAAmB,gBAAGC,gCAAM,CAACC,YAAI,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kHAAA,EAAA,EAAA,CAAA,EAO3C,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYC,WAAW,gBAAGN,gCAAM,CAACO,GAAG,CAAAL,UAAA,CAAA;EAAAC,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAExBI,CAAAA,CAAAA,CAAAA,4BAAAA,EAAAA,qEAAAA,CAAAA,EAAAA,aAAM,CAACC,IAAI,EAMvB;MAEYC,yBAAyB,gBAAGV,gCAAM,CAACO,GAAG,CAAAL,UAAA,CAAA;EAAAC,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,EAAA,EAAA,CAAA,EAG/C,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAEYM,0BAA0B,gBAAGX,gCAAM,CAACO,GAAG,CAAAL,UAAA,CAAA;EAAAC,WAAA,EAAA,+CAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAMnD,CAAA,CAAA,CAAA,oGAAA,CAAA,EAAA;AAEM,MAAMQ,kBAAkB,gBAAGZ,gCAAM,CAACa,2CAAqB,CAAC,CAAAX,UAAA,CAAA;EAAAC,WAAA,EAAA,uCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAIlDI,CAAAA,CAAAA,CAAAA,0CAAAA,EAAAA,8FAAAA,CAAAA,EAAAA,aAAM,CAACM,KAAK;;;;;;;;"}

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.styled.js

@@ -29,17 +29,17 @@ const focusStyles = {
 
     /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */
     ${Avatar} > div {
-      --bezier-alpha-smooth-corners-box-background-image: none !important;
+      --b-alpha-smooth-corners-box-background-image: none !important;
     }
   `,
   unchecked: FoundationStyledComponent.css`
     ${Avatar} > div {
-      --bezier-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important;
+      --b-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important;
     }
   `,
   checked: FoundationStyledComponent.css`
     ${Avatar} > div {
-      --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important;
+      --b-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important;
     }
     /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */
   `
@@ -52,7 +52,7 @@ const focusStyles = {
 const CheckboxPrimitiveRoot = /*#__PURE__*/FoundationStyledComponent.styled(index.Root).withConfig({
   displayName: "CheckableAvatarstyled__CheckboxPrimitiveRoot",
   componentId: "sc-1t8b49w-2"
-})(["all:unset;position:relative;z-index:", ";cursor:pointer;outline:none;&[data-disabled]{cursor:not-allowed;}&:not([data-state='unchecked']){", "{visibility:visible;}", " > div{--bezier-alpha-smooth-corners-box-background-image:none !important;--bezier-alpha-smooth-corners-box-background-color:var(--bgtxt-green-normal) !important;}}&:not([data-disabled]){", " &:focus-visible{", "}&[data-state='unchecked']{", " &:focus-visible{", "}}&:not([data-state='unchecked']){", " &:focus-visible{", "}}}"], ZIndex.ZIndex.Base, CheckIcon, Avatar, style.touchableHover(focusStyles.common), focusStyles.common, style.touchableHover(focusStyles.unchecked), focusStyles.unchecked, style.touchableHover(focusStyles.checked), focusStyles.checked);
+})(["all:unset;position:relative;z-index:", ";cursor:pointer;outline:none;&[data-disabled]{cursor:not-allowed;}&:not([data-state='unchecked']){", "{visibility:visible;}", " > div{--b-alpha-smooth-corners-box-background-image:none !important;--b-alpha-smooth-corners-box-background-color:var(--bgtxt-green-normal) !important;}}&:not([data-disabled]){", " &:focus-visible{", "}&[data-state='unchecked']{", " &:focus-visible{", "}}&:not([data-state='unchecked']){", " &:focus-visible{", "}}}"], ZIndex.ZIndex.Base, CheckIcon, Avatar, style.touchableHover(focusStyles.common), focusStyles.common, style.touchableHover(focusStyles.unchecked), focusStyles.unchecked, style.touchableHover(focusStyles.checked), focusStyles.checked);
 
 exports.Avatar = Avatar;
 exports.CheckIcon = CheckIcon;

package/dist/cjs/components/Avatars/CheckableAvatar/CheckableAvatar.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckableAvatar.styled.js","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts"],"sourcesContent":["import { CheckIcon as CheckIconSource } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport {\n  absoluteCenter,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { touchableHover } from '~/src/utils/style'\n\nimport {\n  AvatarSize,\n  Avatar as BaseAvatar,\n} from '~/src/components/Avatars/Avatar'\nimport { Icon } from '~/src/components/Icon'\n\nexport const Avatar = styled(BaseAvatar)``\n\nexport const CheckIcon = styled(Icon).attrs({\n  source: CheckIconSource,\n  color: 'bgtxt-absolute-white-normal',\n})`\n  position: absolute;\n  z-index: ${ZIndex.Float};\n  visibility: hidden;\n\n  ${absoluteCenter()}\n\n  &.size-${AvatarSize.Size20} {\n    width: 14px;\n    height: 14px;\n  }\n\n  &.size-${AvatarSize.Size24} {\n    width: 16px;\n    height: 16px;\n  }\n\n  &.size-${AvatarSize.Size30} {\n    width: 20px;\n    height: 20px;\n  }\n\n  &.size-${AvatarSize.Size36} {\n    width: 22px;\n    height: 22px;\n  }\n\n  &.size-${AvatarSize.Size42} {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.size-${AvatarSize.Size48} {\n    width: 28px;\n    height: 28px;\n  }\n\n  &.size-${AvatarSize.Size72} {\n    width: 42px;\n    height: 42px;\n  }\n\n  &.size-${AvatarSize.Size90} {\n    width: 52px;\n    height: 52px;\n  }\n\n  &.size-${AvatarSize.Size120} {\n    width: 68px;\n    height: 68px;\n  }\n`\n\nconst focusStyles = {\n  common: css`\n    ${CheckIcon} {\n      visibility: visible;\n    }\n\n    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-image: none !important;\n    }\n  `,\n  unchecked: css`\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important;\n    }\n  `,\n  checked: css`\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important;\n    }\n    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  `,\n}\n\n/**\n * NOTE: Using the `!important` keyword to override a local CSS variable of `AlphaSmoothCorners`.\n * Improvements are needed to the styling when using the `AlphaSmoothCorners` component.\n */\nexport const CheckboxPrimitiveRoot = styled(CheckboxPrimitive.Root)`\n  all: unset;\n  position: relative;\n  z-index: ${ZIndex.Base};\n  cursor: pointer;\n  outline: none;\n\n  &[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  &:not([data-state='unchecked']) {\n    ${CheckIcon} {\n      visibility: visible;\n    }\n\n    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n    ${Avatar} > div {\n      --bezier-alpha-smooth-corners-box-background-image: none !important;\n      --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-normal) !important;\n    }\n    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  }\n\n  &:not([data-disabled]) {\n    ${touchableHover(focusStyles.common)}\n\n    &:focus-visible {\n      ${focusStyles.common}\n    }\n\n    &[data-state='unchecked'] {\n      ${touchableHover(focusStyles.unchecked)}\n\n      &:focus-visible {\n        ${focusStyles.unchecked}\n      }\n    }\n\n    &:not([data-state='unchecked']) {\n      ${touchableHover(focusStyles.checked)}\n\n      &:focus-visible {\n        ${focusStyles.checked}\n      }\n    }\n  }\n`\n"],"names":["Avatar","styled","BaseAvatar","withConfig","displayName","componentId","CheckIcon","Icon","attrs","source","CheckIconSource","color","ZIndex","Float","absoluteCenter","AvatarSize","Size20","Size24","Size30","Size36","Size42","Size48","Size72","Size90","Size120","focusStyles","common","css","unchecked","checked","CheckboxPrimitiveRoot","CheckboxPrimitive","Base","touchableHover"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,MAAM,gBAAGC,gCAAM,CAACC,eAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAEnC,MAAMC,SAAS,gBAAGL,gCAAM,CAACM,SAAI,CAAC,CAACC,KAAK,CAAC;AAC1CC,EAAAA,MAAM,EAAEC,qBAAe;AACvBC,EAAAA,KAAK,EAAE,6BAAA;AACT,CAAC,CAAC,CAAAR,UAAA,CAAA;EAAAC,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,2BAAA,CAAA,EAEWO,aAAM,CAACC,KAAK,EAGrBC,qBAAc,EAAE,EAETC,uBAAU,CAACC,MAAM,EAKjBD,uBAAU,CAACE,MAAM,EAKjBF,uBAAU,CAACG,MAAM,EAKjBH,uBAAU,CAACI,MAAM,EAKjBJ,uBAAU,CAACK,MAAM,EAKjBL,uBAAU,CAACM,MAAM,EAKjBN,uBAAU,CAACO,MAAM,EAKjBP,uBAAU,CAACQ,MAAM,EAKjBR,uBAAU,CAACS,OAAO,EAI5B;AAED,MAAMC,WAAW,GAAG;AAClBC,EAAAA,MAAM,EAAEC,6BAAI,CAAA;AACd,IAAA,EAAMrB,SAAU,CAAA;AAChB;AACA;AACA;AACA;AACA,IAAA,EAAMN,MAAO,CAAA;AACb;AACA;AACA,EAAG,CAAA;AACD4B,EAAAA,SAAS,EAAED,6BAAI,CAAA;AACjB,IAAA,EAAM3B,MAAO,CAAA;AACb;AACA;AACA,EAAG,CAAA;AACD6B,EAAAA,OAAO,EAAEF,6BAAI,CAAA;AACf,IAAA,EAAM3B,MAAO,CAAA;AACb;AACA;AACA;AACA,EAAA,CAAA;AACA,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACO,MAAM8B,qBAAqB,gBAAG7B,gCAAM,CAAC8B,UAAsB,CAAC,CAAA5B,UAAA,CAAA;EAAAC,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,oGAAA,EAAA,uBAAA,EAAA,6LAAA,EAAA,mBAAA,EAAA,6BAAA,EAAA,mBAAA,EAAA,oCAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,EAGtDO,aAAM,CAACoB,IAAI,EASlB1B,SAAS,EAKTN,MAAM,EAQNiC,oBAAc,CAACR,WAAW,CAACC,MAAM,CAAC,EAGhCD,WAAW,CAACC,MAAM,EAIlBO,oBAAc,CAACR,WAAW,CAACG,SAAS,CAAC,EAGnCH,WAAW,CAACG,SAAS,EAKvBK,oBAAc,CAACR,WAAW,CAACI,OAAO,CAAC,EAGjCJ,WAAW,CAACI,OAAO;;;;;;"}
+{"version":3,"file":"CheckableAvatar.styled.js","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.styled.ts"],"sourcesContent":["import { CheckIcon as CheckIconSource } from '@channel.io/bezier-icons'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport {\n  absoluteCenter,\n  css,\n  styled,\n} from '~/src/foundation'\n\nimport { ZIndex } from '~/src/constants/ZIndex'\nimport { touchableHover } from '~/src/utils/style'\n\nimport {\n  AvatarSize,\n  Avatar as BaseAvatar,\n} from '~/src/components/Avatars/Avatar'\nimport { Icon } from '~/src/components/Icon'\n\nexport const Avatar = styled(BaseAvatar)``\n\nexport const CheckIcon = styled(Icon).attrs({\n  source: CheckIconSource,\n  color: 'bgtxt-absolute-white-normal',\n})`\n  position: absolute;\n  z-index: ${ZIndex.Float};\n  visibility: hidden;\n\n  ${absoluteCenter()}\n\n  &.size-${AvatarSize.Size20} {\n    width: 14px;\n    height: 14px;\n  }\n\n  &.size-${AvatarSize.Size24} {\n    width: 16px;\n    height: 16px;\n  }\n\n  &.size-${AvatarSize.Size30} {\n    width: 20px;\n    height: 20px;\n  }\n\n  &.size-${AvatarSize.Size36} {\n    width: 22px;\n    height: 22px;\n  }\n\n  &.size-${AvatarSize.Size42} {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.size-${AvatarSize.Size48} {\n    width: 28px;\n    height: 28px;\n  }\n\n  &.size-${AvatarSize.Size72} {\n    width: 42px;\n    height: 42px;\n  }\n\n  &.size-${AvatarSize.Size90} {\n    width: 52px;\n    height: 52px;\n  }\n\n  &.size-${AvatarSize.Size120} {\n    width: 68px;\n    height: 68px;\n  }\n`\n\nconst focusStyles = {\n  common: css`\n    ${CheckIcon} {\n      visibility: visible;\n    }\n\n    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n    ${Avatar} > div {\n      --b-alpha-smooth-corners-box-background-image: none !important;\n    }\n  `,\n  unchecked: css`\n    ${Avatar} > div {\n      --b-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important;\n    }\n  `,\n  checked: css`\n    ${Avatar} > div {\n      --b-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important;\n    }\n    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  `,\n}\n\n/**\n * NOTE: Using the `!important` keyword to override a local CSS variable of `AlphaSmoothCorners`.\n * Improvements are needed to the styling when using the `AlphaSmoothCorners` component.\n */\nexport const CheckboxPrimitiveRoot = styled(CheckboxPrimitive.Root)`\n  all: unset;\n  position: relative;\n  z-index: ${ZIndex.Base};\n  cursor: pointer;\n  outline: none;\n\n  &[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  &:not([data-state='unchecked']) {\n    ${CheckIcon} {\n      visibility: visible;\n    }\n\n    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */\n    ${Avatar} > div {\n      --b-alpha-smooth-corners-box-background-image: none !important;\n      --b-alpha-smooth-corners-box-background-color: var(--bgtxt-green-normal) !important;\n    }\n    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */\n  }\n\n  &:not([data-disabled]) {\n    ${touchableHover(focusStyles.common)}\n\n    &:focus-visible {\n      ${focusStyles.common}\n    }\n\n    &[data-state='unchecked'] {\n      ${touchableHover(focusStyles.unchecked)}\n\n      &:focus-visible {\n        ${focusStyles.unchecked}\n      }\n    }\n\n    &:not([data-state='unchecked']) {\n      ${touchableHover(focusStyles.checked)}\n\n      &:focus-visible {\n        ${focusStyles.checked}\n      }\n    }\n  }\n`\n"],"names":["Avatar","styled","BaseAvatar","withConfig","displayName","componentId","CheckIcon","Icon","attrs","source","CheckIconSource","color","ZIndex","Float","absoluteCenter","AvatarSize","Size20","Size24","Size30","Size36","Size42","Size48","Size72","Size90","Size120","focusStyles","common","css","unchecked","checked","CheckboxPrimitiveRoot","CheckboxPrimitive","Base","touchableHover"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,MAAM,gBAAGC,gCAAM,CAACC,eAAU,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,EAAA;AAEnC,MAAMC,SAAS,gBAAGL,gCAAM,CAACM,SAAI,CAAC,CAACC,KAAK,CAAC;AAC1CC,EAAAA,MAAM,EAAEC,qBAAe;AACvBC,EAAAA,KAAK,EAAE,6BAAA;AACT,CAAC,CAAC,CAAAR,UAAA,CAAA;EAAAC,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,kCAAA,EAAA,2BAAA,CAAA,EAEWO,aAAM,CAACC,KAAK,EAGrBC,qBAAc,EAAE,EAETC,uBAAU,CAACC,MAAM,EAKjBD,uBAAU,CAACE,MAAM,EAKjBF,uBAAU,CAACG,MAAM,EAKjBH,uBAAU,CAACI,MAAM,EAKjBJ,uBAAU,CAACK,MAAM,EAKjBL,uBAAU,CAACM,MAAM,EAKjBN,uBAAU,CAACO,MAAM,EAKjBP,uBAAU,CAACQ,MAAM,EAKjBR,uBAAU,CAACS,OAAO,EAI5B;AAED,MAAMC,WAAW,GAAG;AAClBC,EAAAA,MAAM,EAAEC,6BAAI,CAAA;AACd,IAAA,EAAMrB,SAAU,CAAA;AAChB;AACA;AACA;AACA;AACA,IAAA,EAAMN,MAAO,CAAA;AACb;AACA;AACA,EAAG,CAAA;AACD4B,EAAAA,SAAS,EAAED,6BAAI,CAAA;AACjB,IAAA,EAAM3B,MAAO,CAAA;AACb;AACA;AACA,EAAG,CAAA;AACD6B,EAAAA,OAAO,EAAEF,6BAAI,CAAA;AACf,IAAA,EAAM3B,MAAO,CAAA;AACb;AACA;AACA;AACA,EAAA,CAAA;AACA,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACO,MAAM8B,qBAAqB,gBAAG7B,gCAAM,CAAC8B,UAAsB,CAAC,CAAA5B,UAAA,CAAA;EAAAC,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,oGAAA,EAAA,uBAAA,EAAA,mLAAA,EAAA,mBAAA,EAAA,6BAAA,EAAA,mBAAA,EAAA,oCAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,EAGtDO,aAAM,CAACoB,IAAI,EASlB1B,SAAS,EAKTN,MAAM,EAQNiC,oBAAc,CAACR,WAAW,CAACC,MAAM,CAAC,EAGhCD,WAAW,CAACC,MAAM,EAIlBO,oBAAc,CAACR,WAAW,CAACG,SAAS,CAAC,EAGnCH,WAAW,CAACG,SAAS,EAKvBK,oBAAc,CAACR,WAAW,CAACI,OAAO,CAAC,EAGjCJ,WAAW,CAACI,OAAO;;;;;;"}

package/dist/cjs/components/Box/Box.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../node_modules/classnames/index.js');
+var props = require('../../utils/props.js');
+var shared_module = require('../shared.module.scss.js');
+var Box_module = require('./Box.module.scss.js');
+
+/**
+ * `Box` is the primitive component responsible for layout. It provides an easy way to access design tokens.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Box
+ *   width="100px"
+ *   height="100px"
+ *   p="6px"
+ *   m="6px"
+ *   bgColor="bg-black-light"
+ * >
+ *   <div>{ ... }</div>
+ * </Box>
+ * ```
+ */
+const Box = /*#__PURE__*/React.forwardRef(function Box(props$1, forwardedRef) {
+  const [marginProps, marginRest] = props.splitByMarginProps(props$1);
+  const [layoutProps, layoutRest] = props.splitByLayoutProps(marginRest);
+  const {
+    children,
+    style,
+    className,
+    as = 'div',
+    display,
+    testId = 'bezier-react-box',
+    ...rest
+  } = layoutRest;
+
+  /**
+   * NOTE: Using the createElement function directly because of a ref type related error.
+   * TODO: Fix type error.
+   */
+  return /*#__PURE__*/React.createElement(as, {
+    ref: forwardedRef,
+    style: {
+      ...props.getMarginStyle(marginProps),
+      ...props.getLayoutStyle(layoutProps),
+      ...style
+    },
+    className: index.default(shared_module.default.margin, shared_module.default.layout, Box_module.default.Box, display && Box_module.default[`display-${display}`], className),
+    'data-testid': testId,
+    ...rest
+  }, children);
+});
+
+exports.Box = Box;
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sources":["../../../../src/components/Box/Box.tsx"],"sourcesContent":["import {\n  createElement,\n  forwardRef,\n} from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n  getLayoutStyle,\n  getMarginStyle,\n  splitByLayoutProps,\n  splitByMarginProps,\n} from '~/src/utils/props'\n\nimport sharedStyles from '~/src/components/shared.module.scss'\n\nimport { type BoxProps } from './Box.types'\n\nimport styles from './Box.module.scss'\n\n/**\n * `Box` is the primitive component responsible for layout. It provides an easy way to access design tokens.\n *\n * @example\n *\n * ```tsx\n * <Box\n *   width=\"100px\"\n *   height=\"100px\"\n *   p=\"6px\"\n *   m=\"6px\"\n *   bgColor=\"bg-black-light\"\n * >\n *   <div>{ ... }</div>\n * </Box>\n * ```\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(function Box(props, forwardedRef) {\n  const [marginProps, marginRest] = splitByMarginProps(props)\n  const [layoutProps, layoutRest] = splitByLayoutProps(marginRest)\n  const {\n    children,\n    style,\n    className,\n    as = 'div',\n    display,\n    testId = 'bezier-react-box',\n    ...rest\n  } = layoutRest\n\n  /**\n   * NOTE: Using the createElement function directly because of a ref type related error.\n   * TODO: Fix type error.\n   */\n  return createElement(as, {\n    ref: forwardedRef,\n    style: {\n      ...getMarginStyle(marginProps),\n      ...getLayoutStyle(layoutProps),\n      ...style,\n    },\n    className: classNames(\n      sharedStyles.margin,\n      sharedStyles.layout,\n      styles.Box,\n      display && styles[`display-${display}`],\n      className,\n    ),\n    'data-testid': testId,\n    ...rest,\n  }, children)\n})\n"],"names":["Box","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","layoutProps","layoutRest","splitByLayoutProps","children","style","className","as","display","testId","rest","createElement","ref","getMarginStyle","getLayoutStyle","classNames","sharedStyles","margin","layout","styles"],"mappings":";;;;;;;;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,gBAAGC,gBAAU,CAAwB,SAASD,GAAGA,CAACE,OAAK,EAAEC,YAAY,EAAE;EACrF,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,wBAAkB,CAACJ,OAAK,CAAC,CAAA;EAC3D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,wBAAkB,CAACJ,UAAU,CAAC,CAAA;EAChE,MAAM;IACJK,QAAQ;IACRC,KAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;IACVC,OAAO;AACPC,IAAAA,MAAM,GAAG,kBAAkB;IAC3B,GAAGC,IAAAA;AACL,GAAC,GAAGR,UAAU,CAAA;;AAEd;AACF;AACA;AACA;EACE,oBAAOS,mBAAa,CAACJ,EAAE,EAAE;AACvBK,IAAAA,GAAG,EAAEf,YAAY;AACjBQ,IAAAA,KAAK,EAAE;MACL,GAAGQ,oBAAc,CAACf,WAAW,CAAC;MAC9B,GAAGgB,oBAAc,CAACb,WAAW,CAAC;MAC9B,GAAGI,KAAAA;KACJ;IACDC,SAAS,EAAES,aAAU,CACnBC,qBAAY,CAACC,MAAM,EACnBD,qBAAY,CAACE,MAAM,EACnBC,kBAAM,CAACzB,GAAG,EACVc,OAAO,IAAIW,kBAAM,CAAE,CAAUX,QAAAA,EAAAA,OAAQ,CAAC,CAAA,CAAC,EACvCF,SACF,CAAC;AACD,IAAA,aAAa,EAAEG,MAAM;IACrB,GAAGC,IAAAA;GACJ,EAAEN,QAAQ,CAAC,CAAA;AACd,CAAC;;;;"}