@transferwise/components 0.0.0-experimental-74e7404 → 0.0.0-experimental-4560f77

package/src/styles/less/input-groups.css

@@ -1,7 +1,106 @@
 .btn-sm {
   block-size: 32px;
 }
-form {
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn .btn {
+  margin-block-end: initial;
+}
+.input-sm,
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .input-sm,
+  .input-group-sm > .form-control,
+  .input-group-sm > .input-group-addon {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .input-sm,
+    .input-group-sm > .form-control,
+    .input-group-sm > .input-group-addon {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .input-sm,
+    .input-group-sm > .form-control,
+    .input-group-sm > .input-group-addon {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .input-sm,
+  .input-group-sm > .form-control,
+  .input-group-sm > .input-group-addon {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .input-sm,
+    .input-group-sm > .form-control,
+    .input-group-sm > .input-group-addon {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.form-control,
+.input-lg,
+.form-control-placeholder,
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn .btn {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .form-control,
+  .input-lg,
+  .form-control-placeholder,
+  .input-group-lg > .form-control,
+  .input-group-lg > .input-group-addon,
+  .input-group-lg > .input-group-btn .btn {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .form-control,
+    .input-lg,
+    .form-control-placeholder,
+    .input-group-lg > .form-control,
+    .input-group-lg > .input-group-addon,
+    .input-group-lg > .input-group-btn .btn {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .form-control,
+    .input-lg,
+    .form-control-placeholder,
+    .input-group-lg > .form-control,
+    .input-group-lg > .input-group-addon,
+    .input-group-lg > .input-group-btn .btn {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .form-control,
+  .input-lg,
+  .form-control-placeholder,
+  .input-group-lg > .form-control,
+  .input-group-lg > .input-group-addon,
+  .input-group-lg > .input-group-btn .btn {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .form-control,
+    .input-lg,
+    .form-control-placeholder,
+    .input-group-lg > .form-control,
+    .input-group-lg > .input-group-addon,
+    .input-group-lg > .input-group-btn .btn {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}form {
   margin-block-end: 0;
 }
 fieldset {
@@ -29,31 +128,31 @@ label,
   font-size: var(--font-size-14);
   line-height: 20px;
 }
-input[type='search'] {
+input[type="search"] {
   box-sizing: border-box;
 }
-input[type='number'] {
+input[type="number"] {
   -webkit-appearance: textfield;
      -moz-appearance: textfield;
           appearance: textfield;
 }
-input[type='number']::-webkit-outer-spin-button,
-input[type='number']::-webkit-inner-spin-button {
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
           appearance: none;
   margin: 0;
 }
-input[type='radio'],
-input[type='checkbox'] {
+input[type="radio"],
+input[type="checkbox"] {
   margin-block: 4px 0;
   margin-inline: 0;
   margin-block-start: 1px;
   line-height: normal;
 }
-input[type='file'] {
+input[type="file"] {
   display: block;
 }
-input[type='range'] {
+input[type="range"] {
   display: block;
   inline-size: 100%;
 }
@@ -61,9 +160,9 @@ select[multiple],
 select[size] {
   block-size: auto;
 }
-input[type='file']:focus,
-input[type='radio']:focus,
-input[type='checkbox']:focus {
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
@@ -88,15 +187,11 @@ output {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
+  font-size: 1rem;
+  font-size: var(--font-size-16);
   min-block-size: var(--input-height-base);
   padding: var(--input-padding);
   border-radius: 3px;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
   background-clip: padding-box;
 }
@@ -176,36 +271,36 @@ textarea.form-control {
 .np-theme-personal .form-control:focus {
   border-color: var(--color-interactive-primary);
 }
-input[type='search'] {
+input[type="search"] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
 }
 @media screen and (min-device-pixel-ratio: 0) {
-  input[type='date'],
-  input[type='time'],
-  input[type='datetime-local'],
-  input[type='month'] {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"] {
     line-height: var(--input-height-base);
   }
-  input[type='date'].input-sm,
-  input[type='time'].input-sm,
-  input[type='datetime-local'].input-sm,
-  input[type='month'].input-sm,
-  .input-group-sm input[type='date'],
-  .input-group-sm input[type='time'],
-  .input-group-sm input[type='datetime-local'],
-  .input-group-sm input[type='month'] {
+  input[type="date"].input-sm,
+  input[type="time"].input-sm,
+  input[type="datetime-local"].input-sm,
+  input[type="month"].input-sm,
+  .input-group-sm input[type="date"],
+  .input-group-sm input[type="time"],
+  .input-group-sm input[type="datetime-local"],
+  .input-group-sm input[type="month"] {
     line-height: var(--input-height-small);
   }
-  input[type='date'].input-lg,
-  input[type='time'].input-lg,
-  input[type='datetime-local'].input-lg,
-  input[type='month'].input-lg,
-  .input-group-lg input[type='date'],
-  .input-group-lg input[type='time'],
-  .input-group-lg input[type='datetime-local'],
-  .input-group-lg input[type='month'] {
+  input[type="date"].input-lg,
+  input[type="time"].input-lg,
+  input[type="datetime-local"].input-lg,
+  input[type="month"].input-lg,
+  .input-group-lg input[type="date"],
+  .input-group-lg input[type="time"],
+  .input-group-lg input[type="datetime-local"],
+  .input-group-lg input[type="month"] {
     line-height: calc(var(--input-height-large) - 1.5);
     line-height: calc(var(--input-height-large) - var(--line-height-body));
   }
@@ -221,7 +316,7 @@ input[type='search'] {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.row-equal-height > [class*='col-'] > .form-group {
+.row-equal-height > [class*="col-"] > .form-group {
   inline-size: 100%;
 }
 .radio,
@@ -240,10 +335,10 @@ input[type='search'] {
 .checkbox + .checkbox {
   margin-block-start: 12px;
 }
-.radio input[type='radio'],
-.radio-inline input[type='radio'],
-.checkbox input[type='checkbox'],
-.checkbox-inline input[type='checkbox'] {
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
   position: absolute;
   margin-inline-start: -20px;
   margin-block-start: 4px \9;
@@ -269,12 +364,12 @@ fieldset[disabled] .checkbox-inline {
   margin-block-start: 0;
   margin-inline-start: 10px;
 }
-input[type='radio'][disabled],
-input[type='checkbox'][disabled],
-input[type='radio'].disabled,
-input[type='checkbox'].disabled,
-fieldset[disabled] input[type='radio'],
-fieldset[disabled] input[type='checkbox'] {
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"].disabled,
+input[type="checkbox"].disabled,
+fieldset[disabled] input[type="radio"],
+fieldset[disabled] input[type="checkbox"] {
   cursor: not-allowed;
 }
 input[type="password"]::-ms-reveal {
@@ -310,12 +405,6 @@ fieldset[disabled] .checkbox label {
   border-radius: 3px;
   font-size: 14px;
   line-height: 24px;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 select.input-sm {
@@ -387,12 +476,6 @@ select[multiple].input-sm {
   min-block-size: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
 }
 select.input-lg {
@@ -1375,8 +1458,8 @@ select[multiple].input-lg {
   .form-inline .checkbox label {
     padding-inline-start: 0;
   }
-  .form-inline .radio input[type='radio'],
-  .form-inline .checkbox input[type='checkbox'] {
+  .form-inline .radio input[type="radio"],
+  .form-inline .checkbox input[type="checkbox"] {
     position: relative;
     margin-inline-start: 0;
   }
@@ -1804,42 +1887,42 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   margin-inline-start: -6px;
   margin-inline-end: -6px;
 }
-.form-group .row [class*='col-'] {
+.form-group .row [class*="col-"] {
   padding-inline-start: 6px;
   padding-inline-end: 6px;
 }
 @media (max-width: 599.98px) {
-  .form-group .row [class*='col-sm-'] {
+  .form-group .row [class*="col-sm-"] {
     margin-block-end: 0;
   }
-  .form-group .row [class*='col-sm-'] .btn-input {
+  .form-group .row [class*="col-sm-"] .btn-input {
     margin-block-end: 12px;
   }
 }
 @media (max-width: 839.98px) {
-  .form-group .row [class*='col-md-'] {
+  .form-group .row [class*="col-md-"] {
     margin-block-end: 0;
   }
-  .form-group .row [class*='col-md-'] .form-control,
-  .form-group .row [class*='col-md-'] .btn-input {
+  .form-group .row [class*="col-md-"] .form-control,
+  .form-group .row [class*="col-md-"] .btn-input {
     margin-block-end: 12px;
   }
 }
 @media (max-width: 1159.98px) {
-  .form-group .row [class*='col-lg-'] {
+  .form-group .row [class*="col-lg-"] {
     margin-block-end: 0;
   }
-  .form-group .row [class*='col-lg-'] .form-control,
-  .form-group .row [class*='col-lg-'] .btn-input {
+  .form-group .row [class*="col-lg-"] .form-control,
+  .form-group .row [class*="col-lg-"] .btn-input {
     margin-block-end: 12px;
   }
 }
 @media (max-width: 1159.98px) {
-  .form-group .row [class*='col-xl-'] {
+  .form-group .row [class*="col-xl-"] {
     margin-block-end: 0;
   }
-  .form-group .row [class*='col-xl-'] .form-control,
-  .form-group .row [class*='col-xl-'] .btn-input {
+  .form-group .row [class*="col-xl-"] .form-control,
+  .form-group .row [class*="col-xl-"] .btn-input {
     margin-block-end: 12px;
   }
 }
@@ -1922,7 +2005,11 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .checkbox.checkbox-lg > label .np-text-body-default,
 .radio.checkbox-lg > label .np-text-body-default,
 .checkbox.radio-lg > label .np-text-body-default,
-.radio.radio-lg > label .np-text-body-default {
+.radio.radio-lg > label .np-text-body-default,
+.checkbox.checkbox-lg > label .wds-text-body-default,
+.radio.checkbox-lg > label .wds-text-body-default,
+.checkbox.radio-lg > label .wds-text-body-default,
+.radio.radio-lg > label .wds-text-body-default {
   display: block;
   color: #5d7079;
   color: var(--color-content-secondary);
@@ -2019,12 +2106,6 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .form-control-placeholder {
   text-overflow: ellipsis;
   overflow: hidden;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
   word-wrap: break-word;
   display: block;
   inline-size: 100%;
@@ -2151,23 +2232,23 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .has-error .checkbox:hover .tw-checkbox-button,
 .np-theme-personal .has-error .radio:not(.disabled):hover .tw-radio-button,
 .np-theme-personal .has-error .tw-checkbox-button:not(.disabled):not(:disabled):hover,
-.np-theme-personal .has-error input[type=checkbox]:hover + .tw-checkbox-button,
-.np-theme-personal .has-error input[type=radio]:not(.disabled):not(:disabled):hover + .tw-radio-button,
-.np-theme-personal .has-error input[type=checkbox]:not(.disabled):not(:disabled):hover + .tw-checkbox-button {
+.np-theme-personal .has-error input[type="checkbox"]:hover + .tw-checkbox-button,
+.np-theme-personal .has-error input[type="radio"]:not(.disabled):not(:disabled):hover + .tw-radio-button,
+.np-theme-personal .has-error input[type="checkbox"]:not(.disabled):not(:disabled):hover + .tw-checkbox-button {
   box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-hover);
 }
 .np-theme-personal .has-error .tw-checkbox-button.checked,
 .np-theme-personal .has-error .tw-checkbox-button:checked,
-.np-theme-personal .has-error input[type=checkbox]:checked + .tw-checkbox-button,
+.np-theme-personal .has-error input[type="checkbox"]:checked + .tw-checkbox-button,
 .np-theme-personal .has-error .tw-checkbox-button.checked:hover,
 .np-theme-personal .has-error .tw-checkbox-button:checked:hover,
-.np-theme-personal .has-error input[type=checkbox]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
+.np-theme-personal .has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button {
   box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
   background: var(--color-sentiment-negative);
 }
-.np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):active input[type=checkbox] + .tw-checkbox-button,
-.np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):focus-visible input[type=checkbox] + .tw-checkbox-button,
-.np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) input[type=checkbox] + .tw-checkbox-button {
+.np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):active input[type="checkbox"] + .tw-checkbox-button,
+.np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):focus-visible input[type="checkbox"] + .tw-checkbox-button,
+.np-theme-personal .has-error .checkbox > label:not(.disabled):not(:disabled):has(:focus-visible) input[type="checkbox"] + .tw-checkbox-button {
   box-shadow: inset 0 0 0 2px var(--color-sentiment-negative-active);
 }
 .np-theme-personal .tw-radio-button,
@@ -2270,26 +2351,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   min-block-size: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
-  margin: 0;
-  color: #37517e;
-  color: var(--color-content-primary);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
-  font-size: 1.375rem;
-  font-size: var(--font-size-22);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.018em;
-  line-height: 125%;
   margin-block-end: 0;
 }
 select.input-group-lg > .form-control,
@@ -2343,56 +2406,6 @@ select[multiple].input-group-lg > .input-group-btn .btn {
     }
   }
 }
-@supports (hyphenate-limit-chars: 1) {
-  .input-group-lg > .form-control,
-  .input-group-lg > .input-group-addon,
-  .input-group-lg > .input-group-btn .btn {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .input-group-lg > .form-control,
-    .input-group-lg > .input-group-addon,
-    .input-group-lg > .input-group-btn .btn {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .input-group-lg > .form-control,
-    .input-group-lg > .input-group-addon,
-    .input-group-lg > .input-group-btn .btn {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .input-group-lg > .form-control,
-  .input-group-lg > .input-group-addon,
-  .input-group-lg > .input-group-btn .btn {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .input-group-lg > .form-control,
-    .input-group-lg > .input-group-addon,
-    .input-group-lg > .input-group-btn .btn {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.input-group-lg > .form-control + p,
-.input-group-lg > .input-group-addon + p,
-.input-group-lg > .input-group-btn .btn + p,
-.input-group-lg > .form-control + ul:not(.list-unstyled),
-.input-group-lg > .input-group-addon + ul:not(.list-unstyled),
-.input-group-lg > .input-group-btn .btn + ul:not(.list-unstyled),
-.input-group-lg > .form-control + ol:not(.list-unstyled),
-.input-group-lg > .input-group-addon + ol:not(.list-unstyled),
-.input-group-lg > .input-group-btn .btn + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
-}
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon {
   min-block-size: 32px;
@@ -2400,12 +2413,6 @@ select[multiple].input-group-lg > .input-group-btn .btn {
   border-radius: 3px;
   font-size: 14px;
   line-height: 24px;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 select.input-group-sm > .form-control,

package/src/styles/less/input-groups.less

@@ -64,7 +64,7 @@
   > .input-group-btn .btn {
     .input-lg();
 
-    .np-text-title-subsection();
+    .wds-text-title-subsection();
 
     margin-bottom: 0;
   }
@@ -246,7 +246,7 @@
 }
 
 // inputs focus and hover states (not disabled)
-.input-group:hover:not(.disabled,:disabled) {
+.input-group:hover:not(.disabled, :disabled) {
   .form-control,
   .input-group-addon,
   .btn-input,
@@ -255,11 +255,11 @@
   }
 }
 
-.form-control:hover:not(.disabled,:disabled) {
+.form-control:hover:not(.disabled, :disabled) {
   border-color: var(--color-interactive-secondary-hover);
 }
 
-.input-group:focus-within:not(.disabled,:disabled) {
+.input-group:focus-within:not(.disabled, :disabled) {
   .form-control,
   .input-group-addon,
   .btn-input,
@@ -272,7 +272,7 @@
   }
 }
 
-.form-control:focus-within:not(.disabled,:disabled) {
+.form-control:focus-within:not(.disabled, :disabled) {
   border-color: var(--color-interactive-accent);
 
   .np-theme-personal & {

package/src/styles/less/list-group.css

@@ -38,54 +38,9 @@
 }
 .list-group-item-heading {
   margin-block-end: 0;
-  margin: 0;
-  line-height: 1.2;
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
-  word-wrap: break-word;
-  font-weight: 500;
-  font-weight: var(--font-weight-medium);
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  letter-spacing: -0.006em;
-  line-height: 140%;
   color: #37517e;
   color: var(--color-content-primary);
 }
-@supports (hyphenate-limit-chars: 1) {
-  .list-group-item-heading {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .list-group-item-heading {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .list-group-item-heading {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .list-group-item-heading {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .list-group-item-heading {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.list-group-item-heading + p,
-.list-group-item-heading + ul:not(.list-unstyled),
-.list-group-item-heading + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
-}
 .list-group-item-text {
   margin-block-end: 0;
   color: #5d7079;

package/src/styles/less/list-group.less

@@ -61,7 +61,7 @@
 
 .list-group-item-heading {
   margin-bottom: 0;
-  .np-text-title-group;
+  .wds-text-title-group;
 
   color: var(--color-content-primary);
 }
@@ -200,8 +200,12 @@ a.list-group-item {
 }
 
 @keyframes listSlideOver {
-  0% { transform: translateX(100vw); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(100vw);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
 @media (max-width: @screen-sm-max) {
@@ -250,7 +254,6 @@ a.list-group-item {
     }
 
     .list-group-item.active .collapse .well {
-
       // Annoying but makes sure the last content is visible in iOS safari
 
       padding-bottom: 72px;

package/src/styles/less/mixins/_text-emphasis.less

@@ -22,6 +22,9 @@
   &.np-text-title-screen,
   &.np-text-title-section,
   &.np-text-title-subsection,
+  &.wds-text-title-screen,
+  &.wds-text-title-section,
+  &.wds-text-title-subsection,
   h1,
   h2,
   h3,
@@ -33,7 +36,10 @@
   .title-3,
   .np-text-title-screen,
   .np-text-title-section,
-  .np-text-title-subsection {
+  .np-text-title-subsection,
+  .wds-text-title-screen,
+  .wds-text-title-section,
+  .wds-text-title-subsection {
     color: @large-color !important;
   }
 }