@transferwise/components 46.130.3 → 46.131.0

package/build/styles/styles/less/process.css

@@ -0,0 +1,483 @@
+/*
+// 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/build/styles/styles/less/progress-bars.css

@@ -0,0 +1,64 @@
+.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/build/styles/styles/less/ring.css

@@ -0,0 +1,55 @@
+: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/build/styles/styles/less/select.css

@@ -0,0 +1,99 @@
+.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: 575px) {
+  .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;
+}