@transferwise/components 0.0.0-experimental-9773c7e → 0.0.0-experimental-c0ebd4f

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -10,6 +10,7 @@ import {
   Size,
   Sentiment,
   getInitials,
+  Status,
 } from '../common';
 import StatusIcon from '../statusIcon/StatusIcon';
 
@@ -17,7 +18,7 @@ interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
   url?: string;
   ariaLabel?: string;
   altText?: string;
-  statusIcon?: Sentiment;
+  statusIcon?: Sentiment | Status.PENDING;
 }
 
 const OptionalBadge = ({
@@ -66,7 +67,7 @@ export type AvatarWrapperProps = {
   | {
       badgeUrl?: never;
       badgeAltText?: never;
-      badgeStatusIcon: Sentiment;
+      badgeStatusIcon: Sentiment | Status.PENDING;
     }
   | {
       badgeUrl?: never;

package/src/common/propsValues/sentiment.ts

@@ -3,6 +3,7 @@ export enum Sentiment {
   NEUTRAL = 'neutral',
   POSITIVE = 'positive',
   WARNING = 'warning',
+  // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING
   PENDING = 'pending',
 
   /**

package/src/i18n/cs.json

@@ -1,7 +1,7 @@
 {
   "neptune.Button.loadingAriaLabel": "načítání",
-  "neptune.Chips.ariaLabel": "Vyčistit {choice}",
-  "neptune.ClearButton.ariaLabel": "Vyčistit",
+  "neptune.Chips.ariaLabel": "Vymazat {choice}",
+  "neptune.ClearButton.ariaLabel": "Vymazat",
   "neptune.CloseButton.ariaLabel": "Zavřít",
   "neptune.DateInput.day.label": "Den",
   "neptune.DateInput.day.placeholder": "DD",
@@ -47,25 +47,25 @@
   "neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
   "neptune.Upload.psButtonText": "Zrušit",
   "neptune.Upload.psProcessingText": "Načítání...",
-  "neptune.Upload.retry": "Opakovat",
+  "neptune.Upload.retry": "Zkusit znovu",
   "neptune.Upload.usButtonText": "Nebo vyberte soubor",
-  "neptune.Upload.usDropMessage": "Pusťte sem soubor pro jeho nahrání",
+  "neptune.Upload.usDropMessage": "Přetáhněte soubor a zahajte nahrávání",
   "neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
   "neptune.UploadButton.allFileTypes": "Všechny typy souborů",
-  "neptune.UploadButton.dropFiles": "Pusťte sem soubor pro jeho nahrání",
-  "neptune.UploadButton.instructions": "{fileTypes}, menší než {size}MB",
+  "neptune.UploadButton.dropFiles": "Přetáhněte soubor a zahajte nahrávání",
+  "neptune.UploadButton.instructions": "{fileTypes}, menší než {size} MB",
   "neptune.UploadButton.maximumFiles": "Max. počet souborů: {maxFiles}.",
   "neptune.UploadButton.uploadFile": "Nahrát soubor",
   "neptune.UploadButton.uploadFiles": "Nahrát soubory",
   "neptune.UploadInput.deleteModalBody": "Odstraněním tohoto souboru jej smažete z našeho systému.",
   "neptune.UploadInput.deleteModalCancelButtonText": "Zrušit",
   "neptune.UploadInput.deleteModalConfirmButtonText": "Odstranit",
-  "neptune.UploadInput.deleteModalTitle": "Jistě chcete odstranit tento soubor?",
+  "neptune.UploadInput.deleteModalTitle": "Opravdu chcete odstranit tento soubor?",
   "neptune.UploadInput.fileIsTooLarge": "Soubor je příliš velký",
   "neptune.UploadInput.fileTypeNotSupported": "Typ souboru není podporován",
   "neptune.UploadInput.maximumFilesAlreadyUploaded": "Je nám líto, ale toto nahrání se nezdařilo, protože můžeme přijmout pouze {maxFilesAllowed} souborů najednou.",
-  "neptune.UploadItem.deleting": "Mažeme...",
-  "neptune.UploadItem.removeFile": "Odstranit soubor {filename}",
+  "neptune.UploadItem.deleting": "Odstraňování...",
+  "neptune.UploadItem.removeFile": "Odebrat soubor {filename}",
   "neptune.UploadItem.uploaded": "Nahráno",
   "neptune.UploadItem.uploadedFile": "Nahraný soubor",
   "neptune.UploadItem.uploading": "Nahrávání...",

package/src/index.ts

@@ -109,7 +109,6 @@ export type {
   TableCellStatus,
   TableCellType,
 } from './table';
-export type { ItemProps, ItemAdditionalInfoProps, ItemCheckboxProps } from './item';
 
 /**
  * Components
@@ -212,7 +211,6 @@ export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
 export { default as Table } from './table';
-export { default as Item } from './table';
 
 /**
  * Hooks

package/src/inputs/Input.css

@@ -71,8 +71,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -83,6 +81,34 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {

package/src/inputs/TextArea.css

@@ -71,8 +71,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -83,6 +81,34 @@
   line-height: 125%;
   height: 72px !important;
   height: var(--size-72) !important;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {

package/src/main.css

@@ -2585,8 +2585,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-size: 1.375rem;
@@ -2598,6 +2596,36 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   height: 72px !important;
   height: var(--size-72) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-form-control--size-lg {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-form-control--size-lg {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-form-control--size-lg + p,
 .np-form-control--size-lg + ul:not(.list-unstyled),
 .np-form-control--size-lg + ol:not(.list-unstyled) {
@@ -2620,192 +2648,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-radius: 9999px !important;
   border-radius: var(--radius-full) !important;
 }
-.np-item {
-  padding: 16px;
-  padding: var(--size-16);
-  border-radius: 24px;
-  border-radius: var(--radius-large);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-  display: flex;
-  gap: 16px;
-  gap: var(--size-16);
-  align-items: center;
-  flex-direction: row;
-  cursor: pointer;
-}
-.np-item:hover {
-  background-color: var(--color-background-screen-hover);
-}
-.np-item:active {
-  background-color: var(--color-background-screen-active);
-}
-.np-item-media {
-  flex: 0 0 auto;
-  align-items: flex-start;
-}
-.np-item-title {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-additional-info {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-item-value {
-  flex: 0 0 auto;
-}
-.np-item-control {
-  flex: 0 0 auto;
-}
-.np-item-spotlight-active {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-item-spotlight-active:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-item-spotlight-active:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-spotlight-inactive {
-  background-color: rgba(134, 167, 189, 0.025);
-  border: 1px dashed rgba(0,0,0,0.10196);
-  border: 1px dashed var(--color-border-neutral);
-}
-@supports (color: color-mix(in lch, red, blue)) {
-.np-item-spotlight-inactive {
-  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
-}
-}
-.np-item-spotlight-inactive:hover {
-  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
-}
-.np-item-spotlight-inactive:active {
-  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
-}
-.np-item-prompt {
-  display: inline-flex;
-  padding-top: calc(8px / 2);
-  padding-top: calc(var(--padding-x-small) / 2);
-  padding-bottom: calc(8px / 2);
-  padding-bottom: calc(var(--padding-x-small) / 2);
-  padding-left: calc(8px - 1px);
-  padding-left: calc(var(--padding-x-small) - 1px);
-  padding-right: 8px;
-  padding-right: var(--padding-x-small);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  word-break: break-word;
-  word-wrap: break-word;
-}
-.np-item-prompt .np-prompt-icon {
-  padding-right: calc(12px / 2);
-  padding-right: calc(var(--size-12) / 2);
-  padding-top: calc(4px - 1);
-  padding-top: calc(var(--size-4) - 1);
-  padding-bottom: calc(4px - 1);
-  padding-bottom: calc(var(--size-4) - 1);
-}
-.np-item-prompt .np-prompt-icon .tw-icon-tags,
-.np-item-prompt .np-prompt-icon .tw-icon-confetti {
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt a {
-  text-underline-offset: calc(4px / 2);
-  text-underline-offset: calc(var(--size-4) / 2);
-}
-.np-item-prompt.np-prompt-interactive {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-}
-.np-item-prompt.negative {
-  background-color: var(--color-sentiment-negative-secondary);
-  color: var(--color-sentiment-negative-primary);
-}
-.np-item-prompt.negative a {
-  color: var(--color-sentiment-negative-primary);
-}
-.np-item-prompt.negative a:hover {
-  color: var(--color-sentiment-negative-primary-hover);
-}
-.np-item-prompt.negative a:active {
-  color: var(--color-sentiment-negative-primary-active);
-}
-.np-prompt-interactive.np-item-prompt.negative:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
-}
-.np-prompt-interactive.np-item-prompt.negative:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
-}
-.np-item-prompt.positive,
-.np-item-prompt.discount,
-.np-item-prompt.savings {
-  background-color: var(--color-sentiment-positive-secondary);
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt.positive a,
-.np-item-prompt.discount a,
-.np-item-prompt.savings a {
-  color: var(--color-sentiment-positive-primary);
-}
-.np-item-prompt.positive a:hover,
-.np-item-prompt.discount a:hover,
-.np-item-prompt.savings a:hover {
-  color: var(--color-sentiment-positive-primary-hover);
-}
-.np-item-prompt.positive a:active,
-.np-item-prompt.discount a:active,
-.np-item-prompt.savings a:active {
-  color: var(--color-sentiment-positive-primary-active);
-}
-.np-prompt-interactive.np-item-prompt.positive:hover,
-.np-prompt-interactive.np-item-prompt.discount:hover,
-.np-prompt-interactive.np-item-prompt.savings:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
-}
-.np-prompt-interactive.np-item-prompt.positive:active,
-.np-prompt-interactive.np-item-prompt.discount:active,
-.np-prompt-interactive.np-item-prompt.savings:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
-}
-.np-item-prompt.neutral {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-item-prompt.neutral a {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-prompt-interactive.np-item-prompt.neutral:hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-prompt-interactive.np-item-prompt.neutral:active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-item-prompt.warning {
-  background-color: var(--color-sentiment-warning-secondary);
-  color: var(--color-sentiment-warning-content);
-}
-.np-item-prompt.warning a {
-  color: var(--color-sentiment-warning-content);
-}
-.np-item-prompt.warning a:hover {
-  color: var(--color-sentiment-warning-content-hover);
-}
-.np-item-prompt.warning a:active {
-  color: var(--color-sentiment-warning-content-active);
-}
-.np-prompt-interactive.np-item-prompt.warning:hover {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
-}
-.np-prompt-interactive.np-item-prompt.warning:active {
-  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
-}
 .np-field-control {
   margin-top: 4px;
   margin-top: var(--size-4);
@@ -4209,8 +4051,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -4220,6 +4060,36 @@ html:not([dir="rtl"]) .np-navigation-option {
   letter-spacing: -0.02em;
   line-height: 122%;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/main.less

@@ -39,7 +39,6 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
-@import "./item/Item.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/popover/Popover.css

@@ -24,8 +24,6 @@
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
-  -webkit-hyphens: auto;
-          hyphens: auto;
   margin-bottom: 0;
   margin-bottom: initial;
   font-weight: 600;
@@ -34,6 +32,34 @@
   font-size: var(--font-size-26);
   letter-spacing: -0.02em;
   line-height: 122%;
+}@supports (hyphenate-limit-chars: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 768px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    -webkit-hyphens: auto;
+            hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 992px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
 }.np-popover__container.np-bottom-sheet .np-popover__title + p,
 .np-popover__container.np-bottom-sheet .np-popover__title + ul:not(.list-unstyled),
 .np-popover__container.np-bottom-sheet .np-popover__title + ol:not(.list-unstyled) {

package/src/statusIcon/StatusIcon.docs.mdx

@@ -10,7 +10,7 @@ By default, the component offers accessible names for all the icons, to ensure t
 Sentiment.NEGATIVE -> 'Error:'
 Sentiment.POSITIVE -> 'Success:'
 Sentiment.WARNING -> 'Warning:'
-Sentiment.PENDING -> 'Pending:'
+Status.PENDING -> 'Pending:'
 Sentiment.NEUTRAL -> 'Information:'
 
 // deprecated

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,7 +1,8 @@
-import { Sentiment, Size } from '../common';
+import { Sentiment, Size, Status } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
 import StatusIcon, { type StatusIconProps } from '.';
+import { StatusIconSentiment } from './StatusIcon';
 
 mockMatchMedia();
 
@@ -29,12 +30,13 @@ describe('StatusIcon', () => {
     [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
     [Sentiment.NEUTRAL, Sentiment.NEUTRAL],
     [Sentiment.PENDING, Sentiment.PENDING],
+    [Status.PENDING, Status.PENDING],
     [Sentiment.POSITIVE, Sentiment.POSITIVE],
     [Sentiment.WARNING, Sentiment.WARNING],
   ])(
     "if prop 'sentiment' equals '%s' is passed, renders the status icon with class '%s'",
     (sentiment, expectedClass) => {
-      renderStatusIcon({ sentiment });
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
       cleanup();
@@ -48,6 +50,10 @@ describe('StatusIcon', () => {
 
     renderStatusIcon({ sentiment: Sentiment.PENDING });
     expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
+    cleanup();
+
+    renderStatusIcon({ sentiment: Status.PENDING });
+    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
   });
 
   it("'positive', 'negative', and 'neutral' sentiments generate 'light' colored icons", () => {
@@ -68,13 +74,13 @@ describe('StatusIcon', () => {
       ['Error', Sentiment.NEGATIVE],
       ['Success', Sentiment.POSITIVE],
       ['Warning', Sentiment.WARNING],
-      ['Pending', Sentiment.PENDING],
+      ['Pending', Status.PENDING],
       ['Information', Sentiment.NEUTRAL],
       ['Error', Sentiment.ERROR],
       ['Information', Sentiment.INFO],
       ['Success', Sentiment.SUCCESS],
     ])("should set '%s' as an accessible name for the '%s' sentiment", (label, sentiment) => {
-      renderStatusIcon({ sentiment });
+      renderStatusIcon({ sentiment: sentiment as StatusIconSentiment });
 
       expect(screen.getByLabelText(`${label}:`)).toBeInTheDocument();
     });

package/src/statusIcon/StatusIcon.story.tsx

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { Sentiment, Size } from '../common';
+import { Sentiment, Size, Status } from '../common';
 
-import StatusIcon from './StatusIcon';
+import StatusIcon, { StatusIconSentiment } from './StatusIcon';
 import { storyConfig } from '../test-utils';
 
 export default {
@@ -42,6 +42,7 @@ export const Variants = storyConfig(
           Sentiment.WARNING,
           Sentiment.NEUTRAL,
           Sentiment.PENDING,
+          Status.PENDING,
         ].map((sentiment) => {
           return (
             <span
@@ -55,7 +56,9 @@ export const Variants = storyConfig(
               }}
             >
               {([16, 24, 32, 40, 48, 56, 72] as const).map((size) => {
-                return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+                return (
+                  <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
+                );
               })}
             </span>
           );
@@ -74,7 +77,7 @@ export const LegacySizes: Story = {
         Sentiment.NEGATIVE,
         Sentiment.NEUTRAL,
         Sentiment.WARNING,
-        Sentiment.PENDING,
+        Status.PENDING,
       ].map((sentiment) => {
         return (
           <span
@@ -88,7 +91,9 @@ export const LegacySizes: Story = {
             }}
           >
             {([Size.SMALL, Size.MEDIUM, Size.LARGE] as const).map((size) => {
-              return <StatusIcon key={size} size={size} sentiment={sentiment} />;
+              return (
+                <StatusIcon key={size} size={size} sentiment={sentiment as StatusIconSentiment} />
+              );
             })}
           </span>
         );

package/src/statusIcon/StatusIcon.tsx

@@ -2,7 +2,7 @@ import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons'
 import { clsx } from 'clsx';
 import { useIntl } from 'react-intl';
 
-import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint } from '../common';
+import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';
 import Circle, { CircleProps } from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';
 
@@ -13,8 +13,10 @@ import messages from './StatusIcon.messages';
  */
 type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
 
+export type StatusIconSentiment = Sentiment | Status.PENDING;
+
 export type StatusIconProps = {
-  sentiment?: `${Sentiment}`;
+  sentiment?: `${StatusIconSentiment}`;
   size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
   /**
    * Override for the sentiment's-derived, default, accessible
@@ -34,7 +36,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
   const intl = useIntl();
 
   const iconMetaBySentiment: Record<
-    `${Sentiment}`,
+    `${Sentiment}` | Status.PENDING,
     {
       Icon: React.ElementType;
       defaultIconLabel: string;
@@ -52,7 +54,7 @@ const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: S
       Icon: Alert,
       defaultIconLabel: intl.formatMessage(messages.warningLabel),
     },
-    [Sentiment.PENDING]: {
+    [Status.PENDING]: {
       Icon: ClockBorderless,
       defaultIconLabel: intl.formatMessage(messages.pendingLabel),
     },

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

@@ -1,9 +1,6 @@
 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?';