@transferwise/components 46.130.3 → 46.131.1

package/build/styles/styles/less/table.css

@@ -0,0 +1,446 @@
+table {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border-collapse: separate;
+}
+table td[class*="col-"],
+table th[class*="col-"] {
+  position: static;
+  float: none;
+  display: table-cell;
+}
+caption {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  color: #5d7079;
+  color: var(--color-content-secondary);
+  text-align: left;
+}
+[dir="rtl"] caption {
+  text-align: right;
+}
+th {
+  text-align: left;
+}
+[dir="rtl"] th {
+  text-align: right;
+}
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 24px;
+  margin-bottom: var(--size-24);
+}
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  padding: 24px 16px;
+  padding: var(--size-24) var(--size-16);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
+  vertical-align: top;
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+  border-bottom: 0;
+  transition: border ease 0.15s;
+}
+.table > .thead > ol > li,
+.table > .tbody > dl > dd,
+.table > .tfoot > ol > li {
+  padding: 24px 16px;
+  padding: var(--size-24) var(--size-16);
+  line-height: 1.5;
+  line-height: var(--line-height-body);
+  vertical-align: top;
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+  border-bottom: 0;
+  transition: border ease 0.15s;
+}
+.table > thead > tr > th,
+.table > .thead > ol > li {
+  vertical-align: bottom;
+}
+.table > thead > tr > th a,
+.table > .thead > ol > li a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.table > thead > tr > th .tw-icon,
+.table > .thead > ol > li .tw-icon {
+  margin-top: -3px;
+}
+.table > caption + thead > tr:first-child > th,
+.table > colgroup + thead > tr:first-child > th,
+.table > thead:first-child > tr:first-child > th,
+.table > caption + thead > tr:first-child > td,
+.table > colgroup + thead > tr:first-child > td,
+.table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+.table > .thead:first-child > ol:first-child > li {
+  border-top: 0;
+}
+.table > tbody + tbody {
+  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid var(--color-border-neutral);
+}
+.table .table {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.table > thead,
+.table > tfoot,
+.table > .thead,
+.table > .tfoot {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.table > tbody,
+.table > .tbody {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+}
+.table > tbody > tr > th,
+.table > .tbody > dl > .th {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+  padding: 8px;
+  padding: var(--size-8);
+}
+.table-condensed > .thead > ol > li,
+.table-condensed > .tbody > dl > dd {
+  padding: 8px;
+  padding: var(--size-8);
+}
+.table-bordered {
+  border: 1px solid rgba(0,0,0,0.10196);
+  border: 1px solid var(--color-border-neutral);
+  border-radius: 3px;
+}
+.table-bordered thead,
+.table-bordered .thead {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+@media (max-width: 767px) {
+  div.table-bordered:not(.table-responsive) {
+    border: 0;
+  }
+}
+.table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+@media (min-width: 768px) {
+  .table-striped > .tbody > dl:nth-of-type(odd) {
+    background-color: rgba(134,167,189,0.10196);
+    background-color: var(--color-background-neutral);
+  }
+}
+table col[class*="col-"] {
+  position: static;
+  float: none;
+  display: table-column;
+}
+.table > thead > tr > td.primary,
+.table > tbody > tr > td.primary,
+.table > tfoot > tr > td.primary,
+.table > thead > tr > th.primary,
+.table > tbody > tr > th.primary,
+.table > tfoot > tr > th.primary,
+.table > thead > tr.primary > td,
+.table > tbody > tr.primary > td,
+.table > tfoot > tr.primary > td,
+.table > thead > tr.primary > th,
+.table > tbody > tr.primary > th,
+.table > tfoot > tr.primary > th {
+  background-color: #37517e;
+}
+.table-hover > tbody > tr > td.primary:hover,
+.table-hover > tbody > tr > th.primary:hover,
+.table-hover > tbody > tr.primary:hover > td,
+.table-hover > tbody > tr:hover > .primary,
+.table-hover > tbody > tr.primary:hover > th {
+  background-color: #37517e;
+}
+.table > thead > tr > td.active,
+.table > tbody > tr > td.active,
+.table > tfoot > tr > td.active,
+.table > thead > tr > th.active,
+.table > tbody > tr > th.active,
+.table > tfoot > tr > th.active,
+.table > thead > tr.active > td,
+.table > tbody > tr.active > td,
+.table > tfoot > tr.active > td,
+.table > thead > tr.active > th,
+.table > tbody > tr.active > th,
+.table > tfoot > tr.active > th {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.table-hover > tbody > tr > td.active:hover,
+.table-hover > tbody > tr > th.active:hover,
+.table-hover > tbody > tr.active:hover > td,
+.table-hover > tbody > tr:hover > .active,
+.table-hover > tbody > tr.active:hover > th {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.table > thead > tr > td.success,
+.table > tbody > tr > td.success,
+.table > tfoot > tr > td.success,
+.table > thead > tr > th.success,
+.table > tbody > tr > th.success,
+.table > tfoot > tr > th.success,
+.table > thead > tr.success > td,
+.table > tbody > tr.success > td,
+.table > tfoot > tr.success > td,
+.table > thead > tr.success > th,
+.table > tbody > tr.success > th,
+.table > tfoot > tr.success > th {
+  background-color: rgba(54,199,151,0.10196);
+  background-color: var(--color-background-positive);
+}
+.table-hover > tbody > tr > td.success:hover,
+.table-hover > tbody > tr > th.success:hover,
+.table-hover > tbody > tr.success:hover > td,
+.table-hover > tbody > tr:hover > .success,
+.table-hover > tbody > tr.success:hover > th {
+  background-color: rgba(54,199,151,0.10196);
+  background-color: var(--color-background-positive);
+}
+.table > thead > tr > td.info,
+.table > tbody > tr > td.info,
+.table > tfoot > tr > td.info,
+.table > thead > tr > th.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > tbody > tr.info > td,
+.table > tfoot > tr.info > td,
+.table > thead > tr.info > th,
+.table > tbody > tr.info > th,
+.table > tfoot > tr.info > th {
+  background-color: rgba(56,200,255,0.10196);
+  background-color: var(--color-background-accent);
+}
+.table-hover > tbody > tr > td.info:hover,
+.table-hover > tbody > tr > th.info:hover,
+.table-hover > tbody > tr.info:hover > td,
+.table-hover > tbody > tr:hover > .info,
+.table-hover > tbody > tr.info:hover > th {
+  background-color: rgba(56,200,255,0.10196);
+  background-color: var(--color-background-accent);
+}
+.table > thead > tr > td.warning,
+.table > tbody > tr > td.warning,
+.table > tfoot > tr > td.warning,
+.table > thead > tr > th.warning,
+.table > tbody > tr > th.warning,
+.table > tfoot > tr > th.warning,
+.table > thead > tr.warning > td,
+.table > tbody > tr.warning > td,
+.table > tfoot > tr.warning > td,
+.table > thead > tr.warning > th,
+.table > tbody > tr.warning > th,
+.table > tfoot > tr.warning > th {
+  background-color: rgba(255,172,0,0.10196);
+  background-color: var(--color-background-warning);
+}
+.table-hover > tbody > tr > td.warning:hover,
+.table-hover > tbody > tr > th.warning:hover,
+.table-hover > tbody > tr.warning:hover > td,
+.table-hover > tbody > tr:hover > .warning,
+.table-hover > tbody > tr.warning:hover > th {
+  background-color: rgba(255,172,0,0.10196);
+  background-color: var(--color-background-warning);
+}
+.table > thead > tr > td.danger,
+.table > tbody > tr > td.danger,
+.table > tfoot > tr > td.danger,
+.table > thead > tr > th.danger,
+.table > tbody > tr > th.danger,
+.table > tfoot > tr > th.danger,
+.table > thead > tr.danger > td,
+.table > tbody > tr.danger > td,
+.table > tfoot > tr.danger > td,
+.table > thead > tr.danger > th,
+.table > tbody > tr.danger > th,
+.table > tfoot > tr.danger > th {
+  background-color: rgba(255,135,135,0.10196);
+  background-color: var(--color-background-negative);
+}
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td,
+.table-hover > tbody > tr:hover > .danger,
+.table-hover > tbody > tr.danger:hover > th {
+  background-color: rgba(255,135,135,0.10196);
+  background-color: var(--color-background-negative);
+}
+.table > thead > tr > td.default,
+.table > tbody > tr > td.default,
+.table > tfoot > tr > td.default,
+.table > thead > tr > th.default,
+.table > tbody > tr > th.default,
+.table > tfoot > tr > th.default,
+.table > thead > tr.default > td,
+.table > tbody > tr.default > td,
+.table > tfoot > tr.default > td,
+.table > thead > tr.default > th,
+.table > tbody > tr.default > th,
+.table > tfoot > tr.default > th {
+  background-color: var(--color-background-secondary);
+}
+.table-hover > tbody > tr > td.default:hover,
+.table-hover > tbody > tr > th.default:hover,
+.table-hover > tbody > tr.default:hover > td,
+.table-hover > tbody > tr:hover > .default,
+.table-hover > tbody > tr.default:hover > th {
+  background-color: var(--color-background-secondary);
+}
+.table-responsive {
+  overflow-x: auto;
+  min-height: 0.01%;
+}
+.table-responsive.table-bordered {
+  border: 0;
+}
+@media screen and (max-width: 767px) {
+  .table-responsive {
+    width: 100%;
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    overflow-y: hidden;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+  }
+  .table-responsive > .table {
+    margin-bottom: 0;
+  }
+  .table-responsive > .table > thead > tr > th,
+  .table-responsive > .table > tbody > tr > th,
+  .table-responsive > .table > tfoot > tr > th,
+  .table-responsive > .table > thead > tr > td,
+  .table-responsive > .table > tbody > tr > td,
+  .table-responsive > .table > tfoot > tr > td {
+    white-space: nowrap;
+  }
+  .table-responsive > .table-bordered {
+    border: 0;
+  }
+  .table-responsive > .table-bordered > tbody > tr:last-child > th,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+  .table-responsive > .table-bordered > tbody > tr:last-child > td,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+    border-bottom: 0;
+  }
+  .table-responsive.table-bordered {
+    border: 1px solid rgba(134,167,189,0.10196);
+    border: 1px solid var(--color-background-neutral);
+    border-radius: 3px;
+  }
+}
+@media (min-width: 768px) {
+  .table {
+    display: table;
+  }
+  .table > .thead {
+    display: table-header-group;
+  }
+  .table > .thead > ol {
+    display: table-row;
+  }
+  .table > .thead > ol > li {
+    display: table-cell;
+    font-weight: 700;
+    font-weight: var(--font-weight-bold);
+    color: #37517e;
+    color: var(--color-content-primary);
+  }
+  .table > .tbody {
+    display: table-row-group;
+  }
+  .table > .tbody > dl {
+    display: table-row;
+  }
+  .table > .tbody > dl > dt {
+    display: none;
+  }
+  .table > .tbody > dl > dd {
+    display: table-cell;
+    font-size: 0.875rem;
+    font-size: var(--font-size-14);
+    color: #5d7079;
+    color: var(--color-content-secondary);
+  }
+  .table > .tfoot {
+    display: table-footer-group;
+  }
+}
+@media (max-width: 767px) {
+  .table > .thead {
+    display: none;
+  }
+  .table > .tbody > dl {
+    border: 1px #c9cbce solid;
+    border: 1px var(--color-interactive-secondary) solid;
+    border-radius: 3px;
+    margin-bottom: 24px;
+    margin-bottom: var(--size-24);
+    padding: 24px 1.5 0;
+    padding: var(--size-24) var(--line-height-body) 0;
+  }
+  .table > .tbody > dl > dd {
+    padding: 0;
+    border: 0;
+  }
+  .table > .tbody > dl > dd:empty {
+    margin: 0;
+  }
+}
+@media (max-width: 575px) {
+  .table > .tbody > dl {
+    padding-bottom: 8px;
+  }
+}
+/* Deprecated - Table CSS for components moved inside @transferwise/components */
+.table-calendar {
+  min-width: 300px;
+}
+.table-calendar > tbody > tr > td {
+  padding: 0;
+}
+.table-calendar > tbody > tr > td > a {
+  display: block;
+  padding: 4px 0;
+  margin: 4px 2px;
+  border-radius: 3px;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.table-calendar > tbody > tr > td > a.active {
+  background-color: #37517e;
+  color: #ffffff;
+}
+.table-calendar > tbody > tr > td > a:not([disabled]):hover {
+  background-color: #0097c7;
+  background-color: var(--color-content-accent);
+  color: #fff;
+}
+.table-calendar > thead > tr > th {
+  text-align: center;
+}

package/build/styles/styles/less/tick.css

@@ -0,0 +1,32 @@
+.tw-checkbox-check {
+  position: relative;
+  display: inline-block;
+  width: 10px;
+  height: 8px;
+}
+.tw-checkbox-check::before,
+.tw-checkbox-check::after {
+  content: "";
+  position: absolute;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  transform: translateX(0.5px) rotate(-45deg);
+  transform-origin: left bottom;
+  left: 8px;
+  left: var(--size-8);
+}
+.tw-checkbox-check .has-error::before,
+.tw-checkbox-check .has-error::after {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
+.tw-checkbox-check::before {
+  top: 9px;
+  height: 6px;
+  width: 2px;
+}
+.tw-checkbox-check::after {
+  bottom: 5px;
+  height: 2px;
+  width: 11px;
+}

package/build/styles/styles/less/tooltip.css

@@ -0,0 +1,160 @@
+.tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: 24px;
+  line-height: var(--size-24);
+  text-align: left;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  opacity: 0;
+}
+[dir="rtl"] .tooltip {
+  text-align: right;
+}
+.tooltip.in {
+  opacity: 1;
+}
+.tooltip.top {
+  margin-top: -3px;
+  padding: 5px 0;
+}
+.tooltip.right {
+  margin-left: 3px;
+  padding: 0 5px;
+}
+[dir="rtl"] .tooltip.right {
+  margin-right: 3px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.tooltip.bottom {
+  margin-top: 3px;
+  padding: 5px 0;
+}
+.tooltip.left {
+  margin-left: -3px;
+  padding: 0 5px;
+}
+[dir="rtl"] .tooltip.left {
+  margin-right: -3px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.tooltip-inner {
+  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);
+  max-width: 200px;
+  min-width: 120px;
+  padding: 16px 16px;
+  padding: var(--size-16) var(--size-16);
+  color: #37517e;
+  color: var(--color-content-primary);
+  text-align: center;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border-radius: 3px;
+  box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
+}
+.np-theme-personal--forest-green .tooltip-inner,
+.np-theme-personal--bright-green .tooltip-inner,
+.np-theme-personal--dark .tooltip-inner {
+  box-shadow: none;
+}
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.tooltip.top .tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  border-top-color: #ffffff;
+  border-top-color: var(--color-background-screen);
+}
+[dir="rtl"] .tooltip.top .tooltip-arrow {
+  right: 50%;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .tooltip.top .tooltip-arrow {
+  margin-right: -5px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.tooltip.right .tooltip-arrow {
+  top: 50%;
+  left: 0;
+  margin-top: -5px;
+  border-width: 5px 5px 5px 0;
+  border-right-color: #ffffff;
+  border-right-color: var(--color-background-screen);
+}
+[dir="rtl"] .tooltip.right .tooltip-arrow {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+.tooltip.left .tooltip-arrow {
+  top: 50%;
+  right: 0;
+  margin-top: -5px;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #ffffff;
+  border-left-color: var(--color-background-screen);
+}
+[dir="rtl"] .tooltip.left .tooltip-arrow {
+  left: 0;
+  right: auto;
+  right: initial;
+}
+.tooltip.bottom .tooltip-arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 0 5px 5px;
+  border-bottom-color: #ffffff;
+  border-bottom-color: var(--color-background-screen);
+}
+[dir="rtl"] .tooltip.bottom .tooltip-arrow {
+  right: 50%;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .tooltip.bottom .tooltip-arrow {
+  margin-right: -5px;
+  margin-left: 0;
+  margin-left: initial;
+}
+[data-toggle="tooltip"]:not(.btn) {
+  cursor: pointer;
+}
+[data-toggle="tooltip"]:not(.btn):hover,
+[data-toggle="tooltip"]:not(.btn):focus {
+  color: #0084b3 !important;
+  color: var(--color-content-accent-hover) !important;
+  outline: 0;
+}
+a[data-toggle="tooltip"] {
+  white-space: nowrap;
+}