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

package/build/styles/css/neptune.css

@@ -10672,6 +10672,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 {
@@ -12323,9 +12338,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;
@@ -12413,6 +12428,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;
@@ -12424,9 +12443,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);
@@ -12463,7 +12482,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 {
@@ -13380,14 +13399,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,
@@ -13419,13 +13438,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 {
@@ -13447,7 +13466,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;
 }
@@ -13479,7 +13498,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;
@@ -14016,8 +14035,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);
 }
@@ -14027,6 +14047,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);
 }
@@ -16165,18 +16190,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,
@@ -16230,57 +16259,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;
@@ -16292,6 +16278,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 {
@@ -16336,20 +16323,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 {
@@ -16378,8 +16369,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);
@@ -16901,44 +16892,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);
 }
@@ -17039,6 +17004,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);
@@ -17111,6 +17081,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;
@@ -17205,10 +17180,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;
@@ -17303,46 +17280,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;
@@ -17374,6 +17320,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);
@@ -17518,14 +17469,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;
@@ -18089,6 +18040,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);
@@ -18136,6 +18092,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) {
@@ -18246,7 +18207,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) {
@@ -19661,7 +19623,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 {
@@ -19681,43 +19643,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);
@@ -19927,8 +19859,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 {
@@ -19941,7 +19873,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 {
@@ -19985,9 +19917,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);
@@ -19999,10 +19931,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;
@@ -20051,7 +19983,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 {
@@ -20295,7 +20227,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;
@@ -20456,9 +20388,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;
 }
@@ -20543,7 +20475,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 {
@@ -20552,7 +20484,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;
@@ -20606,7 +20538,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 {
@@ -20754,7 +20686,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 {
@@ -20775,7 +20707,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 {
@@ -20836,7 +20768,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;
@@ -20919,7 +20851,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,
@@ -20949,7 +20881,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,
@@ -21005,7 +20937,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,
@@ -21258,14 +21190,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,
@@ -21342,7 +21274,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;
@@ -21383,7 +21315,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) {
@@ -21822,7 +21754,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;
@@ -21921,7 +21853,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;
@@ -21971,7 +21903,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;
@@ -22331,7 +22263,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;
@@ -22346,6 +22277,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;
@@ -22531,10 +22467,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;
@@ -22543,41 +22482,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);
 }
@@ -22746,13 +22657,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) {
@@ -23259,8 +23170,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);
@@ -23343,7 +23254,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 {
@@ -23420,7 +23331,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 {
@@ -23433,7 +23344,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;
 }
@@ -23462,6 +23373,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;
 }
@@ -23498,7 +23413,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 {
@@ -23523,7 +23438,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;
@@ -23542,7 +23457,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,
@@ -23690,7 +23606,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 {
@@ -23781,14 +23697,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;
@@ -24044,7 +23960,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;
@@ -24055,7 +23971,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;
@@ -24095,12 +24011,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 {
@@ -24342,7 +24258,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 {
@@ -24356,7 +24272,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 {
@@ -24372,7 +24288,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;
@@ -24461,6 +24377,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;