@transferwise/components 0.0.0-experimental-c1f5b0b → 0.0.0-experimental-fe160ab

package/build/styles/css/column-layout.css

@@ -1,46 +1,51 @@
 .column-layout {
-  inline-size: 100%;
+  width: 100%;
 }
 .column-layout-left,
 .column-layout-right {
   position: fixed;
-  inline-size: 264px;
+  width: 264px;
   vertical-align: top;
-  block-size: 100%;
+  height: 100%;
   z-index: 3;
   transition: transform ease 0.5s;
-  inset-block-start: 0;
-  max-block-size: 100vh;
-  max-block-size: 100dvh;
+  top: 0;
+  max-height: 100vh;
+  max-height: 100dvh;
   overflow-y: auto;
 }
 .column-layout-left {
   transform: translateX(-264px);
 }
 .column-layout-right {
-  inset-inline-end: 0;
+  right: 0;
   transform: translateX(264px);
 }
+[dir="rtl"] .column-layout-right {
+  left: 0;
+  right: auto;
+  right: initial;
+}
 .column-layout-left.open,
 .column-layout-right.open {
   transform: translateX(0);
 }
 .column-layout-main {
-  inline-size: 100%;
+  width: 100%;
 }
 .column-layout-top {
   position: fixed;
-  inset-block-start: 0;
-  inline-size: 264px;
-  max-block-size: 100vh;
-  max-block-size: 100dvh;
+  top: 0;
+  width: 264px;
+  max-height: 100vh;
+  max-height: 100dvh;
   overflow-y: auto;
   backface-visibility: hidden;
 }
 .column-layout-bottom {
   position: fixed;
-  inset-block-end: 0;
-  inline-size: 264px;
+  bottom: 0;
+  width: 264px;
   padding: 24px;
   padding: var(--size-24);
 }
@@ -57,27 +62,32 @@
   .column-layout-main {
     display: table-cell;
     vertical-align: top;
-    inline-size: auto;
+    width: auto;
   }
 }
 .column-layout-cover.in {
-  inline-size: 100%;
-  block-size: 100%;
+  width: 100%;
+  height: 100%;
   opacity: 0.9;
 }
 .column-layout-cover .close {
   position: absolute;
-  inset-inline-start: 284px;
-  inset-block-start: -1000px;
+  left: 284px;
+  top: -1000px;
   opacity: 0;
   transition: opacity 0.35s ease;
   transition-delay: 0.35s;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+[dir="rtl"] .column-layout-cover .close {
+  right: 284px;
+  left: auto;
+  left: initial;
+}
 .column-layout-cover.in .close {
   opacity: 1;
-  inset-block-start: 20px;
+  top: 20px;
 }
 @media (min-width: 1160px) {
   .column-layout-cover {
@@ -91,52 +101,64 @@
   .column-layout-cover {
     position: fixed;
     display: block;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    inline-size: 0;
-    block-size: 0;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
     opacity: 0;
     transition: opacity 0.35s ease;
     background-color: #37517e;
     cursor: pointer;
     z-index: 1055;
   }
+  [dir="rtl"] .column-layout-cover {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
   .column-layout-left,
   .column-layout-right {
     z-index: 1060;
   }
 }
 .column-layout-main .container {
-  max-inline-size: 1176px;
-  margin-inline-start: 0;
+  max-width: 1176px;
+  margin-left: 0;
+}
+[dir="rtl"] .column-layout-main .container {
+  margin-right: 0;
+  margin-left: 0;
+  margin-left: initial;
 }
 .column-layout-brand {
-  padding-block: 4px;
-  padding-block: var(--size-4);
-  padding-inline: 24px;
+  padding: 4px 24px;
+  padding: var(--size-4) 24px;
 }
 @media (min-width: 1160px) {
   .column-layout-brand {
-    padding-inline-start: 32px;
-    padding-inline-end: 32px;
+    padding-left: 32px;
+    padding-right: 32px;
   }
 }
 body > .column-layout {
-  min-block-size: 100vh;
-  min-block-size: 100dvh;
-  block-size: 100vh;
-  block-size: 100dvh;
+  min-height: 100vh;
+  min-height: 100dvh;
+  height: 100vh;
+  height: 100dvh;
 }
 .column-layout-left .column-layout-top {
   background-position: 0 40px;
   background-position: 0 var(--size-40);
   background-repeat: no-repeat;
   background-size: 264px auto;
-  block-size: 100vh;
-  block-size: 100dvh;
+  height: 100vh;
+  height: 100dvh;
 }
 @media (min-height: 596px) {
   .column-layout-left .column-layout-top {
     background-position: left bottom;
   }
+  [dir="rtl"] .column-layout-left .column-layout-top {
+    background-position: right bottom;
+  }
 }

package/build/styles/css/currency-flags.css

@@ -24,10 +24,23 @@
 }
 li > .currency-flag:first-child,
 li > a > .currency-flag:first-child {
-  margin-inline-end: 8px;
-  margin-inline-end: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] li > .currency-flag:first-child,
+[dir="rtl"] li > a > .currency-flag:first-child {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
 }
 .btn .currency-flag:first-child {
-  margin-inline-end: 8px;
-  margin-inline-end: var(--size-8);
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .btn .currency-flag:first-child {
+  margin-left: 8px;
+  margin-left: var(--size-8);
+  margin-right: 0;
+  margin-right: initial;
 }

package/build/styles/css/decision.css

@@ -1,6 +1,6 @@
 .decision {
   cursor: pointer;
-  margin-block-end: 0 !important;
+  margin-bottom: 0 !important;
   border: 0;
   align-items: center;
   transition: background-color ease 350ms;
@@ -59,8 +59,8 @@
 .decision__title + p,
 .decision__title + ul:not(.list-unstyled),
 .decision__title + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
+  margin-top: 8px;
+  margin-top: var(--size-8);
 }
 .decision__content {
   font-size: 0.875rem;
@@ -69,26 +69,24 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
-  margin-block-start: 4px;
-  margin-block-start: var(--size-4);
+  margin-top: 4px;
+  margin-top: var(--size-4);
 }
 .decision + .decision {
-  margin-block-start: -1px;
+  margin-top: -1px;
 }
 .decision dd:last-child {
-  margin-block-end: 0;
+  margin-bottom: 0;
 }
 .decision dl {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
+  margin-top: 8px;
+  margin-top: var(--size-8);
 }
 .decision .media,
 .decision.media {
-  inline-size: 100%;
-  padding-block: 16px;
-  padding-block: var(--size-16);
-  padding-inline: 12px;
-  padding-inline: var(--size-12);
+  width: 100%;
+  padding: 16px 12px;
+  padding: var(--size-16) var(--size-12);
 }
 .np-theme-personal .decision .media,
 .np-theme-personal .decision.media {

package/build/styles/css/dropdowns.css

@@ -4,10 +4,10 @@
 }
 .dropdown-menu {
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
   z-index: 1000;
-  float: inline-start;
+  float: left;
   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: start;
+  text-align: left;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border: 0 solid rgba(0,0,0,0.10196);
@@ -25,12 +25,26 @@
   border-radius: 3px;
   box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
   background-clip: padding-box;
-  min-inline-size: 104px;
+  min-width: 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;
+}
+[dir="rtl"] .dropdown-menu {
+  float: right;
+}
+[dir="rtl"] .dropdown-menu {
+  padding: 8px   ;
+}
+[dir="rtl"] .dropdown-menu {
+  text-align: right;
+}
 .np-theme-personal .dropdown-menu,
 .np-theme-personal--forest-green .dropdown-menu,
 .np-theme-personal--dark .dropdown-menu {
@@ -42,7 +56,7 @@
 }
 @media (min-width: 600px) {
   .dropdown-menu {
-    min-inline-size: 160px;
+    min-width: 160px;
   }
 }
 .np-theme-personal--forest-green .dropdown-menu,
@@ -51,7 +65,7 @@
   box-shadow: none;
 }
 .dropdown-menu .divider {
-  block-size: 1px;
+  height: 1px;
   margin: 0;
   overflow: hidden;
   background-color: rgba(0,0,0,0.10196);
@@ -87,12 +101,12 @@
   border-radius: var(--radius-small);
 }
 .np-theme-light .dropdown-menu > li:first-child > a {
-  border-start-end-radius: 2px;
-  border-start-start-radius: 2px;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .np-theme-light .dropdown-menu > li:last-child > a {
-  border-end-end-radius: 2px;
-  border-end-start-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
 }
 .dropdown-menu > .overlay-back-button,
 .dropdown-menu > .overlay-title {
@@ -100,19 +114,19 @@
 }
 .dropdown-menu,
 .btn-group .dropdown-menu {
-  max-inline-size: calc(100vw - 32px);
+  max-width: calc(100vw - 32px);
 }
 .dropdown-menu.dropdown-menu-sm,
 .btn-group .dropdown-menu.dropdown-menu-sm {
-  inline-size: 220px;
+  width: 220px;
 }
 .dropdown-menu.dropdown-menu-md,
 .btn-group .dropdown-menu.dropdown-menu-md {
-  inline-size: 300px;
+  width: 300px;
 }
 .dropdown-menu.dropdown-menu-lg,
 .btn-group .dropdown-menu.dropdown-menu-lg {
-  inline-size: 420px;
+  width: 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,
@@ -165,18 +179,23 @@
 @media (max-width: 599.98px) {
   .open > .dropdown-menu-overlay {
     position: fixed;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    inline-size: 100vw;
-    block-size: 100vh;
-    block-size: 100dvh;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
     border: 0;
     border-radius: 0;
     box-shadow: none;
-    max-inline-size: none;
+    max-width: none;
     overflow-y: auto;
     animation: listSlideOver 0.15s ease-out forwards;
   }
+  [dir="rtl"] .open > .dropdown-menu-overlay {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
   .open > .dropdown-menu-overlay > .overlay-back-button,
   .open > .dropdown-menu-overlay > .overlay-title {
     display: block;
@@ -187,58 +206,161 @@
 }
 .dropdown-menu-right,
 .dropdown-menu-xs-right {
-  inset-inline-start: auto;
-  inset-inline-end: 0;
+  left: auto;
+  right: 0;
+}
+[dir="rtl"] .dropdown-menu-right,
+[dir="rtl"] .dropdown-menu-xs-right {
+  right: auto;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .dropdown-menu-right,
+[dir="rtl"] .dropdown-menu-xs-right {
+  left: 0;
+  right: auto;
+  right: initial;
 }
 .dropdown-menu-left,
 .dropdown-menu-xs-left {
-  inset-inline-start: 0;
-  inset-inline-end: auto;
+  left: 0;
+  right: auto;
+}
+[dir="rtl"] .dropdown-menu-left,
+[dir="rtl"] .dropdown-menu-xs-left {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .dropdown-menu-left,
+[dir="rtl"] .dropdown-menu-xs-left {
+  left: auto;
+  right: auto;
+  right: initial;
 }
 @media (min-width: 600px) {
   .dropdown-menu-sm-right {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
+    left: auto;
+    right: 0;
+  }
+  [dir="rtl"] .dropdown-menu-sm-right {
+    right: auto;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .dropdown-menu-sm-right {
+    left: 0;
+    right: auto;
+    right: initial;
   }
   .dropdown-menu-sm-left {
-    inset-inline-start: 0;
-    inset-inline-end: auto;
+    left: 0;
+    right: auto;
+  }
+  [dir="rtl"] .dropdown-menu-sm-left {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .dropdown-menu-sm-left {
+    left: auto;
+    right: auto;
+    right: initial;
   }
 }
 @media (min-width: 840px) {
   .dropdown-menu-md-right {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
+    left: auto;
+    right: 0;
+  }
+  [dir="rtl"] .dropdown-menu-md-right {
+    right: auto;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .dropdown-menu-md-right {
+    left: 0;
+    right: auto;
+    right: initial;
   }
   .dropdown-menu-md-left {
-    inset-inline-start: 0;
-    inset-inline-end: auto;
+    left: 0;
+    right: auto;
+  }
+  [dir="rtl"] .dropdown-menu-md-left {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .dropdown-menu-md-left {
+    left: auto;
+    right: auto;
+    right: initial;
   }
 }
 @media (min-width: 1160px) {
   .dropdown-menu-lg-right {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
+    left: auto;
+    right: 0;
+  }
+  [dir="rtl"] .dropdown-menu-lg-right {
+    right: auto;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .dropdown-menu-lg-right {
+    left: 0;
+    right: auto;
+    right: initial;
   }
   .dropdown-menu-lg-left {
-    inset-inline-start: 0;
-    inset-inline-end: auto;
+    left: 0;
+    right: auto;
+  }
+  [dir="rtl"] .dropdown-menu-lg-left {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .dropdown-menu-lg-left {
+    left: auto;
+    right: auto;
+    right: initial;
   }
 }
 @media (min-width: 1160px) {
   .dropdown-menu-xl-right {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
+    left: auto;
+    right: 0;
+  }
+  [dir="rtl"] .dropdown-menu-xl-right {
+    right: auto;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .dropdown-menu-xl-right {
+    left: 0;
+    right: auto;
+    right: initial;
   }
   .dropdown-menu-xl-left {
-    inset-inline-start: 0;
-    inset-inline-end: auto;
+    left: 0;
+    right: auto;
+  }
+  [dir="rtl"] .dropdown-menu-xl-left {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .dropdown-menu-xl-left {
+    left: auto;
+    right: auto;
+    right: initial;
   }
 }
 .dropdown-header {
   display: block;
-  padding-block: 8px;
-  padding-inline: 16px;
+  padding: 8px 16px;
   line-height: 1.5;
   line-height: var(--line-height-body);
   color: #5d7079;
@@ -288,34 +410,63 @@
 .dropdown-header + p,
 .dropdown-header + ul:not(.list-unstyled),
 .dropdown-header + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
+  margin-top: 8px;
+  margin-top: var(--size-8);
 }
 .dropdown-backdrop {
   position: fixed;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  inset-block-end: 0;
-  inset-block-start: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
   z-index: 990;
 }
+[dir="rtl"] .dropdown-backdrop {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+[dir="rtl"] .dropdown-backdrop {
+  left: 0;
+  right: auto;
+  right: initial;
+}
 .dropup .dropdown-menu,
 .navbar-fixed-bottom .dropdown .dropdown-menu {
-  inset-block-start: auto;
-  inset-block-end: -2px;
-  margin-block-end: 2px;
+  top: auto;
+  bottom: -2px;
+  margin-bottom: 2px;
 }
 @media (min-width: 840px) {
   .navbar-right .dropdown-menu {
-    inset-inline-start: auto;
-    inset-inline-end: 0;
+    left: auto;
+    right: 0;
+  }
+  [dir="rtl"] .navbar-right .dropdown-menu {
+    right: auto;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .navbar-right .dropdown-menu {
+    left: 0;
+    right: auto;
+    right: initial;
   }
   .navbar-right .dropdown-menu-left {
-    inset-inline-start: 0;
-    inset-inline-end: auto;
+    left: 0;
+    right: auto;
+  }
+  [dir="rtl"] .navbar-right .dropdown-menu-left {
+    right: 0;
+    left: auto;
+    left: initial;
+  }
+  [dir="rtl"] .navbar-right .dropdown-menu-left {
+    left: auto;
+    right: auto;
+    right: initial;
   }
 }
 .bootstrap-select .dropdown-menu {
-  margin-block: -8px -6px;
-  margin-inline: 0;
+  margin: -8px 0 -6px;
 }