@transferwise/components 45.14.1 → 45.15.0

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

package/src/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/radio/Radio.story.js

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

package/src/radioGroup/RadioGroup.story.js

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

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/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/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/utilities/wrapInFragment.tsx

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