From 19bffacafb1f6963a648736e165e82757705fbad Mon Sep 17 00:00:00 2001
From: Thomas Zemp <tom@dhis2.org>
Date: Fri, 16 Feb 2024 20:50:41 +0100
Subject: [PATCH] feat: add rtl support for ui components (#1452)

---
 CHANGELOG.md                                  |  33 ++++
 collections/forms/package.json                |  20 +--
 collections/ui/API.md                         |   6 +-
 collections/ui/package.json                   |  98 ++++++------
 components/alert/package.json                 |   8 +-
 components/alert/src/alert-bar/action.js      |   2 +-
 components/alert/src/alert-bar/actions.js     |   4 +-
 .../alert/src/alert-bar/alert-bar.stories.js  |  17 ++
 .../alert/src/alert-bar/alert-bar.styles.js   |   4 +-
 components/alert/src/alert-bar/dismiss.js     |   2 +-
 components/alert/src/alert-bar/icon.js        |   2 +-
 .../alert/src/alert-stack/alert-stack.js      |   8 +-
 .../src/alert-stack/alert-stack.stories.js    |  29 +++-
 components/box/package.json                   |   4 +-
 components/button/package.json                |  12 +-
 .../button/src/button-strip/button-strip.js   |   4 +-
 .../src/button-strip/button-strip.stories.js  |  12 ++
 .../button/src/button/button.stories.js       |  11 ++
 components/button/src/button/button.styles.js |  16 +-
 .../src/dropdown-button/dropdown-button.js    |   2 +-
 .../dropdown-button.stories.js                |   9 ++
 .../button/src/split-button/split-button.js   |  10 +-
 .../src/split-button/split-button.stories.js  |   9 ++
 components/calendar/package.json              |  16 +-
 components/card/package.json                  |   4 +-
 components/center/package.json                |   4 +-
 components/checkbox/package.json              |   8 +-
 .../checkbox-field/checkbox-field.stories.js  |   8 +
 components/checkbox/src/checkbox/checkbox.js  |   6 +-
 .../checkbox/src/checkbox/checkbox.stories.js |   6 +
 components/chip/API.md                        |   6 +-
 components/chip/package.json                  |   4 +-
 components/chip/src/chip.js                   |  22 ++-
 components/chip/src/chip.stories.js           |   7 +
 components/chip/src/icon.js                   |   4 +-
 components/chip/src/remove.js                 |   4 +-
 components/chip/types/index.d.ts              |  12 +-
 components/cover/package.json                 |   4 +-
 components/css/package.json                   |   4 +-
 components/divider/package.json               |   4 +-
 components/divider/src/divider.js             |  52 +++++--
 components/divider/src/divider.stories.js     |   7 +
 components/field/package.json                 |  10 +-
 components/file-input/package.json            |  16 +-
 .../file-input-field-with-list.stories.js     |   7 +
 .../src/file-input/file-input.stories.js      |   6 +
 .../src/file-list/file-list-item.js           |   5 +-
 components/header-bar/package.json            |  30 ++--
 components/header-bar/src/apps.js             |  10 +-
 .../src/debug-info/debug-info-table.js        |   4 +-
 components/header-bar/src/header-bar.js       |   2 +-
 .../header-bar/src/header-bar.stories.js      |   8 +
 components/header-bar/src/logo.js             |   6 +-
 .../header-bar/src/notification-icon.js       |   4 +-
 .../header-bar/src/online-status.styles.js    |   8 +-
 .../src/profile-menu/profile-header.js        |   4 +-
 .../src/profile-menu/profile-menu.js          |   2 +-
 components/help/package.json                  |   4 +-
 components/input/package.json                 |  16 +-
 components/input/src/input/input.stories.js   |  10 ++
 components/intersection-detector/package.json |   4 +-
 components/label/package.json                 |   6 +-
 components/layer/package.json                 |   6 +-
 components/legend/package.json                |   6 +-
 components/loader/package.json                |   4 +-
 .../linear-loader/linear-loader.stories.js    |   7 +
 components/logo/package.json                  |   4 +-
 components/menu/package.json                  |  16 +-
 .../menu/src/menu-item/menu-item.stories.js   |  11 ++
 .../menu/src/menu-item/menu-item.styles.js    |  16 +-
 components/menu/src/menu/menu.stories.js      |   8 +-
 components/modal/package.json                 |  14 +-
 components/modal/src/modal/close-button.js    |   2 +-
 components/modal/src/modal/modal.stories.js   |  17 +-
 components/node/package.json                  |   6 +-
 components/node/src/node.stories.js           |   6 +
 components/node/src/toggle.js                 |  39 +++--
 components/notice-box/package.json            |   6 +-
 .../organisation-unit-tree/package.json       |  10 +-
 .../src/__stories__/rtl.js                    |  14 ++
 .../label/iconized-checkbox.js                |   2 +-
 .../label/label-container.js                  |   2 +-
 .../src/organisation-unit-tree.stories.js     |   1 +
 components/pagination/package.json            |  10 +-
 components/pagination/src/page-controls.js    |  17 +-
 components/pagination/src/page-select.js      |   2 +-
 components/pagination/src/page-size-select.js |   2 +-
 components/pagination/src/page-summary.js     |   2 +-
 .../pagination/src/pagination.stories.js      |   7 +
 components/popover/package.json               |   8 +-
 components/popper/package.json                |   4 +-
 components/popper/src/popper.js               |  15 +-
 components/popper/src/popper.stories.js       |  19 ++-
 components/portal/package.json                |   2 +-
 components/radio/package.json                 |   4 +-
 components/radio/src/radio.js                 |   6 +-
 components/radio/src/radio.stories.js         |   6 +
 components/required/package.json              |   4 +-
 components/required/src/required.js           |   2 +-
 components/segmented-control/package.json     |   4 +-
 components/select/package.json                |  28 ++--
 components/select/src/multi-select/input.js   |   4 +-
 .../src/multi-select/multi-select.stories.js  |  17 +-
 components/selector-bar/package.json          |  22 +--
 .../selector-bar-item/selector-bar-item.js    |  10 +-
 .../src/selector-bar/__stories__/rtl.js       | 105 +++++++++++++
 .../src/selector-bar/selector-bar.js          |   2 +-
 .../src/selector-bar/selector-bar.stories.js  |   1 +
 components/sharing-dialog/package.json        |  34 ++--
 .../src/access-list/list-item.js              |   2 +-
 .../src/sharing-dialog.stories.js             |  22 ++-
 components/status-icon/package.json           |   8 +-
 components/switch/package.json                |   8 +-
 components/switch/src/switch/switch-icons.js  |  17 ++
 .../switch/src/switch/switch.stories.js       |  19 ++-
 components/tab/package.json                   |   6 +-
 components/tab/src/tab-bar/tab-bar.stories.js |   6 +
 components/tab/src/tab/tab.js                 |   2 +-
 components/table/package.json                 |   6 +-
 .../src/data-table/data-table.stories.js      |   6 +
 .../__tests__/table-data-cell.test.js         |   2 +-
 .../__tests__/table-header-cell.test.js       |   2 +-
 .../data-table/table-elements/table-body.js   |   6 +-
 .../table-data-cell/table-data-cell.js        | 100 ++++++------
 .../table-data-cell/table-data-cell.styles.js |   4 +-
 .../table-header-cell-action.js               |   2 +-
 .../table-header-cell/table-header-cell.js    |   2 +-
 .../table-header-cell.styles.js               |   6 +-
 .../src/stacked-table/stacked-table-cell.js   |   3 +
 .../stacked-table/stacked-table.stories.js    |   6 +
 components/table/src/table/table-cell-head.js |   4 +
 components/table/src/table/table-cell.js      |   4 +
 components/table/src/table/table.stories.js   | 128 ++++++++++++++++
 components/tag/package.json                   |   4 +-
 components/tag/src/tag-icon.js                |   2 +-
 components/tag/src/tag.stories.js             |   7 +
 components/text-area/package.json             |  14 +-
 .../src/text-area/text-area.stories.js        |   8 +
 components/tooltip/package.json               |   8 +-
 components/tooltip/src/tooltip.stories.js     |  17 +-
 components/transfer/package.json              |  14 +-
 .../transfer/src/end-intersection-detector.js |   2 +-
 components/transfer/src/icons.js              | 145 +++++++++---------
 components/transfer/src/options-container.js  |   2 +-
 components/transfer/src/reordering-actions.js |   2 +-
 components/transfer/src/transfer.stories.js   |   7 +
 components/user-avatar/package.json           |   4 +-
 constants/package.json                        |   2 +-
 docs/package.json                             |   2 +-
 icons/package.json                            |   2 +-
 package.json                                  |   2 +-
 storybook/package.json                        |   6 +-
 152 files changed, 1285 insertions(+), 536 deletions(-)
 create mode 100644 components/organisation-unit-tree/src/__stories__/rtl.js
 create mode 100644 components/selector-bar/src/selector-bar/__stories__/rtl.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d0601da17b..00dce873b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,22 @@
+# [9.4.0-alpha.2](https://github.com/dhis2/ui/compare/v9.4.0-alpha.1...v9.4.0-alpha.2) (2024-02-16)
+
+
+### Bug Fixes
+
+* clean up from pr review ([#1456](https://github.com/dhis2/ui/issues/1456)) ([ced3e26](https://github.com/dhis2/ui/commit/ced3e26c90b586995706cfe14f5beda215e58f57))
+
+# [9.4.0-alpha.1](https://github.com/dhis2/ui/compare/v9.3.0...v9.4.0-alpha.1) (2024-02-14)
+
+
+### Bug Fixes
+
+* rtl cleanup ([#1450](https://github.com/dhis2/ui/issues/1450)) ([5f6761f](https://github.com/dhis2/ui/commit/5f6761f8b6154dc9d9b44b226d3562f4035cf536))
+
+
+### Features
+
+* rtl support for components [LIBS-525] ([#1448](https://github.com/dhis2/ui/issues/1448)) ([d8b5fec](https://github.com/dhis2/ui/commit/d8b5feccd4b20aa17c10f6fa9315e40daa03902a))
+
 # [9.3.0](https://github.com/dhis2/ui/compare/v9.2.0...v9.3.0) (2024-02-13)
 
 
@@ -5,6 +24,20 @@
 
 * update accessibility in button component ([0a015c7](https://github.com/dhis2/ui/commit/0a015c7fe9115edcaa5126daca0ef65f092c925e))
 
+# [9.3.0-alpha.2](https://github.com/dhis2/ui/compare/v9.3.0-alpha.1...v9.3.0-alpha.2) (2024-02-13)
+
+
+### Bug Fixes
+
+* rtl cleanup ([#1450](https://github.com/dhis2/ui/issues/1450)) ([5f6761f](https://github.com/dhis2/ui/commit/5f6761f8b6154dc9d9b44b226d3562f4035cf536))
+
+# [9.3.0-alpha.1](https://github.com/dhis2/ui/compare/v9.2.0...v9.3.0-alpha.1) (2024-02-08)
+
+
+### Features
+
+* rtl support for components [LIBS-525] ([#1448](https://github.com/dhis2/ui/issues/1448)) ([d8b5fec](https://github.com/dhis2/ui/commit/d8b5feccd4b20aa17c10f6fa9315e40daa03902a))
+
 # [9.2.0](https://github.com/dhis2/ui/compare/v9.1.2...v9.2.0) (2024-01-11)
 
 
diff --git a/collections/forms/package.json b/collections/forms/package.json
index 0fc63179eb..8f783934c8 100644
--- a/collections/forms/package.json
+++ b/collections/forms/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-forms",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "sideEffects": [
@@ -35,15 +35,15 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/checkbox": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/file-input": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/radio": "9.3.0",
-        "@dhis2-ui/select": "9.3.0",
-        "@dhis2-ui/switch": "9.3.0",
-        "@dhis2-ui/text-area": "9.3.0",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/checkbox": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/file-input": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/radio": "9.4.0-alpha.2",
+        "@dhis2-ui/select": "9.4.0-alpha.2",
+        "@dhis2-ui/switch": "9.4.0-alpha.2",
+        "@dhis2-ui/text-area": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "final-form": "^4.20.2",
         "prop-types": "^15.7.2",
diff --git a/collections/ui/API.md b/collections/ui/API.md
index b256f1a6de..78d82dae94 100644
--- a/collections/ui/API.md
+++ b/collections/ui/API.md
@@ -368,8 +368,10 @@ import { Chip } from '@dhis2/ui'
 |dragging|boolean||||
 |icon|element||||
 |marginBottom|number|`4`||`margin-bottom` value, applied in `px`|
-|marginLeft|number|`4`||`margin-left` value, applied in `px`|
-|marginRight|number|`4`||`margin-right` value, applied in `px`|
+|marginInlineEnd|number|||`margin-inline-end` value, applied in `px`|
+|marginInlineStart|number|||`margin-inline-start` value, applied in `px`|
+|marginLeft|number|||`margin-inline-start` value, applied in `px`|
+|marginRight|number|||`margin-inline-end` value, applied in `px`|
 |marginTop|number|`4`||`margin-top` value, applied in `px`|
 |overflow|boolean||||
 |selected|boolean||||
diff --git a/collections/ui/package.json b/collections/ui/package.json
index d3918b4389..6b47cf1c7f 100644
--- a/collections/ui/package.json
+++ b/collections/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
@@ -21,54 +21,54 @@
         "build": "d2-app-scripts build"
     },
     "dependencies": {
-        "@dhis2-ui/alert": "9.3.0",
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/calendar": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/center": "9.3.0",
-        "@dhis2-ui/checkbox": "9.3.0",
-        "@dhis2-ui/chip": "9.3.0",
-        "@dhis2-ui/cover": "9.3.0",
-        "@dhis2-ui/css": "9.3.0",
-        "@dhis2-ui/divider": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/file-input": "9.3.0",
-        "@dhis2-ui/header-bar": "9.3.0",
-        "@dhis2-ui/help": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/intersection-detector": "9.3.0",
-        "@dhis2-ui/label": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/legend": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/logo": "9.3.0",
-        "@dhis2-ui/menu": "9.3.0",
-        "@dhis2-ui/modal": "9.3.0",
-        "@dhis2-ui/node": "9.3.0",
-        "@dhis2-ui/notice-box": "9.3.0",
-        "@dhis2-ui/organisation-unit-tree": "9.3.0",
-        "@dhis2-ui/pagination": "9.3.0",
-        "@dhis2-ui/popover": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2-ui/portal": "9.3.0",
-        "@dhis2-ui/radio": "9.3.0",
-        "@dhis2-ui/required": "9.3.0",
-        "@dhis2-ui/segmented-control": "9.3.0",
-        "@dhis2-ui/select": "9.3.0",
-        "@dhis2-ui/selector-bar": "9.3.0",
-        "@dhis2-ui/sharing-dialog": "9.3.0",
-        "@dhis2-ui/switch": "9.3.0",
-        "@dhis2-ui/tab": "9.3.0",
-        "@dhis2-ui/table": "9.3.0",
-        "@dhis2-ui/tag": "9.3.0",
-        "@dhis2-ui/text-area": "9.3.0",
-        "@dhis2-ui/tooltip": "9.3.0",
-        "@dhis2-ui/transfer": "9.3.0",
-        "@dhis2-ui/user-avatar": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-forms": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/alert": "9.4.0-alpha.2",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/calendar": "9.4.0-alpha.2",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/center": "9.4.0-alpha.2",
+        "@dhis2-ui/checkbox": "9.4.0-alpha.2",
+        "@dhis2-ui/chip": "9.4.0-alpha.2",
+        "@dhis2-ui/cover": "9.4.0-alpha.2",
+        "@dhis2-ui/css": "9.4.0-alpha.2",
+        "@dhis2-ui/divider": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/file-input": "9.4.0-alpha.2",
+        "@dhis2-ui/header-bar": "9.4.0-alpha.2",
+        "@dhis2-ui/help": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/intersection-detector": "9.4.0-alpha.2",
+        "@dhis2-ui/label": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/legend": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/logo": "9.4.0-alpha.2",
+        "@dhis2-ui/menu": "9.4.0-alpha.2",
+        "@dhis2-ui/modal": "9.4.0-alpha.2",
+        "@dhis2-ui/node": "9.4.0-alpha.2",
+        "@dhis2-ui/notice-box": "9.4.0-alpha.2",
+        "@dhis2-ui/organisation-unit-tree": "9.4.0-alpha.2",
+        "@dhis2-ui/pagination": "9.4.0-alpha.2",
+        "@dhis2-ui/popover": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2-ui/portal": "9.4.0-alpha.2",
+        "@dhis2-ui/radio": "9.4.0-alpha.2",
+        "@dhis2-ui/required": "9.4.0-alpha.2",
+        "@dhis2-ui/segmented-control": "9.4.0-alpha.2",
+        "@dhis2-ui/select": "9.4.0-alpha.2",
+        "@dhis2-ui/selector-bar": "9.4.0-alpha.2",
+        "@dhis2-ui/sharing-dialog": "9.4.0-alpha.2",
+        "@dhis2-ui/switch": "9.4.0-alpha.2",
+        "@dhis2-ui/tab": "9.4.0-alpha.2",
+        "@dhis2-ui/table": "9.4.0-alpha.2",
+        "@dhis2-ui/tag": "9.4.0-alpha.2",
+        "@dhis2-ui/text-area": "9.4.0-alpha.2",
+        "@dhis2-ui/tooltip": "9.4.0-alpha.2",
+        "@dhis2-ui/transfer": "9.4.0-alpha.2",
+        "@dhis2-ui/user-avatar": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-forms": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "prop-types": "^15.7.2"
     },
     "peerDependencies": {
diff --git a/components/alert/package.json b/components/alert/package.json
index 4f06c3364d..687629a1b3 100644
--- a/components/alert/package.json
+++ b/components/alert/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/alert",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Alert",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/portal": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/portal": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/alert/src/alert-bar/action.js b/components/alert/src/alert-bar/action.js
index 273ecdc6eb..67e88051c2 100644
--- a/components/alert/src/alert-bar/action.js
+++ b/components/alert/src/alert-bar/action.js
@@ -14,7 +14,7 @@ class Action extends Component {
                 {this.props.label}
                 <style jsx>{`
                     span {
-                        margin-right: ${spacers.dp12};
+                        margin-inline-end: ${spacers.dp12};
                         text-decoration: underline;
                         white-space: nowrap;
                     }
diff --git a/components/alert/src/alert-bar/actions.js b/components/alert/src/alert-bar/actions.js
index da78391559..830824a5fe 100644
--- a/components/alert/src/alert-bar/actions.js
+++ b/components/alert/src/alert-bar/actions.js
@@ -21,8 +21,8 @@ const Actions = ({ actions, hide, dataTest }) => {
             ))}
             <style jsx>{`
                 div {
-                    margin-left: ${spacers.dp48};
-                    margin-right: -${spacers.dp12};
+                    margin-inline-start: ${spacers.dp48};
+                    margin-inline-end: -${spacers.dp12};
                 }
             `}</style>
         </div>
diff --git a/components/alert/src/alert-bar/alert-bar.stories.js b/components/alert/src/alert-bar/alert-bar.stories.js
index 972c276645..5b14904ef6 100644
--- a/components/alert/src/alert-bar/alert-bar.stories.js
+++ b/components/alert/src/alert-bar/alert-bar.stories.js
@@ -108,6 +108,23 @@ export const States = () => (
     </React.Fragment>
 )
 
+export const RTL = () => (
+    <React.Fragment>
+        <div dir="rtl">
+            <AlertBar permanent>Default (info)</AlertBar>
+            <AlertBar permanent success>
+                Success
+            </AlertBar>
+            <AlertBar permanent warning>
+                Warning
+            </AlertBar>
+            <AlertBar permanent critical>
+                Critical
+            </AlertBar>
+        </div>
+    </React.Fragment>
+)
+
 export const AutoHiding = () => (
     <React.Fragment>
         <AlertBar permanent>Permanent never auto-hides</AlertBar>
diff --git a/components/alert/src/alert-bar/alert-bar.styles.js b/components/alert/src/alert-bar/alert-bar.styles.js
index bbc13ed40b..34319c8a36 100644
--- a/components/alert/src/alert-bar/alert-bar.styles.js
+++ b/components/alert/src/alert-bar/alert-bar.styles.js
@@ -11,9 +11,9 @@ export default css`
         border-radius: 4px;
         box-shadow: ${elevations.e300};
         padding-top: ${spacers.dp8};
-        padding-right: ${spacers.dp8};
+        padding-inline-end: ${spacers.dp8};
         padding-bottom: ${spacers.dp8};
-        padding-left: ${spacers.dp24};
+        padding-inline-start: ${spacers.dp24};
         margin-bottom: ${spacers.dp16};
         max-width: 600px;
         min-width: 300px;
diff --git a/components/alert/src/alert-bar/dismiss.js b/components/alert/src/alert-bar/dismiss.js
index 64f5d1b6a2..cc2c0592aa 100644
--- a/components/alert/src/alert-bar/dismiss.js
+++ b/components/alert/src/alert-bar/dismiss.js
@@ -8,7 +8,7 @@ const Dismiss = ({ onClick, dataTest }) => (
         <IconCross24 />
         <style jsx>{`
             div {
-                margin-left: ${spacers.dp16};
+                margin-inline-start: ${spacers.dp16};
                 min-height: 32px;
                 min-width: 32px;
                 display: flex;
diff --git a/components/alert/src/alert-bar/icon.js b/components/alert/src/alert-bar/icon.js
index 9479465196..cb78de8a30 100644
--- a/components/alert/src/alert-bar/icon.js
+++ b/components/alert/src/alert-bar/icon.js
@@ -57,7 +57,7 @@ const Icon = ({ icon, success, warning, critical, info, dataTest }) => {
             )}
             <style jsx>{`
                 div {
-                    margin-right: ${spacers.dp16};
+                    margin-inline-end: ${spacers.dp16};
                 }
             `}</style>
         </div>
diff --git a/components/alert/src/alert-stack/alert-stack.js b/components/alert/src/alert-stack/alert-stack.js
index 974e1897d3..8b18766e2c 100644
--- a/components/alert/src/alert-stack/alert-stack.js
+++ b/components/alert/src/alert-stack/alert-stack.js
@@ -12,9 +12,9 @@ export const AlertStack = ({ className, children, dataTest }) => (
                 div {
                     position: fixed;
                     top: auto;
-                    right: auto;
+                    inset-inline-end: auto;
                     bottom: 0;
-                    left: 50%;
+                    inset-inline-start: 50%;
                     transform: translateX(-50%);
 
                     z-index: ${layers.alert};
@@ -24,6 +24,10 @@ export const AlertStack = ({ className, children, dataTest }) => (
 
                     pointer-events: none;
                 }
+
+                div:dir(rtl) {
+                    transform: translateX(50%);
+                }
             `}</style>
         </div>
     </Portal>
diff --git a/components/alert/src/alert-stack/alert-stack.stories.js b/components/alert/src/alert-stack/alert-stack.stories.js
index b2068257d4..ec1a6189a5 100644
--- a/components/alert/src/alert-stack/alert-stack.stories.js
+++ b/components/alert/src/alert-stack/alert-stack.stories.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { AlertBar } from '../alert-bar/index.js'
 import { AlertStack } from './alert-stack.js'
 
@@ -39,3 +39,30 @@ export const Default = (args) => (
         </AlertBar>
     </AlertStack>
 )
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <AlertStack {...args}>
+                <AlertBar permanent>
+                    First notification - I am at the bottom
+                </AlertBar>
+                <AlertBar permanent critical>
+                    Second notification
+                </AlertBar>
+                <AlertBar permanent warning>
+                    Third notification
+                </AlertBar>
+                <AlertBar permanent success>
+                    Fourth notification - I am at the top
+                </AlertBar>
+            </AlertStack>
+        </div>
+    )
+}
diff --git a/components/box/package.json b/components/box/package.json
index 3dcad9e5dd..f30b54089f 100644
--- a/components/box/package.json
+++ b/components/box/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/box",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Box",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/button/package.json b/components/button/package.json
index 3e17df0c96..844ca63138 100644
--- a/components/button/package.json
+++ b/components/button/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -33,11 +33,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/button/src/button-strip/button-strip.js b/components/button/src/button-strip/button-strip.js
index ddb605edd4..38ccc7a8d5 100644
--- a/components/button/src/button-strip/button-strip.js
+++ b/components/button/src/button-strip/button-strip.js
@@ -27,11 +27,11 @@ const ButtonStrip = ({ className, children, middle, end, dataTest }) => (
             }
 
             .box {
-                margin-left: ${spacers.dp8};
+                margin-inline-start: ${spacers.dp8};
             }
 
             .box:first-child {
-                margin-left: 0;
+                margin-inline-start: 0;
             }
         `}</style>
     </div>
diff --git a/components/button/src/button-strip/button-strip.stories.js b/components/button/src/button-strip/button-strip.stories.js
index b03ce9a356..92f562f8b0 100644
--- a/components/button/src/button-strip/button-strip.stories.js
+++ b/components/button/src/button-strip/button-strip.stories.js
@@ -74,3 +74,15 @@ export const DefaultAlignedRight = (args) => (
 )
 DefaultAlignedRight.args = { end: true }
 DefaultAlignedRight.storyName = 'Default - aligned right'
+
+export const DefaultRTL = (args) => (
+    <div dir="rtl">
+        <ButtonStrip {...args}>
+            <Button>Save</Button>
+            <Button>Save</Button>
+            <Button>Save</Button>
+            <Button>Save</Button>
+        </ButtonStrip>
+    </div>
+)
+DefaultRTL.storyName = 'Default - RTL'
diff --git a/components/button/src/button/button.stories.js b/components/button/src/button/button.stories.js
index 602c0bc4e5..7691370e87 100644
--- a/components/button/src/button/button.stories.js
+++ b/components/button/src/button/button.stories.js
@@ -216,6 +216,17 @@ Icon.parameters = {
     },
 }
 
+export const IconRTL = (args) => (
+    <div dir="rtl">
+        <Button {...args} />
+    </div>
+)
+IconRTL.args = {
+    icon: DemoIcon24,
+    name: 'RTL icon button',
+    children: 'RTL text',
+}
+
 export const IconOnly = Template.bind({})
 IconOnly.args = {
     icon: DemoIcon24,
diff --git a/components/button/src/button/button.styles.js b/components/button/src/button/button.styles.js
index e21b631a83..1f8d102181 100644
--- a/components/button/src/button/button.styles.js
+++ b/components/button/src/button/button.styles.js
@@ -221,7 +221,7 @@ export default css`
     }
 
     .button-icon {
-        margin-right: 6px;
+        margin-inline-end: 6px;
         color: inherit;
         fill: inherit;
         font-size: 26px;
@@ -230,19 +230,21 @@ export default css`
     }
 
     .icon-only .button-icon {
-        margin-right: 5px;
+        margin-inline-end: 5px;
     }
 
     .small.icon-only {
-        padding: 0 4px 0 5px;
+        padding-block: 0;
+        padding-inline-start: 5px;
+        padding-inline-end: 4px;
     }
 
     .small .button-icon {
-        margin-right: 2px;
+        margin-inline-end: 2px;
     }
 
     .small.icon-only .button-icon {
-        margin-right: 1px;
+        margin-inline-end: 1px;
     }
 
     .toggled {
@@ -277,7 +279,7 @@ export default css`
     .loader {
         width: 16px;
         height: 16px;
-        margin-right: 8px;
+        margin-inline-end: 8px;
     }
 
     .loader + .button-icon {
@@ -286,6 +288,8 @@ export default css`
 
     .icon-only .loader {
         margin: 0 8px 0 4px;
+        margin-inline-start: 4px;
+        margin-inline-end: 8px;
     }
     .small.icon-only .loader {
         margin: 0 4px;
diff --git a/components/button/src/dropdown-button/dropdown-button.js b/components/button/src/dropdown-button/dropdown-button.js
index 9d636e7b6e..f225206c9d 100644
--- a/components/button/src/dropdown-button/dropdown-button.js
+++ b/components/button/src/dropdown-button/dropdown-button.js
@@ -59,7 +59,7 @@ ArrowUp.propTypes = {
 }
 
 const arrow = resolve`
-    margin-left: ${spacers.dp12};
+    margin-inline-start: ${spacers.dp12};
 `
 
 class DropdownButton extends Component {
diff --git a/components/button/src/dropdown-button/dropdown-button.stories.js b/components/button/src/dropdown-button/dropdown-button.stories.js
index e8d3380c55..8209e2bfa6 100644
--- a/components/button/src/dropdown-button/dropdown-button.stories.js
+++ b/components/button/src/dropdown-button/dropdown-button.stories.js
@@ -118,3 +118,12 @@ const ManualControlTemplate = (args) => {
 }
 export const ManualControl = ManualControlTemplate.bind({})
 ManualControl.args = {}
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <DropdownButton {...args} />
+    </div>
+)
+RTL.args = {
+    children: 'RTL text',
+}
diff --git a/components/button/src/split-button/split-button.js b/components/button/src/split-button/split-button.js
index d6051ea4c0..95290477be 100644
--- a/components/button/src/split-button/split-button.js
+++ b/components/button/src/split-button/split-button.js
@@ -122,14 +122,14 @@ class SplitButton extends Component {
                     }
 
                     div > :global(button:first-child) {
-                        border-top-right-radius: 0;
-                        border-bottom-right-radius: 0;
-                        border-right: 0;
+                        border-start-end-radius: 0;
+                        border-end-end-radius: 0;
+                        border-inline-end: 0;
                     }
 
                     div > :global(button:last-child) {
-                        border-top-left-radius: 0;
-                        border-bottom-left-radius: 0;
+                        border-start-start-radius: 0;
+                        border-end-start-radius: 0;
                     }
                 `}</style>
             </div>
diff --git a/components/button/src/split-button/split-button.stories.js b/components/button/src/split-button/split-button.stories.js
index 85eb8de1d6..36851aeeff 100644
--- a/components/button/src/split-button/split-button.stories.js
+++ b/components/button/src/split-button/split-button.stories.js
@@ -79,3 +79,12 @@ WithIcon.args = {
     component: <div>Component</div>,
     icon: <div>Icon</div>,
 }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <SplitButton {...args} />
+    </div>
+)
+RTL.args = {
+    children: 'RTL text',
+}
diff --git a/components/calendar/package.json b/components/calendar/package.json
index 0dd58a8148..baef273b00 100644
--- a/components/calendar/package.json
+++ b/components/calendar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -33,15 +33,15 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
         "@dhis2/multi-calendar-dates": "1.0.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/card/package.json b/components/card/package.json
index 52bc0a6489..77a4dbbb71 100644
--- a/components/card/package.json
+++ b/components/card/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/card",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Card",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/center/package.json b/components/center/package.json
index a6fb175d9d..204ce51da8 100644
--- a/components/center/package.json
+++ b/components/center/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/center",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Center",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
index 094a3dc984..1a4da44eb2 100644
--- a/components/checkbox/package.json
+++ b/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/checkbox",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Checkbox",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/required": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/required": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/checkbox/src/checkbox-field/checkbox-field.stories.js b/components/checkbox/src/checkbox-field/checkbox-field.stories.js
index 000b7e3096..1d5ca7f738 100644
--- a/components/checkbox/src/checkbox-field/checkbox-field.stories.js
+++ b/components/checkbox/src/checkbox-field/checkbox-field.stories.js
@@ -139,3 +139,11 @@ ErrorDense.storyName = 'Error - Dense'
 export const ImageLabelDense = Template.bind({})
 ImageLabelDense.args = { ...DefaultDense.args, ...ImageLabel.args }
 ImageLabelDense.storyName = 'Image label - Dense'
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <>
+            <CheckboxField {...args} />
+        </>
+    </div>
+)
diff --git a/components/checkbox/src/checkbox/checkbox.js b/components/checkbox/src/checkbox/checkbox.js
index af681601df..c4e95492df 100644
--- a/components/checkbox/src/checkbox/checkbox.js
+++ b/components/checkbox/src/checkbox/checkbox.js
@@ -146,7 +146,7 @@ class Checkbox extends Component {
                         height: 18px;
                         width: 18px;
                         /* The same offset as the icon, 2px border, 1px padding */
-                        left: 3px;
+                        inset-inline-start: 3px;
                     }
 
                     label.dense input {
@@ -157,14 +157,14 @@ class Checkbox extends Component {
 
                     .icon {
                         user-select: none;
-                        margin-right: ${spacers.dp4};
+                        margin-inline-end: ${spacers.dp4};
                         border: 2px solid transparent;
                         padding: 1px;
                         border-radius: 5px;
                     }
 
                     label.dense .icon {
-                        margin-right: 3px;
+                        margin-inline-end: 3px;
                         border-radius: 4px;
                     }
 
diff --git a/components/checkbox/src/checkbox/checkbox.stories.js b/components/checkbox/src/checkbox/checkbox.stories.js
index a0bc298928..712d793beb 100644
--- a/components/checkbox/src/checkbox/checkbox.stories.js
+++ b/components/checkbox/src/checkbox/checkbox.stories.js
@@ -174,3 +174,9 @@ ErrorDense.storyName = 'Error - Dense'
 export const ImageLabelDense = Template.bind({})
 ImageLabelDense.args = { ...ImageLabel.args, dense: true }
 ImageLabelDense.storyName = 'Image label - Dense'
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Checkbox {...args} />
+    </div>
+)
diff --git a/components/chip/API.md b/components/chip/API.md
index 5a44398971..a0842b9609 100644
--- a/components/chip/API.md
+++ b/components/chip/API.md
@@ -22,8 +22,10 @@ import { Chip } from '@dhis2-ui/chip'
 |dragging|boolean||||
 |icon|element||||
 |marginBottom|number|`4`||`margin-bottom` value, applied in `px`|
-|marginLeft|number|`4`||`margin-left` value, applied in `px`|
-|marginRight|number|`4`||`margin-right` value, applied in `px`|
+|marginInlineEnd|number|||`margin-inline-end` value, applied in `px`|
+|marginInlineStart|number|||`margin-inline-start` value, applied in `px`|
+|marginLeft|number|||`margin-inline-start` value, applied in `px`|
+|marginRight|number|||`margin-inline-end` value, applied in `px`|
 |marginTop|number|`4`||`margin-top` value, applied in `px`|
 |overflow|boolean||||
 |selected|boolean||||
diff --git a/components/chip/package.json b/components/chip/package.json
index fe81a88089..3301cf5cdd 100644
--- a/components/chip/package.json
+++ b/components/chip/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/chip",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Chip",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/chip/src/chip.js b/components/chip/src/chip.js
index c10282e11e..221bf677cd 100644
--- a/components/chip/src/chip.js
+++ b/components/chip/src/chip.js
@@ -6,6 +6,8 @@ import { Content } from './content.js'
 import { Icon } from './icon.js'
 import { Remove } from './remove.js'
 
+const DEFAULT_INLINE_MARGIN = '4'
+
 const Chip = ({
     selected,
     dense,
@@ -22,6 +24,8 @@ const Chip = ({
     marginLeft,
     marginRight,
     marginTop,
+    marginInlineStart,
+    marginInlineEnd,
 }) => (
     <span
         onClick={(e) => {
@@ -98,8 +102,12 @@ const Chip = ({
         <style jsx>{`
             span {
                 ${marginBottom && `margin-bottom: ${marginBottom}px;`}
-                ${marginLeft && `margin-left: ${marginLeft}px;`}
-                ${marginRight && `margin-right: ${marginRight}px;`}
+                margin-inline-start: ${marginInlineStart ??
+                marginLeft ??
+                DEFAULT_INLINE_MARGIN}px;
+                margin-inline-end: ${marginInlineEnd ??
+                marginRight ??
+                DEFAULT_INLINE_MARGIN}px;
                 ${marginTop && `margin-top: ${marginTop}px`}
             }
         `}</style>
@@ -109,8 +117,6 @@ const Chip = ({
 Chip.defaultProps = {
     dataTest: 'dhis2-uicore-chip',
     marginBottom: 4,
-    marginLeft: 4,
-    marginRight: 4,
     marginTop: 4,
 }
 
@@ -124,9 +130,13 @@ Chip.propTypes = {
     icon: PropTypes.element,
     /** `margin-bottom` value, applied in `px`  */
     marginBottom: PropTypes.number,
-    /** `margin-left` value, applied in `px`  */
+    /** `margin-inline-end` value, applied in `px`  */
+    marginInlineEnd: PropTypes.number,
+    /** `margin-inline-start` value, applied in `px`  */
+    marginInlineStart: PropTypes.number,
+    /** `margin-inline-start` value, applied in `px`  */
     marginLeft: PropTypes.number,
-    /** `margin-right` value, applied in `px`  */
+    /** `margin-inline-end` value, applied in `px`  */
     marginRight: PropTypes.number,
     /** `margin-top` value, applied in `px`  */
     marginTop: PropTypes.number,
diff --git a/components/chip/src/chip.stories.js b/components/chip/src/chip.stories.js
index 253f07c951..015fbfbc5b 100644
--- a/components/chip/src/chip.stories.js
+++ b/components/chip/src/chip.stories.js
@@ -126,3 +126,10 @@ DenseRemoveable.args = {
     ...Removable.args,
     children: 'Removable and dense',
 }
+
+export const RTLRemovable = (args) => (
+    <div dir="rtl">
+        <Chip {...args}>RTL removable</Chip>
+    </div>
+)
+RTLRemovable.args = { ...Removable.args }
diff --git a/components/chip/src/icon.js b/components/chip/src/icon.js
index e4484e38ef..844cb2bc77 100644
--- a/components/chip/src/icon.js
+++ b/components/chip/src/icon.js
@@ -15,8 +15,8 @@ export const Icon = ({ icon, dataTest }) => {
                 span {
                     width: 24px;
                     height: 24px;
-                    margin-left: ${spacers.dp4};
-                    margin-right: -6px;
+                    margin-inline-start: ${spacers.dp4};
+                    margin-inline-end: -6px;
                     border-radius: 50%;
                     overflow: hidden;
                 }
diff --git a/components/chip/src/remove.js b/components/chip/src/remove.js
index 175f1177e2..87c2f3f7df 100644
--- a/components/chip/src/remove.js
+++ b/components/chip/src/remove.js
@@ -35,9 +35,9 @@ const containerStyle = css`
         align-items: center;
         height: 20px;
         width: 20px;
-        margin-right: 4px;
+        margin-inline-end: 4px;
         border-radius: 12px;
-        margin-left: -8px;
+        margin-inline-start: -8px;
     }
     span:hover {
         background: ${colors.grey400};
diff --git a/components/chip/types/index.d.ts b/components/chip/types/index.d.ts
index 40401ee07c..da46e06664 100644
--- a/components/chip/types/index.d.ts
+++ b/components/chip/types/index.d.ts
@@ -13,13 +13,21 @@ export interface ChipProps {
      */
     marginBottom?: number
     /**
-     * `margin-left` value, applied in `px`
+     * `margin-inline-start` value, applied in `px` (if marginInlineStart not provided)
      */
     marginLeft?: number
     /**
-     * `margin-right` value, applied in `px`
+     * `margin-inline-end` value, applied in `px` (if marginInlineEnd not provided)
      */
     marginRight?: number
+    /**
+     * `margin-inline-start` value, applied in `px`
+     */
+    marginInlineStart?: number
+    /**
+     * `margin-inline-end` value, applied in `px`
+     */
+    marginInlineEnd?: number
     /**
      * `margin-top` value, applied in `px`
      */
diff --git a/components/cover/package.json b/components/cover/package.json
index 6b749434e6..e7b33ff47f 100644
--- a/components/cover/package.json
+++ b/components/cover/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/cover",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Cover",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/css/package.json b/components/css/package.json
index 1b7ad7ed81..7444688502 100644
--- a/components/css/package.json
+++ b/components/css/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/css",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI CSS",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/divider/package.json b/components/divider/package.json
index 0ce0182c63..e8483f942e 100644
--- a/components/divider/package.json
+++ b/components/divider/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/divider",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Divider",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/divider/src/divider.js b/components/divider/src/divider.js
index 9ac8ef4039..6311fe77ff 100644
--- a/components/divider/src/divider.js
+++ b/components/divider/src/divider.js
@@ -2,23 +2,41 @@ import { colors, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Divider = ({ className, dataTest, dense, margin }) => (
-    <div className={className} data-test={dataTest}>
-        <style jsx>{`
-            div {
-                display: inline-block;
-                width: 100%;
-                height: 1px;
-                background-color: ${colors.grey300};
-            }
-        `}</style>
-        <style jsx>{`
-            div {
-                margin: ${dense ? `${spacers.dp4} 0` : margin};
-            }
-        `}</style>
-    </div>
-)
+const flipMargin = (margin) => {
+    const splitMargin = margin.split(/\s+/)
+    if (splitMargin?.length === 4) {
+        return [
+            splitMargin[0],
+            splitMargin[3],
+            splitMargin[2],
+            splitMargin[1],
+        ].join(' ')
+    }
+    return margin
+}
+
+const Divider = ({ className, dataTest, dense, margin }) => {
+    return (
+        <div className={className} data-test={dataTest}>
+            <style jsx>{`
+                div {
+                    display: inline-block;
+                    width: 100%;
+                    height: 1px;
+                    background-color: ${colors.grey300};
+                }
+            `}</style>
+            <style jsx>{`
+                div {
+                    margin: ${dense ? `${spacers.dp4} 0` : margin};
+                }
+                :dir(rtl) {
+                    margin: ${dense ? `${spacers.dp4} 0` : flipMargin(margin)};
+                }
+            `}</style>
+        </div>
+    )
+}
 
 Divider.defaultProps = {
     dataTest: 'dhis2-uicore-divider',
diff --git a/components/divider/src/divider.stories.js b/components/divider/src/divider.stories.js
index b074f308b8..797c41ed00 100644
--- a/components/divider/src/divider.stories.js
+++ b/components/divider/src/divider.stories.js
@@ -31,3 +31,10 @@ Dense.args = { dense: true }
 
 export const Margin = Template.bind({})
 Margin.args = { margin: '20px 20px 20px 20px' }
+
+export const RTLUnevenMargin = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
+RTLUnevenMargin.args = { margin: '10px 5px 40px 50px' }
diff --git a/components/field/package.json b/components/field/package.json
index 1e175e29de..dff2fd09d9 100644
--- a/components/field/package.json
+++ b/components/field/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/field",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Field",
     "repository": {
         "type": "git",
@@ -33,10 +33,10 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/help": "9.3.0",
-        "@dhis2-ui/label": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/help": "9.4.0-alpha.2",
+        "@dhis2-ui/label": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/file-input/package.json b/components/file-input/package.json
index c3ddb9e031..54747cbf94 100644
--- a/components/file-input/package.json
+++ b/components/file-input/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/file-input",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI FileInput",
     "repository": {
         "type": "git",
@@ -34,13 +34,13 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/label": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/status-icon": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/label": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/status-icon": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.js b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.js
index f7c3b614e7..7e1fd5a71e 100644
--- a/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.js
+++ b/components/file-input/src/file-input-field-with-list/file-input-field-with-list.stories.js
@@ -54,3 +54,10 @@ DefaultButtonLabelAndRemoveText.storyName =
 
 export const DefaultPlaceholder = Template.bind({})
 DefaultPlaceholder.storyName = 'Default: placeholder'
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
+RTL.args = { files: files }
diff --git a/components/file-input/src/file-input/file-input.stories.js b/components/file-input/src/file-input/file-input.stories.js
index edac2071c6..da1fd2d8de 100644
--- a/components/file-input/src/file-input/file-input.stories.js
+++ b/components/file-input/src/file-input/file-input.stories.js
@@ -74,3 +74,9 @@ export const Statuses = (args) => (
         <FileInput {...args} buttonLabel="Error" name="error" error />
     </>
 )
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <FileInput {...args} buttonLabel="Default" name="default" />
+    </div>
+)
diff --git a/components/file-input/src/file-list/file-list-item.js b/components/file-input/src/file-list/file-list-item.js
index 162d7858c8..eae111a07d 100644
--- a/components/file-input/src/file-list/file-list-item.js
+++ b/components/file-input/src/file-list/file-list-item.js
@@ -54,8 +54,11 @@ const FileListItem = ({
                 margin: 0;
                 padding-top: ${spacers.dp4};
             }
+            span {
+                display: inline-block;
+            }
             .icon {
-                margin-right: 4px;
+                margin-inline-end: 4px;
                 flex-grow: 0;
                 flex-shrink: 0;
                 display: flex;
diff --git a/components/header-bar/package.json b/components/header-bar/package.json
index af62e496cb..7cb1c04125 100644
--- a/components/header-bar/package.json
+++ b/components/header-bar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/header-bar",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI HeaderBar",
     "repository": {
         "type": "git",
@@ -34,21 +34,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/center": "9.3.0",
-        "@dhis2-ui/divider": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/logo": "9.3.0",
-        "@dhis2-ui/menu": "9.3.0",
-        "@dhis2-ui/modal": "9.3.0",
-        "@dhis2-ui/user-avatar": "9.3.0",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/center": "9.4.0-alpha.2",
+        "@dhis2-ui/divider": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/logo": "9.4.0-alpha.2",
+        "@dhis2-ui/menu": "9.4.0-alpha.2",
+        "@dhis2-ui/modal": "9.4.0-alpha.2",
+        "@dhis2-ui/user-avatar": "9.4.0-alpha.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2"
diff --git a/components/header-bar/src/apps.js b/components/header-bar/src/apps.js
index ac5046baea..585dc3dee2 100755
--- a/components/header-bar/src/apps.js
+++ b/components/header-bar/src/apps.js
@@ -161,7 +161,9 @@ function List({ apps, filter }) {
 
                     min-height: 200px;
                     max-height: 465px;
-                    margin: 0 8px 8px 8px;
+                    margin-block-start: 0;
+                    margin-block-end: 8px;
+                    margin-inline: 8px;
 
                     overflow: auto;
                     overflow-x: hidden;
@@ -186,7 +188,7 @@ const AppMenu = ({ apps, filter, onFilterChange }) => (
             div {
                 z-index: 10000;
                 position: absolute;
-                right: -4px;
+                inset-inline-end: -4px;
             }
         `}</style>
     </div>
@@ -237,7 +239,9 @@ const Apps = ({ apps }) => {
                 button {
                     display: block;
                     background: transparent;
-                    padding: ${spacers.dp4} ${spacers.dp12} 0;
+                    padding-block-start: ${spacers.dp4};
+                    padding-block-end: 0;
+                    padding-inline: ${spacers.dp12};
                     border: 0;
                     cursor: pointer;
                     height: 100%;
diff --git a/components/header-bar/src/debug-info/debug-info-table.js b/components/header-bar/src/debug-info/debug-info-table.js
index 0ed5cccf00..bf8d3baf10 100644
--- a/components/header-bar/src/debug-info/debug-info-table.js
+++ b/components/header-bar/src/debug-info/debug-info-table.js
@@ -38,7 +38,9 @@ export function DebugInfoTable() {
                     font-famile: Menlo, Courier, monospace !important;
                 }
                 td {
-                    padding: 3px 16px 3px 0;
+                    padding-block: 3px;
+                    padding-inline-end: 16px;
+                    padding-inline-start: 0;
                 }
                 .debug-info-key {
                     font-weight: bold;
diff --git a/components/header-bar/src/header-bar.js b/components/header-bar/src/header-bar.js
index 7b8051f98a..673c6b4ab9 100755
--- a/components/header-bar/src/header-bar.js
+++ b/components/header-bar/src/header-bar.js
@@ -119,7 +119,7 @@ export const HeaderBar = ({
                         height: 48px;
                     }
                     .right-control-spacer {
-                        margin-left: auto;
+                        margin-inline-start: auto;
                     }
                 `}</style>
             </header>
diff --git a/components/header-bar/src/header-bar.stories.js b/components/header-bar/src/header-bar.stories.js
index 8ed1eb4916..5f142bd6d4 100644
--- a/components/header-bar/src/header-bar.stories.js
+++ b/components/header-bar/src/header-bar.stories.js
@@ -253,6 +253,14 @@ export const WithOnlineStatusMessage = () => (
     </CustomDataProvider>
 )
 
+export const RTLHeader = () => (
+    <CustomDataProvider data={customData}>
+        <div dir="rtl">
+            <HeaderBar appName="Example!" />
+        </div>
+    </CustomDataProvider>
+)
+
 WithOnlineStatusMessage.decorators = [
     createDecoratorProvider(
         {
diff --git a/components/header-bar/src/logo.js b/components/header-bar/src/logo.js
index fc9320dc21..dd5041d7fa 100755
--- a/components/header-bar/src/logo.js
+++ b/components/header-bar/src/logo.js
@@ -16,8 +16,10 @@ export const Logo = () => {
                     box-sizing: border-box;
                     min-width: 49px;
                     max-height: 48px;
-                    margin: 0 12px 0 0;
-                    border-right: 1px solid rgba(32, 32, 32, 0.15);
+                    margin-block: 0;
+                    margin-inline-end: 12px;
+                    margin-inline-start: 0;
+                    border-inline-end: 1px solid rgba(32, 32, 32, 0.15);
                 }
                 div:hover {
                     background-color: #1a557f;
diff --git a/components/header-bar/src/notification-icon.js b/components/header-bar/src/notification-icon.js
index 03785e9485..7619e8eeca 100755
--- a/components/header-bar/src/notification-icon.js
+++ b/components/header-bar/src/notification-icon.js
@@ -12,7 +12,7 @@ function icon(kind) {
 }
 
 export const NotificationIcon = ({ count, href, kind, dataTestId }) => (
-    <a href={href} className={kind} data-test={dataTestId}>
+    <a dir="ltr" href={href} className={kind} data-test={dataTestId}>
         {icon(kind)}
 
         {count > 0 && <span data-test={`${dataTestId}-count`}>{count}</span>}
@@ -47,7 +47,7 @@ export const NotificationIcon = ({ count, href, kind, dataTestId }) => (
                 z-index: 1;
                 position: absolute;
                 top: 3px;
-                right: 2px;
+                inset-inline-end: 2px;
                 min-width: 18px;
                 min-height: 18px;
                 border-radius: ${spacers.dp12};
diff --git a/components/header-bar/src/online-status.styles.js b/components/header-bar/src/online-status.styles.js
index 1bbd176002..3352d0e558 100644
--- a/components/header-bar/src/online-status.styles.js
+++ b/components/header-bar/src/online-status.styles.js
@@ -12,7 +12,7 @@ export default css`
     }
 
     .container.badge {
-        margin-right: ${spacers.dp8};
+        margin-inline-end: ${spacers.dp8};
         padding: ${spacers.dp8};
         border-radius: 5px;
         font-size: 14px;
@@ -41,11 +41,11 @@ export default css`
     }
 
     .info {
-        margin-right: ${spacers.dp16};
+        margin-inline-end: ${spacers.dp16};
     }
 
     .info-dense {
-        margin-left: ${spacers.dp12};
+        margin-inline-start: ${spacers.dp12};
         font-size: 12px;
     }
 
@@ -54,7 +54,7 @@ export default css`
         min-width: 8px;
         height: 8px;
         border-radius: 8px;
-        margin-right: ${spacers.dp4};
+        margin-inline-end: ${spacers.dp4};
     }
 
     .icon.online {
diff --git a/components/header-bar/src/profile-menu/profile-header.js b/components/header-bar/src/profile-menu/profile-header.js
index d0eab7ecfd..d3b25a1613 100755
--- a/components/header-bar/src/profile-menu/profile-header.js
+++ b/components/header-bar/src/profile-menu/profile-header.js
@@ -76,7 +76,7 @@ const ProfileDetails = ({ name, email }) => (
             div {
                 display: flex;
                 flex-direction: column;
-                margin-left: 20px;
+                margin-inline-start: 20px;
                 color: #000;
                 font-size: 14px;
                 font-weight: 400;
@@ -104,7 +104,7 @@ export const ProfileHeader = ({ name, email, avatarId }) => (
             div {
                 display: flex;
                 flex-direction: row;
-                margin-left: 24px;
+                margin-inline-start: 24px;
                 padding-top: 20px;
             }
         `}</style>
diff --git a/components/header-bar/src/profile-menu/profile-menu.js b/components/header-bar/src/profile-menu/profile-menu.js
index a0e1146810..6a6e8ab5b8 100755
--- a/components/header-bar/src/profile-menu/profile-menu.js
+++ b/components/header-bar/src/profile-menu/profile-menu.js
@@ -159,7 +159,7 @@ export const ProfileMenu = ({ ...props }) => (
             div {
                 z-index: 10000;
                 position: absolute;
-                right: 4px;
+                inset-inline-end: 4px;
                 width: 320px;
             }
         `}</style>
diff --git a/components/help/package.json b/components/help/package.json
index c5c5f8fc78..d6c0e35b24 100644
--- a/components/help/package.json
+++ b/components/help/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/help",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Help",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/input/package.json b/components/input/package.json
index a388794135..92c904e75e 100644
--- a/components/input/package.json
+++ b/components/input/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/input",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Input",
     "repository": {
         "type": "git",
@@ -33,13 +33,13 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/status-icon": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/status-icon": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/input/src/input/input.stories.js b/components/input/src/input/input.stories.js
index 87ed65204a..51e39fc357 100644
--- a/components/input/src/input/input.stories.js
+++ b/components/input/src/input/input.stories.js
@@ -122,3 +122,13 @@ ValueTextOverflow.args = {
     dense: true,
     warning: true,
 }
+
+export const RTLErrorPlaceholder = (args) => (
+    <div dir="rtl">
+        <Input {...args} />
+    </div>
+)
+RTLErrorPlaceholder.args = {
+    error: true,
+    placeholder: 'RTL placeholder',
+}
diff --git a/components/intersection-detector/package.json b/components/intersection-detector/package.json
index a437caa78e..777d2a2ee3 100644
--- a/components/intersection-detector/package.json
+++ b/components/intersection-detector/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/intersection-detector",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI IntersectionDetector",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/label/package.json b/components/label/package.json
index 0188d166cc..95b0233f15 100644
--- a/components/label/package.json
+++ b/components/label/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/label",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Label",
     "repository": {
         "type": "git",
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/required": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/required": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/layer/package.json b/components/layer/package.json
index 414062e1df..f04682b479 100644
--- a/components/layer/package.json
+++ b/components/layer/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/layer",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Layer",
     "repository": {
         "type": "git",
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/portal": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/portal": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/legend/package.json b/components/legend/package.json
index 23755461ca..c67f88e968 100644
--- a/components/legend/package.json
+++ b/components/legend/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/legend",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Legend",
     "repository": {
         "type": "git",
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/required": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/required": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/loader/package.json b/components/loader/package.json
index 8848b1c92c..cec911d129 100644
--- a/components/loader/package.json
+++ b/components/loader/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/loader",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Loaders",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/loader/src/linear-loader/linear-loader.stories.js b/components/loader/src/linear-loader/linear-loader.stories.js
index 390cf223d1..bbc1df4b02 100644
--- a/components/loader/src/linear-loader/linear-loader.stories.js
+++ b/components/loader/src/linear-loader/linear-loader.stories.js
@@ -50,3 +50,10 @@ export const OverlayComponent = (args) => (
     </div>
 )
 OverlayComponent.args = { amount: 80 }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <LinearLoader {...args} />
+    </div>
+)
+RTL.args = { amount: 60 }
diff --git a/components/logo/package.json b/components/logo/package.json
index b98da3af3b..ab1679c42b 100644
--- a/components/logo/package.json
+++ b/components/logo/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/logo",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Logo",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/menu/package.json b/components/menu/package.json
index fb121a59ca..33a71042ed 100644
--- a/components/menu/package.json
+++ b/components/menu/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/menu",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Menu",
     "repository": {
         "type": "git",
@@ -33,13 +33,13 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/divider": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2-ui/portal": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/divider": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2-ui/portal": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/menu/src/menu-item/menu-item.stories.js b/components/menu/src/menu-item/menu-item.stories.js
index ff4607aa06..3f1464a714 100644
--- a/components/menu/src/menu-item/menu-item.stories.js
+++ b/components/menu/src/menu-item/menu-item.stories.js
@@ -166,3 +166,14 @@ SubMenus.parameters = {
         },
     },
 }
+
+export const RTLSuffixAndChevron = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
+RTLSuffixAndChevron.args = {
+    label: 'Security notifications',
+    chevron: true,
+    suffix: <Tag>3</Tag>,
+}
diff --git a/components/menu/src/menu-item/menu-item.styles.js b/components/menu/src/menu-item/menu-item.styles.js
index 13de49d4aa..ce68600a38 100644
--- a/components/menu/src/menu-item/menu-item.styles.js
+++ b/components/menu/src/menu-item/menu-item.styles.js
@@ -68,7 +68,7 @@ export default css`
     }
 
     li.with-chevron a {
-        padding-right: ${spacers.dp8};
+        padding-inline-end: ${spacers.dp8};
     }
 
     li.dense a {
@@ -77,7 +77,7 @@ export default css`
     }
 
     li.with-chevron.dense a {
-        padding-right: ${spacers.dp4};
+        padding-inline-end: ${spacers.dp4};
     }
 
     .label {
@@ -91,7 +91,7 @@ export default css`
 
     .icon {
         flex-grow: 0;
-        margin-right: ${spacers.dp12};
+        margin-inline-end: ${spacers.dp12};
         width: 24px;
         height: 24px;
     }
@@ -99,18 +99,22 @@ export default css`
     .suffix {
         display: flex;
         align-items: center;
-        margin-left: ${spacers.dp8};
+        margin-inline-start: ${spacers.dp8};
     }
 
     .chevron {
         display: flex;
         align-items: center;
         flex-grow: 0;
-        margin-left: ${spacers.dp24};
+        margin-inline-start: ${spacers.dp24};
+    }
+
+    .chevron:dir(rtl) {
+        transform: rotate(180deg);
     }
 
     li.dense .icon {
-        margin-right: ${spacers.dp8};
+        margin-inline-end: ${spacers.dp8};
         width: 16px;
         height: 16px;
     }
diff --git a/components/menu/src/menu/menu.stories.js b/components/menu/src/menu/menu.stories.js
index 3c75cf535e..426b06e5dc 100644
--- a/components/menu/src/menu/menu.stories.js
+++ b/components/menu/src/menu/menu.stories.js
@@ -75,10 +75,16 @@ export const SideBarMenu = (args) => (
                 backgroundColor: '#f3ffff',
                 flexGrow: 1,
                 padding: 20,
-                borderLeft: '1px solid grey',
+                borderInlineStart: '1px solid grey',
             }}
         >
             Main content
         </section>
     </main>
 )
+
+export const SideBarMenuRTL = (args) => (
+    <div dir="rtl" style={{ height: '100%' }}>
+        <SideBarMenu {...args} />
+    </div>
+)
diff --git a/components/modal/package.json b/components/modal/package.json
index 4180f7ddd5..df8d71aec2 100644
--- a/components/modal/package.json
+++ b/components/modal/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/modal",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Modal",
     "repository": {
         "type": "git",
@@ -33,12 +33,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/center": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/portal": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/center": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/portal": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/modal/src/modal/close-button.js b/components/modal/src/modal/close-button.js
index e25cc22e5c..45dac34256 100644
--- a/components/modal/src/modal/close-button.js
+++ b/components/modal/src/modal/close-button.js
@@ -23,7 +23,7 @@ export const CloseButton = ({ onClick }) => (
                 border-radius: 3px;
                 position: absolute;
                 top: 0px;
-                right: 0px;
+                inset-inline-end: 0px;
             }
             button:hover {
                 background-color: ${colors.grey200};
diff --git a/components/modal/src/modal/modal.stories.js b/components/modal/src/modal/modal.stories.js
index 57280ed7dd..d595540033 100644
--- a/components/modal/src/modal/modal.stories.js
+++ b/components/modal/src/modal/modal.stories.js
@@ -9,7 +9,7 @@ import {
 import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select'
 import { Tooltip } from '@dhis2-ui/tooltip'
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ModalActions, ModalContent, ModalTitle } from '../index.js'
 import { Modal } from './modal.js'
 
@@ -991,3 +991,18 @@ FluidBottom.args = {
     position: 'bottom',
 }
 FluidBottom.storyName = 'Fluid (Bottom)'
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <SmallTitleContentAction {...args} />
+        </div>
+    )
+}
+RTL.args = { small: true, onClose }
diff --git a/components/node/package.json b/components/node/package.json
index 843f3c1d44..20ff8052d1 100644
--- a/components/node/package.json
+++ b/components/node/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/node",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Node",
     "repository": {
         "type": "git",
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/node/src/node.stories.js b/components/node/src/node.stories.js
index 6928d4033e..62a2862ab1 100644
--- a/components/node/src/node.stories.js
+++ b/components/node/src/node.stories.js
@@ -396,3 +396,9 @@ export const TextLeaves = () => (
     </div>
 )
 TextLeaves.storyName = 'Text leaves'
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <MultipleRoots {...args} />
+    </div>
+)
diff --git a/components/node/src/toggle.js b/components/node/src/toggle.js
index a9d9bacc8a..1937586128 100644
--- a/components/node/src/toggle.js
+++ b/components/node/src/toggle.js
@@ -4,18 +4,20 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 const ArrowDown = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
-        <style jsx>{`
-            svg {
-                fill: inherit;
-                height: 24px;
-                width: 24px;
-                vertical-align: middle;
-                pointer-events: none;
-            }
-        `}</style>
-    </svg>
+    <div className="nodeArrow">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M15.7041 10.3329L12.1495 14.3318C12.0699 14.4213 11.9301 14.4213 11.8505 14.3318L8.29589 10.3329C8.18124 10.2039 8.2728 10 8.44537 10H15.5546C15.7272 10 15.8188 10.2039 15.7041 10.3329Z" />
+            <style jsx>{`
+                svg {
+                    fill: inherit;
+                    height: 24px;
+                    width: 24px;
+                    vertical-align: middle;
+                    pointer-events: none;
+                }
+            `}</style>
+        </svg>
+    </div>
 )
 
 export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
@@ -40,7 +42,7 @@ export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
                 div:after {
                     background: ${colors.grey400};
                     height: calc(100% - 24px);
-                    left: 12px;
+                    inset-inline-start: 12px;
                     position: absolute;
                     top: 15px;
                     width: 1px;
@@ -55,14 +57,21 @@ export const Toggle = ({ open, onOpen, onClose, dataTest }) => {
                     z-index: 2;
                     fill: ${colors.grey900};
                 }
-                div :global(svg) {
+                div :global(.nodeArrow) {
                     vertical-align: top;
                     transform: rotate(-90deg);
                     transition: transform 0.1s ease-out;
                 }
-                .open :global(svg) {
+                div :global(.nodeArrow:dir(rtl)) {
+                    transform: rotate(90deg);
+                }
+                .open :global(.nodeArrow) {
+                    transform: rotate(0);
+                }
+                .open :global(.nodeArrow:dir(rtl)) {
                     transform: rotate(0);
                 }
+
                 div:hover {
                     cursor: pointer;
                     border-radius: 3px;
diff --git a/components/notice-box/package.json b/components/notice-box/package.json
index 31661e9983..41122beddc 100644
--- a/components/notice-box/package.json
+++ b/components/notice-box/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/notice-box",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI NoticeBox",
     "repository": {
         "type": "git",
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/organisation-unit-tree/package.json b/components/organisation-unit-tree/package.json
index 9cb56bb6ba..5d81547e2c 100644
--- a/components/organisation-unit-tree/package.json
+++ b/components/organisation-unit-tree/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/organisation-unit-tree",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI OrganisationUnitTree",
     "repository": {
         "type": "git",
@@ -35,10 +35,10 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/checkbox": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/node": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/checkbox": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/node": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/organisation-unit-tree/src/__stories__/rtl.js b/components/organisation-unit-tree/src/__stories__/rtl.js
new file mode 100644
index 0000000000..8bc42fdbc1
--- /dev/null
+++ b/components/organisation-unit-tree/src/__stories__/rtl.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const RTL = () => (
+    <div dir="rtl">
+        <OrganisationUnitTree
+            onChange={onChange}
+            name="Root org unit"
+            roots={['A0000000000']}
+            initiallyExpanded={['/A0000000000/A0000000001']}
+        />
+    </div>
+)
diff --git a/components/organisation-unit-tree/src/organisation-unit-node/label/iconized-checkbox.js b/components/organisation-unit-tree/src/organisation-unit-node/label/iconized-checkbox.js
index 0f117f01ab..e65e264973 100644
--- a/components/organisation-unit-tree/src/organisation-unit-node/label/iconized-checkbox.js
+++ b/components/organisation-unit-tree/src/organisation-unit-node/label/iconized-checkbox.js
@@ -32,7 +32,7 @@ export const IconizedCheckbox = ({
             <style jsx>{`
                 span {
                     display: inline-block;
-                    margin-right: 4px;
+                    margin-inline-end: 4px;
                 }
             `}</style>
         </>
diff --git a/components/organisation-unit-tree/src/organisation-unit-node/label/label-container.js b/components/organisation-unit-tree/src/organisation-unit-node/label/label-container.js
index 865cdf805c..c80d5d547a 100644
--- a/components/organisation-unit-tree/src/organisation-unit-node/label/label-container.js
+++ b/components/organisation-unit-tree/src/organisation-unit-node/label/label-container.js
@@ -24,7 +24,7 @@ export const LabelContainer = ({ highlighted, children }) => (
 
             .highlighted {
                 background: ${colors.teal200};
-                padding-right: 4px;
+                padding-inline-end: 4px;
             }
         `}</style>
     </div>
diff --git a/components/organisation-unit-tree/src/organisation-unit-tree.stories.js b/components/organisation-unit-tree/src/organisation-unit-tree.stories.js
index ca9f932fde..6a9c6fbfc1 100644
--- a/components/organisation-unit-tree/src/organisation-unit-tree.stories.js
+++ b/components/organisation-unit-tree/src/organisation-unit-tree.stories.js
@@ -66,4 +66,5 @@ export { Loading } from './__stories__/loading.js'
 export { RootLoading } from './__stories__/root-loading.js'
 export { RootError } from './__stories__/root-error.js'
 export { LoadingErrorGrandchild } from './__stories__/loading-error-grandchild.js'
+export { RTL } from './__stories__/rtl.js'
 export * from './__stories__/development-stories.js'
diff --git a/components/pagination/package.json b/components/pagination/package.json
index 7daf6e9fa2..d565642091 100644
--- a/components/pagination/package.json
+++ b/components/pagination/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/pagination",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Pagination",
     "repository": {
         "type": "git",
@@ -34,10 +34,10 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/select": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/select": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/pagination/src/page-controls.js b/components/pagination/src/page-controls.js
index ee754dd0e4..6d3e5a7e1c 100644
--- a/components/pagination/src/page-controls.js
+++ b/components/pagination/src/page-controls.js
@@ -30,7 +30,9 @@ const PageControls = ({
             onClick={() => onClick(page - 1)}
             dataTest={`${dataTest}-page-previous`}
         >
-            <IconChevronLeft16 />
+            <div className="navigator-icon">
+                <IconChevronLeft16 />
+            </div>
             {translate(previousPageText)}
         </Button>
         <Button
@@ -42,7 +44,9 @@ const PageControls = ({
             dataTest={`${dataTest}-page-next`}
         >
             {translate(nextPageText)}
-            <IconChevronRight16 />
+            <div className="navigator-icon">
+                <IconChevronRight16 />
+            </div>
         </Button>
         <style jsx>{`
             div {
@@ -50,12 +54,15 @@ const PageControls = ({
             }
             div :global(.button-previous) {
                 height: 32px;
-                padding-left: 0;
+                padding-inline-start: 0;
             }
             div :global(.button-next) {
                 height: 32px;
-                padding-right: 0;
-                margin-left: ${spacers.dp4};
+                padding-inline-end: 0;
+                margin-inline-start: ${spacers.dp4};
+            }
+            div .navigator-icon:dir(rtl) {
+                transform: rotate(180deg);
             }
         `}</style>
     </div>
diff --git a/components/pagination/src/page-select.js b/components/pagination/src/page-select.js
index 450de94230..3391e1582e 100644
--- a/components/pagination/src/page-select.js
+++ b/components/pagination/src/page-select.js
@@ -43,7 +43,7 @@ const PageSelect = ({
         </SingleSelect>
         <style jsx>{`
             div {
-                margin-right: ${spacers.dp12};
+                margin-inline-end: ${spacers.dp12};
             }
         `}</style>
     </div>
diff --git a/components/pagination/src/page-size-select.js b/components/pagination/src/page-size-select.js
index 1461a56777..20327e0af4 100644
--- a/components/pagination/src/page-size-select.js
+++ b/components/pagination/src/page-size-select.js
@@ -44,7 +44,7 @@ const PageSizeSelect = ({
                 align-items: center;
                 flex-shrink: 0;
                 min-height: 32px;
-                margin-right: ${spacers.dp12};
+                margin-inline-end: ${spacers.dp12};
                 flex-grow: 1;
             }
         `}</style>
diff --git a/components/pagination/src/page-summary.js b/components/pagination/src/page-summary.js
index 2508b98682..412f0fcfa6 100644
--- a/components/pagination/src/page-summary.js
+++ b/components/pagination/src/page-summary.js
@@ -38,7 +38,7 @@ const PageSummary = ({
                     align-items: center;
                     flex-shrink: 0;
                     min-height: 32px;
-                    margin-right: ${spacers.dp12};
+                    margin-inline-end: ${spacers.dp12};
                 }
                 span {
                     color: ${colors.grey700};
diff --git a/components/pagination/src/pagination.stories.js b/components/pagination/src/pagination.stories.js
index 554b0c77ca..111ed65890 100644
--- a/components/pagination/src/pagination.stories.js
+++ b/components/pagination/src/pagination.stories.js
@@ -99,3 +99,10 @@ MediumWidth.args = { ...pagers.atTenthPage, boxWidth: 500 }
 
 export const NarrowWidth = InBox.bind({})
 NarrowWidth.args = { ...pagers.atTenthPage, boxWidth: 100 }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Pagination {...args} />
+    </div>
+)
+RTL.args = { ...pagers.atTenthPage }
diff --git a/components/popover/package.json b/components/popover/package.json
index ea2e1cb5ac..7e8e2cf319 100644
--- a/components/popover/package.json
+++ b/components/popover/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popover",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Popover",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/popper/package.json b/components/popper/package.json
index 9124b74243..ecc5492f17 100644
--- a/components/popper/package.json
+++ b/components/popper/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/popper",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Popper",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "@popperjs/core": "^2.10.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2",
diff --git a/components/popper/src/popper.js b/components/popper/src/popper.js
index e046dbcba2..453e3a067f 100644
--- a/components/popper/src/popper.js
+++ b/components/popper/src/popper.js
@@ -5,6 +5,16 @@ import { usePopper } from 'react-popper'
 import { getReferenceElement } from './get-reference-element.js'
 import { deduplicateModifiers } from './modifiers.js'
 
+const flipPlacement = (placement) => {
+    if (placement.startsWith('right')) {
+        return placement.replace('right', 'left')
+    }
+    if (placement.startsWith('left')) {
+        return placement.replace('left', 'right')
+    }
+    return placement
+}
+
 const Popper = ({
     children,
     className,
@@ -32,7 +42,10 @@ const Popper = ({
     const { styles, attributes } = usePopper(referenceElement, popperElement, {
         strategy,
         onFirstUpdate,
-        placement,
+        placement:
+            document.documentElement.dir === 'rtl'
+                ? flipPlacement(placement)
+                : placement,
         modifiers: deduplicatedModifiers,
     })
 
diff --git a/components/popper/src/popper.stories.js b/components/popper/src/popper.stories.js
index f052ce37f5..faba883903 100644
--- a/components/popper/src/popper.stories.js
+++ b/components/popper/src/popper.stories.js
@@ -1,5 +1,5 @@
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import React, { useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Popper } from './popper.js'
 
 const description = `
@@ -143,3 +143,20 @@ export const VirtualElementRef = (args) => {
 }
 VirtualElementRef.args = { placement: 'left-end' }
 VirtualElementRef.parameters = { docs: { source: { type: 'code' } } }
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.documentElement.setAttribute('dir', 'rtl')
+        return () => {
+            document.documentElement.setAttribute('dir', 'ltr')
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <span>If dir=rtl, `left` and `right` placement are reversed</span>
+            <Template {...args} placement="left" />
+            <br />
+            <Template {...args} placement="right-start" />
+        </div>
+    )
+}
diff --git a/components/portal/package.json b/components/portal/package.json
index 98c96d8ad3..75e839bf5a 100644
--- a/components/portal/package.json
+++ b/components/portal/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/portal",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Portal",
     "repository": {
         "type": "git",
diff --git a/components/radio/package.json b/components/radio/package.json
index cd0a99e696..2c98640b96 100644
--- a/components/radio/package.json
+++ b/components/radio/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/radio",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Radio",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/radio/src/radio.js b/components/radio/src/radio.js
index e3050b6abb..67e0f11a9a 100644
--- a/components/radio/src/radio.js
+++ b/components/radio/src/radio.js
@@ -132,7 +132,7 @@ class Radio extends Component {
                         width: 18px;
 
                         /* The same offset as the icon, 2px border, 1px padding */
-                        left: 3px;
+                        inset-inline-start: 3px;
                     }
 
                     label.dense input {
@@ -143,14 +143,14 @@ class Radio extends Component {
 
                     .icon {
                         user-select: none;
-                        margin-right: ${label ? spacers.dp4 : 0};
+                        margin-inline-end: ${label ? spacers.dp4 : 0};
                         border: 2px solid transparent;
                         padding: 1px;
                         border-radius: 50%;
                     }
 
                     label.dense .icon {
-                        margin-right: 3px;
+                        margin-inline-end: 3px;
                     }
 
                     input:focus + .icon {
diff --git a/components/radio/src/radio.stories.js b/components/radio/src/radio.stories.js
index b1a06403a3..18cb8c39b4 100644
--- a/components/radio/src/radio.stories.js
+++ b/components/radio/src/radio.stories.js
@@ -151,3 +151,9 @@ ImageLabelDense.storyName = 'Image label - Dense'
 
 export const NoLabel = Template.bind({})
 NoLabel.args = { label: null, className: 'some-name' }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
diff --git a/components/required/package.json b/components/required/package.json
index b5ebd593e4..ad04435386 100644
--- a/components/required/package.json
+++ b/components/required/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/required",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Required",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/required/src/required.js b/components/required/src/required.js
index 0e53ef1254..d61bf29161 100644
--- a/components/required/src/required.js
+++ b/components/required/src/required.js
@@ -7,7 +7,7 @@ export const Required = ({ dataTest }) => (
         *
         <style jsx>{`
             span {
-                padding-left: ${spacers.dp4};
+                padding-inline-start: ${spacers.dp4};
             }
         `}</style>
     </span>
diff --git a/components/segmented-control/package.json b/components/segmented-control/package.json
index d3fa03c0f7..11ad3f8ba4 100644
--- a/components/segmented-control/package.json
+++ b/components/segmented-control/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/segmented-control",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Segmented Control",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/select/package.json b/components/select/package.json
index c5c5f84bd1..a1a3c59f93 100644
--- a/components/select/package.json
+++ b/components/select/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -34,19 +34,19 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/checkbox": "9.3.0",
-        "@dhis2-ui/chip": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2-ui/status-icon": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/checkbox": "9.4.0-alpha.2",
+        "@dhis2-ui/chip": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2-ui/status-icon": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/select/src/multi-select/input.js b/components/select/src/multi-select/input.js
index 47706bfbdb..cc0711345d 100644
--- a/components/select/src/multi-select/input.js
+++ b/components/select/src/multi-select/input.js
@@ -79,8 +79,8 @@ const Input = ({
                 }
 
                 .root-right {
-                    margin-left: auto;
-                    margin-right: 10px;
+                    margin-inline-start: auto;
+                    margin-inline-end: 10px;
                 }
             `}</style>
 
diff --git a/components/select/src/multi-select/multi-select.stories.js b/components/select/src/multi-select/multi-select.stories.js
index 5f0c45bea2..132dc1546b 100644
--- a/components/select/src/multi-select/multi-select.stories.js
+++ b/components/select/src/multi-select/multi-select.stories.js
@@ -1,6 +1,6 @@
 import { sharedPropTypes } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { MultiSelectOption } from '../index.js'
 import { MultiSelect } from './index.js'
 
@@ -366,3 +366,18 @@ export const ShiftedIntoView = (args) => (
         `}</style>
     </>
 )
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <WithOptionsTemplate {...args} />
+        </div>
+    )
+}
+RTL.args = { selected: ['1', '2'], prefix: 'RTL text' }
diff --git a/components/selector-bar/package.json b/components/selector-bar/package.json
index 7bf815be6f..1dce7cc047 100644
--- a/components/selector-bar/package.json
+++ b/components/selector-bar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/selector-bar",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "@testing-library/react": "^12.1.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "devDependencies": {
-        "@dhis2-ui/css": "9.3.0",
-        "@dhis2-ui/menu": "9.3.0",
-        "@dhis2-ui/organisation-unit-tree": "9.3.0",
-        "@dhis2-ui/select": "9.3.0",
+        "@dhis2-ui/css": "9.4.0-alpha.2",
+        "@dhis2-ui/menu": "9.4.0-alpha.2",
+        "@dhis2-ui/organisation-unit-tree": "9.4.0-alpha.2",
+        "@dhis2-ui/select": "9.4.0-alpha.2",
         "@dhis2/d2-i18n": "^1.1.0",
         "@testing-library/jest-dom": "^5.16.1",
         "react": "16.13",
diff --git a/components/selector-bar/src/selector-bar-item/selector-bar-item.js b/components/selector-bar/src/selector-bar-item/selector-bar-item.js
index a37ced37e0..16b8a6ce48 100644
--- a/components/selector-bar/src/selector-bar-item/selector-bar-item.js
+++ b/components/selector-bar/src/selector-bar-item/selector-bar-item.js
@@ -115,7 +115,9 @@ export const SelectorBarItem = ({
                          * that's why the padding on the right is only 8px.
                          */ ''
                     }
-                    padding: 0 ${spacers.dp8} 0 ${spacers.dp12};
+                    padding-block: 0;
+                    padding-inline-start: ${spacers.dp8};
+                    padding-inline-end: ${spacers.dp12};
                     font-size: 14px;
                     line-height: 16px;
                     border: none;
@@ -135,13 +137,13 @@ export const SelectorBarItem = ({
                 }
 
                 .value {
-                    padding-left: ${spacers.dp8};
+                    padding-inline-start: ${spacers.dp8};
                 }
 
                 .clear-icon {
                     display: flex;
                     align-items: center;
-                    margin-left: ${spacers.dp4};
+                    margin-inline-start: ${spacers.dp4};
                     padding: ${spacers.dp4};
                     cursor: pointer;
                 }
@@ -155,7 +157,7 @@ export const SelectorBarItem = ({
 
                 .toggle-icon {
                     display: flex;
-                    margin-left: ${spacers.dp4};
+                    margin-inline-start: ${spacers.dp4};
                     height: 100%;
                     align-items: center;
                 }
diff --git a/components/selector-bar/src/selector-bar/__stories__/rtl.js b/components/selector-bar/src/selector-bar/__stories__/rtl.js
new file mode 100644
index 0000000000..e44d9133d7
--- /dev/null
+++ b/components/selector-bar/src/selector-bar/__stories__/rtl.js
@@ -0,0 +1,105 @@
+import { Button } from '@dhis2-ui/button'
+import React from 'react'
+import { SelectorBar, SelectorBarItem } from '../../index.js'
+import {
+    OrgUnitSelect,
+    MenuSelect,
+    createDecoratorCustomDataProvider,
+    createStatefulDecorator,
+    decoratorCommonStyles,
+    workflows,
+} from './common.js'
+
+const RHSContent = () => (
+    <div className="rhs-content">
+        <Button small>Options</Button>
+        <style jsx>{`
+            .rhs-content {
+                display: flex;
+                height: 40px;
+                padding: 0 16px;
+                align-items: center;
+            }
+        `}</style>
+    </div>
+)
+
+export const RTL = (
+    _,
+    {
+        workflow,
+        setWorkflow,
+        workflowOpen,
+        setWorkflowOpen,
+        orgUnit,
+        setOrgUnit,
+        orgUnitOpen,
+        setOrgUnitOpen,
+    }
+) => {
+    return (
+        <div dir="rtl">
+            <SelectorBar
+                disableClearSelections={!workflow || !orgUnit}
+                onClearSelectionClick={() => {
+                    setWorkflow(null)
+                    setOrgUnit(null)
+                }}
+                additionalContent={<RHSContent />}
+            >
+                <SelectorBarItem
+                    disabled={false}
+                    label="Workflow"
+                    value={workflow?.label}
+                    noValueMessage="Choose a workflow"
+                    open={workflowOpen}
+                    setOpen={setWorkflowOpen}
+                    onClearSelectionClick={() => {
+                        setWorkflow(null)
+                    }}
+                >
+                    <MenuSelect
+                        values={workflows}
+                        selected={workflow?.value}
+                        onChange={({ selected }) => {
+                            setWorkflow(
+                                workflows.find(
+                                    (currentWorkflow) =>
+                                        selected === currentWorkflow.value
+                                )
+                            )
+                            setWorkflowOpen(false)
+                        }}
+                    />
+                </SelectorBarItem>
+
+                <SelectorBarItem
+                    disabled={!workflow}
+                    label="Org unit"
+                    value={orgUnit?.displayName}
+                    noValueMessage="Choose an organisation unit"
+                    open={orgUnitOpen}
+                    setOpen={setOrgUnitOpen}
+                    onClearSelectionClick={() => {
+                        setOrgUnit(null)
+                    }}
+                >
+                    <OrgUnitSelect
+                        selected={orgUnit ? [orgUnit.path] : []}
+                        onChange={(nextOrgUnit, evt) => {
+                            evt.stopPropagation()
+                            setOrgUnit(nextOrgUnit)
+                            setOrgUnitOpen(false)
+                        }}
+                    />
+                </SelectorBarItem>
+            </SelectorBar>
+        </div>
+    )
+}
+
+RTL.decorators = [
+    decoratorCommonStyles,
+    createStatefulDecorator(),
+    createDecoratorCustomDataProvider(),
+]
diff --git a/components/selector-bar/src/selector-bar/selector-bar.js b/components/selector-bar/src/selector-bar/selector-bar.js
index d679044bdd..3e0263c5c1 100644
--- a/components/selector-bar/src/selector-bar/selector-bar.js
+++ b/components/selector-bar/src/selector-bar/selector-bar.js
@@ -85,7 +85,7 @@ export const SelectorBar = ({
                          * 8px already come from the clear selection component
                          */ ''
                     }
-                    padding-left: 4px;
+                    padding-inline-start: 4px;
                 }
             `}</style>
         </div>
diff --git a/components/selector-bar/src/selector-bar/selector-bar.stories.js b/components/selector-bar/src/selector-bar/selector-bar.stories.js
index 6327460dfb..f9847826b8 100644
--- a/components/selector-bar/src/selector-bar/selector-bar.stories.js
+++ b/components/selector-bar/src/selector-bar/selector-bar.stories.js
@@ -3,3 +3,4 @@ export { WithSomeInputs } from './__stories__/with-some-inputs.js'
 export { WithAdditionalContent } from './__stories__/with-right-hand-side-content.js'
 export { KeepOrgUnitExpanded } from './__stories__/keep-org-unit-expanded.js'
 export { WithMultipleRows } from './__stories__/with-multiple-rows.js'
+export { RTL } from './__stories__/rtl.js'
diff --git a/components/sharing-dialog/package.json b/components/sharing-dialog/package.json
index f2955a3c42..61e287e140 100644
--- a/components/sharing-dialog/package.json
+++ b/components/sharing-dialog/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/sharing-dialog",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI SharingDialog",
     "repository": {
         "type": "git",
@@ -35,22 +35,22 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/divider": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/menu": "9.3.0",
-        "@dhis2-ui/modal": "9.3.0",
-        "@dhis2-ui/notice-box": "9.3.0",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2-ui/select": "9.3.0",
-        "@dhis2-ui/tab": "9.3.0",
-        "@dhis2-ui/tooltip": "9.3.0",
-        "@dhis2-ui/user-avatar": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/divider": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/menu": "9.4.0-alpha.2",
+        "@dhis2-ui/modal": "9.4.0-alpha.2",
+        "@dhis2-ui/notice-box": "9.4.0-alpha.2",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2-ui/select": "9.4.0-alpha.2",
+        "@dhis2-ui/tab": "9.4.0-alpha.2",
+        "@dhis2-ui/tooltip": "9.4.0-alpha.2",
+        "@dhis2-ui/user-avatar": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "@react-hook/size": "^2.1.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
diff --git a/components/sharing-dialog/src/access-list/list-item.js b/components/sharing-dialog/src/access-list/list-item.js
index b2cb117d6c..2848f167c8 100644
--- a/components/sharing-dialog/src/access-list/list-item.js
+++ b/components/sharing-dialog/src/access-list/list-item.js
@@ -86,7 +86,7 @@ export const ListItem = ({
                 }
 
                 .details-text {
-                    margin-left: 8px;
+                    margin-inline-start: 8px;
                 }
 
                 .details-name {
diff --git a/components/sharing-dialog/src/sharing-dialog.stories.js b/components/sharing-dialog/src/sharing-dialog.stories.js
index cf0934eeaf..72181e4479 100644
--- a/components/sharing-dialog/src/sharing-dialog.stories.js
+++ b/components/sharing-dialog/src/sharing-dialog.stories.js
@@ -1,5 +1,5 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { SharingDialog } from './sharing-dialog.js'
 
 const subtitle = 'The common dialog for managing object sharing in DHIS2 apps'
@@ -249,3 +249,23 @@ export const ForDashboardWithCascadeSharingPartialSuccess = (args) => (
 ForDashboardWithCascadeSharingPartialSuccess.storyName =
     'For dashboard with cascading sharing partial success'
 ForDashboardWithCascadeSharingPartialSuccess.args = { type: 'dashboard' }
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <CustomDataProvider data={customDefaultData}>
+                <SharingDialog {...args} />
+            </CustomDataProvider>
+        </div>
+    )
+}
+
+RTL.parameters = {
+    docs: { disable: false, source: { type: 'dynamic' } },
+}
diff --git a/components/status-icon/package.json b/components/status-icon/package.json
index 2ce7020138..ca27d947c4 100644
--- a/components/status-icon/package.json
+++ b/components/status-icon/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/status-icon",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI StatusIcon",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/switch/package.json b/components/switch/package.json
index cddb28e894..0c487e2b51 100644
--- a/components/switch/package.json
+++ b/components/switch/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/switch",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Switch",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/required": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/required": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/switch/src/switch/switch-icons.js b/components/switch/src/switch/switch-icons.js
index 2f7815c348..9f7a74c744 100644
--- a/components/switch/src/switch/switch-icons.js
+++ b/components/switch/src/switch/switch-icons.js
@@ -11,6 +11,14 @@ const styles = css`
         width: 35px;
     }
 
+    svg:dir(rtl) {
+        transform: scale(-1, 1);
+    }
+
+    svg[dir='rtl'] {
+        transform: scale(-1, 1);
+    }
+
     svg.dense {
         height: 14px;
         width: 27px;
@@ -27,6 +35,14 @@ const styles = css`
         fill: ${colors.white};
     }
 
+    svg .checkmark:dir(rtl) {
+        display: none;
+    }
+
+    svg[dir='rtl'] .checkmark {
+        display: none;
+    }
+
     svg.checked .handle-unchecked,
     svg:not(.checked) .handle-checked {
         fill: none;
@@ -85,6 +101,7 @@ export function SwitchRegular({ className }) {
             viewBox="0 0 42 22"
             xmlns="http://www.w3.org/2000/svg"
             className={className}
+            dir={document.documentElement?.dir ?? 'ltr'}
         >
             <path
                 d="M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z"
diff --git a/components/switch/src/switch/switch.stories.js b/components/switch/src/switch/switch.stories.js
index 70be272035..d005ad39a6 100644
--- a/components/switch/src/switch/switch.stories.js
+++ b/components/switch/src/switch/switch.stories.js
@@ -1,5 +1,5 @@
 import { sharedPropTypes } from '@dhis2/ui-constants'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Switch } from './index.js'
 
 const subtitle = 'An input control that allows an on and an off state'
@@ -138,3 +138,20 @@ ErrorDense.storyName = 'Error - Dense'
 export const ImageLabelDense = Template.bind({})
 ImageLabelDense.args = { ...ImageLabel.args, ...DefaultDense.args }
 ImageLabelDense.storyName = 'Image label - Dense'
+
+export const RTL = (args) => {
+    useEffect(() => {
+        document.documentElement.setAttribute('dir', 'rtl')
+        return () => {
+            document.documentElement.setAttribute('dir', 'ltr')
+        }
+    }, [])
+
+    return (
+        <div dir="rtl">
+            <Template {...args} />
+            <Template checked={true} value="checked" />
+            <Template error={true} checked={true} value="error" />
+        </div>
+    )
+}
diff --git a/components/tab/package.json b/components/tab/package.json
index 3eb7d235c9..f3fb56c912 100644
--- a/components/tab/package.json
+++ b/components/tab/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tab",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Tabs",
     "repository": {
         "type": "git",
@@ -33,8 +33,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/tab/src/tab-bar/tab-bar.stories.js b/components/tab/src/tab-bar/tab-bar.stories.js
index 8b779985d4..d56bbeced3 100644
--- a/components/tab/src/tab-bar/tab-bar.stories.js
+++ b/components/tab/src/tab-bar/tab-bar.stories.js
@@ -183,3 +183,9 @@ export const TabStatesWithIcon = (args) => (
     </TabBar>
 )
 TabStatesWithIcon.storyName = 'Tab states - with icon'
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <TabStatesWithIcon {...args} />
+    </div>
+)
diff --git a/components/tab/src/tab/tab.js b/components/tab/src/tab/tab.js
index 59361cb17b..bb85dcec9c 100644
--- a/components/tab/src/tab/tab.js
+++ b/components/tab/src/tab/tab.js
@@ -56,7 +56,7 @@ const Tab = ({
                 display: block;
                 position: absolute;
                 bottom: -1px;
-                left: 0;
+                inset-inline-start: 0;
                 height: 4px;
                 width: 100%;
                 background-color: transparent;
diff --git a/components/table/package.json b/components/table/package.json
index bb4a8ba77d..e836b9bed0 100644
--- a/components/table/package.json
+++ b/components/table/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/table",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Table",
     "repository": {
         "type": "git",
@@ -34,8 +34,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/table/src/data-table/data-table.stories.js b/components/table/src/data-table/data-table.stories.js
index 78b557e2eb..905f308c0c 100644
--- a/components/table/src/data-table/data-table.stories.js
+++ b/components/table/src/data-table/data-table.stories.js
@@ -1334,3 +1334,9 @@ export const LongCellContentLargeCells = LongCellContentTemplate.bind({})
 LongCellContentLargeCells.args = {
     large: 'true',
 }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <BasicTemplate {...args} />
+    </div>
+)
diff --git a/components/table/src/data-table/table-elements/__tests__/table-data-cell.test.js b/components/table/src/data-table/table-elements/__tests__/table-data-cell.test.js
index bbe006f9e0..f8c5b9e383 100644
--- a/components/table/src/data-table/table-elements/__tests__/table-data-cell.test.js
+++ b/components/table/src/data-table/table-elements/__tests__/table-data-cell.test.js
@@ -71,7 +71,7 @@ describe('<TableDataCell>', () => {
         const left = '200px'
         const wrapper = shallow(<TableDataCell left={left} />)
 
-        expect(wrapper.html()).toContain(`left: ${left};`)
+        expect(wrapper.html()).toContain(`inset-inline-start: ${left};`)
     })
     it('accepts a muted prop', () => {
         const wrapper = shallow(<TableDataCell muted />)
diff --git a/components/table/src/data-table/table-elements/__tests__/table-header-cell.test.js b/components/table/src/data-table/table-elements/__tests__/table-header-cell.test.js
index 65968f72a8..4e40ed69c8 100644
--- a/components/table/src/data-table/table-elements/__tests__/table-header-cell.test.js
+++ b/components/table/src/data-table/table-elements/__tests__/table-header-cell.test.js
@@ -77,7 +77,7 @@ describe('<TableHeaderCell>', () => {
         const left = '200px'
         const wrapper = shallow(<TableHeaderCell left={left} />)
 
-        expect(wrapper.html()).toContain(`left: ${left};`)
+        expect(wrapper.html()).toContain(`inset-inline-start: ${left};`)
     })
     it('accepts an muted prop', () => {
         const wrapper = shallow(<TableHeaderCell muted />)
diff --git a/components/table/src/data-table/table-elements/table-body.js b/components/table/src/data-table/table-elements/table-body.js
index 21df723540..b170b871f7 100644
--- a/components/table/src/data-table/table-elements/table-body.js
+++ b/components/table/src/data-table/table-elements/table-body.js
@@ -24,15 +24,15 @@ export const TableBody = forwardRef(
                     position: absolute;
                     top: 0;
                     bottom: 0;
-                    left: 0;
-                    right: 0;
+                    inset-inline-start: 0;
+                    inset-inline-end: 0;
                     background-color: rgba(255, 255, 255, 0.8);
                 }
                 .loading:after {
                     content: '';
                     position: absolute;
                     top: calc(50% - 24px);
-                    left: calc(50% - 24px);
+                    inset-inline-start: calc(50% - 24px);
                     width: 48px;
                     height: 48px;
                     border: 6px solid rgba(110, 122, 138, 0.15);
diff --git a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
index 0713423832..f5e861b4e2 100644
--- a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
+++ b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.js
@@ -5,6 +5,12 @@ import PropTypes from 'prop-types'
 import React, { forwardRef } from 'react'
 import styles from './table-data-cell.styles.js'
 
+const rtlCorrespondingAlignments = {
+    left: 'right',
+    right: 'left',
+    center: 'center',
+}
+
 export const TableDataCell = forwardRef(
     (
         {
@@ -30,50 +36,56 @@ export const TableDataCell = forwardRef(
             ...props
         },
         ref
-    ) => (
-        <td
-            {...props}
-            ref={ref}
-            colSpan={colSpan}
-            rowSpan={rowSpan}
-            onClick={onClick}
-            className={cx(className, {
-                active,
-                bordered,
-                error,
-                large,
-                muted,
-                staticStyle,
-                valid,
-            })}
-            data-test={dataTest}
-            role={role}
-            scope={scope}
-        >
-            {children}
-            <style jsx>{styles}</style>
-            <style jsx>{`
-                td {
-                    left: ${left};
-                    text-align: ${align};
-                    width: ${width};
-                    background-color: ${backgroundColor || colors.white};
-                }
-                :global(tr.selected) > td {
-                    background-color: ${backgroundColor || colors.teal100};
-                }
-                :global(tr:hover) > td:not(.staticStyle) {
-                    background-color: ${backgroundColor || colors.grey100};
-                }
-                :global(tr:active) > td:not(.staticStyle) {
-                    background-color: ${backgroundColor || colors.grey200};
-                }
-                :global(tr.selected:hover) > td:not(.staticStyle) {
-                    background-color: ${backgroundColor || '#cdeae8'};
-                }
-            `}</style>
-        </td>
-    )
+    ) => {
+        const rtlAlign = rtlCorrespondingAlignments[align] ?? align
+        return (
+            <td
+                {...props}
+                ref={ref}
+                colSpan={colSpan}
+                rowSpan={rowSpan}
+                onClick={onClick}
+                className={cx(className, {
+                    active,
+                    bordered,
+                    error,
+                    large,
+                    muted,
+                    staticStyle,
+                    valid,
+                })}
+                data-test={dataTest}
+                role={role}
+                scope={scope}
+            >
+                {children}
+                <style jsx>{styles}</style>
+                <style jsx>{`
+                    td {
+                        inset-inline-start: ${left};
+                        text-align: ${align};
+                        width: ${width};
+                        background-color: ${backgroundColor || colors.white};
+                    }
+                    :dir(rtl) {
+                        text-align: ${rtlAlign};
+                    }
+                    :global(tr.selected) > td {
+                        background-color: ${backgroundColor || colors.teal100};
+                    }
+                    :global(tr:hover) > td:not(.staticStyle) {
+                        background-color: ${backgroundColor || colors.grey100};
+                    }
+                    :global(tr:active) > td:not(.staticStyle) {
+                        background-color: ${backgroundColor || colors.grey200};
+                    }
+                    :global(tr.selected:hover) > td:not(.staticStyle) {
+                        background-color: ${backgroundColor || '#cdeae8'};
+                    }
+                `}</style>
+            </td>
+        )
+    }
 )
 
 TableDataCell.displayName = 'TableDataCell'
diff --git a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.styles.js b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.styles.js
index a430c98d15..ba7b3da41c 100644
--- a/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.styles.js
+++ b/components/table/src/data-table/table-elements/table-data-cell/table-data-cell.styles.js
@@ -14,10 +14,10 @@ export default css`
         outline-offset: -2px;
     }
     td.bordered {
-        border-right: 1px solid ${colors.grey300};
+        border-inline-end: 1px solid ${colors.grey300};
     }
     td.bordered:last-child {
-        border-right: 1px solid transparent;
+        border-inline-end: 1px solid transparent;
     }
     td.error {
         color: ${colors.red700};
diff --git a/components/table/src/data-table/table-elements/table-header-cell-action.js b/components/table/src/data-table/table-elements/table-header-cell-action.js
index 0a668265fa..286f8d6903 100644
--- a/components/table/src/data-table/table-elements/table-header-cell-action.js
+++ b/components/table/src/data-table/table-elements/table-header-cell-action.js
@@ -26,7 +26,7 @@ export const TableHeaderCellAction = forwardRef(
                     flex-shrink: 0;
                     cursor: pointer;
                     border-radius: 4px;
-                    margin-left: 2px;
+                    margin-inline-start: 2px;
                 }
                 button:hover,
                 button:focus-visible {
diff --git a/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js b/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
index dc946c7a29..2ad55320ba 100644
--- a/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
+++ b/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.js
@@ -60,7 +60,7 @@ export const TableHeaderCell = forwardRef(
             <style jsx>{styles}</style>
             <style jsx>{`
                 th {
-                    left: ${left};
+                    inset-inline-start: ${left};
                     top: ${top};
                     text-align: ${align};
                     width: ${width};
diff --git a/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.styles.js b/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.styles.js
index 300e47ba03..0cb88db651 100644
--- a/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.styles.js
+++ b/components/table/src/data-table/table-elements/table-header-cell/table-header-cell.styles.js
@@ -16,17 +16,17 @@ export default css`
         font-size: 13px;
     }
     th:last-of-type {
-        border-right: 1px solid ${colors.grey300};
+        border-inline-end: 1px solid ${colors.grey300};
     }
     th.active {
         outline: 2px solid ${colors.grey600};
         outline-offset: -2px;
     }
     th.bordered {
-        border-right: 1px solid ${colors.grey300};
+        border-inline-end: 1px solid ${colors.grey300};
     }
     th.bordered:last-child {
-        border-right: 1px solid transparent;
+        border-inline-end: 1px solid transparent;
     }
     th.error {
         color: ${colors.red700};
diff --git a/components/table/src/stacked-table/stacked-table-cell.js b/components/table/src/stacked-table/stacked-table-cell.js
index ce3245ce6a..c69df4dc94 100644
--- a/components/table/src/stacked-table/stacked-table-cell.js
+++ b/components/table/src/stacked-table/stacked-table-cell.js
@@ -34,6 +34,9 @@ export const StackedTableCell = ({
                     width: 100%;
                     display: block;
                 }
+                td:dir(rtl) {
+                    text-align: right;
+                }
 
                 td:last-child {
                     border-bottom: 0;
diff --git a/components/table/src/stacked-table/stacked-table.stories.js b/components/table/src/stacked-table/stacked-table.stories.js
index 0170e52311..c65dba05f6 100644
--- a/components/table/src/stacked-table/stacked-table.stories.js
+++ b/components/table/src/stacked-table/stacked-table.stories.js
@@ -455,3 +455,9 @@ export const LargerTable = (args) => (
         </StackedTableFoot>
     </StackedTable>
 )
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Default {...args} />
+    </div>
+)
diff --git a/components/table/src/table/table-cell-head.js b/components/table/src/table/table-cell-head.js
index 5450cbeb1a..3dd0986875 100644
--- a/components/table/src/table/table-cell-head.js
+++ b/components/table/src/table/table-cell-head.js
@@ -12,6 +12,10 @@ const tableCellHeadStyles = css`
         height: 45px;
     }
 
+    th:dir(rtl) {
+        text-align: right;
+    }
+
     .dense {
         padding: 9px 12px;
         height: 36px;
diff --git a/components/table/src/table/table-cell.js b/components/table/src/table/table-cell.js
index d54fe0867e..8de551e205 100644
--- a/components/table/src/table/table-cell.js
+++ b/components/table/src/table/table-cell.js
@@ -12,6 +12,10 @@ const tableCellStyles = css`
         height: 45px;
     }
 
+    td:dir(rtl) {
+        text-align: right;
+    }
+
     .dense {
         padding: 9px 12px;
         height: 36px;
diff --git a/components/table/src/table/table.stories.js b/components/table/src/table/table.stories.js
index f81f1039cc..ae529d91a0 100644
--- a/components/table/src/table/table.stories.js
+++ b/components/table/src/table/table.stories.js
@@ -594,3 +594,131 @@ export const CustomAlternatingBgColor = () => (
         </TableFoot>
     </Table>
 )
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Table {...args}>
+            <TableHead>
+                <TableRowHead>
+                    <TableCellHead>First name</TableCellHead>
+                    <TableCellHead>Last name</TableCellHead>
+                    <TableCellHead>Incident date</TableCellHead>
+                    <TableCellHead>Last updated</TableCellHead>
+                    <TableCellHead>Age</TableCellHead>
+                    <TableCellHead>Registering unit</TableCellHead>
+                    <TableCellHead>Assigned user</TableCellHead>
+                    <TableCellHead>Status</TableCellHead>
+                </TableRowHead>
+            </TableHead>
+            <TableBody>
+                <TableRow>
+                    <TableCell>Onyekachukwu</TableCell>
+                    <TableCell>Kariuki</TableCell>
+                    <TableCell>02/06/2007</TableCell>
+                    <TableCell>05/25/1972</TableCell>
+                    <TableCell>66</TableCell>
+                    <TableCell>Jawi</TableCell>
+                    <TableCell>Sofie Hubert</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Kwasi</TableCell>
+                    <TableCell>Okafor</TableCell>
+                    <TableCell>08/11/2010</TableCell>
+                    <TableCell>02/26/1991</TableCell>
+                    <TableCell>38</TableCell>
+                    <TableCell>Mokassie MCHP</TableCell>
+                    <TableCell>Dashonte Clarke</TableCell>
+                    <TableCell>Complete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Siyabonga</TableCell>
+                    <TableCell>Abiodun</TableCell>
+                    <TableCell>07/21/1981</TableCell>
+                    <TableCell>02/06/2007</TableCell>
+                    <TableCell>98</TableCell>
+                    <TableCell>Bathurst MCHP</TableCell>
+                    <TableCell>Unassigned</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Chiyembekezo</TableCell>
+                    <TableCell>Okeke</TableCell>
+                    <TableCell>01/23/1982</TableCell>
+                    <TableCell>07/15/2003</TableCell>
+                    <TableCell>2</TableCell>
+                    <TableCell>Mayolla MCHP</TableCell>
+                    <TableCell>Wan Gengxin</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Mtendere</TableCell>
+                    <TableCell>Afolayan</TableCell>
+                    <TableCell>08/12/1994</TableCell>
+                    <TableCell>05/12/1972</TableCell>
+                    <TableCell>37</TableCell>
+                    <TableCell>Gbangadu MCHP</TableCell>
+                    <TableCell>Gvozden Boskovsky</TableCell>
+                    <TableCell>Complete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Inyene</TableCell>
+                    <TableCell>Okonkwo</TableCell>
+                    <TableCell>04/01/1971</TableCell>
+                    <TableCell>03/16/2000</TableCell>
+                    <TableCell>70</TableCell>
+                    <TableCell>Kunike Barina</TableCell>
+                    <TableCell>Oscar de la Cavallería</TableCell>
+                    <TableCell>Complete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Amaka</TableCell>
+                    <TableCell>Pretorius</TableCell>
+                    <TableCell>01/25/1996</TableCell>
+                    <TableCell>09/15/1986</TableCell>
+                    <TableCell>32</TableCell>
+                    <TableCell>Bargbo</TableCell>
+                    <TableCell>Alberto Raya</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Meti</TableCell>
+                    <TableCell>Abiodun</TableCell>
+                    <TableCell>10/24/2010</TableCell>
+                    <TableCell>07/26/1989</TableCell>
+                    <TableCell>8</TableCell>
+                    <TableCell>Majihun MCHP</TableCell>
+                    <TableCell>Unassigned</TableCell>
+                    <TableCell>Complete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Eshe</TableCell>
+                    <TableCell>Okeke</TableCell>
+                    <TableCell>01/31/1995</TableCell>
+                    <TableCell>01/31/1995</TableCell>
+                    <TableCell>63</TableCell>
+                    <TableCell>Mambiama CHP</TableCell>
+                    <TableCell>Shadrias Pearson</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell>Obi</TableCell>
+                    <TableCell>Okafor</TableCell>
+                    <TableCell>06/07/1990</TableCell>
+                    <TableCell>01/03/2006</TableCell>
+                    <TableCell>28</TableCell>
+                    <TableCell>Dalakuru CHP</TableCell>
+                    <TableCell>Anatoliy Shcherbatykh</TableCell>
+                    <TableCell>Incomplete</TableCell>
+                </TableRow>
+            </TableBody>
+            <TableFoot>
+                <TableRow>
+                    <TableCell colSpan="8">
+                        <TableFooterButton />
+                    </TableCell>
+                </TableRow>
+            </TableFoot>
+        </Table>
+    </div>
+)
diff --git a/components/tag/package.json b/components/tag/package.json
index 884b31065b..422d7ccfe5 100644
--- a/components/tag/package.json
+++ b/components/tag/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tag",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Tag",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/tag/src/tag-icon.js b/components/tag/src/tag-icon.js
index c4deaa80fd..3be1487866 100644
--- a/components/tag/src/tag-icon.js
+++ b/components/tag/src/tag-icon.js
@@ -7,7 +7,7 @@ export const TagIcon = ({ children, dataTest }) => (
         <style jsx>{`
             display: flex;
             align-items: center;
-            margin-right: 4px;
+            margin-inline-end: 4px;
             max-height: 16px;
             max-width: 16px;
         `}</style>
diff --git a/components/tag/src/tag.stories.js b/components/tag/src/tag.stories.js
index 93cf9ed73d..d5eb89e75f 100644
--- a/components/tag/src/tag.stories.js
+++ b/components/tag/src/tag.stories.js
@@ -103,3 +103,10 @@ WithClippedTextAndMaxWidth.args = {
     children: 'I am long text',
     maxWidth: '50px',
 }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
+RTL.args = { icon: <ExampleIcon /> }
diff --git a/components/text-area/package.json b/components/text-area/package.json
index ac395c4c5c..f46e6c50e1 100644
--- a/components/text-area/package.json
+++ b/components/text-area/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/text-area",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI TextArea",
     "repository": {
         "type": "git",
@@ -33,12 +33,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/status-icon": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/status-icon": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/text-area/src/text-area/text-area.stories.js b/components/text-area/src/text-area/text-area.stories.js
index d73d5f55e4..ee9acc7589 100644
--- a/components/text-area/src/text-area/text-area.stories.js
+++ b/components/text-area/src/text-area/text-area.stories.js
@@ -209,3 +209,11 @@ export const Autogrow = (args) => (
         />
     </>
 )
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Template {...args} />
+    </div>
+)
+RTL.args = { valid: true, value: 'This RTL text is valid' }
+RTL.storyName = 'RTL: Valid'
diff --git a/components/tooltip/package.json b/components/tooltip/package.json
index 110e8ff041..9cd100502a 100644
--- a/components/tooltip/package.json
+++ b/components/tooltip/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tooltip",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Tooltip",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/popper": "9.3.0",
-        "@dhis2-ui/portal": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/popper": "9.4.0-alpha.2",
+        "@dhis2-ui/portal": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/tooltip/src/tooltip.stories.js b/components/tooltip/src/tooltip.stories.js
index 706446b731..2cdfca7c55 100644
--- a/components/tooltip/src/tooltip.stories.js
+++ b/components/tooltip/src/tooltip.stories.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Tooltip } from './tooltip.js'
 
 const subtitle = 'Displayed when a user hovers over the element'
@@ -186,3 +186,18 @@ export const HidesWhenOutOfFrame = (args) => (
         <p>{"I'm an extra paragraph"}</p>
     </div>
 )
+
+export const RTLLeft = (args) => {
+    useEffect(() => {
+        document.documentElement.setAttribute('dir', 'rtl')
+        return () => {
+            document.documentElement.setAttribute('dir', 'ltr')
+        }
+    }, [])
+    return (
+        <div dir="rtl">
+            <Template {...args} />
+        </div>
+    )
+}
+RTLLeft.args = { placement: 'left' }
diff --git a/components/transfer/package.json b/components/transfer/package.json
index 133738cbbe..aca22e7170 100644
--- a/components/transfer/package.json
+++ b/components/transfer/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/transfer",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Transfer",
     "repository": {
         "type": "git",
@@ -33,12 +33,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/field": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/intersection-detector": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/field": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/intersection-detector": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/components/transfer/src/end-intersection-detector.js b/components/transfer/src/end-intersection-detector.js
index 088d4dfed7..b58fcc4a16 100644
--- a/components/transfer/src/end-intersection-detector.js
+++ b/components/transfer/src/end-intersection-detector.js
@@ -20,7 +20,7 @@ export const EndIntersectionDetector = ({
                 position: absolute;
                 z-index: -1;
                 bottom: 0;
-                left: 0;
+                inset-inline-start: 0;
             }
         `}</style>
     </div>
diff --git a/components/transfer/src/icons.js b/components/transfer/src/icons.js
index 4f86ac2274..ddbda732c4 100644
--- a/components/transfer/src/icons.js
+++ b/components/transfer/src/icons.js
@@ -7,31 +7,35 @@ const centerButtonStyles = css`
     svg {
         min-width: 20px;
     }
+    div.centerButton:dir(rtl) {
+        transform: rotate(180deg) translateX(4px);
+    }
 `
 
 export const IconAddAll = ({ dataTest, disabled }) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-        fill={disabled ? theme.disabled : '#404B5A'}
-    >
-        <g fillRule="evenodd">
-            <polygon
-                fillRule="nonzero"
-                points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
-            />
-
-            <polygon
-                fillRule="nonzero"
-                points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
-            />
-        </g>
-
+    <div className="centerButton">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+            fill={disabled ? theme.disabled : '#404B5A'}
+        >
+            <g fillRule="evenodd">
+                <polygon
+                    fillRule="nonzero"
+                    points="6 2 4.94 3.06 9.13 7.25 0 7.25 0 8.75 9.13 8.75 4.94 12.94 6 14 12 8"
+                />
+
+                <polygon
+                    fillRule="nonzero"
+                    points="10 2 8.94 3.06 13.13 7.25 13.9 8 13.13 8.75 8.94 12.94 10 14 16 8"
+                />
+            </g>
+        </svg>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </div>
 )
 
 IconAddAll.propTypes = {
@@ -40,18 +44,19 @@ IconAddAll.propTypes = {
 }
 
 export const IconAddIndividual = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-    >
-        <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
-
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : '#404B5A'}
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+        >
+            <polygon points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8" />
+        </svg>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </div>
 )
 
 IconAddIndividual.propTypes = {
@@ -60,30 +65,31 @@ IconAddIndividual.propTypes = {
 }
 
 export const IconRemoveAll = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        width="16px"
-        height="16px"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <g fillRule="evenodd">
-            <polygon
-                fillRule="nonzero"
-                points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
-                transform="matrix(-1 0 0 1 20 0)"
-            />
-
-            <polygon
-                fillRule="nonzero"
-                points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
-                transform="matrix(-1 0 0 1 7.06 0)"
-            />
-        </g>
-
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : '#404B5A'}
+            width="16px"
+            height="16px"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g fillRule="evenodd">
+                <polygon
+                    fillRule="nonzero"
+                    points="10 2 8.94 3.06 13.13 7.25 4 7.25 4 8.75 13.13 8.75 8.94 12.94 10 14 16 8"
+                    transform="matrix(-1 0 0 1 20 0)"
+                />
+
+                <polygon
+                    fillRule="nonzero"
+                    points="1.06 2 0 3.06 4.19 7.25 4.96 8 4.19 8.75 0 12.94 1.06 14 7.06 8"
+                    transform="matrix(-1 0 0 1 7.06 0)"
+                />
+            </g>
+        </svg>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </div>
 )
 
 IconRemoveAll.propTypes = {
@@ -92,21 +98,22 @@ IconRemoveAll.propTypes = {
 }
 
 export const IconRemoveIndividual = ({ dataTest, disabled }) => (
-    <svg
-        fill={disabled ? theme.disabled : '#404B5A'}
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        data-test={dataTest}
-    >
-        <polygon
-            points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
-            transform="matrix(-1 0 0 1 16 0)"
-        />
-
+    <div className="centerButton">
+        <svg
+            fill={disabled ? theme.disabled : '#404B5A'}
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            data-test={dataTest}
+        >
+            <polygon
+                points="8 2 6.94 3.06 11.13 7.25 2 7.25 2 8.75 11.13 8.75 6.94 12.94 8 14 14 8"
+                transform="matrix(-1 0 0 1 16 0)"
+            />
+        </svg>
         <style jsx>{centerButtonStyles}</style>
-    </svg>
+    </div>
 )
 
 IconRemoveIndividual.propTypes = {
diff --git a/components/transfer/src/options-container.js b/components/transfer/src/options-container.js
index 78f2e8903e..ce3c60a55e 100644
--- a/components/transfer/src/options-container.js
+++ b/components/transfer/src/options-container.js
@@ -88,7 +88,7 @@ export const OptionsContainer = ({
                     position: absolute;
                     z-index: 2;
                     top: 0;
-                    left: 0;
+                    inset-inline-start: 0;
                 }
 
                 .content-container {
diff --git a/components/transfer/src/reordering-actions.js b/components/transfer/src/reordering-actions.js
index 72a1249523..ace584c039 100644
--- a/components/transfer/src/reordering-actions.js
+++ b/components/transfer/src/reordering-actions.js
@@ -50,7 +50,7 @@ export const ReorderingActions = ({
             }
 
             div > :global(button):first-child {
-                margin-left: ${spacers.dp8};
+                margin-inline-start: ${spacers.dp8};
             }
         `}</style>
     </div>
diff --git a/components/transfer/src/transfer.stories.js b/components/transfer/src/transfer.stories.js
index 4bef7c8eea..cb9bb5e42a 100644
--- a/components/transfer/src/transfer.stories.js
+++ b/components/transfer/src/transfer.stories.js
@@ -556,3 +556,10 @@ LoadingPicked.args = {
     options: options.slice(0, 3),
     initiallySelected: options.slice(0, 2).map(({ value }) => value),
 }
+
+export const RTL = (args) => (
+    <div dir="rtl">
+        <Multiple {...args} />
+    </div>
+)
+RTL.args = { options: options.slice(0, 3), enableOrderChange: true }
diff --git a/components/user-avatar/package.json b/components/user-avatar/package.json
index 72c98eff59..52ffd2b223 100644
--- a/components/user-avatar/package.json
+++ b/components/user-avatar/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/user-avatar",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI User Avatar",
     "repository": {
         "type": "git",
@@ -34,7 +34,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
diff --git a/constants/package.json b/constants/package.json
index 69734cde93..7617611ee9 100644
--- a/constants/package.json
+++ b/constants/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-constants",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "Constants used in the UI libs",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
diff --git a/docs/package.json b/docs/package.json
index 69dd28e605..4efb8674b9 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ui-docusaurus",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "private": true,
     "description": "UI Docusaurus",
     "repository": {
diff --git a/icons/package.json b/icons/package.json
index c4d221c81f..8f91d28d77 100644
--- a/icons/package.json
+++ b/icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-icons",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "Icons used in the UI libs",
     "main": "./build/cjs/react/index.js",
     "module": "./build/es/react/index.js",
diff --git a/package.json b/package.json
index 293260ab8e..5b9f9c4460 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/ui-root",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/dhis2/ui.git"
diff --git a/storybook/package.json b/storybook/package.json
index 705d731602..2d36c8c6f3 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ui-storybook",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI Storybook",
     "repository": {
         "type": "git",
@@ -23,8 +23,8 @@
         "@babel/plugin-proposal-class-properties": "^7.13.0",
         "@babel/plugin-proposal-private-methods": "^7.13.0",
         "@babel/plugin-proposal-private-property-in-object": "^7.14.0",
-        "@dhis2-ui/css": "9.3.0",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2-ui/css": "9.4.0-alpha.2",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
         "@fontsource/roboto": "^4.5.0",
         "@storybook/addon-a11y": "^6.3.7",
         "@storybook/addon-console": "^1.2.3",