@transferwise/components 46.98.0 → 46.98.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.98.0",
+  "version": "46.98.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -38,8 +38,8 @@
     "!**/*.tsbuildinfo"
   ],
   "devDependencies": {
-    "@babel/core": "^7.27.3",
-    "@babel/plugin-transform-runtime": "^7.27.3",
+    "@babel/core": "^7.27.4",
+    "@babel/plugin-transform-runtime": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
@@ -78,23 +78,23 @@
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
-    "@wise/art": "^2.21.1",
+    "@wise/art": "^2.21.2",
     "@wise/eslint-config": "^12.3.0",
     "babel-plugin-formatjs": "^10.5.38",
     "eslint": "^9.27.0",
-    "gulp": "^5.0.0",
+    "gulp": "^5.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lodash.times": "^4.3.2",
     "react-intl": "^7.1.11",
-    "rollup": "^4.41.1",
+    "rollup": "^4.42.0",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
-    "@transferwise/less-config": "3.1.2",
+    "@transferwise/neptune-css": "14.24.4",
     "@wise/components-theming": "1.6.3",
     "@wise/wds-configs": "0.0.0",
-    "@transferwise/neptune-css": "14.24.4"
+    "@transferwise/less-config": "3.1.2"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.22.0",
@@ -106,12 +106,12 @@
     "react-intl": "^5.10.0 || ^6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.3",
+    "@babel/runtime": "^7.27.6",
     "@floating-ui/react": "^0.27.9",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/focus": "^3.20.3",
-    "@react-aria/overlays": "^3.27.1",
+    "@react-aria/focus": "^3.20.4",
+    "@react-aria/overlays": "^3.27.2",
     "@react-spring/web": "~10.0.1",
     "@transferwise/formatting": "^2.13.1",
     "@transferwise/neptune-validation": "^3.3.0",

package/src/dateInput/DateInput.css

@@ -1,4 +1,16 @@
-.np-theme-personal .tw-date label {
+.tw-date label {
   width: 100%;
+}
+.tw-date .tw-date--year label {
+  margin-bottom: 0;
+}
+.tw-date .tw-date--year,
+.tw-date .tw-date--month,
+.tw-date .tw-date--day {
   margin-bottom: 0;
 }
+@media (min-width: 576px) {
+  .np-theme-personal .tw-date label {
+    margin-bottom: 0;
+  }
+}

package/src/dateInput/DateInput.less

@@ -1,8 +1,25 @@
-.np-theme-personal {
-  .tw-date {
+.tw-date {
+  label {
+    width: 100%;
+  }
+  .tw-date--year {
     label {
-      width: 100%;
       margin-bottom: 0;
     }
   }
+  .tw-date--year,
+  .tw-date--month,
+  .tw-date--day {
+      margin-bottom: 0;
+  }
+}
+
+@media (--screen-sm) {
+  .np-theme-personal {
+    .tw-date {
+      label {
+        margin-bottom: 0;
+      }
+    }
+  }
 }

package/src/dateInput/DateInput.tests.story.tsx

@@ -48,11 +48,22 @@ export const WithLabel: Story = {
 };
 
 export const InputError: Story = {
-  ...Basic,
   render: (args) => (
-    <Field sentiment="negative" message={lorem10}>
+    <>
+      pure date input:
       <DateInput {...args} value={new Date('2010-04-05')} />
-    </Field>
+      <div className="p-b-3">show padding right below</div>
+      date input wrapped in Field:
+      <Field>
+        <DateInput {...args} value={new Date('2010-04-05')} />
+      </Field>
+      <div className="p-b-3">show padding right below</div>
+      error date input wrapped in Field:
+      <Field sentiment="negative" message={lorem10}>
+        <DateInput {...args} value={new Date('2010-04-05')} />
+      </Field>
+      <div className="p-b-3">show padding right below</div>
+    </>
   ),
 };
 

package/src/dateInput/DateInput.tsx

@@ -242,8 +242,8 @@ const DateInput = ({
   const monthYearOnly = mode === DateMode.MONTH_YEAR;
 
   const monthWidth = clsx({
-    'col-sm-8': monthYearOnly,
-    'col-sm-5': !monthYearOnly,
+    'col-sm-8 tw-date--month': monthYearOnly,
+    'col-sm-5 tw-date--month': !monthYearOnly,
   });
 
   const getMonth = () => {
@@ -252,7 +252,7 @@ const DateInput = ({
 
   const getDay = () => {
     return (
-      <div className="col-sm-3">
+      <div className="col-sm-3 tw-date--day">
         <label>
           <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
           <div className={`input-group input-group-${size}`}>
@@ -279,7 +279,7 @@ const DateInput = ({
 
   const getYear = () => {
     return (
-      <div className="col-sm-4">
+      <div className="col-sm-4 tw-date--year">
         <label>
           <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
           <div className={`input-group input-group-${size}`}>

package/src/i18n/cs.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonní číslo",
   "neptune.Select.searchPlaceholder": "Hledat...",
   "neptune.SelectInput.noResultsFound": "Nebyly nalezeny žádné výsledky",
-  "neptune.SelectOption.action.label": "Vybrat",
-  "neptune.SelectOption.selected.action.label": "Změnit zvolenou možnost",
   "neptune.StatusIcon.iconLabel.error": "Chyba:",
   "neptune.StatusIcon.iconLabel.information": "Informace:",
   "neptune.StatusIcon.iconLabel.pending": "Vyřizuje se:",

package/src/i18n/de.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonnummer",
   "neptune.Select.searchPlaceholder": "Wird gesucht...",
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
-  "neptune.SelectOption.action.label": "Auswählen",
-  "neptune.SelectOption.selected.action.label": "Ausgewählte Option ändern",
   "neptune.StatusIcon.iconLabel.error": "Fehler:",
   "neptune.StatusIcon.iconLabel.information": "Auskünfte:",
   "neptune.StatusIcon.iconLabel.pending": "Ausstehend:",

package/src/i18n/en.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
-  "neptune.SelectOption.action.label": "Choose",
-  "neptune.SelectOption.selected.action.label": "Change chosen option",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Information:",
   "neptune.StatusIcon.iconLabel.pending": "Pending:",

package/src/i18n/es.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Número de teléfono",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
-  "neptune.SelectOption.action.label": "Elegir",
-  "neptune.SelectOption.selected.action.label": "Cambiar opción elegida",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Información:",
   "neptune.StatusIcon.iconLabel.pending": "Pendiente:",

package/src/i18n/fr.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numéro de téléphone",
   "neptune.Select.searchPlaceholder": "Recherche...",
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
-  "neptune.SelectOption.action.label": "Sélectionner",
-  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
   "neptune.StatusIcon.iconLabel.error": "Erreur :",
   "neptune.StatusIcon.iconLabel.information": "Informations :",
   "neptune.StatusIcon.iconLabel.pending": "En attente :",

package/src/i18n/hu.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefonszám",
   "neptune.Select.searchPlaceholder": "Keresés...",
   "neptune.SelectInput.noResultsFound": "Nincs találat",
-  "neptune.SelectOption.action.label": "Kiválasztás",
-  "neptune.SelectOption.selected.action.label": "Kiválasztott opció módosítása",
   "neptune.StatusIcon.iconLabel.error": "Hiba:",
   "neptune.StatusIcon.iconLabel.information": "Információ:",
   "neptune.StatusIcon.iconLabel.pending": "Függőben:",

package/src/i18n/id.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Nomor telepon",
   "neptune.Select.searchPlaceholder": "Cari...",
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
-  "neptune.SelectOption.action.label": "Pilih",
-  "neptune.SelectOption.selected.action.label": "Ubah opsi yang dipilih",
   "neptune.StatusIcon.iconLabel.error": "Kesalahan:",
   "neptune.StatusIcon.iconLabel.information": "Informasi:",
   "neptune.StatusIcon.iconLabel.pending": "Tertunda:",

package/src/i18n/it.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numero di telefono",
   "neptune.Select.searchPlaceholder": "Cerca...",
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
-  "neptune.SelectOption.action.label": "Scegli",
-  "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
   "neptune.StatusIcon.iconLabel.error": "Errore:",
   "neptune.StatusIcon.iconLabel.information": "Informazioni:",
   "neptune.StatusIcon.iconLabel.pending": "In attesa:",

package/src/i18n/ja.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "電話番号",
   "neptune.Select.searchPlaceholder": "検索する... ",
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
-  "neptune.SelectOption.action.label": "選択してください",
-  "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
   "neptune.StatusIcon.iconLabel.error": "エラー：",
   "neptune.StatusIcon.iconLabel.information": "情報：",
   "neptune.StatusIcon.iconLabel.pending": "保留中：",

package/src/i18n/nl.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefoonnummer",
   "neptune.Select.searchPlaceholder": "Zoeken...",
   "neptune.SelectInput.noResultsFound": "Geen resultaten gevonden",
-  "neptune.SelectOption.action.label": "Kiezen",
-  "neptune.SelectOption.selected.action.label": "Gekozen optie wijzigen",
   "neptune.StatusIcon.iconLabel.error": "Fout:",
   "neptune.StatusIcon.iconLabel.information": "Informatie:",
   "neptune.StatusIcon.iconLabel.pending": "In behandeling:",

package/src/i18n/pl.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Numer telefonu",
   "neptune.Select.searchPlaceholder": "Wyszukaj...",
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
-  "neptune.SelectOption.action.label": "Wybierz",
-  "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
   "neptune.StatusIcon.iconLabel.error": "Błąd:",
   "neptune.StatusIcon.iconLabel.information": "Informacje:",
   "neptune.StatusIcon.iconLabel.pending": "W toku:",

package/src/i18n/pt.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Número de telefone",
   "neptune.Select.searchPlaceholder": "Buscar...",
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
-  "neptune.SelectOption.action.label": "Selecionar",
-  "neptune.SelectOption.selected.action.label": "Altere a opção escolhida",
   "neptune.StatusIcon.iconLabel.error": "Erro:",
   "neptune.StatusIcon.iconLabel.information": "Informação:",
   "neptune.StatusIcon.iconLabel.pending": "Pendente:",

package/src/i18n/ro.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Număr de telefon",
   "neptune.Select.searchPlaceholder": "Caută...",
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
-  "neptune.SelectOption.action.label": "Alege",
-  "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
   "neptune.StatusIcon.iconLabel.error": "Eroare:",
   "neptune.StatusIcon.iconLabel.information": "Informații:",
   "neptune.StatusIcon.iconLabel.pending": "În așteptare:",

package/src/i18n/ru.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефона",
   "neptune.Select.searchPlaceholder": "Поиск...",
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
-  "neptune.SelectOption.action.label": "Выбрать",
-  "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
   "neptune.StatusIcon.iconLabel.error": "Ошибка:",
   "neptune.StatusIcon.iconLabel.information": "Информация:",
   "neptune.StatusIcon.iconLabel.pending": "В ожидании:",

package/src/i18n/th.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "หมายเลขโทรศัพท์",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
-  "neptune.SelectOption.action.label": "เลือก",
-  "neptune.SelectOption.selected.action.label": "เปลี่ยนตัวเลือกที่เลือกไว้",
   "neptune.StatusIcon.iconLabel.error": "ข้อผิดพลาด:",
   "neptune.StatusIcon.iconLabel.information": "ข้อมูล:",
   "neptune.StatusIcon.iconLabel.pending": "รอดำเนินการ:",

package/src/i18n/tr.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "Telefon numarası",
   "neptune.Select.searchPlaceholder": "Ara...",
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
-  "neptune.SelectOption.action.label": "Seç",
-  "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
   "neptune.StatusIcon.iconLabel.error": "Hata:",
   "neptune.StatusIcon.iconLabel.information": "Bilgi:",
   "neptune.StatusIcon.iconLabel.pending": "Bekliyor:",

package/src/i18n/zh-CN.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "电话号码",
   "neptune.Select.searchPlaceholder": "搜索",
   "neptune.SelectInput.noResultsFound": "找不到结果",
-  "neptune.SelectOption.action.label": "选择",
-  "neptune.SelectOption.selected.action.label": "更改所选选项",
   "neptune.StatusIcon.iconLabel.error": "错误:",
   "neptune.StatusIcon.iconLabel.information": "信息:",
   "neptune.StatusIcon.iconLabel.pending": "待处理:",

package/src/i18n/zh-HK.json

@@ -28,8 +28,6 @@
   "neptune.PhoneNumberInput.phoneNumberLabel": "電話號碼",
   "neptune.Select.searchPlaceholder": "搜尋…",
   "neptune.SelectInput.noResultsFound": "找不到任何結果",
-  "neptune.SelectOption.action.label": "選擇",
-  "neptune.SelectOption.selected.action.label": "更改已選選項",
   "neptune.StatusIcon.iconLabel.error": "錯誤:",
   "neptune.StatusIcon.iconLabel.information": "資訊:",
   "neptune.StatusIcon.iconLabel.pending": "處理中:",

package/src/index.ts

@@ -5,7 +5,6 @@
  */
 export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
-export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { AvatarViewProps } from './avatarView';
@@ -116,7 +115,6 @@ export type {
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
-export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarView } from './avatarView';

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -6,11 +6,11 @@ import { Button, IconButton } from '..';
 import AvatarView from '../avatarView';
 import Info from '../info';
 import Title from '../title/Title';
-import ListItem, { List } from '.';
+import LegacyListItem, { List } from '.';
 
 export default {
-  component: ListItem,
-  title: 'Other/ListItem',
+  component: LegacyListItem,
+  title: 'Other/LegacyListItem',
   tags: ['autodocs'],
 };
 
@@ -18,8 +18,8 @@ const Template = ({
   title = 'Wise',
   value = 'We’re building the world’s most international account',
   ...props
-}: Partial<ComponentProps<typeof ListItem>>) => {
-  return <ListItem title={title} value={value} {...props} />;
+}: Partial<ComponentProps<typeof LegacyListItem>>) => {
+  return <LegacyListItem title={title} value={value} {...props} />;
 };
 
 export const Basic = () => {

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -1,11 +1,11 @@
 import { FastFlag } from '@transferwise/icons';
 import Button from '../button';
 import AvatarView from '../avatarView';
-import ListItem, { List, type LegacyListItemProps } from '.';
+import LegacyListItem, { List, type LegacyListItemProps } from '.';
 
 export default {
-  component: ListItem,
-  title: 'Other/ListItem/tests',
+  component: LegacyListItem,
+  title: 'Other/LegacyListItem/tests',
 };
 
 export const LongText = () => {
@@ -21,13 +21,13 @@ export const LongText = () => {
   return (
     <div style={{ width: '35rem' }}>
       <List>
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Default behaviour"
           value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
         />
 
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Wrapping the long word with a 'span.text-word-break'"
           value={
@@ -41,7 +41,7 @@ export const LongText = () => {
           }
         />
 
-        <ListItem
+        <LegacyListItem
           {...sharedProps}
           title="Using '&amp;shy;' HTML entitty"
           value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."

package/src/main.css

@@ -1789,50 +1789,6 @@ button.np-option {
     margin-top: -3px;
   }
 }
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 16px;
-  padding: var(--size-16);
-}
-.np-select-option-placeholder {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-placeholder:not(.disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-select-option-placeholder:not(.disabled):focus,
-.np-select-option-placeholder:not(.disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-select-option-selected {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-list > .np-section {
-  margin-top: 0;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-width: 3px;
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-  outline: var(--ring-outline-color) solid 3px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: calc(-1 * 3px);
-  outline-offset: var(--ring-outline-offset);
-}
-.has-error * .np-select-option:focus {
-  outline: none;
-}
-.has-error * .np-select-option:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
 .np-panel__content {
   opacity: 0;
   visibility: hidden;
@@ -1910,10 +1866,22 @@ button.np-option {
   border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
-.np-theme-personal .tw-date label {
+.tw-date label {
   width: 100%;
+}
+.tw-date .tw-date--year label {
   margin-bottom: 0;
 }
+.tw-date .tw-date--year,
+.tw-date .tw-date--month,
+.tw-date .tw-date--day {
+  margin-bottom: 0;
+}
+@media (min-width: 576px) {
+  .np-theme-personal .tw-date label {
+    margin-bottom: 0;
+  }
+}
 .tw-date-lookup-menu {
   width: 400px;
 }

package/src/main.less

@@ -20,7 +20,6 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
-@import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";
 @import "./dateInput/DateInput.less";

package/src/ssr.spec.tsx

@@ -228,7 +228,6 @@ describe('Server side rendering', () => {
     DateLookup: { value: new Date() },
     Link: { size: 16 },
     Tooltip: { children: <>yo</> },
-    SelectOption: { placeholder: { media: <img alt="img" /> } },
   };
 
   const { Provider } = exposedLibraryItems;

package/src/test-utils/assets/apple-pay-logo.svg

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Artwork" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="165.52107px" height="105.9651px" viewBox="0 0 165.52107 105.9651" enable-background="new 0 0 165.52107 105.9651"
+	 xml:space="preserve">
+<g>
+	<path id="XMLID_4_" d="M150.69807,0H14.82318c-0.5659,0-1.1328,0-1.69769,0.0033c-0.47751,0.0034-0.95391,0.0087-1.43031,0.0217
+		c-1.039,0.0281-2.0869,0.0894-3.1129,0.2738c-1.0424,0.1876-2.0124,0.4936-2.9587,0.9754
+		c-0.9303,0.4731-1.782,1.0919-2.52009,1.8303c-0.73841,0.7384-1.35721,1.5887-1.83021,2.52
+		c-0.4819,0.9463-0.7881,1.9166-0.9744,2.9598c-0.18539,1.0263-0.2471,2.074-0.2751,3.1119
+		c-0.0128,0.4764-0.01829,0.9528-0.0214,1.4291c-0.0033,0.5661-0.0022,1.1318-0.0022,1.6989V91.142
+		c0,0.5671-0.0011,1.13181,0.0022,1.69901c0.00311,0.4763,0.0086,0.9527,0.0214,1.4291
+		c0.028,1.03699,0.08971,2.08469,0.2751,3.11069c0.1863,1.0436,0.4925,2.0135,0.9744,2.9599
+		c0.473,0.9313,1.0918,1.7827,1.83021,2.52c0.73809,0.7396,1.58979,1.3583,2.52009,1.8302
+		c0.9463,0.4831,1.9163,0.7892,2.9587,0.9767c1.026,0.1832,2.0739,0.2456,3.1129,0.2737c0.4764,0.0108,0.9528,0.0172,1.43031,0.0194
+		c0.56489,0.0044,1.13179,0.0044,1.69769,0.0044h135.87489c0.5649,0,1.13181,0,1.69659-0.0044
+		c0.47641-0.0022,0.95282-0.0086,1.4314-0.0194c1.0368-0.0281,2.0845-0.0905,3.11301-0.2737
+		c1.041-0.1875,2.0112-0.4936,2.9576-0.9767c0.9313-0.4719,1.7805-1.0906,2.52011-1.8302c0.7372-0.7373,1.35599-1.5887,1.8302-2.52
+		c0.48299-0.9464,0.78889-1.9163,0.97429-2.9599c0.1855-1.026,0.2457-2.0737,0.2738-3.11069
+		c0.013-0.4764,0.01941-0.9528,0.02161-1.4291c0.00439-0.5672,0.00439-1.1319,0.00439-1.69901V14.8242
+		c0-0.5671,0-1.1328-0.00439-1.6989c-0.0022-0.4763-0.00861-0.9527-0.02161-1.4291c-0.02811-1.0379-0.0883-2.0856-0.2738-3.1119
+		c-0.18539-1.0432-0.4913-2.0135-0.97429-2.9598c-0.47421-0.9313-1.093-1.7816-1.8302-2.52
+		c-0.73961-0.7384-1.58881-1.3572-2.52011-1.8303c-0.9464-0.4818-1.9166-0.7878-2.9576-0.9754
+		c-1.0285-0.1844-2.0762-0.2457-3.11301-0.2738c-0.47858-0.013-0.95499-0.0183-1.4314-0.0217C151.82988,0,151.26297,0,150.69807,0
+		L150.69807,0z"/>
+	<path id="XMLID_3_" fill="#FFFFFF" d="M150.69807,3.532l1.67149,0.0032c0.4528,0.0032,0.90561,0.0081,1.36092,0.0205
+		c0.79201,0.0214,1.71849,0.0643,2.58209,0.2191c0.7507,0.1352,1.38029,0.3408,1.9845,0.6484
+		c0.5965,0.3031,1.14301,0.7003,1.62019,1.1768c0.479,0.4797,0.87671,1.0271,1.18381,1.6302
+		c0.30589,0.5995,0.51019,1.2261,0.64459,1.9823c0.1544,0.8542,0.1971,1.7832,0.21881,2.5801
+		c0.01219,0.4498,0.01819,0.8996,0.0204,1.3601c0.00429,0.5569,0.0042,1.1135,0.0042,1.6715V91.142
+		c0,0.558,0.00009,1.1136-0.0043,1.6824c-0.00211,0.4497-0.0081,0.8995-0.0204,1.3501c-0.02161,0.7957-0.0643,1.7242-0.2206,2.5885
+		c-0.13251,0.7458-0.3367,1.3725-0.64429,1.975c-0.30621,0.6016-0.70331,1.1484-1.18022,1.6251
+		c-0.47989,0.48-1.0246,0.876-1.62819,1.1819c-0.5997,0.3061-1.22821,0.51151-1.97151,0.6453
+		c-0.88109,0.157-1.84639,0.2002-2.57339,0.2199c-0.4574,0.0103-0.9126,0.01649-1.37889,0.0187
+		c-0.55571,0.0043-1.1134,0.0042-1.6692,0.0042H14.82318c-0.0074,0-0.0146,0-0.0221,0c-0.5494,0-1.0999,0-1.6593-0.0043
+		c-0.4561-0.00211-0.9112-0.0082-1.3512-0.0182c-0.7436-0.0201-1.7095-0.0632-2.5834-0.2193
+		c-0.74969-0.1348-1.3782-0.3402-1.9858-0.6503c-0.59789-0.3032-1.1422-0.6988-1.6223-1.1797
+		c-0.4764-0.4756-0.8723-1.0207-1.1784-1.6232c-0.3064-0.6019-0.5114-1.2305-0.64619-1.9852
+		c-0.15581-0.8626-0.19861-1.7874-0.22-2.5777c-0.01221-0.4525-0.01731-0.9049-0.02021-1.3547l-0.0022-1.3279l0.0001-0.3506V14.8242
+		l-0.0001-0.3506l0.0021-1.3251c0.003-0.4525,0.0081-0.9049,0.02031-1.357c0.02139-0.7911,0.06419-1.7163,0.22129-2.5861
+		c0.1336-0.7479,0.3385-1.3765,0.6465-1.9814c0.3037-0.5979,0.7003-1.1437,1.17921-1.6225
+		c0.477-0.4772,1.02309-0.8739,1.62479-1.1799c0.6011-0.3061,1.2308-0.5116,1.9805-0.6465c0.8638-0.1552,1.7909-0.198,2.5849-0.2195
+		c0.4526-0.0123,0.9052-0.0172,1.3544-0.0203l1.6771-0.0033H150.69807"/>
+	<g>
+		<g>
+			<path d="M45.1862,35.64053c1.41724-1.77266,2.37897-4.15282,2.12532-6.58506c-2.07464,0.10316-4.60634,1.36871-6.07207,3.14276
+				c-1.31607,1.5192-2.4809,3.99902-2.17723,6.3293C41.39111,38.72954,43.71785,37.36345,45.1862,35.64053"/>
+			<path d="M47.28506,38.98252c-3.38211-0.20146-6.25773,1.91951-7.87286,1.91951c-1.61602,0-4.08931-1.81799-6.76438-1.76899
+				c-3.48177,0.05114-6.71245,2.01976-8.4793,5.15079c-3.63411,6.2636-0.95904,15.55471,2.57494,20.65606
+				c1.71618,2.5238,3.78447,5.30269,6.50976,5.20287c2.57494-0.10104,3.58421-1.66732,6.71416-1.66732
+				c3.12765,0,4.03679,1.66732,6.76252,1.61681c2.82665-0.05054,4.59381-2.52506,6.30997-5.05132
+				c1.96878-2.877,2.77473-5.65498,2.82542-5.80748c-0.0507-0.05051-5.45058-2.12204-5.50065-8.33358
+				c-0.05098-5.20101,4.23951-7.6749,4.44144-7.82832C52.3832,39.4881,48.5975,39.08404,47.28506,38.98252"/>
+		</g>
+		<g>
+			<path d="M76.73385,31.94381c7.35096,0,12.4697,5.06708,12.4697,12.44437c0,7.40363-5.22407,12.49704-12.65403,12.49704h-8.13892
+				v12.94318h-5.88037v-37.8846H76.73385z M68.41059,51.9493h6.74732c5.11975,0,8.0336-2.75636,8.0336-7.53479
+				c0-4.77792-2.91385-7.50845-8.00727-7.50845h-6.77365V51.9493z"/>
+			<path d="M90.73997,61.97864c0-4.8311,3.70182-7.79761,10.26583-8.16526l7.56061-0.44614v-2.12639
+				c0-3.07185-2.07423-4.90959-5.53905-4.90959c-3.28251,0-5.33041,1.57492-5.82871,4.04313h-5.35574
+				c0.31499-4.98859,4.56777-8.66407,11.3941-8.66407c6.69466,0,10.97377,3.54432,10.97377,9.08388v19.03421h-5.43472v-4.54194
+				h-0.13065c-1.60125,3.07185-5.09341,5.01441-8.71623,5.01441C94.52078,70.30088,90.73997,66.94038,90.73997,61.97864z
+				 M108.56641,59.4846v-2.17905l-6.8,0.41981c-3.38683,0.23649-5.30306,1.73291-5.30306,4.09579
+				c0,2.41504,1.99523,3.99046,5.04075,3.99046C105.46823,65.81161,108.56641,63.08108,108.56641,59.4846z"/>
+			<path d="M119.34167,79.9889v-4.5946c0.4193,0.10483,1.36425,0.10483,1.83723,0.10483c2.6252,0,4.04313-1.10245,4.90908-3.9378
+				c0-0.05267,0.49931-1.68025,0.49931-1.70658l-9.97616-27.64562h6.14268l6.98432,22.47371h0.10432l6.98433-22.47371h5.9857
+				l-10.34483,29.06304c-2.36186,6.69517-5.0924,8.84789-10.81577,8.84789C121.17891,80.12006,119.76098,80.06739,119.34167,79.9889
+				z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/src/test-utils/fake-data.ts

@@ -1,6 +1,11 @@
+export const lorem5 = 'Lorem ipsum dolor sit amet.';
+
 export const lorem10 =
   'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?';
 
+export const lorem20 =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum non explicabo doloribus rerum saepe ut beatae adipisci rem vero optio.';
+
 export const lorem40 =
   'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?';