@transferwise/components 0.0.0-experimental-e813f6c → 0.0.0-experimental-0852cd9

package/build/main.css

@@ -34,10 +34,6 @@
     margin-left: var(--padding-small);
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);line-height: 155%;letter-spacing: -0.006em;font-weight: 400;font-weight: var(--font-weight-regular);
-}
 @media (min-width: 768px) {
 }
 @media (min-width: 768px) {

package/build/promoCard/PromoCardIndicator.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var icons = require('@transferwise/icons');
 var clsx = require('clsx');
-var avatarTypes = require('../avatar/avatarTypes.js');
-var Avatar = require('../avatar/Avatar.js');
 var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
@@ -30,6 +28,7 @@ require('react');
 require('react-intl');
 require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var AvatarView = require('../avatarView/AvatarView.js');
 
 const PromoCardIndicator = ({
   className,
@@ -55,10 +54,12 @@ const PromoCardIndicator = ({
       type: typography.Typography.BODY_LARGE_BOLD,
       className: "np-Card-indicatorText",
       children: label
-    }), icon && /*#__PURE__*/jsxRuntime.jsx(Avatar.default, {
-      type: avatarTypes.AvatarType.ICON,
+    }), icon && /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
+      interactive: true,
       size: isSmall ? 40 : 56,
-      backgroundColor: "var(--Card-indicator-icon-background-color)",
+      style: {
+        backgroundColor: 'var(--Card-indicator-icon-background-color)'
+      },
       className: "np-Card-indicatorIcon",
       children: IconComponent ? /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
         size: 24,

package/build/promoCard/PromoCardIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCardIndicator.js","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport type PromoCardIndicatorProps = {\n  /** Optional class name(s) to add to the indicator container. */\n  className?: string;\n\n  /** Optional label to display next to the indicator. */\n  label?: string;\n\n  /** Optional icon to display in the indicator. */\n  icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n  /** Optional prop to specify whether the indicator is sized small or not. */\n  isSmall?: boolean;\n\n  /** Optional ID to add to the indicator container for testing purposes. */\n  testid?: string;\n\n  /** Optional children to display inside the indicator. */\n  children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n  className,\n  children,\n  label,\n  icon,\n  isSmall = false,\n  testid,\n  ...rest\n}) => {\n  const isIconString = icon && typeof icon === 'string';\n\n  const IconComponent =\n    isIconString &&\n    {\n      check: Check,\n      arrow: ArrowRight,\n      download: Download,\n    }[icon];\n\n  return (\n    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n      {label && (\n        <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n          {label}\n        </Body>\n      )}\n      {icon && (\n        <Avatar\n          type={AvatarType.ICON}\n          size={isSmall ? 40 : 56}\n          backgroundColor=\"var(--Card-indicator-icon-background-color)\"\n          className=\"np-Card-indicatorIcon\"\n        >\n          {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n        </Avatar>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","Avatar","AvatarType","ICON","size","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,WAAK;AACZC,IAAAA,KAAK,EAAEC,gBAAU;AACjBC,IAAAA,QAAQ,EAAEC,cAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,cAAA,CAACC,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,cAAA,CAACM,cAAM,EAAA;MACLH,IAAI,EAAEI,sBAAU,CAACC,IAAK;AACtBC,MAAAA,IAAI,EAAEtB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBuB,MAAAA,eAAe,EAAC,6CAA6C;AAC7D3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,cAAA,CAACT,aAAa,EAAA;AAACkB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGvB,IAAAA;KAC5D,CACT,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"PromoCardIndicator.js","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport AvatarView from '../avatarView';\n\nexport type PromoCardIndicatorProps = {\n  /** Optional class name(s) to add to the indicator container. */\n  className?: string;\n\n  /** Optional label to display next to the indicator. */\n  label?: string;\n\n  /** Optional icon to display in the indicator. */\n  icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n  /** Optional prop to specify whether the indicator is sized small or not. */\n  isSmall?: boolean;\n\n  /** Optional ID to add to the indicator container for testing purposes. */\n  testid?: string;\n\n  /** Optional children to display inside the indicator. */\n  children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n  className,\n  children,\n  label,\n  icon,\n  isSmall = false,\n  testid,\n  ...rest\n}) => {\n  const isIconString = icon && typeof icon === 'string';\n\n  const IconComponent =\n    isIconString &&\n    {\n      check: Check,\n      arrow: ArrowRight,\n      download: Download,\n    }[icon];\n\n  return (\n    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n      {label && (\n        <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n          {label}\n        </Body>\n      )}\n      {icon && (\n        <AvatarView\n          interactive\n          size={isSmall ? 40 : 56}\n          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}\n          className=\"np-Card-indicatorIcon\"\n        >\n          {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n        </AvatarView>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","AvatarView","interactive","size","style","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,WAAK;AACZC,IAAAA,KAAK,EAAEC,gBAAU;AACjBC,IAAAA,QAAQ,EAAEC,cAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,cAAA,CAACC,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,cAAA,CAACM,kBAAU,EAAA;MACTC,WAAW,EAAA,IAAA;AACXC,MAAAA,IAAI,EAAErB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBsB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE,6CAAA;OAAgD;AAC1E3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,cAAA,CAACT,aAAa,EAAA;AAACiB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGtB,IAAAA;KACxD,CACb,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}

package/build/promoCard/PromoCardIndicator.mjs

@@ -1,7 +1,5 @@
 import { Check, ArrowRight, Download } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { AvatarType } from '../avatar/avatarTypes.mjs';
-import Avatar from '../avatar/Avatar.mjs';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
@@ -26,6 +24,7 @@ import 'react';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import AvatarView from '../avatarView/AvatarView.mjs';
 
 const PromoCardIndicator = ({
   className,
@@ -51,10 +50,12 @@ const PromoCardIndicator = ({
       type: Typography.BODY_LARGE_BOLD,
       className: "np-Card-indicatorText",
       children: label
-    }), icon && /*#__PURE__*/jsx(Avatar, {
-      type: AvatarType.ICON,
+    }), icon && /*#__PURE__*/jsx(AvatarView, {
+      interactive: true,
       size: isSmall ? 40 : 56,
-      backgroundColor: "var(--Card-indicator-icon-background-color)",
+      style: {
+        backgroundColor: 'var(--Card-indicator-icon-background-color)'
+      },
       className: "np-Card-indicatorIcon",
       children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
         size: 24,

package/build/promoCard/PromoCardIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PromoCardIndicator.mjs","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport type PromoCardIndicatorProps = {\n  /** Optional class name(s) to add to the indicator container. */\n  className?: string;\n\n  /** Optional label to display next to the indicator. */\n  label?: string;\n\n  /** Optional icon to display in the indicator. */\n  icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n  /** Optional prop to specify whether the indicator is sized small or not. */\n  isSmall?: boolean;\n\n  /** Optional ID to add to the indicator container for testing purposes. */\n  testid?: string;\n\n  /** Optional children to display inside the indicator. */\n  children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n  className,\n  children,\n  label,\n  icon,\n  isSmall = false,\n  testid,\n  ...rest\n}) => {\n  const isIconString = icon && typeof icon === 'string';\n\n  const IconComponent =\n    isIconString &&\n    {\n      check: Check,\n      arrow: ArrowRight,\n      download: Download,\n    }[icon];\n\n  return (\n    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n      {label && (\n        <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n          {label}\n        </Body>\n      )}\n      {icon && (\n        <Avatar\n          type={AvatarType.ICON}\n          size={isSmall ? 40 : 56}\n          backgroundColor=\"var(--Card-indicator-icon-background-color)\"\n          className=\"np-Card-indicatorIcon\"\n        >\n          {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n        </Avatar>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","Avatar","AvatarType","ICON","size","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,KAAK;AACZC,IAAAA,KAAK,EAAEC,UAAU;AACjBC,IAAAA,QAAQ,EAAEC,QAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,GAAA,CAACM,MAAM,EAAA;MACLH,IAAI,EAAEI,UAAU,CAACC,IAAK;AACtBC,MAAAA,IAAI,EAAEtB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBuB,MAAAA,eAAe,EAAC,6CAA6C;AAC7D3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,GAAA,CAACT,aAAa,EAAA;AAACkB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGvB,IAAAA;KAC5D,CACT,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"PromoCardIndicator.mjs","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport AvatarView from '../avatarView';\n\nexport type PromoCardIndicatorProps = {\n  /** Optional class name(s) to add to the indicator container. */\n  className?: string;\n\n  /** Optional label to display next to the indicator. */\n  label?: string;\n\n  /** Optional icon to display in the indicator. */\n  icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n  /** Optional prop to specify whether the indicator is sized small or not. */\n  isSmall?: boolean;\n\n  /** Optional ID to add to the indicator container for testing purposes. */\n  testid?: string;\n\n  /** Optional children to display inside the indicator. */\n  children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n  className,\n  children,\n  label,\n  icon,\n  isSmall = false,\n  testid,\n  ...rest\n}) => {\n  const isIconString = icon && typeof icon === 'string';\n\n  const IconComponent =\n    isIconString &&\n    {\n      check: Check,\n      arrow: ArrowRight,\n      download: Download,\n    }[icon];\n\n  return (\n    <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n      {label && (\n        <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n          {label}\n        </Body>\n      )}\n      {icon && (\n        <AvatarView\n          interactive\n          size={isSmall ? 40 : 56}\n          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}\n          className=\"np-Card-indicatorIcon\"\n        >\n          {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n        </AvatarView>\n      )}\n      {children}\n    </div>\n  );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","AvatarView","interactive","size","style","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,KAAK;AACZC,IAAAA,KAAK,EAAEC,UAAU;AACjBC,IAAAA,QAAQ,EAAEC,QAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,GAAA,CAACM,UAAU,EAAA;MACTC,WAAW,EAAA,IAAA;AACXC,MAAAA,IAAI,EAAErB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBsB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE,6CAAA;OAAgD;AAC1E3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,GAAA,CAACT,aAAa,EAAA;AAACiB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGtB,IAAAA;KACxD,CACb,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}

package/build/styles/main.css

@@ -34,10 +34,6 @@
     margin-left: var(--padding-small);
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);line-height: 155%;letter-spacing: -0.006em;font-weight: 400;font-weight: var(--font-weight-regular);
-}
 @media (min-width: 768px) {
 }
 @media (min-width: 768px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e813f6c",
+  "version": "0.0.0-experimental-0852cd9",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateLookup/DateLookup.less

@@ -11,7 +11,6 @@
 
   > tbody > tr > td.weekend button {
     color: var(--color-content-secondary);
-    &:extend(.np-text-body-default);
   }
 
   > tbody > tr > td {

package/src/decision/Decision.spec.tsx

@@ -1,10 +1,10 @@
-import Avatar from '../avatar';
 import { Breakpoint, Size } from '../common';
 import { mockMatchMedia } from '../mocks';
 import { render, screen } from '../test-utils';
 
 import Decision, { DecisionPresentation, DecisionType } from '.';
 import { DecisionProps } from './Decision';
+import AvatarView from '../avatarView';
 
 mockMatchMedia(jest);
 
@@ -13,7 +13,7 @@ describe('Decision', () => {
     options: [
       {
         media: {
-          list: <Avatar type="initials">HM</Avatar>,
+          list: <AvatarView profileName="Henry Mike" />,
           block: <img src="img.jpg" alt="alt" />,
         },
         href: '#href',

package/src/decision/Decision.story.tsx

@@ -2,10 +2,10 @@ import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import { Illustration } from '@wise/art';
 
-import Avatar from '../avatar';
 import { Size } from '../common';
 
 import Decision, { DecisionPresentation, DecisionType } from '.';
+import AvatarView from '../avatarView';
 
 export default {
   component: Decision,
@@ -33,11 +33,7 @@ export const Basic = () => {
           disabled,
           media: {
             block: <Illustration name="globe" alt="" disablePadding />,
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click to see something',
           title: 'Hank Miller',
@@ -50,11 +46,7 @@ export const Basic = () => {
           href: '#href2',
           media: {
             block: <Illustration name="confetti" alt="" disablePadding />,
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -109,11 +101,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click to see something',
           title: 'Hank Miller',
@@ -131,11 +119,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -152,11 +136,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           disabled,
@@ -175,11 +155,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -197,11 +173,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -219,11 +191,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',
@@ -241,11 +209,7 @@ export const grid = () => {
                 alt=""
               />
             ),
-            list: (
-              <Avatar size="md" type="initials">
-                HM
-              </Avatar>
-            ),
+            list: <AvatarView profileName="Henry Mike" />,
           },
           'aria-label': 'Click here to send money to Hank Miller.',
           title: 'Hank Miller',

package/src/flowNavigation/FlowNavigation.spec.js

@@ -1,5 +1,5 @@
-import Avatar, { AvatarType } from '../avatar';
-import { Breakpoint, Size } from '../common';
+import AvatarView from '../avatarView';
+import { Breakpoint } from '../common';
 import { mockMatchMedia, render, screen } from '../test-utils';
 
 import FlowNavigation from './FlowNavigation';
@@ -22,11 +22,7 @@ describe('FlowNavigation', () => {
   });
 
   const props = {
-    avatar: (
-      <Avatar type={AvatarType.INITIALS} size={Size.MEDIUM}>
-        TM
-      </Avatar>
-    ),
+    avatar: <AvatarView profileName="Tim Mike" />,
     logo: <img alt="logo" src="logo.svg" width="138" height="24" />,
     onClose: jest.fn(),
     steps: [

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -46,10 +46,12 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
+          style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
+            style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
           >
             TM
           </div>
@@ -162,10 +164,12 @@ exports[`FlowNavigation renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
+          style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
+            style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
           >
             TM
           </div>

package/src/main.css

@@ -34,10 +34,6 @@
     margin-left: var(--padding-small);
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);line-height: 155%;letter-spacing: -0.006em;font-weight: 400;font-weight: var(--font-weight-regular);
-}
 @media (min-width: 768px) {
 }
 @media (min-width: 768px) {

package/src/navigationOption/NavigationOption.story.tsx

@@ -7,10 +7,11 @@ import {
   PlusCircle,
   Profile,
   UpwardGraph as UpwardGraphIcon,
+  FastFlag,
 } from '@transferwise/icons';
 import { Illustration, Assets, Flag } from '@wise/art';
 
-import { Badge, Nudge, Avatar, Header, Title, Typography } from '..';
+import { Nudge, Header, Title, Typography, AvatarView } from '..';
 
 import NavigationOption from './NavigationOption';
 
@@ -85,11 +86,9 @@ export const Variants = () => (
       <Template
         showMediaCircle={false}
         media={
-          <Badge badge={<PlusCircle className="tw-contacts__new-contact-badge" />}>
-            <Avatar type="icon">
-              <Profile size="24" />
-            </Avatar>
-          </Badge>
+          <AvatarView badge={{ type: 'reference' }}>
+            <Profile />
+          </AvatarView>
         }
       />
     </div>
@@ -98,20 +97,13 @@ export const Variants = () => (
       <Template
         showMediaCircle={false}
         media={
-          <Badge
-            badge={
-              <img
-                src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
-                alt=""
-                height="24px"
-                width="24px"
-              />
-            }
-          >
-            <Avatar type="initials" size="md">
-              <span aria-hidden>SP</span>
-            </Avatar>
-          </Badge>
+          <AvatarView
+            badge={{
+              icon: <FastFlag />,
+              type: 'action',
+            }}
+            profileName="Spencer Penn"
+          />
         }
       />
     </div>
@@ -125,20 +117,13 @@ export const Variants = () => (
       <Template
         showMediaCircle
         media={
-          <Badge
-            badge={
-              <img
-                src="https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg"
-                alt=""
-                height="24px"
-                width="24px"
-              />
-            }
-          >
-            <Avatar type="initials" size="md">
-              <span aria-hidden>SP</span>
-            </Avatar>
-          </Badge>
+          <AvatarView
+            badge={{
+              icon: <FastFlag />,
+              type: 'action',
+            }}
+            profileName="Spencer Penn"
+          />
         }
       />
     </div>
@@ -222,9 +207,9 @@ export const BalanceContent = () => (
     content="British pound"
     showMediaCircle={false}
     media={
-      <Avatar type="icon">
+      <AvatarView>
         <Flag code="GBP" />
-      </Avatar>
+      </AvatarView>
     }
   />
 );
@@ -234,11 +219,9 @@ export const NewContactContent = () => (
     title="New Contact"
     showMediaCircle={false}
     media={
-      <Badge badge={<PlusCircle className="tw-contacts__new-contact-badge" />}>
-        <Avatar type="icon">
-          <Profile size="24" />
-        </Avatar>
-      </Badge>
+      <AvatarView badge={{ type: 'reference' }}>
+        <Profile size="24" />
+      </AvatarView>
     }
   />
 );
@@ -248,13 +231,7 @@ export const ExistingContactContent = () => (
     title="Wise Customer"
     content="EUR account ending in 1111"
     showMediaCircle={false}
-    media={
-      <Badge badge={<Flag code="EUR" />}>
-        <Avatar type="initials" size="md">
-          <span aria-hidden>WS</span>
-        </Avatar>
-      </Badge>
-    }
+    media={<AvatarView profileName="Walter Smith" badge={{ flagCode: 'EUR' }} />}
   />
 );
 
@@ -280,9 +257,9 @@ export const ManageAccountContent = () => (
       content="View and share your account details to get paid."
       showMediaCircle={false}
       media={
-        <Avatar type="icon">
-          <BankIcon size={24} />
-        </Avatar>
+        <AvatarView>
+          <BankIcon />
+        </AvatarView>
       }
     />
     <NavigationOptionTemplate
@@ -290,9 +267,9 @@ export const ManageAccountContent = () => (
       content="Convert money between your balances at your desired exchange rate."
       showMediaCircle={false}
       media={
-        <Avatar type="icon">
+        <AvatarView>
           <UpwardGraphIcon size={24} />
-        </Avatar>
+        </AvatarView>
       }
     />
   </>

package/src/overlayHeader/OverlayHeader.spec.tsx

@@ -1,16 +1,13 @@
-import Avatar, { AvatarType } from '../avatar';
-import { Size } from '../common';
-import { render } from '../test-utils';
+import { render, mockMatchMedia } from '../test-utils';
 
 import OverlayHeader from '.';
+import AvatarView from '../avatarView';
+
+mockMatchMedia();
 
 describe('OverlayHeader', () => {
   const props = {
-    avatar: (
-      <Avatar type={AvatarType.INITIALS} size={Size.MEDIUM}>
-        TM
-      </Avatar>
-    ),
+    avatar: <AvatarView profileName="Tim Morris" />,
     logo: <img alt="logo_desktop" src="img_desktop" width="138" height="24" />,
     onClose: jest.fn(),
   };

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -18,10 +18,12 @@ exports[`OverlayHeader renders as expected 1`] = `
         class="d-flex align-items-center order-2"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          class="np-circle d-flex align-items-center justify-content-center np-avatar-view np-avatar-view-non-interactive"
+          style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle np-circle-border d-flex align-items-center justify-content-center np-avatar-view-content"
+            style="--circle-size: 48px; --circle-icon-size: 24px; --circle-font-size: 22px;"
           >
             TM
           </div>

package/src/promoCard/PromoCard.spec.tsx

@@ -1,8 +1,10 @@
-import { render, fireEvent, screen } from '../test-utils';
+import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 import React from 'react';
 
 import PromoCard, { PromoCardProps, PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
 
+mockMatchMedia();
+
 describe('PromoCard', () => {
   const defaultProps = {
     title: 'Test Title',

package/src/promoCard/PromoCardIndicator.tsx

@@ -2,9 +2,9 @@ import { ArrowRight, Check, Download } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
-import Avatar, { AvatarType } from '../avatar';
 import Body from '../body';
 import { Typography } from '../common';
+import AvatarView from '../avatarView';
 
 export type PromoCardIndicatorProps = {
   /** Optional class name(s) to add to the indicator container. */
@@ -69,14 +69,14 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
         </Body>
       )}
       {icon && (
-        <Avatar
-          type={AvatarType.ICON}
+        <AvatarView
+          interactive
           size={isSmall ? 40 : 56}
-          backgroundColor="var(--Card-indicator-icon-background-color)"
+          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}
           className="np-Card-indicatorIcon"
         >
           {IconComponent ? <IconComponent size={24} aria-hidden="true" /> : icon}
-        </Avatar>
+        </AvatarView>
       )}
       {children}
     </div>

package/src/tile/Tile.story.tsx

@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 
-import Avatar from '../avatar';
 import { Size } from '../common';
 
 import Tile from '.';
+import AvatarView from '../avatarView';
 
 export default {
   component: Tile,
@@ -41,11 +41,7 @@ export const Basic = () => {
           description={description}
           disabled={disabled}
           href="#href1"
-          media={
-            <Avatar size="md" type="initials">
-              HM
-            </Avatar>
-          }
+          media={<AvatarView profileName="Henry Morris" />}
           size={medium ? Size.MEDIUM : Size.SMALL}
           title={title}
           onClick={action('onClick')}