@transferwise/components 0.0.0-experimental-8078c24 → 0.0.0-experimental-7d89ae8

package/src/styles/less/process.css

@@ -1,483 +0,0 @@
-/*
-// Keep these sizes in case we want to add these back in.
-@process-lg-radius: 48px;
-@process-lg-stroke: 2.7px;
-@process-lg-circumference: (pi() * (2 * (@process-lg-radius - 1)));
-@process-lg-icon-size: 48px;
-@process-lg-icon-stroke: 6px;
-
-@process-md-radius: 36px;
-@process-md-circumference: (pi() * (2 * (@process-md-radius - 1)));
-@process-md-stroke: 2.5px;
-@process-md-icon-size: 36px;
-@process-md-icon-stroke: 4px;
-*/
-.process {
-  position: relative;
-  margin: auto;
-  display: block;
-}
-.process svg {
-  width: 100%;
-  height: 100%;
-}
-.process-circle {
-  transform-origin: center center;
-  transition: stroke 1s 0.2s linear;
-  stroke: #0097c7;
-  stroke: var(--color-content-accent);
-  stroke-opacity: 1;
-  stroke-linecap: round;
-  -webkit-transform: translate3d(0, 0, 0);
-  animation-duration: 1.5s;
-  animation-timing-function: ease-out;
-  animation-iteration-count: infinite;
-}
-.np-theme-personal .process-circle {
-  stroke: #37517e;
-  stroke: var(--color-content-primary);
-}
-.np-theme-personal--forest-green .process-circle,
-.np-theme-personal--bright-green .process-circle,
-.np-theme-personal--dark .process-circle {
-  stroke: var(--color-interactive-primary);
-}
-.process-inverse .process-circle {
-  stroke: #ffffff;
-  stroke: var(--color-background-screen);
-}
-.process-icon-container {
-  position: absolute;
-  display: inline-block;
-  transform: rotate(45deg);
-  height: 50%;
-  width: 50%;
-  left: 25%;
-  top: 25%;
-}
-.process-icon-horizontal,
-.process-icon-vertical {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-}
-.process-success .process-icon-horizontal {
-  background-color: #008026;
-  background-color: var(--color-content-positive);
-  bottom: 0;
-  left: 0;
-}
-.np-theme-personal .process-success .process-icon-horizontal {
-  background-color: var(--color-sentiment-positive);
-}
-.process-success .process-icon-vertical {
-  background-color: #008026;
-  background-color: var(--color-content-positive);
-  top: 100%;
-  right: 0;
-}
-.np-theme-personal .process-success .process-icon-vertical {
-  background-color: var(--color-sentiment-positive);
-}
-.process-success .process-circle {
-  stroke: #008026;
-  stroke: var(--color-content-positive);
-}
-.np-theme-personal .process-success .process-circle {
-  stroke: var(--color-sentiment-positive);
-}
-.process-danger .process-icon-horizontal {
-  background-color: #cf2929;
-  background-color: var(--color-content-negative);
-  left: 0;
-}
-.np-theme-personal .process-danger .process-icon-horizontal {
-  background-color: var(--color-sentiment-negative);
-}
-.process-danger .process-icon-vertical {
-  background-color: #cf2929;
-  background-color: var(--color-content-negative);
-  top: 0;
-}
-.np-theme-personal .process-danger .process-icon-vertical {
-  background-color: var(--color-sentiment-negative);
-}
-.process-danger .process-circle {
-  stroke: #cf2929;
-  stroke: var(--color-content-negative);
-}
-.np-theme-personal .process-danger .process-circle {
-  stroke: var(--color-sentiment-negative);
-}
-.process-success .process-circle,
-.process-danger .process-circle {
-  animation-duration: 1.5s;
-  animation-delay: 1ms;
-  animation-timing-function: ease-out;
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-}
-.process-success .process-icon-horizontal,
-.process-danger .process-icon-horizontal {
-  /* Animation over transition, to run once on load */
-  animation: process-width 0.3s 1.2s ease forwards;
-}
-.process-success .process-icon-vertical,
-.process-danger .process-icon-vertical {
-  /* Animation over transition, to run once on load */
-  animation: process-height 0.3s 1.5s ease forwards;
-}
-.process-stopped .process-circle {
-  animation: none;
-}
-.process-stopped .process-icon-container {
-  display: none;
-}
-.process-xs {
-  width: 12px;
-  height: 12px;
-}
-.process-xs .process-circle {
-  /* Hide before animation to prevent glitching */
-  stroke-dashoffset: 31.41592654px;
-  stroke-dasharray: 31.41592654px;
-  stroke-width: 1.5px;
-}
-.process-xs.process-danger .process-icon-horizontal {
-  top: 2.5px;
-  height: 1px;
-}
-.process-xs.process-danger .process-icon-vertical {
-  left: 2.5px;
-  width: 1px;
-}
-.process-xs .process-icon-horizontal,
-.process-xs .process-icon-vertical {
-  border-radius: 0.5px;
-}
-.process-xs.process-success .process-icon-container {
-  width: 2.5px;
-  height: 5px;
-  left: 4.5px;
-}
-.process-xs.process-success .process-icon-horizontal {
-  height: 1px;
-}
-.process-xs.process-success .process-icon-vertical {
-  width: 1px;
-}
-.process-xs {
-  width: 24px;
-  height: 24px;
-}
-.process-xs .process-circle {
-  /* Hide before animation to prevent glitching */
-  stroke-dashoffset: 69.11503838px;
-  stroke-dasharray: 69.11503838px;
-  stroke-width: 2px;
-}
-.process-xs.process-danger .process-icon-horizontal {
-  top: 5px;
-  height: 2px;
-}
-.process-xs.process-danger .process-icon-vertical {
-  left: 5px;
-  width: 2px;
-}
-.process-xs .process-icon-horizontal,
-.process-xs .process-icon-vertical {
-  border-radius: 1px;
-}
-.process-xs.process-success .process-icon-container {
-  width: 5px;
-  height: 10px;
-  left: 9px;
-}
-.process-xs.process-success .process-icon-horizontal {
-  height: 2px;
-}
-.process-xs.process-success .process-icon-vertical {
-  width: 2px;
-}
-.process-sm {
-  width: 48px;
-  height: 48px;
-}
-.process-sm .process-circle {
-  /* Hide before animation to prevent glitching */
-  stroke-dashoffset: 144.51326207px;
-  stroke-dasharray: 144.51326207px;
-  stroke-width: 2.4px;
-}
-.process-sm.process-danger .process-icon-horizontal {
-  top: 10.5px;
-  height: 3px;
-}
-.process-sm.process-danger .process-icon-vertical {
-  left: 10.5px;
-  width: 3px;
-}
-.process-sm .process-icon-horizontal,
-.process-sm .process-icon-vertical {
-  border-radius: 1.5px;
-}
-.process-sm.process-success .process-icon-container {
-  width: 10.5px;
-  height: 21px;
-  left: 18px;
-}
-.process-sm.process-success .process-icon-horizontal {
-  height: 3px;
-}
-.process-sm.process-success .process-icon-vertical {
-  width: 3px;
-}
-.process-xl {
-  width: 128px;
-  height: 128px;
-}
-.process-xl .process-circle {
-  /* Hide before animation to prevent glitching */
-  stroke-dashoffset: 395.84067435px;
-  stroke-dasharray: 395.84067435px;
-  stroke-width: 3px;
-}
-.process-xl.process-danger .process-icon-horizontal {
-  top: 28px;
-  height: 8px;
-}
-.process-xl.process-danger .process-icon-vertical {
-  left: 28px;
-  width: 8px;
-}
-.process-xl .process-icon-horizontal,
-.process-xl .process-icon-vertical {
-  border-radius: 4px;
-}
-.process-xl.process-success .process-icon-container {
-  width: 28px;
-  height: 56px;
-  left: 48px;
-}
-.process-xl.process-success .process-icon-horizontal {
-  height: 8px;
-}
-.process-xl.process-success .process-icon-vertical {
-  width: 8px;
-}
-.process-xxs .process-circle {
-  animation-name: process-chase-circle-xxs;
-}
-.process-xxs.process-success .process-circle,
-.process-xxs.process-danger .process-circle {
-  animation-name: process-success-circle-xxs;
-}
-.process-xs .process-circle {
-  animation-name: process-chase-circle-xs;
-}
-.process-xs.process-success .process-circle,
-.process-xs.process-danger .process-circle {
-  animation-name: process-success-circle-xs;
-}
-.process-sm .process-circle {
-  animation-name: process-chase-circle-sm;
-}
-.process-sm.process-success .process-circle,
-.process-sm.process-danger .process-circle {
-  animation-name: process-success-circle-sm;
-}
-.process-xl .process-circle {
-  animation-name: process-chase-circle-xl;
-}
-.process-xl.process-success .process-circle,
-.process-xl.process-danger .process-circle {
-  animation-name: process-success-circle-xl;
-}
-@keyframes process-chase-circle-xxs {
-  0% {
-    transform: rotate(0deg);
-    stroke-dashoffset: 93.24777961px;
-    stroke-dasharray: 31.41592654px;
-  }
-  25% {
-    stroke-dashoffset: 30.41592654px;
-    stroke-dasharray: 15.70796327px;
-  }
-  75% {
-    stroke-dashoffset: 30.41592654px;
-    stroke-dasharray: 23.5619449px;
-  }
-  100% {
-    transform: rotate(360deg);
-    stroke-dashoffset: 30.41592654px;
-    stroke-dasharray: 31.41592654px;
-  }
-}
-@keyframes process-success-circle-xxs {
-  0% {
-    transform: rotate(0deg);
-    stroke-dashoffset: 30.41592654px;
-    stroke-dasharray: 31.41592654px;
-  }
-  100% {
-    transform: rotate(360deg);
-    stroke-dashoffset: 0;
-    stroke-dasharray: 31.41592654px;
-  }
-}
-@keyframes process-chase-circle-xs {
-  0% {
-    transform: rotate(0deg);
-    stroke-dashoffset: 206.34511514px;
-    stroke-dasharray: 69.11503838px;
-  }
-  25% {
-    stroke-dashoffset: 68.11503838px;
-    stroke-dasharray: 34.55751919px;
-  }
-  75% {
-    stroke-dashoffset: 68.11503838px;
-    stroke-dasharray: 51.83627878px;
-  }
-  100% {
-    transform: rotate(360deg);
-    stroke-dashoffset: 68.11503838px;
-    stroke-dasharray: 69.11503838px;
-  }
-}
-@keyframes process-success-circle-xs {
-  0% {
-    transform: rotate(0deg);
-    stroke-dashoffset: 68.11503838px;
-    stroke-dasharray: 69.11503838px;
-  }
-  100% {
-    transform: rotate(360deg);
-    stroke-dashoffset: 0;
-    stroke-dasharray: 69.11503838px;
-  }
-}
-@keyframes process-chase-circle-sm {
-  0% {
-    transform: rotate(0deg);
-    stroke-dashoffset: 432.5397862px;
-    stroke-dasharray: 144.51326207px;
-  }
-  25% {
-    stroke-dashoffset: 143.51326207px;
-    stroke-dasharray: 72.25663103px;
-  }
-  75% {
-    stroke-dashoffset: 143.51326207px;
-    stroke-dasharray: 108.38494655px;
-  }
-  100% {
-    transform: rotate(360deg);
-    stroke-dashoffset: 143.51326207px;
-    stroke-dasharray: 144.51326207px;
-  }
-}
-@keyframes process-success-circle-sm {
-  0% {
-    transform: rotate(0deg);
-    stroke-dashoffset: 143.51326207px;
-    stroke-dasharray: 144.51326207px;
-  }
-  100% {
-    transform: rotate(360deg);
-    stroke-dashoffset: 0;
-    stroke-dasharray: 144.51326207px;
-  }
-}
-@keyframes process-chase-circle-xl {
-  0% {
-    transform: rotate(0deg);
-    stroke-dashoffset: 1186.52202306px;
-    stroke-dasharray: 395.84067435px;
-  }
-  25% {
-    stroke-dashoffset: 394.84067435px;
-    stroke-dasharray: 197.92033718px;
-  }
-  75% {
-    stroke-dashoffset: 394.84067435px;
-    stroke-dasharray: 296.88050576px;
-  }
-  100% {
-    transform: rotate(360deg);
-    stroke-dashoffset: 394.84067435px;
-    stroke-dasharray: 395.84067435px;
-  }
-}
-@keyframes process-success-circle-xl {
-  0% {
-    transform: rotate(0deg);
-    stroke-dashoffset: 394.84067435px;
-    stroke-dasharray: 395.84067435px;
-  }
-  100% {
-    transform: rotate(360deg);
-    stroke-dashoffset: 0;
-    stroke-dasharray: 395.84067435px;
-  }
-}
-@keyframes process-width {
-  to {
-    width: 100%;
-  }
-}
-@keyframes process-height {
-  to {
-    top: 0;
-    height: 100%;
-  }
-}
-.btn .process:first-child {
-  margin-left: -12px;
-  margin-right: 12px;
-  float: left;
-}
-[dir="rtl"] .btn .process:first-child {
-  margin-right: -12px;
-  margin-left: 0;
-  margin-left: initial;
-}
-[dir="rtl"] .btn .process:first-child {
-  margin-left: 12px;
-  margin-right: 0;
-  margin-right: initial;
-}
-[dir="rtl"] .btn .process:first-child {
-  float: right;
-}
-.btn-block .process:first-child {
-  position: absolute;
-}
-.btn .process-circle {
-  transition: stroke 0.5s 0s linear;
-}
-.btn-primary .process-circle,
-.btn-success .process-circle {
-  stroke: #fff;
-}
-.btn-primary .process-icon-horizontal,
-.btn-success .process-icon-horizontal,
-.btn-primary .process-icon-vertical,
-.btn-success .process-icon-vertical {
-  background-color: #fff;
-}
-.btn:hover .process-circle,
-.btn:focus .process-circle {
-  stroke: #fff;
-}
-.btn:hover .process-icon-horizontal,
-.btn:focus .process-icon-horizontal,
-.btn:hover .process-icon-vertical,
-.btn:focus .process-icon-vertical {
-  background-color: #fff;
-}
-.btn[disabled] .process-icon-horizontal,
-.btn[disabled] .process-icon-vertical {
-  background-color: #fff;
-}

package/src/styles/less/progress-bars.css

@@ -1,64 +0,0 @@
-.progress {
-  --progress-bar-height: 4px;
-  --progress-bar-border-width: 4px;
-  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
-  height: 4px;
-  height: var(--progress-bar-height);
-  overflow: hidden;
-  margin-top: calc((24px - 4px) / 2);
-  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  margin-bottom: calc((24px - 4px) / 2);
-  margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
-  background-color: #c9cbce;
-  background-color: var(--color-interactive-secondary);
-  border-radius: calc(4px + 4px);
-  border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
-}
-.progress-bar {
-  float: left;
-  position: relative;
-  top: calc(-1 * var(--progress-bar-border-width));
-  left: calc(-1 * var(--progress-bar-start-shift));
-  height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  color: #fff;
-  text-align: right;
-  background-color: #0097c7;
-  background-color: var(--color-content-accent);
-  border: var(--progress-bar-border-width) solid #ffffff;
-  border: var(--progress-bar-border-width) solid var(--color-background-screen);
-  border-radius: inherit;
-}
-[dir="rtl"] .progress-bar {
-  float: right;
-}
-[dir="rtl"] .progress-bar {
-  text-align: left;
-}
-[dir="rtl"] .progress-bar {
-  right: calc(-1 * var(--progress-bar-start-shift));
-  left: 0;
-}
-.progress-bar-primary {
-  background-color: #37517e;
-  background-color: var(--color-content-primary);
-}
-.progress-bar-success {
-  background-color: #008026;
-  background-color: var(--color-content-positive);
-}
-.progress-bar-info {
-  background-color: #0097c7;
-  background-color: var(--color-content-accent);
-}
-.progress-bar-warning {
-  background-color: #9a6500;
-  background-color: var(--color-content-warning);
-}
-.progress-bar-danger {
-  background-color: #cf2929;
-  background-color: var(--color-content-negative);
-}

package/src/styles/less/ring.css

@@ -1,55 +0,0 @@
-:root {
-  --ring-outline-width: 2px;
-  --ring-outline-offset: 2px;
-  --ring-outline-color: var(--color-content-primary);
-}
-:root.np-theme-personal,
-:root .np-theme-personal {
-  --ring-outline-color: var(--color-interactive-primary);
-}
-.focus-ring:focus {
-  outline: none;
-}
-.focus-ring:focus-visible {
-  outline: #37517e solid 2px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 2px;
-  outline-offset: var(--ring-outline-offset);
-}
-details:focus,
-summary:focus,
-a:focus,
-button:focus,
-input:focus,
-option:focus,
-dialog:focus,
-input:focus,
-select:focus,
-textarea:focus {
-  outline: none;
-}
-details:focus-visible,
-summary:focus-visible,
-a:focus-visible,
-button:focus-visible,
-input:focus-visible,
-option:focus-visible,
-dialog:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  outline: #37517e solid 2px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: 2px;
-  outline-offset: var(--ring-outline-offset);
-}
-.ring-offset-0 {
-  --ring-outline-offset: 0;
-}
-.ring-inset {
-  --ring-outline-width: 3px;
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-}
-.ring-negative {
-  --ring-outline-color: var(--color-sentiment-negative);
-}

package/src/styles/less/select.css

@@ -1,99 +0,0 @@
-.tw-select .tw-icon {
-  display: inline-block;
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-top: -2px;
-  vertical-align: middle;
-}
-[dir="rtl"] .tw-select .tw-icon {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  margin-right: 0;
-  margin-right: initial;
-}
-.tw-select .tw-dropdown-item--clickable {
-  cursor: pointer;
-}
-.tw-select .tw-dropdown-item--divider {
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
-  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-  border-bottom-color: rgba(0,0,0,0.10196);
-  border-bottom-color: var(--color-border-neutral);
-}
-.tw-select .tw-dropdown-item--focused {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.tw-select .tw-dropdown-item .currency-flag {
-  margin-right: 8px;
-  margin-right: var(--size-8);
-}
-[dir="rtl"] .tw-select .tw-dropdown-item .currency-flag {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  margin-right: 0;
-  margin-right: initial;
-}
-.tw-select .tw-dropdown-item > a {
-  white-space: normal;
-}
-.tw-select .dropdown-toggle.btn-input.btn-sm {
-  padding-right: 32px;
-  padding-right: var(--size-32);
-}
-[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-sm {
-  padding-left: 32px;
-  padding-left: var(--size-32);
-  padding-right: 0;
-  padding-right: initial;
-}
-.tw-select .dropdown-toggle.btn-input.btn-md {
-  padding-right: 40px;
-  padding-right: var(--size-40);
-}
-[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-md {
-  padding-left: 40px;
-  padding-left: var(--size-40);
-  padding-right: 0;
-  padding-right: initial;
-}
-.tw-select .dropdown-toggle.btn-input.btn-lg {
-  padding-right: 48px;
-  padding-right: var(--size-48);
-}
-[dir="rtl"] .tw-select .dropdown-toggle.btn-input.btn-lg {
-  padding-left: 48px;
-  padding-left: var(--size-48);
-  padding-right: 0;
-  padding-right: initial;
-}
-.tw-select .dropdown-toggle tw-chevron-down-icon > span {
-  margin: 0   ;
-}
-[dir="rtl"] .tw-select .dropdown-toggle tw-chevron-down-icon > span {
-  margin: 0   ;
-}
-.tw-select .dropdown-toggle tw-icon span.tw-icon {
-  position: static;
-  display: inline-block;
-}
-.tw-select .circle .tw-icon {
-  vertical-align: middle;
-}
-@media (max-width: 599.98px) {
-  .tw-select.dropdown-menu.dropdown-menu--open {
-    max-height: 50vh;
-    max-height: 50svh;
-    max-width: 100%;
-    opacity: 1;
-    overflow: auto;
-    position: static;
-    transform: none;
-    visibility: visible;
-    width: 100% !important;
-  }
-}
-.tw-select-filter {
-  border: 0;
-}