@transferwise/components 0.0.0-experimental-8cc553f → 0.0.0-experimental-769973c

package/build/styles/styles/less/dropdowns.css

@@ -4,10 +4,10 @@
 }
 .dropdown-menu {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: 1000;
-  float: left;
+  float: inline-start;
   padding: 8px   ;
   margin: 0;
   list-style: none;
@@ -17,7 +17,7 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-  text-align: left;
+  text-align: start;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border: 0 solid rgba(0,0,0,0.10196);
@@ -25,25 +25,24 @@
   border-radius: 3px;
   box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
   background-clip: padding-box;
-  min-width: 104px;
+  min-inline-size: 104px;
   transition: opacity 0.2s cubic-bezier(0.6, 0.2, 0.1, 1), transform 0.2s cubic-bezier(0.6, 0.2, 0.1, 1), visibility 0s linear 0.2s;
   opacity: 0;
   transform: translateY(-10px) scale(0.95, 0.95);
   visibility: hidden;
 }
 [dir="rtl"] .dropdown-menu {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .dropdown-menu {
-  float: right;
+  float: inline-end;
 }
 [dir="rtl"] .dropdown-menu {
   padding: 8px   ;
 }
 [dir="rtl"] .dropdown-menu {
-  text-align: right;
+  text-align: end;
 }
 .np-theme-personal .dropdown-menu,
 .np-theme-personal--forest-green .dropdown-menu,
@@ -56,7 +55,7 @@
 }
 @media (min-width: 576px) {
   .dropdown-menu {
-    min-width: 160px;
+    min-inline-size: 160px;
   }
 }
 .np-theme-personal--forest-green .dropdown-menu,
@@ -65,7 +64,7 @@
   box-shadow: none;
 }
 .dropdown-menu .divider {
-  height: 1px;
+  block-size: 1px;
   margin: 0;
   overflow: hidden;
   background-color: rgba(0,0,0,0.10196);
@@ -101,12 +100,12 @@
   border-radius: var(--radius-small);
 }
 .np-theme-light .dropdown-menu > li:first-child > a {
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
+  border-start-end-radius: 2px;
+  border-start-start-radius: 2px;
 }
 .np-theme-light .dropdown-menu > li:last-child > a {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-end-end-radius: 2px;
+  border-end-start-radius: 2px;
 }
 .dropdown-menu > .overlay-back-button,
 .dropdown-menu > .overlay-title {
@@ -114,19 +113,19 @@
 }
 .dropdown-menu,
 .btn-group .dropdown-menu {
-  max-width: calc(100vw - 32px);
+  max-inline-size: calc(100vw - 32px);
 }
 .dropdown-menu.dropdown-menu-sm,
 .btn-group .dropdown-menu.dropdown-menu-sm {
-  width: 220px;
+  inline-size: 220px;
 }
 .dropdown-menu.dropdown-menu-md,
 .btn-group .dropdown-menu.dropdown-menu-md {
-  width: 300px;
+  inline-size: 300px;
 }
 .dropdown-menu.dropdown-menu-lg,
 .btn-group .dropdown-menu.dropdown-menu-lg {
-  width: 420px;
+  inline-size: 420px;
 }
 .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):hover,
 .dropdown-menu > li:not(.active):not(.selected) > a:not([disabled]):not(.disabled):focus,
@@ -179,22 +178,21 @@
 @media (max-width: 575px) {
   .open > .dropdown-menu-overlay {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    height: 100dvh;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100vw;
+    block-size: 100vh;
+    block-size: 100dvh;
     border: 0;
     border-radius: 0;
     box-shadow: none;
-    max-width: none;
+    max-inline-size: none;
     overflow-y: auto;
     animation: listSlideOver 0.15s ease-out forwards;
   }
   [dir="rtl"] .open > .dropdown-menu-overlay {
-    right: 0;
-    left: auto;
-    left: initial;
+    inset-inline-end: 0;
+    inset-inline-start: initial;
   }
   .open > .dropdown-menu-overlay > .overlay-back-button,
   .open > .dropdown-menu-overlay > .overlay-title {
@@ -206,161 +204,142 @@
 }
 .dropdown-menu-right,
 .dropdown-menu-xs-right {
-  left: auto;
-  right: 0;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
 }
 [dir="rtl"] .dropdown-menu-right,
 [dir="rtl"] .dropdown-menu-xs-right {
-  right: auto;
-  left: auto;
-  left: initial;
+  inset-inline-end: auto;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .dropdown-menu-right,
 [dir="rtl"] .dropdown-menu-xs-right {
-  left: 0;
-  right: auto;
-  right: initial;
+  inset-inline-start: 0;
+  inset-inline-end: initial;
 }
 .dropdown-menu-left,
 .dropdown-menu-xs-left {
-  left: 0;
-  right: auto;
+  inset-inline-start: 0;
+  inset-inline-end: auto;
 }
 [dir="rtl"] .dropdown-menu-left,
 [dir="rtl"] .dropdown-menu-xs-left {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .dropdown-menu-left,
 [dir="rtl"] .dropdown-menu-xs-left {
-  left: auto;
-  right: auto;
-  right: initial;
+  inset-inline-start: auto;
+  inset-inline-end: initial;
 }
 @media (min-width: 576px) {
   .dropdown-menu-sm-right {
-    left: auto;
-    right: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
   [dir="rtl"] .dropdown-menu-sm-right {
-    right: auto;
-    left: auto;
-    left: initial;
+    inset-inline-end: auto;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .dropdown-menu-sm-right {
-    left: 0;
-    right: auto;
-    right: initial;
+    inset-inline-start: 0;
+    inset-inline-end: initial;
   }
   .dropdown-menu-sm-left {
-    left: 0;
-    right: auto;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
   }
   [dir="rtl"] .dropdown-menu-sm-left {
-    right: 0;
-    left: auto;
-    left: initial;
+    inset-inline-end: 0;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .dropdown-menu-sm-left {
-    left: auto;
-    right: auto;
-    right: initial;
+    inset-inline-start: auto;
+    inset-inline-end: initial;
   }
 }
 @media (min-width: 768px) {
   .dropdown-menu-md-right {
-    left: auto;
-    right: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
   [dir="rtl"] .dropdown-menu-md-right {
-    right: auto;
-    left: auto;
-    left: initial;
+    inset-inline-end: auto;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .dropdown-menu-md-right {
-    left: 0;
-    right: auto;
-    right: initial;
+    inset-inline-start: 0;
+    inset-inline-end: initial;
   }
   .dropdown-menu-md-left {
-    left: 0;
-    right: auto;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
   }
   [dir="rtl"] .dropdown-menu-md-left {
-    right: 0;
-    left: auto;
-    left: initial;
+    inset-inline-end: 0;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .dropdown-menu-md-left {
-    left: auto;
-    right: auto;
-    right: initial;
+    inset-inline-start: auto;
+    inset-inline-end: initial;
   }
 }
 @media (min-width: 992px) {
   .dropdown-menu-lg-right {
-    left: auto;
-    right: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
   [dir="rtl"] .dropdown-menu-lg-right {
-    right: auto;
-    left: auto;
-    left: initial;
+    inset-inline-end: auto;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .dropdown-menu-lg-right {
-    left: 0;
-    right: auto;
-    right: initial;
+    inset-inline-start: 0;
+    inset-inline-end: initial;
   }
   .dropdown-menu-lg-left {
-    left: 0;
-    right: auto;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
   }
   [dir="rtl"] .dropdown-menu-lg-left {
-    right: 0;
-    left: auto;
-    left: initial;
+    inset-inline-end: 0;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .dropdown-menu-lg-left {
-    left: auto;
-    right: auto;
-    right: initial;
+    inset-inline-start: auto;
+    inset-inline-end: initial;
   }
 }
 @media (min-width: 1200px) {
   .dropdown-menu-xl-right {
-    left: auto;
-    right: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
   [dir="rtl"] .dropdown-menu-xl-right {
-    right: auto;
-    left: auto;
-    left: initial;
+    inset-inline-end: auto;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .dropdown-menu-xl-right {
-    left: 0;
-    right: auto;
-    right: initial;
+    inset-inline-start: 0;
+    inset-inline-end: initial;
   }
   .dropdown-menu-xl-left {
-    left: 0;
-    right: auto;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
   }
   [dir="rtl"] .dropdown-menu-xl-left {
-    right: 0;
-    left: auto;
-    left: initial;
+    inset-inline-end: 0;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .dropdown-menu-xl-left {
-    left: auto;
-    right: auto;
-    right: initial;
+    inset-inline-start: auto;
+    inset-inline-end: initial;
   }
 }
 .dropdown-header {
   display: block;
-  padding: 8px 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
   line-height: 1.5;
   line-height: var(--line-height-body);
   color: #5d7079;
@@ -410,63 +389,58 @@
 .dropdown-header + p,
 .dropdown-header + ul:not(.list-unstyled),
 .dropdown-header + ol:not(.list-unstyled) {
-  margin-top: 8px;
-  margin-top: var(--size-8);
+  margin-block-start: 8px;
+  margin-block-start: var(--size-8);
 }
 .dropdown-backdrop {
   position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-block-start: 0;
   z-index: 990;
 }
 [dir="rtl"] .dropdown-backdrop {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: initial;
 }
 [dir="rtl"] .dropdown-backdrop {
-  left: 0;
-  right: auto;
-  right: initial;
+  inset-inline-start: 0;
+  inset-inline-end: initial;
 }
 .dropup .dropdown-menu,
 .navbar-fixed-bottom .dropdown .dropdown-menu {
-  top: auto;
-  bottom: -2px;
-  margin-bottom: 2px;
+  inset-block-start: auto;
+  inset-block-end: -2px;
+  margin-block-end: 2px;
 }
 @media (min-width: 768px) {
   .navbar-right .dropdown-menu {
-    left: auto;
-    right: 0;
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
   [dir="rtl"] .navbar-right .dropdown-menu {
-    right: auto;
-    left: auto;
-    left: initial;
+    inset-inline-end: auto;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .navbar-right .dropdown-menu {
-    left: 0;
-    right: auto;
-    right: initial;
+    inset-inline-start: 0;
+    inset-inline-end: initial;
   }
   .navbar-right .dropdown-menu-left {
-    left: 0;
-    right: auto;
+    inset-inline-start: 0;
+    inset-inline-end: auto;
   }
   [dir="rtl"] .navbar-right .dropdown-menu-left {
-    right: 0;
-    left: auto;
-    left: initial;
+    inset-inline-end: 0;
+    inset-inline-start: initial;
   }
   [dir="rtl"] .navbar-right .dropdown-menu-left {
-    left: auto;
-    right: auto;
-    right: initial;
+    inset-inline-start: auto;
+    inset-inline-end: initial;
   }
 }
 .bootstrap-select .dropdown-menu {
-  margin: -8px 0 -6px;
+  margin-block: -8px -6px;
+  margin-inline: 0;
 }

package/build/styles/styles/less/droppable.css

@@ -43,40 +43,40 @@
   border-color: transparent !important;
 }
 .np-theme-personal .droppable-area.tw-droppable-md {
-  min-height: 242px;
+  min-block-size: 242px;
 }
 .np-theme-personal .droppable-area.droppable-dropping .droppable-default-card {
   opacity: 0;
 }
 .np-theme-personal .droppable-area.droppable-dropping .tw-icon-plus svg {
-  width: 24px;
-  width: var(--size-24);
-  height: 24px;
-  height: var(--size-24);
+  inline-size: 24px;
+  inline-size: var(--size-24);
+  block-size: 24px;
+  block-size: var(--size-24);
 }
 .np-theme-personal .droppable-area.droppable-dropping h4 {
-  margin-top: 16px !important;
-  margin-top: var(--padding-small) !important;
+  margin-block-start: 16px !important;
+  margin-block-start: var(--padding-small) !important;
 }
 .np-theme-personal .droppable-area.droppable-negative {
   border: 2px solid var(--color-sentiment-negative) !important;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-  min-height: 315px;
+  min-block-size: 315px;
 }
 .np-theme-personal .droppable-area.droppable-complete .thumbnail {
-  margin-bottom: 8px !important;
-  margin-bottom: var(--padding-x-small) !important;
+  margin-block-end: 8px !important;
+  margin-block-end: var(--padding-x-small) !important;
 }
 .np-theme-personal .droppable-area .droppable-default-card .m-b-3 {
-  margin-bottom: 16px !important;
-  margin-bottom: var(--padding-small) !important;
+  margin-block-end: 16px !important;
+  margin-block-end: var(--padding-small) !important;
 }
 .np-theme-personal .droppable-area .droppable-dropping-card {
   background-color: var(--color-background-neutral-hover);
 }
 .np-theme-personal .droppable-area .droppable-card-content .circle {
-  padding-top: 0 !important;
+  padding-block-start: 0 !important;
 }
 .np-theme-personal .droppable-area .circle {
   background-color: var(--color-contrast);
@@ -87,23 +87,22 @@
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   display: none;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   align-items: center;
   justify-content: center;
   padding: inherit;
   transition: transform 0.3s ease;
 }
 [dir="rtl"] .droppable-card {
-  right: 0;
-  left: auto;
-  left: initial;
+  inset-inline-end: 0;
+  inset-inline-start: initial;
 }
 .droppable-card-content {
-  max-width: 100%;
+  max-inline-size: 100%;
   opacity: 1;
 }
 .droppable-dropping {
@@ -119,15 +118,16 @@
   border-style: solid;
 }
 .droppable .thumbnail {
-  width: auto;
-  max-height: 96px;
-  max-width: 96px;
-  margin: 0 auto;
+  inline-size: auto;
+  max-block-size: 96px;
+  max-inline-size: 96px;
+  margin-block: 0;
+  margin-inline: auto;
 }
 @media (min-width: 768px) {
   .droppable .thumbnail {
-    max-height: 128px;
-    max-width: 128px;
+    max-block-size: 128px;
+    max-inline-size: 128px;
   }
 }
 /***** Card variants *****/
@@ -173,42 +173,51 @@
   border-style: dashed;
 }
 .droppable-sm {
-  padding: 16px 16px;
+  padding-block: 16px;
+  padding-inline: 16px;
 }
 @media (min-width: 576px) {
   .droppable-sm {
-    padding: 24px 16px;
+    padding-block: 24px;
+    padding-inline: 16px;
   }
 }
 @media (min-width: 992px) {
   .droppable-sm {
-    padding: 32px 24px;
+    padding-block: 32px;
+    padding-inline: 24px;
   }
 }
 .droppable-md {
-  padding: 32px 32px;
+  padding-block: 32px;
+  padding-inline: 32px;
 }
 @media (min-width: 576px) {
   .droppable-md {
-    padding: 48px 32px;
+    padding-block: 48px;
+    padding-inline: 32px;
   }
 }
 @media (min-width: 992px) {
   .droppable-md {
-    padding: 64px 48px;
+    padding-block: 64px;
+    padding-inline: 48px;
   }
 }
 .droppable-lg {
-  padding: 48px 48px;
+  padding-block: 48px;
+  padding-inline: 48px;
 }
 @media (min-width: 576px) {
   .droppable-lg {
-    padding: 72px 48px;
+    padding-block: 72px;
+    padding-inline: 48px;
   }
 }
 @media (min-width: 992px) {
   .droppable-lg {
-    padding: 96px 72px;
+    padding-block: 96px;
+    padding-inline: 72px;
   }
 }
 @keyframes droppable-fade-in {