@transferwise/components 0.0.0-experimental-9b6c3f8 → 0.0.0-experimental-c70eb7d

package/build/styles/Typeahead/Typeahead.css

@@ -180,14 +180,12 @@
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: 9px !important;
 }
-.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
-.np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
+.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
   padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
-  .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
+  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
     padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
   }

package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css

@@ -8,8 +8,7 @@
   color: var(--color-sentiment-content-primary);
   margin-block-end: 0;
 }
-.critical-comms .alert .np-text-title-body,
-.critical-comms .alert .wds-text-title-body {
+.critical-comms .alert .np-text-title-body {
   color: var(--color-sentiment-content-primary);
 }
 .critical-comms .status-circle.negative {

package/build/styles/_deprecated/Select/Select.css

@@ -250,12 +250,8 @@
 .np-dropdown-menu > .selected > a strong {
   color: inherit;
 }
-.np-dropdown-menu > .active > a .body-2,
-.np-dropdown-menu > .selected > a .body-2,
 .np-dropdown-menu > .active > a .np-text-body-default,
-.np-dropdown-menu > .selected > a .np-text-body-default,
-.np-dropdown-menu > .active > a .wds-text-body-default,
-.np-dropdown-menu > .selected > a .wds-text-body-default {
+.np-dropdown-menu > .selected > a .np-text-body-default {
   color: #c9cbce;
 }
 .np-dropdown-menu .np-select-filter,
@@ -295,9 +291,7 @@
   vertical-align: middle;
 }
 .np-select .np-text-body-default,
-.np-dropdown-menu .np-text-body-default,
-.np-select .wds-text-body-default,
-.np-dropdown-menu .wds-text-body-default {
+.np-dropdown-menu .np-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -358,13 +352,7 @@
 .np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a:focus .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:focus .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a:hover .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:hover .wds-text-body-default {
+.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
@@ -372,8 +360,7 @@
   background-color: var(--color-background-neutral-active) !important;
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
-.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default,
-.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .wds-text-body-default {
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item {

package/build/styles/main.css

@@ -27588,8 +27588,7 @@ a[data-toggle="tooltip"] {
   color: var(--color-sentiment-content-primary);
   margin-block-end: 0;
 }
-.critical-comms .alert .np-text-title-body,
-.critical-comms .alert .wds-text-title-body {
+.critical-comms .alert .np-text-title-body {
   color: var(--color-sentiment-content-primary);
 }
 .critical-comms .status-circle.negative {
@@ -27653,8 +27652,7 @@ a[data-toggle="tooltip"] {
   background-color: transparent;
 }
 .np-accordion-item.np-accordion-item--dark .media-body,
-.np-accordion-item.np-accordion-item--dark .np-text-title-body,
-.np-accordion-item.np-accordion-item--dark .wds-text-title-body {
+.np-accordion-item.np-accordion-item--dark .np-text-title-body {
   color: #ffffff;
 }
 .np-accordion-item__content {
@@ -28303,7 +28301,7 @@ a[data-toggle="tooltip"] {
   border-width: 1px;
   border-color: var(--badge-border-color);
 }
-.wds-text--pre-line {
+.np-text--pre-line {
   white-space: pre-line;
 }
 .wds-Button {
@@ -29154,14 +29152,12 @@ a[data-toggle="tooltip"] {
 .np-theme-personal .np-chip.np-chip--removable {
   position: relative;
 }
-.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
-.np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
+.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
   padding-inline-end: 24px;
   padding-inline-end: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
-  .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
+  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
     padding-inline-end: 48px;
     padding-inline-end: var(--size-48);
   }
@@ -29753,8 +29749,7 @@ button.np-option {
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small .np-text-title-subsection,
-.np-decision__tile--small .wds-text-title-subsection {
+.np-decision__tile--small .np-text-title-subsection {
   font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 1.2;
@@ -30234,16 +30229,6 @@ button.np-option {
   --ring-color: var(--color-interactive-primary);
 }
 .np-form-control--size-auto {
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
-  font-family: var(--wds-font-family-regular);
-  font-weight: 400;
-  font-weight: var(--wds-font-weight-body-large-regular);
-  font-size: 1rem;
-  font-size: var(--wds-font-size-body-large);
-  line-height: 1.5;
-  line-height: var(--wds-line-height-body-large);
-  letter-spacing: -0.011em;
-  letter-spacing: var(--wds-letter-spacing-body-large);
   word-wrap: break-word;
   padding-block-start: 12px;
   padding-block-start: var(--size-12);
@@ -30285,16 +30270,6 @@ button.np-option {
   padding-block-end: 0 !important;
 }
 .np-form-control--size-sm {
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
-  font-family: var(--wds-font-family-regular);
-  font-weight: 400;
-  font-weight: var(--wds-font-weight-body-regular);
-  font-size: 0.875rem;
-  font-size: var(--wds-font-size-body);
-  line-height: 1.55;
-  line-height: var(--wds-line-height-body);
-  letter-spacing: -0.006em;
-  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   block-size: 32px !important;
   block-size: var(--size-32) !important;
@@ -30334,16 +30309,6 @@ button.np-option {
   }
 }
 .np-form-control--size-md {
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
-  font-family: var(--wds-font-family-regular);
-  font-weight: 400;
-  font-weight: var(--wds-font-weight-body-large-regular);
-  font-size: 1rem;
-  font-size: var(--wds-font-size-body-large);
-  line-height: 1.5;
-  line-height: var(--wds-line-height-body-large);
-  letter-spacing: -0.011em;
-  letter-spacing: var(--wds-letter-spacing-body-large);
   word-wrap: break-word;
   block-size: 48px !important;
   block-size: var(--size-48) !important;
@@ -30383,20 +30348,48 @@ button.np-option {
   }
 }
 .np-form-control--size-lg {
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
-  font-family: var(--wds-font-family-regular);
-  font-weight: 600;
-  font-weight: var(--wds-font-weight-title-subsection);
-  font-size: 1.375rem;
-  font-size: var(--wds-font-size-title-subsection);
-  line-height: 1.25;
-  line-height: var(--wds-line-height-title-subsection);
-  letter-spacing: -0.018em;
-  letter-spacing: var(--wds-letter-spacing-title-subsection);
+  margin: 0;
+  color: #37517e;
+  color: var(--color-content-primary);
+  word-wrap: break-word;
   margin-block-end: initial;
   block-size: 72px !important;
   block-size: var(--size-72) !important;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-form-control--size-lg {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-form-control--size-lg {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .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 {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .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) {
+  margin-block-start: 8px;
+  margin-block-start: var(--size-8);
+}
 .np-input::-moz-placeholder {
   color: #768e9c;
   color: var(--color-content-tertiary);
@@ -32039,8 +32032,7 @@ button.np-link {
 .tw-money-input .tw-money-input__fixed-currency {
   padding-inline-start: 0 !important;
 }
-.tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection,
-.tw-money-input .tw-money-input__fixed-currency .wds-text-title-subsection {
+.tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection {
   color: #768e9c;
   color: var(--color-content-tertiary);
   font-weight: 600;
@@ -32056,16 +32048,14 @@ button.np-link {
 .tw-money-input.input-group-sm .form-control {
   min-block-size: 34px;
 }
-.tw-money-input.input-group-sm .np-text-title-subsection,
-.tw-money-input.input-group-sm .wds-text-title-subsection {
+.tw-money-input.input-group-sm .np-text-title-subsection {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
 }
 .tw-money-input.input-group-md .form-control {
   min-block-size: 53px;
 }
-.tw-money-input.input-group-md .np-text-title-subsection,
-.tw-money-input.input-group-md .wds-text-title-subsection {
+.tw-money-input.input-group-md .np-text-title-subsection {
   font-size: 1rem;
   font-size: var(--font-size-16);
 }
@@ -32451,18 +32441,46 @@ button.np-link {
   padding: var(--size-24);
 }
 .np-popover__container.np-bottom-sheet .np-popover__title {
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
-  font-family: var(--wds-font-family-regular);
-  font-weight: 600;
-  font-weight: var(--wds-font-weight-title-section);
-  font-size: 1.625rem;
-  font-size: var(--wds-font-size-title-section);
-  line-height: 1.22;
-  line-height: var(--wds-line-height-title-section);
-  letter-spacing: -0.02em;
-  letter-spacing: var(--wds-letter-spacing-title-section);
+  margin: 0;
+  color: #37517e;
+  color: var(--color-content-primary);
+  word-wrap: break-word;
   margin-block-end: initial;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-popover__container.np-bottom-sheet .np-popover__title {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-popover__container.np-bottom-sheet .np-popover__title {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .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 {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .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) {
+  margin-block-start: 8px;
+  margin-block-start: var(--size-8);
+}
 .np-popover__container.np-bottom-sheet .np-popover__content {
   padding-block: 32px;
   padding-block: var(--size-32);
@@ -33507,16 +33525,6 @@ button.np-link {
   border-radius: var(--radius-small);
   color: #37517e;
   color: var(--color-content-primary);
-  font-family: 'Inter', Helvetica, Arial, sans-serif;
-  font-family: var(--wds-font-family-regular);
-  font-weight: 400;
-  font-weight: var(--wds-font-weight-body-regular);
-  font-size: 0.875rem;
-  font-size: var(--wds-font-size-body);
-  line-height: 1.55;
-  line-height: var(--wds-line-height-body);
-  letter-spacing: -0.006em;
-  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
 }
 .np-theme-personal .np-dropdown-menu > li > a {
@@ -33595,12 +33603,8 @@ button.np-link {
 .np-dropdown-menu > .selected > a strong {
   color: inherit;
 }
-.np-dropdown-menu > .active > a .body-2,
-.np-dropdown-menu > .selected > a .body-2,
 .np-dropdown-menu > .active > a .np-text-body-default,
-.np-dropdown-menu > .selected > a .np-text-body-default,
-.np-dropdown-menu > .active > a .wds-text-body-default,
-.np-dropdown-menu > .selected > a .wds-text-body-default {
+.np-dropdown-menu > .selected > a .np-text-body-default {
   color: #c9cbce;
 }
 .np-dropdown-menu .np-select-filter,
@@ -33640,9 +33644,7 @@ button.np-link {
   vertical-align: middle;
 }
 .np-select .np-text-body-default,
-.np-dropdown-menu .np-text-body-default,
-.np-select .wds-text-body-default,
-.np-dropdown-menu .wds-text-body-default {
+.np-dropdown-menu .np-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -33703,13 +33705,7 @@ button.np-link {
 .np-theme-personal .np-dropdown-menu .active a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a:focus .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:focus .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .active a:hover .wds-text-body-default,
-.np-theme-personal .np-dropdown-menu .selected a:hover .wds-text-body-default {
+.np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
@@ -33717,8 +33713,7 @@ button.np-link {
   background-color: var(--color-background-neutral-active) !important;
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
-.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default,
-.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .wds-text-body-default {
+.np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item {
@@ -34143,16 +34138,10 @@ button.np-link {
 }
 .np-table-inner-container {
   background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center,
-      right center,
-      left center,
-      right center;
+  background-position: left center, right center, left center, right center;
   background-repeat: no-repeat;
   background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%,
-      15px 100%,
-      15px 100%,
-      15px 100%;
+  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
   background-attachment: local, local, scroll, scroll;
   overflow-x: auto;
   border-radius: 10px;
@@ -34249,9 +34238,7 @@ button.np-link {
   padding-inline-end: 0;
 }
 .np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default,
-.np-table-header.np-table-header--right > .wds-text-body-default,
-.np-table-cell.np-table-cell--right > .wds-text-body-default {
+.np-table-cell.np-table-cell--right > .np-text-body-default {
   text-align: end;
 }
 .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
@@ -34310,8 +34297,7 @@ button.np-link {
 .np-table-cell--primary {
   min-inline-size: 200px;
 }
-.np-table-cell--currency .np-text-body-default,
-.np-table-cell--currency .wds-text-body-default {
+.np-table-cell--currency .np-text-body-default {
   white-space: nowrap;
 }
 .np-table-cell .tw-chevron {
@@ -34328,8 +34314,7 @@ button.np-link {
   background-color: var(--color-background-neutral);
   padding: 0;
 }
-.np-table-cell .np-text-body-default-bold,
-.np-table-cell .wds-text-body-default-bold {
+.np-table-cell .np-text-body-default-bold {
   display: flex;
   align-items: center;
   color: #37517e;
@@ -34447,8 +34432,7 @@ button.np-link {
 .np-theme-personal .np-tile.decision:active {
   background-color: var(--color-background-neutral-active);
 }
-.np-theme-personal .np-tile.decision .np-text-body-default,
-.np-theme-personal .np-tile.decision .wds-text-body-default {
+.np-theme-personal .np-tile.decision .np-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
@@ -34717,14 +34701,12 @@ button.np-link {
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: 9px !important;
 }
-.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
-.np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
+.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
   padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
-  .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
+  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
     padding-inline-end: 32px;
     padding-inline-end: var(--size-32);
   }
@@ -35099,8 +35081,7 @@ button.np-link {
     transition-delay: 0.2s;
   }
 }
-.np-progress-bar__title .h4,
-.np-progress-bar__title .wds-text-title-body {
+.np-progress-bar__title .h4 {
   color: #37517e;
   color: var(--color-content-primary);
   margin-block-end: 4px;

package/build/types/common/PropsValues/typography.d.ts

@@ -6,13 +6,7 @@ export declare enum Typography {
     DISPLAY_LARGE = "display-large",
     DISPLAY_MEDIUM = "display-medium",
     DISPLAY_SMALL = "display-small",
-    /**
-     * @deprecated Use {@link Typography.DISPLAY_NUMBER_SMALL} instead.
-     */
     DISPLAY_NUMBER = "display-number",
-    DISPLAY_NUMBER_SMALL = "display-number-small",
-    DISPLAY_NUMBER_MEDIUM = "display-number-medium",
-    DISPLAY_NUMBER_LARGE = "display-number-large",
     TITLE_SCREEN = "title-screen",
     TITLE_SECTION = "title-section",
     TITLE_SUBSECTION = "title-subsection",
@@ -32,14 +26,8 @@ export type DisplayExtraLarge = 'display-extra-large';
 export type DisplayLarge = 'display-large';
 export type DisplayMedium = 'display-medium';
 export type DisplaySmall = 'display-small';
-/**
- * @deprecated Use {@link DisplayNumberSmall} instead.
- */
 export type DisplayNumber = 'display-number';
-export type DisplayNumberSmall = 'display-number-small';
-export type DisplayNumberMedium = 'display-number-medium';
-export type DisplayNumberLarge = 'display-number-large';
-export type DisplayTypes = DisplayExtraLarge | DisplayLarge | DisplayMedium | DisplaySmall | DisplayNumber | DisplayNumberSmall | DisplayNumberMedium | DisplayNumberLarge;
+export type DisplayTypes = DisplayExtraLarge | DisplayLarge | DisplayMedium | DisplaySmall | DisplayNumber;
 export type TitleScreen = 'title-screen';
 export type TitleSection = 'title-section';
 export type TitleSubsection = 'title-subsection';

package/build/types/common/PropsValues/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/typography.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB;;OAEG;IACH,mBAAmB,wBAAwB;IAC3C,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,aAAa,kBAAkB;IAC/B;;OAEG;IACH,cAAc,mBAAmB;IACjC,oBAAoB,yBAAyB;IAC7C,qBAAqB,0BAA0B;IAC/C,oBAAoB,yBAAyB;IAE7C,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;IAC/B,gBAAgB,qBAAqB;IACrC,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAE3B,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,iBAAiB,sBAAsB;IACvC,eAAe,oBAAoB;IAEnC,UAAU,eAAe;IACzB,YAAY,iBAAiB;CAC9B;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAC7C,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AAExD,MAAM,MAAM,YAAY,GACpB,iBAAiB,GACjB,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,aAAa,GACb,kBAAkB,GAClB,mBAAmB,GACnB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAE/F,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;AAElF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAEhD,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,YAAY,GACZ,eAAe,GACf,SAAS,GACT,UAAU,GACV,WAAW,GACX,aAAa,GACb,eAAe,GACf,SAAS,GACT,WAAW,GACX,SAAS,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/common/PropsValues/typography.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB;;OAEG;IACH,mBAAmB,wBAAwB;IAC3C,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IAEjC,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;IAC/B,gBAAgB,qBAAqB;IACrC,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAE3B,UAAU,eAAe;IACzB,YAAY,iBAAiB;IAC7B,iBAAiB,sBAAsB;IACvC,eAAe,oBAAoB;IAEnC,UAAU,eAAe;IACzB,YAAY,iBAAiB;CAC9B;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,YAAY,GACtB,iBAAiB,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,CAAC;AAElF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;AAC3C,MAAM,MAAM,eAAe,GAAG,kBAAkB,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC;AAEvC,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAE/F,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAClD,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,eAAe,CAAC;AAElF,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;AAEhD,MAAM,MAAM,eAAe,GACvB,WAAW,GACX,YAAY,GACZ,eAAe,GACf,SAAS,GACT,UAAU,GACV,WAAW,GACX,aAAa,GACb,eAAe,GACf,SAAS,GACT,WAAW,GACX,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-9b6c3f8",
+  "version": "0.0.0-experimental-c70eb7d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Accordion/Accordion.css

@@ -9,8 +9,7 @@
   background-color: transparent;
 }
 .np-accordion-item.np-accordion-item--dark .media-body,
-.np-accordion-item.np-accordion-item--dark .np-text-title-body,
-.np-accordion-item.np-accordion-item--dark .wds-text-title-body {
+.np-accordion-item.np-accordion-item--dark .np-text-title-body {
   color: #ffffff;
 }
 .np-accordion-item__content {

package/src/Accordion/Accordion.less

@@ -17,8 +17,7 @@
 
   &.np-accordion-item--dark {
     .media-body,
-    .np-text-title-body,
-    .wds-text-title-body {
+    .np-text-title-body {
       color: @color-navy-content-primary;
     }
   }

package/src/Body/Body.css

@@ -1,3 +1,3 @@
-.wds-text--pre-line {
+.np-text--pre-line {
   white-space: pre-line;
 }

package/src/Body/Body.less

@@ -1,3 +1,3 @@
-.wds-text--pre-line {
+.np-text--pre-line {
   white-space: pre-line;
 }

package/src/Body/Body.test.tsx

@@ -9,7 +9,7 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('DIV');
-    expect(copy).toHaveClass(`wds-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
   });
 
   it('enforces tag via `as` prop', () => {
@@ -17,7 +17,7 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('P');
-    expect(copy).toHaveClass(`wds-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
   });
 
   it('supports native HTML attrs', () => {
@@ -35,7 +35,7 @@ describe('Body', () => {
   it('renders newlines as line breaks when preserveNewlines is true', () => {
     render(<Body preserveNewlines>{'Line 1.\nLine 2'}</Body>);
     const copy = screen.getByText(/Line 1\.\s*Line 2/);
-    expect(copy).toHaveClass('wds-text--pre-line');
+    expect(copy).toHaveClass('np-text--pre-line');
     expect(copy).toHaveTextContent('Line 1.');
     expect(copy).toHaveTextContent('Line 2');
   });
@@ -47,6 +47,6 @@ describe('Body', () => {
     const copy = screen.getByText('Test');
     expect(copy).toBeInTheDocument();
     expect(copy.tagName).toBe('DIV');
-    expect(copy).toHaveClass(`wds-text-${Typography.BODY_DEFAULT}`);
+    expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
   });
 });

package/src/Body/Body.tsx

@@ -41,8 +41,8 @@ const Body = forwardRef(function Body(
       // See: https://fettblog.eu/typescript-react-generic-forward-refs/
       ref={reference}
       className={clsx(
-        `wds-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
-        preserveNewlines && 'wds-text--pre-line',
+        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
+        preserveNewlines && 'np-text--pre-line',
         className,
       )}
     />

package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx

@@ -134,8 +134,8 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
                 key={day}
                 className={
                   index > 4
-                    ? 'text-xs-center wds-text-body-default'
-                    : 'text-xs-center wds-text-body-default-bold'
+                    ? 'text-xs-center np-text-body-default'
+                    : 'text-xs-center np-text-body-default-bold'
                 }
               >
                 <span className="hidden-xs">

package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx

@@ -76,7 +76,7 @@ const MonthCalendarTable = ({
   })();
 
   return (
-    <table className="table table-condensed table-bordered tw-date-lookup-calendar wds-text-body-default-bold m-b-0">
+    <table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
       <thead className="sr-only">
         <tr>
           <th colSpan={COLS}>{placeholder}</th>

package/src/Calendar/TableLink/TableLink.tsx

@@ -96,7 +96,7 @@ const TableLink = ({
       aria-pressed={active}
       className={clsx(
         `wds-Calendar__option--${type}`,
-        `tw-date-lookup-${type}-option wds-text-body-default-bold`,
+        `tw-date-lookup-${type}-option np-text-body-default-bold`,
         { active: !!active },
         { today: !!today },
         { disabled: !!isUnavailable },

package/src/Chips/Chip/Chip.css

@@ -134,14 +134,12 @@
 .np-theme-personal .np-chip.np-chip--removable {
   position: relative;
 }
-.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
-.np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
+.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
   padding-inline-end: 24px;
   padding-inline-end: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
-  .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
+  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
     padding-inline-end: 48px;
     padding-inline-end: var(--size-48);
   }

package/src/Chips/Chip/Chip.less

@@ -137,8 +137,7 @@
     &.np-chip--removable {
       position: relative;
 
-      .np-text-body-default-bold,
-      .wds-text-body-default-bold {
+      .np-text-body-default-bold {
         padding-right: var(--size-24);
 
         @media (--screen-400-zoom) {