@transferwise/components 46.80.0 → 46.82.0

package/build/types/table/TableHeader.d.ts

@@ -0,0 +1,13 @@
+export interface TableHeaderType {
+    header?: string;
+    className?: string;
+    alignment?: 'left' | 'right';
+    status?: 'error';
+    width?: string;
+}
+export interface TableHeaderProps extends TableHeaderType {
+    isActionHeader?: boolean;
+}
+declare const TableHeader: ({ header, className, alignment, status, width, isActionHeader, }: TableHeaderProps) => import("react").JSX.Element;
+export default TableHeader;
+//# sourceMappingURL=TableHeader.d.ts.map

package/build/types/table/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/table/TableHeader.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,qEAOd,gBAAgB,gCA+ClB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/build/types/table/TableRow.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TableCellProps } from './TableCell';
+export interface TableRowType {
+    cells?: TableCellProps[];
+}
+export interface TableRowClickableType extends TableRowType {
+    id: number | string;
+}
+export interface TableRowProps {
+    rowData?: TableRowType | TableRowClickableType;
+    hasSeparator?: boolean;
+    children?: React.ReactNode;
+    onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;
+}
+declare const TableRow: ({ rowData, hasSeparator, children, onRowClick }: TableRowProps) => React.JSX.Element;
+export default TableRow;
+//# sourceMappingURL=TableRow.d.ts.map

package/build/types/table/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAkB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAKxD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACzD,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,YAAY,GAAG,qBAAqB,CAAC;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,qBAAqB,KAAK,IAAI,CAAC;CACtE;AAED,QAAA,MAAM,QAAQ,oDAA6D,aAAa,sBA8CvF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/build/types/table/TableStatusText.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface TableStatusTextProps {
+    text: string | React.ReactNode;
+    className?: string;
+    status?: 'success' | 'error';
+    typography?: 'default' | 'default-bold';
+}
+declare const TableStatusText: ({ text, className, status, typography, }: TableStatusTextProps) => React.JSX.Element;
+export default TableStatusText;
+//# sourceMappingURL=TableStatusText.d.ts.map

package/build/types/table/TableStatusText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableStatusText.d.ts","sourceRoot":"","sources":["../../../src/table/TableStatusText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;CACzC;AAED,QAAA,MAAM,eAAe,6CAKlB,oBAAoB,sBAmBtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,6 @@
+export { default } from './Table';
+export type { TableProps } from './Table';
+export type { TableRowType, TableRowClickableType } from './TableRow';
+export type { TableHeaderType } from './TableHeader';
+export type { TableCellLeading, TableCellText, TableCellCurrency, TableCellStatus, TableCellType, } from './TableCell';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,YAAY,EACV,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,aAAa,GACd,MAAM,aAAa,CAAC"}

package/build/types/test-utils/index.d.ts

@@ -45,6 +45,11 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.Summary.statusDone": string;
         "neptune.Summary.statusNotDone": string;
         "neptune.Summary.statusPending": string;
+        "neptune.Table.actionHeader": string;
+        "neptune.Table.emptyData": string;
+        "neptune.Table.loaded": string;
+        "neptune.Table.loading": string;
+        "neptune.Table.refreshPage": string;
         "neptune.Upload.csButtonText": string;
         "neptune.Upload.csFailureText": string;
         "neptune.Upload.csSuccessText": string;
@@ -119,6 +124,11 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.Summary.statusDone": string;
         "neptune.Summary.statusNotDone": string;
         "neptune.Summary.statusPending": string;
+        "neptune.Table.actionHeader": string;
+        "neptune.Table.emptyData": string;
+        "neptune.Table.loaded": string;
+        "neptune.Table.loading": string;
+        "neptune.Table.refreshPage": string;
         "neptune.Upload.csButtonText": string;
         "neptune.Upload.csFailureText": string;
         "neptune.Upload.csSuccessText": string;

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.80.0",
+  "version": "46.82.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -93,8 +93,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.20.0",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/neptune-css": "14.20.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/avatar/Avatar.tsx

@@ -43,6 +43,9 @@ const backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {
   }
 };
 
+/**
+ * @deprecated Use `AvatarView` component instead
+ */
 const Avatar: React.FC<AvatarProps> = ({
   backgroundColor = null,
   backgroundColorSeed = null,

package/src/avatarView/AvatarView.css

@@ -0,0 +1,36 @@
+.np-notification-dot {
+  --np-notification-dot-size: 14px;
+  position: relative;
+  display: inline-block;
+}
+.np-notification-dot-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-notification-dot-size) / 2)) left calc(100% - (var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-notification-dot-size) / 2)) left calc(100% - calc(var(--np-notification-dot-size) / 2)), transparent 0, transparent calc(var(--np-notification-dot-size) / 2 + var(--np-notification-dot-offset)), black 0);
+}
+.np-notification-dot-badge {
+  position: absolute;
+  width: var(--np-notification-dot-size);
+  height: var(--np-notification-dot-size);
+  background-color: var(--color-sentiment-negative);
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  right: 0;
+}
+.np-avatar-view .np-avatar-view-content {
+  color: var(--color-interactive-primary);
+}
+.np-avatar-view-interactive {
+  cursor: pointer;
+}
+.np-avatar-view-interactive .np-circle {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-avatar-view-non-interactive .np-circle {
+  background-color: transparent;
+}
+.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
+  box-shadow: none;
+}

package/src/avatarView/AvatarView.less

@@ -0,0 +1,27 @@
+@import './NotificationDot.less';
+
+.np-avatar-view {
+  .np-avatar-view-content {
+    color: var(--color-interactive-primary);
+  }
+
+  &-interactive {
+    cursor: pointer;
+    .np-circle {
+      background-color: var(--color-background-neutral);
+    }
+  }
+
+  &-non-interactive {
+    .np-circle {
+      background-color: transparent;
+    }
+    .np-avatar-view-content {
+      // dismiss broken shadow on Flag component (DS-6309)
+      // https://github.com/transferwise/web-art/blob/main/src/flags/Flag.css#L2
+      .wds-flag {
+        box-shadow: none;
+      }
+    }
+  }
+}

package/src/avatarView/AvatarView.story.tsx

@@ -0,0 +1,467 @@
+/* eslint-disable react/jsx-key */
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Camera,
+  Convert,
+  FastFlag,
+  Freeze,
+  Graph,
+  Money,
+  Leaf,
+  Plane,
+  PlusCircle,
+  QrCode,
+  Rewards,
+  Target,
+  Team,
+  Transport,
+  Wallet,
+  Water,
+} from '@transferwise/icons';
+import AvatarView, { AvatarViewProps } from '.';
+import { Flag } from '@wise/art';
+import { getBrandColorFromSeed, getInitials, ProfileType } from '../common';
+import Display from '../display';
+import Body from '../body';
+
+export default {
+  title: 'Content/AvatarView',
+} satisfies Meta<typeof AvatarView>;
+
+type Story = StoryObj<typeof AvatarView>;
+
+const profileName1 = 'Wolter White';
+const profileName2 = 'Tyler Durden';
+const sizes: AvatarViewProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
+
+export const Selected: Story = {
+  tags: ['autodocs'],
+  render: () => {
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+        }}
+      >
+        {sizes.map((size) => (
+          <Body type="body-large-bold">{size}</Body>
+        ))}
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} selected interactive>
+            <Freeze />
+          </AvatarView>
+        ))}
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            selected
+            interactive
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Notification: Story = {
+  tags: ['autodocs'],
+  render: () => (
+    <div
+      style={{
+        gap: '1em',
+        display: 'grid',
+        justifyContent: 'space-between',
+        gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
+      }}
+    >
+      {sizes.map((size) => (
+        <Body type="body-large-bold">{size}</Body>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} notification>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView key={size} size={size} notification interactive>
+          <Freeze />
+        </AvatarView>
+      ))}
+      {sizes.map((size) => (
+        <AvatarView
+          key={size}
+          size={size}
+          imgSrc="../avatar-rectangle-fox.webp"
+          notification
+          interactive
+        />
+      ))}
+    </div>
+  ),
+};
+
+export const Badge: Story = {
+  tags: ['autodocs'],
+  render: () => {
+    const currencies = ['USD', 'EUR', 'GBP', 'AUD', 'CAD', 'JPY', 'CNY'];
+    const icons = [
+      <Plane />,
+      <QrCode />,
+      <Target />,
+      <Transport />,
+      <Wallet />,
+      <Water />,
+      <Team />,
+    ];
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: 'auto auto / repeat(7, min-content)',
+        }}
+      >
+        {sizes.map((size) => (
+          <Body type="body-large-bold">{size}</Body>
+        ))}
+        {sizes.map((size, index) => (
+          <AvatarView key={size} size={size} badge={{ flagCode: currencies[index] }}>
+            {icons[index]}
+          </AvatarView>
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-rectangle-fox.webp"
+            badge={{ imgSrc: '../tapestry-01.png' }}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ imgSrc: '../tapestry-01.png' }}
+          />
+        ))}
+
+        {sizes.map((size, index) => (
+          <AvatarView key={size} size={size} badge={{ imgSrc: '../tapestry-01.png' }}>
+            {icons[index]}
+          </AvatarView>
+        ))}
+
+        {sizes.map((size, index) => (
+          <AvatarView key={size} size={size} badge={{ status: 'warning' }}>
+            {icons[index]}
+          </AvatarView>
+        ))}
+
+        {sizes.map((size, index) => (
+          <AvatarView key={size} size={size} badge={{ status: 'neutral' }}>
+            {icons[index]}
+          </AvatarView>
+        ))}
+
+        {sizes.map((size, index) => (
+          <AvatarView key={size} size={size} badge={{ status: 'negative' }}>
+            {icons[index]}
+          </AvatarView>
+        ))}
+
+        {sizes.map((size, index) => (
+          <AvatarView key={size} size={size} badge={{ icon: <FastFlag /> }}>
+            {icons[index]}
+          </AvatarView>
+        ))}
+
+        {sizes.map((size, index) => (
+          <AvatarView key={size} size={size} badge={{ type: 'reference' }}>
+            {icons[index]}
+          </AvatarView>
+        ))}
+
+        {sizes.map((size, index) => (
+          <AvatarView key={size} size={size} badge={{ type: 'action' }}>
+            {icons[index]}
+          </AvatarView>
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'action', icon: <Camera /> }}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ type: 'reference', icon: <Convert /> }}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            badge={{ icon: <Convert /> }}
+          />
+        ))}
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            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 Images: Story = {
+  tags: ['autodocs'],
+  render: () => {
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: 'auto auto / repeat(7, min-content)',
+        }}
+      >
+        {sizes.map((size) => (
+          <Body type="body-large-bold">{size}</Body>
+        ))}
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            interactive
+            imgSrc="../avatar-square-dude.webp"
+            profileName="Test Name"
+            profileType={ProfileType.BUSINESS}
+          />
+        ))}
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            profileName="Test Name"
+            profileType={ProfileType.BUSINESS}
+          />
+        ))}
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} interactive>
+            <Flag code="JPY" intrinsicSize={size} />
+          </AvatarView>
+        ))}
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size}>
+            <Flag code="JPY" intrinsicSize={size} />
+          </AvatarView>
+        ))}
+        {sizes.map((size) => (
+          <AvatarView key={size} interactive imgSrc="../avatar-rectangle-fox.webp" size={size} />
+        ))}
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} imgSrc="../avatar-rectangle-fox.webp" />
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Profiles: Story = {
+  tags: ['autodocs'],
+  render: () => {
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: 'auto auto / repeat(7, min-content)',
+        }}
+      >
+        {sizes.map((size) => (
+          <Body type="body-large-bold">{size}</Body>
+        ))}
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            imgSrc="../avatar-square-dude.webp"
+            profileName="Test Name"
+            profileType={ProfileType.BUSINESS}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView
+            key={size}
+            size={size}
+            interactive
+            imgSrc="../avatar-square-dude.webp"
+            profileName="Test Name"
+            profileType={ProfileType.BUSINESS}
+          />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} profileName="Test Name" />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} interactive profileName="Test Name" />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} profileType={ProfileType.BUSINESS} />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} interactive profileType={ProfileType.BUSINESS} />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} />
+        ))}
+
+        {sizes.map((size) => (
+          <AvatarView key={size} size={size} interactive />
+        ))}
+      </div>
+    );
+  },
+};
+
+export const ProfileBrokenImageFallback: Story = {
+  parameters: {
+    chromatic: {
+      delay: 5000,
+    },
+  },
+  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 = {
+  tags: ['autodocs'],
+  render: () => {
+    const css = `.custom-variant {
+      border: 1px dashed var(--color-border-neutral);
+    }`;
+    return (
+      <div
+        style={{
+          gap: '1em',
+          display: 'grid',
+          justifyContent: 'space-between',
+          gridTemplate: 'auto auto / repeat(2, min-content)',
+        }}
+      >
+        <style>{css}</style>
+        <AvatarView
+          interactive
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: 'var(--color-bright-orange)' }}
+        >
+          <Money />
+        </AvatarView>
+        <AvatarView
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: 'var(--color-bright-orange)', border: 'none' }}
+        >
+          <Money />
+        </AvatarView>
+        <AvatarView interactive className="custom-variant">
+          <PlusCircle />
+        </AvatarView>
+        <AvatarView interactive className="custom-variant">
+          {null}
+        </AvatarView>
+        <AvatarView style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}>
+          <Graph />
+        </AvatarView>
+        <AvatarView
+          interactive
+          style={{ color: 'rgb(22, 51, 0)', backgroundColor: 'rgb(203, 217, 195)' }}
+        >
+          <Graph />
+        </AvatarView>
+        <AvatarView style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}>
+          <Rewards />
+        </AvatarView>
+        <AvatarView
+          interactive
+          style={{ color: 'rgb(203, 217, 195)', backgroundColor: 'rgb(22, 51, 0)' }}
+        >
+          <Rewards />
+        </AvatarView>
+        <AvatarView
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView style={{ backgroundColor: getBrandColorFromSeed(profileName1) }}>
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView interactive style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}>
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView
+          interactive
+          badge={{ flagCode: 'EU' }}
+          style={{ backgroundColor: getBrandColorFromSeed(profileName2) }}
+        >
+          <Display>{getInitials(profileName1)}</Display>
+        </AvatarView>
+        <AvatarView>9+</AvatarView>
+        <AvatarView interactive>5+</AvatarView>
+      </div>
+    );
+  },
+};