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

package/build/main.css

@@ -1442,175 +1442,34 @@ 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.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 {
+.np-circular-btn-primary-default .np-circular-btn-label,
+.np-circular-btn-secondary-default .np-circular-btn-label {
   color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+.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-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 {
+.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-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,
+.np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: var(--color-sentiment-negative-primary);
 }
-.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):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: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-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:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
+.np-circular-btn-disabled {
+  cursor: not-allowed;
 }
 .np-circle {
   border-radius: 9999px;

package/build/styles/circularButton/CircularButton.css

@@ -2,173 +2,32 @@
   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.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 {
+.np-circular-btn-primary-default .np-circular-btn-label,
+.np-circular-btn-secondary-default .np-circular-btn-label {
   color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+.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-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 {
+.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-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,
+.np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: var(--color-sentiment-negative-primary);
 }
-.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):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: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-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:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
+.np-circular-btn-disabled {
+  cursor: not-allowed;
 }

package/build/styles/main.css

@@ -1442,175 +1442,34 @@ 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.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 {
+.np-circular-btn-primary-default .np-circular-btn-label,
+.np-circular-btn-secondary-default .np-circular-btn-label {
   color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+.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-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 {
+.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-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,
+.np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: var(--color-sentiment-negative-primary);
 }
-.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):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: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-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:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
+.np-circular-btn-disabled {
+  cursor: not-allowed;
 }
 .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,+BA+BP;AAwFD,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,+BAkCP;AAmGD,eAAe,UAAU,CAAC"}

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

@@ -1,15 +1,22 @@
 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;
-    }>;
-    onClick?: React.MouseEventHandler<HTMLInputElement>;
+    }> | React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLInputElement> & React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLAnchorElement>;
     priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
-    type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;
+    /**
+     * `"accent"` and `"positive"` values are **deprecated**, please use `"default"` instead
+     */
+    type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;
 }
-declare const CircularButton: ({ className, children, disabled, icon, priority, type, ...rest }: CircularButtonProps) => import("react").JSX.Element;
+declare const CircularButton: ({ className, children, disabled, icon, onClick, priority, type, }: 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":"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"}
+{"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"}

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

@@ -8,12 +8,11 @@ export interface DefinitionListDefinition {
     value: React.ReactNode;
     key: string;
 }
-type DefinitionListLayout = `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
+export 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,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"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-c2e635d",
+  "version": "0.0.0-experimental-6fa7ff3",
   "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-c2e635d",
+    "@transferwise/neptune-css": "0.0.0-experimental-6fa7ff3",
     "@wise/components-theming": "1.6.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-c2e635d",
+    "@transferwise/neptune-css": "0.0.0-experimental-6fa7ff3",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",