@transferwise/components 0.0.0-experimental-f9a65ef → 0.0.0-experimental-7a793eb

package/build/main.css

@@ -11325,6 +11325,21 @@ a.text-inverse:focus {
 .bg-primary .np-text-title-group,
 .bg-info .np-text-title-group,
 .bg-accent .np-text-title-group,
+.bg-primary .wds-text-title-screen,
+.bg-info .wds-text-title-screen,
+.bg-accent .wds-text-title-screen,
+.bg-primary .wds-text-title-section,
+.bg-info .wds-text-title-section,
+.bg-accent .wds-text-title-section,
+.bg-primary .wds-text-title-subsection,
+.bg-info .wds-text-title-subsection,
+.bg-accent .wds-text-title-subsection,
+.bg-primary .wds-text-title-body,
+.bg-info .wds-text-title-body,
+.bg-accent .wds-text-title-body,
+.bg-primary .wds-text-title-group,
+.bg-info .wds-text-title-group,
+.bg-accent .wds-text-title-group,
 .bg-primary strong,
 .bg-info strong,
 .bg-accent strong {
@@ -12976,9 +12991,9 @@ input:focus ~ .alert-focus,
   padding-block: 5px;
   padding-inline: var(--size-8);
   font-size: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   color: #fff;
-  line-height: var(--line-height-control);
+  line-height: var(--wds-line-height-title-section);
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
@@ -13066,6 +13081,10 @@ a.badge:focus {
   block-size: 32px;
 }
 .btn {
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-large-bold);
+  line-height: var(--wds-line-height-body-large);
+  letter-spacing: var(--wds-letter-spacing-body-large);
   word-wrap: break-word;
   display: inline-block;
   margin-block-end: 0;
@@ -13077,9 +13096,9 @@ a.badge:focus {
   border: 1px solid transparent;
   white-space: nowrap;
   padding-block-end: 10px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
   padding: var(--btn-padding);
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: var(--line-height-24);
   border-radius: var(--btn-radius-base);
   min-block-size: var(--btn-height);
@@ -13116,7 +13135,7 @@ a.badge:focus {
   }
 }
 .btn .dropdown-menu > li > a {
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: var(--line-height-24);
 }
 .np-theme-personal .btn {
@@ -14033,14 +14052,14 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 .navbar .btn,
 .btn-group-sm > .btn {
   padding: var(--btn-sm-padding);
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: var(--line-height-22);
   border-radius: var(--btn-sm-radius-base);
   min-block-size: var(--btn-sm-height);
 }
 .btn-sm .dropdown-menu > li > a,
 .navbar .btn .dropdown-menu > li > a {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: var(--line-height-22);
 }
 .np-theme-personal .btn-sm,
@@ -14072,13 +14091,13 @@ fieldset[disabled] .btn-accent:not(.disabled):not(:disabled).btn-priority-3 {
 @media (max-width: 839px) {
   .navbar-collapse .btn {
     padding: var(--btn-padding);
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: var(--line-height-24);
     border-radius: var(--border-radius-base);
     min-block-size: var(--btn-height);
   }
   .navbar-collapse .btn .dropdown-menu > li > a {
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     line-height: var(--line-height-24);
   }
   .np-theme-personal .navbar-collapse .btn {
@@ -14100,7 +14119,7 @@ input[type="button"].btn-block {
   inline-size: 100%;
 }
 .btn-input {
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   padding-inline-start: 16px;
   padding-inline-end: 16px;
 }
@@ -14132,7 +14151,7 @@ input[type="button"].btn-block {
 }
 .btn-input.btn-lg.btn-addon,
 .btn-input.btn-lg.btn-input-inverse {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .btn-input-inverse {
   --color-content-primary: #ffffff;
@@ -14669,8 +14688,9 @@ a.btn {
 .btn-group .btn-input + .dropdown-menu > li > a {
   white-space: normal;
 }
-.btn-group .np-text-body-default,
 .btn-group .body-2,
+.btn-group .np-text-body-default,
+.btn-group .wds-text-body-default,
 .btn-group .small {
   color: var(--color-content-secondary);
 }
@@ -14680,6 +14700,11 @@ a.btn {
   }
 }
 .btn-group .secondary {
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   color: var(--color-content-secondary);
 }
@@ -16818,18 +16843,22 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn .btn {
+  --min-height: calc(2 * var(--size-24) + var(--wds-font-size-title-body) * var(--wds-line-height-title-body));
   min-block-size: var(--input-height-large);
   padding: var(--input-padding-large);
   border-radius: 3px;
-  font-family: var(--wds-font-family-regular);
   font-weight: var(--wds-font-weight-body-large-regular);
   font-size: var(--wds-font-size-body-large);
   line-height: var(--wds-line-height-body-large);
   letter-spacing: var(--wds-letter-spacing-body-large);
-  margin: 0;
-  color: var(--color-content-primary);
   word-wrap: break-word;
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-title-subsection);
+  font-size: var(--wds-font-size-title-subsection);
+  line-height: var(--wds-line-height-title-subsection);
+  letter-spacing: var(--wds-letter-spacing-title-subsection);
   margin-block-end: initial;
+  min-block-size: var(--min-height);
   margin-block-end: 0;
 }
 select.input-group-lg > .form-control,
@@ -16883,57 +16912,14 @@ 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: var(--size-8);
+select.input-group-lg > .form-control,
+select.input-group-lg > .input-group-addon,
+select.input-group-lg > .input-group-btn .btn {
+  min-block-size: var(--min-height);
 }
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon {
+  --min-height: calc(2 * var(--size-4) + var(--wds-font-size-body) * var(--wds-line-height-body));
   min-block-size: 32px;
   padding: var(--input-padding-small);
   border-radius: 3px;
@@ -16945,6 +16931,7 @@ select[multiple].input-group-lg > .input-group-btn .btn {
   line-height: var(--wds-line-height-body);
   letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
+  min-block-size: var(--min-height);
 }
 select.input-group-sm > .form-control,
 select.input-group-sm > .input-group-addon {
@@ -16989,20 +16976,24 @@ select[multiple].input-group-sm > .input-group-addon {
     }
   }
 }
+select.input-group-sm > .form-control,
+select.input-group-sm > .input-group-addon {
+  min-block-size: var(--min-height);
+}
 .input-group-sm > .form-control .icon,
 .input-group-sm > .input-group-addon .icon {
-  font-size: var(--font-size-20);
+  font-size: var(--wds-font-size-title-subsection);
 }
 .input-group-sm > .input-group-btn > .btn {
   block-size: 32px;
   padding: var(--btn-sm-padding);
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: var(--line-height-22);
   border-radius: var(--btn-sm-radius-base);
   min-block-size: var(--btn-sm-height);
 }
 .input-group-sm > .input-group-btn > .btn .dropdown-menu > li > a {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   line-height: var(--line-height-22);
 }
 .np-theme-personal .input-group-sm > .input-group-btn > .btn {
@@ -17031,8 +17022,8 @@ select[multiple].input-group-sm > .input-group-addon {
 }
 .input-group-addon {
   padding: var(--input-group-addon-padding);
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-body);
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-body-large);
   color: var(--color-content-secondary);
   text-align: center;
   background-color: var(--color-background-screen);
@@ -17554,44 +17545,18 @@ li > a > .currency-flag:first-child {
   --ring-outline-offset: 0;
 }
 .decision__title {
-  margin: 0;
-  color: var(--color-content-primary);
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .decision__title {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .decision__title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .decision__title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .decision__title {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .decision__title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.decision__title + p,
-.decision__title + ul:not(.list-unstyled),
-.decision__title + ol:not(.list-unstyled) {
-  margin-block-start: var(--size-8);
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-title-body);
+  font-size: var(--wds-font-size-title-body);
+  line-height: var(--wds-line-height-title-body);
+  letter-spacing: var(--wds-letter-spacing-title-body);
 }
 .decision__content {
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   margin-block-start: var(--size-4);
 }
@@ -17692,6 +17657,11 @@ li > a > .currency-flag:first-child {
   padding: 8px;
   margin: 0;
   list-style: none;
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   text-align: start;
   background-color: var(--color-background-screen);
@@ -17764,6 +17734,11 @@ li > a > .currency-flag:first-child {
   padding: var(--dropdown-link-padding);
   clear: both;
   border-radius: 3px;
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   color: var(--color-content-primary);
   white-space: nowrap;
@@ -17858,10 +17833,12 @@ li > a > .currency-flag:first-child {
 .dropdown-menu > .selected > a strong {
   color: inherit;
 }
-.dropdown-menu > .active > a .np-text-body-default,
-.dropdown-menu > .selected > a .np-text-body-default,
 .dropdown-menu > .active > a .small,
 .dropdown-menu > .selected > a .small,
+.dropdown-menu > .active > a .np-text-body-default,
+.dropdown-menu > .selected > a .np-text-body-default,
+.dropdown-menu > .active > a .wds-text-body-default,
+.dropdown-menu > .selected > a .wds-text-body-default,
 .dropdown-menu > .active > a .secondary,
 .dropdown-menu > .selected > a .secondary {
   color: #c9cbce;
@@ -17956,46 +17933,15 @@ li > a > .currency-flag:first-child {
   display: block;
   padding-block: 8px;
   padding-inline: 16px;
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body-large);
   color: var(--color-content-secondary);
   white-space: nowrap;
-  margin: 0;
-  color: var(--color-content-primary);
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .dropdown-header {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .dropdown-header {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .dropdown-header {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .dropdown-header {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .dropdown-header {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.dropdown-header + p,
-.dropdown-header + ul:not(.list-unstyled),
-.dropdown-header + ol:not(.list-unstyled) {
-  margin-block-start: var(--size-8);
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-title-group);
+  font-size: var(--wds-font-size-title-group);
+  line-height: var(--wds-line-height-title-group);
+  letter-spacing: var(--wds-letter-spacing-title-group);
 }
 .dropdown-backdrop {
   position: fixed;
@@ -18027,6 +17973,11 @@ li > a > .currency-flag:first-child {
 }
 .droppable {
   position: relative;
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-large-regular);
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-body-large);
+  letter-spacing: var(--wds-letter-spacing-body-large);
   word-wrap: break-word;
   text-align: center;
   border: 1px solid var(--color-interactive-secondary);
@@ -18171,14 +18122,14 @@ li > a > .currency-flag:first-child {
   z-index: 1;
 }
 .np-theme-personal .droppable-dropping-card {
-  background-color: #E1E4DF;
+  background-color: #e1e4df;
   color: var(--color-content-primary);
 }
 .np-theme-personal--dark .droppable-dropping-card {
   background-color: #404440;
 }
 .np-theme-personal--forest-green .droppable-dropping-card {
-  background-color: #455C35;
+  background-color: #455c35;
 }
 .droppable-dropping .droppable-dropping-card {
   display: flex;
@@ -18742,6 +18693,11 @@ li > a > .currency-flag:first-child {
 }
 .footer {
   background-color: var(--color-background-neutral);
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   padding-block-start: calc(var(--size-8) * 10);
   padding-block-end: calc(var(--size-8) * 10);
@@ -18789,6 +18745,11 @@ li > a > .currency-flag:first-child {
 .footer .footer-link,
 .footer .link-icon {
   color: var(--color-content-secondary);
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -18899,7 +18860,8 @@ li > a > .currency-flag:first-child {
 }
 .footer.footer-inverse .tiny,
 .footer.footer-inverse .body-3,
-.footer.footer-inverse .np-text-body-default {
+.footer.footer-inverse .np-text-body-default,
+.footer.footer-inverse .wds-text-body-default {
   color: #ffffff;
 }
 @media (max-width: 599.98px) {
@@ -20314,7 +20276,7 @@ li > a > .currency-flag:first-child {
   background-color: var(--color-background-screen);
   border-inline-start: 2px solid transparent;
   margin-block-start: 1px;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   transition: all ease 0.15s;
 }
 .panel-group .list-group-item {
@@ -20334,43 +20296,13 @@ li > a > .currency-flag:first-child {
 }
 .list-group-item-heading {
   margin-block-end: 0;
-  margin: 0;
-  word-wrap: break-word;
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-title-group);
+  font-size: var(--wds-font-size-title-group);
+  line-height: var(--wds-line-height-title-group);
+  letter-spacing: var(--wds-letter-spacing-title-group);
   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: var(--size-8);
-}
 .list-group-item-text {
   margin-block-end: 0;
   color: var(--color-content-secondary);
@@ -20580,8 +20512,8 @@ a.list-group-item-danger:hover {
   padding-block: 9px 7px;
   padding-inline: 24px;
   color: var(--color-content-primary);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body-large);
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
@@ -20594,7 +20526,7 @@ a.list-group-item-danger:hover {
 }
 .nav > .active > a {
   color: var(--color-content-accent);
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .nav > .active > a:hover,
 .nav > .active > a:focus {
@@ -20638,9 +20570,9 @@ a.list-group-item-danger:hover {
 }
 .nav-tabs > li > a {
   margin-inline-end: 2px;
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   border-block-end: 3px solid transparent;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .nav-tabs > .active > a {
   border-block-end: 3px solid var(--color-border-neutral);
@@ -20652,10 +20584,10 @@ a.list-group-item-danger:hover {
 }
 .nav-pills > li {
   float: inline-start;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .nav-pills > li > a {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .nav-stacked > li {
   float: none;
@@ -20704,7 +20636,7 @@ a.list-group-item-danger:hover {
 .nav-justified.nav-pills > li > a {
   padding-block: 0;
   padding-inline: var(--size-4);
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
 }
 @media (min-width: 840px) {
   .nav-justified-2-p-x {
@@ -20948,7 +20880,7 @@ a.list-group-item-danger:hover {
 }
 .navbar {
   position: relative;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   min-block-size: 56px;
   margin-block-end: 40px;
   border: 0 solid transparent;
@@ -21109,9 +21041,9 @@ a.list-group-item-danger:hover {
   background-image: none;
   border: 0;
   margin-inline-end: 12px;
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: var(--line-height-body);
+  font-size: var(--wds-font-size-body-large);
+  font-weight: var(--wds-font-weight-title-body);
+  line-height: var(--wds-line-height-body-large);
   margin-block-end: 8px;
   color: #ffffff;
 }
@@ -21196,7 +21128,7 @@ a.list-group-item-danger:hover {
 @media (min-width: 840px) {
   .navbar-nav > li > a.navbar-title-link,
   .navbar-nav > li > button.navbar-title-link {
-    font-size: var(--font-size-20);
+    font-size: var(--wds-font-size-title-body);
   }
 }
 .navbar-nav > li.divider {
@@ -21205,7 +21137,7 @@ a.list-group-item-danger:hover {
 @media (max-width: 839px) {
   .navbar-nav > li > a,
   .navbar-nav > li > button {
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
     padding-block: 9px 7px;
     padding-inline: 16px;
     -webkit-touch-callout: none;
@@ -21259,7 +21191,7 @@ a.list-group-item-danger:hover {
   }
   .navbar-nav > li > a {
     padding-block-end: 6px;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
   }
 }
 .navbar-form {
@@ -21407,7 +21339,7 @@ a.list-group-item-danger:hover {
   background-color: inherit;
 }
 .navbar-nav > li > .dropdown-menu > li > a {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 @media (max-width: 840px) {
   .navbar-nav > li > .dropdown-menu > li > a {
@@ -21428,7 +21360,7 @@ a.list-group-item-danger:hover {
 .navbar-nav > li > .dropdown-menu > .active > a {
   color: var(--color-content-accent-active);
   background-color: transparent;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-nav > li > .dropdown-menu > .active > a:hover,
 .navbar-nav > li > .dropdown-menu > .active > a:focus {
@@ -21489,7 +21421,7 @@ a.list-group-item-danger:hover {
 .navbar-btn {
   margin-block-start: 13px;
   margin-block-end: 11px;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-btn.btn-sm {
   margin-block-start: 13px;
@@ -21572,7 +21504,7 @@ a.list-group-item-danger:hover {
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > .dropdown-toggle {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > .dropdown-toggle,
@@ -21602,7 +21534,7 @@ a.list-group-item-danger:hover {
     background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a {
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--wds-font-weight-title-body);
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
@@ -21658,7 +21590,7 @@ a.list-group-item-danger:hover {
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > .dropdown-toggle {
   color: var(--color-content-accent-active);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > .dropdown-toggle,
@@ -21911,14 +21843,14 @@ a.list-group-item-danger:hover {
 }
 .navbar-title {
   float: inline-start;
-  font-size: var(--font-size-20);
-  line-height: var(--line-height-title);
+  font-size: var(--wds-font-size-title-body);
+  line-height: var(--wds-line-height-title-body);
   margin-block-start: 12px;
   margin-block-end: 12px;
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--wds-line-height-title-body);
 }
 .navbar-subtitle {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   margin-block-end: 8px;
 }
 .navbar-title,
@@ -21995,7 +21927,7 @@ a.list-group-item-danger:hover {
   }
 }
 .nav-toolbar h1 {
-  line-height: var(--line-height-title);
+  line-height: var(--wds-line-height-title-section);
 }
 .nav-toolbar .close {
   -webkit-text-decoration: none;
@@ -22036,7 +21968,7 @@ a.list-group-item-danger:hover {
 }
 @media (min-width: 600px) {
   .simple-nav .navbar-nav > li > a {
-    font-size: var(--font-size-16) !important;
+    font-size: var(--wds-font-size-body-large) !important;
   }
 }
 @media (min-width: 1160px) {
@@ -22475,7 +22407,7 @@ button.close {
 }
 .modal-title {
   margin: 0;
-  line-height: var(--line-height-title);
+  line-height: var(--wds-line-height-title-section);
 }
 .modal-body {
   position: relative;
@@ -22574,7 +22506,7 @@ button.close {
 .panel-title {
   margin-block-start: 0;
   margin-block-end: 0;
-  line-height: calc(var(--line-height-title) + 8px);
+  line-height: calc(var(--wds-line-height-title-section) + 8px);
 }
 .panel-title > a {
   -webkit-text-decoration: none;
@@ -22624,7 +22556,7 @@ button.close {
 }
 @media (min-width: 840px) {
   .panel-title {
-    line-height: calc(var(--line-height-title) * 2);
+    line-height: calc(var(--wds-line-height-title-section) * 2);
   }
   .panel-heading > .btn-sm {
     margin-block-start: 8px;
@@ -22984,7 +22916,6 @@ button.close {
   inline-size: 276px;
   padding-block: 18px;
   padding-inline: 24px;
-  font-family: var(--wds-font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
@@ -22999,6 +22930,11 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -23184,10 +23120,13 @@ button.close {
   margin-inline: 0;
 }
 .popover-title {
-  padding: 0;
   margin: 0;
-  color: var(--color-content-primary);
-  word-wrap: break-word;
+  padding: 0;
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-title-body);
+  font-size: var(--wds-font-size-title-body);
+  line-height: var(--wds-line-height-title-body);
+  letter-spacing: var(--wds-letter-spacing-title-body);
   background-color: var(--color-background-screen);
   border-block-end: 0;
   border-start-start-radius: 2px;
@@ -23196,41 +23135,13 @@ button.close {
   border-end-start-radius: 0;
   color: var(--color-content-primary) !important;
 }
-@supports (hyphenate-limit-chars: 1) {
-  .popover-title {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .popover-title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .popover-title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .popover-title {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .popover-title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.popover-title + p,
-.popover-title + ul:not(.list-unstyled),
-.popover-title + ol:not(.list-unstyled) {
-  margin-block-start: var(--size-8);
-}
 .popover-content {
   padding: 0;
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   color: var(--color-content-secondary);
 }
@@ -23399,13 +23310,13 @@ button.popover-close {
   }
 }
 .popover-promotion .popover-title {
-  font-size: var(--font-size-16);
-  line-height: var(--line-height-title);
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-font-size-body-large);
 }
 @media (min-width: 840px) {
   .popover-promotion .popover-title {
-    font-size: var(--font-size-20);
-    line-height: var(--line-height-title);
+    font-size: var(--wds-font-size-title-body);
+    line-height: var(--wds-font-size-title-body);
   }
 }
 @media (max-width: 320px) {
@@ -23912,8 +23823,8 @@ button.popover-close {
   inset-block-start: calc(-1 * var(--progress-bar-border-width));
   inset-inline-start: calc(-1 * var(--progress-bar-start-shift));
   block-size: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
-  font-size: var(--font-size-16);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--wds-font-size-body-large);
+  font-weight: var(--wds-font-weight-body-bold);
   color: #fff;
   text-align: end;
   background-color: var(--color-content-accent);
@@ -23996,7 +23907,7 @@ textarea:focus-visible {
   margin-inline-start: 25px;
   margin-block-start: 0;
   margin-block-end: 0;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -24073,7 +23984,7 @@ textarea:focus-visible {
 @media (min-width: 840px) {
   .sequence {
     padding-inline-end: 24px;
-    font-size: var(--font-size-16);
+    font-size: var(--wds-font-size-body-large);
   }
 }
 .sequence > li {
@@ -24086,7 +23997,7 @@ textarea:focus-visible {
   display: block;
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -24115,6 +24026,10 @@ textarea:focus-visible {
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
+.sequence > li .wds-text-title-screen,
+.sequence > li .wds-text-title-section,
+.sequence > li .wds-text-title-subsection,
+.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -24151,7 +24066,7 @@ textarea:focus-visible {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--color-content-primary);
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-body);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
@@ -24176,7 +24091,7 @@ textarea:focus-visible {
 .sequence a {
   -webkit-text-decoration: none;
   text-decoration: none;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
@@ -24195,7 +24110,8 @@ textarea:focus-visible {
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default {
+.sequence-inverse > .active .np-text-body-default,
+.sequence-inverse > .active .wds-text-body-default {
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
@@ -24343,7 +24259,7 @@ textarea:focus-visible {
   font-size: var(--font-size-12);
 }
 .sequence-icon .icon {
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
   line-height: 23px;
 }
 .sequence-inverse .sequence-icon {
@@ -24434,14 +24350,14 @@ textarea:focus-visible {
   block-size: 32px;
   line-height: 30px;
   margin-block-start: -6px;
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .sequence-icon-lg {
   inline-size: 40px;
   block-size: 40px;
   line-height: 38px;
   margin-block-start: -6px;
-  font-size: var(--font-size-16);
+  font-size: var(--wds-font-size-body-large);
 }
 .sequence-icon-lg .icon {
   font-size: 22px;
@@ -24697,7 +24613,7 @@ th {
 .table > tfoot > tr > td {
   padding-block: var(--size-24);
   padding-inline: var(--size-16);
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
@@ -24708,7 +24624,7 @@ th {
 .table > .tfoot > ol > li {
   padding-block: var(--size-24);
   padding-inline: var(--size-16);
-  line-height: var(--line-height-body);
+  line-height: var(--wds-line-height-body-large);
   vertical-align: top;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
@@ -24748,12 +24664,12 @@ th {
 .table > tfoot,
 .table > .thead,
 .table > .tfoot {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
-  font-size: var(--font-size-14);
+  font-size: var(--wds-font-size-body);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
@@ -24995,7 +24911,7 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--wds-font-weight-title-body);
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -25009,7 +24925,7 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
-    font-size: var(--font-size-14);
+    font-size: var(--wds-font-size-body);
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -25025,7 +24941,7 @@ table col[class*="col-"] {
     border-radius: 3px;
     margin-block-end: var(--size-24);
     padding-block: var(--size-24) 0;
-    padding-inline: var(--line-height-body);
+    padding-inline: var(--wds-line-height-body-large);
   }
   .table > .tbody > dl > dd {
     padding: 0;
@@ -25114,6 +25030,11 @@ table col[class*="col-"] {
   padding-inline: 5px;
 }
 .tooltip-inner {
+  font-family: var(--wds-font-family-regular);
+  font-weight: var(--wds-font-weight-body-regular);
+  font-size: var(--wds-font-size-body);
+  line-height: var(--wds-line-height-body);
+  letter-spacing: var(--wds-letter-spacing-body);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;