@transferwise/components 0.0.0-experimental-8109a86 → 0.0.0-experimental-02ea5b3

package/src/avatarView/AvatarView.story.tsx

@@ -20,7 +20,7 @@ import {
 } from '@transferwise/icons';
 import AvatarView, { AvatarViewProps } from '.';
 import { Flag } from '@wise/art';
-import { getBrandColorFromSeed, getInitials } from '../common';
+import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
 import Display from '../display';
 
 export default {
@@ -98,40 +98,6 @@ export const Notification: Story = {
   ),
 };
 
-export const Test: Story = {
-  // tags: ['autodocs'],
-  render: () => (
-    <div>
-      <AvatarView
-        imgSrc="../avatar-square-dude.webp"
-        size={72}
-        badge={{
-          flagCode: 'EU',
-        }}
-      />
-      <AvatarView
-        imgSrc="../avatar-square-dude.webp"
-        size={72}
-        badge={{
-          asset: (
-            <div
-              className="d-flex align-items-center justify-content-center"
-              style={{
-                backgroundColor: 'var(--color-bright-pink)',
-                color: 'var(--color-interactive-primary)',
-                width: '100%',
-                height: '100%',
-              }}
-            >
-              <Leaf />
-            </div>
-          ),
-        }}
-      />
-    </div>
-  ),
-};
-
 export const Badge: Story = {
   tags: ['autodocs'],
   render: () => {
@@ -160,7 +126,7 @@ export const Badge: Story = {
           </AvatarView>
         ))}
 
-        {sizes.map((size, index) => (
+        {sizes.map((size) => (
           <AvatarView
             key={size}
             size={size}
@@ -169,7 +135,7 @@ export const Badge: Story = {
           />
         ))}
 
-        {sizes.map((size, index) => (
+        {sizes.map((size) => (
           <AvatarView
             key={size}
             size={size}
@@ -292,7 +258,7 @@ export const Images: Story = {
             interactive
             imgSrc="../avatar-square-dude.webp"
             profileName="Test Name"
-            profileType="business"
+            profileType={ProfileType.BUSINESS}
           />
         ))}
         {sizes.map((size) => (
@@ -301,7 +267,7 @@ export const Images: Story = {
             size={size}
             imgSrc="../avatar-square-dude.webp"
             profileName="Test Name"
-            profileType="business"
+            profileType={ProfileType.BUSINESS}
           />
         ))}
         {sizes.map((size) => (
@@ -343,7 +309,7 @@ export const Profiles: Story = {
             size={size}
             imgSrc="../avatar-square-dude.webp"
             profileName="Test Name"
-            profileType="business"
+            profileType={ProfileType.BUSINESS}
           />
         ))}
 
@@ -354,7 +320,7 @@ export const Profiles: Story = {
             interactive
             imgSrc="../avatar-square-dude.webp"
             profileName="Test Name"
-            profileType="business"
+            profileType={ProfileType.BUSINESS}
           />
         ))}
 
@@ -367,11 +333,11 @@ export const Profiles: Story = {
         ))}
 
         {sizes.map((size) => (
-          <AvatarView key={size} size={size} profileType="business" />
+          <AvatarView key={size} size={size} profileType={ProfileType.BUSINESS} />
         ))}
 
         {sizes.map((size) => (
-          <AvatarView key={size} size={size} interactive profileType="business" />
+          <AvatarView key={size} size={size} interactive profileType={ProfileType.BUSINESS} />
         ))}
 
         {sizes.map((size) => (
@@ -387,13 +353,17 @@ export const Profiles: Story = {
 };
 
 export const ProfileBrokenImageFallback: Story = {
-  render: () => (
-    <>
-      <AvatarView imgSrc="../img-wrong-url.lol" />
-      <AvatarView imgSrc="../img-wrong-url.lol" profileType="business" />
-      <AvatarView imgSrc="../img-wrong-url.lol" profileType="business" profileName="D D" />
-    </>
-  ),
+  render: () => {
+    const assetUrl = 'https://test.com/img-wrong-url.test';
+    return (
+      <>
+        <AvatarView />
+        <AvatarView imgSrc={assetUrl} />
+        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} />
+        <AvatarView imgSrc={assetUrl} profileType={ProfileType.BUSINESS} profileName="Test Name" />
+      </>
+    );
+  },
 };
 
 export const EdgeInstaces: Story = {
@@ -412,7 +382,6 @@ export const EdgeInstaces: Story = {
         }}
       >
         <style>{css}</style>
-        {/* <Body>- Custom colors</Body> */}
         <AvatarView
           interactive
           badge={{ flagCode: 'EU' }}
@@ -426,14 +395,12 @@ export const EdgeInstaces: Story = {
         >
           <Money />
         </AvatarView>
-        {/* <Body>- Add example with dashed avatar as in shared balances</Body> */}
         <AvatarView interactive className="custom-variant">
           <PlusCircle />
         </AvatarView>
         <AvatarView interactive className="custom-variant">
           {null}
         </AvatarView>
-        {/* <Body> - Add example custom backgrounds as in account summary (https://wise.com/account-summary)</Body> */}
         <AvatarView style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}>
           <Graph />
         </AvatarView>
@@ -452,7 +419,6 @@ export const EdgeInstaces: Story = {
         >
           <Rewards />
         </AvatarView>
-        {/* <Body>- Add example Wise Sand + custom background from hash</Body> */}
         <AvatarView
           badge={{ flagCode: 'EU' }}
           style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}

package/src/avatarView/AvatarView.tsx

@@ -46,8 +46,8 @@ function AvatarView({
   className,
   style,
   imgSrc,
-  profileType: type,
-  profileName: name,
+  profileType,
+  profileName,
   ...restProps
 }: Props) {
   return (
@@ -73,7 +73,7 @@ function AvatarView({
             ...style,
           }}
         >
-          <AvatarViewContent {...{ imgSrc, profileType: type, profileName: name }}>
+          <AvatarViewContent {...{ imgSrc, profileType, profileName }}>
             {children}
           </AvatarViewContent>
         </Circle>
@@ -93,7 +93,7 @@ const MAP_BADGE_ASSET_SIZE = {
   72: 24,
 } satisfies Record<number, BadgeAssetsProps['size']>;
 
-/** Certain sizes of AvatarView has a custom offset of Badge */
+/** Certain sizes of AvatarView has a custom offset for badge */
 const MAP_BADGE_POSITION = {
   24: -6,
   32: -4,

package/src/circularButton/CircularButton.spec.tsx

@@ -34,10 +34,6 @@ describe('CircularButton', () => {
     it('is not disabled', () => {
       expect(screen.getByRole('button')).toBeEnabled();
     });
-
-    it('renders a button of type accent and priority primary', () => {
-      expect(render(<CircularButton {...props} />).container).toMatchSnapshot();
-    });
   });
 
   describe('button attributes', () => {
@@ -69,36 +65,4 @@ describe('CircularButton', () => {
       expect(onClick).toHaveBeenCalledTimes(0);
     });
   });
-
-  describe('types', () => {
-    it('renders accent buttons', () => {
-      expect(render(<CircularButton {...props} type={ACCENT} />).container).toMatchSnapshot();
-    });
-
-    it('renders positive buttons', () => {
-      expect(render(<CircularButton {...props} type={POSITIVE} />).container).toMatchSnapshot();
-    });
-
-    it('renders negative buttons', () => {
-      expect(render(<CircularButton {...props} type={NEGATIVE} />).container).toMatchSnapshot();
-    });
-  });
-
-  describe('priorities', () => {
-    it('renders primary buttons', () => {
-      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<CircularButton {...props} priority={PRIMARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
-
-    it('renders secondary buttons', () => {
-      [ACCENT, POSITIVE, NEGATIVE].forEach((type) =>
-        expect(
-          render(<CircularButton {...props} priority={SECONDARY} type={type} />).container,
-        ).toMatchSnapshot(),
-      );
-    });
-  });
 });

package/src/common/circle/Circle.less

@@ -7,12 +7,12 @@
   --circle-border-color: var(--color-border-neutral);
   --circle-border-width: 1px;
 
-  // sets custom typography styles for default (Inter) font
+  // circle like components have custom typography styles for for default (Inter) font
   font-size: var(--circle-font-size);
   font-weight: var(--font-weight-semi-bold);
   line-height: 1;
 
-  // sets custom typography styles for Wise Sand font
+  // circle like components have custom typography styles for Wise Sand font
   .np-display {
     font-size: var(--circle-font-size);
   }

package/src/common/circle/Circle.tsx

@@ -36,7 +36,9 @@ const MAP_ICON_SIZE = {
 };
 
 /**
- * circle like components have custom font styles
+ * circle like components have custom typography styles for for default (Inter) font
+ *
+ * circle size : font size (px)
  */
 const MAP_FONT_SIZE = {
   16: 8,

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -21,19 +21,20 @@ export default {
 export const Variants = () => {
   const [activeStep, setActiveStep] = useState(2);
   const [closed, setClosed] = useState(false);
-  const showAvatar = select('avatar', ['', ProfileType.PERSONAL, ProfileType.BUSINESS], 'Profile');
+  const profileType = select(
+    'avatar',
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
+    ProfileType.PERSONAL,
+  );
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
-  const avatarURL = text(
-    'avatarURL',
-    'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
-  );
+  const avatarURL = text('avatarURL', '../tapestry-01.png');
 
   return !closed ? (
     <>
       <FlowNavigation
-        avatar={!showAvatar ? null : <AvatarView profileType={showAvatar.toLowerCase()} />}
+        avatar={!profileType ? null : <AvatarView profileType={profileType} />}
         logo={<Logo />}
         activeStep={activeStep}
         done={done}
@@ -110,7 +111,7 @@ export const Variants = () => {
 
       <FlowNavigation
         done={done}
-        avatar={<AvatarView imgSrc={avatarURL} profileType={showAvatar?.toLowerCase()} />}
+        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
         steps={[
           {
@@ -156,7 +157,7 @@ export const Variants = () => {
       {/* Instance of always `done` FlowNav for visual testing */}
       <FlowNavigation
         done
-        avatar={<AvatarView imgSrc={avatarURL} profileType={showAvatar.toLowerCase()} />}
+        avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
         activeStep={activeStep}
         steps={[
           { label: 'Recipient', hoverLabel: 'Daniele Tomboro', onClick: () => setActiveStep(0) },
@@ -246,7 +247,11 @@ export const SendFlow = () => {
 export const WithOverlayHeaderComparison = () => {
   const [activeStep, setActiveStep] = useState(4);
   const [closed, setClosed] = useState(false);
-  const showAvatar = select('avatar', ['', ProfileType.PERSONAL, ProfileType.BUSINESS], 'Profile');
+  const profileType = select(
+    'avatar',
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
+    ProfileType.PERSONAL,
+  );
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
@@ -255,7 +260,7 @@ export const WithOverlayHeaderComparison = () => {
     <>
       <div style={{ border: '1px solid #e8e8e8' }}>
         <FlowNavigation
-          avatar={showAvatar ? <AvatarView profileType={showAvatar.toLowerCase()} /> : null}
+          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
           activeStep={activeStep}
           done={done}
           steps={[]}
@@ -269,7 +274,7 @@ export const WithOverlayHeaderComparison = () => {
       </div>
       <div style={{ border: '1px solid #e8e8e8' }}>
         <OverlayHeader
-          avatar={showAvatar ? <AvatarView profileType={showAvatar.toLowerCase()} /> : null}
+          avatar={profileType ? <AvatarView profileType={profileType} /> : null}
           onClose={showCloseButton ? () => setClosed(true) : undefined}
         />
       </div>

package/src/i18n/zh-HK.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
   "neptune.SelectOption.action.label": "選擇",
   "neptune.SelectOption.selected.action.label": "更改已選選項",
+  "neptune.StatusIcon.iconLabel.error": "錯誤:",
+  "neptune.StatusIcon.iconLabel.information": "資訊:",
+  "neptune.StatusIcon.iconLabel.pending": "處理中:",
+  "neptune.StatusIcon.iconLabel.success": "成功:",
+  "neptune.StatusIcon.iconLabel.warning": "警告：",
   "neptune.Summary.statusDone": "已完成事項",
   "neptune.Summary.statusNotDone": "未完成事項",
   "neptune.Summary.statusPending": "待處理事項",

package/src/main.css

@@ -499,47 +499,12 @@ div.critical-comms .critical-comms-body {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
-.np-avatar-view-interactive:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-avatar-view-interactive:active {
-  background-color: var(--color-background-neutral-active);
-}
 .np-avatar-view-non-interactive .np-circle {
   background-color: transparent;
 }
 .np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
   box-shadow: none;
 }
-.np-avatar-group {
-  display: inline-flex;
-  position: relative;
-}
-.np-avatar-group-diagonal {
-  width: var(--np-avatar-group-size);
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-}
-.np-avatar-group-diagonal-child {
-  position: absolute;
-  top: var(--np-avatar-group-diagonal-child-position);
-  right: 0;
-}
-.np-avatar-group-horizontal {
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-}
-.np-avatar-group-horizontal-child {
-  margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
-}
 .tw-badge {
   position: relative;
   display: inline-block;

package/src/main.less

@@ -4,7 +4,6 @@
 @import "./alert/Alert.less";
 @import "./avatar/Avatar.less";
 @import "./avatarView/AvatarView.less";
-@import "./avatarGroup/AvatarGroup.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -35,10 +35,7 @@ export const Basic = () => {
 };
 
 export const WithAvatarWrapper = () => {
-  const avatarURL = text(
-    'avatarURL',
-    'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
-  );
+  const avatarURL = text('avatarURL', '../tapestry-01.png');
   const profileType = select(
     'profileType',
     [ProfileType.PERSONAL, ProfileType.BUSINESS],
@@ -47,7 +44,7 @@ export const WithAvatarWrapper = () => {
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={<AvatarView imgSrc={avatarURL} profileType={profileType?.toLowerCase()} />}
+      avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
       onClose={action('Close clicked')}
     />
   );

package/build/styles/avatarGroup/AvatarGroup.css

@@ -1,29 +0,0 @@
-.np-avatar-group {
-  display: inline-flex;
-  position: relative;
-}
-.np-avatar-group-diagonal {
-  width: var(--np-avatar-group-size);
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-}
-.np-avatar-group-diagonal-child {
-  position: absolute;
-  top: var(--np-avatar-group-diagonal-child-position);
-  right: 0;
-}
-.np-avatar-group-horizontal {
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-}
-.np-avatar-group-horizontal-child {
-  margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
-}

package/build/types/avatarGroup/AvatarGroup.d.ts

@@ -1,18 +0,0 @@
-import { CommonProps } from '../common';
-import { AvatarViewProps } from '../avatarView';
-type AvatarType = {
-    asset?: AvatarViewProps['children'];
-} & Omit<AvatarViewProps, 'notification' | 'selected' | 'size' | 'badge' | 'action' | 'children'>;
-type AvatarGroupOrientation = 'horizontal' | 'diagonal';
-type AvatarGroupDiagonalSize = 24 | 32 | 40 | 48 | 56 | 72;
-type AvatarGroupSize = 16 | AvatarGroupDiagonalSize;
-export type Props = {
-    'aria-label'?: string;
-    avatars: AvatarType[];
-    orientation?: AvatarGroupOrientation;
-    size?: AvatarGroupSize;
-    interactive?: boolean;
-} & CommonProps;
-export default function AvatarGroup({ avatars, orientation, size: groupSize, 'aria-label': ariaLabel, className, interactive, }: Props): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=AvatarGroup.d.ts.map

package/build/types/avatarGroup/AvatarGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../../src/avatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,KAAK,UAAU,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CAC9D,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CACvE,CAAC;AACF,KAAK,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AACxD,KAAK,uBAAuB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC3D,KAAK,eAAe,GAAG,EAAE,GAAG,uBAAuB,CAAC;AAqCpD,MAAM,MAAM,KAAK,GAAG;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,WAAW,CAAC;AAEhB,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,WAA0B,EAC1B,IAAI,EAAE,SAAc,EACpB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,WAAW,GACZ,EAAE,KAAK,+BAoDP"}

package/build/types/avatarGroup/index.d.ts

@@ -1,3 +0,0 @@
-export type { Props as AvatarGroupProps } from './AvatarGroup';
-export { default } from './AvatarGroup';
-//# sourceMappingURL=index.d.ts.map

package/build/types/avatarGroup/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatarGroup/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/src/avatarGroup/AvatarGroup.css

@@ -1,29 +0,0 @@
-.np-avatar-group {
-  display: inline-flex;
-  position: relative;
-}
-.np-avatar-group-diagonal {
-  width: var(--np-avatar-group-size);
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-diagonal-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5) right calc(100% - var(--np-avatar-group-size) / 1.5), transparent 0, transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px), black 0);
-}
-.np-avatar-group-diagonal-child {
-  position: absolute;
-  top: var(--np-avatar-group-diagonal-child-position);
-  right: 0;
-}
-.np-avatar-group-horizontal {
-  height: var(--np-avatar-group-size);
-}
-.np-avatar-group-horizontal-mask {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc((100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc((var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-          mask-image: radial-gradient(circle at top calc(100% - var(--np-avatar-group-single-size) / 2) right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1), transparent 0, transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), black 0);
-}
-.np-avatar-group-horizontal-child {
-  margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
-}

package/src/avatarGroup/AvatarGroup.less

@@ -1,42 +0,0 @@
-.np-avatar-group {
-  display: inline-flex;
-  position: relative;
-
-  &-diagonal {
-    width: var(--np-avatar-group-size);
-    height: var(--np-avatar-group-size);
-
-    &-mask {
-      mask-image: radial-gradient(
-        circle at bottom calc(100% - var(--np-avatar-group-size) / 1.5)
-                  right calc(100% - var(--np-avatar-group-size) / 1.5),
-        transparent 0,
-        transparent calc(var(--np-avatar-group-single-size) / 2 + 0.5px),
-        black 0
-      );
-    }
-
-    &-child {
-      position: absolute;
-      top: var(--np-avatar-group-diagonal-child-position);
-      right: 0;
-    }
-  }
-
-  &-horizontal {
-    height: var(--np-avatar-group-size);
-
-    &-mask {
-      mask-image: radial-gradient(
-          circle at top calc(100% - var(--np-avatar-group-single-size) / 2)
-                  right calc(calc(100% - var(--np-avatar-group-single-size) / 1.5) * -1),
-          transparent 0,
-          transparent calc(calc(var(--np-avatar-group-single-size) / 2.5) + var(--np-avatar-group-horizontal-child-position)), 
-          black 0);
-    }
-
-    &-child {
-      margin-left: calc(var(--np-avatar-group-horizontal-child-position) * -1);
-    }
-  }
-}