@transferwise/components 45.1.1 → 45.3.0

package/build/es/no-polyfill/avatar/Avatar.js

@@ -1 +1 @@
-import classnames from"classnames";import PropTypes from"prop-types";import{Size,Theme}from"../common";import{AvatarType}from"./avatarTypes";import{jsx as _jsx}from"react/jsx-runtime";var Avatar=function(a){var b=a.backgroundColor,c=a.children,d=a.className,e=a.outlined,f=a.size,g=a.theme,h=a.type;return/*#__PURE__*/_jsx("div",{className:classnames("tw-avatar",d,"tw-avatar--".concat(f),"tw-avatar--".concat(h),"tw-avatar--".concat(g),{"tw-avatar--outlined":e,"np-text-title-body":h===AvatarType.INITIALS}),children:/*#__PURE__*/_jsx("div",{className:"tw-avatar__content",style:{backgroundColor:b||void 0},children:c})})};Avatar.propTypes={backgroundColor:PropTypes.string,children:PropTypes.node,className:PropTypes.string,outlined:PropTypes.bool,size:PropTypes.oneOf(["sm","md","lg",40,56]),theme:PropTypes.oneOf(["light","dark"]),type:PropTypes.oneOf(["thumbnail","icon","emoji","initials"])},Avatar.defaultProps={backgroundColor:null,children:null,className:null,outlined:!1,size:Size.MEDIUM,theme:Theme.LIGHT,type:AvatarType.THUMBNAIL};export default Avatar;
+import classnames from"classnames";import{useMemo}from"react";import{Theme}from"../common";import{getAvatarColorFromSeed}from"./colors";import{jsx as _jsx}from"react/jsx-runtime";var backwardsCompatibleSize=function(a){return"sm"===a?24:"md"===a?48:"lg"===a?72:a},Avatar=function(a){var b=a.backgroundColor,c=void 0===b?null:b,d=a.backgroundColorSeed,e=void 0===d?null:d,f=a.children,g=void 0===f?null:f,h=a.className,i=void 0===h?null:h,j=a.outlined,k=a.size,l=void 0===k?48:k,m=a.theme,n=void 0===m?Theme.LIGHT:m,o=a.type,p=void 0===o?"thumbnail":o,q=useMemo(function(){return!c&&e?"var(".concat(getAvatarColorFromSeed(e),")"):void 0},[c,e]),r=backwardsCompatibleSize(l);return/*#__PURE__*/_jsx("div",{className:classnames("tw-avatar",i,"tw-avatar--".concat(r),"tw-avatar--".concat(p),{"tw-avatar--outlined":void 0!==j&&j,"tw-avatar--branded":!!q,"np-text-title-body":"initials"===p}),children:/*#__PURE__*/_jsx("div",{className:"tw-avatar__content",style:{backgroundColor:c||q},children:g})})};export default Avatar;

package/build/es/no-polyfill/avatar/Avatar.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{Size,Theme}from"../common";import Avatar,{AvatarType}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Avatar,title:"Content/Avatar",tags:["autodocs"]};export var Emoji={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:"\u2708\uFE0F"}))},args:{type:AvatarType.EMOJI,size:Size.MEDIUM,theme:Theme.LIGHT}};export var Flag={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/flags/square/gbp.svg",alt:""})}))},args:{type:AvatarType.THUMBNAIL,size:Size.MEDIUM,outlined:!0}};export var Table={render:function render(a){var b=a.theme,c="https://wise.com/public-resources/assets/flags/square/gbp.svg";return/*#__PURE__*/_jsx("div",{style:{padding:"50px",backgroundColor:b===Theme.DARK?"#37517e":"white"},children:/*#__PURE__*/_jsxs("table",{style:{background:"transparent"},children:[/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:44,height:44},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:36,height:36},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:26,height:26},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:16,height:16},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:44,height:44},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:36,height:36},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:26,height:26},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:16,height:16},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})})]})]})})}};
+import{text,select}from"@storybook/addon-knobs";import*as wiseIcons from"@transferwise/icons";import{Size}from"../common";import{storyConfig}from"../test-utils";import Avatar,{AvatarType}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Avatar,title:"Content/Avatar",tags:["autodocs"]};var table=function(){var a=select("Flag",["jpy","gbp","eur"],"jpy"),b="https://wise.com/web-art/assets/flags/".concat(a,".svg"),c=text("Image URL","https://wise.com/web-art/assets/flags/gbp.svg"),d=text("Emoji","\u2708\uFE0F"),e=text("Icon name","Check"),f=wiseIcons[e],g=text("Background color","#D6F5E3"),h=text("Initials","GN");return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs("table",{children:["Outlined",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})})]}),"Image URL",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),"Emoji",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,children:d})})]}),/*#__PURE__*/_jsx("div",{style:{paddingBottom:"20px"},children:/*#__PURE__*/_jsx("span",{style:{position:"absolute"},children:"Custom background and icon"})}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:16})})})]}),"Initials",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,children:h})})]}),"Branded",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,backgroundColorSeed:"1",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,backgroundColorSeed:"2",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,backgroundColorSeed:"3",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,backgroundColorSeed:"4",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,backgroundColorSeed:"5",children:h})})]})]})})};export var Tables=storyConfig(table,{allGlobals:!0});

package/build/es/no-polyfill/avatar/colors/avatarColorTestCases.json

@@ -0,0 +1,402 @@
+[
+  {
+    "key": "053ac3c5-278a-449d-7c3e-42f20e8dd15d",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "06aa058e-7ea7-4c6a-3318-da6b8fac6459",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "0e9126e0-55f1-46b3-45a2-ecdb2ac58fae",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "0e91272d-dfdf-44b9-885f-0e8f790f62b8",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "0ea282b8-6240-4b8c-bbd8-8eea0d399408",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "055330d2-231c-41f0-81d1-b609a6641d5c",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "05ecbcc5-a7c8-43ce-7c13-87cee7104f7c",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "05efbda4-5864-4764-b8d0-ca72746b6131",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "05f17ce4-6c4f-4bc8-a46b-0dc9199b7ff7",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "05f24097-b778-4e5d-c64f-219cbb8f3647",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "05f4ab72-5f4b-40c1-77d5-c484ef507a3c",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "05f4bb8d-958f-4b4c-8e48-3c2416b2e3bf",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "05fa0101-6bed-4a05-b739-73481a260945",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "05fa9193-2130-4e71-3e09-d99358cafb4c",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "05faf014-f776-4ecc-df7a-c5fc834e4c4c",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "05fc0932-eadd-43d6-256a-dcc0cde1370e",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "06001a5b-197b-4ea1-72f9-e3d5305034d9",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "06007098-aea2-4347-fe9f-3c44b69b1ce9",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "0600725e-5f79-4f68-34ba-a5da5f15f92f",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "066bfd1f-beb2-48dd-1611-0558276a2f2e",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "066c6429-ad06-41eb-eba1-f79dc3912aeb",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "06e8866a-a6e0-4241-268c-de9189182fab",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "08119c02-d271-430e-53c1-ef1330889f9e",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "0e84b8ae-7a05-4ff4-319e-8ae5e035190e",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "0565f2aa-64f1-4ed6-8a93-a42654b9af9b",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "0e913a98-5607-4f97-a0e9-fe7a9baa5a4e",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "056ee99f-b0c0-4a21-7ab8-bae0822d431e",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "060068ab-020a-4709-cee7-64594e871314",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "07384a3a-9266-4742-1f26-95dbe371a6a1",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "09103922-9228-4a65-230c-54952e0c070e",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "0a2ada5d-4e7a-465e-7687-11c1cab00694",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "0dc651ab-ce36-48fb-a10f-e55d0afc2221",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "0e198e72-f693-4fe1-92cc-5fcb89bf43e1",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "0e8127c8-aeac-458c-e720-ad8fbeaceb0e",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "0e96d306-87a2-49ab-6dbf-30485be8709d",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "0e997c88-bd69-40b2-e0d4-2e03b2c1f520",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "0f3f2e8f-5978-4616-f053-13315c0ce0f5",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "106bd544-81be-4543-3519-e95cf1f89c08",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "1110f155-5649-4a83-d108-96b5f4546b95",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "115c30d9-0764-4c9f-544b-2f84ef33cd23",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "119854ba-7f68-46d6-ff6d-ceaae017363e",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "143f754f-f160-4176-96a4-84e3d1203594",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "18599338-3386-4d88-ef25-7033bbeacf14",
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": "1aedaeef-6b83-4a2f-6100-7edd1ab04c6f",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "05760298-a074-4eca-3584-a1f38811e6a5",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "0695c47c-d09b-4114-3af2-ce4521323ba7",
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": "0e905f00-926e-4086-5d56-4a4c294e1db8",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "058ccaad-dcda-43ff-b3ce-4bce692245ba",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": "05c56667-0254-4785-b3d0-86a97450184b",
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": "05dcdb91-44a0-4a78-152c-00eb6053fa11",
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 29265328,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 22829930,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 29309733,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 22205092,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 28339104,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 28689366,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 23904571,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 29365025,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 28720303,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 27655166,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 28720861,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 25210117,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 28948963,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 13046135,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 29143686,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 29286514,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 27922269,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 10086066,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 12196457,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 28726465,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 24544220,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 26082288,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 28290408,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 24164757,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 27118103,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 26928719,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 15192981,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 19605650,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 23089646,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 13141760,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 24893876,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 13455263,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 28782969,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 23199819,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 13445369,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 107406,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 16033881,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 11131360,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 17011507,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 11308669,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 12727894,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 9717418,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 6026704,
+    "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
+  },
+  {
+    "key": 14866996,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  },
+  {
+    "key": 14945713,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 3049217,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 16000036,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 15951735,
+    "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
+  },
+  {
+    "key": 13624716,
+    "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
+  },
+  {
+    "key": 11288359,
+    "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
+  }
+]

package/build/es/no-polyfill/avatar/colors/colors.js

@@ -0,0 +1,10 @@
+/*
+ * The colors we support generating an Avatar background color from a "seed" for.
+ * Changing this array will change the assignment between seeds.
+ * Do not change this array.
+ */var avatarColors=["--color-bright-blue","--color-bright-yellow","--color-bright-pink","--color-bright-orange"],hashSeed=function(a){for(var b=avatarColors.length,c=0,d=1,e=0;e<a.length;e++)c=(c+a.charCodeAt(e)*d)%b,d=d*31%b;return c};/*
+ * Takes in a "seed" string and spits out an index for the color we should use.
+ * This implementation has been synced across all three clients so that we consistently
+ * generate branded avatar colors when rendering a list of Avatars.
+ * Do not change this implementation.
+ */export var getAvatarColorFromSeed=function(a){return avatarColors[hashSeed(a)]};

package/build/es/no-polyfill/avatar/colors/index.js

@@ -0,0 +1 @@
+export*from"./colors";

package/build/es/no-polyfill/avatarWrapper/AvatarWrapper.js

@@ -1 +1 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["url","altText","statusIcon","children"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{Person as ProfileIcon,Briefcase as BriefcaseIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{useState,useEffect}from"react";import Avatar,{AvatarType}from"../avatar";import Badge from"../badge";import{ProfileType,Size,Sentiment}from"../common";import StatusIcon from"../statusIcon/StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var OptionalBadge=function(a){var b=a.url,c=a.altText,d=a.statusIcon,e=a.children,f=_objectWithoutProperties(a,_excluded);return b?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx("img",{src:b,alt:c})},f),{},{children:e})):d?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx(StatusIcon,{sentiment:d,size:Size.SMALL})},f),{},{children:e})):e};OptionalBadge.propTypes={url:PropTypes.string,altText:PropTypes.string,statusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),children:PropTypes.node.isRequired},OptionalBadge.defaultProps={url:void 0,altText:void 0,statusIcon:void 0};var AvatarWrapper=function(a){var b=a.url,c=a.profileType,d=a.badgeUrl,e=a.badgeAltText,f=a.badgeStatusIcon,g=a.name,h=a.avatarProps,i=a.badgeProps,j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=c===ProfileType.BUSINESS;useEffect(function(){return m(!1)},[b]);return/*#__PURE__*/_jsx(OptionalBadge,_objectSpread(_objectSpread({url:d,altText:e,statusIcon:f},i),{},{children:/*#__PURE__*/_jsx(Avatar,_objectSpread({size:Size.MEDIUM},function getAvatarProps(){return b&&!l?_objectSpread({type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:b,alt:"avatar",onError:function onError(){return m(!0)}})},h):c?_objectSpread({type:AvatarType.ICON,children:n?/*#__PURE__*/_jsx(BriefcaseIcon,{size:"24"}):/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h):g?_objectSpread({type:AvatarType.INITIALS,children:/*#__PURE__*/_jsx(_Fragment,{children:getInitials(g)})},h):_objectSpread({type:AvatarType.ICON,children:/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h)}()))}))};function getInitials(a){var b=a.split(" ").map(function(a){return a[0]}).join("").toUpperCase();return 1===b.length?b[0]:b[0]+b.slice(-1)}AvatarWrapper.defaultProps={url:void 0,profileType:void 0,badgeUrl:void 0,badgeAltText:void 0,badgeStatusIcon:void 0,name:void 0,avatarProps:{},badgeProps:{}},AvatarWrapper.propTypes={url:PropTypes.string,profileType:PropTypes.oneOf([ProfileType.PERSONAL,ProfileType.BUSINESS]),badgeUrl:PropTypes.string,badgeAltText:PropTypes.string,badgeStatusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),name:PropTypes.string,avatarProps:PropTypes.shape({}),badgeProps:PropTypes.shape({})};export default AvatarWrapper;
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["url","altText","statusIcon","children"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{Person as ProfileIcon,Briefcase as BriefcaseIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{useState,useEffect}from"react";import Avatar,{AvatarType}from"../avatar";import Badge from"../badge";import{ProfileType,Size,Sentiment}from"../common";import StatusIcon from"../statusIcon/StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var OptionalBadge=function(a){var b=a.url,c=a.altText,d=a.statusIcon,e=a.children,f=_objectWithoutProperties(a,_excluded);return b?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx("img",{src:b,alt:c})},f),{},{children:e})):d?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx(StatusIcon,{sentiment:d,size:Size.SMALL})},f),{},{children:e})):e};OptionalBadge.propTypes={url:PropTypes.string,altText:PropTypes.string,statusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),children:PropTypes.node.isRequired},OptionalBadge.defaultProps={url:void 0,altText:void 0,statusIcon:void 0};var AvatarWrapper=function(a){var b=a.url,c=a.profileType,d=a.profileId,e=a.badgeUrl,f=a.badgeAltText,g=a.badgeStatusIcon,h=a.name,i=a.avatarProps,j=a.badgeProps,k=useState(!1),l=_slicedToArray(k,2),m=l[0],n=l[1],o=c===ProfileType.BUSINESS;useEffect(function(){return n(!1)},[b]);return/*#__PURE__*/_jsx(OptionalBadge,_objectSpread(_objectSpread({url:e,altText:f,statusIcon:g},j),{},{children:/*#__PURE__*/_jsx(Avatar,_objectSpread({size:Size.MEDIUM},function getAvatarProps(){return b&&!m?_objectSpread({type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:b,alt:"avatar",onError:function onError(){return n(!0)}})},i):c?_objectSpread({type:AvatarType.ICON,children:o?/*#__PURE__*/_jsx(BriefcaseIcon,{size:"24"}):/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},i):h?_objectSpread({type:AvatarType.INITIALS,children:/*#__PURE__*/_jsx(_Fragment,{children:getInitials(h)}),backgroundColorSeed:null===d||void 0===d?void 0:d.toString()},i):_objectSpread({type:AvatarType.ICON,children:/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},i)}()))}))};function getInitials(a){var b=a.split(" ").map(function(a){return a[0]}).join("").toUpperCase();return 1===b.length?b[0]:b[0]+b.slice(-1)}AvatarWrapper.defaultProps={url:void 0,profileType:void 0,profileId:void 0,badgeUrl:void 0,badgeAltText:void 0,badgeStatusIcon:void 0,name:void 0,avatarProps:{},badgeProps:{}},AvatarWrapper.propTypes={url:PropTypes.string,profileType:PropTypes.oneOf([ProfileType.PERSONAL,ProfileType.BUSINESS]),profileId:PropTypes.number,badgeUrl:PropTypes.string,badgeAltText:PropTypes.string,badgeStatusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),name:PropTypes.string,avatarProps:PropTypes.shape({}),badgeProps:PropTypes.shape({})};export default AvatarWrapper;

package/build/es/no-polyfill/index.js

@@ -2,7 +2,7 @@
  * Types
  */ /**
  * Components
- */export{default as Title}from"./title";export{default as Body}from"./body";export{default as Accordion}from"./accordion";export{default as ActionButton}from"./actionButton";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Display}from"./display";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{Input}from"./inputs/Input";export{TextArea}from"./inputs/TextArea";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as Option}from"./common/Option";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as ProgressBar}from"./progressBar";export{default as Progress}from"./progress";export{default as Provider,DirectionProvider,LanguageProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as StatusIcon}from"./statusIcon/StatusIcon";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";export{default as CriticalCommsBanner}from"./criticalBanner";/**
+ */export{default as Title}from"./title";export{default as Body}from"./body";export{default as Accordion}from"./accordion";export{default as ActionButton}from"./actionButton";export{default as ActionOption}from"./actionOption";export{default as Alert}from"./alert";export{default as Avatar}from"./avatar";export{default as AvatarWrapper}from"./avatarWrapper";export{default as Badge}from"./badge";export{default as BottomSheet}from"./common/bottomSheet";export{default as Button}from"./button";export{default as Card}from"./card";export{default as Checkbox}from"./checkbox";export{default as CheckboxButton}from"./checkboxButton";export{default as CheckboxOption}from"./checkboxOption";export{default as Chevron}from"./chevron";export{default as Chips,Chip}from"./chips";export{default as CircularButton}from"./circularButton";export{default as DateInput}from"./dateInput";export{default as DateLookup}from"./dateLookup";export{default as Decision}from"./decision";export{default as DefinitionList}from"./definitionList";export{default as Dimmer}from"./dimmer";export{default as Display}from"./display";export{default as Drawer}from"./drawer";export{default as DropFade}from"./dropFade";export{default as DynamicFieldDefinitionList}from"./dynamicFieldDefinitionList";export{default as Emphasis}from"./emphasis";export{default as FlowNavigation}from"./flowNavigation";export{default as Header}from"./header";export{default as Image}from"./image";export{default as Info}from"./info";export{default as InlineAlert}from"./inlineAlert";export{Input}from"./inputs/Input";export{TextArea}from"./inputs/TextArea";export{default as InputWithDisplayFormat}from"./inputWithDisplayFormat";export{default as InstructionsList}from"./instructionsList";export{default as Link}from"./link";export{default as Loader}from"./loader";export{default as Logo}from"./logo";export{default as Markdown}from"./markdown";export{default as Modal}from"./modal";export{default as Money}from"./money";export{default as MoneyInput}from"./moneyInput";export{default as NavigationOption}from"./navigationOption";export{default as NavigationOptionsList}from"./navigationOptionsList";export{default as Nudge}from"./nudge";export{default as Option}from"./common/Option";export{default as OverlayHeader}from"./overlayHeader";export{default as PhoneNumberInput}from"./phoneNumberInput";export{default as Popover}from"./popover";export{default as ProcessIndicator}from"./processIndicator";export{default as ProgressBar}from"./progressBar";export{default as Progress}from"./progress";export{default as Provider,DirectionProvider,LanguageProvider}from"./provider";export{default as Radio}from"./radio";export{default as RadioGroup}from"./radioGroup";export{default as RadioOption}from"./radioOption";export{default as Section}from"./section";export{default as Select}from"./select";export{default as SlidingPanel}from"./slidingPanel";export{default as SnackbarPortal}from"./snackbar/Snackbar";export{default as SnackbarProvider}from"./snackbar/SnackbarProvider";export{default as StatusIcon}from"./statusIcon/StatusIcon";export{default as Stepper}from"./stepper";export{default as Sticky}from"./sticky";export{default as Summary}from"./summary";export{default as Switch}from"./switch";export{default as SwitchOption}from"./switchOption";export{default as Tabs}from"./tabs";export{default as TextareaWithDisplayFormat}from"./textareaWithDisplayFormat";export{default as Tooltip}from"./tooltip";export{default as Typeahead}from"./typeahead";export{default as Upload}from"./upload";export{default as UploadInput}from"./uploadInput";export{SnackbarConsumer,SnackbarContext}from"./snackbar/SnackbarContext";export{default as CriticalCommsBanner}from"./criticalBanner";export{default as ListItem}from"./listItem";/**
  * Hooks
  */export{default as useSnackbar}from"./snackbar/useSnackbar";export{useDirection,useLayout}from"./common/hooks";/**
  * Enums

package/build/es/no-polyfill/listItem/ListItem.js

@@ -0,0 +1 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","action","className","title","value","isContainerAligned","as"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import classNames from"classnames";import Body from"../body/Body";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ListItem=function(a){var b=a.media,c=a.action,d=a.className,e=a.title,f=a.value,g=a.isContainerAligned,h=a.as,i=void 0===h?"li":h,j=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs(i,_objectSpread(_objectSpread({className:classNames("np-list-item d-flex align-items-center p-y-2",d,{"p-x-2":!g})},j),{},{children:[b?b:null,/*#__PURE__*/_jsxs("div",{className:classNames("d-flex flex-column",{"p-l-2":!!b,"p-r-2":!!c}),children:[/*#__PURE__*/_jsx(Body,{type:"body-default",className:"text-secondary m-b-0",children:e}),f&&/*#__PURE__*/_jsx(Body,{type:"body-large",className:"text-primary m-b-0",children:f})]}),c?/*#__PURE__*/_jsx("div",{className:"np-list-item__action m-l-auto",children:c}):null]}))};export default ListItem;

package/build/es/no-polyfill/listItem/ListItem.spec.js

@@ -0,0 +1 @@
+import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _regeneratorRuntime from"@babel/runtime/regenerator";import"@testing-library/jest-dom";import ActionButton from"../actionButton/ActionButton";import{render,screen,within}from"../test-utils";import ListItem from".";import{jsx as _jsx}from"react/jsx-runtime";describe("ListItem",function(){it("shows the title and description",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",value:"Some description",as:"li"})),b.next=3,a();case 3:c=b.sent,expect(c).toHaveClass("np-list-item"),expect(within(c).getByText("Some title")).toBeInTheDocument(),expect(within(c).getByText("Some description")).toBeInTheDocument();case 7:case"end":return b.stop();}},b)}))),it("shows an action",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c,d;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Account number",value:"123",action:/*#__PURE__*/_jsx(ActionButton,{children:"Copy"})})),b.next=3,a();case 3:return c=b.sent,b.next=6,within(c).findByRole("button",{name:"Copy"});case 6:d=b.sent,expect(d).toBeInTheDocument();case 8:case"end":return b.stop();}},b)}))),it("shows media icon",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",value:"Some desctiption",media:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:"icon"})})),b.next=3,a();case 3:c=b.sent,expect(within(c).getByAltText("icon")).toBeInTheDocument();case 5:case"end":return b.stop();}},b)})));var a=/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return a.abrupt("return",screen.findByRole("listitem"));case 1:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()});

package/build/es/no-polyfill/listItem/ListItem.story.js

@@ -0,0 +1 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","value"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}/* eslint-disable react/jsx-child-element-spacing */import{action}from"@storybook/addon-actions";import{Documents}from"@transferwise/icons";import ActionButton from"../actionButton/ActionButton";import Avatar from"../avatar";import Badge from"../badge";import Info from"../info";import Title from"../title/Title";import ListItem from".";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ListItem,title:"Other/ListItem",tags:["autodocs"]};var Template=function(a){var b=a.title,c=void 0===b?"Wise":b,d=a.value,e=void 0===d?"We\u2019re building the world\u2019s most international account":d,f=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx(ListItem,_objectSpread({title:c,value:e},f))};export var Basic=function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(ListItem,{title:"Wise",value:"We\u2019re building the world's most international account"})})};export var Variants=function(){return/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Icon Avatar"}),/*#__PURE__*/_jsx(Template,{media:/*#__PURE__*/_jsx(Avatar,{children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Contact Avatar"}),/*#__PURE__*/_jsx(Template,{title:"Sandra Pepper",value:"Personal account",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Avatar and Action"}),/*#__PURE__*/_jsx(Template,{title:"Account holder",value:"Sandra Pepper",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})}),action:/*#__PURE__*/_jsx(ActionButton,{children:"Share details"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text Only List"}),/*#__PURE__*/_jsxs("ul",{style:{paddingLeft:0},children:[/*#__PURE__*/_jsx(Template,{title:"Sort code",value:"23-14-71"}),/*#__PURE__*/_jsx(Template,{title:"Account number",value:"12345678"})]})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Action Button"}),/*#__PURE__*/_jsx(Template,{title:"SWIFT/BIC",value:"\u2022\u2022\u2022 \u2022\u2022\u2022",action:/*#__PURE__*/_jsx(ActionButton,{onClick:function onClick(){return action("clicked")},children:"Reveal"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Other Action"}),/*#__PURE__*/_jsx(Template,{title:"Account number",value:"123456789",action:/*#__PURE__*/_jsx("button",{type:"button",style:{background:"none",border:0},onClick:function onClick(){return action("clicked")},children:/*#__PURE__*/_jsx(Documents,{size:"24"})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Info Action"}),/*#__PURE__*/_jsx(Template,{title:"Routing number",value:"987654",action:/*#__PURE__*/_jsx(Info,{size:"lg","aria-label":"More information",content:"Use this routing number to receive ACH and Wire transfers."})})]})]})};

package/build/es/no-polyfill/listItem/index.js

@@ -0,0 +1 @@
+export{default}from"./ListItem";

package/build/es/polyfill/avatar/Avatar.js

@@ -1 +1 @@
-import classnames from"classnames";import PropTypes from"prop-types";import{Size,Theme}from"../common";import{AvatarType}from"./avatarTypes";import{jsx as _jsx}from"react/jsx-runtime";var Avatar=function(a){var b=a.backgroundColor,c=a.children,d=a.className,e=a.outlined,f=a.size,g=a.theme,h=a.type;return/*#__PURE__*/_jsx("div",{className:classnames("tw-avatar",d,"tw-avatar--".concat(f),"tw-avatar--".concat(h),"tw-avatar--".concat(g),{"tw-avatar--outlined":e,"np-text-title-body":h===AvatarType.INITIALS}),children:/*#__PURE__*/_jsx("div",{className:"tw-avatar__content",style:{backgroundColor:b||void 0},children:c})})};Avatar.propTypes={backgroundColor:PropTypes.string,children:PropTypes.node,className:PropTypes.string,outlined:PropTypes.bool,size:PropTypes.oneOf(["sm","md","lg",40,56]),theme:PropTypes.oneOf(["light","dark"]),type:PropTypes.oneOf(["thumbnail","icon","emoji","initials"])},Avatar.defaultProps={backgroundColor:null,children:null,className:null,outlined:!1,size:Size.MEDIUM,theme:Theme.LIGHT,type:AvatarType.THUMBNAIL};export default Avatar;
+import classnames from"classnames";import{useMemo}from"react";import{Theme}from"../common";import{getAvatarColorFromSeed}from"./colors";import{jsx as _jsx}from"react/jsx-runtime";var backwardsCompatibleSize=function(a){return"sm"===a?24:"md"===a?48:"lg"===a?72:a},Avatar=function(a){var b=a.backgroundColor,c=void 0===b?null:b,d=a.backgroundColorSeed,e=void 0===d?null:d,f=a.children,g=void 0===f?null:f,h=a.className,i=void 0===h?null:h,j=a.outlined,k=a.size,l=void 0===k?48:k,m=a.theme,n=void 0===m?Theme.LIGHT:m,o=a.type,p=void 0===o?"thumbnail":o,q=useMemo(function(){return!c&&e?"var(".concat(getAvatarColorFromSeed(e),")"):void 0},[c,e]),r=backwardsCompatibleSize(l);return/*#__PURE__*/_jsx("div",{className:classnames("tw-avatar",i,"tw-avatar--".concat(r),"tw-avatar--".concat(p),{"tw-avatar--outlined":void 0!==j&&j,"tw-avatar--branded":!!q,"np-text-title-body":"initials"===p}),children:/*#__PURE__*/_jsx("div",{className:"tw-avatar__content",style:{backgroundColor:c||q},children:g})})};export default Avatar;

package/build/es/polyfill/avatar/Avatar.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{Size,Theme}from"../common";import Avatar,{AvatarType}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Avatar,title:"Content/Avatar",tags:["autodocs"]};export var Emoji={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:"\u2708\uFE0F"}))},args:{type:AvatarType.EMOJI,size:Size.MEDIUM,theme:Theme.LIGHT}};export var Flag={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/flags/square/gbp.svg",alt:""})}))},args:{type:AvatarType.THUMBNAIL,size:Size.MEDIUM,outlined:!0}};export var Table={render:function render(a){var b=a.theme,c="https://wise.com/public-resources/assets/flags/square/gbp.svg";return/*#__PURE__*/_jsx("div",{style:{padding:"50px",backgroundColor:b===Theme.DARK?"#37517e":"white"},children:/*#__PURE__*/_jsxs("table",{style:{background:"transparent"},children:[/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:44,height:44},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:36,height:36},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:26,height:26},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:16,height:16},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:44,height:44},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:36,height:36},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:26,height:26},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:16,height:16},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})})]})]})})}};
+import{text,select}from"@storybook/addon-knobs";import*as wiseIcons from"@transferwise/icons";import{Size}from"../common";import{storyConfig}from"../test-utils";import Avatar,{AvatarType}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Avatar,title:"Content/Avatar",tags:["autodocs"]};var table=function(){var a=select("Flag",["jpy","gbp","eur"],"jpy"),b="https://wise.com/web-art/assets/flags/".concat(a,".svg"),c=text("Image URL","https://wise.com/web-art/assets/flags/gbp.svg"),d=text("Emoji","\u2708\uFE0F"),e=text("Icon name","Check"),f=wiseIcons[e],g=text("Background color","#D6F5E3"),h=text("Initials","GN");return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs("table",{children:["Outlined",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})})]}),"Image URL",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),"Emoji",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,children:d})})]}),/*#__PURE__*/_jsx("div",{style:{paddingBottom:"20px"},children:/*#__PURE__*/_jsx("span",{style:{position:"absolute"},children:"Custom background and icon"})}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:16})})})]}),"Initials",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,children:h})})]}),"Branded",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,backgroundColorSeed:"1",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,backgroundColorSeed:"2",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,backgroundColorSeed:"3",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,backgroundColorSeed:"4",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,backgroundColorSeed:"5",children:h})})]})]})})};export var Tables=storyConfig(table,{allGlobals:!0});