@transferwise/components 0.0.0-experimental-6fa7ff3 → 0.0.0-experimental-f341b41

package/build/styles/circularButton/CircularButton.css

@@ -2,32 +2,173 @@
   display: inline-flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
   cursor: pointer;
+  position: relative;
 }
-.np-circular-btn-primary-default .np-circular-btn-label,
-.np-circular-btn-secondary-default .np-circular-btn-label {
+.np-circular-btn .tw-icon {
+  position: absolute;
+  top: 16px;
+  top: var(--size-16);
+  pointer-events: none;
+  color: white;
+  transition: color 0.15s ease-in-out;
+  width: 100%;
+  left: 0;
+}
+[dir="rtl"] .np-circular-btn .tw-icon {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+@media (max-width: 320px) {
+  .np-circular-btn .tw-icon {
+    top: 12px;
+    top: var(--size-12);
+  }
+}
+.np-circular-btn .tw-icon > svg {
+  margin: 0 auto;
+}
+.np-theme-personal .np-circular-btn {
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.np-theme-personal .np-circular-btn .tw-icon,
+.np-theme-personal .np-circular-btn .tw-icon:hover,
+.np-theme-personal .np-circular-btn .tw-icon:active {
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.negative .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):active .tw-icon {
+  color: var(--color-contrast) !important;
+}
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
+  color: var(--color-sentiment-negative) !important;
+}
+.np-circular-btn.accent .np-circular-btn__label {
+  color: #00a2dd;
+  color: var(--color-interactive-accent);
+}
+.np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #008fc9;
+  color: var(--color-interactive-accent-hover);
+}
+.np-circular-btn.accent:active .np-circular-btn__label,
+.np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
+  color: #0081ba;
+  color: var(--color-interactive-accent-active);
+}
+.np-circular-btn.accent.secondary .tw-icon {
+  color: #00a2dd;
+  color: var(--color-interactive-accent);
+}
+.np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-circular-btn.positive .np-circular-btn__label {
+  color: #2ead4b;
+  color: var(--color-interactive-positive);
+}
+.np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #069939;
+  color: var(--color-interactive-positive-hover);
+}
+.np-circular-btn.positive:active .np-circular-btn__label,
+.np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
+  color: #008b2b;
+  color: var(--color-interactive-positive-active);
+}
+.np-circular-btn.positive.secondary .tw-icon {
+  color: #2ead4b;
+  color: var(--color-interactive-positive);
+}
+.np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-circular-btn.negative .np-circular-btn__label {
+  color: #e74848;
+  color: var(--color-interactive-negative);
+}
+.np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #d03238;
+  color: var(--color-interactive-negative-hover);
+}
+.np-circular-btn.negative:active .np-circular-btn__label,
+.np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
+  color: #bf1e2c;
+  color: var(--color-interactive-negative-active);
+}
+.np-circular-btn.negative.secondary .tw-icon {
+  color: #e74848;
+  color: var(--color-interactive-negative);
+}
+.np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-theme-personal .np-circular-btn.accent .np-circular-btn__label {
   color: var(--color-interactive-primary);
 }
-.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 {
+.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
   color: var(--color-interactive-primary-hover);
 }
-.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 {
+.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
   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-theme-personal .np-circular-btn.accent.secondary .tw-icon {
+  color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.accent.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.positive .np-circular-btn__label {
+  color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: var(--color-interactive-primary-hover);
+}
+.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
+  color: var(--color-interactive-primary-active);
+}
+.np-theme-personal .np-circular-btn.positive.secondary .tw-icon {
+  color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.positive.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.negative .np-circular-btn__label {
+  color: var(--color-sentiment-negative);
+}
+.np-theme-personal .np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: var(--color-sentiment-negative-hover);
+}
+.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
+  color: var(--color-sentiment-negative-active);
 }
-.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-theme-personal .np-circular-btn.negative.secondary .tw-icon {
+  color: var(--color-sentiment-negative);
 }
-.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-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
 }
-.np-circular-btn-disabled {
-  cursor: not-allowed;
+.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
 }

package/build/styles/main.css

@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
-:root {
+.wds-Button {
   --Button-background: var(--color-interactive-accent);
   --Button-background-hover: var(--color-interactive-accent-hover);
   --Button-background-active: var(--color-interactive-accent-active);
@@ -726,7 +726,6 @@ div.critical-comms .critical-comms-body {
   --Button-size-small-padding: 5px var(--size-12);
   --Button-size-medium-padding: var(--size-8) var(--size-12);
   --Button-size-large-padding: var(--size-12) var(--size-16);
-  --Button-avatar-border-color: var(--color-border-neutral);
   --Button-transition-duration: 150ms;
   --Button-transition-easing: ease-in-out;
   --Button-secondary-background: var(--color-interactive-neutral);
@@ -745,31 +744,15 @@ div.critical-comms .critical-comms-body {
   --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
   --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
   --Button-primary-negative-color: var(--color-contrast);
-  --Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
   --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
   --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
   --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
   --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
-}
-.np-theme-personal--dark .wds-Button {
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --color-interactive-neutral: rgba(159,232,112,0.2);
-  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
-  --color-interactive-neutral-active: rgba(236,255,224,0.2);
-  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
-  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
-  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
-  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
-  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
 }
 .np-theme-personal--bright-green .wds-Button {
   --color-contrast: #FFFFFF;
   --Button-secondary-color: var(--color-interactive-control);
   --Button-secondary-negative-color: var(--color-contrast);
-  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
 }
 /* Button Styles */
 .wds-Button {
@@ -787,16 +770,12 @@ div.critical-comms .critical-comms-body {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: #00a2dd;
   background-color: var(--Button-background);
   border: none;
-  border-radius: 9999px;
   border-radius: var(--Button-border-radius);
   color: var(--Button-color);
   cursor: pointer;
-  padding: 8px 12px;
   padding: var(--Button-padding);
-  transition: color, background-color 150ms ease-in-out;
   transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 }
 .wds-Button:focus {
@@ -804,13 +783,11 @@ div.critical-comms .critical-comms-body {
   text-decoration: none;
 }
 .wds-Button:hover {
-  background-color: #008fc9;
   background-color: var(--Button-background-hover);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 .wds-Button:active {
-  background-color: #0081ba;
   background-color: var(--Button-background-active);
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -825,7 +802,6 @@ div.critical-comms .critical-comms-body {
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,
 .wds-Button:disabled:active {
-  background-color: #00a2dd;
   background-color: var(--Button-background);
 }
 .wds-Button--secondary {
@@ -863,14 +839,12 @@ div.critical-comms .critical-comms-body {
   --Button-background-hover: var(--Button-primary-negative-background-hover);
   --Button-background-active: var(--Button-primary-negative-background-active);
   --Button-color: var(--Button-primary-negative-color);
-  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
 }
 .wds-Button--negative.wds-Button--secondary {
   --Button-background: var(--Button-secondary-negative-background);
   --Button-background-hover: var(--Button-secondary-negative-background-hover);
   --Button-background-active: var(--Button-secondary-negative-background-active);
   --Button-color: var(--Button-secondary-negative-color);
-  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
 }
 .wds-Button--small {
   --Button-padding: var(--Button-size-small-padding);
@@ -903,9 +877,6 @@ div.critical-comms .critical-comms-body {
   margin-right: 0;
   margin-left: 5px;
 }
-.wds-Button-avatars .np-circle {
-  --circle-border-color: var(--Button-avatar-border-color);
-}
 .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
   color: var(--Button-color);
 }
@@ -963,6 +934,27 @@ div.critical-comms .critical-comms-body {
 [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
   transform: rotate(180deg);
 }
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.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):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--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--minimal .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,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;
@@ -1442,34 +1434,175 @@ div.critical-comms .critical-comms-body {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
   cursor: pointer;
+  position: relative;
+}
+.np-circular-btn .tw-icon {
+  position: absolute;
+  top: 16px;
+  top: var(--size-16);
+  pointer-events: none;
+  color: white;
+  transition: color 0.15s ease-in-out;
+  width: 100%;
+  left: 0;
+}
+[dir="rtl"] .np-circular-btn .tw-icon {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+@media (max-width: 320px) {
+  .np-circular-btn .tw-icon {
+    top: 12px;
+    top: var(--size-12);
+  }
+}
+.np-circular-btn .tw-icon > svg {
+  margin: 0 auto;
+}
+.np-theme-personal .np-circular-btn {
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.np-theme-personal .np-circular-btn .tw-icon,
+.np-theme-personal .np-circular-btn .tw-icon:hover,
+.np-theme-personal .np-circular-btn .tw-icon:active {
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.negative .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):active .tw-icon {
+  color: var(--color-contrast) !important;
+}
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
+  color: var(--color-sentiment-negative) !important;
+}
+.np-circular-btn.accent .np-circular-btn__label {
+  color: #00a2dd;
+  color: var(--color-interactive-accent);
+}
+.np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #008fc9;
+  color: var(--color-interactive-accent-hover);
+}
+.np-circular-btn.accent:active .np-circular-btn__label,
+.np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
+  color: #0081ba;
+  color: var(--color-interactive-accent-active);
 }
-.np-circular-btn-primary-default .np-circular-btn-label,
-.np-circular-btn-secondary-default .np-circular-btn-label {
+.np-circular-btn.accent.secondary .tw-icon {
+  color: #00a2dd;
+  color: var(--color-interactive-accent);
+}
+.np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-circular-btn.positive .np-circular-btn__label {
+  color: #2ead4b;
+  color: var(--color-interactive-positive);
+}
+.np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #069939;
+  color: var(--color-interactive-positive-hover);
+}
+.np-circular-btn.positive:active .np-circular-btn__label,
+.np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
+  color: #008b2b;
+  color: var(--color-interactive-positive-active);
+}
+.np-circular-btn.positive.secondary .tw-icon {
+  color: #2ead4b;
+  color: var(--color-interactive-positive);
+}
+.np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-circular-btn.negative .np-circular-btn__label {
+  color: #e74848;
+  color: var(--color-interactive-negative);
+}
+.np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: #d03238;
+  color: var(--color-interactive-negative-hover);
+}
+.np-circular-btn.negative:active .np-circular-btn__label,
+.np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
+  color: #bf1e2c;
+  color: var(--color-interactive-negative-active);
+}
+.np-circular-btn.negative.secondary .tw-icon {
+  color: #e74848;
+  color: var(--color-interactive-negative);
+}
+.np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+}
+.np-theme-personal .np-circular-btn.accent .np-circular-btn__label {
   color: var(--color-interactive-primary);
 }
-.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 {
+.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
   color: var(--color-interactive-primary-hover);
 }
-.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 {
+.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
   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-theme-personal .np-circular-btn.accent.secondary .tw-icon {
+  color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
 }
-.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-theme-personal .np-circular-btn.accent.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
 }
-.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-theme-personal .np-circular-btn.positive .np-circular-btn__label {
+  color: var(--color-interactive-primary);
 }
-.np-circular-btn-disabled {
-  cursor: not-allowed;
+.np-theme-personal .np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: var(--color-interactive-primary-hover);
+}
+.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
+  color: var(--color-interactive-primary-active);
+}
+.np-theme-personal .np-circular-btn.positive.secondary .tw-icon {
+  color: var(--color-interactive-primary);
+}
+.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.positive.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.negative .np-circular-btn__label {
+  color: var(--color-sentiment-negative);
+}
+.np-theme-personal .np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+  color: var(--color-sentiment-negative-hover);
+}
+.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label,
+.np-theme-personal .np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
+  color: var(--color-sentiment-negative-active);
+}
+.np-theme-personal .np-circular-btn.negative.secondary .tw-icon {
+  color: var(--color-sentiment-negative);
+}
+.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
+.np-theme-personal .np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
+  color: white;
+  color: var(--color-interactive-control);
+}
+.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
+  color: var(--color-interactive-control);
 }
 .np-circle {
   border-radius: 9999px;

package/build/types/avatarView/AvatarView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AAmGD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BA+BP;AAwFD,eAAe,UAAU,CAAC"}

package/build/types/circularButton/CircularButton.d.ts

@@ -1,22 +1,15 @@
 import { ControlType, Priority } from '../common';
-/**
- * @deprecated use `'default'` instead
- */
-type DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;
 export interface CircularButtonProps {
     className?: string;
     children: string;
     disabled?: boolean;
     icon: React.ReactElement<{
         size?: unknown;
-    }> | React.ReactNode;
-    onClick?: React.MouseEventHandler<HTMLInputElement> & React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLAnchorElement>;
+    }>;
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
     priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
-    /**
-     * `"accent"` and `"positive"` values are **deprecated**, please use `"default"` instead
-     */
-    type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;
+    type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;
 }
-declare const CircularButton: ({ className, children, disabled, icon, onClick, priority, type, }: CircularButtonProps) => import("react").JSX.Element;
+declare const CircularButton: ({ className, children, disabled, icon, priority, type, ...rest }: CircularButtonProps) => import("react").JSX.Element;
 export default CircularButton;
 //# sourceMappingURL=CircularButton.d.ts.map

package/build/types/circularButton/CircularButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircularButton.d.ts","sourceRoot":"","sources":["../../../src/circularButton/CircularButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,WAAW,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AAI1E;;GAEG;AACH,KAAK,eAAe,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;AAEtE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,GACjD,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAC1C,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,GAAG,SAAS,GAAG,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;CAChE;AAED,QAAA,MAAM,cAAc,sEAQjB,mBAAmB,gCA8BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CircularButton.d.ts","sourceRoot":"","sources":["../../../src/circularButton/CircularButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,WAAW,EAAE,QAAQ,EAAc,MAAM,WAAW,CAAC;AAI1E,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;IACtD,IAAI,CAAC,EAAE,GAAG,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;CAC9E;AAED,QAAA,MAAM,cAAc,qEAQjB,mBAAmB,gCAyBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/definitionList/DefinitionList.d.ts

@@ -8,11 +8,12 @@ export interface DefinitionListDefinition {
     value: React.ReactNode;
     key: string;
 }
-export type DefinitionListLayout = `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
+type DefinitionListLayout = `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
 export interface DefinitionListProps {
     definitions?: DefinitionListDefinition[];
     layout?: DefinitionListLayout;
     muted?: boolean;
 }
 export default function DefinitionList({ definitions, layout, muted, }: DefinitionListProps): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=DefinitionList.d.ts.map

package/build/types/definitionList/DefinitionList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefinitionList.d.ts","sourceRoot":"","sources":["../../../src/definitionList/DefinitionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,oBAAoB,GAC9B,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,oBAAoB,GAAG,MAAM,CAAC,uBAAuB,GAAG,MAAM,CAAC,wBAAwB,EAAE,CAAC;AAEhK,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAoCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAgC,EAChC,MAA8B,EAC9B,KAAK,GACN,EAAE,mBAAmB,+BAmCrB"}
+{"version":3,"file":"DefinitionList.d.ts","sourceRoot":"","sources":["../../../src/definitionList/DefinitionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,KAAK,oBAAoB,GACvB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,GAAG,MAAM,CAAC,oBAAoB,GAAG,MAAM,CAAC,uBAAuB,GAAG,MAAM,CAAC,wBAAwB,EAAE,CAAC;AAEhK,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACzC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAoCD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAgC,EAChC,MAA8B,EAC9B,KAAK,GACN,EAAE,mBAAmB,+BAmCrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-6fa7ff3",
+  "version": "0.0.0-experimental-f341b41",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,12 +92,12 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-6fa7ff3",
+    "@transferwise/neptune-css": "0.0.0-experimental-f341b41",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-6fa7ff3",
+    "@transferwise/neptune-css": "0.0.0-experimental-f341b41",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/avatarView/AvatarView.tsx

@@ -69,10 +69,7 @@ function AvatarView({
           className={clsx('np-avatar-view-content')}
           enableBorder={!interactive || selected}
           style={{
-            ...(selected && {
-              '--circle-border-color': 'var(--color-interactive-primary)',
-              '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,
-            }),
+            ...(selected && { '--circle-border-color': 'var(--color-interactive-primary)' }),
             ...style,
           }}
         >
@@ -96,17 +93,6 @@ const MAP_BADGE_ASSET_SIZE = {
   72: 24,
 } satisfies Record<number, BadgeAssetsProps['size']>;
 
-/** Border width for `selected` state determined by avatar size */
-const MAP_SELECTED_BORDER_WIDTH = {
-  16: 1,
-  24: 1,
-  32: 1,
-  40: 2,
-  48: 2,
-  56: 2,
-  72: 2,
-};
-
 /** Certain sizes of AvatarView has a custom offset for badge */
 const MAP_BADGE_POSITION = {
   24: -6,