@transferwise/components 46.159.2 → 46.160.1

package/build/types/common/ResponsivePanel/ResponsivePanel.d.ts

@@ -4,7 +4,7 @@ declare const ResponsivePanel: import("react").ForwardRefExoticComponent<{
     altAxis?: boolean;
     open?: boolean;
     onClose?: (event: Event | import("react").SyntheticEvent) => void;
-    position?: import("..").FloatingPlacement;
+    position?: import("../Panel/Panel.positionUtils").FloatingPlacement;
     anchorRef: import("react").RefObject<Element | null>;
     anchorWidth?: boolean;
     considerHeight?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.159.2",
+  "version": "46.160.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -52,7 +52,7 @@
     "@rollup/plugin-url": "^8.0.2",
     "@storybook/addon-a11y": "^10.5.4",
     "@storybook/addon-docs": "^10.5.4",
-    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-mcp": "^0.7.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
     "@storybook/react-webpack5": "^10.5.4",
     "@testing-library/dom": "^10.4.1",
@@ -71,12 +71,12 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@monaco-editor/react": "^4.7.0",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "^0.56.0",
     "monaco-editor-webpack-plugin": "^7.1.1",
-    "@wise/art": "^2.31.1",
+    "@wise/art": "^2.32.0",
     "@wise/eslint-config": "^14.2.1",
     "babel-plugin-formatjs": "^11.3.16",
-    "eslint": "^9.39.4",
+    "eslint": "^9.39.5",
     "eslint-plugin-storybook": "^10.5.4",
     "gulp": "^5.0.1",
     "jest": "^29.7.0",
@@ -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);
 }

package/src/Accordion/Accordion.less

@@ -1,5 +1,4 @@
 @import (reference) "./../styles/variables/neptune-tokens.less";
-@import (reference) "./../styles/less/mixins/_logical-properties.less";
 @import (reference) "./../styles/less/core/_typography.less";
 
 .np-accordion-item {
@@ -29,15 +28,15 @@
 
     @media (--screen-xs) {
       &.has-icon {
-        .padding(left, 68px);
+        padding-left: 68px;
       }
     }
   }
 
   .np-option {
-    .np-option__title { 
+    .np-option__title {
       font-weight: var(--font-weight-semi-bold);
-    } 
+    }
   }
 
   .np-theme-personal & {

package/src/AvatarLayout/AvatarLayout.css

@@ -4,8 +4,8 @@
   --np-avatar-size: 32px;
 }
 .np-avatar-layout-diagonal {
-  width: var(--np-avatar-layout-size);
-  height: var(--np-avatar-layout-size);
+  inline-size: var(--np-avatar-layout-size);
+  block-size: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-diagonal-mask {
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
@@ -16,17 +16,17 @@
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
 .np-avatar-layout-diagonal-child {
-  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
-  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
+  margin-inline-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  margin-block-start: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
 [dir="rtl"] .np-avatar-layout-diagonal-child {
-  margin-left: 0;
-  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+  margin-inline-start: 0;
+  margin-inline-end: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
-  height: var(--np-avatar-layout-size);
+  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
+  inline-size: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
+  block-size: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
   -webkit-mask-image: radial-gradient(circle at top calc(100% - (var(--np-avatar-size) / 2)) left calc(100% + (var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
@@ -35,8 +35,8 @@
           mask-image: radial-gradient(circle at top calc(100% - calc(var(--np-avatar-size) / 2)) left calc(100% + calc(var(--np-avatar-size) / 2) - var(--np-avatar-offset)), transparent, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
 .np-avatar-layout-horizontal-child {
-  margin-left: calc(var(--np-avatar-offset) * -1);
+  margin-inline-start: calc(var(--np-avatar-offset) * -1);
 }
 [dir="rtl"] .np-avatar-layout-horizontal-child {
-  margin-right: calc(var(--np-avatar-offset) * -1);
+  margin-inline-end: calc(var(--np-avatar-offset) * -1);
 }

package/src/AvatarView/AvatarView.css

@@ -4,18 +4,26 @@
   display: inline-block;
 }
 .np-dot-mask {
+  --np-dot-h-side: left;
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+}
+[dir="rtl"] .np-dot-mask {
+  --np-dot-h-side: right;
 }
 .np-dot-badge {
   position: absolute;
-  width: var(--np-dot-size);
-  height: var(--np-dot-size);
+  inline-size: var(--np-dot-size);
+  block-size: var(--np-dot-size);
   border-radius: 9999px;
   border-radius: var(--radius-full);
-  right: 0;
+  inset-inline-end: 0;
 }
 .np-dot-badge-notification {
   background-color: var(--color-sentiment-negative);

package/src/AvatarView/Dot/Dot.css

@@ -4,18 +4,26 @@
   display: inline-block;
 }
 .np-dot-mask {
+  --np-dot-h-side: left;
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) left calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - (var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - (var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
           mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+          mask-image: radial-gradient(circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side) calc(100% - calc(var(--np-dot-size) / 2)), transparent 0, transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)), black calc(var(--np-dot-size) / 2 + var(--np-dot-offset) + 0.5px));
+}
+[dir="rtl"] .np-dot-mask {
+  --np-dot-h-side: right;
 }
 .np-dot-badge {
   position: absolute;
-  width: var(--np-dot-size);
-  height: var(--np-dot-size);
+  inline-size: var(--np-dot-size);
+  block-size: var(--np-dot-size);
   border-radius: 9999px;
   border-radius: var(--radius-full);
-  right: 0;
+  inset-inline-end: 0;
 }
 .np-dot-badge-notification {
   background-color: var(--color-sentiment-negative);

package/src/AvatarView/Dot/Dot.less

@@ -4,8 +4,14 @@
   display: inline-block;
 
   &-mask {
+    --np-dot-h-side: left;
+
+    [dir="rtl"] & {
+      --np-dot-h-side: right;
+    }
+
     mask-image: radial-gradient(
-      circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) left
+      circle at bottom calc(100% - calc(var(--np-dot-size) / 2)) var(--np-dot-h-side)
         calc(100% - calc(var(--np-dot-size) / 2)),
       transparent 0,
       transparent calc(var(--np-dot-size) / 2 + var(--np-dot-offset)),

package/src/Button/Button.css

@@ -48,7 +48,7 @@
 .wds-Button {
   display: inline-flex;
   flex: none;
-  width: auto;
+  inline-size: auto;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
@@ -175,7 +175,7 @@
   padding-inline-end: var(--size-8);
 }
 .wds-Button--block {
-  width: 100%;
+  inline-size: 100%;
 }
 .wds-Button-avatars {
   display: inline-flex;
@@ -193,8 +193,8 @@
   --Button-iconSize: 16px;
 }
 .wds-Button-icon svg {
-  width: var(--Button-iconSize);
-  height: var(--Button-iconSize);
+  inline-size: var(--Button-iconSize);
+  block-size: var(--Button-iconSize);
 }
 .wds-Button-content {
   position: relative;
@@ -214,8 +214,8 @@
 }
 .wds-Button-loader {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
 }
 .wds-Button-loader .process-circle {
   stroke: var(--Button-color);

package/src/Button/LegacyButton/LegacyButton.css

@@ -3,20 +3,14 @@
 }
 .np-btn.np-btn-block > span.btn-loader {
   position: absolute;
-  left: 24px;
-  left: var(--size-24);
-}
-[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  right: 24px;
-  right: var(--size-24);
-  left: auto;
-  left: initial;
+  inset-inline-start: 24px;
+  inset-inline-start: var(--size-24);
 }
 .np-btn.np-btn-xs > span.btn-loader {
   background-size: 16px 16px;
 }
 .np-btn.np-btn-xs.btn-block > span.btn-loader {
-  top: 0;
+  inset-block-start: 0;
 }
 .np-btn.disabled[class] {
   pointer-events: auto;

package/src/Button/LegacyButton/LegacyButton.less

@@ -1,11 +1,9 @@
-@import (reference) "./../../styles/less/mixins/_logical-properties.less";
-
 .np-btn {
   position: relative;
 
   &.np-btn-block > span.btn-loader {
     position: absolute;
-    .left(var(--size-24));
+    left: var(--size-24);
   }
 
   &.np-btn-xs > span.btn-loader {

package/src/Button/_stories/Button.test.story.tsx

@@ -34,7 +34,7 @@ const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary
 const buttonSizes = ['sm', 'md', 'lg'] as const;
 export const AllVariants: Story = {
   tags: ['!autodocs'],
-  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green', 'rtl'], {
+  ...withVariantConfig(['default', 'dark', 'bright-green', 'forest-green'], {
     parameters: {
       padding: '0',
     },

package/src/Calendar/Calendar.css

@@ -1,9 +1,10 @@
 .wds-Calendar__option--day,
 .wds-Calendar__option--month,
 .wds-Calendar__option--year {
-  width: 100%;
-  padding: 4px 0;
-  padding: var(--size-4) 0;
+  inline-size: 100%;
+  padding-block: 4px;
+  padding-block: var(--size-4);
+  padding-inline: 0;
   border: transparent;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -94,14 +95,14 @@
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  height: 40px;
-  height: var(--size-40);
+  block-size: 40px;
+  block-size: var(--size-40);
   border-radius: 9999px;
   border-radius: var(--radius-full);
   line-height: 40px;
   line-height: var(--size-40);
-  width: 40px;
-  width: var(--size-40);
+  inline-size: 40px;
+  inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -114,7 +115,7 @@
   text-underline-offset: 4px;
 }
 .tw-date-lookup-calendar {
-  min-width: 300px;
+  min-inline-size: 300px;
   text-align: center;
   table-layout: fixed;
   border: none;

package/src/Calendar/TableLink/TableLink.css

@@ -1,9 +1,10 @@
 .wds-Calendar__option--day,
 .wds-Calendar__option--month,
 .wds-Calendar__option--year {
-  width: 100%;
-  padding: 4px 0;
-  padding: var(--size-4) 0;
+  inline-size: 100%;
+  padding-block: 4px;
+  padding-block: var(--size-4);
+  padding-inline: 0;
   border: transparent;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -94,14 +95,14 @@
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  height: 40px;
-  height: var(--size-40);
+  block-size: 40px;
+  block-size: var(--size-40);
   border-radius: 9999px;
   border-radius: var(--radius-full);
   line-height: 40px;
   line-height: var(--size-40);
-  width: 40px;
-  width: var(--size-40);
+  inline-size: 40px;
+  inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;

package/src/Carousel/Carousel.css

@@ -23,10 +23,10 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 16px;
-  padding-bottom: var(--size-16);
+  min-block-size: 32px;
+  min-block-size: var(--size-32);
+  padding-block-end: 16px;
+  padding-block-end: var(--size-16);
 }
 .carousel__card,
 .carousel__card:hover,
@@ -40,7 +40,7 @@
 .carousel__card {
   display: block;
   position: relative;
-  text-align: left;
+  text-align: start;
   border: none;
   overflow: hidden;
   background: rgba(134,167,189,0.10196);
@@ -53,9 +53,9 @@
 }
 @media (min-width: 1160px) {
   .carousel__card {
-    min-width: 280px;
-    width: 280px;
-    height: 280px;
+    min-inline-size: 280px;
+    inline-size: 280px;
+    block-size: 280px;
   }
 }
 @media (min-width: 840px) {
@@ -63,22 +63,23 @@
     overflow: visible;
   }
   .carousel {
-    margin: 0 calc(-1 * 8px);
-    margin: 0 calc(-1 * var(--size-8));
+    margin-block: 0;
+    margin-inline: calc(-1 * 8px);
+    margin-inline: calc(-1 * var(--size-8));
   }
 }
 @media (max-width: 1159.98px) {
   .carousel__card {
-    min-width: 242px;
-    width: 242px;
-    height: 242px;
+    min-inline-size: 242px;
+    inline-size: 242px;
+    block-size: 242px;
   }
 }
 @media (max-width: 839.98px) {
   .carousel__card {
-    min-width: 336px;
-    width: 336px;
-    height: 336px;
+    min-inline-size: 336px;
+    inline-size: 336px;
+    block-size: 336px;
     scroll-snap-stop: always;
   }
 }
@@ -94,7 +95,7 @@
   background-color: var(--color-background-neutral-hover);
 }
 .carousel__card-content {
-  height: 100%;
+  block-size: 100%;
   font-weight: normal;
   padding: 24px;
   padding: var(--size-24);
@@ -102,16 +103,16 @@
 .carousel__indicators {
   display: flex;
   justify-content: center;
-  padding-top: 8px;
-  padding-top: var(--size-8);
+  padding-block-start: 8px;
+  padding-block-start: var(--size-8);
   gap: 8px;
   gap: var(--size-8);
 }
 .carousel__indicator {
-  width: 12px;
-  width: var(--size-12);
-  height: 12px;
-  height: var(--size-12);
+  inline-size: 12px;
+  inline-size: var(--size-12);
+  block-size: 12px;
+  block-size: var(--size-12);
   border-radius: 8px;
   border-radius: var(--size-8);
   background: #c9cbce;
@@ -123,12 +124,12 @@
   transition: all 0.1s;
 }
 .carousel__indicator:hover {
-  width: 16px;
-  width: var(--size-16);
+  inline-size: 16px;
+  inline-size: var(--size-16);
 }
 .carousel__indicator--selected,
 .carousel__indicator--selected:hover {
   background: var(--color-interactive-primary);
-  width: 24px;
-  width: var(--size-24);
+  inline-size: 24px;
+  inline-size: var(--size-24);
 }

package/src/Checkbox/_stories/Checkbox.story.tsx

@@ -52,7 +52,7 @@ export const Multiple: Story = {
       </>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'rtl']),
+  ...withVariantConfig(['default', 'dark']),
 };
 
 export const WithinField = {

package/src/Checkbox/_stories/Checkbox.test.story.tsx

@@ -30,7 +30,7 @@ export const MultipleMobile: Story = {
       </>
     );
   },
-  ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
+  ...withVariantConfig(['default', 'dark', 'mobile']),
 };
 
 /**
@@ -41,8 +41,9 @@ export const MultipleMobile: Story = {
 export const RTLDiff: Story = {
   render: () => (
     <>
-      <Checkbox label="Label only" onChange={() => {}} />
+      <Checkbox checked label="Label only" onChange={() => {}} />
       <Checkbox
+        checked
         label="Label with secondary"
         secondary="Secondary description text"
         onChange={() => {}}

package/src/CheckboxButton/CheckboxButton.css

@@ -1,9 +1,9 @@
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
-  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);
   opacity: 0;
 }
 .np-checkbox-button input[type="checkbox"]:not(:disabled) {
@@ -14,29 +14,27 @@
   pointer-events: none;
 }
 .checkbox .np-checkbox-button input[type="checkbox"] {
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   margin: 0;
 }
-[dir="rtl"] .checkbox .np-checkbox-button input[type="checkbox"] {
-  right: 0;
-  left: auto;
-  left: initial;
-}
 .np-tw-checkbox-indeterminate {
   position: relative;
 }
 .np-tw-checkbox-indeterminate::after {
   content: "";
   position: absolute;
-  width: 12px;
-  height: 2px;
-  top: 55%;
-  left: 50%;
+  inline-size: 12px;
+  block-size: 2px;
+  inset-block-start: 55%;
+  inset-inline-start: 50%;
   background: #ffffff;
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
+[dir="rtl"] .np-tw-checkbox-indeterminate::after {
+  transform: translate(50%, -50%);
+}
 .np-tw-checkbox-indeterminate .has-error::after {
   background-color: #e74848;
   background-color: var(--color-interactive-negative);