@transferwise/components 46.130.2 → 46.131.0

package/build/styles/css/flex.css

@@ -0,0 +1,598 @@
+.d-flex {
+  display: flex;
+}
+.d-inline-flex {
+  display: inline-flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-row {
+  flex-direction: row;
+}
+.justify-content-start {
+  justify-content: flex-start;
+}
+.justify-content-end {
+  justify-content: flex-end;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-between {
+  justify-content: space-between;
+}
+.justify-content-around {
+  justify-content: space-around;
+}
+.align-items-start {
+  align-items: flex-start;
+}
+.align-items-end {
+  align-items: flex-end;
+}
+.align-items-center {
+  align-items: center;
+}
+.align-items-baseline {
+  align-items: baseline;
+}
+.align-items-stretch {
+  align-items: stretch;
+}
+.align-self-start {
+  align-self: flex-start;
+}
+.align-self-end {
+  align-self: flex-end;
+}
+.align-self-center {
+  align-self: center;
+}
+.align-self-baseline {
+  align-self: baseline;
+}
+.align-self-stretch {
+  align-self: stretch;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.order-0 {
+  order: 0;
+}
+.order-1 {
+  order: 1;
+}
+.order-2 {
+  order: 2;
+}
+.order-3 {
+  order: 3;
+}
+.flex-grow-1 {
+  flex-grow: 1;
+}
+@media (min-width: 576px) {
+  .d-flex--sm {
+    display: flex;
+  }
+  .d-inline-flex--sm {
+    display: inline-flex;
+  }
+  .flex-column--sm {
+    flex-direction: column;
+  }
+  .flex-row--sm {
+    flex-direction: row;
+  }
+  .justify-content-start--sm {
+    justify-content: flex-start;
+  }
+  .justify-content-end--sm {
+    justify-content: flex-end;
+  }
+  .justify-content-center--sm {
+    justify-content: center;
+  }
+  .justify-content-between--sm {
+    justify-content: space-between;
+  }
+  .justify-content-around--sm {
+    justify-content: space-around;
+  }
+  .align-items-start--sm {
+    align-items: flex-start;
+  }
+  .align-items-end--sm {
+    align-items: flex-end;
+  }
+  .align-items-center--sm {
+    align-items: center;
+  }
+  .align-items-baseline--sm {
+    align-items: baseline;
+  }
+  .align-items-stretch--sm {
+    align-items: stretch;
+  }
+  .align-self-start--sm {
+    align-self: flex-start;
+  }
+  .align-self-end--sm {
+    align-self: flex-end;
+  }
+  .align-self-center--sm {
+    align-self: center;
+  }
+  .align-self-baseline--sm {
+    align-self: baseline;
+  }
+  .align-self-stretch--sm {
+    align-self: stretch;
+  }
+  .flex-nowrap--sm {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap--sm {
+    flex-wrap: wrap;
+  }
+  .order-0--sm {
+    order: 0;
+  }
+  .order-1--sm {
+    order: 1;
+  }
+  .order-2--sm {
+    order: 2;
+  }
+  .order-3--sm {
+    order: 3;
+  }
+  .flex-grow-1--sm {
+    flex-grow: 1;
+  }
+}
+@media (min-width: 768px) {
+  .d-flex--md {
+    display: flex;
+  }
+  .d-inline-flex--md {
+    display: inline-flex;
+  }
+  .flex-column--md {
+    flex-direction: column;
+  }
+  .flex-row--md {
+    flex-direction: row;
+  }
+  .justify-content-start--md {
+    justify-content: flex-start;
+  }
+  .justify-content-end--md {
+    justify-content: flex-end;
+  }
+  .justify-content-center--md {
+    justify-content: center;
+  }
+  .justify-content-between--md {
+    justify-content: space-between;
+  }
+  .justify-content-around--md {
+    justify-content: space-around;
+  }
+  .align-items-start--md {
+    align-items: flex-start;
+  }
+  .align-items-end--md {
+    align-items: flex-end;
+  }
+  .align-items-center--md {
+    align-items: center;
+  }
+  .align-items-baseline--md {
+    align-items: baseline;
+  }
+  .align-items-stretch--md {
+    align-items: stretch;
+  }
+  .align-self-start--md {
+    align-self: flex-start;
+  }
+  .align-self-end--md {
+    align-self: flex-end;
+  }
+  .align-self-center--md {
+    align-self: center;
+  }
+  .align-self-baseline--md {
+    align-self: baseline;
+  }
+  .align-self-stretch--md {
+    align-self: stretch;
+  }
+  .flex-nowrap--md {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap--md {
+    flex-wrap: wrap;
+  }
+  .order-0--md {
+    order: 0;
+  }
+  .order-1--md {
+    order: 1;
+  }
+  .order-2--md {
+    order: 2;
+  }
+  .order-3--md {
+    order: 3;
+  }
+  .flex-grow-1--md {
+    flex-grow: 1;
+  }
+}
+@media (min-width: 992px) {
+  .d-flex--lg {
+    display: flex;
+  }
+  .d-inline-flex--lg {
+    display: inline-flex;
+  }
+  .flex-column--lg {
+    flex-direction: column;
+  }
+  .flex-row--lg {
+    flex-direction: row;
+  }
+  .justify-content-start--lg {
+    justify-content: flex-start;
+  }
+  .justify-content-end--lg {
+    justify-content: flex-end;
+  }
+  .justify-content-center--lg {
+    justify-content: center;
+  }
+  .justify-content-between--lg {
+    justify-content: space-between;
+  }
+  .justify-content-around--lg {
+    justify-content: space-around;
+  }
+  .align-items-start--lg {
+    align-items: flex-start;
+  }
+  .align-items-end--lg {
+    align-items: flex-end;
+  }
+  .align-items-center--lg {
+    align-items: center;
+  }
+  .align-items-baseline--lg {
+    align-items: baseline;
+  }
+  .align-items-stretch--lg {
+    align-items: stretch;
+  }
+  .align-self-start--lg {
+    align-self: flex-start;
+  }
+  .align-self-end--lg {
+    align-self: flex-end;
+  }
+  .align-self-center--lg {
+    align-self: center;
+  }
+  .align-self-baseline--lg {
+    align-self: baseline;
+  }
+  .align-self-stretch--lg {
+    align-self: stretch;
+  }
+  .flex-nowrap--lg {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap--lg {
+    flex-wrap: wrap;
+  }
+  .order-0--lg {
+    order: 0;
+  }
+  .order-1--lg {
+    order: 1;
+  }
+  .order-2--lg {
+    order: 2;
+  }
+  .order-3--lg {
+    order: 3;
+  }
+  .flex-grow-1--lg {
+    flex-grow: 1;
+  }
+}
+@media (min-width: 1200px) {
+  .d-flex--xl {
+    display: flex;
+  }
+  .d-inline-flex--xl {
+    display: inline-flex;
+  }
+  .flex-column--xl {
+    flex-direction: column;
+  }
+  .flex-row--xl {
+    flex-direction: row;
+  }
+  .justify-content-start--xl {
+    justify-content: flex-start;
+  }
+  .justify-content-end--xl {
+    justify-content: flex-end;
+  }
+  .justify-content-center--xl {
+    justify-content: center;
+  }
+  .justify-content-between--xl {
+    justify-content: space-between;
+  }
+  .justify-content-around--xl {
+    justify-content: space-around;
+  }
+  .align-items-start--xl {
+    align-items: flex-start;
+  }
+  .align-items-end--xl {
+    align-items: flex-end;
+  }
+  .align-items-center--xl {
+    align-items: center;
+  }
+  .align-items-baseline--xl {
+    align-items: baseline;
+  }
+  .align-items-stretch--xl {
+    align-items: stretch;
+  }
+  .align-self-start--xl {
+    align-self: flex-start;
+  }
+  .align-self-end--xl {
+    align-self: flex-end;
+  }
+  .align-self-center--xl {
+    align-self: center;
+  }
+  .align-self-baseline--xl {
+    align-self: baseline;
+  }
+  .align-self-stretch--xl {
+    align-self: stretch;
+  }
+  .flex-nowrap--xl {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap--xl {
+    flex-wrap: wrap;
+  }
+  .order-0--xl {
+    order: 0;
+  }
+  .order-1--xl {
+    order: 1;
+  }
+  .order-2--xl {
+    order: 2;
+  }
+  .order-3--xl {
+    order: 3;
+  }
+  .flex-grow-1--xl {
+    flex-grow: 1;
+  }
+}
+/* Items */
+.flex__inner {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  margin-right: calc(-1 * 16px);
+  margin-right: calc(-1 * var(--size-16));
+  margin-left: calc(-1 * 16px);
+  margin-left: calc(-1 * var(--size-16));
+}
+[dir="rtl"] .flex__inner {
+  margin-left: calc(-1 * 16px);
+  margin-left: calc(-1 * var(--size-16));
+  margin-right: 0;
+  margin-right: initial;
+}
+[dir="rtl"] .flex__inner {
+  margin-right: calc(-1 * 16px);
+  margin-right: calc(-1 * var(--size-16));
+  margin-left: 0;
+  margin-left: initial;
+}
+@media (min-width: 576px) {
+  .flex__inner {
+    margin-right: calc(-1 * 24px);
+    margin-right: calc(-1 * var(--size-24));
+    margin-left: calc(-1 * 24px);
+    margin-left: calc(-1 * var(--size-24));
+  }
+  [dir="rtl"] .flex__inner {
+    margin-left: calc(-1 * 24px);
+    margin-left: calc(-1 * var(--size-24));
+    margin-right: 0;
+    margin-right: initial;
+  }
+  [dir="rtl"] .flex__inner {
+    margin-right: calc(-1 * 24px);
+    margin-right: calc(-1 * var(--size-24));
+    margin-left: 0;
+    margin-left: initial;
+  }
+}
+@media (min-width: 768px) {
+  .flex__inner {
+    margin-right: calc(-1 * 32px);
+    margin-right: calc(-1 * var(--size-32));
+    margin-left: calc(-1 * 32px);
+    margin-left: calc(-1 * var(--size-32));
+  }
+  [dir="rtl"] .flex__inner {
+    margin-left: calc(-1 * 32px);
+    margin-left: calc(-1 * var(--size-32));
+    margin-right: 0;
+    margin-right: initial;
+  }
+  [dir="rtl"] .flex__inner {
+    margin-right: calc(-1 * 32px);
+    margin-right: calc(-1 * var(--size-32));
+    margin-left: 0;
+    margin-left: initial;
+  }
+}
+@media (min-width: 992px) {
+  .flex__inner {
+    margin-right: calc(-1 * 48px);
+    margin-right: calc(-1 * var(--size-48));
+    margin-left: calc(-1 * 48px);
+    margin-left: calc(-1 * var(--size-48));
+  }
+  [dir="rtl"] .flex__inner {
+    margin-left: calc(-1 * 48px);
+    margin-left: calc(-1 * var(--size-48));
+    margin-right: 0;
+    margin-right: initial;
+  }
+  [dir="rtl"] .flex__inner {
+    margin-right: calc(-1 * 48px);
+    margin-right: calc(-1 * var(--size-48));
+    margin-left: 0;
+    margin-left: initial;
+  }
+}
+.flex__item {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  padding-left: 16px;
+  padding-left: var(--size-16);
+}
+[dir="rtl"] .flex__item {
+  padding-left: 16px;
+  padding-left: var(--size-16);
+  padding-right: 0;
+  padding-right: initial;
+}
+[dir="rtl"] .flex__item {
+  padding-right: 16px;
+  padding-right: var(--size-16);
+  padding-left: 0;
+  padding-left: initial;
+}
+@media (min-width: 576px) {
+  .flex__item {
+    padding-right: 24px;
+    padding-right: var(--size-24);
+    padding-left: 24px;
+    padding-left: var(--size-24);
+  }
+  [dir="rtl"] .flex__item {
+    padding-left: 24px;
+    padding-left: var(--size-24);
+    padding-right: 0;
+    padding-right: initial;
+  }
+  [dir="rtl"] .flex__item {
+    padding-right: 24px;
+    padding-right: var(--size-24);
+    padding-left: 0;
+    padding-left: initial;
+  }
+}
+@media (min-width: 768px) {
+  .flex__item {
+    padding-right: 32px;
+    padding-right: var(--size-32);
+    padding-left: 32px;
+    padding-left: var(--size-32);
+  }
+  [dir="rtl"] .flex__item {
+    padding-left: 32px;
+    padding-left: var(--size-32);
+    padding-right: 0;
+    padding-right: initial;
+  }
+  [dir="rtl"] .flex__item {
+    padding-right: 32px;
+    padding-right: var(--size-32);
+    padding-left: 0;
+    padding-left: initial;
+  }
+}
+@media (min-width: 992px) {
+  .flex__item {
+    padding-right: 48px;
+    padding-right: var(--size-48);
+    padding-left: 48px;
+    padding-left: var(--size-48);
+  }
+  [dir="rtl"] .flex__item {
+    padding-left: 48px;
+    padding-left: var(--size-48);
+    padding-right: 0;
+    padding-right: initial;
+  }
+  [dir="rtl"] .flex__item {
+    padding-right: 48px;
+    padding-right: var(--size-48);
+    padding-left: 0;
+    padding-left: initial;
+  }
+}
+.flex__item--4 {
+  flex: 0 0 calc(100% / 3);
+  max-width: calc(100% / 3);
+}
+@media (max-width: 767px) {
+  .flex__item--4--md {
+    flex: 0 0 calc(100% / 3);
+    max-width: calc(100% / 3);
+  }
+}
+.flex__item--8 {
+  flex: 0 0 calc(100% / 1.5);
+  max-width: calc(100% / 1.5);
+}
+@media (max-width: 767px) {
+  .flex__item--8--md {
+    flex: 0 0 calc(100% / 1.5);
+    max-width: calc(100% / 1.5);
+  }
+}
+.flex__item--6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+@media (max-width: 767px) {
+  .flex__item--6--md {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+}
+.flex__item--12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+@media (max-width: 767px) {
+  .flex__item--12--md {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}

package/build/styles/css/footer.css

@@ -0,0 +1,129 @@
+.footer {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  padding-top: calc(8px * 10);
+  padding-top: calc(var(--size-8) * 10);
+  padding-bottom: calc(8px * 10);
+  padding-bottom: calc(var(--size-8) * 10);
+}
+@media (min-width: 576px) {
+  .footer {
+    padding-top: calc(8px * 15);
+    padding-top: calc(var(--size-8) * 15);
+    padding-bottom: calc(8px * 15);
+    padding-bottom: calc(var(--size-8) * 15);
+  }
+}
+@media (min-width: 992px) {
+  .footer {
+    padding-top: calc(8px * 20);
+    padding-top: calc(var(--size-8) * 20);
+    padding-bottom: calc(8px * 20);
+    padding-bottom: calc(var(--size-8) * 20);
+  }
+}
+.footer .footer-link,
+.footer .link-icon {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+}
+.footer .footer-link:hover,
+.footer .link-icon:hover,
+.footer .footer-link:active,
+.footer .link-icon:active,
+.footer .footer-link:focus,
+.footer .link-icon:focus {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.footer .footer-title {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.footer .footer-title .footer-link {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.footer .footer-title .footer-link:hover,
+.footer .footer-title .footer-link:active,
+.footer .footer-title .footer-link:focus {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.footer .logo {
+  color: transparent;
+}
+.footer .icon {
+  margin: 0 5px;
+  font-size: 32px !important;
+  width: 24px;
+}
+.footer .link-icon {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.footer .link-icon svg {
+  fill: #5d7079;
+  fill: var(--color-content-secondary);
+}
+.footer .link-icon svg:hover,
+.footer .link-icon svg:active,
+.footer .link-icon svg:focus {
+  fill: #5d7079;
+  fill: var(--color-content-secondary);
+}
+.footer.footer-inverse {
+  background: #37517e;
+}
+.footer.footer-inverse .footer-link,
+.footer.footer-inverse .link-icon {
+  color: #ffffff;
+}
+.footer.footer-inverse .footer-link:hover,
+.footer.footer-inverse .link-icon:hover,
+.footer.footer-inverse .footer-link:active,
+.footer.footer-inverse .link-icon:active,
+.footer.footer-inverse .footer-link:focus,
+.footer.footer-inverse .link-icon:focus {
+  color: #ffffff;
+}
+.footer.footer-inverse .footer-link svg,
+.footer.footer-inverse .link-icon svg {
+  fill: #ffffff;
+}
+.footer.footer-inverse .footer-link svg:hover,
+.footer.footer-inverse .link-icon svg:hover,
+.footer.footer-inverse .footer-link svg:active,
+.footer.footer-inverse .link-icon svg:active,
+.footer.footer-inverse .footer-link svg:focus,
+.footer.footer-inverse .link-icon svg:focus {
+  fill: #ffffff;
+}
+.footer.footer-inverse .footer-title {
+  color: #ffffff;
+}
+.footer.footer-inverse hr {
+  opacity: 0.1;
+}
+.footer.footer-inverse .tiny,
+.footer.footer-inverse .body-3,
+.footer.footer-inverse .np-text-body-default {
+  color: #ffffff;
+}
+@media (max-width: 575px) {
+  .footer {
+    position: relative;
+  }
+}