@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee

package/build/styles/modal/Modal.css

@@ -6,9 +6,14 @@
 .tw-modal .tw-modal-dialog {
   transition: transform 0.3s ease-out;
   transform: translateY(-25%);
-  box-shadow: none;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  background: #ffffff;
+  background: var(--color-background-elevated);
+}
+.np-theme-personal .tw-modal .tw-modal-dialog {
   background: #ffffff;
   background: var(--color-background-elevated);
+  box-shadow: none;
   border-radius: 24px;
   border-radius: var(--radius-large);
 }
@@ -17,7 +22,6 @@
 }
 .tw-modal .tw-modal-content {
   width: 100%;
-  background-color: transparent;
 }
 .tw-modal .tw-modal-content .tw-modal-body {
   flex: 1;
@@ -26,6 +30,25 @@
 .tw-modal .tw-modal-content .tw-modal-body--scrollable {
   overflow-y: auto;
 }
+.tw-modal .tw-modal-content .tw-modal-header {
+  box-shadow: inset 0 -1px 0 0 #e2e6e8;
+}
+.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header {
+  box-shadow: inset 0 -1px 0 0 rgba(14,15,12,0.12157);
+  box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
+}
+.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header .np-close-button {
+  margin: calc(8px * -1) calc(8px * -1) calc(8px * -1) 0;
+  margin: calc(var(--size-8) * -1) calc(var(--size-8) * -1) calc(var(--size-8) * -1) 0;
+}
+.tw-modal .tw-modal-content .tw-modal-header.modal--withoutborder {
+  box-shadow: none;
+}
+.tw-modal .tw-modal-content .tw-modal-header .tw-icon {
+  fill: var(--color-content-accent);
+  cursor: pointer;
+  display: block;
+}
 .tw-modal .tw-modal-content .tw-modal-header,
 .tw-modal .tw-modal-content .tw-modal-footer,
 .tw-modal .tw-modal-content .tw-modal-body {
@@ -40,16 +63,55 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
+  box-shadow: inset 0 1px 0 0 #e2e6e8;
+}
+.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer {
+  border-top: 1px solid rgba(14,15,12,0.12157);
+  border-top: 1px solid var(--color-border-neutral);
+}
+.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
+.tw-modal .tw-modal-content .tw-modal-footer.modal--withoutborder {
+  box-shadow: none;
+}
+.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-body {
+  padding-top: 0 !important;
+}
+.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-header {
+  min-height: 32px;
+  min-height: var(--size-32);
+  padding-bottom: 4px !important;
+}
+.tw-modal .tw-modal-content .np-theme-personal {
+  background-color: transparent;
+}
+.tw-modal table,
+.tw-modal .table {
+  background-color: transparent;
 }
 @media (min-width: 576px) {
   .tw-modal .tw-modal-content .tw-modal-header,
-  .tw-modal .tw-modal-content .tw-modal-footer {
+  .tw-modal .tw-modal-content .tw-modal-footer,
+  .tw-modal .tw-modal-content .tw-modal-body {
+    padding: 32px 24px;
+    padding: var(--size-32) var(--size-24);
+  }
+  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-header,
+  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
+  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-body {
     padding: 24px;
     padding: var(--size-24);
   }
-  .tw-modal .tw-modal-content .tw-modal-body {
-    padding: 0 24px;
-    padding: 0 var(--size-24);
+  .tw-modal .tw-modal-compact .tw-modal-header {
+    min-height: calc(8px * 7);
+    min-height: calc(var(--size-8) * 7);
+  }
+  .tw-modal .tw-modal-compact .tw-modal-header,
+  .tw-modal .tw-modal-compact .tw-modal-footer,
+  .tw-modal .tw-modal-compact .tw-modal-body {
+    padding-top: 16px;
+    padding-top: var(--size-16);
+    padding-bottom: 16px;
+    padding-bottom: var(--size-16);
   }
 }
 @media (min-width: 480px) {

package/build/styles/moneyInput/MoneyInput.css

@@ -10,7 +10,7 @@
   padding-left: initial !important;
 }
 .tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection {
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
@@ -69,6 +69,6 @@
   box-shadow: none;
 }
 .tw-money-input:not(.disabled):not(:disabled):not(.np-button-input:active):has(.np-button-input:focus-visible) {
-  box-shadow: inset 0 0 0 1px #c9cbce !important;
+  box-shadow: inset 0 0 0 1px #868685 !important;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
 }

package/build/styles/navigationOption/NavigationOption.css

@@ -31,7 +31,7 @@ html:not([dir="rtl"]) .np-navigation-option {
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .np-navigation-option:not(.disabled):not(:disabled):hover .tw-avatar__content {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-navigation-option .circle {
@@ -56,11 +56,9 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .np-navigation-option__chevron:not(.disabled):not(:disabled):hover,
 .np-navigation-option__chevron:not(.disabled):not(:disabled):focus {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .np-navigation-option__chevron:not(.disabled):not(:disabled):active {
-  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .np-theme-personal .np-option__container-aligned {

package/build/styles/nudge/Nudge.css

@@ -14,7 +14,7 @@
   --nudge-control-width: var(--size-24);
   --nudge-control-background-color: var(--color-background-neutral);
   align-items: stretch;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--nudge-background-color);
   border-radius: 16px;
   border-radius: var(--nudge-border-radius);

package/build/styles/overlayHeader/OverlayHeader.css

@@ -5,11 +5,12 @@
   max-width: 1164px;
 }
 .np-theme-personal .np-overlay-header {
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid rgba(14,15,12,0.12157);
   border-bottom: 1px solid var(--color-border-neutral);
 }
 .np-theme-personal--forest-green .np-overlay-header .np-flow-header__left path,
 .np-theme-personal--bright-green .np-overlay-header .np-flow-header__left path,
 .np-theme-personal--dark .np-overlay-header .np-flow-header__left path {
+  fill: #163300;
   fill: var(--color-interactive-primary);
 }

package/build/styles/popover/Popover.css

@@ -3,7 +3,7 @@
   border-radius: var(--radius-medium);
 }
 .np-popover__container .np-popover__content {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
@@ -22,7 +22,7 @@
 }
 .np-popover__container.np-bottom-sheet .np-popover__title {
   margin: 0;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   line-height: 1.2;
   line-height: var(--line-height-title);

package/build/styles/progress/Progress.css

@@ -6,27 +6,27 @@
   height: var(--size-8);
 }
 .np-progress::-webkit-progress-bar {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-progress::-webkit-progress-value {
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal .np-progress::-webkit-progress-value {
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
 }
 .np-progress::-moz-progress-bar {
-  background-color: #0097c7;
   background-color: var(--color-content-accent);
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .np-theme-personal .np-progress::-moz-progress-bar {
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
 }
 @media (prefers-reduced-motion: no-preference) {

package/build/styles/progressBar/ProgressBar.css

@@ -1,11 +1,11 @@
 .np-progress-bar__title .h4 {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   margin-bottom: 4px;
   margin-bottom: var(--size-4);
 }
 .np-progress-bar p {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   margin-top: 4px;
   margin-top: var(--size-4);

package/build/styles/promoCard/PromoCard.css

@@ -32,7 +32,7 @@
   right: calc(var(--size-24) * -1);
 }
 .np-Card-description {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-Card-indicator {
@@ -121,7 +121,7 @@
   outline: none;
 }
 .np-Card--link .np-Card-titleLink {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -140,7 +140,7 @@
   z-index: 10;
 }
 .np-Card--checked.is-checked {
-  box-shadow: 0 0 0 4px var(--color-interactive-primary);
+  box-shadow: 0 0 0 4px #163300;
   box-shadow: 0 0 0 var(--size-4) var(--color-interactive-primary);
 }
 .np-Card--checked.is-checked .np-Card-check {

package/build/styles/prompt/InlinePrompt/InlinePrompt.css

@@ -44,66 +44,85 @@
 }
 .wds-inline-prompt__media-wrapper .tw-icon-tags,
 .wds-inline-prompt__media-wrapper .tw-icon-confetti {
+  color: #054d28;
   color: var(--color-sentiment-positive-primary);
 }
 .wds-inline-prompt--negative {
+  background-color: #fbeaea;
   background-color: var(--color-sentiment-negative-secondary);
+  color: #cb272f;
   color: var(--color-sentiment-negative-primary);
 }
 .wds-inline-prompt--negative a,
 .wds-inline-prompt--negative button {
+  color: #cb272f;
   color: var(--color-sentiment-negative-primary);
 }
 .wds-inline-prompt--negative a:hover,
 .wds-inline-prompt--negative button:hover {
+  color: #b8232b;
   color: var(--color-sentiment-negative-primary-hover);
 }
 .wds-inline-prompt--negative a:active,
 .wds-inline-prompt--negative button:active {
+  color: #a72027;
   color: var(--color-sentiment-negative-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):hover {
+  background-color: #f9e1e1;
   background-color: var(--color-sentiment-negative-secondary-hover);
 }
 .wds-inline-prompt.wds-inline-prompt--negative:has(a, button):active {
+  background-color: #f8d8d8;
   background-color: var(--color-sentiment-negative-secondary-active);
 }
 .wds-inline-prompt--positive {
+  background-color: #e2f6d5;
   background-color: var(--color-sentiment-positive-secondary);
+  color: #054d28;
   color: var(--color-sentiment-positive-primary);
 }
 .wds-inline-prompt--positive a,
 .wds-inline-prompt--positive button {
+  color: #054d28;
   color: var(--color-sentiment-positive-primary);
 }
 .wds-inline-prompt--positive a:hover,
 .wds-inline-prompt--positive button:hover {
+  color: #043a1e;
   color: var(--color-sentiment-positive-primary-hover);
 }
 .wds-inline-prompt--positive a:active,
 .wds-inline-prompt--positive button:active {
+  color: #022614;
   color: var(--color-sentiment-positive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):hover {
+  background-color: #d3f2c0;
   background-color: var(--color-sentiment-positive-secondary-hover);
 }
 .wds-inline-prompt.wds-inline-prompt--positive:has(a, button):active {
+  background-color: #c5edab;
   background-color: var(--color-sentiment-positive-secondary-active);
 }
 .wds-inline-prompt--proposition {
   background-color: #D2F9F7;
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a,
 .wds-inline-prompt--proposition button {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .wds-inline-prompt--proposition a:hover,
 .wds-inline-prompt--proposition button:hover {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
 }
 .wds-inline-prompt--proposition a:active,
 .wds-inline-prompt--proposition button:active {
+  color: #0e0f0c;
   color: var(--color-interactive-primary-active);
 }
 .wds-inline-prompt.wds-inline-prompt--proposition:has(a, button):hover {
@@ -113,41 +132,58 @@
   background-color: #91F0EE;
 }
 .wds-inline-prompt--neutral {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .wds-inline-prompt--neutral a,
 .wds-inline-prompt--neutral button {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):hover {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .wds-inline-prompt.wds-inline-prompt--neutral:has(a, button):active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .wds-inline-prompt--warning {
+  background-color: #fff7d7;
   background-color: var(--color-sentiment-warning-secondary);
+  color: #4a3b1c;
   color: var(--color-sentiment-warning-content);
 }
 .wds-inline-prompt--warning a,
 .wds-inline-prompt--warning button {
+  color: #4a3b1c;
   color: var(--color-sentiment-warning-content);
 }
 .wds-inline-prompt--warning a:hover,
 .wds-inline-prompt--warning button:hover {
+  color: #3b2f16;
   color: var(--color-sentiment-warning-content-hover);
 }
 .wds-inline-prompt--warning a:active,
 .wds-inline-prompt--warning button:active {
+  color: #2c2311;
   color: var(--color-sentiment-warning-content-active);
 }
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
+  background-color: rgb(255, 244, 200);
+}
+@supports (color: color-mix(in lch, red, blue)) {
 .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):hover {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 92%, var(--color-sentiment-warning-primary));
 }
+}
+.wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
+  background-color: rgb(255, 241, 185);
+}
+@supports (color: color-mix(in lch, red, blue)) {
 .wds-inline-prompt.wds-inline-prompt--warning:has(a, button):active {
   background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 84%, var(--color-sentiment-warning-primary));
 }
+}

package/build/styles/segmentedControl/SegmentedControl.css

@@ -11,7 +11,7 @@
   width: 100%;
   justify-content: center;
   align-items: center;
-  background: rgba(134,167,189,0.10196);
+  background: rgba(22,51,0,0.07843);
   background: var(--color-background-neutral);
   border-radius: 24px;
   border-radius: var(--size-24);
@@ -19,6 +19,7 @@
   outline: 2px solid transparent;
 }
 .segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
+  outline: 2px solid #163300;
   outline: 2px solid var(--color-interactive-primary);
 }
 .segmented-control__segments::after {
@@ -58,13 +59,14 @@
   z-index: 1;
   cursor: pointer;
   transition: background 300ms;
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .segmented-control__segment:first-child {
   margin-left: 0;
 }
 .segmented-control__segment:hover {
-  background: rgba(0,0,0,0.10196);
+  background: rgba(22,51,0,0.07843);
   background: var(--color-background-overlay);
 }
 .segmented-control__radio-input {
@@ -88,6 +90,7 @@
   outline-offset: 0px;
 }
 .segmented-control__button:focus-visible {
+  outline-color: #163300;
   outline-color: var(--color-interactive-primary);
 }
 .segmented-control__selected-segment:hover {
@@ -96,6 +99,7 @@
 .segmented-control__text {
   word-wrap: break-word;
   word-break: break-word;
+  color: #163300;
   color: var(--color-interactive-primary);
   transition: font-weight 300ms;
 }

package/build/styles/select/Select.css

@@ -1,11 +1,11 @@
 .np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-  border: 1px solid #c9cbce;
+  border: 1px solid #868685;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: 10px;
   border-radius: var(--radius-small);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-weight: 400;
   font-weight: var(--font-weight-regular);
@@ -27,17 +27,8 @@
   border-radius: var(--radius-small);
 }
 .has-error .np-select .np-dropdown-toggle {
-  border: 1px solid #e74848;
   border: 1px solid var(--color-interactive-negative);
 }
-.np-select .np-dropdown-toggle-navy {
-  --color-content-accent: #00b9ff;
-  --color-content-primary: #ffffff;
-  --color-content-secondary: #c9cbce;
-  --color-background-screen: #2e4369;
-  --color-interactive-secondary: #2e4369;
-  --color-interactive-secondary-hover: #2e4369;
-}
 .np-select .np-dropdown-toggle.np-btn-sm {
   padding-right: 32px;
   padding-right: var(--size-32);
@@ -101,19 +92,19 @@
   top: 27px;
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading) {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
-  border-color: #b5b7ba;
+  border-color: #6c6c6b;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
-  border-color: #00a2dd;
+  border-color: #9fe870;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
-  border-color: #c9cbce;
+  border-color: #868685;
   border-color: var(--color-interactive-secondary);
 }
 .np-option-content {
@@ -164,7 +155,7 @@
   width: 420px;
 }
 .np-dropdown-menu .np-dropdown-item--focused {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -183,7 +174,7 @@
   clear: both;
   border-radius: 10px;
   border-radius: var(--radius-small);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
@@ -218,32 +209,15 @@
 }
 .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):hover,
 .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):focus {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
-.np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):active {
-  color: #ffffff;
-  background-color: #37517e;
-}
-.np-dropdown-menu > .active > a,
-.np-dropdown-menu > .selected > a,
-.np-dropdown-menu > .active > a:hover,
-.np-dropdown-menu > .selected > a:hover,
-.np-dropdown-menu > .active > a:focus,
-.np-dropdown-menu > .selected > a:focus {
-  color: #ffffff;
-  background-color: #37517e;
-}
 .np-dropdown-menu > .active > a strong,
 .np-dropdown-menu > .selected > a strong {
   color: inherit;
 }
-.np-dropdown-menu > .active > a .np-text-body-default,
-.np-dropdown-menu > .selected > a .np-text-body-default {
-  color: #c9cbce;
-}
 .np-dropdown-menu .np-select-filter,
 .np-dropdown-menu .input-group-addon {
   border: 0;
@@ -252,13 +226,13 @@
   height: 1px;
   margin: 0;
   overflow: hidden;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-dropdown-menu .np-dropdown-header {
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   display: block;
   font-size: 0.875rem;
@@ -289,7 +263,7 @@
 }
 .np-select .np-text-body-default,
 .np-dropdown-menu .np-text-body-default {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-select .tw-icon-search,
@@ -305,25 +279,28 @@
   background-color: initial;
   transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   border: none;
-  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px #868685;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
-  box-shadow: inset 0 0 0 2px #b5b7ba;
+  box-shadow: inset 0 0 0 2px #6c6c6b;
   box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
+  box-shadow: inset 0 0 0 3px #163300;
   box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
 }
 .np-theme-personal .has-error .np-select .np-dropdown-toggle,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
+  box-shadow: inset 0 0 0 2px #cb272f;
   box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
 }
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
+  box-shadow: inset 0 0 0 3px #cb272f;
   box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
 }
 .np-theme-personal .np-dropdown-menu {
@@ -335,7 +312,9 @@
 .np-theme-personal .np-dropdown-menu .selected a:focus,
 .np-theme-personal .np-dropdown-menu .active a:hover,
 .np-theme-personal .np-dropdown-menu .selected a:hover {
+  color: #163300;
   color: var(--color-interactive-primary);
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-theme-personal .np-dropdown-menu .active a .body-2,
@@ -350,19 +329,24 @@
 .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
+  color: #163300 !important;
   color: var(--color-interactive-primary) !important;
+  background-color: rgba(22,51,0,0.18039) !important;
   background-color: var(--color-background-neutral-active) !important;
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item {
   outline: none;
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
+  box-shadow: inset 0 0 0 2px #163300;
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }

package/build/styles/slidingPanel/SlidingPanel.css

@@ -88,18 +88,18 @@
   box-shadow: inset -1px 0 0 0 #e2e6e8;
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-top {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 0 -1px 0 0 rgba(14,15,12,0.12157);
   box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-right {
-  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 1px 0 0 0 rgba(14,15,12,0.12157);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
-  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 0 1px 0 0 rgba(14,15,12,0.12157);
   box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-left {
-  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset -1px 0 0 0 rgba(14,15,12,0.12157);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }