@channel.io/bezier-react 1.5.0 → 1.6.0

package/dist/esm/components/Avatars/AvatarGroup/AvatarGroup.mjs

@@ -0,0 +1,147 @@
+import React__default, { forwardRef, useCallback, useMemo } from 'react';
+import { MoreIcon } from '@channel.io/bezier-icons';
+import { isLastIndex } from '../../../utils/arrayUtils.mjs';
+import { noop } from '../../../utils/functionUtils.mjs';
+import { AvatarSize } from '../Avatar/Avatar.types.mjs';
+import { AVATAR_BORDER_RADIUS_PERCENTAGE, AVATAR_GROUP_DEFAULT_SPACING } from '../AvatarStyle.mjs';
+import { AvatarGroupEllipsisType } from './AvatarGroup.types.mjs';
+import { AvatarEllipsisIconWrapper, AvatarEllipsisIcon, AvatarEllipsisCountWrapper, AvatarEllipsisCount, AvatarGroup as AvatarGroup$1 } from './AvatarGroup.styled.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
+import { IconSize } from '../../Icon/Icon.types.mjs';
+import { Typography } from '../../../foundation/Typography.mjs';
+
+const MAX_AVATAR_LIST_COUNT = 99;
+const AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID = 'bezier-react-avatar-group-ellipsis-icon';
+function getRestAvatarListCountText(count, max) {
+  const restCount = count - max;
+  return `+${restCount > MAX_AVATAR_LIST_COUNT ? MAX_AVATAR_LIST_COUNT : restCount}`;
+}
+
+// TODO: Not specified
+function getProperIconSize(avatarSize) {
+  return {
+    [AvatarSize.Size20]: IconSize.XXS,
+    [AvatarSize.Size24]: IconSize.XS,
+    [AvatarSize.Size30]: IconSize.S,
+    [AvatarSize.Size36]: IconSize.Normal,
+    [AvatarSize.Size42]: IconSize.Normal,
+    [AvatarSize.Size48]: IconSize.L,
+    [AvatarSize.Size90]: IconSize.L,
+    [AvatarSize.Size120]: IconSize.L
+  }[avatarSize];
+}
+
+// TODO: Not specified
+function getProperTypoSize(avatarSize) {
+  return {
+    [AvatarSize.Size20]: Typography.Size12,
+    [AvatarSize.Size24]: Typography.Size13,
+    [AvatarSize.Size30]: Typography.Size15,
+    [AvatarSize.Size36]: Typography.Size16,
+    [AvatarSize.Size42]: Typography.Size18,
+    [AvatarSize.Size48]: Typography.Size24,
+    [AvatarSize.Size90]: Typography.Size24,
+    [AvatarSize.Size120]: Typography.Size24
+  }[avatarSize];
+}
+
+// TODO: Not specified
+function getProperEllipsisCountMarginRight(avatarSize) {
+  return {
+    [AvatarSize.Size20]: 4,
+    [AvatarSize.Size24]: 5,
+    [AvatarSize.Size30]: 6,
+    [AvatarSize.Size36]: 6,
+    [AvatarSize.Size42]: 6,
+    [AvatarSize.Size48]: 6,
+    [AvatarSize.Size90]: 6,
+    [AvatarSize.Size120]: 6
+  }[avatarSize];
+}
+const AvatarGroup = /*#__PURE__*/forwardRef(function AvatarGroup({
+  max,
+  size = AvatarSize.Size24,
+  spacing = AVATAR_GROUP_DEFAULT_SPACING,
+  ellipsisType = AvatarGroupEllipsisType.Icon,
+  onMouseEnterEllipsis = noop,
+  onMouseLeaveEllipsis = noop,
+  ellipsisInterpolation,
+  style,
+  className,
+  children,
+  ...rest
+}, forwardedRef) {
+  const renderAvatarElement = useCallback((avatar, avatarListCount) => {
+    const key = avatar.key ?? `${avatar.props.name}-${avatar.props.avatarUrl}`;
+    const shouldShowBorder = avatarListCount > 1 && spacing < 0;
+    const showBorder = avatar.props.showBorder || shouldShowBorder;
+    return /*#__PURE__*/React__default.cloneElement(avatar, {
+      key,
+      size,
+      showBorder
+    });
+  }, [size, spacing]);
+  const avatarListCount = useMemo(() => React__default.Children.count(children), [children]);
+  const AvatarListComponent = useMemo(() => {
+    if (avatarListCount <= max) {
+      return React__default.Children.map(children, avatar => /*#__PURE__*/React__default.isValidElement(avatar) && renderAvatarElement(avatar, avatarListCount));
+    }
+    const sliceEndIndex = max - avatarListCount;
+    const slicedAvatarList = React__default.Children.toArray(children).slice(0, sliceEndIndex);
+    return slicedAvatarList.map((avatar, index, arr) => {
+      if (! /*#__PURE__*/React__default.isValidElement(avatar)) {
+        return null;
+      }
+      const AvatarElement = renderAvatarElement(avatar, slicedAvatarList.length);
+      if (!isLastIndex(arr, index)) {
+        return AvatarElement;
+      }
+      if (ellipsisType === AvatarGroupEllipsisType.Icon) {
+        return /*#__PURE__*/React__default.createElement(AvatarEllipsisIconWrapper, {
+          "data-testid": AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID,
+          key: "ellipsis",
+          interpolation: ellipsisInterpolation,
+          onMouseEnter: onMouseEnterEllipsis,
+          onMouseLeave: onMouseLeaveEllipsis
+        }, /*#__PURE__*/React__default.createElement(AvatarEllipsisIcon, {
+          borderRadius: `${AVATAR_BORDER_RADIUS_PERCENTAGE}%`,
+          backgroundColor: "bgtxt-absolute-black-lightest"
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          source: MoreIcon,
+          size: getProperIconSize(size),
+          color: "bgtxt-absolute-white-dark"
+        })), AvatarElement);
+      }
+      if (ellipsisType === AvatarGroupEllipsisType.Count) {
+        return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+          key: "ellipsis"
+        }, AvatarElement, /*#__PURE__*/React__default.createElement(AvatarEllipsisCountWrapper, {
+          style: {
+            '--bezier-avatar-group-ellipsis-mr': `${getProperEllipsisCountMarginRight(size)}px`,
+            '--bezier-avatar-group-ellipsis-ml': `${Math.max(spacing, AVATAR_GROUP_DEFAULT_SPACING)}px`
+          },
+          onMouseEnter: onMouseEnterEllipsis,
+          onMouseLeave: onMouseLeaveEllipsis
+        }, /*#__PURE__*/React__default.createElement(AvatarEllipsisCount, {
+          forwardedAs: "span",
+          interpolation: ellipsisInterpolation,
+          typo: getProperTypoSize(size)
+        }, getRestAvatarListCountText(avatarListCount, max))));
+      }
+      return null;
+    });
+  }, [max, size, children, spacing, ellipsisType, ellipsisInterpolation, avatarListCount, renderAvatarElement, onMouseEnterEllipsis, onMouseLeaveEllipsis]);
+  return /*#__PURE__*/React__default.createElement(AvatarGroup$1, Object.assign({
+    role: "group",
+    ref: forwardedRef,
+    className: className,
+    style: {
+      ...style,
+      '--bezier-avatar-group-spacing': `${spacing}px`,
+      '--bezier-avatar-group-size': `${size}px`
+    }
+  }, rest), AvatarListComponent);
+});
+
+export { AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID, AvatarGroup };
+//# sourceMappingURL=AvatarGroup.mjs.map

package/dist/esm/components/Avatars/AvatarGroup/AvatarGroup.mjs.map

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

package/dist/esm/components/Avatars/AvatarGroup/AvatarGroup.styled.mjs

@@ -0,0 +1,32 @@
+import { ZIndex } from '../../../constants/ZIndex.mjs';
+import Text from '../../Text/Text.mjs';
+import { AlphaSmoothCornersBox } from '../../AlphaSmoothCornersBox/AlphaSmoothCornersBox.mjs';
+import { styled as FoundationStyled } from '../../../foundation/FoundationStyledComponent.mjs';
+
+const AvatarEllipsisCount = /*#__PURE__*/FoundationStyled(Text).withConfig({
+  displayName: "AvatarGroupstyled__AvatarEllipsisCount",
+  componentId: "sc-khfa1l-0"
+})(["position:relative;display:flex;align-items:center;height:var(--bezier-avatar-group-size);color:var(--txt-black-dark);", ""], ({
+  interpolation
+}) => interpolation);
+const AvatarGroup = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "AvatarGroupstyled__AvatarGroup",
+  componentId: "sc-khfa1l-1"
+})(["position:relative;z-index:", ";display:flex;& > * + *{margin-left:var(--bezier-avatar-group-spacing);}"], ZIndex.Base);
+const AvatarEllipsisIconWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "AvatarGroupstyled__AvatarEllipsisIconWrapper",
+  componentId: "sc-khfa1l-2"
+})(["position:relative;", ""], ({
+  interpolation
+}) => interpolation);
+const AvatarEllipsisCountWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "AvatarGroupstyled__AvatarEllipsisCountWrapper",
+  componentId: "sc-khfa1l-3"
+})(["padding-right:var(--bezier-avatar-group-ellipsis-mr);&&{margin-left:var(--bezier-avatar-group-ellipsis-ml);}"]);
+const AvatarEllipsisIcon = /*#__PURE__*/FoundationStyled(AlphaSmoothCornersBox).withConfig({
+  displayName: "AvatarGroupstyled__AvatarEllipsisIcon",
+  componentId: "sc-khfa1l-4"
+})(["position:absolute;top:0;right:0;z-index:", ";display:flex;align-items:center;justify-content:center;width:100%;height:100%;outline:none;"], ZIndex.Float);
+
+export { AvatarEllipsisCount, AvatarEllipsisCountWrapper, AvatarEllipsisIcon, AvatarEllipsisIconWrapper, AvatarGroup };
+//# sourceMappingURL=AvatarGroup.styled.mjs.map

package/dist/esm/components/Avatars/AvatarGroup/AvatarGroup.styled.mjs.map

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

package/dist/esm/components/Avatars/AvatarGroup/AvatarGroup.types.mjs

@@ -0,0 +1,8 @@
+let AvatarGroupEllipsisType = /*#__PURE__*/function (AvatarGroupEllipsisType) {
+  AvatarGroupEllipsisType["Icon"] = "Icon";
+  AvatarGroupEllipsisType["Count"] = "Count";
+  return AvatarGroupEllipsisType;
+}({});
+
+export { AvatarGroupEllipsisType };
+//# sourceMappingURL=AvatarGroup.types.mjs.map

package/dist/esm/components/Avatars/AvatarGroup/AvatarGroup.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.types.mjs","sources":["../../../../../src/components/Avatars/AvatarGroup/AvatarGroup.types.ts"],"sourcesContent":["import type {\n  AdditionalStylableProps,\n  BezierComponentProps,\n  ChildrenProps,\n  SizeProps,\n} from '~/src/types/ComponentProps'\n\nimport { type AvatarSize } from '~/src/components/Avatars/Avatar'\n\nexport enum AvatarGroupEllipsisType {\n  Icon = 'Icon',\n  Count = 'Count',\n}\n\ntype MouseEventHandler = React.MouseEventHandler<HTMLDivElement>\n\ninterface AvatarGroupOptions {\n  /**\n   * Maximum number of avatars to display.\n   *\n   * If the number of avatars exceeds this number, ellipsis will be displayed.\n   */\n  max: number\n\n  /**\n   * Spacing between the avatars.\n   *\n   * @note Spacing could be negative, which will make the avatars overlap each other.\n   *\n   * @default 4\n   */\n  spacing?: number\n\n  /**\n   * Controls how the ellipsis is displayed.\n   *\n   * @default AvatarGroupEllipsisType.Icon\n   */\n  ellipsisType?: AvatarGroupEllipsisType\n\n  /**\n   * Handler to be called when the mouse enters the ellipsis area.\n   */\n  onMouseEnterEllipsis?: MouseEventHandler\n\n  /**\n   * Handler to be called when the mouse leaves the ellipsis area.\n   */\n  onMouseLeaveEllipsis?: MouseEventHandler\n}\n\nexport interface AvatarGroupProps extends\n  BezierComponentProps,\n  ChildrenProps,\n  SizeProps<AvatarSize>,\n  AdditionalStylableProps<'ellipsis'>,\n  React.HTMLAttributes<HTMLDivElement>,\n  AvatarGroupOptions {}\n"],"names":["AvatarGroupEllipsisType"],"mappings":"AASYA,IAAAA,uBAAuB,0BAAvBA,uBAAuB,EAAA;EAAvBA,uBAAuB,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAvBA,uBAAuB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAvBA,uBAAuB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/components/Avatars/AvatarStyle.mjs

@@ -0,0 +1,5 @@
+const AVATAR_BORDER_RADIUS_PERCENTAGE = 42;
+const AVATAR_GROUP_DEFAULT_SPACING = 4;
+
+export { AVATAR_BORDER_RADIUS_PERCENTAGE, AVATAR_GROUP_DEFAULT_SPACING };
+//# sourceMappingURL=AvatarStyle.mjs.map

package/dist/esm/components/Avatars/AvatarStyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStyle.mjs","sources":["../../../../src/components/Avatars/AvatarStyle.ts"],"sourcesContent":["export const AVATAR_BORDER_RADIUS_PERCENTAGE = 42\n\nexport const AVATAR_GROUP_DEFAULT_SPACING = 4\n"],"names":["AVATAR_BORDER_RADIUS_PERCENTAGE","AVATAR_GROUP_DEFAULT_SPACING"],"mappings":"AAAO,MAAMA,+BAA+B,GAAG,GAAE;AAE1C,MAAMC,4BAA4B,GAAG;;;;"}

package/dist/esm/components/Avatars/CheckableAvatar/CheckableAvatar.mjs

@@ -0,0 +1,68 @@
+import React__default, { forwardRef } from 'react';
+import { Indicator as $e698a72e93240346$export$adb584737d712b70 } from '../../../node_modules/@radix-ui/react-checkbox/dist/index.module.mjs';
+import useId from '../../../hooks/useId.mjs';
+import { AvatarSize } from '../Avatar/Avatar.types.mjs';
+import { CheckboxPrimitiveRoot, CheckIcon, Avatar } from './CheckableAvatar.styled.mjs';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
+
+/**
+ * `CheckableAvatar` is a checkbox component that looks like `Avatar`.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ * // Controlled
+ * <CheckableAvatar
+ *   name="John Doe"
+ *   avatarUrl="..."
+ *   checked={checked}
+ *   onCheckedChange={setChecked}
+ * />
+ * // Uncontrolled
+ * <CheckableAvatar
+ *   name="John Doe"
+ *   avatarUrl="..."
+ *   defaultChecked
+ * />
+ * ```
+ */
+const CheckableAvatar = /*#__PURE__*/forwardRef(function CheckableAvatar({
+  children,
+  id: idProp,
+  name,
+  size = AvatarSize.Size24,
+  disabled,
+  avatarUrl,
+  fallbackUrl,
+  status,
+  showBorder,
+  ...props
+}, forwardedRef) {
+  const id = useId(idProp, 'bezier-checkable-avatar');
+  return /*#__PURE__*/React__default.createElement(CheckboxPrimitiveRoot, Object.assign({
+    ref: forwardedRef,
+    id: id,
+    name: name,
+    disabled: disabled
+  }, props), /*#__PURE__*/React__default.createElement($e698a72e93240346$export$adb584737d712b70, {
+    asChild: true,
+    forceMount: true
+  }, /*#__PURE__*/React__default.createElement(CheckIcon, {
+    className: `size-${size}`
+  })), /*#__PURE__*/React__default.createElement(Avatar, {
+    "aria-hidden": true,
+    size: size,
+    name: name,
+    disabled: disabled,
+    avatarUrl: avatarUrl,
+    fallbackUrl: fallbackUrl,
+    status: status,
+    showBorder: showBorder
+  }, children), /*#__PURE__*/React__default.createElement(VisuallyHidden, null, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id
+  }, name)));
+});
+
+export { CheckableAvatar };
+//# sourceMappingURL=CheckableAvatar.mjs.map

package/dist/esm/components/Avatars/CheckableAvatar/CheckableAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckableAvatar.mjs","sources":["../../../../../src/components/Avatars/CheckableAvatar/CheckableAvatar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\n\nimport useId from '~/src/hooks/useId'\n\nimport { AvatarSize } from '~/src/components/Avatars/Avatar'\nimport { VisuallyHidden } from '~/src/components/VisuallyHidden'\n\nimport type { CheckableAvatarProps } from './CheckableAvatar.types'\n\nimport * as Styled from './CheckableAvatar.styled'\n\n/**\n * `CheckableAvatar` is a checkbox component that looks like `Avatar`.\n *\n * @example\n *\n * ```tsx\n * const [checked, setChecked] = useState(false)\n * // Controlled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   checked={checked}\n *   onCheckedChange={setChecked}\n * />\n * // Uncontrolled\n * <CheckableAvatar\n *   name=\"John Doe\"\n *   avatarUrl=\"...\"\n *   defaultChecked\n * />\n * ```\n */\nexport const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProps>(function CheckableAvatar({\n  children,\n  id: idProp,\n  name,\n  size = AvatarSize.Size24,\n  disabled,\n  avatarUrl,\n  fallbackUrl,\n  status,\n  showBorder,\n  ...props\n}, forwardedRef) {\n  const id = useId(idProp, 'bezier-checkable-avatar')\n\n  return (\n    <Styled.CheckboxPrimitiveRoot\n      ref={forwardedRef}\n      id={id}\n      name={name}\n      disabled={disabled}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        asChild\n        forceMount\n      >\n        <Styled.CheckIcon className={`size-${size}`} />\n      </CheckboxPrimitive.Indicator>\n\n      <Styled.Avatar\n        aria-hidden\n        size={size}\n        name={name}\n        disabled={disabled}\n        avatarUrl={avatarUrl}\n        fallbackUrl={fallbackUrl}\n        status={status}\n        showBorder={showBorder}\n      >\n        { children }\n      </Styled.Avatar>\n\n      <VisuallyHidden>\n        <label htmlFor={id}>{ name }</label>\n      </VisuallyHidden>\n    </Styled.CheckboxPrimitiveRoot>\n  )\n})\n"],"names":["CheckableAvatar","forwardRef","children","id","idProp","name","size","AvatarSize","Size24","disabled","avatarUrl","fallbackUrl","status","showBorder","props","forwardedRef","useId","React","createElement","Styled","Object","assign","ref","CheckboxPrimitive","asChild","forceMount","className","VisuallyHidden","htmlFor"],"mappings":";;;;;;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;MACaA,eAAe,gBAAGC,UAAU,CAA0C,SAASD,eAAeA,CAAC;EAC1GE,QAAQ;AACRC,EAAAA,EAAE,EAAEC,MAAM;EACVC,IAAI;EACJC,IAAI,GAAGC,UAAU,CAACC,MAAM;EACxBC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,MAAM;EACNC,UAAU;EACV,GAAGC,KAAAA;AACL,CAAC,EAAEC,YAAY,EAAE;AACf,EAAA,MAAMZ,EAAE,GAAGa,KAAK,CAACZ,MAAM,EAAE,yBAAyB,CAAC,CAAA;EAEnD,oBACEa,cAAA,CAAAC,aAAA,CAACC,qBAA4B,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAC3BC,IAAAA,GAAG,EAAEP,YAAa;AAClBZ,IAAAA,EAAE,EAAEA,EAAG;AACPE,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAAA;GACNK,EAAAA,KAAK,gBAETG,cAAA,CAAAC,aAAA,CAACK,yCAA2B,EAAA;IAC1BC,OAAO,EAAA,IAAA;IACPC,UAAU,EAAA,IAAA;AAAA,GAAA,eAEVR,cAAA,CAAAC,aAAA,CAACC,SAAgB,EAAA;IAACO,SAAS,EAAG,QAAOpB,IAAK,CAAA,CAAA;GAAI,CACnB,CAAC,eAE9BW,cAAA,CAAAC,aAAA,CAACC,MAAa,EAAA;IACZ,aAAW,EAAA,IAAA;AACXb,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,IAAI,EAAEA,IAAK;AACXI,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAAA;GAEVX,EAAAA,QACW,CAAC,eAEhBe,cAAA,CAAAC,aAAA,CAACS,cAAc,EAAA,IAAA,eACbV,cAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AAAOU,IAAAA,OAAO,EAAEzB,EAAAA;GAAME,EAAAA,IAAa,CACrB,CACY,CAAC,CAAA;AAEnC,CAAC;;;;"}

package/dist/esm/components/Avatars/CheckableAvatar/CheckableAvatar.styled.mjs

@@ -0,0 +1,56 @@
+import { CheckIcon as CheckIcon$1 } from '@channel.io/bezier-icons';
+import { Root as $e698a72e93240346$export$be92b6f5f03c0fe9 } from '../../../node_modules/@radix-ui/react-checkbox/dist/index.module.mjs';
+import { ZIndex } from '../../../constants/ZIndex.mjs';
+import { touchableHover } from '../../../utils/styleUtils.mjs';
+import { Avatar as Avatar$1 } from '../Avatar/Avatar.mjs';
+import { AvatarSize } from '../Avatar/Avatar.types.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
+import { styled as FoundationStyled, css as FoundationCSS } from '../../../foundation/FoundationStyledComponent.mjs';
+import { absoluteCenter } from '../../../foundation/Mixins.mjs';
+
+const Avatar = /*#__PURE__*/FoundationStyled(Avatar$1).withConfig({
+  displayName: "CheckableAvatarstyled__Avatar",
+  componentId: "sc-1t8b49w-0"
+})([""]);
+const CheckIcon = /*#__PURE__*/FoundationStyled(Icon).attrs({
+  source: CheckIcon$1,
+  color: 'bgtxt-absolute-white-normal'
+}).withConfig({
+  displayName: "CheckableAvatarstyled__CheckIcon",
+  componentId: "sc-1t8b49w-1"
+})(["position:absolute;z-index:", ";visibility:hidden;", " &.size-", "{width:14px;height:14px;}&.size-", "{width:16px;height:16px;}&.size-", "{width:20px;height:20px;}&.size-", "{width:22px;height:22px;}&.size-", "{width:24px;height:24px;}&.size-", "{width:28px;height:28px;}&.size-", "{width:42px;height:42px;}&.size-", "{width:52px;height:52px;}&.size-", "{width:68px;height:68px;}"], ZIndex.Float, absoluteCenter(), AvatarSize.Size20, AvatarSize.Size24, AvatarSize.Size30, AvatarSize.Size36, AvatarSize.Size42, AvatarSize.Size48, AvatarSize.Size72, AvatarSize.Size90, AvatarSize.Size120);
+const focusStyles = {
+  common: FoundationCSS`
+    ${CheckIcon} {
+      visibility: visible;
+    }
+
+    /* stylelint-disable declaration-block-semicolon-newline-after, rule-empty-line-before */
+    ${Avatar} > div {
+      --bezier-alpha-smooth-corners-box-background-image: none !important;
+    }
+  `,
+  unchecked: FoundationCSS`
+    ${Avatar} > div {
+      --bezier-alpha-smooth-corners-box-background-color: var(--bg-grey-dark) !important;
+    }
+  `,
+  checked: FoundationCSS`
+    ${Avatar} > div {
+      --bezier-alpha-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important;
+    }
+    /* stylelint-enable declaration-block-semicolon-newline-after, rule-empty-line-before */
+  `
+};
+
+/**
+ * NOTE: Using the `!important` keyword to override a local CSS variable of `AlphaSmoothCorners`.
+ * Improvements are needed to the styling when using the `AlphaSmoothCorners` component.
+ */
+const CheckboxPrimitiveRoot = /*#__PURE__*/FoundationStyled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
+  displayName: "CheckableAvatarstyled__CheckboxPrimitiveRoot",
+  componentId: "sc-1t8b49w-2"
+})(["all:unset;position:relative;z-index:", ";cursor:pointer;outline:none;&[data-disabled]{cursor:not-allowed;}&:not([data-state='unchecked']){", "{visibility:visible;}", " > div{--bezier-alpha-smooth-corners-box-background-image:none !important;--bezier-alpha-smooth-corners-box-background-color:var(--bgtxt-green-normal) !important;}}&:not([data-disabled]){", " &:focus-visible{", "}&[data-state='unchecked']{", " &:focus-visible{", "}}&:not([data-state='unchecked']){", " &:focus-visible{", "}}}"], ZIndex.Base, CheckIcon, Avatar, touchableHover(focusStyles.common), focusStyles.common, touchableHover(focusStyles.unchecked), focusStyles.unchecked, touchableHover(focusStyles.checked), focusStyles.checked);
+
+export { Avatar, CheckIcon, CheckboxPrimitiveRoot };
+//# sourceMappingURL=CheckableAvatar.styled.mjs.map

package/dist/esm/components/Avatars/CheckableAvatar/CheckableAvatar.styled.mjs.map

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

package/dist/esm/components/Avatars/assets/defaultAvatar.svg.mjs

@@ -0,0 +1,4 @@
+var defaultAvatarUrl = "data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23cfccfb%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41%2023C41%2029.0744%2036.0744%2034%2030%2034C23.9256%2034%2019%2029.0744%2019%2023C19%2016.9256%2023.9256%2012%2030%2012C36.0744%2012%2041%2016.9256%2041%2023ZM30%2037C16.1929%2037%205%2048.1929%205%2062V90H55V62C55%2048.1929%2043.8071%2037%2030%2037Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
+
+export { defaultAvatarUrl as default };
+//# sourceMappingURL=defaultAvatar.svg.mjs.map

package/dist/esm/components/Avatars/assets/defaultAvatar.svg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultAvatar.svg.mjs","sources":["../../../../../src/components/Avatars/assets/defaultAvatar.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23cfccfb%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M41%2023C41%2029.0744%2036.0744%2034%2030%2034C23.9256%2034%2019%2029.0744%2019%2023C19%2016.9256%2023.9256%2012%2030%2012C36.0744%2012%2041%2016.9256%2041%2023ZM30%2037C16.1929%2037%205%2048.1929%205%2062V90H55V62C55%2048.1929%2043.8071%2037%2030%2037Z%22%20fill%3D%22white%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\""],"names":[],"mappings":"AAAA,uBAAe;;;;"}

package/dist/esm/components/Banner/Banner.const.mjs

@@ -0,0 +1,48 @@
+import { ButtonColorVariant } from '../Button/Button.types.mjs';
+import { BannerVariant } from './Banner.types.mjs';
+import { css as FoundationCSS } from '../../foundation/FoundationStyledComponent.mjs';
+
+const BACKGROUND_COLORS = {
+  [BannerVariant.Default]: 'bg-black-lighter',
+  [BannerVariant.Blue]: 'bgtxt-blue-lightest',
+  [BannerVariant.Cobalt]: 'bgtxt-cobalt-lightest',
+  [BannerVariant.Green]: 'bgtxt-green-lightest',
+  [BannerVariant.Orange]: 'bgtxt-orange-lightest',
+  [BannerVariant.Red]: 'bgtxt-red-lightest',
+  [BannerVariant.Alt]: 'bg-grey-lighter'
+};
+const DEFAULT_ICON_COLORS = {
+  [BannerVariant.Default]: 'txt-black-darker',
+  [BannerVariant.Blue]: 'bgtxt-blue-normal',
+  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',
+  [BannerVariant.Green]: 'bgtxt-green-normal',
+  [BannerVariant.Orange]: 'bgtxt-orange-normal',
+  [BannerVariant.Red]: 'bgtxt-red-normal',
+  [BannerVariant.Alt]: 'bgtxt-red-normal'
+};
+const ACTION_BUTTON_COLOR_VARIANTS = {
+  [BannerVariant.Default]: ButtonColorVariant.MonochromeDark,
+  [BannerVariant.Blue]: ButtonColorVariant.Blue,
+  [BannerVariant.Cobalt]: ButtonColorVariant.Cobalt,
+  [BannerVariant.Green]: ButtonColorVariant.Green,
+  [BannerVariant.Orange]: ButtonColorVariant.Orange,
+  [BannerVariant.Red]: ButtonColorVariant.Red,
+  [BannerVariant.Alt]: ButtonColorVariant.MonochromeDark
+};
+const TEXT_COLORS = {
+  [BannerVariant.Default]: 'txt-black-darker',
+  [BannerVariant.Blue]: 'bgtxt-blue-normal',
+  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',
+  [BannerVariant.Green]: 'bgtxt-green-normal',
+  [BannerVariant.Orange]: 'bgtxt-orange-normal',
+  [BannerVariant.Red]: 'bgtxt-red-normal',
+  [BannerVariant.Alt]: 'txt-black-darker'
+};
+const ELEVATIONS = {
+  [BannerVariant.Alt]: FoundationCSS(["", ""], ({
+    foundation
+  }) => foundation?.elevation?.ev2())
+};
+
+export { ACTION_BUTTON_COLOR_VARIANTS, BACKGROUND_COLORS, DEFAULT_ICON_COLORS, ELEVATIONS, TEXT_COLORS };
+//# sourceMappingURL=Banner.const.mjs.map

package/dist/esm/components/Banner/Banner.const.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.const.mjs","sources":["../../../../src/components/Banner/Banner.const.ts"],"sourcesContent":["import {\n  type SemanticNames,\n  css,\n} from '~/src/foundation'\n\nimport type { InjectedInterpolation } from '~/src/types/Foundation'\n\nimport { ButtonColorVariant } from '~/src/components/Button'\n\nimport { BannerVariant } from './Banner.types'\n\nexport const BACKGROUND_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'bg-black-lighter',\n  [BannerVariant.Blue]: 'bgtxt-blue-lightest',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-lightest',\n  [BannerVariant.Green]: 'bgtxt-green-lightest',\n  [BannerVariant.Orange]: 'bgtxt-orange-lightest',\n  [BannerVariant.Red]: 'bgtxt-red-lightest',\n  [BannerVariant.Alt]: 'bg-grey-lighter',\n}\n\nexport const DEFAULT_ICON_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'txt-black-darker',\n  [BannerVariant.Blue]: 'bgtxt-blue-normal',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n  [BannerVariant.Green]: 'bgtxt-green-normal',\n  [BannerVariant.Orange]: 'bgtxt-orange-normal',\n  [BannerVariant.Red]: 'bgtxt-red-normal',\n  [BannerVariant.Alt]: 'bgtxt-red-normal',\n}\n\nexport const ACTION_BUTTON_COLOR_VARIANTS: Record<BannerVariant, ButtonColorVariant> = {\n  [BannerVariant.Default]: ButtonColorVariant.MonochromeDark,\n  [BannerVariant.Blue]: ButtonColorVariant.Blue,\n  [BannerVariant.Cobalt]: ButtonColorVariant.Cobalt,\n  [BannerVariant.Green]: ButtonColorVariant.Green,\n  [BannerVariant.Orange]: ButtonColorVariant.Orange,\n  [BannerVariant.Red]: ButtonColorVariant.Red,\n  [BannerVariant.Alt]: ButtonColorVariant.MonochromeDark,\n}\n\nexport const TEXT_COLORS: Record<BannerVariant, SemanticNames> = {\n  [BannerVariant.Default]: 'txt-black-darker',\n  [BannerVariant.Blue]: 'bgtxt-blue-normal',\n  [BannerVariant.Cobalt]: 'bgtxt-cobalt-normal',\n  [BannerVariant.Green]: 'bgtxt-green-normal',\n  [BannerVariant.Orange]: 'bgtxt-orange-normal',\n  [BannerVariant.Red]: 'bgtxt-red-normal',\n  [BannerVariant.Alt]: 'txt-black-darker',\n}\n\nexport const ELEVATIONS: { [key in BannerVariant]?: InjectedInterpolation } = {\n  [BannerVariant.Alt]: css`\n    ${({ foundation }) => foundation?.elevation?.ev2()}\n  `,\n}\n"],"names":["BACKGROUND_COLORS","BannerVariant","Default","Blue","Cobalt","Green","Orange","Red","Alt","DEFAULT_ICON_COLORS","ACTION_BUTTON_COLOR_VARIANTS","ButtonColorVariant","MonochromeDark","TEXT_COLORS","ELEVATIONS","css","foundation","elevation","ev2"],"mappings":";;;;AAWO,MAAMA,iBAAuD,GAAG;AACrE,EAAA,CAACC,aAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,aAAa,CAACE,IAAI,GAAG,qBAAqB;AAC3C,EAAA,CAACF,aAAa,CAACG,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACH,aAAa,CAACI,KAAK,GAAG,sBAAsB;AAC7C,EAAA,CAACJ,aAAa,CAACK,MAAM,GAAG,uBAAuB;AAC/C,EAAA,CAACL,aAAa,CAACM,GAAG,GAAG,oBAAoB;EACzC,CAACN,aAAa,CAACO,GAAG,GAAG,iBAAA;AACvB,EAAC;AAEM,MAAMC,mBAAyD,GAAG;AACvE,EAAA,CAACR,aAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,aAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,aAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,aAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,aAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,aAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,aAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAME,4BAAuE,GAAG;AACrF,EAAA,CAACT,aAAa,CAACC,OAAO,GAAGS,kBAAkB,CAACC,cAAc;AAC1D,EAAA,CAACX,aAAa,CAACE,IAAI,GAAGQ,kBAAkB,CAACR,IAAI;AAC7C,EAAA,CAACF,aAAa,CAACG,MAAM,GAAGO,kBAAkB,CAACP,MAAM;AACjD,EAAA,CAACH,aAAa,CAACI,KAAK,GAAGM,kBAAkB,CAACN,KAAK;AAC/C,EAAA,CAACJ,aAAa,CAACK,MAAM,GAAGK,kBAAkB,CAACL,MAAM;AACjD,EAAA,CAACL,aAAa,CAACM,GAAG,GAAGI,kBAAkB,CAACJ,GAAG;AAC3C,EAAA,CAACN,aAAa,CAACO,GAAG,GAAGG,kBAAkB,CAACC,cAAAA;AAC1C,EAAC;AAEM,MAAMC,WAAiD,GAAG;AAC/D,EAAA,CAACZ,aAAa,CAACC,OAAO,GAAG,kBAAkB;AAC3C,EAAA,CAACD,aAAa,CAACE,IAAI,GAAG,mBAAmB;AACzC,EAAA,CAACF,aAAa,CAACG,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACH,aAAa,CAACI,KAAK,GAAG,oBAAoB;AAC3C,EAAA,CAACJ,aAAa,CAACK,MAAM,GAAG,qBAAqB;AAC7C,EAAA,CAACL,aAAa,CAACM,GAAG,GAAG,kBAAkB;EACvC,CAACN,aAAa,CAACO,GAAG,GAAG,kBAAA;AACvB,EAAC;AAEM,MAAMM,UAA8D,GAAG;AAC5E,EAAA,CAACb,aAAa,CAACO,GAAG,GAAGO,aAAG,WACpB,CAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,KAAKA,UAAU,EAAEC,SAAS,EAAEC,GAAG,EAAE,CAAA;AAEtD;;;;"}

package/dist/esm/components/Banner/Banner.mjs

@@ -0,0 +1,87 @@
+import React__default, { forwardRef } from 'react';
+import { isNil, isString } from '../../utils/typeUtils.mjs';
+import { Button } from '../Button/Button.mjs';
+import { ButtonSize, ButtonStyleVariant } from '../Button/Button.types.mjs';
+import Text from '../Text/Text.mjs';
+import { DEFAULT_ICON_COLORS, TEXT_COLORS, ACTION_BUTTON_COLOR_VARIANTS } from './Banner.const.mjs';
+import { BannerVariant } from './Banner.types.mjs';
+import Styled from './Banner.styled.mjs';
+import { IconSize } from '../Icon/Icon.types.mjs';
+import { StackItem } from '../Stack/StackItem/StackItem.mjs';
+import { Typography } from '../../foundation/Typography.mjs';
+
+const BANNER_TEST_ID = 'bezier-react-banner';
+const BANNER_LINK_TEST_ID = 'bezier-react-banner-link';
+const externalLinkRenderer = ({
+  content,
+  linkTo
+}) => /*#__PURE__*/React__default.createElement("a", {
+  href: linkTo,
+  target: "_blank",
+  rel: "noopener noreferrer",
+  "data-testid": BANNER_LINK_TEST_ID
+}, content);
+function Link({
+  variant = BannerVariant.Default,
+  hasLink = false,
+  linkText,
+  linkTo,
+  renderLink = externalLinkRenderer
+}) {
+  if (!hasLink) {
+    return null;
+  }
+  return renderLink({
+    content: /*#__PURE__*/React__default.createElement(Styled.Link, {
+      typo: Typography.Size14,
+      color: TEXT_COLORS[variant],
+      bold: true
+    }, linkText),
+    linkTo
+  });
+}
+const Banner = /*#__PURE__*/forwardRef(function Banner(props, forwardedRef) {
+  const {
+    className,
+    interpolation,
+    variant = BannerVariant.Default,
+    icon,
+    iconColor,
+    content,
+    actionIcon,
+    onClickAction,
+    testId = BANNER_TEST_ID
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Styled.Stack, {
+    ref: forwardedRef,
+    "data-testid": testId,
+    className: className,
+    interpolation: interpolation,
+    variant: variant,
+    spacing: 6,
+    align: "start"
+  }, !isNil(icon) && /*#__PURE__*/React__default.createElement(Styled.StackItem, null, /*#__PURE__*/React__default.createElement(Styled.BannerIcon, {
+    name: icon,
+    color: iconColor ?? DEFAULT_ICON_COLORS[variant],
+    size: IconSize.S
+  })), /*#__PURE__*/React__default.createElement(StackItem, {
+    grow: true,
+    shrink: true,
+    weight: 1,
+    align: "center"
+  }, /*#__PURE__*/React__default.createElement(Styled.ContentWrapper, {
+    variant: variant
+  }, isString(content) ? /*#__PURE__*/React__default.createElement(Text, {
+    typo: Typography.Size14,
+    color: TEXT_COLORS[variant]
+  }, content, /*#__PURE__*/React__default.createElement(Link, props)) : content)), !isNil(actionIcon) && /*#__PURE__*/React__default.createElement(Styled.StackItem, null, /*#__PURE__*/React__default.createElement(Button, {
+    size: ButtonSize.XS,
+    colorVariant: ACTION_BUTTON_COLOR_VARIANTS[variant],
+    styleVariant: ButtonStyleVariant.Tertiary,
+    leftContent: actionIcon,
+    onClick: onClickAction
+  })));
+});
+
+export { BANNER_LINK_TEST_ID, Banner };
+//# sourceMappingURL=Banner.mjs.map

package/dist/esm/components/Banner/Banner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.mjs","sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { Typography } from '~/src/foundation'\n\nimport {\n  isNil,\n  isString,\n} from '~/src/utils/typeUtils'\n\nimport {\n  Button,\n  ButtonSize,\n  ButtonStyleVariant,\n} from '~/src/components/Button'\nimport { IconSize } from '~/src/components/Icon'\nimport { StackItem } from '~/src/components/Stack'\nimport { Text } from '~/src/components/Text'\n\nimport {\n  ACTION_BUTTON_COLOR_VARIANTS,\n  DEFAULT_ICON_COLORS,\n  TEXT_COLORS,\n} from './Banner.const'\nimport {\n  type BannerProps,\n  BannerVariant,\n  type RenderLinkFunc,\n} from './Banner.types'\n\nimport Styled from './Banner.styled'\n\nconst BANNER_TEST_ID = 'bezier-react-banner'\nexport const BANNER_LINK_TEST_ID = 'bezier-react-banner-link'\n\nconst externalLinkRenderer: RenderLinkFunc = ({\n  content,\n  linkTo,\n}) => (\n  <a\n    href={linkTo}\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    data-testid={BANNER_LINK_TEST_ID}\n  >\n    { content }\n  </a>\n)\n\nfunction Link({\n  variant = BannerVariant.Default,\n  hasLink = false,\n  linkText,\n  linkTo,\n  renderLink = externalLinkRenderer,\n}: BannerProps) {\n  if (!hasLink) { return null }\n\n  return renderLink({\n    content: (\n      <Styled.Link\n        typo={Typography.Size14}\n        color={TEXT_COLORS[variant]}\n        bold\n      >\n        { linkText }\n      </Styled.Link>\n    ),\n    linkTo,\n  })\n}\n\nexport const Banner = forwardRef(function Banner(\n  props: BannerProps,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  const {\n    className,\n    interpolation,\n    variant = BannerVariant.Default,\n    icon,\n    iconColor,\n    content,\n    actionIcon,\n    onClickAction,\n    testId = BANNER_TEST_ID,\n  } = props\n\n  return (\n    <Styled.Stack\n      ref={forwardedRef}\n      data-testid={testId}\n      className={className}\n      interpolation={interpolation}\n      variant={variant}\n      spacing={6}\n      align=\"start\"\n    >\n      { !isNil(icon) && (\n        <Styled.StackItem>\n          <Styled.BannerIcon\n            name={icon}\n            color={iconColor ?? DEFAULT_ICON_COLORS[variant]}\n            size={IconSize.S}\n          />\n        </Styled.StackItem>\n      ) }\n\n      <StackItem\n        grow\n        shrink\n        weight={1}\n        align=\"center\"\n      >\n        <Styled.ContentWrapper variant={variant}>\n          { isString(content) ? (\n            <Text\n              typo={Typography.Size14}\n              color={TEXT_COLORS[variant]}\n            >\n              { content }\n              <Link {...props} />\n            </Text>\n          ) : content }\n        </Styled.ContentWrapper>\n      </StackItem>\n\n      { !isNil(actionIcon) && (\n        <Styled.StackItem>\n          <Button\n            size={ButtonSize.XS}\n            colorVariant={ACTION_BUTTON_COLOR_VARIANTS[variant]}\n            styleVariant={ButtonStyleVariant.Tertiary}\n            leftContent={actionIcon}\n            onClick={onClickAction}\n          />\n        </Styled.StackItem>\n      ) }\n    </Styled.Stack>\n  )\n})\n"],"names":["BANNER_TEST_ID","BANNER_LINK_TEST_ID","externalLinkRenderer","content","linkTo","React","createElement","href","target","rel","Link","variant","BannerVariant","Default","hasLink","linkText","renderLink","Styled","typo","Typography","Size14","color","TEXT_COLORS","bold","Banner","forwardRef","props","forwardedRef","className","interpolation","icon","iconColor","actionIcon","onClickAction","testId","Stack","ref","spacing","align","isNil","StackItem","BannerIcon","name","DEFAULT_ICON_COLORS","size","IconSize","S","grow","shrink","weight","ContentWrapper","isString","Text","Button","ButtonSize","XS","colorVariant","ACTION_BUTTON_COLOR_VARIANTS","styleVariant","ButtonStyleVariant","Tertiary","leftContent","onClick"],"mappings":"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"}

package/dist/esm/components/Banner/Banner.styled.mjs

@@ -0,0 +1,47 @@
+import Text from '../Text/Text.mjs';
+import { TEXT_COLORS, BACKGROUND_COLORS, ELEVATIONS } from './Banner.const.mjs';
+import LegacyIcon from '../LegacyIcon/LegacyIcon.mjs';
+import { HStack } from '../Stack/HStack/HStack.mjs';
+import { StackItem as StackItem$1 } from '../Stack/StackItem/StackItem.mjs';
+import { styled as FoundationStyled } from '../../foundation/FoundationStyledComponent.mjs';
+
+const BannerIcon = /*#__PURE__*/FoundationStyled(LegacyIcon).withConfig({
+  displayName: "Bannerstyled__BannerIcon",
+  componentId: "sc-19y8c5b-0"
+})([""]);
+const ContentWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
+  displayName: "Bannerstyled__ContentWrapper",
+  componentId: "sc-19y8c5b-1"
+})(["color:", ";"], ({
+  foundation,
+  variant
+}) => foundation?.theme?.[TEXT_COLORS[variant]]);
+const Link = /*#__PURE__*/FoundationStyled(Text).withConfig({
+  displayName: "Bannerstyled__Link",
+  componentId: "sc-19y8c5b-2"
+})(["margin-left:2px;text-decoration:underline;cursor:pointer;"]);
+const Stack = /*#__PURE__*/FoundationStyled(HStack).withConfig({
+  displayName: "Bannerstyled__Stack",
+  componentId: "sc-19y8c5b-3"
+})(["width:auto;min-width:200px;height:auto;padding:12px;background-color:", ";", " ", " & + &{margin-top:6px;}"], ({
+  foundation,
+  variant
+}) => foundation?.theme?.[BACKGROUND_COLORS[variant]], ({
+  foundation
+}) => foundation?.rounding?.round12, ({
+  variant
+}) => ELEVATIONS[variant]);
+const StackItem = /*#__PURE__*/FoundationStyled(StackItem$1).withConfig({
+  displayName: "Bannerstyled__StackItem",
+  componentId: "sc-19y8c5b-4"
+})(["height:20px;"]);
+var Styled = {
+  BannerIcon,
+  ContentWrapper,
+  Link,
+  Stack,
+  StackItem
+};
+
+export { Styled as default };
+//# sourceMappingURL=Banner.styled.mjs.map