@transferwise/components 46.159.1 → 46.160.0

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

@@ -10,26 +10,20 @@ table th[class*="col-"] {
   display: table-cell;
 }
 caption {
-  padding-top: 16px;
-  padding-bottom: 16px;
+  padding-block-start: 16px;
+  padding-block-end: 16px;
   color: #5d7079;
   color: var(--color-content-secondary);
-  text-align: left;
-}
-[dir="rtl"] caption {
-  text-align: right;
+  text-align: start;
 }
 th {
-  text-align: left;
-}
-[dir="rtl"] th {
-  text-align: right;
+  text-align: start;
 }
 .table {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  inline-size: 100%;
+  max-inline-size: 100%;
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
 }
 .table > thead > tr > th,
 .table > tbody > tr > th,
@@ -37,27 +31,33 @@ th {
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
-  padding: 24px 16px;
-  padding: var(--size-24) var(--size-16);
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 16px;
+  padding-inline: 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;
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
+  border-block-start: 1px solid var(--color-border-neutral);
+  border-block-end: 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);
+  padding-block: 24px;
+  padding-block: var(--size-24);
+  padding-inline: 16px;
+  padding-inline: 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;
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
+  border-block-start: 1px solid var(--color-border-neutral);
+  border-block-end: 0;
   transition: border ease 0.15s;
 }
 .table > thead > tr > th,
@@ -71,7 +71,7 @@ th {
 }
 .table > thead > tr > th .tw-icon,
 .table > .thead > ol > li .tw-icon {
-  margin-top: -3px;
+  margin-block-start: -3px;
 }
 .table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
@@ -79,14 +79,15 @@ 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;
+  border-block-start: 0;
 }
 .table > .thead:first-child > ol:first-child > li {
-  border-top: 0;
+  border-block-start: 0;
 }
 .table > tbody + tbody {
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
+  border-block-start: 1px solid var(--color-border-neutral);
 }
 .table .table {
   background-color: #ffffff;
@@ -314,21 +315,21 @@ table col[class*="col-"] {
 }
 .table-responsive {
   overflow-x: auto;
-  min-height: 0.01%;
+  min-block-size: 0.01%;
 }
 .table-responsive.table-bordered {
   border: 0;
 }
 @media screen and (max-width: 839.98px) {
   .table-responsive {
-    width: 100%;
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    inline-size: 100%;
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
   }
   .table-responsive > .table {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
   .table-responsive > .table > thead > tr > th,
   .table-responsive > .table > tbody > tr > th,
@@ -345,7 +346,7 @@ table col[class*="col-"] {
   .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;
+    border-block-end: 0;
   }
   .table-responsive.table-bordered {
     border: 1px solid rgba(134,167,189,0.10196);
@@ -398,10 +399,12 @@ table col[class*="col-"] {
     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;
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
+    padding-block: 24px 0;
+    padding-block: var(--size-24) 0;
+    padding-inline: 1.5;
+    padding-inline: var(--line-height-body);
   }
   .table > .tbody > dl > dd {
     padding: 0;
@@ -413,20 +416,22 @@ table col[class*="col-"] {
 }
 @media (max-width: 599.98px) {
   .table > .tbody > dl {
-    padding-bottom: 8px;
+    padding-block-end: 8px;
   }
 }
 /* Deprecated - Table CSS for components moved inside @transferwise/components */
 .table-calendar {
-  min-width: 300px;
+  min-inline-size: 300px;
 }
 .table-calendar > tbody > tr > td {
   padding: 0;
 }
 .table-calendar > tbody > tr > td > a {
   display: block;
-  padding: 4px 0;
-  margin: 4px 2px;
+  padding-block: 4px;
+  padding-inline: 0;
+  margin-block: 4px;
+  margin-inline: 2px;
   border-radius: 3px;
   text-align: center;
   -webkit-text-decoration: none;

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

@@ -1,8 +1,8 @@
 .tw-checkbox-check {
   position: relative;
   display: inline-block;
-  width: 10px;
-  height: 8px;
+  inline-size: 10px;
+  block-size: 8px;
 }
 .tw-checkbox-check::before,
 .tw-checkbox-check::after {
@@ -12,8 +12,8 @@
   background: var(--color-background-screen);
   transform: translateX(0.5px) rotate(-45deg);
   transform-origin: left bottom;
-  left: 8px;
-  left: var(--size-8);
+  inset-inline-start: 8px;
+  inset-inline-start: var(--size-8);
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
@@ -21,12 +21,12 @@
   background-color: var(--color-interactive-negative);
 }
 .tw-checkbox-check::before {
-  top: 9px;
-  height: 6px;
-  width: 2px;
+  inset-block-start: 9px;
+  block-size: 6px;
+  inline-size: 2px;
 }
 .tw-checkbox-check::after {
-  bottom: 5px;
-  height: 2px;
-  width: 11px;
+  inset-block-end: 5px;
+  block-size: 2px;
+  inline-size: 11px;
 }

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

@@ -10,7 +10,7 @@
   line-break: auto;
   line-height: 24px;
   line-height: var(--size-24);
-  text-align: left;
+  text-align: start;
   -webkit-text-decoration: none;
   text-decoration: none;
   text-shadow: none;
@@ -21,37 +21,28 @@
   word-wrap: normal;
   opacity: 0;
 }
-[dir="rtl"] .tooltip {
-  text-align: right;
-}
 .tooltip.in {
   opacity: 1;
 }
 .tooltip.top {
-  margin-top: -3px;
-  padding: 5px 0;
+  margin-block-start: -3px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 .tooltip.right {
-  margin-left: 3px;
-  padding: 0 5px;
-}
-[dir="rtl"] .tooltip.right {
-  margin-right: 3px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-start: 3px;
+  padding-block: 0;
+  padding-inline: 5px;
 }
 .tooltip.bottom {
-  margin-top: 3px;
-  padding: 5px 0;
+  margin-block-start: 3px;
+  padding-block: 5px;
+  padding-inline: 0;
 }
 .tooltip.left {
-  margin-left: -3px;
-  padding: 0 5px;
-}
-[dir="rtl"] .tooltip.left {
-  margin-right: -3px;
-  margin-left: 0;
-  margin-left: initial;
+  margin-inline-start: -3px;
+  padding-block: 0;
+  padding-inline: 5px;
 }
 .tooltip-inner {
   font-size: 0.875rem;
@@ -60,10 +51,12 @@
   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);
+  max-inline-size: 200px;
+  min-inline-size: 120px;
+  padding-block: 16px;
+  padding-block: var(--size-16);
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
   color: #37517e;
   color: var(--color-content-primary);
   text-align: center;
@@ -79,72 +72,46 @@
 }
 .tooltip-arrow {
   position: absolute;
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 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;
+  inset-block-end: 0;
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
+  border-block-width: 5px 0;
+  border-inline-width: 5px;
+  border-block-start-color: #ffffff;
+  border-block-start-color: var(--color-background-screen);
 }
 .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;
+  inset-block-start: 50%;
+  inset-inline-start: 0;
+  margin-block-start: -5px;
+  border-block-width: 5px 5px;
+  border-inline-width: 0 5px;
+  border-inline-end-color: #ffffff;
+  border-inline-end-color: var(--color-background-screen);
 }
 .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;
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  margin-block-start: -5px;
+  border-block-width: 5px 5px;
+  border-inline-width: 5px 0;
+  border-inline-start-color: #ffffff;
+  border-inline-start-color: var(--color-background-screen);
 }
 .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;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  margin-inline-start: -5px;
+  border-block-width: 0 5px;
+  border-inline-width: 5px;
+  border-block-end-color: #ffffff;
+  border-block-end-color: var(--color-background-screen);
 }
 [data-toggle="tooltip"]:not(.btn) {
   cursor: pointer;

package/build/styles/styles/less/utilities.css

@@ -14,40 +14,26 @@
 }
 .center-block {
   display: block;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 .pull-right,
 .pull-xs-right {
-  float: right !important;
-}
-[dir="rtl"] .pull-right,
-[dir="rtl"] .pull-xs-right {
-  float: left !important;
+  float: inline-end !important;
 }
 .pull-left,
 .pull-xs-left {
-  float: left !important;
-}
-[dir="rtl"] .pull-left,
-[dir="rtl"] .pull-xs-left {
-  float: right !important;
+  float: inline-start !important;
 }
 .pull-xs-none {
   float: none !important;
 }
 @media (min-width: 600px) {
   .pull-sm-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-sm-left {
-    float: right !important;
+    float: inline-start !important;
   }
   .pull-sm-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-sm-right {
-    float: left !important;
+    float: inline-end !important;
   }
   .pull-sm-none {
     float: none !important;
@@ -55,16 +41,10 @@
 }
 @media (min-width: 840px) {
   .pull-md-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-md-left {
-    float: right !important;
+    float: inline-start !important;
   }
   .pull-md-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-md-right {
-    float: left !important;
+    float: inline-end !important;
   }
   .pull-md-none {
     float: none !important;
@@ -73,19 +53,11 @@
 @media (min-width: 1160px) {
   .pull-lg-left,
   .pull-xl-left {
-    float: left !important;
-  }
-  [dir="rtl"] .pull-lg-left,
-  [dir="rtl"] .pull-xl-left {
-    float: right !important;
+    float: inline-start !important;
   }
   .pull-lg-right,
   .pull-xl-right {
-    float: right !important;
-  }
-  [dir="rtl"] .pull-lg-right,
-  [dir="rtl"] .pull-xl-right {
-    float: left !important;
+    float: inline-end !important;
   }
   .pull-lg-none,
   .pull-xl-none {
@@ -93,10 +65,10 @@
   }
 }
 .pull-left-single-direction {
-  float: left !important;
+  float: inline-start !important;
 }
 .pull-right-single-direction {
-  float: right !important;
+  float: inline-end !important;
 }
 .hide {
   display: none !important;

package/build/styles/styles/less/wells.css

@@ -1,9 +1,9 @@
 .well,
 .well-xs {
-  min-height: 24px;
-  min-height: var(--size-24);
-  margin-bottom: 24px;
-  margin-bottom: var(--size-24);
+  min-block-size: 24px;
+  min-block-size: var(--size-24);
+  margin-block-end: 24px;
+  margin-block-end: var(--size-24);
   border-radius: 10px;
   border-radius: var(--radius-small);
   border: solid 1px rgba(0,0,0,0.10196);
@@ -14,10 +14,10 @@
 }
 @media only screen and (min-width: 600px) {
   .well-sm {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    min-block-size: 24px;
+    min-block-size: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     border-radius: 10px;
     border-radius: var(--radius-small);
     border: solid 1px rgba(0,0,0,0.10196);
@@ -29,10 +29,10 @@
 }
 @media only screen and (min-width: 840px) {
   .well-md {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    min-block-size: 24px;
+    min-block-size: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     border-radius: 10px;
     border-radius: var(--radius-small);
     border: solid 1px rgba(0,0,0,0.10196);
@@ -45,10 +45,10 @@
 @media only screen and (min-width: 1160px) {
   .well-lg,
   .well-xl {
-    min-height: 24px;
-    min-height: var(--size-24);
-    margin-bottom: 24px;
-    margin-bottom: var(--size-24);
+    min-block-size: 24px;
+    min-block-size: var(--size-24);
+    margin-block-end: 24px;
+    margin-block-end: var(--size-24);
     border-radius: 10px;
     border-radius: var(--radius-small);
     border: solid 1px rgba(0,0,0,0.10196);

package/build/types/ListItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACvB,iBAAiB,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB;IACpB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;0MAiBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOf,CAAC;AA6GF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACvB,iBAAiB,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB;IACpB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;0MAiBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyOf,CAAC;AA6GF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.159.1",
+  "version": "46.160.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,9 +91,9 @@
     "storybook": "^10.5.4",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.4",
-    "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.10.3",
-    "@wise/wds-configs": "0.0.0"
+    "@transferwise/less-config": "3.2.0",
+    "@wise/wds-configs": "0.0.0",
+    "@wise/components-theming": "1.10.3"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/Accordion/Accordion.css

@@ -1,6 +1,6 @@
 .np-accordion-item {
   display: block;
-  width: 100%;
+  inline-size: 100%;
 }
 .np-accordion-item--open .media {
   border: 0 !important;
@@ -13,19 +13,17 @@
   color: #ffffff;
 }
 .np-accordion-item__content {
-  padding: 0 12px 24px 12px;
-  padding: 0 var(--size-12) var(--size-24) var(--size-12);
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
-  border-bottom: 1px solid var(--color-border-neutral);
+  padding-block: 0 24px;
+  padding-block: 0 var(--size-24);
+  padding-inline: 12px 12px;
+  padding-inline: var(--size-12) var(--size-12);
+  border-block-end: 1px solid rgba(0,0,0,0.10196);
+  border-block-end: 1px solid #0000001a;
+  border-block-end: 1px solid var(--color-border-neutral);
 }
 @media (min-width: 320.02px) {
   .np-accordion-item__content.has-icon {
-    padding-left: 68px;
-  }
-  [dir="rtl"] .np-accordion-item__content.has-icon {
-    padding-right: 68px;
-    padding-left: 0;
-    padding-left: initial;
+    padding-inline-start: 68px;
   }
 }
 .np-accordion-item .np-option .np-option__title {
@@ -37,8 +35,10 @@
   align-items: center;
 }
 .np-theme-personal .np-accordion-item--with-icon .np-accordion-item__content {
-  padding: 0 56px 16px;
-  padding: 0 var(--size-56) var(--size-16);
+  padding-block: 0 16px;
+  padding-block: 0 var(--size-16);
+  padding-inline: 56px;
+  padding-inline: var(--size-56);
 }
 .np-theme-personal .np-accordion-item--with-icon .media {
   display: flex;
@@ -49,7 +49,7 @@
   font-size: var(--font-size-18);
 }
 .np-theme-personal .np-accordion-item .np-option .np-option__title {
-  margin-bottom: 0;
+  margin-block-end: 0;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
   letter-spacing: -0.01em;
@@ -59,16 +59,18 @@
 }
 .np-theme-personal .np-accordion-item .np-option .circle-sm {
   background-color: transparent;
-  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);
   border-radius: 0;
 }
 .np-theme-personal .np-accordion-item__content {
-  padding: 0 56px 16px 16px;
-  padding: 0 var(--size-56) var(--size-16) var(--size-16);
-  border-bottom: none;
+  padding-block: 0 16px;
+  padding-block: 0 var(--size-16);
+  padding-inline: 16px 56px;
+  padding-inline: var(--size-16) var(--size-56);
+  border-block-end: none;
   color: #5d7079;
   color: var(--color-content-secondary);
 }