@transferwise/components 45.14.2 → 45.15.1

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/phoneNumberInput/PhoneNumberInput.js

@@ -157,6 +157,7 @@ const PhoneNumberInput = (props) => {
         <div className={`input-group input-group-${size}`}>
           <input
             id={id}
+            autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
             value={internalValue.suffix}

package/src/promoCard/PromoCard.css

@@ -1 +1 @@
-.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon{align-items:center;background:var(--Card-indicator-icon-background-color);border-radius:50%;border-radius:var(--radius-full);color:var(--Card-indicator-icon-color);display:inline-block;display:flex;height:56px;height:var(--size-56);justify-content:center;width:56px;width:var(--size-56)}[dir=rtl] .np-Card-indicatorIcon{transform:scaleX(-1)}.np-Card--checked,.np-Card--link{box-shadow:none;color:currentColor;cursor:pointer;transform:scale(1);transition:box-shadow .2s ease-in-out,transform .5s ease-in-out}.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--checked,.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--link{--Card-box-shadow:0px 20px var(--size-40) 0px var(--color-background-neutral);--Card-check-color:var(--color-interactive-accent)}.np-Card--checked.is-disabled,.np-Card--link.is-disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.np-Card--checked,.np-Card--link{transition:none}}.np-Card--checked:hover:not(.is-disabled,:disabled,.is-checked,:focus-within),.np-Card--link:hover:not(.is-disabled,:disabled,.is-checked,:focus-within){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow)}.np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral-active);--Card-image-scale:1.1;--Card-image-translate:var(--size-8);box-shadow:var(--Card-box-shadow);transform:scale(98%)}.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral)}.np-Card--checked:focus-visible:not(.is-disabled,:disabled),.np-Card--checked:has(:focus-visible):not(.np-Card--checked),.np-Card--link:focus-visible:not(.is-disabled,:disabled),.np-Card--link:has(:focus-visible):not(.np-Card--checked){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow);outline:var(--ring-outline-color) solid 4px;outline:var(--ring-outline-color) solid var(--size-4);outline-offset:4px;outline-offset:var(--size-4)}.np-Card--link .np-Card-titleLink{color:#37517e;color:var(--color-content-primary);text-decoration:none}.np-Card--link .np-Card-titleLink:focus-visible{outline:none}.np-Card--link .np-Card-titleLink:after{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.np-Card--checked.is-checked{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.np-Card--checked.is-checked .np-Card-check{align-items:center;background:var(--Card-check-background-color);border-radius:50%;border-radius:var(--radius-full);color:var(--Card-check-color);display:flex;height:40px;height:var(--size-40);justify-content:center;position:absolute;right:8px;right:var(--size-8);top:8px;top:var(--size-8);width:40px;width:var(--size-40)}[dir=rtl] .np-Card--checked.is-checked .np-Card-check{left:8px;left:var(--size-8);right:auto}.np-Card--checked.is-checked:focus-visible:not(.is-disabled,:disabled){box-shadow:none}.np-CardGroup{display:flex;flex-direction:column;gap:24px;gap:var(--size-24);width:100%}@media (min-width:768px){.np-CardGroup{flex-direction:row}}.np-CardGroup .np-Card.np-Card--promoCard{max-width:100%}
+.np-Card{--Card-image-scale:1;--Card-image-translate:0;--Card-indicator-text-background-color:var(--color-background-neutral);--Card-indicator-icon-background-color:var(--color-interactive-accent);--Card-indicator-icon-color:var(--color-interactive-control);--Card-check-background-color:var(--color-interactive-primary);--Card-check-color:var(--color-interactive-control)}.np-Card--promoCard{--Card-max-width:358px}.np-Card--promoCard.is-disabled{filter:grayscale(1);opacity:.45}.np-Card-image{height:auto;left:-24px;left:calc(var(--size-24)*-1);margin:0 auto;position:relative;transform:scale(var(--Card-image-scale)) translateY(var(--Card-image-translate));transition:transform .5s ease-in-out;width:100%;width:calc(100% + 48px);width:calc(100% + var(--size-48))}[dir=rtl] .np-Card-image{left:auto;right:-24px;right:calc(var(--size-24)*-1)}.np-Card-indicator{bottom:8px;bottom:var(--size-8);display:flex;gap:4px;gap:var(--size-4);position:absolute;right:8px;right:var(--size-8)}[dir=rtl] .np-Card-indicator{left:8px;left:var(--size-8);right:auto}.np-Card-indicatorText{background:var(--Card-indicator-text-background-color);border-radius:100px;display:inline-block;padding:16px;padding:var(--size-16);text-align:left;vertical-align:middle}.np-Card-indicatorIcon{align-items:center;background:var(--Card-indicator-icon-background-color);border-radius:9999px;border-radius:var(--radius-full);color:var(--Card-indicator-icon-color);display:inline-block;display:flex;height:56px;height:var(--size-56);justify-content:center;width:56px;width:var(--size-56)}[dir=rtl] .np-Card-indicatorIcon{transform:scaleX(-1)}.np-Card--checked,.np-Card--link{box-shadow:none;color:currentColor;cursor:pointer;transform:scale(1);transition:box-shadow .2s ease-in-out,transform .5s ease-in-out}.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--checked,.np-theme-personal:not(.np-theme-personal--dark,.np-theme-personal--bright-green,.np-theme-personal--forest-green) .np-Card--link{--Card-box-shadow:0px 20px var(--size-40) 0px var(--color-background-neutral);--Card-check-color:var(--color-interactive-accent)}.np-Card--checked.is-disabled,.np-Card--link.is-disabled{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.np-Card--checked,.np-Card--link{transition:none}}.np-Card--checked:hover:not(.is-disabled,:disabled,.is-checked,:focus-within),.np-Card--link:hover:not(.is-disabled,:disabled,.is-checked,:focus-within){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow)}.np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral-active);--Card-image-scale:1.1;--Card-image-translate:var(--size-8);box-shadow:var(--Card-box-shadow);transform:scale(98%)}.np-theme-personal--bright-green .np-Card--checked:active:not(.is-disabled,:disabled,.is-checked),.np-theme-personal--bright-green .np-Card--link:active:not(.is-disabled,:disabled,.is-checked){--Card-background-color:var(--color-background-neutral)}.np-Card--checked:focus-visible:not(.is-disabled,:disabled),.np-Card--checked:has(:focus-visible):not(.np-Card--checked),.np-Card--link:focus-visible:not(.is-disabled,:disabled),.np-Card--link:has(:focus-visible):not(.np-Card--checked){--Card-image-scale:1.1;box-shadow:var(--Card-box-shadow);outline:var(--ring-outline-color) solid 4px;outline:var(--ring-outline-color) solid var(--size-4);outline-offset:4px;outline-offset:var(--size-4)}.np-Card--link .np-Card-titleLink{color:#37517e;color:var(--color-content-primary);text-decoration:none}.np-Card--link .np-Card-titleLink:focus-visible{outline:none}.np-Card--link .np-Card-titleLink:after{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}.np-Card--checked.is-checked{box-shadow:0 0 0 4px var(--color-interactive-primary);box-shadow:0 0 0 var(--size-4) var(--color-interactive-primary)}.np-Card--checked.is-checked .np-Card-check{align-items:center;background:var(--Card-check-background-color);border-radius:9999px;border-radius:var(--radius-full);color:var(--Card-check-color);display:flex;height:40px;height:var(--size-40);justify-content:center;position:absolute;right:8px;right:var(--size-8);top:8px;top:var(--size-8);width:40px;width:var(--size-40)}[dir=rtl] .np-Card--checked.is-checked .np-Card-check{left:8px;left:var(--size-8);right:auto}.np-Card--checked.is-checked:focus-visible:not(.is-disabled,:disabled){box-shadow:none}.np-CardGroup{display:flex;flex-direction:column;gap:24px;gap:var(--size-24);width:100%}@media (min-width:768px){.np-CardGroup{flex-direction:row}}.np-CardGroup .np-Card.np-Card--promoCard{max-width:100%}

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/snackbar/Snackbar.js

@@ -91,7 +91,12 @@ export class Snackbar extends Component {
           }}
           unmountOnExit
         >
-          <Body ref={this.bodyRef} as="span" className={`snackbar__text snackbar__text--${theme}`}>
+          <Body
+            ref={this.bodyRef}
+            as="span"
+            className={`snackbar__text snackbar__text--${theme}`}
+            aria-live="polite"
+          >
             {text}
             {action ? (
               <ActionButton className="snackbar__text__action" onClick={action.onClick}>

package/src/snackbar/Snackbar.spec.js

@@ -71,8 +71,6 @@ describe('Snackbar', () => {
     const snackbarWithNode = () => componentWithNode.find(Snackbar);
     componentWithNode.find('.button-trigger').simulate('click');
     expect(snackbarWithNode().text()).toContain('test');
-
-    expect(snackbarWithNode().html()).toMatchSnapshot();
   });
 
   it('displays a single snack for the given duration with the given text', async () => {
@@ -107,6 +105,6 @@ describe('Snackbar', () => {
     );
     const snackbarWithNode = () => componentWithNode.find(Snackbar);
     componentWithNode.find('.button-trigger').simulate('click');
-    expect(snackbarWithNode().html()).toMatchSnapshot();
+    expect(snackbarWithNode().prop('theme')).toBe('dark');
   });
 });

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/stepper/Stepper.css

@@ -1 +1 @@
-.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default;font-weight:600}.np-theme-personal .tw-stepper__step--active~li:not(.tw-stepper__step--has-tooltip:hover) .tw-stepper__step-label:not(:active,:focus){opacity:.45}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip:hover{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);font-weight:600;font-weight:var(--font-weight-semi-bold);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}
+.tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}

package/src/stepper/Stepper.less

@@ -19,13 +19,6 @@
       .tw-stepper__step-label {
         cursor: default;
         color: var(--color-content-primary);
-        font-weight: 600;
-      }
-
-      .np-theme-personal & ~ li:not(.tw-stepper__step--has-tooltip:hover) {
-        .tw-stepper__step-label:not(:active,:focus) {
-          opacity: 0.45;
-        }
       }
     }
 
@@ -41,7 +34,7 @@
       }
     }
 
-    &--has-tooltip:hover {
+    &--has-tooltip {
       cursor: pointer;
     }
 
@@ -62,7 +55,6 @@
     color: var(--color-content-secondary);
     transition: color 0.6s ease-in-out;
     white-space: nowrap;
-    font-weight: var(--font-weight-semi-bold);
     .translateX(-50%);
   }
 

package/src/stepper/Stepper.spec.js

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
 
-import { Tooltip, Body } from '..';
+import { Tooltip } from '..';
 
 import Stepper from './Stepper';
 
@@ -57,7 +57,7 @@ describe('Stepper', () => {
       steps(5);
       [0, 1, 2, 3, 4].forEach((label, index) => {
         expect(
-          component.find('.tw-stepper__step').at(index).find(Body).props().children,
+          component.find('.tw-stepper__step').at(index).find('span').props().children,
         ).toStrictEqual(`${label}`);
       });
     });
@@ -173,7 +173,7 @@ describe('Stepper', () => {
       const firstStepHoverLabel = step(0).children();
       expect(firstStepHoverLabel.type()).toBe(Tooltip);
       expect(firstStepHoverLabel.children().render().text()).toStrictEqual('label');
-      expect(step(1).find(Body).props().children).toStrictEqual('label 2');
+      expect(step(1).find('span').props().children).toStrictEqual('label 2');
     });
 
     it('renders jsx', () => {
@@ -203,7 +203,7 @@ describe('Stepper', () => {
         steps: [{ hoverLabel: 'hover', label: 'label' }, { label: 'label 2' }],
       });
       const firstStepHoverLabel = step(0).children();
-      expect(firstStepHoverLabel.type()).toBe(Body);
+      expect(firstStepHoverLabel.type()).toBe('span');
       expect(firstStepHoverLabel.props().children).toStrictEqual('label');
       expect(step(1).children().props().children).toStrictEqual('label 2');
     });

package/src/stepper/Stepper.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import * as React from 'react';
 
-import Body from '../body/Body';
 import { Position } from '../common';
 import { useDirection } from '../common/hooks';
 import Tooltip from '../tooltip';
@@ -49,9 +48,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
         <small>{step.label}</small>
       </button>
     ) : (
-      <Body as="span" className="tw-stepper__step-label small">
-        {step.label}
-      </Body>
+      <span className="tw-stepper__step-label">{step.label}</span>
     );
     return (
       <li
@@ -59,7 +56,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
         className={classNames(
           'hidden-xs',
           'tw-stepper__step',
-          active && 'tw-stepper__step--active',
+          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',
           clickable && 'tw-stepper__step--clickable',
           step.hoverLabel && 'tw-stepper__step--has-tooltip',
         )}

package/src/tabs/Tabs.js

@@ -488,7 +488,8 @@ class Tabs extends Component {
                 })}
                 {translateLineX ? (
                   <li
-                    className={classNames('tabs__line')}
+                    role="none"
+                    className="tabs__line"
                     style={{
                       width: this.getTabLineWidth(),
                       transform: isRTL

package/src/tile/Tile.js

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -18,7 +17,6 @@ export const Tile = ({
   title,
 }) => {
   const isSmall = size === Size.SMALL;
-  const { isModern } = useTheme();
   const Element = href ? 'a' : 'button';
 
   return (
@@ -31,16 +29,13 @@ export const Tile = ({
         'text-xs-center',
         className,
         {
-          'p-a-3': !isSmall && isModern,
-          'p-y-5 p-x-4': !isSmall && !isModern,
-          'p-a-2': isSmall,
-          'np-tile--small': isSmall,
-          disabled,
+          'p-a-3': !isSmall,
+          'p-a-2 np-tile--small': isSmall,
         },
+        disabled && 'disabled',
       )}
       href={href}
       target={target}
-      aria-label={title}
       onClick={disabled ? null : onClick}
       onKeyDown={
         disabled
@@ -56,12 +51,11 @@ export const Tile = ({
       <Title type={Typography.TITLE_SUBSECTION} className={classNames(isSmall ? 'm-t-1' : 'm-t-2')}>
         {title}
       </Title>
-      {isModern && description && (
+      {description ? (
         <Body as="span" type={Typography.BODY_DEFAULT} className="m-t-1">
           {description}
         </Body>
-      )}
-      {!isModern && description && <div className="np-tile__description">{description}</div>}
+      ) : null}
     </Element>
   );
 };

package/src/tile/__snapshots__/Tile.spec.js.snap

@@ -3,8 +3,7 @@
 exports[`Tile matches snapshot when regular size 1`] = `
 <DocumentFragment>
   <a
-    aria-label="Receive money"
-    class="decision flex-column np-tile text-no-decoration text-xs-center p-y-5 p-x-4"
+    class="decision flex-column np-tile text-no-decoration text-xs-center p-a-3"
     href="#href"
   >
     <div
@@ -19,11 +18,11 @@ exports[`Tile matches snapshot when regular size 1`] = `
     >
       Receive money
     </h3>
-    <div
-      class="np-tile__description"
+    <span
+      class="np-text-body-default m-t-1"
     >
       Receive money from friends and family like a local
-    </div>
+    </span>
   </a>
 </DocumentFragment>
 `;
@@ -31,7 +30,6 @@ exports[`Tile matches snapshot when regular size 1`] = `
 exports[`Tile matches snapshot when small size 1`] = `
 <DocumentFragment>
   <a
-    aria-label="Receive money"
     class="decision flex-column np-tile text-no-decoration text-xs-center p-a-2 np-tile--small"
     href="#href"
   >
@@ -47,11 +45,11 @@ exports[`Tile matches snapshot when small size 1`] = `
     >
       Receive money
     </h3>
-    <div
-      class="np-tile__description"
+    <span
+      class="np-text-body-default m-t-1"
     >
       Receive money from friends and family like a local
-    </div>
+    </span>
   </a>
 </DocumentFragment>
 `;

package/src/upload/Upload.js

@@ -344,7 +344,7 @@ class Upload extends Component {
           />
         )}
         {!isProcessing && (
-          <div className="droppable-dropping-card droppable-card">
+          <div className="droppable-dropping-card droppable-card" aria-live="polite">
             <div className="droppable-card-content">
               <div className="circle circle-sm text-primary">
                 <PlusIcon size="16" />

package/src/upload/steps/completeStep/completeStep.js

@@ -26,7 +26,10 @@ const CompleteStep = (props) => {
   return (
     <div className="droppable-complete-card droppable-card" aria-hidden={!isComplete}>
       <div className="droppable-card-content">
-        <div className="droppable-card-content d-flex flex-column align-items-center">
+        <div
+          className="droppable-card-content d-flex flex-column align-items-center"
+          aria-live="polite"
+        >
           {isError ? (
             <>
               {isModern ? (

package/src/upload/steps/processingStep/processingStep.js

@@ -45,6 +45,7 @@ const ProcessingStep = (props) => {
             'm-b-2': isModern,
           })}
           type={Typography.TITLE_BODY}
+          aria-live="polite"
         >
           {psProcessingText}
         </Title>

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -134,7 +134,7 @@ const UploadItem = ({
           singleFileUpload={singleFileUpload}
           onDownload={onDownloadFile}
         >
-          <div className="np-upload-button">
+          <div className="np-upload-button" aria-live="polite">
             <div className="media">
               <div className="np-upload-icon media-left">{getIcon()}</div>
               <div className="media-body text-xs-left" data-testid={TEST_IDS.mediaBody}>

package/src/utilities/wrapInFragment.tsx

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

package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts

@@ -1,2 +0,0 @@
-export function getFocusableElements(focusBoundaryContainer: Node): object;
-//# sourceMappingURL=getFocusableElements.d.ts.map

package/build/types/common/focusBoundary/utils/getFocusableElements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getFocusableElements.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/getFocusableElements.js"],"names":[],"mappings":"AAOO,6DAJI,IAAI,GACF,MAAM,CAoBlB"}

package/build/types/common/focusBoundary/utils/index.d.ts

@@ -1,3 +0,0 @@
-export { getFocusableElements } from "./getFocusableElements";
-export { resetFocus } from "./resetFocus";
-//# sourceMappingURL=index.d.ts.map

package/build/types/common/focusBoundary/utils/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/index.js"],"names":[],"mappings":""}

package/build/types/common/focusBoundary/utils/resetFocus.d.ts

@@ -1,2 +0,0 @@
-export function resetFocus({ focusableEls: { first, last }, event }: object): void;
-//# sourceMappingURL=resetFocus.d.ts.map

package/build/types/common/focusBoundary/utils/resetFocus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"resetFocus.d.ts","sourceRoot":"","sources":["../../../../../src/common/focusBoundary/utils/resetFocus.js"],"names":[],"mappings":"AAOO,qEAJI,MAAM,QAmBhB"}

package/src/common/focusBoundary/FocusBoundary.spec.tsx

@@ -1,66 +0,0 @@
-import { render, screen, userEvent } from '../../test-utils';
-
-import FocusBoundary from './FocusBoundary';
-
-const props = {
-  onClose: jest.fn(),
-};
-
-describe('FocusBoundary', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('renders component', () => {
-    const { container } = render(
-      <FocusBoundary {...props}>
-        <a href="test">Test</a>
-      </FocusBoundary>,
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('focus on container by default', () => {
-    render(
-      <>
-        <a href="test">not focusable</a>
-        <FocusBoundary {...props}>
-          <a href="test">Test</a>
-        </FocusBoundary>
-      </>,
-    );
-
-    expect(focusBoundary()).toHaveFocus();
-  });
-
-  it('traps the focus when user presses tab', () => {
-    render(
-      <>
-        <a href="test">not focusable</a>
-        <FocusBoundary {...props}>
-          <a href="test">firstFocusable</a>
-          <a href="test">lastFocusable</a>
-        </FocusBoundary>
-      </>,
-    );
-
-    userEvent.tab();
-    expect(firstFocusableElement()).toHaveFocus();
-
-    userEvent.tab();
-    expect(lastFocusableElement()).toHaveFocus();
-
-    userEvent.tab();
-    expect(firstFocusableElement()).toHaveFocus();
-
-    userEvent.tab({ shift: true });
-    expect(lastFocusableElement()).toHaveFocus();
-
-    userEvent.tab({ shift: true });
-    expect(firstFocusableElement()).toHaveFocus();
-  });
-
-  const firstFocusableElement = () => screen.getByText('firstFocusable');
-  const lastFocusableElement = () => screen.getByText('lastFocusable');
-  const focusBoundary = () => document.querySelector('.np-focus-boundary');
-});

package/src/common/focusBoundary/__snapshots__/FocusBoundary.spec.tsx.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FocusBoundary renders component 1`] = `
-<div>
-  <div
-    class="np-focus-boundary outline-none"
-    tabindex="-1"
-  >
-    <a
-      href="test"
-    >
-      Test
-    </a>
-  </div>
-</div>
-`;

package/src/common/focusBoundary/utils/getFocusableElements.js

@@ -1,25 +0,0 @@
-/**
- * This function returns the first and the last focusable elements within a node.
- *
- * @param {Node} focusBoundaryContainer - the area that contains focused elements.
- * @returns {object} focusableEls - which contains the first focusable element and the last focusable element. First and last can be the same element if area contains one or none focusable element.
- */
-
-export const getFocusableElements = (focusBoundaryContainer) => {
-  const focusableEls = { first: focusBoundaryContainer, last: focusBoundaryContainer };
-
-  if (focusBoundaryContainer?.querySelectorAll) {
-    const allEls = [
-      ...focusBoundaryContainer.querySelectorAll(
-        'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
-      ),
-    ].filter((element) => !element.hasAttribute('disabled'));
-
-    if (allEls.length > 0) {
-      [focusableEls.first] = allEls;
-      focusableEls.last = allEls[allEls.length - 1];
-    }
-  }
-
-  return focusableEls;
-};

package/src/common/focusBoundary/utils/getFocusableElements.spec.js

@@ -1,51 +0,0 @@
-import { cleanup, render, screen } from '../../../test-utils';
-
-import { getFocusableElements } from './getFocusableElements';
-
-describe('getFocusableElements', () => {
-  afterEach(() => {
-    cleanup();
-  });
-  it('returns first and last focusable element', () => {
-    const { container } = render(
-      <>
-        <div>another element</div>
-        <a href="test">first</a>
-        <div>another element</div>
-        <a href="test">middle</a>
-        <div>another element</div>
-        <a href="test">last</a>
-        <div>another element</div>
-      </>,
-    );
-    getFocusableElements(container);
-    expect(getFocusableElements(container)).toStrictEqual({
-      first: first(),
-      last: last(),
-    });
-  });
-
-  it('returns container if there are no focusable elements', () => {
-    const { container } = render(
-      <>
-        <div>another element</div>
-      </>,
-    );
-    getFocusableElements(container);
-    expect(getFocusableElements(container)).toStrictEqual({
-      first: container,
-      last: container,
-    });
-  });
-
-  it('returns undefined if container is not provided', () => {
-    getFocusableElements();
-    expect(getFocusableElements()).toStrictEqual({
-      first: undefined,
-      last: undefined,
-    });
-  });
-
-  const first = () => screen.getByText('first');
-  const last = () => screen.getByText('last');
-});

package/src/common/focusBoundary/utils/index.js

@@ -1,2 +0,0 @@
-export { getFocusableElements } from './getFocusableElements';
-export { resetFocus } from './resetFocus';

package/src/common/focusBoundary/utils/resetFocus.js

@@ -1,23 +0,0 @@
-/**
- * This function resets the focus to either last of first focusable elements within a node.
- *
- * @param {object} focusableEls - contains the first last of first focusable elements within a node.
- * @param {object} event - the triggered event
- */
-
-export const resetFocus = ({ focusableEls: { first, last }, event }) => {
-  const { activeElement } = document;
-  if (event.shiftKey && activeElement === first) {
-    if (last) {
-      last.focus();
-    }
-    event.preventDefault();
-  }
-
-  if (!event.shiftKey && activeElement === last) {
-    if (first) {
-      first.focus();
-    }
-    event.preventDefault();
-  }
-};