@channel.io/bezier-react 1.4.0 → 1.6.0

package/dist/cjs/_virtual/_commonjsHelpers.js

@@ -0,0 +1,8 @@
+'use strict';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+//# sourceMappingURL=_commonjsHelpers.js.map

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

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

package/dist/cjs/_virtual/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var classnames = {exports: {}};
+
+exports.__module = classnames;
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/components/AlphaCenter/AlphaCenter.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var AlphaCenter_styled = require('./AlphaCenter.styled.js');
+
+/**
+ * `Center` is a layout component that centers its child within itself.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Center>
+ *  Centered content
+ * </Center>
+ * ```
+ */
+const AlphaCenter = /*#__PURE__*/React.forwardRef(function AlphaCenter({
+  children,
+  ...rest
+}, forwardedRef) {
+  return /*#__PURE__*/React.createElement(AlphaCenter_styled.Box, Object.assign({
+    ref: forwardedRef
+  }, rest), children);
+});
+
+exports.AlphaCenter = AlphaCenter;
+//# sourceMappingURL=AlphaCenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaCenter.js","sources":["../../../../src/components/AlphaCenter/AlphaCenter.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { type AlphaCenterProps } from './AlphaCenter.types'\n\nimport * as Styled from './AlphaCenter.styled'\n\n/**\n * `Center` is a layout component that centers its child within itself.\n *\n * @example\n *\n * ```tsx\n * <Center>\n *  Centered content\n * </Center>\n * ```\n */\nexport const AlphaCenter = forwardRef<HTMLDivElement, AlphaCenterProps>(function AlphaCenter({\n  children,\n  ...rest\n}, forwardedRef) {\n  return (\n    <Styled.Box\n      ref={forwardedRef}\n      {...rest}\n    >\n      { children }\n    </Styled.Box>\n  )\n})\n"],"names":["AlphaCenter","forwardRef","children","rest","forwardedRef","React","createElement","Styled","Object","assign","ref"],"mappings":";;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,WAAW,gBAAGC,gBAAU,CAAmC,SAASD,WAAWA,CAAC;EAC3FE,QAAQ;EACR,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,oBACEC,KAAA,CAAAC,aAAA,CAACC,sBAAU,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACTC,IAAAA,GAAG,EAAEN,YAAAA;GACDD,EAAAA,IAAI,CAEND,EAAAA,QACQ,CAAC,CAAA;AAEjB,CAAC;;;;"}

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+const Box = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
+  displayName: "AlphaCenterstyled__Box",
+  componentId: "sc-ctf7t7-0"
+})(["display:flex;align-items:center;justify-content:center;"]);
+
+exports.Box = Box;
+//# sourceMappingURL=AlphaCenter.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaCenter.styled.js","sources":["../../../../src/components/AlphaCenter/AlphaCenter.styled.ts"],"sourcesContent":["import { styled } from '~/src/foundation'\n\nexport const Box = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n"],"names":["Box","styled","div","withConfig","displayName","componentId"],"mappings":";;;;MAEaA,GAAG,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAI5B,CAAA,CAAA,CAAA,yDAAA,CAAA;;;;"}

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

@@ -0,0 +1,61 @@
+'use strict';
+
+var React = require('react');
+var styleUtils = require('../../utils/styleUtils.js');
+var AlphaSmoothCornersBox_styled = require('./AlphaSmoothCornersBox.styled.js');
+var FeatureProvider = require('../../features/FeatureProvider.js');
+var Feature = require('../../features/Feature.js');
+
+/**
+ * `AlphaSmoothCornersBox` is a simple `div` element with smooth corners.
+ * It is available by enabling the `SmoothCornersFeature`.
+ *
+ * @example
+ *
+ * ```tsx
+ * <FeatureProvider features={[SmoothCornersFeature]}>
+ *   <AlphaSmoothCornersBox />
+ * </FeatureProvider>
+ * ```
+ */
+const AlphaSmoothCornersBox = /*#__PURE__*/React.forwardRef(function AlphaSmoothCornersBox({
+  children,
+  disabled,
+  borderRadius,
+  margin,
+  shadow,
+  backgroundColor,
+  backgroundImage,
+  style: styleProp,
+  ...rest
+}, forwardedRef) {
+  const smoothCornersEnabled = FeatureProvider.useFeatureFlag(Feature.FeatureType.SmoothCorners);
+  const enabled = !disabled && smoothCornersEnabled;
+  const shadowSpreadRadius = shadow?.spreadRadius ?? 0;
+  const style = React.useMemo(() => ({
+    ...styleProp,
+    '--bezier-alpha-smooth-corners-box-border-radius': borderRadius,
+    '--bezier-alpha-smooth-corners-box-border-radius-type': typeof borderRadius,
+    '--bezier-alpha-smooth-corners-box-shadow-offset-x': shadow?.offsetX,
+    '--bezier-alpha-smooth-corners-box-shadow-offset-y': shadow?.offsetY,
+    '--bezier-alpha-smooth-corners-box-shadow-blur-radius': `${shadow?.blurRadius ?? 0}px`,
+    '--bezier-alpha-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,
+    '--bezier-alpha-smooth-corners-box-shadow-color': styleUtils.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}
+     */
+    '--bezier-alpha-smooth-corners-box-padding': `${shadowSpreadRadius * 2}px`,
+    '--bezier-alpha-smooth-corners-box-margin': `${margin ?? 0}px`,
+    '--bezier-alpha-smooth-corners-box-background-color': styleUtils.cssVar(backgroundColor),
+    '--bezier-alpha-smooth-corners-box-background-image': styleUtils.cssUrl(backgroundImage)
+  }), [styleProp, borderRadius, margin, shadow, shadowSpreadRadius, backgroundColor, backgroundImage]);
+  return /*#__PURE__*/React.createElement(AlphaSmoothCornersBox_styled.Box, Object.assign({}, rest, {
+    ref: forwardedRef,
+    style: style,
+    "data-state": enabled ? 'enabled' : 'disabled'
+  }), children);
+});
+
+exports.AlphaSmoothCornersBox = AlphaSmoothCornersBox;
+//# sourceMappingURL=AlphaSmoothCornersBox.js.map

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

@@ -0,0 +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  cssVar,\n} from '~/src/utils/styleUtils'\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    '--bezier-alpha-smooth-corners-box-border-radius': borderRadius,\n    '--bezier-alpha-smooth-corners-box-border-radius-type': typeof borderRadius,\n    '--bezier-alpha-smooth-corners-box-shadow-offset-x': shadow?.offsetX,\n    '--bezier-alpha-smooth-corners-box-shadow-offset-y': shadow?.offsetY,\n    '--bezier-alpha-smooth-corners-box-shadow-blur-radius': `${shadow?.blurRadius ?? 0}px`,\n    '--bezier-alpha-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n    '--bezier-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    '--bezier-alpha-smooth-corners-box-padding': `${shadowSpreadRadius * 2}px`,\n    '--bezier-alpha-smooth-corners-box-margin': `${margin ?? 0}px`,\n    '--bezier-alpha-smooth-corners-box-background-color': cssVar(backgroundColor),\n    '--bezier-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,KAAK,GAAGW,aAAO,CAAC,OAAO;AAC3B,IAAA,GAAGV,SAAS;AACZ,IAAA,iDAAiD,EAAEN,YAAY;IAC/D,sDAAsD,EAAE,OAAOA,YAAY;IAC3E,mDAAmD,EAAEE,MAAM,EAAEe,OAAO;IACpE,mDAAmD,EAAEf,MAAM,EAAEgB,OAAO;AACpE,IAAA,sDAAsD,EAAG,CAAEhB,EAAAA,MAAM,EAAEiB,UAAU,IAAI,CAAE,CAAG,EAAA,CAAA;IACtF,wDAAwD,EAAG,CAAEL,EAAAA,kBAAmB,CAAG,EAAA,CAAA;AACnF,IAAA,gDAAgD,EAAEM,iBAAM,CAAClB,MAAM,EAAEmB,KAAK,CAAC;AACvE;AACJ;AACA;AACA;AACI,IAAA,2CAA2C,EAAG,CAAA,EAAEP,kBAAkB,GAAG,CAAE,CAAG,EAAA,CAAA;AAC1E,IAAA,0CAA0C,EAAG,CAAA,EAAEb,MAAM,IAAI,CAAE,CAAG,EAAA,CAAA;AAC9D,IAAA,oDAAoD,EAAEmB,iBAAM,CAACjB,eAAe,CAAC;IAC7E,oDAAoD,EAAEmB,iBAAM,CAAClB,eAAe,CAAA;AAC9E,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,KAAM;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

@@ -0,0 +1,12 @@
+'use strict';
+
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+/* stylelint-disable function-whitespace-after, length-zero-no-unit */
+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);}}"]);
+
+exports.Box = Box;
+//# sourceMappingURL=AlphaSmoothCornersBox.styled.js.map

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

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

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+var AlphaStack_styled = require('./AlphaStack.styled.js');
+var flexAdapter = require('../Stack/util/flexAdapter.js');
+
+/**
+ * `AlphaStack` provides an abstraction of **flex layout** so that
+ * rendering of child elements **linearly** can be done
+ * with simplified options.
+ *
+ * `AlphaStack` always fills the parent element.
+ *
+ * Be reminded that the first depth children element of AlphaStack would be StackItem that is adjusted by flex layout
+ *
+ * @example
+ *
+ * ```tsx
+ * <AlphaStack direction="horizontal" spacing={8}>
+ *  <div>{ ... }</div>
+ *  <div>{ ... }</div>
+ * </AlphaStack>
+ * ```
+ */
+const AlphaStack = /*#__PURE__*/React.forwardRef(function AlphaStack({
+  as = 'div',
+  testId = 'bezier-react-alpha-stack',
+  className,
+  interpolation,
+  style,
+  children,
+  direction,
+  justify = 'start',
+  align = 'stretch',
+  spacing = 0,
+  ...rest
+}, forwardedRef) {
+  const stackStyle = React.useMemo(() => ({
+    ...style,
+    '--bezier-alpha-stack-direction': direction === 'horizontal' ? 'row' : 'column',
+    '--bezier-alpha-stack-justify': flexAdapter.flex(justify),
+    '--bezier-alpha-stack-align': flexAdapter.flex(align),
+    '--bezier-alpha-stack-spacing': `${spacing}px`
+  }), [align, direction, justify, spacing, style]);
+  return /*#__PURE__*/React.createElement(AlphaStack_styled.Container, Object.assign({
+    ref: forwardedRef,
+    as: as,
+    "data-testid": testId,
+    style: stackStyle,
+    className: className,
+    interpolation: interpolation
+  }, rest), children);
+});
+
+exports.AlphaStack = AlphaStack;
+//# sourceMappingURL=AlphaStack.js.map

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

@@ -0,0 +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 { 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    '--bezier-alpha-stack-direction': direction === 'horizontal' ? 'row' : 'column',\n    '--bezier-alpha-stack-justify': flex(justify),\n    '--bezier-alpha-stack-align': flex(align),\n    '--bezier-alpha-stack-spacing': `${spacing}px`,\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","React","createElement","Styled","Object","assign","ref"],"mappings":";;;;;;AAYA;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;EACbC,KAAK;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,KAAK;AACR,IAAA,gCAAgC,EAAEE,SAAS,KAAK,YAAY,GAAG,KAAK,GAAG,QAAQ;AAC/E,IAAA,8BAA8B,EAAEQ,gBAAI,CAACP,OAAO,CAAC;AAC7C,IAAA,4BAA4B,EAAEO,gBAAI,CAACN,KAAK,CAAC;IACzC,8BAA8B,EAAG,GAAEC,OAAQ,CAAA,EAAA,CAAA;AAC7C,GAAC,CAAwB,EACzB,CACED,KAAK,EACLF,SAAS,EACTC,OAAO,EACPE,OAAO,EACPL,KAAK,CACN,CAAC,CAAA;EAEF,oBACEW,KAAA,CAAAC,aAAA,CAACC,2BAAgB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACfC,IAAAA,GAAG,EAAET,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

@@ -0,0 +1,13 @@
+'use strict';
+
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+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);}}", ""], ({
+  interpolation
+}) => interpolation);
+
+exports.Container = Container;
+//# sourceMappingURL=AlphaStack.styled.js.map

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

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

package/dist/cjs/components/AutoFocus/AutoFocus.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var React = require('react');
+var index_module = require('../../node_modules/@radix-ui/react-slot/dist/index.module.js');
+var useMergeRefs = require('../../hooks/useMergeRefs.js');
+
+/**
+ * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.
+ * It is useful when you want to focus on a specific element when the component is mounted.
+ * It doesn't render any DOM node.
+ *
+ * @example
+ *
+ * ```tsx
+ * <AutoFocus>
+ *   <button>Close</button>
+ * </AutoFocus>
+ *
+ * // You can also use it with the additional condition
+ * <AutoFocus when={condition}>
+ *   <button>Close</button>
+ * </AutoFocus>
+ * ```
+ */
+const AutoFocus = /*#__PURE__*/React.forwardRef(function AutoFocus({
+  children,
+  when = true,
+  ...rest
+}, forwardedRef) {
+  const [target, setTarget] = React.useState(null);
+  React.useLayoutEffect(function focus() {
+    if (target && when) {
+      target.focus();
+    }
+  }, [target, when]);
+  const ref = useMergeRefs.default(setTarget, forwardedRef);
+  return /*#__PURE__*/React.createElement(index_module.Slot, Object.assign({
+    ref: ref
+  }, rest), children);
+});
+
+exports.AutoFocus = AutoFocus;
+//# sourceMappingURL=AutoFocus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoFocus.js","sources":["../../../../src/components/AutoFocus/AutoFocus.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useLayoutEffect,\n  useState,\n} from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\n\nimport useMergeRefs from '~/src/hooks/useMergeRefs'\n\nimport { type AutoFocusProps } from './AutoFocus.types'\n\n/**\n * `AutoFocus` is a component that automatically focuses its child element when they are added to the document.\n * It is useful when you want to focus on a specific element when the component is mounted.\n * It doesn't render any DOM node.\n *\n * @example\n *\n * ```tsx\n * <AutoFocus>\n *   <button>Close</button>\n * </AutoFocus>\n *\n * // You can also use it with the additional condition\n * <AutoFocus when={condition}>\n *   <button>Close</button>\n * </AutoFocus>\n * ```\n */\nexport const AutoFocus = forwardRef<HTMLElement, AutoFocusProps>(function AutoFocus({\n  children,\n  when = true,\n  ...rest\n}, forwardedRef) {\n  const [target, setTarget] = useState<HTMLElement | null>(null)\n\n  useLayoutEffect(function focus() {\n    if (target && when) {\n      target.focus()\n    }\n  }, [\n    target,\n    when,\n  ])\n\n  const ref = useMergeRefs(\n    setTarget,\n    forwardedRef,\n  )\n\n  return (\n    <Slot\n      ref={ref}\n      {...rest}\n    >\n      { children }\n    </Slot>\n  )\n})\n"],"names":["AutoFocus","forwardRef","children","when","rest","forwardedRef","target","setTarget","useState","useLayoutEffect","focus","ref","useMergeRefs","React","createElement","Slot","Object","assign"],"mappings":";;;;;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,SAAS,gBAAGC,gBAAU,CAA8B,SAASD,SAASA,CAAC;EAClFE,QAAQ;AACRC,EAAAA,IAAI,GAAG,IAAI;EACX,GAAGC,IAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;EACf,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC,CAAA;AAE9DC,EAAAA,qBAAe,CAAC,SAASC,KAAKA,GAAG;IAC/B,IAAIJ,MAAM,IAAIH,IAAI,EAAE;MAClBG,MAAM,CAACI,KAAK,EAAE,CAAA;AAChB,KAAA;AACF,GAAC,EAAE,CACDJ,MAAM,EACNH,IAAI,CACL,CAAC,CAAA;AAEF,EAAA,MAAMQ,GAAG,GAAGC,oBAAY,CACtBL,SAAS,EACTF,YACF,CAAC,CAAA;EAED,oBACEQ,KAAA,CAAAC,aAAA,CAACC,iBAAI,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACHN,IAAAA,GAAG,EAAEA,GAAAA;GACDP,EAAAA,IAAI,CAENF,EAAAA,QACE,CAAC,CAAA;AAEX,CAAC;;;;"}

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

@@ -0,0 +1,83 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../../node_modules/classnames/index.js');
+var typeUtils = require('../../../utils/typeUtils.js');
+var AvatarStyle = require('../AvatarStyle.js');
+var defaultAvatar = require('../assets/defaultAvatar.svg.js');
+var Avatar_types = require('./Avatar.types.js');
+var useProgressiveImage = require('./useProgressiveImage.js');
+var Avatar_styled = require('./Avatar.styled.js');
+var Status_types = require('../../Status/Status.types.js');
+var Status = require('../../Status/Status.js');
+
+const shadow = {
+  spreadRadius: 2,
+  color: 'bg-white-high'
+};
+const AVATAR_WRAPPER_TEST_ID = 'bezier-react-avatar-wrapper';
+const AVATAR_TEST_ID = 'bezier-react-avatar';
+const STATUS_WRAPPER_TEST_ID = 'bezier-react-status-wrapper';
+const Avatar = /*#__PURE__*/React.forwardRef(function Avatar({
+  avatarUrl = '',
+  fallbackUrl = defaultAvatar.default,
+  size = Avatar_types.AvatarSize.Size24,
+  name,
+  testId = AVATAR_TEST_ID,
+  disabled = false,
+  showBorder = false,
+  smoothCorners = true,
+  status,
+  className: classNameProp,
+  children,
+  ...rest
+}, forwardedRef) {
+  const loadedAvatarUrl = useProgressiveImage.default(avatarUrl, fallbackUrl);
+  const StatusComponent = React.useMemo(() => {
+    if (typeUtils.isEmpty(children) && !status || children && ! /*#__PURE__*/React.isValidElement(children)) {
+      return null;
+    }
+    const statusSize = size >= Avatar_types.AvatarSize.Size90 ? Status_types.StatusSize.L : Status_types.StatusSize.M;
+    const Contents = (() => {
+      if (children) {
+        return children;
+      }
+      if (status) {
+        return /*#__PURE__*/React.createElement(Status.Status, {
+          type: status,
+          size: statusSize
+        });
+      }
+      return null;
+    })();
+    return Contents && /*#__PURE__*/React.createElement(Avatar_styled.StatusWrapper, {
+      "data-testid": STATUS_WRAPPER_TEST_ID
+    }, Contents);
+  }, [status, size, children]);
+  const className = index.default(classNameProp, size && `size-${size}`, disabled && 'disabled');
+  const avatarStyle = React.useMemo(() => ({
+    '--bezier-avatar-status-gap': `${size >= Avatar_types.AvatarSize.Size72 ? 4 : -2}px`
+  }), [size]);
+  return /*#__PURE__*/React.createElement(Avatar_styled.AvatarWrapper, Object.assign({}, rest, {
+    "data-testid": AVATAR_WRAPPER_TEST_ID,
+    "data-disabled": disabled,
+    className: className
+  }), /*#__PURE__*/React.createElement(Avatar_styled.AvatarImage, {
+    ref: forwardedRef,
+    "data-testid": testId,
+    "aria-label": name,
+    style: avatarStyle,
+    className: showBorder ? 'bordered' : undefined,
+    disabled: !smoothCorners,
+    borderRadius: `${AvatarStyle.AVATAR_BORDER_RADIUS_PERCENTAGE}%`,
+    shadow: showBorder ? shadow : undefined,
+    backgroundColor: "bg-white-normal",
+    backgroundImage: loadedAvatarUrl
+  }, StatusComponent));
+});
+
+exports.AVATAR_TEST_ID = AVATAR_TEST_ID;
+exports.AVATAR_WRAPPER_TEST_ID = AVATAR_WRAPPER_TEST_ID;
+exports.Avatar = Avatar;
+exports.STATUS_WRAPPER_TEST_ID = STATUS_WRAPPER_TEST_ID;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +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 { isEmpty } from '~/src/utils/typeUtils'\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    '--bezier-avatar-status-gap': `${size >= AvatarSize.Size72 ? 4 : -2}px`,\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","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

@@ -0,0 +1,27 @@
+'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');
+
+/* stylelint-disable function-whitespace-after */
+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, ({
+  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)));}"]);
+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;"]);
+
+exports.AvatarImage = AvatarImage;
+exports.AvatarWrapper = AvatarWrapper;
+exports.StatusWrapper = StatusWrapper;
+//# sourceMappingURL=Avatar.styled.js.map

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

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

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

@@ -0,0 +1,17 @@
+'use strict';
+
+let AvatarSize = /*#__PURE__*/function (AvatarSize) {
+  AvatarSize[AvatarSize["Size20"] = 20] = "Size20";
+  AvatarSize[AvatarSize["Size24"] = 24] = "Size24";
+  AvatarSize[AvatarSize["Size30"] = 30] = "Size30";
+  AvatarSize[AvatarSize["Size36"] = 36] = "Size36";
+  AvatarSize[AvatarSize["Size42"] = 42] = "Size42";
+  AvatarSize[AvatarSize["Size48"] = 48] = "Size48";
+  AvatarSize[AvatarSize["Size72"] = 72] = "Size72";
+  AvatarSize[AvatarSize["Size90"] = 90] = "Size90";
+  AvatarSize[AvatarSize["Size120"] = 120] = "Size120";
+  return AvatarSize;
+}({});
+
+exports.AvatarSize = AvatarSize;
+//# sourceMappingURL=Avatar.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.js","sources":["../../../../../src/components/Avatars/Avatar/Avatar.types.ts"],"sourcesContent":["import type {\n  BezierComponentProps,\n  ChildrenProps,\n  DisableProps,\n  SizeProps,\n} from '~/src/types/ComponentProps'\n\nimport { type StatusType } from '~/src/components/Status'\n\nexport enum AvatarSize {\n  Size20 = 20,\n  Size24 = 24,\n  Size30 = 30,\n  Size36 = 36,\n  Size42 = 42,\n  Size48 = 48,\n  Size72 = 72,\n  Size90 = 90,\n  Size120 = 120,\n}\n\ninterface AvatarOptions {\n  /**\n   * Semantic name of the avatar.\n   */\n  name: string\n  /**\n   * Asset image URL of the avatar.\n   * @default ''\n   */\n  avatarUrl?: string\n  /**\n   * Fallback image URL for the avatar.\n   * @default DEFAULT_AVATAR_URL\n   */\n  fallbackUrl?: string\n  /**\n   * Additional status type for this avatar.\n   * Typically, this is used to indicate the status of the user (online, offline, etc).\n   *\n   * If additional customization of the status component is needed,\n   * pass the custom status component as `children` of the Avatar component.\n   */\n  status?: StatusType\n  /**\n   * Whether to display the border of the avatar.\n   * @default false\n   */\n  showBorder?: boolean\n  /**\n   * Whether to use the smooth corners feature.\n   * Overrides whether the smooth corners feature is applied when it is enabled.\n   * @default true\n   */\n  smoothCorners?: boolean\n}\n\nexport default interface AvatarProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  SizeProps<AvatarSize>,\n  DisableProps,\n  React.HTMLAttributes<HTMLDivElement>,\n  AvatarOptions {}\n"],"names":["AvatarSize"],"mappings":";;AASYA,IAAAA,UAAU,0BAAVA,UAAU,EAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,EAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,SAAA,CAAA,GAAA,GAAA,CAAA,GAAA,SAAA,CAAA;AAAA,EAAA,OAAVA,UAAU,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var ImageEventType = /*#__PURE__*/function (ImageEventType) {
+  ImageEventType["Load"] = "load";
+  ImageEventType["Error"] = "error";
+  return ImageEventType;
+}(ImageEventType || {});
+const defaultImageCache = new Map();
+function getCachedImage(src, imageCache) {
+  const cachedImage = imageCache.get(src);
+  if (!cachedImage) {
+    return null;
+  }
+  return cachedImage;
+}
+function useProgressiveImage(src, defaultSrc, imageCache = defaultImageCache) {
+  const [source, setSource] = React.useState(() => getCachedImage(src, imageCache));
+  React.useEffect(function updateSource() {
+    if (source?.src === src) {
+      return undefined;
+    }
+    const cachedImage = getCachedImage(src, imageCache);
+    if (cachedImage?.isLoaded) {
+      setSource(cachedImage);
+      return undefined;
+    }
+    const image = new Image();
+    image.src = src;
+    function loadImage(event) {
+      const loadedImage = {
+        src,
+        isLoaded: event.type === ImageEventType.Load
+      };
+      setSource(loadedImage);
+      imageCache.set(src, loadedImage);
+    }
+    image.addEventListener(ImageEventType.Load, loadImage);
+    image.addEventListener(ImageEventType.Error, loadImage);
+    return function cleanup() {
+      image.removeEventListener(ImageEventType.Load, loadImage);
+      image.removeEventListener(ImageEventType.Error, loadImage);
+    };
+  }, [src, source, imageCache]);
+  if (!source || !source.isLoaded) {
+    return defaultSrc;
+  }
+  return source.src;
+}
+
+exports.default = useProgressiveImage;
+//# sourceMappingURL=useProgressiveImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useProgressiveImage.js","sources":["../../../../../src/components/Avatars/Avatar/useProgressiveImage.ts"],"sourcesContent":["import {\n  useEffect,\n  useState,\n} from 'react'\n\nenum ImageEventType {\n  Load = 'load',\n  Error = 'error',\n}\n\nexport interface CachedImage {\n  src: string\n  isLoaded: boolean\n}\n\ntype ImageCacheMap = Map<string, CachedImage>\n\nconst defaultImageCache = new Map<string, CachedImage>()\n\nfunction getCachedImage(src: string, imageCache: ImageCacheMap) {\n  const cachedImage = imageCache.get(src)\n  if (!cachedImage) { return null }\n  return cachedImage\n}\n\nexport default function useProgressiveImage(\n  src: string,\n  defaultSrc: string,\n  imageCache: ImageCacheMap = defaultImageCache,\n) {\n  const [source, setSource] = useState<CachedImage | null>(() => getCachedImage(src, imageCache))\n\n  useEffect(function updateSource() {\n    if (source?.src === src) { return undefined }\n\n    const cachedImage = getCachedImage(src, imageCache)\n\n    if (cachedImage?.isLoaded) {\n      setSource(cachedImage)\n      return undefined\n    }\n\n    const image = new Image()\n    image.src = src\n\n    function loadImage(event: Event) {\n      const loadedImage = {\n        src,\n        isLoaded: event.type === ImageEventType.Load,\n      }\n      setSource(loadedImage)\n      imageCache.set(src, loadedImage)\n    }\n\n    image.addEventListener(ImageEventType.Load, loadImage)\n    image.addEventListener(ImageEventType.Error, loadImage)\n\n    return function cleanup() {\n      image.removeEventListener(ImageEventType.Load, loadImage)\n      image.removeEventListener(ImageEventType.Error, loadImage)\n    }\n  }, [\n    src,\n    source,\n    imageCache,\n  ])\n\n  if (!source || !source.isLoaded) {\n    return defaultSrc\n  }\n\n  return source.src\n}\n\n"],"names":["ImageEventType","defaultImageCache","Map","getCachedImage","src","imageCache","cachedImage","get","useProgressiveImage","defaultSrc","source","setSource","useState","useEffect","updateSource","undefined","isLoaded","image","Image","loadImage","event","loadedImage","type","Load","set","addEventListener","Error","cleanup","removeEventListener"],"mappings":";;;;;;AAGc,IAETA,cAAc,0BAAdA,cAAc,EAAA;EAAdA,cAAc,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAdA,cAAc,IAAA,EAAA,CAAA,CAAA;AAYnB,MAAMC,iBAAiB,GAAG,IAAIC,GAAG,EAAuB,CAAA;AAExD,SAASC,cAAcA,CAACC,GAAW,EAAEC,UAAyB,EAAE;AAC9D,EAAA,MAAMC,WAAW,GAAGD,UAAU,CAACE,GAAG,CAACH,GAAG,CAAC,CAAA;EACvC,IAAI,CAACE,WAAW,EAAE;AAAE,IAAA,OAAO,IAAI,CAAA;AAAC,GAAA;AAChC,EAAA,OAAOA,WAAW,CAAA;AACpB,CAAA;AAEe,SAASE,mBAAmBA,CACzCJ,GAAW,EACXK,UAAkB,EAClBJ,UAAyB,GAAGJ,iBAAiB,EAC7C;AACA,EAAA,MAAM,CAACS,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAqB,MAAMT,cAAc,CAACC,GAAG,EAAEC,UAAU,CAAC,CAAC,CAAA;AAE/FQ,EAAAA,eAAS,CAAC,SAASC,YAAYA,GAAG;AAChC,IAAA,IAAIJ,MAAM,EAAEN,GAAG,KAAKA,GAAG,EAAE;AAAE,MAAA,OAAOW,SAAS,CAAA;AAAC,KAAA;AAE5C,IAAA,MAAMT,WAAW,GAAGH,cAAc,CAACC,GAAG,EAAEC,UAAU,CAAC,CAAA;IAEnD,IAAIC,WAAW,EAAEU,QAAQ,EAAE;MACzBL,SAAS,CAACL,WAAW,CAAC,CAAA;AACtB,MAAA,OAAOS,SAAS,CAAA;AAClB,KAAA;AAEA,IAAA,MAAME,KAAK,GAAG,IAAIC,KAAK,EAAE,CAAA;IACzBD,KAAK,CAACb,GAAG,GAAGA,GAAG,CAAA;IAEf,SAASe,SAASA,CAACC,KAAY,EAAE;AAC/B,MAAA,MAAMC,WAAW,GAAG;QAClBjB,GAAG;AACHY,QAAAA,QAAQ,EAAEI,KAAK,CAACE,IAAI,KAAKtB,cAAc,CAACuB,IAAAA;OACzC,CAAA;MACDZ,SAAS,CAACU,WAAW,CAAC,CAAA;AACtBhB,MAAAA,UAAU,CAACmB,GAAG,CAACpB,GAAG,EAAEiB,WAAW,CAAC,CAAA;AAClC,KAAA;IAEAJ,KAAK,CAACQ,gBAAgB,CAACzB,cAAc,CAACuB,IAAI,EAAEJ,SAAS,CAAC,CAAA;IACtDF,KAAK,CAACQ,gBAAgB,CAACzB,cAAc,CAAC0B,KAAK,EAAEP,SAAS,CAAC,CAAA;IAEvD,OAAO,SAASQ,OAAOA,GAAG;MACxBV,KAAK,CAACW,mBAAmB,CAAC5B,cAAc,CAACuB,IAAI,EAAEJ,SAAS,CAAC,CAAA;MACzDF,KAAK,CAACW,mBAAmB,CAAC5B,cAAc,CAAC0B,KAAK,EAAEP,SAAS,CAAC,CAAA;KAC3D,CAAA;GACF,EAAE,CACDf,GAAG,EACHM,MAAM,EACNL,UAAU,CACX,CAAC,CAAA;AAEF,EAAA,IAAI,CAACK,MAAM,IAAI,CAACA,MAAM,CAACM,QAAQ,EAAE;AAC/B,IAAA,OAAOP,UAAU,CAAA;AACnB,GAAA;EAEA,OAAOC,MAAM,CAACN,GAAG,CAAA;AACnB;;;;"}