@transferwise/components 0.0.0-experimental-8032b6c → 0.0.0-experimental-31e4d9a

package/build/styles/button/Button.css

@@ -48,14 +48,16 @@
 .wds-Button {
   display: inline-flex;
   flex: none;
-  inline-size: auto;
+  width: auto;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
   text-align: center;
   white-space: nowrap;
   word-wrap: break-word;
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background-color: var(--Button-background);
   border: none;
   border-radius: var(--Button-border-radius);
@@ -67,6 +69,7 @@
 .wds-Button:hover,
 .wds-Button:active,
 .wds-Button:focus {
+  -webkit-text-decoration: none;
   text-decoration: none;
   color: var(--Button-color);
 }
@@ -124,6 +127,7 @@
 .wds-Button--tertiary:hover .wds-Button-labelText,
 .wds-Button--tertiary:active .wds-Button-labelText,
 .wds-Button--tertiary:focus .wds-Button-labelText {
+  -webkit-text-decoration: underline;
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
@@ -149,9 +153,11 @@
   padding: var(--Button-medium-padding);
 }
 .wds-Button--medium:has(.wds-Button-avatars) {
+  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .wds-Button--medium:has(.wds-Button-icon--end) {
+  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
 }
 .wds-Button--medium .wds-Button-icon--start {
@@ -161,13 +167,15 @@
   padding: var(--Button-small-padding);
 }
 .wds-Button--small:has(.wds-Button-icon--start) {
+  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .wds-Button--small:has(.wds-Button-icon--end) {
+  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
 }
 .wds-Button--block {
-  inline-size: 100%;
+  width: 100%;
 }
 .wds-Button-avatars {
   display: inline-flex;
@@ -185,8 +193,8 @@
   --Button-iconSize: 16px;
 }
 .wds-Button-icon svg {
-  inline-size: var(--Button-iconSize);
-  block-size: var(--Button-iconSize);
+  width: var(--Button-iconSize);
+  height: var(--Button-iconSize);
 }
 .wds-Button-content {
   position: relative;
@@ -206,8 +214,8 @@
 }
 .wds-Button-loader {
   position: absolute;
-  inline-size: 100%;
-  block-size: 100%;
+  width: 100%;
+  height: 100%;
 }
 .wds-Button-loader .process-circle {
   stroke: var(--Button-color);
@@ -217,10 +225,10 @@
 .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
 }
-.np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
 .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
@@ -233,13 +241,6 @@
 .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
   --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-:dir(rtl) .wds-Button .tw-icon-chevron-right,
-:dir(rtl) .wds-Button .tw-icon-arrow-right,
-:dir(rtl) .wds-Button .tw-icon-chevron-left,
-:dir(rtl) .wds-Button .tw-icon-arrow-left,
-:dir(rtl) .wds-Button .tw-icon-arrow-diagonal-down,
-:dir(rtl) .wds-Button .tw-icon-arrow-diagonal-up,
-:dir(rtl) .wds-Button .tw-icon-list,
-:dir(rtl) .wds-Button .tw-icon-activity {
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
   scale: -1 1;
 }

package/build/styles/button/LegacyButton.css

@@ -3,17 +3,20 @@
 }
 .np-btn.np-btn-block > span.btn-loader {
   position: absolute;
-  inset-inline-start: var(--size-24);
+  left: 24px;
+  left: var(--size-24);
 }
 [dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  inset-inline-end: var(--size-24);
-  inset-inline-start: initial;
+  right: 24px;
+  right: var(--size-24);
+  left: auto;
+  left: initial;
 }
 .np-btn.np-btn-xs > span.btn-loader {
   background-size: 16px 16px;
 }
 .np-btn.np-btn-xs.btn-block > span.btn-loader {
-  inset-block-start: 0;
+  top: 0;
 }
 .np-btn.disabled[class] {
   pointer-events: auto;

package/build/styles/card/Card.css

@@ -8,7 +8,9 @@
   border: 0;
 }
 .np-card--expanded {
+  background-color: #ffffff;
   background-color: var(--color-background-elevated);
+  box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
   box-shadow: 0 1px 10px var(--color-border-neutral);
 }
 .np-theme-personal .np-card--expanded {
@@ -22,25 +24,25 @@
 .np-card--inactive .decision {
   cursor: default;
 }
-@media (--screen-xs) {
+@media (min-width: 480px) {
   .np-card--has-icon .np-card__content {
-    padding-block: var(--size-24);
-    padding-inline: var(--size-72);
+    padding: 24px 72px;
+    padding: var(--size-24) var(--size-72);
   }
 }
-@media (--screen-xs) {
+@media (min-width: 480px) {
   .np-card--has-icon .np-card__divider--expanded {
-    margin-block: 0;
-    margin-inline: var(--size-72);
+    margin: 0 72px;
+    margin: 0 var(--size-72);
   }
 }
 .np-card__button {
   background-color: transparent;
-  text-align: start;
-  inline-size: 100%;
+  text-align: left;
+  width: 100%;
 }
 [dir="rtl"] .np-card__button {
-  text-align: end;
+  text-align: right;
 }
 .np-theme-personal .np-card__button:focus {
   outline: none;
@@ -50,24 +52,27 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-card__content {
-  padding-block: var(--size-24);
-  padding-inline: var(--size-16);
+  padding: 24px 16px;
+  padding: var(--size-24) var(--size-16);
 }
 .np-theme-personal .np-card__content {
-  padding-block: var(--size-16) var(--size-24);
-  padding-inline: var(--size-16);
+  padding: 16px 16px 24px;
+  padding: var(--size-16) var(--size-16) var(--size-24);
 }
 .np-card__divider {
   transition: margin 0.35s ease;
 }
 .np-card__divider--expanded {
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
-  block-size: 1px;
-  margin-block: 0;
-  margin-inline: var(--size-16);
+  height: 1px;
+  margin: 0 16px;
+  margin: 0 var(--size-16);
 }
 .np-theme-personal .np-card {
+  overflow: visible;
   overflow: initial;
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   /* stylelint-disable-next-line no-duplicate-selectors */
   /* stylelint-disable-next-line no-duplicate-selectors */
@@ -77,6 +82,7 @@
   margin: 0;
 }
 .np-theme-personal .np-card__button {
+  border-radius: 16px;
   border-radius: var(--radius-medium);
   --ring-outline-width: 3px;
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
@@ -89,8 +95,6 @@
   outline-offset: var(--ring-outline-offset);
 }
 .np-theme-personal .np-card--expanded .np-card__button {
-  border-start-start-radius: var(--radius-medium);
-  border-start-end-radius: var(--radius-medium);
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
+  border-radius: 16px 16px 0 0;
+  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }

package/build/styles/carousel/Carousel.css

@@ -8,11 +8,14 @@
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
+  gap: 16px;
   gap: var(--size-16);
+  padding: 8px;
   padding: var(--size-8);
 }
-@media (--screen-sm-max) {
+@media (max-width: 767px) {
   .carousel {
+    gap: 8px;
     gap: var(--size-8);
   }
 }
@@ -20,13 +23,16 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  min-block-size: var(--size-32);
-  padding-block-end: var(--size-16);
+  min-height: 32px;
+  min-height: var(--size-32);
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
 }
 .carousel__card,
 .carousel__card:hover,
 .carousel__card:focus,
 .carousel__card:focus-within {
+  -webkit-text-decoration: none;
   text-decoration: none;
   transition: none !important;
   box-shadow: none !important;
@@ -34,43 +40,45 @@
 .carousel__card {
   display: block;
   position: relative;
-  text-align: start;
+  text-align: left;
   border: none;
   overflow: hidden;
+  background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
+  border-radius: 32px;
   border-radius: var(--size-32);
   scroll-snap-align: center;
   -webkit-scroll-snap-align: center;
   transition: all 0.4s !important;
 }
-@media (--screen-xl) {
+@media (min-width: 1200px) {
   .carousel__card {
-    min-inline-size: 280px;
-    inline-size: 280px;
-    block-size: 280px;
+    min-width: 280px;
+    width: 280px;
+    height: 280px;
   }
 }
-@media (--screen-md) {
+@media (min-width: 768px) {
   .carousel-wrapper {
     overflow: visible;
   }
   .carousel {
-    margin-block: 0;
-    margin-inline: calc(-1 * var(--size-8));
+    margin: 0 calc(-1 * 8px);
+    margin: 0 calc(-1 * var(--size-8));
   }
 }
-@media (--screen-lg-max) {
+@media (max-width: 1199px) {
   .carousel__card {
-    min-inline-size: 242px;
-    inline-size: 242px;
-    block-size: 242px;
+    min-width: 242px;
+    width: 242px;
+    height: 242px;
   }
 }
-@media (--screen-sm-max) {
+@media (max-width: 767px) {
   .carousel__card {
-    min-inline-size: 336px;
-    inline-size: 336px;
-    block-size: 336px;
+    min-width: 336px;
+    width: 336px;
+    height: 336px;
     scroll-snap-stop: always;
   }
 }
@@ -86,30 +94,41 @@
   background-color: var(--color-background-neutral-hover);
 }
 .carousel__card-content {
-  block-size: 100%;
+  height: 100%;
   font-weight: normal;
+  padding: 24px;
   padding: var(--size-24);
 }
 .carousel__indicators {
   display: flex;
   justify-content: center;
-  padding-block-start: var(--size-8);
+  padding-top: 8px;
+  padding-top: var(--size-8);
+  gap: 8px;
   gap: var(--size-8);
 }
 .carousel__indicator {
-  inline-size: var(--size-12);
-  block-size: var(--size-12);
+  width: 12px;
+  width: var(--size-12);
+  height: 12px;
+  height: var(--size-12);
+  border-radius: 8px;
   border-radius: var(--size-8);
+  background: #c9cbce;
   background: var(--color-interactive-secondary);
   border: none;
-  appearance: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   transition: all 0.1s;
 }
 .carousel__indicator:hover {
-  inline-size: var(--size-16);
+  width: 16px;
+  width: var(--size-16);
 }
 .carousel__indicator--selected,
 .carousel__indicator--selected:hover {
   background: var(--color-interactive-primary);
-  inline-size: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
 }

package/build/styles/checkboxButton/CheckboxButton.css

@@ -1,7 +1,9 @@
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
-  inline-size: var(--size-24);
-  block-size: var(--size-24);
+  width: 24px;
+  width: var(--size-24);
+  height: 24px;
+  height: var(--size-24);
   opacity: 0;
 }
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
@@ -12,13 +14,14 @@
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
   margin: 0;
 }
 [dir="rtl"] .checkbox .np-checkbox-button input[type="checkbox"] {
-  inset-inline-end: 0;
-  inset-inline-start: initial;
+  right: 0;
+  left: auto;
+  left: initial;
 }
 .np-tw-checkbox-indeterminate {
   position: relative;
@@ -26,13 +29,15 @@
 .np-tw-checkbox-indeterminate::after {
   content: "";
   position: absolute;
-  inline-size: 12px;
-  block-size: 2px;
-  inset-block-start: 55%;
-  inset-inline-start: 50%;
+  width: 12px;
+  height: 2px;
+  top: 55%;
+  left: 50%;
+  background: #ffffff;
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
 .np-tw-checkbox-indeterminate .has-error::after {
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }

package/build/styles/chips/Chip.css

@@ -1,56 +1,70 @@
 .np-chip {
   background-color: transparent;
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
+  border-radius: 16px;
   border-radius: var(--size-16);
+  color: #5d7079;
   color: var(--color-content-secondary);
-  block-size: var(--size-32);
-  margin-inline-end: var(--size-8);
-  padding-block: 0;
-  padding-inline: var(--size-12);
+  height: 32px;
+  height: var(--size-32);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+  padding: 0 12px;
+  padding: 0 var(--size-12);
   transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
-@media (--screen-400-zoom) {
+@media (max-width: 320px) {
   .np-chip {
-    block-size: var(--size-40);
+    height: 40px;
+    height: var(--size-40);
   }
 }
 .np-chip:hover {
   cursor: pointer;
 }
 .np-chip .np-chip-label {
-  padding-block-start: 2px;
+  padding-top: 2px;
 }
 .np-chip .np-close-button {
   pointer-events: auto;
 }
 .np-chip:last-child {
-  margin-inline-end: 0;
+  margin-right: 0;
 }
 [dir="rtl"] .np-chip:last-child {
-  margin-inline-start: 0;
-  margin-inline-end: initial;
+  margin-left: 0;
+  margin-right: 0;
+  margin-right: initial;
 }
 .np-chip:active {
+  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
+  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
   color: #fff;
 }
 .np-chip--selected {
   color: #fff;
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   pointer-events: none;
 }
 .np-chip--selected:hover,
 .np-chip--selected:active {
   color: #fff;
+  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .np-chip--selected .np-close-button {
   color: white;
 }
 .np-chip.has-error {
+  background: #e74848;
   background: var(--color-interactive-negative);
   color: #fff;
 }
@@ -61,79 +75,87 @@
   background: var(--color-sentiment-negative);
 }
 .np-theme-personal .np-chip.has-error,
-.np-theme-personal .np-chip.has-error:not(.disabled, :disabled):hover,
-.np-theme-personal .np-chip.has-error:not(.disabled, :disabled):active {
+.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):hover,
+.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):active {
   color: var(--color-contrast);
 }
-.np-theme-personal .np-chip.has-error:not(.disabled, :disabled):hover {
+.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):hover {
   background: var(--color-sentiment-negative-hover);
   border-color: var(--color-sentiment-negative-hover) !important;
 }
-.np-theme-personal .np-chip.has-error:not(.disabled, :disabled):active {
+.np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):active {
   background: var(--color-sentiment-negative-active);
   border-color: var(--color-sentiment-negative-active) !important;
 }
 .np-theme-personal .np-chip {
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   color: var(--color-interactive-primary);
-  padding-block: 0;
-  padding-inline: var(--size-16);
+  padding: 0 16px;
+  padding: 0 var(--size-16);
+  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
-.np-theme-personal .np-chip:not(.disabled, :disabled):hover {
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-primary-hover);
   background-color: var(--color-background-screen-hover);
+  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
-.np-theme-personal .np-chip:not(.disabled, :disabled):active {
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):active {
   color: var(--color-interactive-primary-active);
   background-color: var(--color-background-screen-active);
+  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
 }
 .np-theme-personal .np-chip .np-close-button {
-  margin-inline-end: calc(var(--size-8) * -1);
+  margin-right: calc(8px * -1);
+  margin-right: calc(var(--size-8) * -1);
   border-radius: inherit;
 }
 .np-theme-personal .np-chip .np-close-button,
 .np-theme-personal .np-chip .np-close-button:hover,
-.np-theme-personal .np-chip .np-close-button:not(.disabled, :disabled):hover,
-.np-theme-personal .np-chip .np-close-button:not(.disabled, :disabled):active {
+.np-theme-personal .np-chip .np-close-button:not(.disabled):not(:disabled):hover,
+.np-theme-personal .np-chip .np-close-button:not(.disabled):not(:disabled):active {
   color: inherit !important;
   background-color: transparent !important;
 }
-.np-theme-personal .np-chip:not(.disabled, :disabled):focus-visible,
-.np-theme-personal .np-chip:not(.disabled, :disabled):has(:focus-visible) {
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible,
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
-.np-theme-personal .np-chip:not(.disabled, :disabled):focus-visible .np-close-button,
-.np-theme-personal .np-chip:not(.disabled, :disabled):has(:focus-visible) .np-close-button {
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible .np-close-button,
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) .np-close-button {
   background: transparent;
   outline: none;
 }
-.np-theme-personal .np-chip:not(.disabled, :disabled):focus-visible .np-close-button:hover,
-.np-theme-personal .np-chip:not(.disabled, :disabled):has(:focus-visible) .np-close-button:hover {
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):focus-visible .np-close-button:hover,
+.np-theme-personal .np-chip:not(.disabled):not(:disabled):has(:focus-visible) .np-close-button:hover {
   color: inherit !important;
 }
 .np-theme-personal .np-chip.np-chip--removable {
   position: relative;
 }
 .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
-  padding-inline-end: var(--size-24);
+  padding-right: 24px;
+  padding-right: var(--size-24);
 }
-@media (--screen-400-zoom) {
+@media (max-width: 320px) {
   .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
-    padding-inline-end: var(--size-48);
+    padding-right: 48px;
+    padding-right: var(--size-48);
   }
 }
 .np-theme-personal .np-chip.np-chip--removable .np-close-button {
   justify-content: flex-end;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
   position: absolute;
-  padding-inline-end: var(--size-8);
-  block-size: 100%;
-  inline-size: 100%;
+  padding-right: 8px;
+  padding-right: var(--size-8);
+  height: 100%;
+  width: 100%;
 }
 .np-theme-personal .np-chip:has(.disabled, :disabled):focus-visible {
   outline: none;
@@ -144,14 +166,14 @@
   background-color: var(--color-interactive-primary);
   border-color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-chip--selected:not(.disabled, :disabled):hover,
-.np-theme-personal .np-chip--valid:not(.disabled, :disabled):hover {
+.np-theme-personal .np-chip--selected:not(.disabled):not(:disabled):hover,
+.np-theme-personal .np-chip--valid:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-contrast-hover);
   background-color: var(--color-interactive-primary-hover);
   border-color: var(--color-interactive-primary-hover);
 }
-.np-theme-personal .np-chip--selected:not(.disabled, :disabled):active,
-.np-theme-personal .np-chip--valid:not(.disabled, :disabled):active {
+.np-theme-personal .np-chip--selected:not(.disabled):not(:disabled):active,
+.np-theme-personal .np-chip--valid:not(.disabled):not(:disabled):active {
   color: var(--color-interactive-contrast-active);
   background-color: var(--color-interactive-primary-active);
   border-color: var(--color-interactive-primary-active);

package/build/styles/circularButton/CircularButton.css

@@ -9,24 +9,24 @@
   text-align: center;
   color: var(--color-interactive-primary);
 }
-.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled, :disabled):hover,
-.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled, :disabled):hover {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-primary-hover);
 }
-.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled, :disabled):active,
-.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled, :disabled):active {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
   color: var(--color-interactive-primary-active);
 }
 .np-circular-btn-primary-negative .np-circular-btn-label,
 .np-circular-btn-secondary-negative .np-circular-btn-label {
   color: var(--color-sentiment-negative-primary);
 }
-.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled, :disabled):hover,
-.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled, :disabled):hover {
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
   color: var(--color-sentiment-negative-primary-hover);
 }
-.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled, :disabled):active,
-.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled, :disabled):active {
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
   color: var(--color-sentiment-negative-primary-active);
 }
 .np-circular-btn-disabled {