@transferwise/components 45.14.0 → 45.14.2

package/build/types/common/closeButton/CloseButton.d.ts

@@ -6,7 +6,7 @@ export type CloseButtonProps = Pick<React.ComponentPropsWithoutRef<'button'>, 'a
     isDisabled?: boolean;
     testId?: string;
 };
-export declare const CloseButton: import("react").ForwardRefExoticComponent<Pick<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "className" | "aria-label" | "onClick"> & {
+export declare const CloseButton: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "className" | "aria-label" | "onClick"> & {
     size?: "sm" | "md" | "lg" | undefined;
     filled?: boolean | undefined;
     isDisabled?: boolean | undefined;

package/build/types/dateLookup/tableLink/TableLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.js"],"names":[],"mappings":";AAGA;IA6CwtkB,wBAA8C;IAAA,sCAAgK;IA5Cp6kB,8BAKE;IAEF,sCAiBC;CACF"}
+{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/tableLink/TableLink.js"],"names":[],"mappings":";AAGA;IA6Co1kB,wBAA8C;IAAA,sCAAgK;IA5ChilB,8BAKE;IAEF,sCAiBC;CACF"}

package/build/types/dateLookup/yearCalendar/YearCalendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YearCalendar.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/yearCalendar/YearCalendar.js"],"names":[],"mappings":";AAOA;IA6C8mkB,wBAA8C;IAAA,sCAAgK;IA5C1zkB,kCAGE;IAEF,gCAEE;IAEF,4BAEE;IAEF,sCAWC;CACF"}
+{"version":3,"file":"YearCalendar.d.ts","sourceRoot":"","sources":["../../../../src/dateLookup/yearCalendar/YearCalendar.js"],"names":[],"mappings":";AAOA;IA6C0ukB,wBAA8C;IAAA,sCAAgK;IA5Ct7kB,kCAGE;IAEF,gCAEE;IAEF,4BAEE;IAEF,sCAWC;CACF"}

package/build/types/inputs/Input.d.ts

@@ -6,5 +6,5 @@ export interface InputProps extends Merge<React.ComponentPropsWithRef<'input'>,
     'aria-invalid'?: boolean;
 }> {
 }
-export declare const Input: import("react").ForwardRefExoticComponent<Pick<InputProps, "id" | "value" | "children" | "content" | "disabled" | "className" | "form" | "slot" | "style" | "title" | "pattern" | "size" | "key" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Input.d.ts.map

package/build/types/inputs/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/inputs/Input.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,WAAW,UACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,KAAK,+gKAehB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/inputs/Input.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,WAAW,UACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,KAAK,sHAehB,CAAC"}

package/build/types/inputs/TextArea.d.ts

@@ -4,5 +4,5 @@ export interface TextAreaProps extends Merge<React.ComponentPropsWithRef<'textar
     'aria-invalid'?: boolean;
 }> {
 }
-export declare const TextArea: import("react").ForwardRefExoticComponent<Pick<TextAreaProps, "id" | "value" | "children" | "content" | "disabled" | "className" | "form" | "slot" | "style" | "title" | "key" | "autoComplete" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "wrap" | "cols" | "dirName" | "rows"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=TextArea.d.ts.map

package/build/types/inputs/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/inputs/TextArea.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,aACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC,EACvC;IACE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,QAAQ,szJAWnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/inputs/TextArea.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,aACf,SAAQ,KAAK,CACX,KAAK,CAAC,qBAAqB,CAAC,UAAU,CAAC,EACvC;IACE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CACF;CAAG;AAEN,eAAO,MAAM,QAAQ,4HAWnB,CAAC"}

package/build/types/link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAEjG;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCAsBP,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAInD,MAAM,MAAM,KAAK,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAEjG;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCAuBP,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/build/types/link/Link.messages.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    opensInNewTab: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=Link.messages.d.ts.map

package/build/types/link/Link.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.messages.d.ts","sourceRoot":"","sources":["../../../src/link/Link.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.14.0",
+  "version": "45.14.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -58,11 +58,11 @@
     "@types/babel__core": "^7.20.1",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.31",
-    "@types/react": "^17.0.59",
+    "@types/react": "^17.0.65",
     "@types/react-dom": "^17.0.20",
     "@types/react-transition-group": "4.4.5",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "@wise/art": "^2.0.1",
+    "@wise/art": "^2.7.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "babel-plugin-formatjs": "^10.5.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -77,14 +77,14 @@
     "rollup": "^3.28.1",
     "storybook": "^7.0.6",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "14.5.2",
-    "@wise/components-theming": "0.8.3"
+    "@transferwise/neptune-css": "14.6.0",
+    "@wise/components-theming": "0.8.4"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-css": "^14.5.2",
     "@wise/art": "^2",
-    "@wise/components-theming": "^0.8.3",
+    "@wise/components-theming": "^0.8.4",
     "currency-flags": "^4.0.2",
     "react": ">=16.14",
     "react-dom": ">=16.14",

package/src/avatar/Avatar.story.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import * as wiseIcons from '@transferwise/icons';
+import { Flag } from '@wise/art';
 
 import { Size } from '../common';
 import { storyConfig } from '../test-utils';
@@ -22,10 +23,11 @@ export const Emoji: Story = {
   },
 };
 
-export const Flag: Story = {
+export const FlagStory: Story = {
+  name: 'Flag',
   render: (args) => (
     <Avatar {...args}>
-      <img src="https://wise.com/web-art/assets/flags/gbp.svg" alt="" />
+      <Flag code="GBP" />
     </Avatar>
   ),
   args: {
@@ -38,8 +40,8 @@ export const Flag: Story = {
 export const Table: Story = storyConfig(
   {
     render: () => {
-      const flagResourceJpy = 'https://wise.com/web-art/assets/flags/jpy.svg';
-      const flagResourceGbp = 'https://wise.com/web-art/assets/flags/gbp.svg';
+      const flagJPY = <Flag code="JPY" />;
+      const flagGBP = <Flag code="GBP" />;
       const backgroundColor = '#d6f5e3';
       const emoji = '✈️';
       const initials = 'GN';
@@ -52,27 +54,27 @@ export const Table: Story = storyConfig(
             <tr>
               <td>
                 <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={56} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={40} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL} outlined>
-                  <img src={flagResourceJpy} alt="" />
+                  {flagJPY}
                 </Avatar>
               </td>
             </tr>
@@ -80,27 +82,27 @@ export const Table: Story = storyConfig(
             <tr>
               <td>
                 <Avatar size={Size.LARGE} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={56} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={Size.MEDIUM} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={40} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
               <td>
                 <Avatar size={Size.SMALL} type={AvatarType.THUMBNAIL}>
-                  <img src={flagResourceGbp} alt="" />
+                  {flagGBP}
                 </Avatar>
               </td>
             </tr>

package/src/link/Link.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  opensInNewTab: {
+    id: 'neptune.Link.opensInNewTab',
+    defaultMessage: '(opens in new tab)',
+  },
+});

package/src/link/Link.tsx

@@ -1,9 +1,12 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import { AnchorHTMLAttributes } from 'react';
+import { useIntl } from 'react-intl';
 
 import { LinkLarge, LinkDefault } from '../common';
 
+import messages from './Link.messages';
+
 export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
 
 /**
@@ -23,6 +26,8 @@ const Link = ({
 }: Props) => {
   const isBlank = target === '_blank';
 
+  const { formatMessage } = useIntl();
+
   return (
     <a
       href={href}
@@ -38,8 +43,7 @@ const Link = ({
       onClick={onClick}
       {...props}
     >
-      {children}
-      {isBlank && <NavigateAwayIcon />}
+      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
     </a>
   );
 };

package/src/navigationOption/NavigationOption.story.js

@@ -7,7 +7,7 @@ import {
   Profile,
   UpwardGraph as UpwardGraphIcon,
 } from '@transferwise/icons';
-import { Illustration, Assets } from '@wise/art';
+import { Illustration, Assets, Flag } from '@wise/art';
 
 import { Badge, Nudge, Avatar, Header } from '..';
 
@@ -203,7 +203,7 @@ export const BalanceContent = () => (
     showMediaCircle={false}
     media={
       <Avatar type="icon">
-        <img src="https://wise.com/web-art/assets/flags/gbp.svg" alt="" />
+        <Flag code="GBP" />
       </Avatar>
     }
   />
@@ -229,9 +229,7 @@ export const ExistingContactContent = () => (
     content="EUR account ending in 1111"
     showMediaCircle={false}
     media={
-      <Badge
-        badge={<img src="https://wise.com/public-resources/assets/flags/square/eur.svg" alt="" />}
-      >
+      <Badge badge={<Flag code="EUR" />}>
         <Avatar type="initials" size="md">
           <span aria-hidden>WS</span>
         </Avatar>

package/src/radio/Radio.story.js

@@ -1,5 +1,6 @@
 import { boolean, text } from '@storybook/addon-knobs';
 import { Check } from '@transferwise/icons';
+import { Flag } from '@wise/art';
 import { useState } from 'react';
 
 import Avatar, { AvatarType } from '../avatar';
@@ -33,7 +34,7 @@ export const Basic = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.THUMBNAIL}>
-                <img src="https://wise.com/web-art/assets/flags/imp.svg" alt="" />
+                <Flag code="IMP" />
               </Avatar>
             ) : null
           }
@@ -51,7 +52,7 @@ export const Basic = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.THUMBNAIL}>
-                <img src="https://wise.com/web-art/assets/flags/kes.svg" alt="" />
+                <Flag code="KES" />
               </Avatar>
             ) : null
           }

package/src/radioGroup/RadioGroup.story.js

@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
+import { Flag } from '@wise/art';
 
 import Avatar, { AvatarType } from '../avatar';
 
@@ -16,7 +17,7 @@ export const Basic = () => {
 
   const avatar = showAvatars ? (
     <Avatar type={AvatarType.THUMBNAIL}>
-      <img src="https://wise.com/web-art/assets/flags/nzd.svg" alt="" />
+      <Flag code="NZD" />
     </Avatar>
   ) : undefined;