@transferwise/components 0.0.0-experimental-d11e9c5 → 0.0.0-experimental-6a7bc4f

package/build/index.js

@@ -19,30 +19,6 @@ var breakpoint = require('./common/propsValues/breakpoint.js');
 require('react/jsx-runtime');
 var Image = require('./image/Image.js');
 require('@transferwise/icons');
-var documentIosClick = require('./common/domHelpers/documentIosClick.js');
-var theme = require('./common/theme.js');
-var direction = require('./common/direction.js');
-var control = require('./common/propsValues/control.js');
-var size = require('./common/propsValues/size.js');
-var typography = require('./common/propsValues/typography.js');
-var width = require('./common/propsValues/width.js');
-var type = require('./common/propsValues/type.js');
-var dateMode = require('./common/propsValues/dateMode.js');
-var monthFormat = require('./common/propsValues/monthFormat.js');
-var position = require('./common/propsValues/position.js');
-var layouts = require('./common/propsValues/layouts.js');
-var status = require('./common/propsValues/status.js');
-var sentiment = require('./common/propsValues/sentiment.js');
-var profileType = require('./common/propsValues/profileType.js');
-var variant = require('./common/propsValues/variant.js');
-var scroll = require('./common/propsValues/scroll.js');
-var markdownNodeType = require('./common/propsValues/markdownNodeType.js');
-var fileType = require('./common/fileType.js');
-var index = require('./common/locale/index.js');
-var initials = require('./common/initials.js');
-var colors = require('./common/colors.js');
-require('react-intl');
-require('./common/closeButton/CloseButton.messages.js');
 var Body = require('./body/Body.js');
 var Button = require('./button/Button.js');
 var Carousel = require('./carousel/Carousel.js');
@@ -133,6 +109,30 @@ var useDirection = require('./common/hooks/useDirection/useDirection.js');
 var useLayout = require('./common/hooks/useLayout/useLayout.js');
 var useScreenSize = require('./common/hooks/useScreenSize.js');
 var useSnackbar = require('./snackbar/useSnackbar.js');
+var documentIosClick = require('./common/domHelpers/documentIosClick.js');
+var theme = require('./common/theme.js');
+var direction = require('./common/direction.js');
+var control = require('./common/propsValues/control.js');
+var size = require('./common/propsValues/size.js');
+var typography = require('./common/propsValues/typography.js');
+var width = require('./common/propsValues/width.js');
+var type = require('./common/propsValues/type.js');
+var dateMode = require('./common/propsValues/dateMode.js');
+var monthFormat = require('./common/propsValues/monthFormat.js');
+var position = require('./common/propsValues/position.js');
+var layouts = require('./common/propsValues/layouts.js');
+var status = require('./common/propsValues/status.js');
+var sentiment = require('./common/propsValues/sentiment.js');
+var profileType = require('./common/propsValues/profileType.js');
+var variant = require('./common/propsValues/variant.js');
+var scroll = require('./common/propsValues/scroll.js');
+var markdownNodeType = require('./common/propsValues/markdownNodeType.js');
+var fileType = require('./common/fileType.js');
+var index = require('./common/locale/index.js');
+var initials = require('./common/initials.js');
+var colors = require('./common/colors.js');
+require('react-intl');
+require('./common/closeButton/CloseButton.messages.js');
 var index$1 = require('./i18n/index.js');
 var withId = require('./withId/withId.js');
 
@@ -161,94 +161,6 @@ Object.defineProperty(exports, "Breakpoint", {
 	get: function () { return breakpoint.Breakpoint; }
 });
 exports.Image = Image.default;
-exports.isBrowser = documentIosClick.isBrowser;
-exports.isServerSide = documentIosClick.isServerSide;
-Object.defineProperty(exports, "Theme", {
-	enumerable: true,
-	get: function () { return theme.Theme; }
-});
-Object.defineProperty(exports, "Direction", {
-	enumerable: true,
-	get: function () { return direction.Direction; }
-});
-Object.defineProperty(exports, "ControlType", {
-	enumerable: true,
-	get: function () { return control.ControlType; }
-});
-Object.defineProperty(exports, "Priority", {
-	enumerable: true,
-	get: function () { return control.Priority; }
-});
-Object.defineProperty(exports, "Size", {
-	enumerable: true,
-	get: function () { return size.Size; }
-});
-Object.defineProperty(exports, "Typography", {
-	enumerable: true,
-	get: function () { return typography.Typography; }
-});
-Object.defineProperty(exports, "Width", {
-	enumerable: true,
-	get: function () { return width.Width; }
-});
-Object.defineProperty(exports, "Type", {
-	enumerable: true,
-	get: function () { return type.Type; }
-});
-Object.defineProperty(exports, "DateMode", {
-	enumerable: true,
-	get: function () { return dateMode.DateMode; }
-});
-Object.defineProperty(exports, "MonthFormat", {
-	enumerable: true,
-	get: function () { return monthFormat.MonthFormat; }
-});
-Object.defineProperty(exports, "Position", {
-	enumerable: true,
-	get: function () { return position.Position; }
-});
-Object.defineProperty(exports, "Layout", {
-	enumerable: true,
-	get: function () { return layouts.Layout; }
-});
-Object.defineProperty(exports, "Status", {
-	enumerable: true,
-	get: function () { return status.Status; }
-});
-Object.defineProperty(exports, "Sentiment", {
-	enumerable: true,
-	get: function () { return sentiment.Sentiment; }
-});
-Object.defineProperty(exports, "ProfileType", {
-	enumerable: true,
-	get: function () { return profileType.ProfileType; }
-});
-Object.defineProperty(exports, "Variant", {
-	enumerable: true,
-	get: function () { return variant.Variant; }
-});
-Object.defineProperty(exports, "Scroll", {
-	enumerable: true,
-	get: function () { return scroll.Scroll; }
-});
-Object.defineProperty(exports, "MarkdownNodeType", {
-	enumerable: true,
-	get: function () { return markdownNodeType.MarkdownNodeType; }
-});
-Object.defineProperty(exports, "FileType", {
-	enumerable: true,
-	get: function () { return fileType.FileType; }
-});
-exports.DEFAULT_LANG = index.DEFAULT_LANG;
-exports.DEFAULT_LOCALE = index.DEFAULT_LOCALE;
-exports.RTL_LANGUAGES = index.RTL_LANGUAGES;
-exports.SUPPORTED_LANGUAGES = index.SUPPORTED_LANGUAGES;
-exports.adjustLocale = index.adjustLocale;
-exports.getCountryFromLocale = index.getCountryFromLocale;
-exports.getDirectionFromLocale = index.getDirectionFromLocale;
-exports.getLangFromLocale = index.getLangFromLocale;
-exports.getInitials = initials.getInitials;
-exports.getBrandColorFromSeed = colors.getBrandColorFromSeed;
 exports.Body = Body;
 exports.Button = Button;
 exports.Carousel = Carousel;
@@ -360,6 +272,94 @@ exports.useDirection = useDirection.useDirection;
 exports.useLayout = useLayout.useLayout;
 exports.useScreenSize = useScreenSize.useScreenSize;
 exports.useSnackbar = useSnackbar;
+exports.isBrowser = documentIosClick.isBrowser;
+exports.isServerSide = documentIosClick.isServerSide;
+Object.defineProperty(exports, "Theme", {
+	enumerable: true,
+	get: function () { return theme.Theme; }
+});
+Object.defineProperty(exports, "Direction", {
+	enumerable: true,
+	get: function () { return direction.Direction; }
+});
+Object.defineProperty(exports, "ControlType", {
+	enumerable: true,
+	get: function () { return control.ControlType; }
+});
+Object.defineProperty(exports, "Priority", {
+	enumerable: true,
+	get: function () { return control.Priority; }
+});
+Object.defineProperty(exports, "Size", {
+	enumerable: true,
+	get: function () { return size.Size; }
+});
+Object.defineProperty(exports, "Typography", {
+	enumerable: true,
+	get: function () { return typography.Typography; }
+});
+Object.defineProperty(exports, "Width", {
+	enumerable: true,
+	get: function () { return width.Width; }
+});
+Object.defineProperty(exports, "Type", {
+	enumerable: true,
+	get: function () { return type.Type; }
+});
+Object.defineProperty(exports, "DateMode", {
+	enumerable: true,
+	get: function () { return dateMode.DateMode; }
+});
+Object.defineProperty(exports, "MonthFormat", {
+	enumerable: true,
+	get: function () { return monthFormat.MonthFormat; }
+});
+Object.defineProperty(exports, "Position", {
+	enumerable: true,
+	get: function () { return position.Position; }
+});
+Object.defineProperty(exports, "Layout", {
+	enumerable: true,
+	get: function () { return layouts.Layout; }
+});
+Object.defineProperty(exports, "Status", {
+	enumerable: true,
+	get: function () { return status.Status; }
+});
+Object.defineProperty(exports, "Sentiment", {
+	enumerable: true,
+	get: function () { return sentiment.Sentiment; }
+});
+Object.defineProperty(exports, "ProfileType", {
+	enumerable: true,
+	get: function () { return profileType.ProfileType; }
+});
+Object.defineProperty(exports, "Variant", {
+	enumerable: true,
+	get: function () { return variant.Variant; }
+});
+Object.defineProperty(exports, "Scroll", {
+	enumerable: true,
+	get: function () { return scroll.Scroll; }
+});
+Object.defineProperty(exports, "MarkdownNodeType", {
+	enumerable: true,
+	get: function () { return markdownNodeType.MarkdownNodeType; }
+});
+Object.defineProperty(exports, "FileType", {
+	enumerable: true,
+	get: function () { return fileType.FileType; }
+});
+exports.DEFAULT_LANG = index.DEFAULT_LANG;
+exports.DEFAULT_LOCALE = index.DEFAULT_LOCALE;
+exports.RTL_LANGUAGES = index.RTL_LANGUAGES;
+exports.SUPPORTED_LANGUAGES = index.SUPPORTED_LANGUAGES;
+exports.adjustLocale = index.adjustLocale;
+exports.getCountryFromLocale = index.getCountryFromLocale;
+exports.getDirectionFromLocale = index.getDirectionFromLocale;
+exports.getLangFromLocale = index.getLangFromLocale;
+exports.getInitials = initials.getInitials;
+exports.getBrandColorFromSeed = colors.getBrandColorFromSeed;
 exports.translations = index$1;
 exports.withId = withId;
 //# sourceMappingURL=index.js.map

package/build/index.mjs

@@ -17,30 +17,6 @@ export { Breakpoint } from './common/propsValues/breakpoint.mjs';
 import 'react/jsx-runtime';
 export { default as Image } from './image/Image.mjs';
 import '@transferwise/icons';
-export { isBrowser, isServerSide } from './common/domHelpers/documentIosClick.mjs';
-export { Theme } from './common/theme.mjs';
-export { Direction } from './common/direction.mjs';
-export { ControlType, Priority } from './common/propsValues/control.mjs';
-export { Size } from './common/propsValues/size.mjs';
-export { Typography } from './common/propsValues/typography.mjs';
-export { Width } from './common/propsValues/width.mjs';
-export { Type } from './common/propsValues/type.mjs';
-export { DateMode } from './common/propsValues/dateMode.mjs';
-export { MonthFormat } from './common/propsValues/monthFormat.mjs';
-export { Position } from './common/propsValues/position.mjs';
-export { Layout } from './common/propsValues/layouts.mjs';
-export { Status } from './common/propsValues/status.mjs';
-export { Sentiment } from './common/propsValues/sentiment.mjs';
-export { ProfileType } from './common/propsValues/profileType.mjs';
-export { Variant } from './common/propsValues/variant.mjs';
-export { Scroll } from './common/propsValues/scroll.mjs';
-export { MarkdownNodeType } from './common/propsValues/markdownNodeType.mjs';
-export { FileType } from './common/fileType.mjs';
-export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale } from './common/locale/index.mjs';
-export { getInitials } from './common/initials.mjs';
-export { getBrandColorFromSeed } from './common/colors.mjs';
-import 'react-intl';
-import './common/closeButton/CloseButton.messages.mjs';
 export { default as Body } from './body/Body.mjs';
 export { default as Button } from './button/Button.mjs';
 export { default as Carousel } from './carousel/Carousel.mjs';
@@ -131,6 +107,30 @@ export { useDirection } from './common/hooks/useDirection/useDirection.mjs';
 export { useLayout } from './common/hooks/useLayout/useLayout.mjs';
 export { useScreenSize } from './common/hooks/useScreenSize.mjs';
 export { default as useSnackbar } from './snackbar/useSnackbar.mjs';
+export { isBrowser, isServerSide } from './common/domHelpers/documentIosClick.mjs';
+export { Theme } from './common/theme.mjs';
+export { Direction } from './common/direction.mjs';
+export { ControlType, Priority } from './common/propsValues/control.mjs';
+export { Size } from './common/propsValues/size.mjs';
+export { Typography } from './common/propsValues/typography.mjs';
+export { Width } from './common/propsValues/width.mjs';
+export { Type } from './common/propsValues/type.mjs';
+export { DateMode } from './common/propsValues/dateMode.mjs';
+export { MonthFormat } from './common/propsValues/monthFormat.mjs';
+export { Position } from './common/propsValues/position.mjs';
+export { Layout } from './common/propsValues/layouts.mjs';
+export { Status } from './common/propsValues/status.mjs';
+export { Sentiment } from './common/propsValues/sentiment.mjs';
+export { ProfileType } from './common/propsValues/profileType.mjs';
+export { Variant } from './common/propsValues/variant.mjs';
+export { Scroll } from './common/propsValues/scroll.mjs';
+export { MarkdownNodeType } from './common/propsValues/markdownNodeType.mjs';
+export { FileType } from './common/fileType.mjs';
+export { DEFAULT_LANG, DEFAULT_LOCALE, RTL_LANGUAGES, SUPPORTED_LANGUAGES, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale } from './common/locale/index.mjs';
+export { getInitials } from './common/initials.mjs';
+export { getBrandColorFromSeed } from './common/colors.mjs';
+import 'react-intl';
+import './common/closeButton/CloseButton.messages.mjs';
 export { default as translations } from './i18n/index.mjs';
 export { default as withId } from './withId/withId.mjs';
 //# sourceMappingURL=index.mjs.map

package/build/types/avatarView/AvatarView.d.ts

@@ -1,19 +1,26 @@
-import { BadgeAssetsProps } from '../badge';
+import { BadgeProps, BadgeAssetsProps } from '../badge';
 import { HTMLAttributes } from 'react';
+import { ProfileTypeBusiness, ProfileTypePersonal } from '../common';
+export type AvatarViewBadgeProps = BadgeAssetsProps & Pick<BadgeProps, 'aria-label'> & {
+    /**
+     * Custom badge content
+     */
+    asset?: React.ReactNode;
+};
 export type Props = {
     imgSrc?: string | null;
     /**
      * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)
      */
     name?: string | null;
-    type?: 'personal' | 'business';
+    type?: ProfileTypeBusiness | ProfileTypePersonal;
     size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
     notification?: boolean;
-    badge?: BadgeAssetsProps;
+    badge?: AvatarViewBadgeProps;
     interactive?: boolean;
     selected?: boolean;
     style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'>;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
 declare function AvatarView({ children, size, selected, notification, badge, interactive, className, style, imgSrc, type, name, ...restProps }: Props): import("react").JSX.Element;
 export default AvatarView;
 //# sourceMappingURL=AvatarView.d.ts.map

package/build/types/avatarView/AvatarView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA2B,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAQpE,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC/B,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,kBAAkB,CAC1F,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,KAAK,+BA6BP;AAoED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GACjD,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACjD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,KAAK,+BA6BP;AAgFD,eAAe,UAAU,CAAC"}

package/build/types/badge/Badge.d.ts

@@ -1,16 +1,17 @@
 import { ReactNode } from 'react';
 import { SizeSmall, SizeMedium, SizeLarge, ThemeDark, ThemeLight, CommonProps } from '../common';
+import { BadgeAssetsProps } from '.';
 /**
- * @deprecated Use `SizeSmall` or `SizeLarge` instead.
+ * @deprecated Use `16` or `24` instead.
  */
-type DeprecatedSizes = SizeMedium;
+type DeprecatedSizes = SizeSmall | SizeMedium | SizeLarge;
 export type BadgeProps = {
     badge: ReactNode;
     children: ReactNode;
     /**
      * `md` is deprecated, it will fallback to `sm` instead.
      */
-    size?: SizeSmall | DeprecatedSizes | SizeLarge;
+    size?: DeprecatedSizes | BadgeAssetsProps['size'];
     border?: ThemeDark | ThemeLight;
     'aria-label'?: string;
     style?: React.CSSProperties;

package/build/types/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AAEnB;;GAEG;AACH,KAAK,eAAe,GAAG,UAAU,CAAC;AAElC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,SAAS,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,CAAC;AAIhB;;GAEG;AACH,QAAA,MAAM,KAAK,4FAQR,UAAU,gCAkBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAGL,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACZ,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,GAAG,CAAC;AAErC;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,CAAC;AAWhB;;GAEG;AACH,QAAA,MAAM,KAAK,4FAQR,UAAU,gCAiBZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/build/types/badge/BadgeAssets.d.ts

@@ -1,15 +1,14 @@
 import { StatusIconProps } from '../statusIcon';
-import type { BadgeProps } from './Badge';
 export type Props = {
     status?: StatusIconProps['sentiment'];
     flagCode?: string;
     imgSrc?: string;
     icon?: React.ReactNode;
     type?: 'action' | 'reference';
-    size?: BadgeProps['size'];
+    size?: 16 | 24;
 };
 /**
  * Common pre-built badge variants.
  */
-export default function BadgeAssets({ status, flagCode, imgSrc, icon, type, size: sizeProp, }: Props): import("react").JSX.Element | null;
+export default function BadgeAssets({ status, flagCode, imgSrc, icon, type, size, }: Props): import("react").JSX.Element | null;
 //# sourceMappingURL=BadgeAssets.d.ts.map

package/build/types/badge/BadgeAssets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeAssets.d.ts","sourceRoot":"","sources":["../../../src/badge/BadgeAssets.tsx"],"names":[],"mappings":"AAAA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAI5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAW,EACX,IAAe,EACf,IAAI,EAAE,QAAQ,GACf,EAAE,KAAK,sCAqCP"}
+{"version":3,"file":"BadgeAssets.d.ts","sourceRoot":"","sources":["../../../src/badge/BadgeAssets.tsx"],"names":[],"mappings":"AAAA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAM5D,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAW,EACX,IAAe,EACf,IAAI,GACL,EAAE,KAAK,sCAmCP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-d11e9c5",
+  "version": "0.0.0-experimental-6a7bc4f",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,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/avatarView/AvatarView.story.tsx

@@ -7,6 +7,7 @@ import {
   Freeze,
   Graph,
   Money,
+  Leaf,
   Plane,
   PlusCircle,
   QrCode,
@@ -97,6 +98,40 @@ 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: () => {
@@ -211,6 +246,28 @@ export const Badge: Story = {
             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>
     );
   },

package/src/avatarView/AvatarView.tsx

@@ -4,28 +4,36 @@ import Circle from '../common/circle';
 import Image from '../image';
 import { HTMLAttributes, PropsWithChildren, useState } from 'react';
 import { clsx } from 'clsx';
-import { getInitials, Size } from '../common';
+import { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';
 import {
   Briefcase as BusinessProfileIcon,
   Profile as PersonalProfileIcon,
 } from '@transferwise/icons';
 
+export type AvatarViewBadgeProps = BadgeAssetsProps &
+  Pick<BadgeProps, 'aria-label'> & {
+    /**
+     * Custom badge content
+     */
+    asset?: React.ReactNode;
+  };
+
 export type Props = {
   imgSrc?: string | null;
   /**
    * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)
    */
   name?: string | null;
-  type?: 'personal' | 'business';
+  type?: ProfileTypeBusiness | ProfileTypePersonal;
   size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
   notification?: boolean;
-  badge?: BadgeAssetsProps;
+  badge?: AvatarViewBadgeProps;
   interactive?: boolean;
   selected?: boolean;
   style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
 } & Pick<
   HTMLAttributes<HTMLDivElement>,
-  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'
+  'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
 >;
 
 function AvatarView({
@@ -65,7 +73,7 @@ function AvatarView({
             ...style,
           }}
         >
-          {children === undefined ? <Profile {...{ imgSrc, type, name }} /> : children}
+          {children === undefined ? <AvatarViewContent {...{ imgSrc, type, name }} /> : children}
         </Circle>
       </Badges>
     </Circle>
@@ -74,14 +82,14 @@ function AvatarView({
 
 /** Size of badge depends on size of avatar */
 const MAP_BADGE_ASSET_SIZE = {
-  16: 'sm',
-  24: 'sm',
-  32: 'sm',
-  40: 'sm',
-  48: 'sm',
-  56: 'lg',
-  72: 'lg',
-};
+  16: 16,
+  24: 16,
+  32: 16,
+  40: 16,
+  48: 16,
+  56: 24,
+  72: 24,
+} satisfies Record<number, BadgeAssetsProps['size']>;
 
 /** Certain sizes of AvatarView has a custom offset of Badge */
 const MAP_BADGE_POSITION = {
@@ -89,7 +97,7 @@ const MAP_BADGE_POSITION = {
   32: -4,
 };
 
-type BadgesProps = BadgeAssetsProps &
+type BadgesProps = AvatarViewBadgeProps &
   PropsWithChildren<{
     avatar: Pick<Props, 'selected' | 'size' | 'notification'>;
   }>;
@@ -97,15 +105,30 @@ type BadgesProps = BadgeAssetsProps &
 /**
  * Adds build-in badges to AvatarView
  */
-function Badges({ children, avatar, ...badge }: BadgesProps) {
+function Badges({
+  children,
+  avatar,
+  'aria-label': ariaLabel,
+  asset: customBadge,
+  ...badgeAssets
+}: BadgesProps) {
   const { size = 48, selected, notification } = avatar;
-  const anyCustomBadge = Object.keys(badge).length > 0;
-  if ((anyCustomBadge || selected) && size > 16) {
-    const badgeSize: BadgeProps['size'] = MAP_BADGE_ASSET_SIZE[size] ?? Size.SMALL;
+  const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;
+  if ((anyBadge || selected) && size > 16) {
+    const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];
     return (
       <Badge
+        aria-label={ariaLabel}
         size={badgeSize}
-        badge={<BadgeAssets {...(selected ? { status: 'positive' } : badge)} size={badgeSize} />}
+        badge={
+          customBadge ? (
+            <Circle fixedSize size={badgeSize}>
+              {customBadge}
+            </Circle>
+          ) : (
+            <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />
+          )
+        }
         style={{
           // @ts-expect-error CSS custom props allowed
           '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,
@@ -121,16 +144,13 @@ function Badges({ children, avatar, ...badge }: BadgesProps) {
   return children;
 }
 
-/**
- * Common logic for entities (personal & business profiles or recipients)
- */
-function Profile({ imgSrc, name, type }: Pick<Props, 'imgSrc' | 'name' | 'type'>) {
+function AvatarViewContent({ imgSrc, name, type }: Pick<Props, 'imgSrc' | 'name' | 'type'>) {
   const [tryLoadImage, setTryLoadImage] = useState(true);
   if (imgSrc && tryLoadImage) {
     return <Image src={imgSrc} alt="" onError={() => setTryLoadImage(false)} />;
   }
   if (type) {
-    return type.toLowerCase() === 'business' ? <BusinessProfileIcon /> : <PersonalProfileIcon />;
+    return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;
   }
   if (name) {
     return getInitials(name);