@transferwise/components 0.0.0-experimental-1bc70dc → 0.0.0-experimental-cbe4279

package/src/avatarView/AvatarView.css

@@ -1,44 +0,0 @@
-.np-dot {
-  --np-dot-size: 14px;
-  position: relative;
-  display: inline-block;
-}
-.np-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-}
-.np-dot-badge {
-  position: absolute;
-  width: var(--np-dot-size);
-  height: var(--np-dot-size);
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  right: 0;
-}
-.np-dot-badge-notification {
-  background-color: var(--color-sentiment-negative);
-}
-.np-dot-badge-online {
-  background-color: #00a2dd;
-  background-color: var(--color-interactive-accent);
-}
-.np-avatar-view .np-avatar-view-content {
-  color: #37517e;
-  color: var(--color-sentiment-content-primary, var(--color-content-primary));
-}
-.np-avatar-view-interactive {
-  cursor: pointer;
-}
-.np-avatar-view-interactive .np-circle {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: var(--color-interactive-primary);
-}
-.np-avatar-view-non-interactive .np-circle {
-  background-color: transparent;
-}
-.np-avatar-view-non-interactive .np-avatar-view-content .wds-flag {
-  box-shadow: none;
-}

package/src/avatarView/Dot.css

@@ -1,26 +0,0 @@
-.np-dot {
-  --np-dot-size: 14px;
-  position: relative;
-  display: inline-block;
-}
-.np-dot-mask {
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black 0);
-}
-.np-dot-badge {
-  position: absolute;
-  width: var(--np-dot-size);
-  height: var(--np-dot-size);
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  right: 0;
-}
-.np-dot-badge-notification {
-  background-color: var(--color-sentiment-negative);
-}
-.np-dot-badge-online {
-  background-color: #00a2dd;
-  background-color: var(--color-interactive-accent);
-}

package/src/badge/Badge.css

@@ -1,65 +0,0 @@
-.tw-badge {
-  position: relative;
-  display: inline-block;
-  --badge-size: 16px;
-  --badge-mask: 2px;
-  --badge-mask-offset: calc(var(--badge-size) / 2);
-  --badge-border-color: rgba(255, 255, 255, 0.08);
-  --badge-content-position: 0px;
-}
-.tw-badge.tw-badge-lg {
-  --badge-size: 24px;
-  --badge-mask: 3px;
-}
-.tw-badge.tw-badge-border-dark {
-  --badge-border-color: rgba(0, 0, 0, 0.08);
-}
-.tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset) - var(--badge-content-position)) left calc(100% - var(--badge-mask-offset) - var(--badge-content-position)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-}
-[dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-}
-.tw-badge > .tw-badge__content {
-  position: absolute;
-  width: var(--badge-size);
-  height: var(--badge-size);
-  bottom: var(--badge-content-position);
-  right: var(--badge-content-position);
-  box-sizing: border-box;
-  border-radius: 50%;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-[dir="rtl"] .tw-badge > .tw-badge__content {
-  left: var(--badge-content-position);
-  right: auto;
-  right: initial;
-}
-.tw-badge > .tw-badge__content * {
-  max-height: 100%;
-  max-width: 100%;
-}
-.tw-badge.tw-badge-border-light > .tw-badge.tw-badge-border-light__children,
-.tw-badge.tw-badge-border-light > .tw-badge.tw-badge-border-dark__children,
-.tw-badge.tw-badge-border-dark > .tw-badge.tw-badge-border-light__children,
-.tw-badge.tw-badge-border-dark > .tw-badge.tw-badge-border-dark__children {
-  -webkit-mask-image: none;
-          mask-image: none;
-}
-.tw-badge.tw-badge-border-light > .tw-badge.tw-badge-border-light__content,
-.tw-badge.tw-badge-border-light > .tw-badge.tw-badge-border-dark__content,
-.tw-badge.tw-badge-border-dark > .tw-badge.tw-badge-border-light__content,
-.tw-badge.tw-badge-border-dark > .tw-badge.tw-badge-border-dark__content {
-  border-style: solid inset solid solid;
-  border-width: 1px;
-  border-color: var(--badge-border-color);
-}

package/src/body/Body.css

@@ -1,3 +0,0 @@
-.np-text--pre-line {
-  white-space: pre-line;
-}

package/src/button/Button.css

@@ -1,246 +0,0 @@
-.wds-Button {
-  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
-  --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
-  --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
-  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
-  --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
-  --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: var(--size-5) var(--size-12);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
-  --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
-  --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
-  --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
-  --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
-  --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
-  --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
-  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
-  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
-  --Button-tertiary-background: transparent;
-  --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
-  --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
-  --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
-  --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --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-overlay);
-  --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-negative-color-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
-}
-.np-theme-personal--bright-green .wds-Button {
-  --Button-primary-negative-color: var(--color-white);
-  --Button-secondary-negative-color: var(--color-white);
-}
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-align: center;
-  white-space: nowrap;
-  word-wrap: break-word;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
-}
-.wds-Button,
-.wds-Button:hover,
-.wds-Button:active,
-.wds-Button:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--Button-color);
-}
-.wds-Button:hover {
-  --Button-color: var(--Button-color-hover);
-  background-color: var(--Button-background-hover);
-}
-.wds-Button:active {
-  --Button-color: var(--Button-color-active);
-  background-color: var(--Button-background-active);
-}
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled {
-  filter: none;
-  mix-blend-mode: luminosity;
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled,
-.wds-Button.wds-Button--disabled:hover,
-.wds-Button:disabled:hover,
-.wds-Button.wds-Button--disabled:active,
-.wds-Button:disabled:active {
-  background-color: var(--Button-background);
-}
-.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-background);
-  --Button-background-hover: var(--Button-secondary-background-hover);
-  --Button-background-active: var(--Button-secondary-background-active);
-  --Button-color: var(--Button-secondary-color);
-  --Button-color-hover: var(--Button-secondary-color-hover);
-  --Button-color-active: var(--Button-secondary-color-active);
-}
-.wds-Button--secondary-neutral {
-  --Button-background: var(--Button-secondary-neutral-background);
-  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
-  --Button-background-active: var(--Button-secondary-neutral-background-active);
-  --Button-color: var(--Button-secondary-neutral-color);
-  --Button-color-hover: var(--Button-secondary-neutral-color);
-  --Button-color-active: var(--Button-secondary-neutral-color);
-}
-.wds-Button--secondary-neutral .wds-Button-icon--end {
-  color: var(--Button-secondary-color);
-}
-.wds-Button--tertiary {
-  --Button-background: var(--Button-tertiary-background);
-  --Button-background-hover: var(--Button-tertiary-background-hover);
-  --Button-background-active: var(--Button-tertiary-background-active);
-  --Button-color: var(--Button-tertiary-color);
-  --Button-color-hover: var(--Button-tertiary-color-hover);
-  --Button-color-active: var(--Button-tertiary-color-active);
-}
-.wds-Button--tertiary .wds-Button-labelText,
-.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;
-}
-.wds-Button--negative.wds-Button--primary {
-  --Button-background: var(--Button-primary-negative-background);
-  --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);
-}
-.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-color-hover: var(--Button-secondary-negative-color-hover);
-  --Button-color-active: var(--Button-secondary-negative-color-active);
-}
-.wds-Button--large {
-  padding: var(--Button-large-padding);
-}
-.wds-Button--medium {
-  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 {
-  margin-inline-end: var(--Button-label-gap);
-}
-.wds-Button--small {
-  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 {
-  width: 100%;
-}
-.wds-Button-avatars {
-  display: inline-flex;
-}
-.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
-  color: var(--Button-color);
-}
-.wds-Button-icon {
-  display: inline-block;
-}
-.wds-Button-icon--md {
-  --Button-iconSize: 18px;
-}
-.wds-Button-icon--sm {
-  --Button-iconSize: 16px;
-}
-.wds-Button-icon svg {
-  width: var(--Button-iconSize);
-  height: var(--Button-iconSize);
-}
-.wds-Button-content {
-  position: relative;
-}
-.wds-Button-content--loading .wds-Button-label,
-.wds-Button-content--loading .wds-Button-media,
-.wds-Button-content--loading .wds-Button-icon {
-  visibility: hidden;
-  opacity: 0;
-}
-.wds-Button-label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--Button-label-gap);
-  position: relative;
-}
-.wds-Button-loader {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.wds-Button-loader .process-circle {
-  stroke: var(--Button-color);
-}
-/* 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--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,
-.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--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 {
-  scale: -1 1;
-}

package/src/button/Button.vars.css

@@ -1,46 +0,0 @@
-.wds-Button {
-  --Button-background: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
-  --Button-background-hover: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
-  --Button-background-active: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
-  --Button-color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
-  --Button-color-hover: var(--color-sentiment-interactive-control-hover, var(--color-interactive-control-hover));
-  --Button-color-active: var(--color-sentiment-interactive-control-active, var(--color-interactive-control-active));
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: var(--size-5) var(--size-12);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
-  --Button-secondary-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
-  --Button-secondary-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
-  --Button-secondary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  --Button-secondary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
-  --Button-secondary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
-  --Button-secondary-neutral-background: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-neutral));
-  --Button-secondary-neutral-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-neutral-hover));
-  --Button-secondary-neutral-background-active: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-neutral-active));
-  --Button-secondary-neutral-color: var(--color-sentiment-content-primary, var(--color-content-primary));
-  --Button-tertiary-background: transparent;
-  --Button-tertiary-background-hover: var(--color-sentiment-interactive-secondary-neutral, var(--color-background-screen-hover));
-  --Button-tertiary-background-active: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-active));
-  --Button-tertiary-color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
-  --Button-tertiary-color-hover: var(--color-sentiment-content-primary-hover, var(--color-interactive-primary-hover));
-  --Button-tertiary-color-active: var(--color-sentiment-content-primary-active, var(--color-interactive-primary-active));
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --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-overlay);
-  --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-negative-color-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
-}
-.np-theme-personal--bright-green .wds-Button {
-  --Button-primary-negative-color: var(--color-white);
-  --Button-secondary-negative-color: var(--color-white);
-}

package/src/button/LegacyButton.css

@@ -1,23 +0,0 @@
-.np-btn {
-  position: relative;
-}
-.np-btn.np-btn-block > span.btn-loader {
-  position: absolute;
-  left: 24px;
-  left: var(--size-24);
-}
-[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  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 {
-  top: 0;
-}
-.np-btn.disabled[class] {
-  pointer-events: auto;
-}

package/src/card/Card.css

@@ -1,100 +0,0 @@
-.np-card {
-  overflow: hidden;
-  transition-property: transform, box-shadow;
-  transition-duration: 0.35s;
-  transition-timing-function: ease;
-}
-.np-card .media {
-  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 {
-  box-shadow: 0 1px 10px 0 rgba(69, 71, 69, 0.2);
-}
-.np-theme-personal--forest-green .np-card--expanded,
-.np-theme-personal--bright-green .np-card--expanded,
-.np-theme-personal--dark .np-card--expanded {
-  box-shadow: none;
-}
-.np-card--inactive .decision {
-  cursor: default;
-}
-@media (min-width: 480px) {
-  .np-card--has-icon .np-card__content {
-    padding: 24px 72px;
-    padding: var(--size-24) var(--size-72);
-  }
-}
-@media (min-width: 480px) {
-  .np-card--has-icon .np-card__divider--expanded {
-    margin: 0 72px;
-    margin: 0 var(--size-72);
-  }
-}
-.np-card__button {
-  background-color: transparent;
-  text-align: left;
-  width: 100%;
-}
-[dir="rtl"] .np-card__button {
-  text-align: right;
-}
-.np-theme-personal .np-card__button:focus {
-  outline: none;
-}
-.np-theme-personal .np-card__button:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
-.np-card__content {
-  padding: 24px 16px;
-  padding: var(--size-24) var(--size-16);
-}
-.np-theme-personal .np-card__content {
-  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);
-  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 */
-}
-.np-theme-personal .np-card__divider {
-  transition: none;
-  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));
-}
-.np-theme-personal .np-card__button:focus {
-  outline: none;
-}
-.np-theme-personal .np-card__button:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
-.np-theme-personal .np-card--expanded .np-card__button {
-  border-radius: 16px 16px 0 0;
-  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
-}