@transferwise/components 0.0.0-experimental-8b6ee2a → 0.0.0-experimental-335b83d

package/src/main.less

@@ -30,8 +30,12 @@
 @import "./header/Header.less";
 @import "./image/Image.less";
 @import "./info/Info.less";
+@import "./inputs/_BottomSheet.less";
+@import "./inputs/_ButtonInput.less";
+@import "./inputs/_Popover.less";
 @import "./inputs/Input.less";
 @import "./inputs/InputGroup.less";
+@import "./inputs/SelectInput.less";
 @import "./inputs/TextArea.less";
 @import "./instructionsList/InstructionsList.less";
 @import "./link/Link.less";

package/src/navigationOption/NavigationOption.story.js

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

package/src/radio/Radio.story.js

@@ -1,6 +1,5 @@
 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';
@@ -34,7 +33,7 @@ export const Basic = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.THUMBNAIL}>
-                <Flag code="IMP" />
+                <img src="https://wise.com/web-art/assets/flags/imp.svg" alt="" />
               </Avatar>
             ) : null
           }
@@ -52,7 +51,7 @@ export const Basic = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.THUMBNAIL}>
-                <Flag code="KES" />
+                <img src="https://wise.com/web-art/assets/flags/kes.svg" alt="" />
               </Avatar>
             ) : null
           }

package/src/radioGroup/RadioGroup.story.js

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

package/src/select/searchBox/__snapshots__/SearchBox.spec.js.snap

@@ -34,7 +34,7 @@ exports[`SearchBox renders 1`] = `
           </span>
         </span>
         <input
-          class="np-select-filter form-control np-form-control np-form-control--size-auto np-text-body-large np-form-control--shape-rectangle"
+          class="np-select-filter form-control np-form-control np-form-control--size-auto np-text-body-large np-input np-input--shape-rectangle"
           placeholder="placeholder"
           spellcheck="false"
           value="value"

package/src/ssr.spec.js

@@ -48,6 +48,10 @@ const excluded = new Set([
   'Typography',
 
   // types
+  'SearchInputProps',
+  'SelectInputItem',
+  'SelectInputOptionContentProps',
+  'SelectInputProps',
   'UploadedFile',
   'UploadError',
   'UploadResponse',
@@ -179,6 +183,9 @@ describe('Server side rendering', () => {
       Input: {
         children: undefined,
       },
+      SearchInput: {
+        children: undefined,
+      },
       TextArea: {
         children: undefined,
       },

package/src/utilities/wrapInFragment.tsx

@@ -0,0 +1,3 @@
+export function wrapInFragment(value: unknown) {
+  return <>{value}</>;
+}