@channel.io/bezier-react 4.0.0-next.3 → 4.0.0-next.4

package/dist/cjs/types/props-helpers.js

@@ -103,6 +103,8 @@ const splitByLayoutProps = ({
   overflowX,
   overflowY
 }, rest];
+const splitByV3MarginProps = props => splitByMarginProps(props);
+const splitByV3LayoutProps = props => splitByLayoutProps(props);
 function getElevationClassName(elevation) {
   return elevation_module.default[`elevation-${elevation}`];
 }
@@ -201,6 +203,8 @@ const getLayoutStyles = ({
   },
   className: index.default(layout_module.default.layout, position && layout_module.default[`position-${position}`], overflow && layout_module.default[`overflow-${overflow}`], overflowX && layout_module.default[`overflow-x-${overflowX}`], overflowY && layout_module.default[`overflow-y-${overflowY}`], elevation && getElevationClassName(elevation), borderRadius && getRadiusClassName(borderRadius), zIndex && getZIndexClassName(zIndex))
 });
+const getV3MarginStyles = getMarginStyles;
+const getV3LayoutStyles = props => getLayoutStyles(props);
 function getFormFieldSizeClassName(size) {
   return formFieldSize_module.default[`size-${size}`];
 }
@@ -208,7 +212,11 @@ function getFormFieldSizeClassName(size) {
 exports.getFormFieldSizeClassName = getFormFieldSizeClassName;
 exports.getLayoutStyles = getLayoutStyles;
 exports.getMarginStyles = getMarginStyles;
+exports.getV3LayoutStyles = getV3LayoutStyles;
+exports.getV3MarginStyles = getV3MarginStyles;
 exports.getZIndexClassName = getZIndexClassName;
 exports.splitByLayoutProps = splitByLayoutProps;
 exports.splitByMarginProps = splitByMarginProps;
+exports.splitByV3LayoutProps = splitByV3LayoutProps;
+exports.splitByV3MarginProps = splitByV3MarginProps;
 //# sourceMappingURL=props-helpers.js.map

package/dist/cjs/types/props-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"props-helpers.js","sources":["../../../src/types/props-helpers.ts"],"sourcesContent":["import classNames from 'classnames'\n\nimport { colorTokenCssVar, cssDimension } from '~/src/utils/style'\n\n// NOTE: 'typescript-plugin-css-modules' does not support path alias\n/* eslint-disable no-restricted-imports */\nimport elevationStyles from '../styles/components/elevation.module.scss'\nimport formFieldSizeStyles from '../styles/components/form-field-size.module.scss'\nimport layoutStyles from '../styles/components/layout.module.scss'\nimport marginStyles from '../styles/components/margin.module.scss'\nimport radiusStyles from '../styles/components/radius.module.scss'\nimport zIndexStyles from '../styles/components/z-index.module.scss'\n/* eslint-enable no-restricted-imports */\n\nimport {\n  type BetaElevation,\n  type BetaRadius,\n  type BetaZIndex,\n} from './beta-tokens'\nimport { type FormFieldSize, type LayoutProps, type MarginProps } from './props'\nimport { type Elevation, type Radius, type ZIndex } from './tokens'\n\nexport const splitByMarginProps = <Props extends MarginProps>({\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n  ...rest\n}: Props): [MarginProps, Omit<Props, keyof MarginProps>] => [\n  {\n    margin,\n    marginHorizontal,\n    marginVertical,\n    marginTop,\n    marginRight,\n    marginBottom,\n    marginLeft,\n  },\n  rest,\n]\n\nexport const splitByLayoutProps = <Props extends LayoutProps>({\n  padding,\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  width,\n  height,\n  maxWidth,\n  minWidth,\n  maxHeight,\n  minHeight,\n  position,\n  inset,\n  top,\n  right,\n  bottom,\n  left,\n  basis,\n  shrink,\n  grow,\n  backgroundColor,\n  borderColor,\n  borderRadius,\n  borderWidth,\n  borderTopWidth,\n  borderRightWidth,\n  borderBottomWidth,\n  borderLeftWidth,\n  elevation,\n  zIndex,\n  overflow,\n  overflowX,\n  overflowY,\n  ...rest\n}: Props): [LayoutProps, Omit<Props, keyof LayoutProps>] => [\n  {\n    padding,\n    paddingHorizontal,\n    paddingVertical,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    width,\n    height,\n    maxWidth,\n    minWidth,\n    maxHeight,\n    minHeight,\n    position,\n    inset,\n    top,\n    right,\n    bottom,\n    left,\n    basis,\n    shrink,\n    grow,\n    backgroundColor,\n    borderColor,\n    borderRadius,\n    borderWidth,\n    borderTopWidth,\n    borderRightWidth,\n    borderBottomWidth,\n    borderLeftWidth,\n    elevation,\n    zIndex,\n    overflow,\n    overflowX,\n    overflowY,\n  },\n  rest,\n]\n\nfunction getElevationClassName(elevation: Elevation | BetaElevation) {\n  return elevationStyles[`elevation-${elevation}`]\n}\n\nfunction getRadiusClassName(radius: Radius | BetaRadius) {\n  return radiusStyles[`radius-${radius}`]\n}\n\nexport function getZIndexClassName(zIndex: ZIndex | BetaZIndex) {\n  return zIndexStyles[`z-index-${zIndex}`]\n}\n\nexport const getMarginStyles = ({\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n}: MarginProps) => ({\n  style: {\n    '--b-margin': cssDimension(margin),\n    '--b-margin-horizontal': cssDimension(marginHorizontal),\n    '--b-margin-vertical': cssDimension(marginVertical),\n    '--b-margin-top': cssDimension(marginTop),\n    '--b-margin-right': cssDimension(marginRight),\n    '--b-margin-bottom': cssDimension(marginBottom),\n    '--b-margin-left': cssDimension(marginLeft),\n  },\n  className: marginStyles.margin,\n})\n\nexport const getLayoutStyles = ({\n  padding,\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  width,\n  height,\n  maxWidth,\n  minWidth,\n  maxHeight,\n  minHeight,\n  position,\n  inset,\n  top,\n  right,\n  bottom,\n  left,\n  basis,\n  shrink,\n  grow,\n  backgroundColor,\n  borderColor,\n  borderRadius,\n  borderWidth,\n  borderTopWidth,\n  borderRightWidth,\n  borderBottomWidth,\n  borderLeftWidth,\n  elevation,\n  zIndex,\n  overflow,\n  overflowX,\n  overflowY,\n}: LayoutProps) => ({\n  style: {\n    '--b-padding': cssDimension(padding),\n    '--b-padding-horizontal': cssDimension(paddingHorizontal),\n    '--b-padding-vertical': cssDimension(paddingVertical),\n    '--b-padding-top': cssDimension(paddingTop),\n    '--b-padding-right': cssDimension(paddingRight),\n    '--b-padding-bottom': cssDimension(paddingBottom),\n    '--b-padding-left': cssDimension(paddingLeft),\n    '--b-width': cssDimension(width),\n    '--b-height': cssDimension(height),\n    '--b-max-width': cssDimension(maxWidth),\n    '--b-min-width': cssDimension(minWidth),\n    '--b-max-height': cssDimension(maxHeight),\n    '--b-min-height': cssDimension(minHeight),\n    '--b-inset': cssDimension(inset),\n    '--b-top': cssDimension(top),\n    '--b-right': cssDimension(right),\n    '--b-bottom': cssDimension(bottom),\n    '--b-left': cssDimension(left),\n    '--b-basis': cssDimension(basis),\n    '--b-shrink': shrink,\n    '--b-grow': grow,\n    '--b-background-color': colorTokenCssVar(backgroundColor),\n    '--b-border-color': colorTokenCssVar(borderColor),\n    '--b-border-width': cssDimension(borderWidth),\n    '--b-border-top-width': cssDimension(borderTopWidth),\n    '--b-border-right-width': cssDimension(borderRightWidth),\n    '--b-border-bottom-width': cssDimension(borderBottomWidth),\n    '--b-border-left-width': cssDimension(borderLeftWidth),\n  },\n  className: classNames(\n    layoutStyles.layout,\n    position && layoutStyles[`position-${position}`],\n    overflow && layoutStyles[`overflow-${overflow}`],\n    overflowX && layoutStyles[`overflow-x-${overflowX}`],\n    overflowY && layoutStyles[`overflow-y-${overflowY}`],\n    elevation && getElevationClassName(elevation),\n    borderRadius && getRadiusClassName(borderRadius),\n    zIndex && getZIndexClassName(zIndex)\n  ),\n})\n\nexport function getFormFieldSizeClassName(size: FormFieldSize) {\n  return formFieldSizeStyles[`size-${size}`]\n}\n"],"names":["splitByMarginProps","margin","marginHorizontal","marginVertical","marginTop","marginRight","marginBottom","marginLeft","rest","splitByLayoutProps","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","width","height","maxWidth","minWidth","maxHeight","minHeight","position","inset","top","right","bottom","left","basis","shrink","grow","backgroundColor","borderColor","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","elevation","zIndex","overflow","overflowX","overflowY","getElevationClassName","elevationStyles","getRadiusClassName","radius","radiusStyles","getZIndexClassName","zIndexStyles","getMarginStyles","style","cssDimension","className","marginStyles","getLayoutStyles","colorTokenCssVar","classNames","layoutStyles","layout","getFormFieldSizeClassName","size","formFieldSizeStyles"],"mappings":"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"}
+{"version":3,"file":"props-helpers.js","sources":["../../../src/types/props-helpers.ts"],"sourcesContent":["import classNames from 'classnames'\n\nimport { colorTokenCssVar, cssDimension } from '~/src/utils/style'\n\n// NOTE: 'typescript-plugin-css-modules' does not support path alias\n/* eslint-disable no-restricted-imports */\nimport elevationStyles from '../styles/components/elevation.module.scss'\nimport formFieldSizeStyles from '../styles/components/form-field-size.module.scss'\nimport layoutStyles from '../styles/components/layout.module.scss'\nimport marginStyles from '../styles/components/margin.module.scss'\nimport radiusStyles from '../styles/components/radius.module.scss'\nimport zIndexStyles from '../styles/components/z-index.module.scss'\n/* eslint-enable no-restricted-imports */\n\nimport {\n  type BetaElevation,\n  type BetaRadius,\n  type BetaZIndex,\n} from './beta-tokens'\nimport {\n  type FormFieldSize,\n  type LayoutProps,\n  type MarginProps,\n  type V3LayoutProps,\n  type V3MarginProps,\n} from './props'\nimport { type Elevation, type Radius, type ZIndex } from './tokens'\n\nexport const splitByMarginProps = <Props extends MarginProps>({\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n  ...rest\n}: Props): [MarginProps, Omit<Props, keyof MarginProps>] => [\n  {\n    margin,\n    marginHorizontal,\n    marginVertical,\n    marginTop,\n    marginRight,\n    marginBottom,\n    marginLeft,\n  },\n  rest,\n]\n\nexport const splitByLayoutProps = <Props extends LayoutProps>({\n  padding,\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  width,\n  height,\n  maxWidth,\n  minWidth,\n  maxHeight,\n  minHeight,\n  position,\n  inset,\n  top,\n  right,\n  bottom,\n  left,\n  basis,\n  shrink,\n  grow,\n  backgroundColor,\n  borderColor,\n  borderRadius,\n  borderWidth,\n  borderTopWidth,\n  borderRightWidth,\n  borderBottomWidth,\n  borderLeftWidth,\n  elevation,\n  zIndex,\n  overflow,\n  overflowX,\n  overflowY,\n  ...rest\n}: Props): [LayoutProps, Omit<Props, keyof LayoutProps>] => [\n  {\n    padding,\n    paddingHorizontal,\n    paddingVertical,\n    paddingTop,\n    paddingRight,\n    paddingBottom,\n    paddingLeft,\n    width,\n    height,\n    maxWidth,\n    minWidth,\n    maxHeight,\n    minHeight,\n    position,\n    inset,\n    top,\n    right,\n    bottom,\n    left,\n    basis,\n    shrink,\n    grow,\n    backgroundColor,\n    borderColor,\n    borderRadius,\n    borderWidth,\n    borderTopWidth,\n    borderRightWidth,\n    borderBottomWidth,\n    borderLeftWidth,\n    elevation,\n    zIndex,\n    overflow,\n    overflowX,\n    overflowY,\n  },\n  rest,\n]\n\nexport const splitByV3MarginProps = <Props extends V3MarginProps>(\n  props: Props\n): [V3MarginProps, Omit<Props, keyof V3MarginProps>] =>\n  splitByMarginProps(props)\n\nexport const splitByV3LayoutProps = <Props extends V3LayoutProps>(\n  props: Props\n): [V3LayoutProps, Omit<Props, keyof V3LayoutProps>] =>\n  splitByLayoutProps(props) as [V3LayoutProps, Omit<Props, keyof V3LayoutProps>]\n\nfunction getElevationClassName(elevation: Elevation | BetaElevation) {\n  return elevationStyles[`elevation-${elevation}`]\n}\n\nfunction getRadiusClassName(radius: Radius | BetaRadius) {\n  return radiusStyles[`radius-${radius}`]\n}\n\nexport function getZIndexClassName(zIndex: ZIndex | BetaZIndex) {\n  return zIndexStyles[`z-index-${zIndex}`]\n}\n\nexport const getMarginStyles = ({\n  margin,\n  marginHorizontal,\n  marginVertical,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n}: MarginProps) => ({\n  style: {\n    '--b-margin': cssDimension(margin),\n    '--b-margin-horizontal': cssDimension(marginHorizontal),\n    '--b-margin-vertical': cssDimension(marginVertical),\n    '--b-margin-top': cssDimension(marginTop),\n    '--b-margin-right': cssDimension(marginRight),\n    '--b-margin-bottom': cssDimension(marginBottom),\n    '--b-margin-left': cssDimension(marginLeft),\n  },\n  className: marginStyles.margin,\n})\n\nexport const getLayoutStyles = ({\n  padding,\n  paddingHorizontal,\n  paddingVertical,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n  width,\n  height,\n  maxWidth,\n  minWidth,\n  maxHeight,\n  minHeight,\n  position,\n  inset,\n  top,\n  right,\n  bottom,\n  left,\n  basis,\n  shrink,\n  grow,\n  backgroundColor,\n  borderColor,\n  borderRadius,\n  borderWidth,\n  borderTopWidth,\n  borderRightWidth,\n  borderBottomWidth,\n  borderLeftWidth,\n  elevation,\n  zIndex,\n  overflow,\n  overflowX,\n  overflowY,\n}: LayoutProps) => ({\n  style: {\n    '--b-padding': cssDimension(padding),\n    '--b-padding-horizontal': cssDimension(paddingHorizontal),\n    '--b-padding-vertical': cssDimension(paddingVertical),\n    '--b-padding-top': cssDimension(paddingTop),\n    '--b-padding-right': cssDimension(paddingRight),\n    '--b-padding-bottom': cssDimension(paddingBottom),\n    '--b-padding-left': cssDimension(paddingLeft),\n    '--b-width': cssDimension(width),\n    '--b-height': cssDimension(height),\n    '--b-max-width': cssDimension(maxWidth),\n    '--b-min-width': cssDimension(minWidth),\n    '--b-max-height': cssDimension(maxHeight),\n    '--b-min-height': cssDimension(minHeight),\n    '--b-inset': cssDimension(inset),\n    '--b-top': cssDimension(top),\n    '--b-right': cssDimension(right),\n    '--b-bottom': cssDimension(bottom),\n    '--b-left': cssDimension(left),\n    '--b-basis': cssDimension(basis),\n    '--b-shrink': shrink,\n    '--b-grow': grow,\n    '--b-background-color': colorTokenCssVar(backgroundColor),\n    '--b-border-color': colorTokenCssVar(borderColor),\n    '--b-border-width': cssDimension(borderWidth),\n    '--b-border-top-width': cssDimension(borderTopWidth),\n    '--b-border-right-width': cssDimension(borderRightWidth),\n    '--b-border-bottom-width': cssDimension(borderBottomWidth),\n    '--b-border-left-width': cssDimension(borderLeftWidth),\n  },\n  className: classNames(\n    layoutStyles.layout,\n    position && layoutStyles[`position-${position}`],\n    overflow && layoutStyles[`overflow-${overflow}`],\n    overflowX && layoutStyles[`overflow-x-${overflowX}`],\n    overflowY && layoutStyles[`overflow-y-${overflowY}`],\n    elevation && getElevationClassName(elevation),\n    borderRadius && getRadiusClassName(borderRadius),\n    zIndex && getZIndexClassName(zIndex)\n  ),\n})\n\nexport const getV3MarginStyles = getMarginStyles\n\nexport const getV3LayoutStyles = (props: V3LayoutProps) =>\n  getLayoutStyles(props)\n\nexport function getFormFieldSizeClassName(size: FormFieldSize) {\n  return formFieldSizeStyles[`size-${size}`]\n}\n"],"names":["splitByMarginProps","margin","marginHorizontal","marginVertical","marginTop","marginRight","marginBottom","marginLeft","rest","splitByLayoutProps","padding","paddingHorizontal","paddingVertical","paddingTop","paddingRight","paddingBottom","paddingLeft","width","height","maxWidth","minWidth","maxHeight","minHeight","position","inset","top","right","bottom","left","basis","shrink","grow","backgroundColor","borderColor","borderRadius","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","elevation","zIndex","overflow","overflowX","overflowY","splitByV3MarginProps","props","splitByV3LayoutProps","getElevationClassName","elevationStyles","getRadiusClassName","radius","radiusStyles","getZIndexClassName","zIndexStyles","getMarginStyles","style","cssDimension","className","marginStyles","getLayoutStyles","colorTokenCssVar","classNames","layoutStyles","layout","getV3MarginStyles","getV3LayoutStyles","getFormFieldSizeClassName","size","formFieldSizeStyles"],"mappings":"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"}

package/dist/cjs/v3/BaseStack/BaseStack.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var propsHelpers = require('../../types/props-helpers.js');
+var style = require('../../utils/style.js');
+var BaseStack_module = require('./BaseStack.module.scss.js');
+
+/**
+ * `BaseStack` is a layout component used internally to group elements together and apply a space between them.
+ */
+const BaseStack = /*#__PURE__*/React.forwardRef(function BaseStack(props, forwardedRef) {
+  const [marginProps, marginRest] = propsHelpers.splitByV3MarginProps(props);
+  const [layoutProps, layoutRest] = propsHelpers.splitByV3LayoutProps(marginRest);
+  const marginStyles = propsHelpers.getV3MarginStyles(marginProps);
+  const layoutStyles = propsHelpers.getV3LayoutStyles(layoutProps);
+  const {
+    children,
+    style: style$1,
+    className,
+    as = 'div',
+    display = 'flex',
+    direction,
+    justify,
+    align,
+    spacing,
+    reverse,
+    wrap,
+    ...rest
+  } = layoutRest;
+  return /*#__PURE__*/React.createElement(as, {
+    ref: forwardedRef,
+    style: {
+      '--b-stack-spacing': style.cssDimension(spacing),
+      ...marginStyles.style,
+      ...layoutStyles.style,
+      ...style$1
+    },
+    className: index.default(BaseStack_module.default.BaseStack, display && BaseStack_module.default[`display-${display}`], direction && BaseStack_module.default[`direction-${direction}`], justify && BaseStack_module.default[`justify-${justify}`], align && BaseStack_module.default[`align-${align}`], reverse && BaseStack_module.default.reverse, wrap && BaseStack_module.default.wrap, marginStyles.className, layoutStyles.className, className),
+    'data-testid': 'bezier-stack',
+    ...rest
+  }, children);
+});
+
+exports.BaseStack = BaseStack;
+//# sourceMappingURL=BaseStack.js.map

package/dist/cjs/v3/BaseStack/BaseStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseStack.js","sources":["../../../../src/v3/BaseStack/BaseStack.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n  getV3LayoutStyles,\n  getV3MarginStyles,\n  splitByV3LayoutProps,\n  splitByV3MarginProps,\n} from '~/src/types/props-helpers'\nimport { cssDimension } from '~/src/utils/style'\n\nimport type { BaseStackProps } from './BaseStack.types'\n\nimport styles from './BaseStack.module.scss'\n\n/**\n * `BaseStack` is a layout component used internally to group elements together and apply a space between them.\n */\nexport const BaseStack = forwardRef<HTMLElement, BaseStackProps>(\n  function BaseStack(props, forwardedRef) {\n    const [marginProps, marginRest] = splitByV3MarginProps(props)\n    const [layoutProps, layoutRest] = splitByV3LayoutProps(marginRest)\n    const marginStyles = getV3MarginStyles(marginProps)\n    const layoutStyles = getV3LayoutStyles(layoutProps)\n\n    const {\n      children,\n      style,\n      className,\n      as = 'div',\n      display = 'flex',\n      direction,\n      justify,\n      align,\n      spacing,\n      reverse,\n      wrap,\n      ...rest\n    } = layoutRest\n\n    return createElement(\n      as,\n      {\n        ref: forwardedRef,\n        style: {\n          '--b-stack-spacing': cssDimension(spacing),\n          ...marginStyles.style,\n          ...layoutStyles.style,\n          ...style,\n        },\n        className: classNames(\n          styles.BaseStack,\n          display && styles[`display-${display}`],\n          direction && styles[`direction-${direction}`],\n          justify && styles[`justify-${justify}`],\n          align && styles[`align-${align}`],\n          reverse && styles.reverse,\n          wrap && styles.wrap,\n          marginStyles.className,\n          layoutStyles.className,\n          className\n        ),\n        'data-testid': 'bezier-stack',\n        ...rest,\n      },\n      children\n    )\n  }\n)\n"],"names":["BaseStack","forwardRef","props","forwardedRef","marginProps","marginRest","splitByV3MarginProps","layoutProps","layoutRest","splitByV3LayoutProps","marginStyles","getV3MarginStyles","layoutStyles","getV3LayoutStyles","children","style","className","as","display","direction","justify","align","spacing","reverse","wrap","rest","createElement","ref","cssDimension","classNames","styles"],"mappings":";;;;;;;;AAkBA;AACA;AACA;AACO,MAAMA,SAAS,gBAAGC,gBAAU,CACjC,SAASD,SAASA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACtC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,iCAAoB,CAACJ,KAAK,CAAC;EAC7D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,iCAAoB,CAACJ,UAAU,CAAC;AAClE,EAAA,MAAMK,YAAY,GAAGC,8BAAiB,CAACP,WAAW,CAAC;AACnD,EAAA,MAAMQ,YAAY,GAAGC,8BAAiB,CAACN,WAAW,CAAC;EAEnD,MAAM;IACJO,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;AACVC,IAAAA,OAAO,GAAG,MAAM;IAChBC,SAAS;IACTC,OAAO;IACPC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPC,IAAI;IACJ,GAAGC;AACL,GAAC,GAAGjB,UAAU;EAEd,oBAAOkB,mBAAa,CAClBT,EAAE,EACF;AACEU,IAAAA,GAAG,EAAExB,YAAY;AACjBY,IAAAA,KAAK,EAAE;AACL,MAAA,mBAAmB,EAAEa,kBAAY,CAACN,OAAO,CAAC;MAC1C,GAAGZ,YAAY,CAACK,KAAK;MACrB,GAAGH,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;AACDC,IAAAA,SAAS,EAAEa,aAAU,CACnBC,wBAAM,CAAC9B,SAAS,EAChBkB,OAAO,IAAIY,wBAAM,CAAC,CAAA,QAAA,EAAWZ,OAAO,CAAE,CAAA,CAAC,EACvCC,SAAS,IAAIW,wBAAM,CAAC,CAAA,UAAA,EAAaX,SAAS,CAAA,CAAE,CAAC,EAC7CC,OAAO,IAAIU,wBAAM,CAAC,WAAWV,OAAO,CAAA,CAAE,CAAC,EACvCC,KAAK,IAAIS,wBAAM,CAAC,CAAST,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCE,OAAO,IAAIO,wBAAM,CAACP,OAAO,EACzBC,IAAI,IAAIM,wBAAM,CAACN,IAAI,EACnBd,YAAY,CAACM,SAAS,EACtBJ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,cAAc;IAC7B,GAAGS;GACJ,EACDX,QACF,CAAC;AACH,CACF;;;;"}

package/dist/cjs/v3/BaseStack/BaseStack.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"BaseStack":"b-foYHP","display-flex":"b--9eiH","display-inline-flex":"b-EEF2m","direction-horizontal":"b-Kn2sy","reverse":"b-FvR4T","direction-vertical":"b-m2NSg","justify-start":"b-59WFP","justify-end":"b-pE2pW","justify-center":"b-WflJV","justify-stretch":"b-Ie6La","justify-between":"b-9d3bs","align-start":"b-GAaLq","align-end":"b-WMd8j","align-center":"b-vM3rU","align-stretch":"b-y0Wsy","align-baseline":"b-fXbhk","wrap":"b-0DrX9"};
+
+exports.default = styles;
+//# sourceMappingURL=BaseStack.module.scss.js.map

package/dist/cjs/v3/BaseStack/BaseStack.module.scss.js.map

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

package/dist/cjs/v3/Box/Box.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var propsHelpers = require('../../types/props-helpers.js');
+var Box_module = require('./Box.module.scss.js');
+
+/**
+ * `Box` is a primitive layout component. It provides an easy way to access design tokens.
+ * @example
+ *
+ * ```tsx
+ * <Box
+ *   width="100px"
+ *   height="100px"
+ *   padding="6px"
+ *   margin="6px"
+ *   backgroundColor="fill-neutral"
+ * >
+ *   <div>{ ... }</div>
+ * </Box>
+ * ```
+ */
+const Box = /*#__PURE__*/React.forwardRef(function Box(props, forwardedRef) {
+  const [marginProps, marginRest] = propsHelpers.splitByV3MarginProps(props);
+  const [layoutProps, layoutRest] = propsHelpers.splitByV3LayoutProps(marginRest);
+  const marginStyles = propsHelpers.getV3MarginStyles(marginProps);
+  const layoutStyles = propsHelpers.getV3LayoutStyles(layoutProps);
+  const {
+    children,
+    style,
+    className,
+    as = 'div',
+    display,
+    ...rest
+  } = layoutRest;
+
+  /**
+   * NOTE: Keep the existing loose polymorphic Box pattern for API parity.
+   * TODO: Replace this with a typed polymorphic helper when ref inference is standardized.
+   */
+  return /*#__PURE__*/React.createElement(as, {
+    ref: forwardedRef,
+    style: {
+      ...marginStyles.style,
+      ...layoutStyles.style,
+      ...style
+    },
+    className: index.default(Box_module.default.Box, display && Box_module.default[`display-${display}`], marginStyles.className, layoutStyles.className, className),
+    'data-testid': 'bezier-box',
+    ...rest
+  }, children);
+});
+
+exports.Box = Box;
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sources":["../../../../src/v3/Box/Box.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\nimport type { CSSProperties } from 'react'\n\nimport classNames from 'classnames'\n\nimport {\n  getV3LayoutStyles,\n  getV3MarginStyles,\n  splitByV3LayoutProps,\n  splitByV3MarginProps,\n} from '~/src/types/props-helpers'\n\nimport type { BoxProps } from './Box.types'\n\nimport styles from './Box.module.scss'\n\n/**\n * `Box` is a primitive layout component. It provides an easy way to access design tokens.\n * @example\n *\n * ```tsx\n * <Box\n *   width=\"100px\"\n *   height=\"100px\"\n *   padding=\"6px\"\n *   margin=\"6px\"\n *   backgroundColor=\"fill-neutral\"\n * >\n *   <div>{ ... }</div>\n * </Box>\n * ```\n */\nexport const Box = forwardRef<HTMLElement, BoxProps>(\n  function Box(props, forwardedRef) {\n    const [marginProps, marginRest] = splitByV3MarginProps(props)\n    const [layoutProps, layoutRest] = splitByV3LayoutProps(marginRest)\n    const marginStyles = getV3MarginStyles(marginProps)\n    const layoutStyles = getV3LayoutStyles(layoutProps)\n\n    const {\n      children,\n      style,\n      className,\n      as = 'div',\n      display,\n      ...rest\n    } = layoutRest\n\n    /**\n     * NOTE: Keep the existing loose polymorphic Box pattern for API parity.\n     * TODO: Replace this with a typed polymorphic helper when ref inference is standardized.\n     */\n    return createElement(\n      as,\n      {\n        ref: forwardedRef,\n        style: {\n          ...marginStyles.style,\n          ...layoutStyles.style,\n          ...style,\n        } as CSSProperties,\n        className: classNames(\n          styles.Box,\n          display && styles[`display-${display}`],\n          marginStyles.className,\n          layoutStyles.className,\n          className\n        ),\n        'data-testid': 'bezier-box',\n        ...rest,\n      },\n      children\n    )\n  }\n)\n"],"names":["Box","forwardRef","props","forwardedRef","marginProps","marginRest","splitByV3MarginProps","layoutProps","layoutRest","splitByV3LayoutProps","marginStyles","getV3MarginStyles","layoutStyles","getV3LayoutStyles","children","style","className","as","display","rest","createElement","ref","classNames","styles"],"mappings":";;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,gBAAGC,gBAAU,CAC3B,SAASD,GAAGA,CAACE,KAAK,EAAEC,YAAY,EAAE;EAChC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,iCAAoB,CAACJ,KAAK,CAAC;EAC7D,MAAM,CAACK,WAAW,EAAEC,UAAU,CAAC,GAAGC,iCAAoB,CAACJ,UAAU,CAAC;AAClE,EAAA,MAAMK,YAAY,GAAGC,8BAAiB,CAACP,WAAW,CAAC;AACnD,EAAA,MAAMQ,YAAY,GAAGC,8BAAiB,CAACN,WAAW,CAAC;EAEnD,MAAM;IACJO,QAAQ;IACRC,KAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,KAAK;IACVC,OAAO;IACP,GAAGC;AACL,GAAC,GAAGX,UAAU;;AAEd;AACJ;AACA;AACA;EACI,oBAAOY,mBAAa,CAClBH,EAAE,EACF;AACEI,IAAAA,GAAG,EAAElB,YAAY;AACjBY,IAAAA,KAAK,EAAE;MACL,GAAGL,YAAY,CAACK,KAAK;MACrB,GAAGH,YAAY,CAACG,KAAK;MACrB,GAAGA;KACa;IAClBC,SAAS,EAAEM,aAAU,CACnBC,kBAAM,CAACvB,GAAG,EACVkB,OAAO,IAAIK,kBAAM,CAAC,CAAA,QAAA,EAAWL,OAAO,CAAE,CAAA,CAAC,EACvCR,YAAY,CAACM,SAAS,EACtBJ,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;AACD,IAAA,aAAa,EAAE,YAAY;IAC3B,GAAGG;GACJ,EACDL,QACF,CAAC;AACH,CACF;;;;"}

package/dist/cjs/v3/Box/Box.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"Box":"b-NCORY","display-block":"b-nqPpE","display-inline-block":"b-hbMNP","display-inline":"b-yXu-S"};
+
+exports.default = styles;
+//# sourceMappingURL=Box.module.scss.js.map

package/dist/cjs/v3/Box/Box.module.scss.js.map

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

package/dist/cjs/v3/Divider/Divider.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../node_modules/@radix-ui/react-separator/dist/index.js');
+var index$1 = require('../../_virtual/index.js');
+var Divider_module = require('./Divider.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Divider = /*#__PURE__*/React.forwardRef(({
+  orientation = 'horizontal',
+  decorative,
+  withoutSideIndent = false,
+  withoutParallelIndent = false,
+  withoutIndent = false,
+  style,
+  className,
+  ...rest
+}, forwardedRef) => /*#__PURE__*/jsxRuntime.jsx(index.Root, {
+  asChild: true,
+  orientation: orientation,
+  decorative: decorative,
+  children: /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: forwardedRef,
+    style: style,
+    className: index$1.default(Divider_module.default.Divider, Divider_module.default[orientation], withoutIndent && Divider_module.default['without-indent'], withoutParallelIndent && Divider_module.default['without-parallel-indent'], withoutSideIndent && Divider_module.default['without-side-indent'], className),
+    role: "separator",
+    ...rest
+  })
+}));
+
+exports.Divider = Divider;
+//# sourceMappingURL=Divider.js.map

package/dist/cjs/v3/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../../src/v3/Divider/Divider.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport classNames from 'classnames'\n\nimport type { DividerProps } from './Divider.types'\n\nimport styles from './Divider.module.scss'\n\n/**\n * `Divider` is a component to visually or semantically separate content.\n * @example\n *\n * ```tsx\n * <Divider\n *   withoutSideIndent\n * />\n * ```\n */\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n  (\n    {\n      orientation = 'horizontal',\n      decorative,\n      withoutSideIndent = false,\n      withoutParallelIndent = false,\n      withoutIndent = false,\n      style,\n      className,\n      ...rest\n    },\n    forwardedRef\n  ) => (\n    <SeparatorPrimitive.Root\n      asChild\n      orientation={orientation}\n      decorative={decorative}\n    >\n      <div\n        ref={forwardedRef}\n        style={style}\n        className={classNames(\n          styles.Divider,\n          styles[orientation],\n          withoutIndent && styles['without-indent'],\n          withoutParallelIndent && styles['without-parallel-indent'],\n          withoutSideIndent && styles['without-side-indent'],\n          className\n        )}\n        role=\"separator\"\n        {...rest}\n      />\n    </SeparatorPrimitive.Root>\n  )\n)\n"],"names":["Divider","forwardRef","orientation","decorative","withoutSideIndent","withoutParallelIndent","withoutIndent","style","className","rest","forwardedRef","_jsx","SeparatorPrimitive","asChild","children","ref","classNames","styles","role"],"mappings":";;;;;;;;AAqBaA,MAAAA,OAAO,gBAAGC,gBAAU,CAC/B,CACE;AACEC,EAAAA,WAAW,GAAG,YAAY;EAC1BC,UAAU;AACVC,EAAAA,iBAAiB,GAAG,KAAK;AACzBC,EAAAA,qBAAqB,GAAG,KAAK;AAC7BC,EAAAA,aAAa,GAAG,KAAK;EACrBC,KAAK;EACLC,SAAS;EACT,GAAGC;AACL,CAAC,EACDC,YAAY,kBAEZC,cAAA,CAACC,UAAuB,EAAA;EACtBC,OAAO,EAAA,IAAA;AACPX,EAAAA,WAAW,EAAEA,WAAY;AACzBC,EAAAA,UAAU,EAAEA,UAAW;AAAAW,EAAAA,QAAA,eAEvBH,cAAA,CAAA,KAAA,EAAA;AACEI,IAAAA,GAAG,EAAEL,YAAa;AAClBH,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,SAAS,EAAEQ,eAAU,CACnBC,sBAAM,CAACjB,OAAO,EACdiB,sBAAM,CAACf,WAAW,CAAC,EACnBI,aAAa,IAAIW,sBAAM,CAAC,gBAAgB,CAAC,EACzCZ,qBAAqB,IAAIY,sBAAM,CAAC,yBAAyB,CAAC,EAC1Db,iBAAiB,IAAIa,sBAAM,CAAC,qBAAqB,CAAC,EAClDT,SACF,CAAE;AACFU,IAAAA,IAAI,EAAC,WAAW;IAAA,GACZT;GACL;AAAC,CACqB,CAE7B;;;;"}

package/dist/cjs/v3/Divider/Divider.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"Divider":"b-e5AgO","horizontal":"b-dF18T","without-indent":"b-MpPre","without-side-indent":"b-pdwkd","without-parallel-indent":"b-Ml4bV","vertical":"b-q9wle"};
+
+exports.default = styles;
+//# sourceMappingURL=Divider.module.scss.js.map

package/dist/cjs/v3/Divider/Divider.module.scss.js.map

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

package/dist/cjs/v3/HStack/HStack.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var BaseStack = require('../BaseStack/BaseStack.js');
+
+/**
+ * `HStack` is a shorthand component equivalent to `Stack` with a horizontal direction property.
+ * @see BaseStack
+ */
+const HStack = /*#__PURE__*/React.forwardRef(function HStack(props, forwardedRef) {
+  return /*#__PURE__*/React.createElement(BaseStack.BaseStack, {
+    ...props,
+    direction: 'horizontal',
+    ref: forwardedRef
+  });
+});
+
+exports.HStack = HStack;
+//# sourceMappingURL=HStack.js.map

package/dist/cjs/v3/HStack/HStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.js","sources":["../../../../src/v3/HStack/HStack.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport { BaseStack } from '~/src/v3/BaseStack/BaseStack'\n\nimport type { HStackProps } from './HStack.types'\n\n/**\n * `HStack` is a shorthand component equivalent to `Stack` with a horizontal direction property.\n * @see BaseStack\n */\nexport const HStack = forwardRef<HTMLElement, HStackProps>(\n  function HStack(props, forwardedRef) {\n    return createElement(BaseStack, {\n      ...props,\n      direction: 'horizontal',\n      ref: forwardedRef,\n    })\n  }\n)\n"],"names":["HStack","forwardRef","props","forwardedRef","createElement","BaseStack","direction","ref"],"mappings":";;;;;AAQA;AACA;AACA;AACA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,SAASD,MAAMA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACnC,oBAAOC,mBAAa,CAACC,mBAAS,EAAE;AAC9B,IAAA,GAAGH,KAAK;AACRI,IAAAA,SAAS,EAAE,YAAY;AACvBC,IAAAA,GAAG,EAAEJ;AACP,GAAC,CAAC;AACJ,CACF;;;;"}

package/dist/cjs/v3/Icon/Icon.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var propsHelpers = require('../../types/props-helpers.js');
+var style = require('../../utils/style.js');
+var Icon_module = require('./Icon.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const DEFAULT_ICON_COLOR = 'icon-neutral';
+
+/**
+ * `Icon` renders a Bezier icon as an SVG element.
+ * Inject an icon component from the `@channel.io/bezier-icons` package into the `source` prop.
+ * @example
+ *
+ * ```tsx
+ * import { HeartFilledIcon } from '@channel.io/bezier-icons'
+ *
+ * <Icon
+ *   source={HeartFilledIcon}
+ *   size="24"
+ *   color="icon-neutral"
+ * />
+ * ```
+ */
+const Icon = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Icon(props, forwardedRef) {
+  const [marginProps, marginRest] = propsHelpers.splitByMarginProps(props);
+  const marginStyles = propsHelpers.getMarginStyles(marginProps);
+  const {
+    className,
+    size = '24',
+    color = DEFAULT_ICON_COLOR,
+    source: SourceElement,
+    style: style$1,
+    ...rest
+  } = marginRest;
+  return /*#__PURE__*/jsxRuntime.jsx(SourceElement, {
+    ref: forwardedRef,
+    style: {
+      '--b-v3-icon-color': style.colorTokenCssVar(color),
+      ...marginStyles.style,
+      ...style$1
+    },
+    className: index.default(Icon_module.default.Icon, Icon_module.default[`size-${size}`], marginStyles.className, className),
+    ...rest
+  });
+}));
+
+exports.Icon = Icon;
+//# sourceMappingURL=Icon.js.map

package/dist/cjs/v3/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../../src/v3/Icon/Icon.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { type BetaSemanticColor } from '~/src/types/beta-tokens'\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { colorTokenCssVar } from '~/src/utils/style'\n\nimport { type IconProps } from './Icon.types'\n\nimport styles from './Icon.module.scss'\n\nconst DEFAULT_ICON_COLOR = 'icon-neutral' satisfies BetaSemanticColor\n\n/**\n * `Icon` renders a Bezier icon as an SVG element.\n * Inject an icon component from the `@channel.io/bezier-icons` package into the `source` prop.\n * @example\n *\n * ```tsx\n * import { HeartFilledIcon } from '@channel.io/bezier-icons'\n *\n * <Icon\n *   source={HeartFilledIcon}\n *   size=\"24\"\n *   color=\"icon-neutral\"\n * />\n * ```\n */\nexport const Icon = memo(\n  forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {\n    const [marginProps, marginRest] = splitByMarginProps(props)\n    const marginStyles = getMarginStyles(marginProps)\n\n    const {\n      className,\n      size = '24',\n      color = DEFAULT_ICON_COLOR,\n      source: SourceElement,\n      style,\n      ...rest\n    } = marginRest\n\n    return (\n      <SourceElement\n        ref={forwardedRef}\n        style={\n          {\n            '--b-v3-icon-color': colorTokenCssVar(color),\n            ...marginStyles.style,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={classNames(\n          styles.Icon,\n          styles[`size-${size}`],\n          marginStyles.className,\n          className\n        )}\n        {...rest}\n      />\n    )\n  })\n)\n"],"names":["DEFAULT_ICON_COLOR","Icon","memo","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","className","size","color","source","SourceElement","style","rest","_jsx","ref","colorTokenCssVar","classNames","styles"],"mappings":";;;;;;;;;AAeA,MAAMA,kBAAkB,GAAG,cAA0C;;AAErE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,IAAI,gBAAGC,UAAI,cACtBC,gBAAU,CAA2B,SAASF,IAAIA,CAACG,KAAK,EAAEC,YAAY,EAAE;EACtE,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,SAAS;AACTC,IAAAA,IAAI,GAAG,IAAI;AACXC,IAAAA,KAAK,GAAGb,kBAAkB;AAC1Bc,IAAAA,MAAM,EAAEC,aAAa;WACrBC,OAAK;IACL,GAAGC;AACL,GAAC,GAAGV,UAAU;EAEd,oBACEW,cAAA,CAACH,aAAa,EAAA;AACZI,IAAAA,GAAG,EAAEd,YAAa;AAClBW,IAAAA,KAAK,EACH;AACE,MAAA,mBAAmB,EAAEI,sBAAgB,CAACP,KAAK,CAAC;MAC5C,GAAGJ,YAAY,CAACO,KAAK;MACrB,GAAGA;KAEN;AACDL,IAAAA,SAAS,EAAEU,aAAU,CACnBC,mBAAM,CAACrB,IAAI,EACXqB,mBAAM,CAAC,QAAQV,IAAI,CAAA,CAAE,CAAC,EACtBH,YAAY,CAACE,SAAS,EACtBA,SACF,CAAE;IAAA,GACEM;AAAI,GACT,CAAC;AAEN,CAAC,CACH;;;;"}

package/dist/cjs/v3/Icon/Icon.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"Icon":"b-TSnxX","size-10":"b-8XnZa","size-12":"b-RpGax","size-16":"b-iWSek","size-20":"b-pyIwX","size-24":"b-XZVOM","size-36":"b-oFkGz","size-44":"b-bq26x"};
+
+exports.default = styles;
+//# sourceMappingURL=Icon.module.scss.js.map

package/dist/cjs/v3/Icon/Icon.module.scss.js.map

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

package/dist/cjs/v3/SmoothCornersBox/SmoothCornersBox.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var style = require('../../utils/style.js');
+var SmoothCornersBox_module = require('./SmoothCornersBox.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
+var FeatureProvider = require('../../components/FeatureProvider/FeatureProvider.js');
+var FeatureProvider_types = require('../../components/FeatureProvider/FeatureProvider.types.js');
+
+const SmoothCornersBox = /*#__PURE__*/React.forwardRef(function SmoothCornersBox({
+  children,
+  style: style$1,
+  className,
+  disabled,
+  borderRadius,
+  margin,
+  shadow,
+  backgroundColor,
+  backgroundImage,
+  ...rest
+}, forwardedRef) {
+  var _shadow$blurRadius, _shadow$spreadRadius;
+  const shadowBlurRadius = (_shadow$blurRadius = shadow === null || shadow === void 0 ? void 0 : shadow.blurRadius) !== null && _shadow$blurRadius !== void 0 ? _shadow$blurRadius : 0;
+  const shadowSpreadRadius = (_shadow$spreadRadius = shadow === null || shadow === void 0 ? void 0 : shadow.spreadRadius) !== null && _shadow$spreadRadius !== void 0 ? _shadow$spreadRadius : 0;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    style: {
+      ...style$1,
+      '--b-smooth-corners-box-border-radius': borderRadius,
+      '--b-smooth-corners-box-shadow-offset-x': style.px(shadow === null || shadow === void 0 ? void 0 : shadow.offsetX),
+      '--b-smooth-corners-box-shadow-offset-y': style.px(shadow === null || shadow === void 0 ? void 0 : shadow.offsetY),
+      '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,
+      '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,
+      '--b-smooth-corners-box-shadow-color': style.colorTokenCssVar(shadow === null || shadow === void 0 ? void 0 : shadow.color),
+      /**
+       * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.
+       * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}
+       */
+      '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`,
+      '--b-smooth-corners-box-margin': `${margin !== null && margin !== void 0 ? margin : 0}px`,
+      '--b-smooth-corners-box-background-color': style.colorTokenCssVar(backgroundColor),
+      '--b-smooth-corners-box-background-image': style.cssUrl(backgroundImage)
+    },
+    className: index.default(SmoothCornersBox_module.default.SmoothCornersBox, className),
+    "data-state": FeatureProvider.useFeatureFlag(FeatureProvider_types.FeatureType.SmoothCorners) && !disabled ? 'enabled' : 'disabled',
+    children: children
+  });
+});
+
+exports.SmoothCornersBox = SmoothCornersBox;
+//# sourceMappingURL=SmoothCornersBox.js.map

package/dist/cjs/v3/SmoothCornersBox/SmoothCornersBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmoothCornersBox.js","sources":["../../../../src/v3/SmoothCornersBox/SmoothCornersBox.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport { colorTokenCssVar, cssUrl, px } from '~/src/utils/style'\n\nimport { FeatureType, useFeatureFlag } from '~/src/components/FeatureProvider'\n\nimport { type SmoothCornersBoxProps } from './SmoothCornersBox.types'\n\nimport styles from './SmoothCornersBox.module.scss'\n\n/**\n * `SmoothCornersBox` is a simple `div` element with smooth corners.\n * It is available by enabling the `SmoothCornersFeature`.\n * @example\n *\n * ```tsx\n * <AppProvider features={[SmoothCornersFeature]}>\n *   <SmoothCornersBox />\n * </AppProvider>\n * ```\n */\nexport const SmoothCornersBox = forwardRef<\n  HTMLDivElement,\n  SmoothCornersBoxProps\n>(function SmoothCornersBox(\n  {\n    children,\n    style,\n    className,\n    disabled,\n    borderRadius,\n    margin,\n    shadow,\n    backgroundColor,\n    backgroundImage,\n    ...rest\n  },\n  forwardedRef\n) {\n  const shadowBlurRadius = shadow?.blurRadius ?? 0\n  const shadowSpreadRadius = shadow?.spreadRadius ?? 0\n\n  return (\n    <div\n      {...rest}\n      ref={forwardedRef}\n      style={\n        {\n          ...style,\n          '--b-smooth-corners-box-border-radius': borderRadius,\n          '--b-smooth-corners-box-shadow-offset-x': px(shadow?.offsetX),\n          '--b-smooth-corners-box-shadow-offset-y': px(shadow?.offsetY),\n          '--b-smooth-corners-box-shadow-blur-radius': `${shadowBlurRadius}px`,\n          '--b-smooth-corners-box-shadow-spread-radius': `${shadowSpreadRadius}px`,\n          '--b-smooth-corners-box-shadow-color': colorTokenCssVar(\n            shadow?.color\n          ),\n          /**\n           * NOTE: Calculate in javascript because it cannot access calculated values via CSS calc() in the paint worklet.\n           * @see {@link ~/src/features/SmoothCorners/smoothCornersScript.ts}\n           */\n          '--b-smooth-corners-box-padding': `${Math.max(shadowBlurRadius, shadowSpreadRadius) * 2}px`,\n          '--b-smooth-corners-box-margin': `${margin ?? 0}px`,\n          '--b-smooth-corners-box-background-color':\n            colorTokenCssVar(backgroundColor),\n          '--b-smooth-corners-box-background-image': cssUrl(backgroundImage),\n        } as React.CSSProperties\n      }\n      className={classNames(styles.SmoothCornersBox, className)}\n      data-state={\n        useFeatureFlag(FeatureType.SmoothCorners) && !disabled\n          ? 'enabled'\n          : 'disabled'\n      }\n    >\n      {children}\n    </div>\n  )\n})\n"],"names":["SmoothCornersBox","forwardRef","children","style","className","disabled","borderRadius","margin","shadow","backgroundColor","backgroundImage","rest","forwardedRef","_shadow$blurRadius","_shadow$spreadRadius","shadowBlurRadius","blurRadius","shadowSpreadRadius","spreadRadius","_jsx","ref","px","offsetX","offsetY","colorTokenCssVar","color","Math","max","cssUrl","classNames","styles","useFeatureFlag","FeatureType","SmoothCorners"],"mappings":";;;;;;;;;;MA0BaA,gBAAgB,gBAAGC,gBAAU,CAGxC,SAASD,gBAAgBA,CACzB;EACEE,QAAQ;SACRC,OAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,YAAY;EACZC,MAAM;EACNC,MAAM;EACNC,eAAe;EACfC,eAAe;EACf,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EAAA,IAAAC,kBAAA,EAAAC,oBAAA;AACA,EAAA,MAAMC,gBAAgB,GAAAF,CAAAA,kBAAA,GAAGL,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEQ,UAAU,MAAAH,IAAAA,IAAAA,kBAAA,KAAAA,KAAAA,CAAAA,GAAAA,kBAAA,GAAI,CAAC;AAChD,EAAA,MAAMI,kBAAkB,GAAAH,CAAAA,oBAAA,GAAGN,MAAM,aAANA,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAANA,MAAM,CAAEU,YAAY,MAAAJ,IAAAA,IAAAA,oBAAA,KAAAA,KAAAA,CAAAA,GAAAA,oBAAA,GAAI,CAAC;AAEpD,EAAA,oBACEK,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMR,IAAI;AACRS,IAAAA,GAAG,EAAER,YAAa;AAClBT,IAAAA,KAAK,EACH;AACE,MAAA,GAAGA,OAAK;AACR,MAAA,sCAAsC,EAAEG,YAAY;MACpD,wCAAwC,EAAEe,QAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEc,OAAO,CAAC;MAC7D,wCAAwC,EAAED,QAAE,CAACb,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEe,OAAO,CAAC;MAC7D,2CAA2C,EAAE,CAAGR,EAAAA,gBAAgB,CAAI,EAAA,CAAA;MACpE,6CAA6C,EAAE,CAAGE,EAAAA,kBAAkB,CAAI,EAAA,CAAA;MACxE,qCAAqC,EAAEO,sBAAgB,CACrDhB,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,MAAM,CAAEiB,KACV,CAAC;AACD;AACV;AACA;AACA;AACU,MAAA,gCAAgC,EAAE,CAAA,EAAGC,IAAI,CAACC,GAAG,CAACZ,gBAAgB,EAAEE,kBAAkB,CAAC,GAAG,CAAC,CAAI,EAAA,CAAA;MAC3F,+BAA+B,EAAE,GAAGV,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,MAAM,GAAI,CAAC,CAAI,EAAA,CAAA;AACnD,MAAA,yCAAyC,EACvCiB,sBAAgB,CAACf,eAAe,CAAC;MACnC,yCAAyC,EAAEmB,YAAM,CAAClB,eAAe;KAEpE;IACDN,SAAS,EAAEyB,aAAU,CAACC,+BAAM,CAAC9B,gBAAgB,EAAEI,SAAS,CAAE;AAC1D,IAAA,YAAA,EACE2B,8BAAc,CAACC,iCAAW,CAACC,aAAa,CAAC,IAAI,CAAC5B,QAAQ,GAClD,SAAS,GACT,UACL;AAAAH,IAAAA,QAAA,EAEAA;AAAQ,GACN,CAAC;AAEV,CAAC;;;;"}

package/dist/cjs/v3/SmoothCornersBox/SmoothCornersBox.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"SmoothCornersBox":"b-0OsYn"};
+
+exports.default = styles;
+//# sourceMappingURL=SmoothCornersBox.module.scss.js.map

package/dist/cjs/v3/SmoothCornersBox/SmoothCornersBox.module.scss.js.map

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

package/dist/cjs/v3/Spinner/Spinner.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var style = require('../../utils/style.js');
+var Spinner_module = require('./Spinner.module.scss.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const DEFAULT_SPINNER_COLOR = 'icon-neutral';
+
+/**
+ * `Spinner` is a component for indicating loading state.
+ * @example
+ *
+ * ```tsx
+ * <Spinner
+ *   size="m"
+ *   color="icon-neutral"
+ * />
+ * ```
+ */
+const Spinner = /*#__PURE__*/React.forwardRef(function Spinner({
+  style: style$1,
+  className,
+  size = 'm',
+  color = DEFAULT_SPINNER_COLOR,
+  role = 'status',
+  'aria-label': ariaLabel,
+  ...rest
+}, forwardedRef) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    role: role,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : role === 'status' ? 'Loading' : undefined,
+    style: {
+      '--b-v3-spinner-color': style.colorTokenCssVar(color),
+      ...style$1
+    },
+    className: index.default(Spinner_module.default.Spinner, Spinner_module.default[`size-${size}`], className)
+  });
+});
+
+exports.Spinner = Spinner;
+//# sourceMappingURL=Spinner.js.map

package/dist/cjs/v3/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../../src/v3/Spinner/Spinner.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef } from 'react'\nimport * as React from 'react'\n\nimport classNames from 'classnames'\n\nimport type { BetaSemanticColor } from '~/src/types/beta-tokens'\nimport { colorTokenCssVar } from '~/src/utils/style'\n\nimport type { SpinnerProps } from './Spinner.types'\n\nimport styles from './Spinner.module.scss'\n\nconst DEFAULT_SPINNER_COLOR = 'icon-neutral' satisfies BetaSemanticColor\n\n/**\n * `Spinner` is a component for indicating loading state.\n * @example\n *\n * ```tsx\n * <Spinner\n *   size=\"m\"\n *   color=\"icon-neutral\"\n * />\n * ```\n */\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      style,\n      className,\n      size = 'm',\n      color = DEFAULT_SPINNER_COLOR,\n      role = 'status',\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    forwardedRef\n  ) {\n    return (\n      <div\n        {...rest}\n        ref={forwardedRef}\n        role={role}\n        aria-label={ariaLabel ?? (role === 'status' ? 'Loading' : undefined)}\n        style={\n          {\n            '--b-v3-spinner-color': colorTokenCssVar(color),\n            ...style,\n          } as React.CSSProperties\n        }\n        className={classNames(\n          styles.Spinner,\n          styles[`size-${size}`],\n          className\n        )}\n      />\n    )\n  }\n)\n"],"names":["DEFAULT_SPINNER_COLOR","Spinner","forwardRef","style","className","size","color","role","ariaLabel","rest","forwardedRef","_jsx","ref","undefined","colorTokenCssVar","classNames","styles"],"mappings":";;;;;;;;AAcA,MAAMA,qBAAqB,GAAG,cAA0C;;AAExE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaC,OAAO,gBAAGC,gBAAU,CAC/B,SAASD,OAAOA,CACd;SACEE,OAAK;EACLC,SAAS;AACTC,EAAAA,IAAI,GAAG,GAAG;AACVC,EAAAA,KAAK,GAAGN,qBAAqB;AAC7BO,EAAAA,IAAI,GAAG,QAAQ;AACf,EAAA,YAAY,EAAEC,SAAS;EACvB,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GACMF,IAAI;AACRG,IAAAA,GAAG,EAAEF,YAAa;AAClBH,IAAAA,IAAI,EAAEA,IAAK;AACX,IAAA,YAAA,EAAYC,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,GAAKD,IAAI,KAAK,QAAQ,GAAG,SAAS,GAAGM,SAAW;AACrEV,IAAAA,KAAK,EACH;AACE,MAAA,sBAAsB,EAAEW,sBAAgB,CAACR,KAAK,CAAC;MAC/C,GAAGH;KAEN;AACDC,IAAAA,SAAS,EAAEW,aAAU,CACnBC,sBAAM,CAACf,OAAO,EACde,sBAAM,CAAC,CAAQX,KAAAA,EAAAA,IAAI,CAAE,CAAA,CAAC,EACtBD,SACF;AAAE,GACH,CAAC;AAEN,CACF;;;;"}

package/dist/cjs/v3/Spinner/Spinner.module.scss.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {"Spinner":"b-Hpx-S","spin":"b-yJKhF","size-xl":"b-IAH53","size-l":"b-AXdKC","size-m":"b-g2Pa4","size-s":"b-ZsoNP","size-xs":"b-y9Cq5"};
+
+exports.default = styles;
+//# sourceMappingURL=Spinner.module.scss.js.map

package/dist/cjs/v3/Spinner/Spinner.module.scss.js.map

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

package/dist/cjs/v3/Text/Text.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var propsHelpers = require('../../types/props-helpers.js');
+var style = require('../../utils/style.js');
+var type = require('../../utils/type.js');
+var Text_module = require('./Text.module.scss.js');
+
+function fontWeightTokenCssVar(fontWeight) {
+  return fontWeight ? `var(--typography-font-weight-${fontWeight})` : undefined;
+}
+
+/**
+ * `Text` is a component for representing the typography of a design system.
+ * @example
+ *
+ * ```tsx
+ * <Text
+ *   typo="15"
+ *   color="text-neutral"
+ * >
+ *   Hello, Channel!
+ * </Text>
+ * ```
+ */
+const Text = /*#__PURE__*/React.forwardRef(function Text(props, forwardedRef) {
+  const [marginProps, marginRest] = propsHelpers.splitByMarginProps(props);
+  const marginStyles = propsHelpers.getMarginStyles(marginProps);
+  const {
+    children,
+    style: style$1,
+    className,
+    as = 'span',
+    typo = '15',
+    color,
+    bold,
+    fontWeight,
+    italic,
+    truncated,
+    align,
+    ...rest
+  } = marginRest;
+  const isMultiLineTruncated = type.isNumber(truncated) && truncated >= 1;
+  return /*#__PURE__*/React.createElement(as, {
+    ref: forwardedRef,
+    style: {
+      '--b-text-color': style.colorTokenCssVar(color),
+      '--b-text-font-weight': fontWeightTokenCssVar(fontWeight),
+      '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,
+      ...marginStyles.style,
+      ...style$1
+    },
+    className: index.default(Text_module.default.Text, Text_module.default[`typo-${typo}`], bold && Text_module.default.bold, italic && Text_module.default.italic, truncated === true ? Text_module.default.truncated : isMultiLineTruncated && Text_module.default['multi-line-truncated'], align && Text_module.default[`align-${align}`], marginStyles.className, className),
+    ...rest
+  }, children);
+});
+
+exports.Text = Text;
+//# sourceMappingURL=Text.js.map

package/dist/cjs/v3/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../../src/v3/Text/Text.tsx"],"sourcesContent":["'use client'\n\nimport { createElement, forwardRef } from 'react'\n\nimport classNames from 'classnames'\n\nimport { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'\nimport { colorTokenCssVar } from '~/src/utils/style'\nimport { isNumber } from '~/src/utils/type'\n\nimport { type TextProps } from './Text.types'\n\nimport styles from './Text.module.scss'\n\nfunction fontWeightTokenCssVar(fontWeight?: TextProps['fontWeight']) {\n  return fontWeight ? `var(--typography-font-weight-${fontWeight})` : undefined\n}\n\n/**\n * `Text` is a component for representing the typography of a design system.\n * @example\n *\n * ```tsx\n * <Text\n *   typo=\"15\"\n *   color=\"text-neutral\"\n * >\n *   Hello, Channel!\n * </Text>\n * ```\n */\nexport const Text = forwardRef<HTMLElement, TextProps>(\n  function Text(props, forwardedRef) {\n    const [marginProps, marginRest] = splitByMarginProps(props)\n    const marginStyles = getMarginStyles(marginProps)\n\n    const {\n      children,\n      style,\n      className,\n      as = 'span',\n      typo = '15',\n      color,\n      bold,\n      fontWeight,\n      italic,\n      truncated,\n      align,\n      ...rest\n    } = marginRest\n    const isMultiLineTruncated = isNumber(truncated) && truncated >= 1\n\n    return createElement(\n      as,\n      {\n        ref: forwardedRef,\n        style: {\n          '--b-text-color': colorTokenCssVar(color),\n          '--b-text-font-weight': fontWeightTokenCssVar(fontWeight),\n          '--b-text-line-clamp': isMultiLineTruncated ? truncated : undefined,\n          ...marginStyles.style,\n          ...style,\n        },\n        className: classNames(\n          styles.Text,\n          styles[`typo-${typo}`],\n          bold && styles.bold,\n          italic && styles.italic,\n          truncated === true\n            ? styles.truncated\n            : isMultiLineTruncated && styles['multi-line-truncated'],\n          align && styles[`align-${align}`],\n          marginStyles.className,\n          className\n        ),\n        ...rest,\n      },\n      children\n    )\n  }\n)\n"],"names":["fontWeightTokenCssVar","fontWeight","undefined","Text","forwardRef","props","forwardedRef","marginProps","marginRest","splitByMarginProps","marginStyles","getMarginStyles","children","style","className","as","typo","color","bold","italic","truncated","align","rest","isMultiLineTruncated","isNumber","createElement","ref","colorTokenCssVar","classNames","styles"],"mappings":";;;;;;;;;AAcA,SAASA,qBAAqBA,CAACC,UAAoC,EAAE;AACnE,EAAA,OAAOA,UAAU,GAAG,CAAA,6BAAA,EAAgCA,UAAU,CAAA,CAAA,CAAG,GAAGC,SAAS;AAC/E;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,IAAI,gBAAGC,gBAAU,CAC5B,SAASD,IAAIA,CAACE,KAAK,EAAEC,YAAY,EAAE;EACjC,MAAM,CAACC,WAAW,EAAEC,UAAU,CAAC,GAAGC,+BAAkB,CAACJ,KAAK,CAAC;AAC3D,EAAA,MAAMK,YAAY,GAAGC,4BAAe,CAACJ,WAAW,CAAC;EAEjD,MAAM;IACJK,QAAQ;WACRC,OAAK;IACLC,SAAS;AACTC,IAAAA,EAAE,GAAG,MAAM;AACXC,IAAAA,IAAI,GAAG,IAAI;IACXC,KAAK;IACLC,IAAI;IACJjB,UAAU;IACVkB,MAAM;IACNC,SAAS;IACTC,KAAK;IACL,GAAGC;AACL,GAAC,GAAGd,UAAU;EACd,MAAMe,oBAAoB,GAAGC,aAAQ,CAACJ,SAAS,CAAC,IAAIA,SAAS,IAAI,CAAC;EAElE,oBAAOK,mBAAa,CAClBV,EAAE,EACF;AACEW,IAAAA,GAAG,EAAEpB,YAAY;AACjBO,IAAAA,KAAK,EAAE;AACL,MAAA,gBAAgB,EAAEc,sBAAgB,CAACV,KAAK,CAAC;AACzC,MAAA,sBAAsB,EAAEjB,qBAAqB,CAACC,UAAU,CAAC;AACzD,MAAA,qBAAqB,EAAEsB,oBAAoB,GAAGH,SAAS,GAAGlB,SAAS;MACnE,GAAGQ,YAAY,CAACG,KAAK;MACrB,GAAGA;KACJ;IACDC,SAAS,EAAEc,aAAU,CACnBC,mBAAM,CAAC1B,IAAI,EACX0B,mBAAM,CAAC,CAAA,KAAA,EAAQb,IAAI,CAAA,CAAE,CAAC,EACtBE,IAAI,IAAIW,mBAAM,CAACX,IAAI,EACnBC,MAAM,IAAIU,mBAAM,CAACV,MAAM,EACvBC,SAAS,KAAK,IAAI,GACdS,mBAAM,CAACT,SAAS,GAChBG,oBAAoB,IAAIM,mBAAM,CAAC,sBAAsB,CAAC,EAC1DR,KAAK,IAAIQ,mBAAM,CAAC,CAASR,MAAAA,EAAAA,KAAK,CAAE,CAAA,CAAC,EACjCX,YAAY,CAACI,SAAS,EACtBA,SACF,CAAC;IACD,GAAGQ;GACJ,EACDV,QACF,CAAC;AACH,CACF;;;;"}