@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

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

@@ -1,144 +1,7 @@
 .btn-sm {
   block-size: 32px;
 }
-.input-group-lg > .form-control,
-.input-group-lg > .input-group-addon,
-.input-group-lg > .input-group-btn .btn {
-  margin: 0;color: var(--color-content-primary);word-wrap: break-word;
-}
-@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,
-.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 {
+form {
   margin-block-end: 0;
 }
 fieldset {
@@ -154,40 +17,43 @@ legend {
 label {
   display: inline-block;
   max-inline-size: 100%;
+  margin-block-end: 4px;
   margin-block-end: var(--size-4);
 }
 label,
 .secondary {
+  color: #5d7079;
   color: var(--color-content-secondary);
   transition: color ease-in-out 0.15s;
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  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%;
 }
@@ -195,31 +61,42 @@ 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);
 }
 output {
   display: block;
   padding-block-start: 9px;
-  font-size: var(--wds-font-size-body-large);
-  line-height: var(--wds-line-height-title-section);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 1.2;
+  line-height: var(--line-height-control);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .form-control {
   display: block;
   inline-size: 100%;
+  color: #37517e;
   color: var(--color-content-primary);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-image: none;
+  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   transition: border-color ease-in-out 0.15s;
-  font-size: var(--wds-font-size-body-large);
   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;
 }
@@ -259,13 +136,16 @@ select[multiple].form-control {
   }
 }
 .form-control:not(.disabled):not(:disabled):focus {
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
   outline: 0;
 }
 .form-control::-moz-placeholder {
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 .form-control::placeholder {
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 textarea.form-control {
@@ -282,6 +162,7 @@ textarea.form-control {
   margin-block-start: 8px;
 }
 .form-control:focus {
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .form-control:not(.disabled):not(:disabled):focus {
@@ -289,42 +170,44 @@ textarea.form-control {
   outline: 0;
 }
 .np-theme-personal .form-control:hover {
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .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"] {
-    line-height: calc(var(--input-height-large) - var(--wds-line-height-body-large));
+  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));
   }
 }
 .form-group {
@@ -335,9 +218,10 @@ input[type="search"] {
 }
 .form-group:focus-within .control-label,
 .form-group:focus-within > label {
+  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,
@@ -356,10 +240,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;
@@ -385,12 +269,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 {
@@ -404,9 +288,13 @@ fieldset[disabled] .checkbox label {
 }
 .form-control-static {
   margin-block-end: 0;
-  min-block-size: calc(var(--wds-line-height-title-section) * 2);
+  min-block-size: calc(1.2 * 2);
+  min-block-size: calc(var(--line-height-control) * 2);
+  color: #5d7079;
   color: var(--color-content-secondary);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
+  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: 3px;
   padding: var(--input-padding);
@@ -422,6 +310,12 @@ 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 {
@@ -463,7 +357,8 @@ select[multiple].input-sm {
 .navbar .form-control {
   block-size: 32px;
   padding: var(--input-padding-small);
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
   line-height: 24px;
   border-radius: 3px;
 }
@@ -481,15 +376,23 @@ select[multiple].input-sm {
 .form-group-sm .form-control-static,
 .navbar .form-control-static {
   block-size: 32px;
-  min-block-size: calc(var(--wds-line-height-title-section) + 14px);
+  min-block-size: calc(1.2 + 14px);
+  min-block-size: calc(var(--line-height-control) + 14px);
   padding: var(--input-padding-small);
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
   line-height: 24px;
 }
 .input-lg {
   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 {
@@ -534,6 +437,7 @@ select[multiple].input-lg {
 .form-group-lg .input-group-lg > .form-control,
 .form-group-lg .input-group-lg > .input-group-addon {
   block-size: var(--input-height-large);
+  padding-block: calc(4px + 24px) 4px;
   padding-block: calc(4px + var(--size-24)) 4px;
   padding-inline: 12px;
   font-size: 22px;
@@ -548,7 +452,8 @@ select[multiple].input-lg {
 }
 .form-group-lg .form-control-static {
   block-size: var(--input-height-large);
-  min-block-size: calc(var(--wds-line-height-title-section) + 22px);
+  min-block-size: calc(1.2 + 22px);
+  min-block-size: calc(var(--line-height-control) + 22px);
   padding: var(--input-padding-large);
   font-size: 22px;
   line-height: 32px;
@@ -591,14 +496,17 @@ select[multiple].input-lg {
 }
 .focus .control-label,
 .has-focus .control-label {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .focus .input-group-addon,
 .has-focus .input-group-addon {
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .focus .input-group-addon:active,
 .has-focus .input-group-addon:active {
+  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
 }
 .help-block,
@@ -607,6 +515,7 @@ select[multiple].input-lg {
   margin-block-end: 4px;
   border-width: 0;
   border-style: solid;
+  border-radius: 10px;
   border-radius: var(--radius-small);
   padding-block: 4px 3px;
   padding-inline: 16px;
@@ -617,8 +526,11 @@ select[multiple].input-lg {
   color: inherit;
 }
 .help-block {
+  color: #5d7079;
   color: var(--color-content-secondary);
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   display: block;
   position: relative;
@@ -656,9 +568,11 @@ select[multiple].input-lg {
 }
 .focus .alert,
 .has-focus .alert {
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .has-success {
+  border-color: #2ead4b !important;
   border-color: var(--color-interactive-positive) !important;
 }
 .has-success .control-label,
@@ -675,7 +589,9 @@ select[multiple].input-lg {
 .has-success .radio-inline label,
 .has-success .checkbox-inline label,
 .has-success .input-group-addon {
+  color: #008026 !important;
   color: var(--color-content-positive) !important;
+  border-color: #2ead4b !important;
   border-color: var(--color-interactive-positive) !important;
 }
 .has-success .form-control,
@@ -684,6 +600,7 @@ select[multiple].input-lg {
 .has-success .btn-input:not(.disabled):not(:disabled):hover,
 .has-success .input-group-addon,
 .has-success .alert {
+  border-color: #2ead4b !important;
   border-color: var(--color-interactive-positive) !important;
 }
 .has-success:active .form-control,
@@ -707,26 +624,32 @@ select[multiple].input-lg {
 .has-success:active .alert,
 .has-success:focus .alert,
 .has-success:focus-within .alert {
+  border-color: #069939 !important;
   border-color: var(--color-interactive-positive-hover) !important;
 }
 .has-success:not(.disabled):not(:disabled):hover.radio label,
 .has-success:not(.disabled):not(:disabled):hover.checkbox label,
 .has-success:not(.disabled):not(:disabled):hover .btn-input,
 .has-success:not(.disabled):not(:disabled):hover .alert {
+  border-color: #069939 !important;
   border-color: var(--color-interactive-positive-hover) !important;
 }
 .has-success .form-control-feedback {
+  color: #008026;
   color: var(--color-content-positive);
 }
 .has-success .radio > label:not(.disabled):not(:disabled),
 .has-success.checkbox > label:not(.disabled):not(:disabled) {
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .has-success .radio > label:not(.disabled):not(:disabled):hover,
 .has-success.checkbox > label:not(.disabled):not(:disabled):hover,
 .has-success .radio > label:focus-within,
 .has-success.checkbox > label:focus-within {
+  border-color: #069939 !important;
   border-color: var(--color-interactive-positive-hover) !important;
 }
 .has-success .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -737,12 +660,14 @@ select[multiple].input-lg {
 .has-success.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
 .has-success .radio > label:focus-within .tw-radio-button,
 .has-success.checkbox > label:focus-within .tw-radio-button {
+  border-color: #069939 !important;
   border-color: var(--color-interactive-positive-hover) !important;
 }
 .has-success .radio .tw-checkbox-button,
 .has-success.checkbox .tw-checkbox-button,
 .has-success .radio .tw-radio-button,
 .has-success.checkbox .tw-radio-button {
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
 }
 .np-theme-personal .has-success {
@@ -762,6 +687,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-success .radio-inline label,
 .np-theme-personal .has-success .checkbox-inline label,
 .np-theme-personal .has-success .input-group-addon {
+  color: #37517e !important;
   color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-positive) !important;
 }
@@ -803,11 +729,13 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-positive) !important;
 }
 .np-theme-personal .has-success .form-control-feedback {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-success.checkbox > label:not(.disabled):not(:disabled) {
   border-color: var(--color-sentiment-positive);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal .has-success .radio > label:not(.disabled):not(:disabled):hover,
@@ -833,6 +761,7 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-positive);
 }
 .has-info {
+  border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
 }
 .has-info .control-label,
@@ -849,7 +778,9 @@ select[multiple].input-lg {
 .has-info .radio-inline label,
 .has-info .checkbox-inline label,
 .has-info .input-group-addon {
+  color: #0097c7 !important;
   color: var(--color-content-accent) !important;
+  border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
 }
 .has-info .form-control,
@@ -858,6 +789,7 @@ select[multiple].input-lg {
 .has-info .btn-input:not(.disabled):not(:disabled):hover,
 .has-info .input-group-addon,
 .has-info .alert {
+  border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
 }
 .has-info:active .form-control,
@@ -881,26 +813,32 @@ select[multiple].input-lg {
 .has-info:active .alert,
 .has-info:focus .alert,
 .has-info:focus-within .alert {
+  border-color: #008fc9 !important;
   border-color: var(--color-interactive-accent-hover) !important;
 }
 .has-info:not(.disabled):not(:disabled):hover.radio label,
 .has-info:not(.disabled):not(:disabled):hover.checkbox label,
 .has-info:not(.disabled):not(:disabled):hover .btn-input,
 .has-info:not(.disabled):not(:disabled):hover .alert {
+  border-color: #008fc9 !important;
   border-color: var(--color-interactive-accent-hover) !important;
 }
 .has-info .form-control-feedback {
+  color: #0097c7;
   color: var(--color-content-accent);
 }
 .has-info .radio > label:not(.disabled):not(:disabled),
 .has-info.checkbox > label:not(.disabled):not(:disabled) {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .has-info .radio > label:not(.disabled):not(:disabled):hover,
 .has-info.checkbox > label:not(.disabled):not(:disabled):hover,
 .has-info .radio > label:focus-within,
 .has-info.checkbox > label:focus-within {
+  border-color: #008fc9 !important;
   border-color: var(--color-interactive-accent-hover) !important;
 }
 .has-info .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -911,12 +849,14 @@ select[multiple].input-lg {
 .has-info.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
 .has-info .radio > label:focus-within .tw-radio-button,
 .has-info.checkbox > label:focus-within .tw-radio-button {
+  border-color: #008fc9 !important;
   border-color: var(--color-interactive-accent-hover) !important;
 }
 .has-info .radio .tw-checkbox-button,
 .has-info.checkbox .tw-checkbox-button,
 .has-info .radio .tw-radio-button,
 .has-info.checkbox .tw-radio-button {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .has-info {
@@ -936,6 +876,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-info .radio-inline label,
 .np-theme-personal .has-info .checkbox-inline label,
 .np-theme-personal .has-info .input-group-addon {
+  color: #37517e !important;
   color: var(--color-content-primary) !important;
   border-color: transparent !important;
 }
@@ -977,11 +918,13 @@ select[multiple].input-lg {
   border-color: transparent !important;
 }
 .np-theme-personal .has-info .form-control-feedback {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal .has-info .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-info.checkbox > label:not(.disabled):not(:disabled) {
   border-color: transparent;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal .has-info .radio > label:not(.disabled):not(:disabled):hover,
@@ -1007,6 +950,7 @@ select[multiple].input-lg {
   border-color: transparent;
 }
 .has-warning {
+  border-color: #df8700 !important;
   border-color: var(--color-interactive-warning) !important;
 }
 .has-warning .control-label,
@@ -1023,7 +967,9 @@ select[multiple].input-lg {
 .has-warning .radio-inline label,
 .has-warning .checkbox-inline label,
 .has-warning .input-group-addon {
+  color: #9a6500 !important;
   color: var(--color-content-warning) !important;
+  border-color: #df8700 !important;
   border-color: var(--color-interactive-warning) !important;
 }
 .has-warning .form-control,
@@ -1032,6 +978,7 @@ select[multiple].input-lg {
 .has-warning .btn-input:not(.disabled):not(:disabled):hover,
 .has-warning .input-group-addon,
 .has-warning .alert {
+  border-color: #df8700 !important;
   border-color: var(--color-interactive-warning) !important;
 }
 .has-warning:active .form-control,
@@ -1055,26 +1002,32 @@ select[multiple].input-lg {
 .has-warning:active .alert,
 .has-warning:focus .alert,
 .has-warning:focus-within .alert {
+  border-color: #c97500 !important;
   border-color: var(--color-interactive-warning-hover) !important;
 }
 .has-warning:not(.disabled):not(:disabled):hover.radio label,
 .has-warning:not(.disabled):not(:disabled):hover.checkbox label,
 .has-warning:not(.disabled):not(:disabled):hover .btn-input,
 .has-warning:not(.disabled):not(:disabled):hover .alert {
+  border-color: #c97500 !important;
   border-color: var(--color-interactive-warning-hover) !important;
 }
 .has-warning .form-control-feedback {
+  color: #9a6500;
   color: var(--color-content-warning);
 }
 .has-warning .radio > label:not(.disabled):not(:disabled),
 .has-warning.checkbox > label:not(.disabled):not(:disabled) {
+  border-color: #df8700;
   border-color: var(--color-interactive-warning);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .has-warning .radio > label:not(.disabled):not(:disabled):hover,
 .has-warning.checkbox > label:not(.disabled):not(:disabled):hover,
 .has-warning .radio > label:focus-within,
 .has-warning.checkbox > label:focus-within {
+  border-color: #c97500 !important;
   border-color: var(--color-interactive-warning-hover) !important;
 }
 .has-warning .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -1085,12 +1038,14 @@ select[multiple].input-lg {
 .has-warning.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
 .has-warning .radio > label:focus-within .tw-radio-button,
 .has-warning.checkbox > label:focus-within .tw-radio-button {
+  border-color: #c97500 !important;
   border-color: var(--color-interactive-warning-hover) !important;
 }
 .has-warning .radio .tw-checkbox-button,
 .has-warning.checkbox .tw-checkbox-button,
 .has-warning .radio .tw-radio-button,
 .has-warning.checkbox .tw-radio-button {
+  border-color: #df8700;
   border-color: var(--color-interactive-warning);
 }
 .np-theme-personal .has-warning {
@@ -1110,6 +1065,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-warning .radio-inline label,
 .np-theme-personal .has-warning .checkbox-inline label,
 .np-theme-personal .has-warning .input-group-addon {
+  color: #37517e !important;
   color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-warning) !important;
 }
@@ -1151,11 +1107,13 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-warning) !important;
 }
 .np-theme-personal .has-warning .form-control-feedback {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-warning.checkbox > label:not(.disabled):not(:disabled) {
   border-color: var(--color-sentiment-warning);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal .has-warning .radio > label:not(.disabled):not(:disabled):hover,
@@ -1181,6 +1139,7 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-warning);
 }
 .has-error {
+  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
 }
 .has-error .control-label,
@@ -1197,7 +1156,9 @@ select[multiple].input-lg {
 .has-error .radio-inline label,
 .has-error .checkbox-inline label,
 .has-error .input-group-addon {
+  color: #cf2929 !important;
   color: var(--color-content-negative) !important;
+  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
 }
 .has-error .form-control,
@@ -1206,6 +1167,7 @@ select[multiple].input-lg {
 .has-error .btn-input:not(.disabled):not(:disabled):hover,
 .has-error .input-group-addon,
 .has-error .alert {
+  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
 }
 .has-error:active .form-control,
@@ -1229,26 +1191,32 @@ select[multiple].input-lg {
 .has-error:active .alert,
 .has-error:focus .alert,
 .has-error:focus-within .alert {
+  border-color: #d03238 !important;
   border-color: var(--color-interactive-negative-hover) !important;
 }
 .has-error:not(.disabled):not(:disabled):hover.radio label,
 .has-error:not(.disabled):not(:disabled):hover.checkbox label,
 .has-error:not(.disabled):not(:disabled):hover .btn-input,
 .has-error:not(.disabled):not(:disabled):hover .alert {
+  border-color: #d03238 !important;
   border-color: var(--color-interactive-negative-hover) !important;
 }
 .has-error .form-control-feedback {
+  color: #cf2929;
   color: var(--color-content-negative);
 }
 .has-error .radio > label:not(.disabled):not(:disabled),
 .has-error.checkbox > label:not(.disabled):not(:disabled) {
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .has-error .radio > label:not(.disabled):not(:disabled):hover,
 .has-error.checkbox > label:not(.disabled):not(:disabled):hover,
 .has-error .radio > label:focus-within,
 .has-error.checkbox > label:focus-within {
+  border-color: #d03238 !important;
   border-color: var(--color-interactive-negative-hover) !important;
 }
 .has-error .radio > label:not(.disabled):not(:disabled):hover .tw-checkbox-button,
@@ -1259,12 +1227,14 @@ select[multiple].input-lg {
 .has-error.checkbox > label:not(.disabled):not(:disabled):hover .tw-radio-button,
 .has-error .radio > label:focus-within .tw-radio-button,
 .has-error.checkbox > label:focus-within .tw-radio-button {
+  border-color: #d03238 !important;
   border-color: var(--color-interactive-negative-hover) !important;
 }
 .has-error .radio .tw-checkbox-button,
 .has-error.checkbox .tw-checkbox-button,
 .has-error .radio .tw-radio-button,
 .has-error.checkbox .tw-radio-button {
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
 }
 .np-theme-personal .has-error {
@@ -1284,6 +1254,7 @@ select[multiple].input-lg {
 .np-theme-personal .has-error .radio-inline label,
 .np-theme-personal .has-error .checkbox-inline label,
 .np-theme-personal .has-error .input-group-addon {
+  color: #37517e !important;
   color: var(--color-content-primary) !important;
   border-color: var(--color-sentiment-negative) !important;
 }
@@ -1325,11 +1296,13 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative-hover) !important;
 }
 .np-theme-personal .has-error .form-control-feedback {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled),
 .np-theme-personal .has-error.checkbox > label:not(.disabled):not(:disabled) {
   border-color: var(--color-sentiment-negative);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .np-theme-personal .has-error .radio > label:not(.disabled):not(:disabled):hover,
@@ -1355,7 +1328,8 @@ select[multiple].input-lg {
   border-color: var(--color-sentiment-negative);
 }
 .has-feedback label ~ .form-control-feedback {
-  inset-block-start: var(--wds-line-height-title-section);
+  inset-block-start: 1.2;
+  inset-block-start: var(--line-height-control);
 }
 .has-feedback label.sr-only ~ .form-control-feedback {
   inset-block-start: 0;
@@ -1401,8 +1375,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;
   }
@@ -1420,7 +1394,8 @@ select[multiple].input-lg {
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox {
-  min-block-size: calc(var(--wds-line-height-title-section) + (8px + 1));
+  min-block-size: calc(1.2 + (8px + 1));
+  min-block-size: calc(var(--line-height-control) + (8px + 1));
 }
 .form-horizontal .form-group {
   margin-inline-start: -12px;
@@ -1445,17 +1420,20 @@ select[multiple].input-lg {
 @media (min-width: 600px) {
   .form-horizontal .form-group-lg .control-label {
     padding-block-start: 17px;
-    font-size: var(--wds-font-size-title-body);
+    font-size: 1.25rem;
+    font-size: var(--font-size-20);
   }
 }
 @media (min-width: 600px) {
   .form-horizontal .form-group-sm .control-label {
     padding-block-start: 8px;
-    font-size: var(--wds-font-size-body);
+    font-size: 0.875rem;
+    font-size: var(--font-size-14);
   }
 }
 .radio,
 .checkbox {
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .radio > label,
@@ -1473,7 +1451,9 @@ select[multiple].input-lg {
   inset-inline-start: 40px;
 }
 .tw-checkbox-button {
+  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
+  background: #ffffff;
   background: var(--color-background-screen);
   inline-size: 22px;
   block-size: 22px;
@@ -1486,6 +1466,7 @@ select[multiple].input-lg {
 }
 .np-theme-personal .tw-checkbox-button {
   border: none;
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .tw-checkbox-button .tw-checkbox-check,
@@ -1494,16 +1475,19 @@ select[multiple].input-lg {
   block-size: 20px;
   margin: 0;
   display: none;
+  color: #ffffff;
   color: var(--color-background-screen);
 }
 .tw-checkbox-button:not(.disabled):not(:disabled):hover,
 input[type="checkbox"]:hover + .tw-checkbox-button,
 .checkbox:hover .tw-checkbox-button {
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .tw-checkbox-button:not(.disabled):not(:disabled):hover,
 .np-theme-personal input[type="checkbox"]:hover + .tw-checkbox-button,
 .np-theme-personal .checkbox:hover .tw-checkbox-button {
+  box-shadow: inset 0 0 0 1px #b5b7ba;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
 }
 .tw-checkbox-button:not(.disabled):not(:disabled):focus,
@@ -1514,6 +1498,7 @@ input[type="checkbox"]:focus + .tw-checkbox-button,
 .tw-checkbox-button:not(.disabled):not(:disabled):active,
 .tw-checkbox-button:not(.disabled):not(:disabled).active,
 input[type="checkbox"]:active + .tw-checkbox-button {
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
   outline: none;
 }
@@ -1528,7 +1513,9 @@ input[type="checkbox"]:focus-visible + .tw-checkbox-button {
 .tw-checkbox-button.checked,
 input[type="checkbox"]:checked + .tw-checkbox-button,
 input[type="checkbox"]:indeterminate + .tw-checkbox-button {
+  border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 .np-theme-personal .tw-checkbox-button:checked,
@@ -1550,7 +1537,9 @@ input[type="checkbox"]:indeterminate + .tw-checkbox-button .np-tw-checkbox-indet
 .tw-checkbox-button.checked:hover,
 input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
 input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
+  border-color: #008fc9 !important;
   border-color: var(--color-interactive-accent-hover) !important;
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .tw-checkbox-button:checked:hover,
@@ -1565,7 +1554,9 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-c
 .tw-checkbox-button.checked:active,
 input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
 input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
+  border-color: #0081ba !important;
   border-color: var(--color-interactive-accent-active) !important;
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .tw-checkbox-button:checked:active,
@@ -1578,34 +1569,44 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .checkbox.has-error .tw-checkbox-button,
 .tw-checkbox-button.has-error {
+  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
 }
 .checkbox.has-error .tw-checkbox-button:checked,
 .tw-checkbox-button.has-error:checked,
 .checkbox.has-error .tw-checkbox-button.checked,
 .tw-checkbox-button.has-error.checked {
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button,
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
+  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:indeterminate + .tw-checkbox-button {
+  border-color: #d03238 !important;
   border-color: var(--color-interactive-negative-hover) !important;
+  background-color: #d03238;
   background-color: var(--color-interactive-negative-hover);
 }
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
 .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
+  border-color: #bf1e2c !important;
   border-color: var(--color-interactive-negative-active) !important;
+  background-color: #bf1e2c;
   background-color: var(--color-interactive-negative-active);
 }
 .tw-radio-button {
   inline-size: 24px;
   block-size: 24px;
   border-radius: 50%;
+  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
+  background: #ffffff;
   background: var(--color-background-screen);
   display: inline-flex;
   align-items: center;
@@ -1615,6 +1616,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .np-theme-personal .tw-radio-button {
   border: none;
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   position: relative;
   inset-block-start: 0;
@@ -1631,11 +1633,13 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
 .tw-radio-button:not(.disabled):not(:disabled):hover {
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
 .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover {
   border-color: transparent;
+  box-shadow: inset 0 0 0 1px #b5b7ba;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked,
@@ -1654,16 +1658,19 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .tw-radio-button:not(.disabled):not(:disabled).focus,
 .tw-radio-button:not(.disabled):not(:disabled):active,
 .tw-radio-button:not(.disabled):not(:disabled).active {
+  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
   outline: none;
 }
 .tw-radio-button:checked,
 .tw-radio-button.checked {
+  border-color: #00a2dd !important;
   border-color: var(--color-interactive-accent) !important;
 }
 .tw-radio-button:checked .tw-radio-check,
 .tw-radio-button.checked .tw-radio-check {
   opacity: 1;
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 .np-theme-personal .tw-radio-button:checked,
@@ -1679,12 +1686,14 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .radio.has-error .tw-radio-button,
 .tw-radio-button.has-error {
+  border-color: #e74848 !important;
   border-color: var(--color-interactive-negative) !important;
 }
 .radio.has-error .tw-radio-button:checked .tw-radio-check,
 .tw-radio-button.has-error:checked .tw-radio-check,
 .radio.has-error .tw-radio-button.checked .tw-radio-check,
 .tw-radio-button.has-error.checked .tw-radio-check {
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .radio .tw-radio-button {
@@ -1731,7 +1740,9 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-checkbox.checkbox > label {
   display: flex;
   align-items: center;
+  padding-block: 8px;
   padding-block: var(--size-8);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 .np-radio.radio > label .np-checkbox__text,
@@ -1745,9 +1756,12 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
 :not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
 :not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
-  font-weight: var(--wds-font-weight-body-regular);
-  font-size: var(--wds-font-size-body-large);
-  line-height: var(--wds-line-height-title-subsection);
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 1.25rem;
+  line-height: var(--line-height-20);
   padding-block-start: 3px;
 }
 .np-theme-personal .np-radio.radio > label,
@@ -1761,6 +1775,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   border-inline-start: 0 solid transparent;
 }
 .input-group-addon {
+  color: #5d7079;
   color: var(--color-content-secondary);
   transition: border-color ease-in-out 0.15s;
 }
@@ -1775,53 +1790,56 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   inset-block-start: -3px;
 }
 .label .label-default {
+  color: #5d7079;
   color: var(--color-content-secondary);
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .form-group {
   position: relative;
-  font-size: var(--wds-font-size-body);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
 }
 .form-group .row {
   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;
   }
 }
@@ -1837,18 +1855,23 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   padding-block-start: 12px;
   padding-block-end: 10px;
   padding-inline-end: 16px;
+  color: #37517e;
   color: var(--color-content-primary);
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: 3px;
   transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 .np-theme-personal .checkbox > label,
 .np-theme-personal .radio > label {
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .checkbox > label:not(.disabled):not(:disabled):hover,
 .radio > label:not(.disabled):not(:disabled):hover {
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .checkbox > label:not(.disabled):not(:disabled).focus,
@@ -1861,6 +1884,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .radio > label:not(.disabled):not(:disabled).has-focus:hover,
 .checkbox > label:not(.disabled):not(:disabled):focus-within,
 .radio > label:not(.disabled):not(:disabled):focus-within {
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
 }
 .np-theme-personal .checkbox > label:not(.disabled):not(:disabled).focus,
@@ -1873,12 +1897,14 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .radio > label:not(.disabled):not(:disabled).has-focus:hover,
 .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):focus-within,
 .np-theme-personal .radio > label:not(.disabled):not(:disabled):focus-within {
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .checkbox.checkbox-lg > label,
 .radio.checkbox-lg > label,
 .checkbox.radio-lg > label,
 .radio.radio-lg > label {
+  min-block-size: 72px;
   min-block-size: var(--size-72);
 }
 .checkbox.checkbox-lg > label small,
@@ -1896,17 +1922,16 @@ 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,
-.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 {
+.radio.radio-lg > label .np-text-body-default {
   display: block;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .error-messages {
   display: none;
+  color: #cf2929;
   color: var(--color-content-negative);
+  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
   position: relative;
 }
@@ -1994,9 +2019,16 @@ 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%;
+  color: #768e9c;
   color: var(--color-content-tertiary);
 }
 @supports (hyphenate-limit-chars: 1) {
@@ -2036,6 +2068,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   background-color: transparent;
   background-color: initial;
   border: none !important;
+  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal .btn-input,
@@ -2043,6 +2076,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .form-control,
 .np-theme-personal .radio > label,
 .np-theme-personal .checkbox > label {
+  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
   transition: box-shadow 0.3s ease-in-out;
 }
@@ -2056,6 +2090,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 .np-theme-personal .form-control:not(.disabled):not(:disabled):hover,
 .np-theme-personal .radio > label:not(.disabled):not(:disabled):hover,
 .np-theme-personal .checkbox > label:not(.disabled):not(:disabled):hover {
+  box-shadow: inset 0 0 0 2px #b5b7ba;
   box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .btn-input:not(.disabled):not(:disabled):hover:has(:checked, .checked),
@@ -2116,23 +2151,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,
@@ -2152,6 +2187,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   background-color: initial !important;
 }
 .np-theme-personal .form-group label {
+  margin-block-end: 8px;
   margin-block-end: var(--padding-x-small);
 }
 .np-theme-personal .form-group .np-upload-input label {
@@ -2163,7 +2199,9 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .np-theme-personal .error-messages,
 .np-theme-personal .alert-detach {
+  color: #5d7079;
   color: var(--color-content-secondary);
+  margin-block: 8px;
   margin-block: var(--padding-x-small);
   margin-inline: 0;
   padding: 0;
@@ -2172,6 +2210,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .np-theme-personal .alert-detach .status-circle {
   margin-block-start: 2px;
+  margin-inline-end: 4px;
   margin-inline-end: var(--size-4);
 }
 .np-theme-personal .has-error .error-messages,
@@ -2185,6 +2224,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
 }
 .has-required::after {
   content: "\00a0*";
+  color: #cf2929;
   color: var(--color-content-negative);
 }
 .np-theme-personal .has-required::after {
@@ -2204,6 +2244,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
   float: inline-start;
   inline-size: 100%;
   margin-block-end: 0;
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .input-group .form-control:not(:first-child) {
@@ -2226,15 +2267,29 @@ 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-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;
-  min-block-size: var(--min-height);
+  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,
@@ -2335,30 +2390,23 @@ select[multiple].input-group-lg > .input-group-btn .btn {
 .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);
 }
-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);
-}
-@media (max-width: 320px) {
-  .input-group-lg > .form-control,
-  .input-group-lg > .input-group-addon,
-  .input-group-lg > .input-group-btn .btn {
-    --min-height: calc(2 * var(--size-12) + var(--wds-font-size-title-body) * var(--wds-line-height-title-body));
-  }
-}
 .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;
   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;
-  min-block-size: var(--min-height);
 }
 select.input-group-sm > .form-control,
 select.input-group-sm > .input-group-addon {
@@ -2403,13 +2451,10 @@ 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(--wds-font-size-title-subsection);
+  font-size: 1.25rem;
+  font-size: var(--font-size-20);
 }
 .input-group-sm > .input-group-btn > .btn {
   block-size: 32px;
@@ -2430,11 +2475,16 @@ select.input-group-sm > .input-group-addon {
 }
 .input-group-addon {
   padding: var(--input-group-addon-padding);
-  font-size: var(--wds-font-size-body-large);
-  line-height: var(--wds-line-height-body-large);
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
+  color: #5d7079;
   color: var(--color-content-secondary);
   text-align: center;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
+  border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
 }
 .input-group-addon.input-sm {
@@ -2506,7 +2556,9 @@ select.input-group-sm > .input-group-addon {
 }
 .np-theme-personal .input-group > :first-child .btn,
 .np-theme-personal .input-group > :first-child .btn-group {
+  border-start-start-radius: 10px;
   border-start-start-radius: var(--radius-small);
+  border-end-start-radius: 10px;
   border-end-start-radius: var(--radius-small);
 }
 .input-group > :last-child .btn,
@@ -2516,7 +2568,9 @@ select.input-group-sm > .input-group-addon {
 }
 .np-theme-personal .input-group > :last-child .btn,
 .np-theme-personal .input-group > :last-child .btn-group {
+  border-start-start-radius: 10px;
   border-start-start-radius: var(--radius-small);
+  border-end-start-radius: 10px;
   border-end-start-radius: var(--radius-small);
 }
 .input-group-btn {
@@ -2543,35 +2597,43 @@ select.input-group-sm > .input-group-addon {
 .input-group:hover:not(.disabled):not(:disabled) .input-group-addon,
 .input-group:hover:not(.disabled):not(:disabled) .btn-input,
 .input-group:hover:not(.disabled):not(:disabled) .bootstrap-select .btn-default {
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .form-control:hover:not(.disabled):not(:disabled) {
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .input-group:focus-within:not(.disabled):not(:disabled) .form-control,
 .input-group:focus-within:not(.disabled):not(:disabled) .input-group-addon,
 .input-group:focus-within:not(.disabled):not(:disabled) .btn-input,
 .input-group:focus-within:not(.disabled):not(:disabled) .bootstrap-select .btn-default {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .input-group:focus-within:not(.disabled):not(:disabled) .form-control,
 .np-theme-personal .input-group:focus-within:not(.disabled):not(:disabled) .input-group-addon,
 .np-theme-personal .input-group:focus-within:not(.disabled):not(:disabled) .btn-input,
 .np-theme-personal .input-group:focus-within:not(.disabled):not(:disabled) .bootstrap-select .btn-default {
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .form-control:focus-within:not(.disabled):not(:disabled) {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .form-control:focus-within:not(.disabled):not(:disabled) {
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .has-error .input-group .form-control,
 .has-error .input-group .input-group-addon {
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
 }
 .has-error .input-group .form-control:hover,
 .has-error .input-group .input-group-addon:hover {
+  border-color: #d03238;
   border-color: var(--color-interactive-negative-hover);
 }
 .dropdown-menu .input-group-addon {