diff --git a/.stylelintrc.js b/.stylelintrc.js
new file mode 100644
index 0000000000..913c9635ee
--- /dev/null
+++ b/.stylelintrc.js
@@ -0,0 +1,13 @@
+const { config } = require('@dhis2/cli-style')
+
+module.exports = {
+    extends: [config.stylelint],
+    rules: {
+        'csstools/use-logical': [
+            true,
+            {
+                severity: 'error',
+            },
+        ],
+    },
+}
diff --git a/d2.config.js b/d2.config.js
index 1f003e36b3..f256c28edc 100644
--- a/d2.config.js
+++ b/d2.config.js
@@ -7,6 +7,8 @@ const config = {
 
     minDHIS2Version: '2.40',
 
+    direction: 'auto',
+
     pwa: {
         enabled: true,
         caching: {
diff --git a/package.json b/package.json
index fab13efb24..3e60552c44 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
         "cy:run": "start-server-and-test 'yarn start:nobrowser' http://localhost:3000 'yarn cypress run --browser chrome headless --env networkMode=live'"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^10.3.9",
-        "@dhis2/cli-style": "^10.5.1",
+        "@dhis2/cli-app-scripts": "^11.3.0",
+        "@dhis2/cli-style": "^10.7.3",
         "@dhis2/cypress-commands": "^10.0.3",
         "@dhis2/cypress-plugins": "^10.0.2",
         "@reportportal/agent-js-cypress": "git+https://github.com/dhis2/agent-js-cypress.git#develop",
@@ -44,7 +44,7 @@
     },
     "dependencies": {
         "@dhis2/analytics": "^26.8.1",
-        "@dhis2/app-runtime": "^3.7.0",
+        "@dhis2/app-runtime": "^3.10.4",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/d2-i18n": "^1.1.0",
diff --git a/src/components/App.css b/src/components/App.css
index 9508d24b08..fd418e559c 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -1,7 +1,7 @@
 /* App */
 
 .data-visualizer-app {
-    height: 100%;
+    block-size: 100%;
     background-color: var(--colors-grey300);
     overflow: hidden;
 }
@@ -34,7 +34,7 @@ body {
 /* Headerbar */
 
 .section-headerbar {
-    height: 48px;
+    block-size: 48px;
 }
 
 /* Main */
@@ -43,14 +43,14 @@ body {
 }
 
 .main-left {
-    min-width: 260px;
+    min-inline-size: 260px;
 }
 
 .main-right {
     flex: 1 1 0%;
-    max-width: 380px;
+    max-inline-size: 380px;
     background-color: var(--colors-grey100);
-    border-left: 1px solid var(--colors-grey400);
+    border-inline-start: 1px solid var(--colors-grey400);
     box-shadow: 1px 0 -2px 0 rgba(0, 0, 0, 0.03);
     overflow-y: auto;
     overflow-x: hidden;
@@ -61,7 +61,7 @@ body {
 .main-center-canvas {
     display: flex;
     justify-content: center;
-    height: 100%;
+    block-size: 100%;
     overflow: hidden;
     position: relative;
 }
diff --git a/src/components/AxesTabs/AxesTabs.js b/src/components/AxesTabs/AxesTabs.js
index 7bd1d21286..dfa622741a 100644
--- a/src/components/AxesTabs/AxesTabs.js
+++ b/src/components/AxesTabs/AxesTabs.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import VerticalTab from '../VerticalTabBar/VerticalTab.js'
 import VerticalTabBar from '../VerticalTabBar/VerticalTabBar.js'
-import { tabSectionTitle } from '../VisualizationOptions/styles/VisualizationOptions.style.js'
+import tabStyles from '../VisualizationOptions/styles/VisualizationOptions.module.css'
 import styles from './styles/AxesTabs.module.css'
 
 const AxesTabs = ({ items, dataTest }) => {
@@ -24,12 +24,11 @@ const AxesTabs = ({ items, dataTest }) => {
                 </VerticalTabBar>
             </div>
             <div className={styles.content}>
-                <span className={tabSectionTitle.className}>
+                <span className={tabStyles.tabSectionTitle}>
                     {items[selectedTabIndex].label}
                 </span>
                 {items[selectedTabIndex].content}
             </div>
-            {tabSectionTitle.styles}
         </>
     )
 }
diff --git a/src/components/AxesTabs/styles/AxesTabs.module.css b/src/components/AxesTabs/styles/AxesTabs.module.css
index c7486512cf..651fd2745f 100644
--- a/src/components/AxesTabs/styles/AxesTabs.module.css
+++ b/src/components/AxesTabs/styles/AxesTabs.module.css
@@ -1,11 +1,10 @@
 .tabs {
-    width: 200px;
+    inline-size: 200px;
     position: absolute;
-    top: 136px; /* modal title + horizontal tab bar height */
-    bottom: 84px; /* modal actions section height */
+    inset-block: 136px 84px; /* modal title + horizontal tab bar height */ /* modal actions section height */
     z-index: 1;
 }
 
 .content {
-    margin-left: 200px;
+    margin-inline-start: 200px;
 }
diff --git a/src/components/DetailsPanel/styles/DetailsPanel.module.css b/src/components/DetailsPanel/styles/DetailsPanel.module.css
index 2106c40f9a..96144e10a8 100644
--- a/src/components/DetailsPanel/styles/DetailsPanel.module.css
+++ b/src/components/DetailsPanel/styles/DetailsPanel.module.css
@@ -1,3 +1,3 @@
 .panel {
-    width: 380px;
+    inline-size: 380px;
 }
diff --git a/src/components/DimensionsPanel/Dialogs/styles/DialogManager.module.css b/src/components/DimensionsPanel/Dialogs/styles/DialogManager.module.css
index 1381c380c3..912063c86c 100644
--- a/src/components/DimensionsPanel/Dialogs/styles/DialogManager.module.css
+++ b/src/components/DimensionsPanel/Dialogs/styles/DialogManager.module.css
@@ -1,3 +1,3 @@
 .tabs {
-    padding-bottom: var(--spacers-dp16);
+    padding-block-end: var(--spacers-dp16);
 }
diff --git a/src/components/DimensionsPanel/styles/DndDimensionList.module.css b/src/components/DimensionsPanel/styles/DndDimensionList.module.css
index 37f4d0b203..d57f26d2b1 100644
--- a/src/components/DimensionsPanel/styles/DndDimensionList.module.css
+++ b/src/components/DimensionsPanel/styles/DndDimensionList.module.css
@@ -1,19 +1,19 @@
 .container {
     position: relative;
     flex: 1 1 0%;
-    min-height: 30vh;
+    min-block-size: 30vh;
 }
 
 .wrapper {
     position: absolute;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     overflow: auto;
-    margin-top: 0px;
+    margin-block-start: 0px;
     padding: var(--spacers-dp8);
     background: var(--colors-white);
-    border-top: 1px solid var(--colors-grey300);
-    border-bottom: 1px solid var(--colors-grey300);
+    border-block-start: 1px solid var(--colors-grey300);
+    border-block-end: 1px solid var(--colors-grey300);
 }
 
 .list {
@@ -28,11 +28,14 @@
     text-transform: uppercase;
     font-size: 11px;
     color: var(--colors-grey600);
-    margin: 0 0 var(--spacers-dp8) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--spacers-dp8);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
     letter-spacing: 0.3px;
     font-weight: 400;
 }
 
 .section:not(:last-child) {
-    margin-bottom: var(--spacers-dp24);
+    margin-block-end: var(--spacers-dp24);
 }
diff --git a/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css b/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css
index 4b4d930f76..1adc0f539a 100644
--- a/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css
+++ b/src/components/DimensionsPanel/styles/DndDimensionsPanel.module.css
@@ -1,15 +1,18 @@
 .container {
-    height: 100%;
+    block-size: 100%;
     display: flex;
     flex-direction: column;
     background-color: var(--colors-grey100);
-    border-right: 1px solid var(--colors-grey400);
+    border-inline-end: 1px solid var(--colors-grey400);
     box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.03);
     padding: 0;
     overflow: hidden;
 }
 
 .filter {
-    padding: var(--spacers-dp8) var(--spacers-dp8) 0 var(--spacers-dp8);
+    padding-block-start: var(--spacers-dp8);
+    padding-block-end: 0;
+    padding-inline-start: var(--spacers-dp8);
+    padding-inline-end: var(--spacers-dp8);
     background: var(--colors-white);
 }
diff --git a/src/components/DownloadMenu/ModalDownloadDropdown.module.css b/src/components/DownloadMenu/ModalDownloadDropdown.module.css
index 55c5ecaf22..3e39ed3d78 100644
--- a/src/components/DownloadMenu/ModalDownloadDropdown.module.css
+++ b/src/components/DownloadMenu/ModalDownloadDropdown.module.css
@@ -1,4 +1,4 @@
 .container {
-    margin-top: var(--spacers-dp12);
-    margin-bottom: var(--spacers-dp16);
+    margin-block-start: var(--spacers-dp12);
+    margin-block-end: var(--spacers-dp16);
 }
diff --git a/src/components/IconButton/styles/IconButton.module.css b/src/components/IconButton/styles/IconButton.module.css
index 413b863096..14440db8ab 100644
--- a/src/components/IconButton/styles/IconButton.module.css
+++ b/src/components/IconButton/styles/IconButton.module.css
@@ -10,9 +10,12 @@
     padding: 0;
     vertical-align: middle;
     border-radius: 0;
-    width: 20px;
-    height: 20px;
-    margin: 0px 0px 0px 2px;
+    inline-size: 20px;
+    block-size: 20px;
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    margin-inline-start: 2px;
+    margin-inline-end: 0px;
     color: var(--colors-grey700);
 }
 
diff --git a/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css b/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css
index 2f3ba96073..fff6bf53ff 100644
--- a/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css
+++ b/src/components/Layout/DefaultLayout/styles/DefaultAxis.module.css
@@ -1,10 +1,10 @@
 .content {
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     align-items: flex-start;
     align-content: flex-start;
     flex-wrap: wrap;
-    min-height: 26px;
+    min-block-size: 26px;
 }
 
 .content > div {
diff --git a/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js b/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
index a3c55e8e86..73b8dce7ae 100644
--- a/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
+++ b/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
@@ -11,7 +11,7 @@ export default {
         padding: layoutStyle.AXIS_PADDING,
     },
     axisContainerLeft: {
-        borderLeftWidth: 0,
+        borderInlineStartWidth: 0,
     },
     label: {
         minWidth: 55,
diff --git a/src/components/Layout/ScatterLayout/styles/ScatterAxis.style.js b/src/components/Layout/ScatterLayout/styles/ScatterAxis.style.js
index 27d7cb3ca1..75f705d075 100644
--- a/src/components/Layout/ScatterLayout/styles/ScatterAxis.style.js
+++ b/src/components/Layout/ScatterLayout/styles/ScatterAxis.style.js
@@ -12,7 +12,7 @@ export default {
         padding: layoutStyle.AXIS_PADDING,
     },
     axisContainerLeft: {
-        borderLeftWidth: 0,
+        borderInlineStartWidth: 0,
     },
     label: {
         minWidth: 55,
diff --git a/src/components/Layout/styles/Chip.module.css b/src/components/Layout/styles/Chip.module.css
index aa0443fbc1..c6e200bf5e 100644
--- a/src/components/Layout/styles/Chip.module.css
+++ b/src/components/Layout/styles/Chip.module.css
@@ -1,5 +1,5 @@
 .chip {
-    max-width: 400px;
+    max-inline-size: 400px;
     display: flex;
     align-items: center;
     background-color: var(--colors-teal100);
@@ -40,27 +40,39 @@
 }
 
 .fixedDimensionIcon {
-    padding: 0 4px;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 4px;
+    padding-inline-end: 4px;
 }
 
 .leftIconWrapper {
-    padding: 0 4px;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 4px;
+    padding-inline-end: 4px;
     display: flex;
     align-items: center;
 }
 
 .warningIconWrapper {
-    padding-left: 2px;
-    height: 20px;
+    padding-inline-start: 2px;
+    block-size: 20px;
     display: flex;
     align-items: center;
 }
 
 .lockIconWrapper {
     background: #cbe7e5;
-    height: 20px;
-    padding: 0 2px 0 3px;
-    margin: 0 0 0 2px;
+    block-size: 20px;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 3px;
+    padding-inline-end: 2px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 2px;
+    margin-inline-end: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -89,19 +101,22 @@
     overflow: hidden;
     text-overflow: ellipsis;
     display: flex;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
+    border-start-end-radius: 0px;
+    border-end-end-radius: 0px;
     align-items: center;
-    min-height: 20px;
-    margin: 0 2px 0 0;
+    min-block-size: 20px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 2px;
 }
 
 .chipRight {
-    padding-left: 0px;
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
+    padding-inline-start: 0px;
+    border-start-start-radius: 0px;
+    border-end-start-radius: 0px;
     display: flex;
-    height: 20px;
+    block-size: 20px;
 }
 
 .chipRight + .lockIconWrapper {
@@ -113,10 +128,13 @@
     font-size: 11px;
     background: #c5e4e3;
     border-radius: 2px;
-    margin-left: 4px;
-    min-width: 12px;
+    margin-inline-start: 4px;
+    min-inline-size: 12px;
     text-align: center;
-    padding: 2px 2px 1px 2px;
+    padding-block-start: 2px;
+    padding-block-end: 1px;
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
diff --git a/src/components/Layout/styles/Tooltip.style.js b/src/components/Layout/styles/Tooltip.style.js
index 0118849244..862c954d99 100644
--- a/src/components/Layout/styles/Tooltip.style.js
+++ b/src/components/Layout/styles/Tooltip.style.js
@@ -32,6 +32,6 @@ export const styles = {
     },
     label: {
         whiteSpace: 'normal',
-        marginLeft: '6px',
+        marginInlineStart: '6px',
     },
 }
diff --git a/src/components/Snackbar/styles/Snackbar.module.css b/src/components/Snackbar/styles/Snackbar.module.css
index b3036dffa8..d43abf9bec 100644
--- a/src/components/Snackbar/styles/Snackbar.module.css
+++ b/src/components/Snackbar/styles/Snackbar.module.css
@@ -1,6 +1,6 @@
 .container {
     position: fixed;
-    bottom: 0;
-    left: 50%;
+    inset-block-end: 0;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
 }
diff --git a/src/components/TitleBar/styles/TitleBar.style.js b/src/components/TitleBar/styles/TitleBar.style.js
index 8fb6d4c2df..a6fe0af69e 100644
--- a/src/components/TitleBar/styles/TitleBar.style.js
+++ b/src/components/TitleBar/styles/TitleBar.style.js
@@ -17,7 +17,7 @@ export default {
         fontSize: '14px',
     },
     suffix: {
-        paddingLeft: '4px',
+        paddingInlineStart: '4px',
     },
     titleUnsaved: {
         color: colors.grey500,
diff --git a/src/components/VerticalTabBar/styles/VerticalTab.module.css b/src/components/VerticalTabBar/styles/VerticalTab.module.css
index c20065f2c3..b1559e597e 100644
--- a/src/components/VerticalTabBar/styles/VerticalTab.module.css
+++ b/src/components/VerticalTabBar/styles/VerticalTab.module.css
@@ -10,7 +10,7 @@
 .selected,
 .selected:hover {
     background: var(--colors-blue050);
-    border-right: 4px solid var(--colors-blue700);
+    border-inline-end: 4px solid var(--colors-blue700);
     color: var(--colors-blue700);
-    margin-right: -1px;
+    margin-inline-end: -1px;
 }
diff --git a/src/components/VerticalTabBar/styles/VerticalTabBar.module.css b/src/components/VerticalTabBar/styles/VerticalTabBar.module.css
index 2d360c238f..189e7d33bc 100644
--- a/src/components/VerticalTabBar/styles/VerticalTabBar.module.css
+++ b/src/components/VerticalTabBar/styles/VerticalTabBar.module.css
@@ -1,6 +1,6 @@
 .container {
-    height: 100%;
-    border-right: 1px solid var(--colors-grey400);
-    margin-right: var(--spacers-dp24);
+    block-size: 100%;
+    border-inline-end: 1px solid var(--colors-grey400);
+    margin-inline-end: var(--spacers-dp24);
     background: var(--colors-white);
 }
diff --git a/src/components/Visualization/styles/StartScreen.module.css b/src/components/Visualization/styles/StartScreen.module.css
index 7b4f7331bc..180e63b2b1 100644
--- a/src/components/Visualization/styles/StartScreen.module.css
+++ b/src/components/Visualization/styles/StartScreen.module.css
@@ -1,12 +1,15 @@
 .outer {
     display: flex;
     justify-content: center;
-    height: 100%;
+    block-size: 100%;
     flex-grow: 1;
 }
 .inner {
-    padding: var(--spacers-dp16) var(--spacers-dp24);
-    max-width: 600px;
+    padding-block-start: var(--spacers-dp16);
+    padding-block-end: var(--spacers-dp16);
+    padding-inline-start: var(--spacers-dp24);
+    padding-inline-end: var(--spacers-dp24);
+    max-inline-size: 600px;
     box-sizing: border-box;
     color: var(--colors-grey900);
     position: relative;
@@ -20,9 +23,12 @@
     text-align: center;
 }
 .errorIcon {
-    width: 136px;
-    height: 136px;
-    margin: 0 auto var(--spacers-dp24);
+    inline-size: 136px;
+    block-size: 136px;
+    margin-block-start: 0;
+    margin-block-end: var(--spacers-dp24);
+    margin-inline-start: auto;
+    margin-inline-end: auto;
 }
 .errorTitle {
     font-weight: 500;
@@ -30,29 +36,35 @@
     color: var(--colors-grey800);
     letter-spacing: 0.15px;
     line-height: 24px;
-    width: 360px;
-    margin: 0 auto var(--spacers-dp12);
+    inline-size: 360px;
+    margin-block-start: 0;
+    margin-block-end: var(--spacers-dp12);
+    margin-inline-start: auto;
+    margin-inline-end: auto;
 }
 .errorDescription {
     font-weight: 400;
     font-size: 14px;
     color: var(--colors-grey700);
     line-height: 19px;
-    width: 360px;
-    margin: 0 auto;
+    inline-size: 360px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
 }
 .title {
     font-weight: 500;
     font-size: 17px;
-    margin-top: 0;
+    margin-block-start: 0;
     line-height: 22px;
     color: var(--colors-grey800);
 }
 .section {
-    text-align: left;
+    text-align: start;
     background: var(--colors-white);
     padding: var(--spacers-dp16);
-    margin-bottom: var(--spacers-dp24);
+    margin-block-end: var(--spacers-dp24);
     border-radius: 5px;
     border: 1px solid var(--colors-grey400);
 }
@@ -61,20 +73,32 @@
     letter-spacing: 0.1px;
     list-style: circle;
     list-style-position: outside;
-    margin: 0 0 0 var(--spacers-dp12);
-    padding: 0 0 0 var(--spacers-dp12);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--spacers-dp12);
+    margin-inline-end: 0;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: var(--spacers-dp12);
+    padding-inline-end: 0;
 }
 .guideItem {
     font-size: 14px;
     line-height: 18px;
     letter-spacing: 0.1px;
-    margin-bottom: var(--spacers-dp12);
+    margin-block-end: var(--spacers-dp12);
 }
 .visualization {
     display: flex;
     align-items: center;
-    margin: 0 0 var(--spacers-dp4) 0;
-    padding: var(--spacers-dp4) 0 var(--spacers-dp4) var(--spacers-dp12);
+    margin-block-start: 0;
+    margin-block-end: var(--spacers-dp4);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-block-start: var(--spacers-dp4);
+    padding-block-end: var(--spacers-dp4);
+    padding-inline-start: var(--spacers-dp12);
+    padding-inline-end: 0;
     letter-spacing: 0.1px;
     line-height: 16px;
     cursor: pointer;
@@ -86,12 +110,12 @@
     background-color: var(--colors-grey100);
 }
 .visIcon {
-    height: 16px;
+    block-size: 16px;
     display: flex;
     align-items: center;
 }
 .visIcon svg {
-    height: 16px;
-    width: 16px;
-    margin-right: var(--spacers-dp8);
+    block-size: 16px;
+    inline-size: 16px;
+    margin-inline-end: var(--spacers-dp8);
 }
diff --git a/src/components/Visualization/styles/Visualization.style.js b/src/components/Visualization/styles/Visualization.style.js
index 242ee71dd8..9ab33089c3 100644
--- a/src/components/Visualization/styles/Visualization.style.js
+++ b/src/components/Visualization/styles/Visualization.style.js
@@ -9,8 +9,8 @@ export default {
         position: 'absolute',
         height: '100%',
         width: '100%',
-        left: 0,
-        top: 0,
+        insetInlineStart: 0,
+        insetBlockStart: 0,
         zIndex: 100,
         background: '#ffffffab',
     },
diff --git a/src/components/VisualizationOptions/InfoText.js b/src/components/VisualizationOptions/InfoText.js
index 5debd6b34b..42af17114f 100644
--- a/src/components/VisualizationOptions/InfoText.js
+++ b/src/components/VisualizationOptions/InfoText.js
@@ -1,16 +1,12 @@
 import { IconInfo16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import {
-    tabSectionOption,
-    tabSectionOptionText,
-    tabSectionOptionIcon,
-} from './styles/VisualizationOptions.style.js'
+import styles from './styles/VisualizationOptions.module.css'
 
 export const InfoText = ({ text }) => (
-    <div className={tabSectionOption.className}>
-        <p className={tabSectionOptionText.className}>
-            <span className={tabSectionOptionIcon.className}>
+    <div className={styles.tabSectionOption}>
+        <p className={styles.tabSectionOptionText}>
+            <span className={styles.tabSectionOptionIcon}>
                 <IconInfo16 />
             </span>
             {text}
diff --git a/src/components/VisualizationOptions/NoticeBox.js b/src/components/VisualizationOptions/NoticeBox.js
index 3402afcb38..9bb9108e39 100644
--- a/src/components/VisualizationOptions/NoticeBox.js
+++ b/src/components/VisualizationOptions/NoticeBox.js
@@ -1,10 +1,10 @@
 import { NoticeBox as UiNoticeBox } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { tabSectionOption } from './styles/VisualizationOptions.style.js'
+import styles from './styles/VisualizationOptions.module.css'
 
 const NoticeBox = ({ title, text, warning = false, error = false }) => (
-    <div className={tabSectionOption.className}>
+    <div className={styles.tabSectionOption}>
         <UiNoticeBox title={title} warning={warning} error={error}>
             {text}
         </UiNoticeBox>
diff --git a/src/components/VisualizationOptions/Options/AxisLabels.js b/src/components/VisualizationOptions/Options/AxisLabels.js
index 0e1c0b4c27..ed75551fec 100644
--- a/src/components/VisualizationOptions/Options/AxisLabels.js
+++ b/src/components/VisualizationOptions/Options/AxisLabels.js
@@ -3,11 +3,11 @@ import i18n from '@dhis2/d2-i18n'
 import { Label } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { tabSectionOption } from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import TextStyle from './TextStyle.js'
 
 const AxisLabels = ({ disabled, axisId }) => (
-    <div className={tabSectionOption.className}>
+    <div className={styles.tabSectionOption}>
         <Label>{i18n.t('Labels')}</Label>
         <TextStyle
             fontStyleKey={FONT_STYLE_AXIS_LABELS}
diff --git a/src/components/VisualizationOptions/Options/AxisRange.js b/src/components/VisualizationOptions/Options/AxisRange.js
index 7e5fd66303..8f327d69df 100644
--- a/src/components/VisualizationOptions/Options/AxisRange.js
+++ b/src/components/VisualizationOptions/Options/AxisRange.js
@@ -3,17 +3,14 @@ import { Label, Help } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import styles from '../styles/AxisRange.module.css'
-import {
-    tabSectionOption,
-    tabSectionOptionComplexInline,
-} from '../styles/VisualizationOptions.style.js'
+import optionsStyles from '../styles/VisualizationOptions.module.css'
 import AxisMaxValue from './AxisMaxValue.js'
 import AxisMinValue from './AxisMinValue.js'
 
 const AxisRange = ({ disabled, axisId }) => (
-    <div className={tabSectionOption.className}>
+    <div className={optionsStyles.tabSectionOption}>
         <Label className={styles.label}>{i18n.t('Axis range')}</Label>
-        <div className={tabSectionOptionComplexInline.className}>
+        <div className={optionsStyles.tabSectionOptionComplexInline}>
             <AxisMinValue disabled={disabled} axisId={axisId} />
             <div style={{ display: 'flex', alignItems: 'center' }}>
                 {'\u00A0\u2013\u00A0'}
diff --git a/src/components/VisualizationOptions/Options/AxisTitle.js b/src/components/VisualizationOptions/Options/AxisTitle.js
index 4b93794c9f..5067e5a633 100644
--- a/src/components/VisualizationOptions/Options/AxisTitle.js
+++ b/src/components/VisualizationOptions/Options/AxisTitle.js
@@ -13,10 +13,7 @@ import {
     OPTION_AXIS_TITLE_TEXT_MODE,
 } from '../../../modules/options.js'
 import { sGetUiOption } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionOptionToggleable,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import TextStyle from './TextStyle.js'
 
 export const TITLE_AUTO = 'AUTO'
@@ -70,7 +67,7 @@ const AxisTitle = ({
 
     return (
         <div
-            className={tabSectionOption.className}
+            className={styles.tabSectionOption}
             data-test={'option-chart-title'}
         >
             <Label>{i18n.t('Axis title')}</Label>
@@ -100,7 +97,7 @@ const AxisTitle = ({
                 ))}
             </Field>
             {textMode === TITLE_CUSTOM ? (
-                <div className={tabSectionOptionToggleable.className}>
+                <div className={styles.tabSectionOptionToggleable}>
                     <InputField
                         type={'text'}
                         onChange={({ value }) => onTextChange(value)}
@@ -113,7 +110,7 @@ const AxisTitle = ({
                 </div>
             ) : null}
             {textMode === TITLE_AUTO || textMode === TITLE_CUSTOM ? (
-                <div className={tabSectionOptionToggleable.className}>
+                <div className={styles.tabSectionOptionToggleable}>
                     <TextStyle
                         fontStyleKey={fontStyleKey}
                         dataTest={`${axisId}-axis-title-text-style`}
diff --git a/src/components/VisualizationOptions/Options/CheckboxBaseOption.js b/src/components/VisualizationOptions/Options/CheckboxBaseOption.js
index 4e7ba0e712..e4fa6a547c 100644
--- a/src/components/VisualizationOptions/Options/CheckboxBaseOption.js
+++ b/src/components/VisualizationOptions/Options/CheckboxBaseOption.js
@@ -4,10 +4,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { tSetUiOptionAndDisabledOptions } from '../../../actions/ui.js'
 import { sGetUiOption, sGetUiDisabledOption } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionOptionToggleable,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import TextStyle from './TextStyle.js'
 
 export const UnconnectedCheckboxBaseOption = ({
@@ -21,7 +18,7 @@ export const UnconnectedCheckboxBaseOption = ({
     dataTest,
     disabled,
 }) => (
-    <div className={tabSectionOption.className}>
+    <div className={styles.tabSectionOption}>
         <CheckboxField
             checked={inverted ? !value : value}
             helpText={helpText}
@@ -33,7 +30,7 @@ export const UnconnectedCheckboxBaseOption = ({
             disabled={disabled}
         />
         {((!inverted && value) || (inverted && !value)) && fontStyleKey ? (
-            <div className={tabSectionOptionToggleable.className}>
+            <div className={styles.tabSectionOptionToggleable}>
                 <TextStyle
                     fontStyleKey={fontStyleKey}
                     dataTest={`${dataTest}-text-style`}
diff --git a/src/components/VisualizationOptions/Options/ColorSet.js b/src/components/VisualizationOptions/Options/ColorSet.js
index 12619de73b..47c2604bb6 100644
--- a/src/components/VisualizationOptions/Options/ColorSet.js
+++ b/src/components/VisualizationOptions/Options/ColorSet.js
@@ -16,12 +16,12 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { acSetUiOptions } from '../../../actions/ui.js'
 import { sGetUiOptions } from '../../../reducers/ui.js'
-import { tabSectionOption } from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 
 export const COLOR_SET_OPTION_NAME = 'colorSet'
 
 const ColorSet = ({ value, onChange, disabled }) => (
-    <div className={tabSectionOption.className}>
+    <div className={styles.tabSectionOption}>
         <Field name="colorSet-selector" dense>
             {[
                 [
@@ -90,7 +90,11 @@ ColorSet.propTypes = {
 
 const ColorSetPreview = ({ colorSet, disabled }) => (
     <div
-        style={{ display: 'flex', marginLeft: 4, opacity: disabled ? 0.3 : 1 }}
+        style={{
+            display: 'flex',
+            marginInlineStart: 4,
+            opacity: disabled ? 0.3 : 1,
+        }}
     >
         {colorSet?.patterns &&
             colorSet.patterns.map((pattern, index) => (
diff --git a/src/components/VisualizationOptions/Options/CompletedOnly.js b/src/components/VisualizationOptions/Options/CompletedOnly.js
index 0b61c52cb2..f1835ed542 100644
--- a/src/components/VisualizationOptions/Options/CompletedOnly.js
+++ b/src/components/VisualizationOptions/Options/CompletedOnly.js
@@ -1,11 +1,11 @@
 import i18n from '@dhis2/d2-i18n'
 import { Label } from '@dhis2/ui'
 import React from 'react'
-import { tabSectionOption } from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import { CheckboxBaseOption } from './CheckboxBaseOption.js'
 
 const CompletedOnly = () => (
-    <div className={tabSectionOption.className}>
+    <div className={styles.tabSectionOption}>
         <Label>{i18n.t('Event data')}</Label>
         <CheckboxBaseOption
             label={i18n.t('Only include completed events')}
diff --git a/src/components/VisualizationOptions/Options/ExtremeLines.js b/src/components/VisualizationOptions/Options/ExtremeLines.js
index 1e7143c4aa..4833ae24e9 100644
--- a/src/components/VisualizationOptions/Options/ExtremeLines.js
+++ b/src/components/VisualizationOptions/Options/ExtremeLines.js
@@ -2,10 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Checkbox, Help, InputField } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import {
-    tabSectionOption,
-    tabSectionToggleableSubsection,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 
 const ExtremeLines = ({
     isEnabled,
@@ -14,8 +11,8 @@ const ExtremeLines = ({
     onValueChange,
 }) => (
     <>
-        <div className={tabSectionOption.className}>
-            <div className={tabSectionOption.className}>
+        <div className={styles.tabSectionOption}>
+            <div className={styles.tabSectionOption}>
                 <Checkbox
                     checked={isEnabled}
                     label={i18n.t('Extreme lines')}
@@ -29,8 +26,8 @@ const ExtremeLines = ({
                 </Help>
             </div>
             {isEnabled && (
-                <div className={tabSectionToggleableSubsection.className}>
-                    <div className={tabSectionOption.className}>
+                <div className={styles.tabSectionToggleableSubsection}>
+                    <div className={styles.tabSectionOption}>
                         <InputField
                             type="number"
                             label={i18n.t('Extreme line % detection')}
diff --git a/src/components/VisualizationOptions/Options/HideSubtitle.js b/src/components/VisualizationOptions/Options/HideSubtitle.js
index 688512cb5b..aa1c5cbfd4 100644
--- a/src/components/VisualizationOptions/Options/HideSubtitle.js
+++ b/src/components/VisualizationOptions/Options/HideSubtitle.js
@@ -10,10 +10,7 @@ import { connect } from 'react-redux'
 import { createSelector } from 'reselect'
 import { acSetUiOptions } from '../../../actions/ui.js'
 import { sGetUiOptions, sGetUiType } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionOptionToggleable,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import Subtitle from './Subtitle.js'
 import TextStyle from './TextStyle.js'
 
@@ -45,7 +42,7 @@ class HideSubtitle extends Component {
         const { visualizationType } = this.props
 
         return (
-            <div className={tabSectionOption.className}>
+            <div className={styles.tabSectionOption}>
                 <Label>
                     {visualizationType === VIS_TYPE_PIVOT_TABLE
                         ? i18n.t('Table subtitle')
@@ -75,7 +72,7 @@ class HideSubtitle extends Component {
                     ))}
                 </Field>
                 {value === HIDE_SUBTITLE_CUSTOM ? (
-                    <div className={tabSectionOptionToggleable.className}>
+                    <div className={styles.tabSectionOptionToggleable}>
                         <Subtitle
                             inline
                             dataTest={'option-chart-subtitle-text'}
@@ -84,7 +81,7 @@ class HideSubtitle extends Component {
                 ) : null}
                 {value === HIDE_SUBTITLE_AUTO ||
                 value === HIDE_SUBTITLE_CUSTOM ? (
-                    <div className={tabSectionOptionToggleable.className}>
+                    <div className={styles.tabSectionOptionToggleable}>
                         <TextStyle
                             fontStyleKey={FONT_STYLE_VISUALIZATION_SUBTITLE}
                             dataTest={'option-chart-subtitle-text-style'}
diff --git a/src/components/VisualizationOptions/Options/HideTitle.js b/src/components/VisualizationOptions/Options/HideTitle.js
index d510da61ec..6a6fcb9c84 100644
--- a/src/components/VisualizationOptions/Options/HideTitle.js
+++ b/src/components/VisualizationOptions/Options/HideTitle.js
@@ -7,10 +7,7 @@ import { connect } from 'react-redux'
 import { createSelector } from 'reselect'
 import { acSetUiOptions } from '../../../actions/ui.js'
 import { sGetUiOptions } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionOptionToggleable,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import TextStyle from './TextStyle.js'
 import Title from './Title.js'
 
@@ -42,7 +39,7 @@ class HideTitle extends Component {
 
         return (
             <div
-                className={tabSectionOption.className}
+                className={styles.tabSectionOption}
                 data-test={'option-chart-title'}
             >
                 <Label>{i18n.t('Chart title')}</Label>
@@ -66,12 +63,12 @@ class HideTitle extends Component {
                     ))}
                 </Field>
                 {value === HIDE_TITLE_CUSTOM ? (
-                    <div className={tabSectionOptionToggleable.className}>
+                    <div className={styles.tabSectionOptionToggleable}>
                         <Title inline />
                     </div>
                 ) : null}
                 {value === HIDE_TITLE_AUTO || value === HIDE_TITLE_CUSTOM ? (
-                    <div className={tabSectionOptionToggleable.className}>
+                    <div className={styles.tabSectionOptionToggleable}>
                         <TextStyle
                             fontStyleKey={FONT_STYLE_VISUALIZATION_TITLE}
                             dataTest={'option-chart-title-text-style'}
diff --git a/src/components/VisualizationOptions/Options/Legend.js b/src/components/VisualizationOptions/Options/Legend.js
index 03923b2979..1403fffeb5 100644
--- a/src/components/VisualizationOptions/Options/Legend.js
+++ b/src/components/VisualizationOptions/Options/Legend.js
@@ -16,13 +16,7 @@ import {
     OPTION_LEGEND_SET,
 } from '../../../modules/options.js'
 import { sGetUiOption, sGetUiDisabledOption } from '../../../reducers/ui.js'
-import {
-    tabSectionOptionToggleable,
-    tabSectionOption,
-    tabSectionTitle,
-    tabSectionTitleDisabled,
-    tabSectionTitleMargin,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import LegendDisplayStrategy from './LegendDisplayStrategy.js'
 import LegendDisplayStyle from './LegendDisplayStyle.js'
 import ShowLegendKey from './ShowLegendKey.js'
@@ -74,7 +68,7 @@ const Legend = ({
     }
 
     return (
-        <div className={tabSectionOption.className} data-test="option-legend">
+        <div className={styles.tabSectionOption} data-test="option-legend">
             <Checkbox
                 checked={legendEnabled}
                 disabled={disabled}
@@ -84,17 +78,17 @@ const Legend = ({
                 dense
             />
             {legendEnabled ? (
-                <div className={tabSectionOptionToggleable.className}>
+                <div className={styles.tabSectionOptionToggleable}>
                     {!hideStyleOptions ? (
-                        <div className={tabSectionOption.className}>
+                        <div className={styles.tabSectionOption}>
                             <FieldSet>
                                 <UiCoreLegend>
                                     <span
                                         className={cx(
-                                            tabSectionTitle.className,
-                                            tabSectionTitleMargin.className,
+                                            styles.tabSectionTitle,
+                                            styles.tabSectionTitleMargin,
                                             {
-                                                [tabSectionTitleDisabled.className]:
+                                                [styles.tabSectionTitleDisabled]:
                                                     disabled,
                                             }
                                         )}
@@ -102,27 +96,27 @@ const Legend = ({
                                         {i18n.t('Legend style')}
                                     </span>
                                 </UiCoreLegend>
-                                <div className={tabSectionOption.className}>
+                                <div className={styles.tabSectionOption}>
                                     <LegendDisplayStyle disabled={disabled} />
                                 </div>
                             </FieldSet>
                         </div>
                     ) : null}
-                    <div className={tabSectionOption.className}>
+                    <div className={styles.tabSectionOption}>
                         <FieldSet>
                             <UiCoreLegend>
                                 <span
-                                    className={cx(tabSectionTitle.className, {
-                                        [tabSectionTitleMargin.className]:
+                                    className={cx(styles.tabSectionTitle, {
+                                        [styles.tabSectionTitleMargin]:
                                             hideStyleOptions,
-                                        [tabSectionTitleDisabled.className]:
+                                        [styles.tabSectionTitleDisabled]:
                                             disabled,
                                     })}
                                 >
                                     {i18n.t('Legend type')}
                                 </span>
                             </UiCoreLegend>
-                            <div className={tabSectionOption.className}>
+                            <div className={styles.tabSectionOption}>
                                 <LegendDisplayStrategy disabled={disabled} />
                             </div>
                         </FieldSet>
diff --git a/src/components/VisualizationOptions/Options/LegendDisplayStrategy.js b/src/components/VisualizationOptions/Options/LegendDisplayStrategy.js
index 8f3d16ce0c..0fec0d40f3 100644
--- a/src/components/VisualizationOptions/Options/LegendDisplayStrategy.js
+++ b/src/components/VisualizationOptions/Options/LegendDisplayStrategy.js
@@ -10,7 +10,7 @@ import { connect } from 'react-redux'
 import { acSetUiOption } from '../../../actions/ui.js'
 import { OPTION_LEGEND_DISPLAY_STRATEGY } from '../../../modules/options.js'
 import { sGetUiOption } from '../../../reducers/ui.js'
-import { tabSectionOptionToggleable } from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import LegendSet from './LegendSet.js'
 
 const LegendDisplayStrategy = ({ value, onChange, disabled }) => (
@@ -38,7 +38,7 @@ const LegendDisplayStrategy = ({ value, onChange, disabled }) => (
             />
         </Field>
         {value === LEGEND_DISPLAY_STRATEGY_FIXED ? (
-            <div className={tabSectionOptionToggleable.className}>
+            <div className={styles.tabSectionOptionToggleable}>
                 <LegendSet disabled={disabled} dataTest="fixed-legend-set" />
             </div>
         ) : null}
diff --git a/src/components/VisualizationOptions/Options/MeasureCriteria.js b/src/components/VisualizationOptions/Options/MeasureCriteria.js
index f983007b2d..d030aafce5 100644
--- a/src/components/VisualizationOptions/Options/MeasureCriteria.js
+++ b/src/components/VisualizationOptions/Options/MeasureCriteria.js
@@ -11,11 +11,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { acSetUiOptions } from '../../../actions/ui.js'
 import { sGetUiOptions } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionOptionText,
-    tabSectionOptionComplexInline,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 
 const EQUAL_OPERATOR_ID = 'EQ'
 const GREATER_THAN_OPERATOR_ID = 'GT'
@@ -144,18 +140,16 @@ class MeasureCriteria extends Component {
         const { op1, v1, op2, v2 } = this.state
 
         return (
-            <div className={tabSectionOption.className}>
-                <p className={tabSectionOptionText.className}>
+            <div className={styles.tabSectionOption}>
+                <p className={styles.tabSectionOptionText}>
                     {i18n.t(
                         'You can set a minimum or maximum value. This will apply to the entire visualization, all values outside of the minimum/maximum range will not be displayed'
                     )}
                 </p>
-                <div className={tabSectionOptionComplexInline.className}>
+                <div className={styles.tabSectionOptionComplexInline}>
                     <div style={{ width: '250px', marginRight: '8px' }}>
                         <Label>{i18n.t('Minimum data value')}</Label>
-                        <div
-                            className={tabSectionOptionComplexInline.className}
-                        >
+                        <div className={styles.tabSectionOptionComplexInline}>
                             <OperatorSelect
                                 name="op1"
                                 value={op1}
@@ -173,9 +167,7 @@ class MeasureCriteria extends Component {
                     </div>
                     <div style={{ width: '250px' }}>
                         <Label>{i18n.t('Maximum data value')}</Label>
-                        <div
-                            className={tabSectionOptionComplexInline.className}
-                        >
+                        <div className={styles.tabSectionOptionComplexInline}>
                             <OperatorSelect
                                 name="op2"
                                 value={op2}
diff --git a/src/components/VisualizationOptions/Options/NumberBaseType.js b/src/components/VisualizationOptions/Options/NumberBaseType.js
index 54e2d321f8..134972ff3d 100644
--- a/src/components/VisualizationOptions/Options/NumberBaseType.js
+++ b/src/components/VisualizationOptions/Options/NumberBaseType.js
@@ -4,7 +4,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { acSetUiOption } from '../../../actions/ui.js'
 import { sGetUiOption } from '../../../reducers/ui.js'
-import { tabSectionOption } from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 
 const NumberBaseType = ({
     label,
@@ -18,7 +18,7 @@ const NumberBaseType = ({
     disabled,
     dataTest,
 }) => (
-    <div className={inline ? '' : tabSectionOption.className}>
+    <div className={inline ? '' : styles.tabSectionOption}>
         <div>
             {inline ? (
                 <Box width={width}>
diff --git a/src/components/VisualizationOptions/Options/OutlierDetectionMethod.js b/src/components/VisualizationOptions/Options/OutlierDetectionMethod.js
index a3d0ef1215..42326b6c8f 100644
--- a/src/components/VisualizationOptions/Options/OutlierDetectionMethod.js
+++ b/src/components/VisualizationOptions/Options/OutlierDetectionMethod.js
@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Field, Radio, InputField, Help } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { tabSectionOption } from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 
 const OutlierDetectionMethod = ({
     methods,
@@ -12,7 +12,7 @@ const OutlierDetectionMethod = ({
     onThresholdChange,
 }) => (
     <>
-        <div className={tabSectionOption.className}>
+        <div className={styles.tabSectionOption}>
             <Field dataTest="options-outliers-detection-method" dense>
                 {methods.map(({ id, label }) => (
                     <Radio
diff --git a/src/components/VisualizationOptions/Options/Outliers.js b/src/components/VisualizationOptions/Options/Outliers.js
index b670213d8e..1fda6c13ef 100644
--- a/src/components/VisualizationOptions/Options/Outliers.js
+++ b/src/components/VisualizationOptions/Options/Outliers.js
@@ -6,11 +6,7 @@ import { connect } from 'react-redux'
 import { acSetUiOptions } from '../../../actions/ui.js'
 import { sGetUiOptions } from '../../../reducers/ui.js'
 import styles from '../styles/Outliers.module.css'
-import {
-    tabSectionToggleableSubsection,
-    tabSectionOption,
-    tabSectionTitle,
-} from '../styles/VisualizationOptions.style.js'
+import optionStyles from '../styles/VisualizationOptions.module.css'
 import ExtremeLines from './ExtremeLines.js'
 import OutlierDetectionMethod from './OutlierDetectionMethod.js'
 
@@ -72,8 +68,8 @@ const Outliers = ({ outlierAnalysis, onChange }) => {
         })
 
     return (
-        <div className={tabSectionOption.className}>
-            <div className={tabSectionOption.className}>
+        <div className={optionStyles.tabSectionOption}>
+            <div className={optionStyles.tabSectionOption}>
                 <Checkbox
                     checked={outlierAnalysis[ENABLED_PROP]}
                     label={i18n.t('Outlier analysis')}
@@ -89,15 +85,19 @@ const Outliers = ({ outlierAnalysis, onChange }) => {
             </div>
             {outlierAnalysis[ENABLED_PROP] && (
                 <>
-                    <div className={tabSectionToggleableSubsection.className}>
-                        <div className={tabSectionOption.className}>
+                    <div
+                        className={optionStyles.tabSectionToggleableSubsection}
+                    >
+                        <div className={optionStyles.tabSectionOption}>
                             <FieldSet>
                                 <Legend>
-                                    <span className={tabSectionTitle.className}>
+                                    <span
+                                        className={optionStyles.tabSectionTitle}
+                                    >
                                         {i18n.t('Outlier detection method')}
                                     </span>
                                 </Legend>
-                                <div className={tabSectionOption.className}>
+                                <div className={optionStyles.tabSectionOption}>
                                     <OutlierDetectionMethod
                                         methods={methods}
                                         onMethodChange={(value) =>
@@ -124,15 +124,19 @@ const Outliers = ({ outlierAnalysis, onChange }) => {
                         </div>
                     </div>
                     <div className={styles.divider}></div>
-                    <div className={tabSectionToggleableSubsection.className}>
-                        <div className={tabSectionOption.className}>
+                    <div
+                        className={optionStyles.tabSectionToggleableSubsection}
+                    >
+                        <div className={optionStyles.tabSectionOption}>
                             <FieldSet>
                                 <Legend>
-                                    <span className={tabSectionTitle.className}>
+                                    <span
+                                        className={optionStyles.tabSectionTitle}
+                                    >
                                         {i18n.t('Extreme lines')}
                                     </span>
                                 </Legend>
-                                <div className={tabSectionOption.className}>
+                                <div className={optionStyles.tabSectionOption}>
                                     <ExtremeLines
                                         isEnabled={
                                             outlierAnalysis.extremeLines[
diff --git a/src/components/VisualizationOptions/Options/OutliersForOutlierTable.js b/src/components/VisualizationOptions/Options/OutliersForOutlierTable.js
index 26142b205a..de2b68820d 100644
--- a/src/components/VisualizationOptions/Options/OutliersForOutlierTable.js
+++ b/src/components/VisualizationOptions/Options/OutliersForOutlierTable.js
@@ -5,10 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { acSetUiDataSorting, acSetUiOptions } from '../../../actions/ui.js'
 import { getDefaultSorting } from '../../../modules/ui.js'
 import { sGetUi, sGetUiOptions } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionTitle,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import OutlierDetectionMethod from './OutlierDetectionMethod.js'
 import { DEFAULT_STATE as OUTLIER_MAX_RESULTS_DEFAULT_STATE } from './OutliersMaxResults.js'
 
@@ -97,14 +94,14 @@ const Outliers = () => {
         )
 
     return (
-        <div className={tabSectionOption.className}>
+        <div className={styles.tabSectionOption}>
             <FieldSet>
                 <Legend>
-                    <span className={tabSectionTitle.className}>
+                    <span className={styles.tabSectionTitle}>
                         {i18n.t('Outlier detection method')}
                     </span>
                 </Legend>
-                <div className={tabSectionOption.className}>
+                <div className={styles.tabSectionOption}>
                     <OutlierDetectionMethod
                         methods={methods}
                         onMethodChange={onMethodChange}
diff --git a/src/components/VisualizationOptions/Options/OutliersMaxResults.js b/src/components/VisualizationOptions/Options/OutliersMaxResults.js
index 121c861497..0cc03db36a 100644
--- a/src/components/VisualizationOptions/Options/OutliersMaxResults.js
+++ b/src/components/VisualizationOptions/Options/OutliersMaxResults.js
@@ -4,7 +4,7 @@ import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { acSetUiOptions } from '../../../actions/ui.js'
 import { sGetUiOptions } from '../../../reducers/ui.js'
-import { tabSectionOption } from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import { DEFAULT_STATE as OUTLIER_METHOD_THRESHOLD_DEFAULT_STATE } from './OutliersForOutlierTable.js'
 
 const OUTLIER_ANALYSIS_OPTION_NAME = 'outlierAnalysis'
@@ -45,7 +45,7 @@ const OutliersMaxResults = () => {
     }
 
     return (
-        <div className={tabSectionOption.className}>
+        <div className={styles.tabSectionOption}>
             <div>
                 <InputField
                     type="number"
diff --git a/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js b/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js
index 218f291406..a8625db38e 100644
--- a/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js
+++ b/src/components/VisualizationOptions/Options/PositiveNumberBaseType.js
@@ -4,7 +4,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { acSetUiOption } from '../../../actions/ui.js'
 import { sGetUiOption } from '../../../reducers/ui.js'
-import { tabSectionOption } from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 
 const UnconnectedPositiveNumberBaseType = ({
     label,
@@ -17,7 +17,7 @@ const UnconnectedPositiveNumberBaseType = ({
     disabled,
     dataTest,
 }) => (
-    <div className={tabSectionOption.className}>
+    <div className={styles.tabSectionOption}>
         <div>
             <InputField
                 type="number"
diff --git a/src/components/VisualizationOptions/Options/RegressionLine.js b/src/components/VisualizationOptions/Options/RegressionLine.js
index 1e1cbc8d75..8fdac6b06f 100644
--- a/src/components/VisualizationOptions/Options/RegressionLine.js
+++ b/src/components/VisualizationOptions/Options/RegressionLine.js
@@ -1,15 +1,12 @@
 import i18n from '@dhis2/d2-i18n'
 import { Checkbox, Label } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
 import { acSetUiOption } from '../../../actions/ui.js'
 import { sGetUiOption } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionOptionToggleable,
-    tabSectionOptionComplexInline,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import RegressionLineTitle from './RegressionLineTitle.js'
 import RegressionLineValue from './RegressionLineValue.js'
 
@@ -25,7 +22,7 @@ export const RegressionLine = ({
     axisId,
     isVertical,
 }) => (
-    <div className={tabSectionOption.className}>
+    <div className={styles.tabSectionOption}>
         <Checkbox
             checked={checked}
             label={label}
@@ -37,7 +34,10 @@ export const RegressionLine = ({
         />
         {checked && !disabled ? (
             <div
-                className={`${tabSectionOptionToggleable.className} ${tabSectionOptionComplexInline.className}`}
+                className={cx(
+                    styles.tabSectionOptionToggleable,
+                    styles.tabSectionOptionComplexInline
+                )}
             >
                 <div style={{ marginRight: '8px' }}>
                     <Label>{i18n.t('Value')}</Label>
diff --git a/src/components/VisualizationOptions/Options/SelectBaseOption.js b/src/components/VisualizationOptions/Options/SelectBaseOption.js
index d6d6c94abb..d67648cc05 100644
--- a/src/components/VisualizationOptions/Options/SelectBaseOption.js
+++ b/src/components/VisualizationOptions/Options/SelectBaseOption.js
@@ -1,14 +1,11 @@
 import { Checkbox, SingleSelectField, SingleSelectOption } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import { acSetUiOptions } from '../../../actions/ui.js'
 import { sGetUiOption, sGetUiDisabledOption } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionOptionToggleable,
-} from '../styles/VisualizationOptions.style.js'
-
+import styles from '../styles/VisualizationOptions.module.css'
 export const UnconnectedSelectBaseOption = ({
     option,
     label,
@@ -29,7 +26,7 @@ export const UnconnectedSelectBaseOption = ({
     }
 
     return (
-        <div className={tabSectionOption.className}>
+        <div className={styles.tabSectionOption}>
             {toggleable ? (
                 <Checkbox
                     checked={checked}
@@ -43,9 +40,9 @@ export const UnconnectedSelectBaseOption = ({
             ) : null}
             {!toggleable || checked ? (
                 <div
-                    className={
-                        toggleable ? tabSectionOptionToggleable.className : ''
-                    }
+                    className={cx({
+                        [styles.tabSectionOptionToggleable]: toggleable,
+                    })}
                 >
                     <SingleSelectField
                         name={`${option.name}-select`}
diff --git a/src/components/VisualizationOptions/Options/TextBaseOption.js b/src/components/VisualizationOptions/Options/TextBaseOption.js
index ac4c4795d7..85c88b6670 100644
--- a/src/components/VisualizationOptions/Options/TextBaseOption.js
+++ b/src/components/VisualizationOptions/Options/TextBaseOption.js
@@ -4,10 +4,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { acSetUiOption } from '../../../actions/ui.js'
 import { sGetUiOption, sGetUiDisabledOption } from '../../../reducers/ui.js'
-import {
-    tabSectionOption,
-    tabSectionOptionToggleable,
-} from '../styles/VisualizationOptions.style.js'
+import styles from '../styles/VisualizationOptions.module.css'
 import TextStyle from './TextStyle.js'
 
 export const UnconnectedTextBaseOption = ({
@@ -28,7 +25,7 @@ export const UnconnectedTextBaseOption = ({
     dataTest,
     isVertical,
 }) => (
-    <div className={inline ? '' : tabSectionOption.className}>
+    <div className={inline ? '' : styles.tabSectionOption}>
         {toggleable ? (
             <Checkbox
                 checked={checked}
@@ -42,9 +39,7 @@ export const UnconnectedTextBaseOption = ({
         ) : null}
         {!toggleable || checked ? (
             <div
-                className={
-                    toggleable ? tabSectionOptionToggleable.className : ''
-                }
+                className={toggleable ? styles.tabSectionOptionToggleable : ''}
             >
                 {inline ? (
                     <Box width={width}>
diff --git a/src/components/VisualizationOptions/styles/AxisRange.module.css b/src/components/VisualizationOptions/styles/AxisRange.module.css
index 44627a0a1b..6dafa69c0d 100644
--- a/src/components/VisualizationOptions/styles/AxisRange.module.css
+++ b/src/components/VisualizationOptions/styles/AxisRange.module.css
@@ -1,3 +1,3 @@
 .label {
-    margin-bottom: var(--spacers-dp4);
+    margin-block-end: var(--spacers-dp4);
 }
diff --git a/src/components/VisualizationOptions/styles/Outliers.module.css b/src/components/VisualizationOptions/styles/Outliers.module.css
index 26faf90446..4643cf46ff 100644
--- a/src/components/VisualizationOptions/styles/Outliers.module.css
+++ b/src/components/VisualizationOptions/styles/Outliers.module.css
@@ -1,4 +1,7 @@
 .divider {
-    margin: var(--spacers-dp16) 22px;
-    border-bottom: 1px solid var(--colors-grey300);
+    margin-block-start: var(--spacers-dp16);
+    margin-block-end: var(--spacers-dp16);
+    margin-inline-start: 22px;
+    margin-inline-end: 22px;
+    border-block-end: 1px solid var(--colors-grey300);
 }
diff --git a/src/components/VisualizationOptions/styles/SeriesTable.module.css b/src/components/VisualizationOptions/styles/SeriesTable.module.css
index 107e1e3d10..4fc7ca1fa4 100644
--- a/src/components/VisualizationOptions/styles/SeriesTable.module.css
+++ b/src/components/VisualizationOptions/styles/SeriesTable.module.css
@@ -1,9 +1,9 @@
 .nameColumn {
-    width: 45%;
+    inline-size: 45%;
 }
 
 .typeColumn {
-    width: 25%;
+    inline-size: 25%;
 }
 
 .tableHead {
@@ -13,13 +13,13 @@
 .tableHead .tableCell {
     padding: var(--spacers-dp8);
     line-height: normal;
-    height: auto;
+    block-size: auto;
     vertical-align: unset;
 }
 
 .tableBody .itemName {
-    padding-left: var(--spacers-dp8);
-    padding-right: var(--spacers-dp8);
+    padding-inline-start: var(--spacers-dp8);
+    padding-inline-end: var(--spacers-dp8);
 }
 
 .typeContainer {
@@ -27,25 +27,25 @@
 }
 
 .typeContainer:not(:last-child) {
-    margin-right: var(--spacers-dp16);
+    margin-inline-end: var(--spacers-dp16);
 }
 
 .visIcon {
-    height: 16px;
+    block-size: 16px;
 }
 
 .visIcon svg {
-    height: 16px;
+    block-size: 16px;
 }
 
 .axisIcon {
     display: flex;
     justify-content: center;
-    padding-top: var(--spacers-dp4);
+    padding-block-start: var(--spacers-dp4);
 }
 
 .errorContainer {
-    min-height: 450px;
+    min-block-size: 450px;
     justify-content: center;
     display: flex;
     flex-direction: column;
@@ -54,9 +54,12 @@
 }
 
 .errorIcon {
-    width: 136px;
-    height: 136px;
-    margin: 0 auto var(--spacers-dp24);
+    inline-size: 136px;
+    block-size: 136px;
+    margin-block-start: 0;
+    margin-block-end: var(--spacers-dp24);
+    margin-inline-start: auto;
+    margin-inline-end: auto;
 }
 
 .errorTitle {
@@ -65,8 +68,11 @@
     color: var(--colors-grey800);
     letter-spacing: 0.15px;
     line-height: 24px;
-    width: 360px;
-    margin: 0 auto var(--spacers-dp12);
+    inline-size: 360px;
+    margin-block-start: 0;
+    margin-block-end: var(--spacers-dp12);
+    margin-inline-start: auto;
+    margin-inline-end: auto;
 }
 
 .errorDescription {
@@ -74,6 +80,9 @@
     font-size: 14px;
     color: var(--colors-grey700);
     line-height: 19px;
-    width: 360px;
-    margin: 0 auto;
+    inline-size: 360px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
 }
diff --git a/src/components/VisualizationOptions/styles/TextStyle.module.css b/src/components/VisualizationOptions/styles/TextStyle.module.css
index a165cea53a..7261210662 100644
--- a/src/components/VisualizationOptions/styles/TextStyle.module.css
+++ b/src/components/VisualizationOptions/styles/TextStyle.module.css
@@ -6,28 +6,34 @@
 .buttonStrip {
     display: flex;
     position: relative;
-    margin: var(--spacers-dp4) 0;
+    margin-block-start: var(--spacers-dp4);
+    margin-block-end: var(--spacers-dp4);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
 }
 
 .container,
 .buttonStrip > *:not(:last-child) {
-    margin-right: var(--spacers-dp4);
+    margin-inline-end: var(--spacers-dp4);
 }
 
 .fontSizeSelect,
 .textAlignSelect {
-    min-width: 180px;
-    margin-right: var(--spacers-dp8);
+    min-inline-size: 180px;
+    margin-inline-end: var(--spacers-dp8);
 }
 
 .textColorLabel {
-    height: 28px;
+    block-size: 28px;
     font-size: 14px;
     line-height: 16px;
     border: 1px solid var(--colors-grey400);
     border-radius: 4px;
     cursor: pointer;
-    padding: 0 1px;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline-start: 1px;
+    padding-inline-end: 1px;
 }
 
 .textColorInput {
@@ -37,7 +43,7 @@
 }
 
 .textColorIcon {
-    margin-top: 1px;
+    margin-block-start: 1px;
 }
 
 .disabled {
diff --git a/src/components/VisualizationOptions/styles/VisualizationOptions.module.css b/src/components/VisualizationOptions/styles/VisualizationOptions.module.css
new file mode 100644
index 0000000000..9af6114ca0
--- /dev/null
+++ b/src/components/VisualizationOptions/styles/VisualizationOptions.module.css
@@ -0,0 +1,78 @@
+.tabBar {
+    padding-inline-end: var(--spacers-dp24);
+}
+
+.tabContent {
+    overflow: auto;
+    padding-inline-end: var(--spacers-dp24);
+}
+
+.tabSection {
+    padding-block-start: var(--spacers-dp16);
+    padding-block-end: var(--spacers-dp16);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+}
+
+.tabSection:not(:last-child) {
+    border-block-end: 1px solid var(--colors-grey300);
+    margin-block-end: var(--spacers-dp8);
+}
+
+.tabSectionContent {
+    overflow-y: auto;
+}
+
+.tabSectionTitle {
+    display: inline-block;
+    padding-block-end: var(--spacers-dp12);
+    font-size: 15px;
+    color: var(--colors-grey900);
+    font-weight: 500;
+    letter-spacing: 0.2px;
+}
+
+.tabSectionTitleDisabled {
+    color: var(--colors-grey600);
+}
+
+.tabSectionTitleMargin {
+    margin-block-start: var(--spacers-dp8);
+}
+
+.tabSectionOption:not(:last-child):not(.inline) {
+    padding-block-end: var(--spacers-dp16);
+}
+
+.tabSectionOptionItem:not(:last-child) {
+    padding-block-end: var(--spacers-dp8);
+}
+
+.tabSectionOptionText {
+    margin: 0;
+    padding-block-end: var(--spacers-dp8);
+    font-size: 14px;
+    line-height: 19px;
+    color: var(--colors-grey700);
+}
+
+.tabSectionOptionToggleable {
+    margin-block-start: var(--spacers-dp4);
+    margin-block-end: 0;
+    margin-inline-start: 23px;
+    margin-inline-end: 0;
+}
+
+.tabSectionToggleableSubsection {
+    margin-inline-start: 23px;
+}
+
+.tabSectionOptionComplexInline {
+    display: flex;
+}
+
+.tabSectionOptionIcon {
+    vertical-align: top;
+    margin-inline-end: var(--spacers-dp4);
+    color: var(--colors-grey600);
+}
diff --git a/src/components/VisualizationOptions/styles/VisualizationOptions.style.js b/src/components/VisualizationOptions/styles/VisualizationOptions.style.js
deleted file mode 100644
index bedbf42c60..0000000000
--- a/src/components/VisualizationOptions/styles/VisualizationOptions.style.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import { colors, spacers } from '@dhis2/ui'
-import React from 'react' /* eslint-disable-line no-unused-vars */
-import css from 'styled-jsx/css'
-
-export const tabBar = css.resolve`
-    div {
-        padding-right: ${spacers.dp24};
-    }
-`
-
-export const tabContent = css.resolve`
-    div {
-        overflow: auto;
-        padding-right: ${spacers.dp24};
-    }
-`
-
-export const tabSection = css.resolve`
-    div {
-        padding: ${spacers.dp16} 0;
-    }
-    div:not(:last-child) {
-        border-bottom: 1px solid ${colors.grey300};
-        margin-bottom: ${spacers.dp8};
-    }
-`
-
-export const tabSectionContent = css.resolve`
-    div {
-        overflow-y: auto;
-    }
-`
-
-export const tabSectionTitle = css.resolve`
-    span {
-        display: inline-block;
-        padding-bottom: ${spacers.dp12};
-        font-size: 15px;
-        color: ${colors.grey900};
-        font-weight: 500;
-        letter-spacing: 0.2px;
-    }
-`
-
-export const tabSectionTitleDisabled = css.resolve`
-    span {
-        color: ${colors.grey600};
-    }
-`
-
-export const tabSectionTitleMargin = css.resolve`
-    span {
-        margin-top: ${spacers.dp8};
-    }
-`
-
-export const tabSectionOption = css.resolve`
-    div:not(:last-child):not(.inline) {
-        padding-bottom: ${spacers.dp16};
-    }
-`
-
-export const tabSectionOptionItem = css.resolve`
-    div:not(:last-child) {
-        padding-bottom: ${spacers.dp8};
-    }
-`
-
-export const tabSectionOptionText = css.resolve`
-    p {
-        margin: 0;
-        padding-bottom: ${spacers.dp8};
-        font-size: 14px;
-        line-height: 19px;
-        color: ${colors.grey700};
-    }
-`
-
-export const tabSectionOptionToggleable = css.resolve`
-    div {
-        margin: ${spacers.dp4} 0 0 23px;
-    }
-`
-
-export const tabSectionToggleableSubsection = css.resolve`
-    div {
-        margin-left: 23px;
-    }
-`
-
-export const tabSectionOptionComplexInline = css.resolve`
-    div {
-        display: flex;
-    }
-`
-
-export const tabSectionOptionIcon = css.resolve`
-    span {
-        vertical-align: top;
-        margin-right: ${spacers.dp4};
-        color: ${colors.grey600};
-    }
-`
diff --git a/src/components/VisualizationPlugin/styles/OutlierTablePlugin.module.css b/src/components/VisualizationPlugin/styles/OutlierTablePlugin.module.css
index 539d0aac6f..f86e5c7023 100644
--- a/src/components/VisualizationPlugin/styles/OutlierTablePlugin.module.css
+++ b/src/components/VisualizationPlugin/styles/OutlierTablePlugin.module.css
@@ -1,14 +1,17 @@
 .pluginContainer {
     display: flex;
     gap: var(--spacers-dp4);
-    min-width: 0;
-    width: 100%;
-    margin: 0 var(--spacers-dp4) var(--spacers-dp4);
+    min-inline-size: 0;
+    inline-size: 100%;
+    margin-block-start: 0;
+    margin-block-end: var(--spacers-dp4);
+    margin-inline-start: var(--spacers-dp4);
+    margin-inline-end: var(--spacers-dp4);
 }
 .visualizationContainer {
     display: flex;
     flex-direction: column;
-    max-width: 100%;
+    max-inline-size: 100%;
 }
 
 /* Table header cells in various sizes */
@@ -28,13 +31,22 @@
     line-height: 12px;
 }
 .dataTable .headerCell.sizeComfortable {
-    padding: 8px 4px 6px 8px;
+    padding-block-start: 8px;
+    padding-block-end: 6px;
+    padding-inline-start: 8px;
+    padding-inline-end: 4px;
 }
 .dataTable .headerCell.sizeNormal {
-    padding: 4px 4px 2px 6px;
+    padding-block-start: 4px;
+    padding-block-end: 2px;
+    padding-inline-start: 6px;
+    padding-inline-end: 4px;
 }
 .dataTable .headerCell.sizeCompact {
-    padding: 3px 2px 1px 6px;
+    padding-block-start: 3px;
+    padding-block-end: 1px;
+    padding-inline-start: 6px;
+    padding-inline-end: 2px;
 }
 
 /* Table body cells in various sizes */
@@ -54,11 +66,20 @@
     white-space: nowrap;
 }
 .dataTable .cell.sizeComfortable {
-    padding: 10px 8px 8px;
+    padding-block-start: 10px;
+    padding-block-end: 8px;
+    padding-inline-start: 8px;
+    padding-inline-end: 8px;
 }
 .dataTable .cell.sizeNormal {
-    padding: 7px 6px 5px;
+    padding-block-start: 7px;
+    padding-block-end: 5px;
+    padding-inline-start: 6px;
+    padding-inline-end: 6px;
 }
 .dataTable .cell.sizeCompact {
-    padding: 6px 6px 4px;
+    padding-block-start: 6px;
+    padding-block-end: 4px;
+    padding-inline-start: 6px;
+    padding-inline-end: 6px;
 }
diff --git a/src/components/VisualizationPlugin/styles/PivotPlugin.style.js b/src/components/VisualizationPlugin/styles/PivotPlugin.style.js
index db34a74c72..b818758130 100644
--- a/src/components/VisualizationPlugin/styles/PivotPlugin.style.js
+++ b/src/components/VisualizationPlugin/styles/PivotPlugin.style.js
@@ -22,13 +22,13 @@ export const pivotTableStyles = css.global`
 
     .pivot-value {
         background-color: #fff;
-        text-align: right;
+        text-align: end;
     }
 
     .pivot-value-total-subgrandtotal {
         background-color: #d8d8d8;
         white-space: nowrap;
-        text-align: right;
+        text-align: end;
     }
 
     .pointer {
diff --git a/src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css b/src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css
index 2172b39e06..99865389a4 100644
--- a/src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css
+++ b/src/components/VisualizationPlugin/styles/VisualizationPlugin.module.css
@@ -1,11 +1,11 @@
 .container {
     position: relative;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     display: flex;
 }
 .modal {
-    max-height: calc(-285px + 100vh);
+    max-block-size: calc(-285px + 100vh);
 }
 
 .chartWrapper {
@@ -14,21 +14,27 @@
 }
 
 .legendKey {
-    margin: 0 8px;
-    width: 180px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 8px;
+    margin-inline-end: 8px;
+    inline-size: 180px;
 }
 .legendKeyToggle {
-    margin: 1px 4px 0;
+    margin-block-start: 1px;
+    margin-block-end: 0;
+    margin-inline-start: 4px;
+    margin-inline-end: 4px;
 }
 .wrapper {
     position: absolute;
-    top: 0;
-    bottom: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
     overflow: auto;
     border: 1px solid var(--colors-grey400);
 }
 .buttonMargin {
-    margin-top: 34px;
+    margin-block-start: 34px;
 }
 
 @media print {
@@ -36,6 +42,6 @@
         display: none;
     }
     .buttonMargin {
-        margin-top: 0;
+        margin-block-start: 0;
     }
 }
diff --git a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css
index 97b22b6655..230060463c 100644
--- a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css
+++ b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css
@@ -1,6 +1,6 @@
 .arrowIcon {
     display: flex;
-    margin-left: auto;
+    margin-inline-start: auto;
 }
 
 .arrowIcon.listIsOpen {
@@ -8,7 +8,10 @@
 }
 
 .button {
-    padding: 7px var(--spacers-dp8);
+    padding-block-start: 7px;
+    padding-block-end: 7px;
+    padding-inline-start: var(--spacers-dp8);
+    padding-inline-end: var(--spacers-dp8);
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -24,22 +27,28 @@
 
 .button > .selectedVizTypeLabel {
     font-size: 14px;
-    padding-top: 1px;
+    padding-block-start: 1px;
     user-select: none;
     color: var(--colors-grey900);
-    margin-left: 4px;
+    margin-inline-start: 4px;
 }
 
 .cardContainer {
-    margin: 1px 0;
-    min-height: 200px;
+    margin-block-start: 1px;
+    margin-block-end: 1px;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    min-block-size: 200px;
 }
 
 .listContainer {
-    max-width: 888px;
+    max-inline-size: 888px;
     box-shadow: var(--elevations-e400);
     border-radius: 3px;
-    padding: 12px 16px;
+    padding-block-start: 12px;
+    padding-block-end: 12px;
+    padding-inline-start: 16px;
+    padding-inline-end: 16px;
     background: var(--colors-white);
 }
 
@@ -49,23 +58,23 @@
 }
 
 .listItem {
-    width: 280px;
+    inline-size: 280px;
     background: #fff;
     border: 1px solid var(--colors-grey300);
     border-radius: 3px;
     padding: var(--spacers-dp8);
     display: flex;
     align-items: flex-start;
-    margin-bottom: var(--spacers-dp8);
+    margin-block-end: var(--spacers-dp8);
     cursor: pointer;
 }
 
 .listItem:nth-child(3n + 1) {
-    margin-right: var(--spacers-dp8);
+    margin-inline-end: var(--spacers-dp8);
 }
 
 .listItem:nth-child(3n + 3) {
-    margin-left: var(--spacers-dp8);
+    margin-inline-start: var(--spacers-dp8);
 }
 
 .listItem:hover {
@@ -89,20 +98,23 @@
 }
 
 .listItemSvg {
-    width: var(--spacers-dp48);
-    height: var(--spacers-dp48);
+    inline-size: var(--spacers-dp48);
+    block-size: var(--spacers-dp48);
 }
 
 .listItemIcon {
-    width: 48px;
-    height: 48px;
-    margin-right: var(--spacers-dp8);
+    inline-size: 48px;
+    block-size: 48px;
+    margin-inline-end: var(--spacers-dp8);
 }
 
 .listItemName {
     font-size: 14px;
     font-weight: 500;
-    margin: 4px 0;
+    margin-block-start: 4px;
+    margin-block-end: 4px;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
 }
 
 .listItemDescription {
diff --git a/src/components/scrollbar.css b/src/components/scrollbar.css
index 7cbf0f502a..7d2bd63195 100644
--- a/src/components/scrollbar.css
+++ b/src/components/scrollbar.css
@@ -1,11 +1,11 @@
 /* Width */
 ::-webkit-scrollbar {
-    width: 7px;
-    height: 7px;
+    inline-size: 7px;
+    block-size: 7px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
     background: #d1d1d1;
     border-radius: 3px;
-}
\ No newline at end of file
+}
diff --git a/src/widgets/styles/LoadingMask.module.css b/src/widgets/styles/LoadingMask.module.css
index 5d79816275..5f47081f68 100644
--- a/src/widgets/styles/LoadingMask.module.css
+++ b/src/widgets/styles/LoadingMask.module.css
@@ -1,6 +1,6 @@
 .progress {
     margin: var(--spacers-dp12);
-    max-width: 200;
+    max-inline-size: 200;
     text-align: center;
     align-self: center;
 }
@@ -8,5 +8,5 @@
 .outer {
     display: flex;
     justify-content: center;
-    height: 100%;
+    block-size: 100%;
 }
diff --git a/yarn.lock b/yarn.lock
index b675147c34..b83613af7c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1282,6 +1282,21 @@
   dependencies:
     chalk "^4.0.0"
 
+"@csstools/css-parser-algorithms@^2.6.3":
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.3.tgz#b5e7eb2bd2a42e968ef61484f1490a8a4148a8eb"
+  integrity sha512-xI/tL2zxzEbESvnSxwFgwvy5HS00oCXxL4MLs6HUiDcYfwowsoQaABKxUElp1ARITrINzBnsECOc1q0eg2GOrA==
+
+"@csstools/css-tokenizer@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.3.1.tgz#3d47e101ad48d815a4bdce8159fb5764f087f17a"
+  integrity sha512-iMNHTyxLbBlWIfGtabT157LH9DUx9X8+Y3oymFEuMj8HNc+rpE3dPFGFgHjpKfjeFDjLjYIAIhXPGvS2lKxL9g==
+
+"@csstools/media-query-list-parser@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.11.tgz#465aa42f268599729350e305e1ae14a30c1daf51"
+  integrity sha512-uox5MVhvNHqitPP+SynrB1o8oPxPMt2JLgp5ghJOWf54WGQ5OKu47efne49r1SWqs3wRP8xSWjnO9MBKxhB1dA==
+
 "@csstools/normalize.css@*":
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
@@ -1393,6 +1408,11 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
   integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
 
+"@csstools/selector-specificity@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz#63085d2995ca0f0e55aa8b8a07d69bfd48b844fe"
+  integrity sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==
+
 "@cypress/browserify-preprocessor@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@cypress/browserify-preprocessor/-/browserify-preprocessor-3.0.2.tgz#1dbecae394937aed47a3524cad47086c2ded8c50"
@@ -2051,12 +2071,12 @@
     react-beautiful-dnd "^10.1.1"
     resize-observer-polyfill "^1.5.1"
 
-"@dhis2/app-adapter@10.3.9":
-  version "10.3.9"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-adapter/-/app-adapter-10.3.9.tgz#f0733e72bff86661889c6fcf3a8e0ca3452f3121"
-  integrity sha512-T/FFxzInvNw4YKZX+SuWpge0UGqzKX5w1rC3gBK38sFFpnBGNHgV5QMKo/DZeLDceDu1yrZbkluANoEujJSv9Q==
+"@dhis2/app-adapter@11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-adapter/-/app-adapter-11.3.0.tgz#7c346993e2f024591a91e9ce29ace294cf4dda88"
+  integrity sha512-/inaO6jWZ5UQpytTd8MDuBt5lExBVJEn51hLNy4Lcwv66QIMnFu/Y80W7H2sFIxBkjG7IGx1769q4iLWIZ2N9Q==
   dependencies:
-    "@dhis2/pwa" "10.3.9"
+    "@dhis2/pwa" "11.3.0"
     moment "^2.24.0"
 
 "@dhis2/app-runtime-adapter-d2@^1.1.0":
@@ -2066,30 +2086,31 @@
   dependencies:
     prop-types "^15.7.2"
 
-"@dhis2/app-runtime@^3.7.0", "@dhis2/app-runtime@^3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-3.9.0.tgz#c7e295fd0a68fac976a930bc77105206ded0b61a"
-  integrity sha512-n0S4pbyvK7FnBQFMONGrhR9YYavBQI+mQLHfCX/vtvOyeoioBUNIinuQlGysuLMEkSVaK5OjV40rvTMzdxF2kQ==
+"@dhis2/app-runtime@^3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-runtime/-/app-runtime-3.10.4.tgz#6064ac728770cc94c4d1975db32bd38533655cc6"
+  integrity sha512-W/d0WcYYcKAeE5/xCunZEMYUSD1fxG+JDQdRDEUsH5y5hB8i/4o2QQrZK8xa19Z3xQJhaW5ypWWqIQVjTJT2Ww==
   dependencies:
-    "@dhis2/app-service-alerts" "3.9.0"
-    "@dhis2/app-service-config" "3.9.0"
-    "@dhis2/app-service-data" "3.9.0"
-    "@dhis2/app-service-offline" "3.9.0"
+    "@dhis2/app-service-alerts" "3.10.4"
+    "@dhis2/app-service-config" "3.10.4"
+    "@dhis2/app-service-data" "3.10.4"
+    "@dhis2/app-service-offline" "3.10.4"
+    "@dhis2/app-service-plugin" "3.10.4"
 
-"@dhis2/app-service-alerts@3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.9.0.tgz#48d3805676e75ee58104fea4f76cfa779335444e"
-  integrity sha512-z2eZxm/pxrmFbisbK7/qJKtif2CNWJjaaAH5rfrs5OIajlHy3rO37vSaTQHWv+xWvZFQrs2Op2InxzG0qh5ncA==
+"@dhis2/app-service-alerts@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-alerts/-/app-service-alerts-3.10.4.tgz#a7cce660015d79980679175e677cf6c6c3f4c7eb"
+  integrity sha512-DmSLx/kHOHpgGiL8zG0oa6D3MeCY3wPMDGqj+Gfegr654Lmyf4d2vLI7HSZUSOCdraP/fSYTypsdZmWYoXoLBQ==
 
-"@dhis2/app-service-config@3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.9.0.tgz#8dc59d8de246f54057c0c685d5f94b4cbade6f73"
-  integrity sha512-OuRn2mJGrQQ8QIC+oIVYYpclB4LErRK2wtsuy/cXLfRbeUti1qWIh110rgd1hnTx+BgRCs5s3NWdIQxS4hYGIQ==
+"@dhis2/app-service-config@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-config/-/app-service-config-3.10.4.tgz#2bede4df9b036350200cbc085a2a68439fa4fa0a"
+  integrity sha512-SCFdNxJKpiBjYsU9s0R+u9GrXjzmUEpGpudmC5eQqNV6ajLiebe/pS2jcSPFzjUtHVQMADk0X8TkERoOBqWcxA==
 
-"@dhis2/app-service-data@3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.9.0.tgz#37f528b5f7f589cbab8dcc7f997c1668bc6566a9"
-  integrity sha512-/FJgJhL6YGtIVNX5oaNmavkGmimrVHQsS8ueeUO4FvTjYXGlnnN3IuxypQcy/x4yiUyigbPgFJRnbC1J2af2fg==
+"@dhis2/app-service-data@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-data/-/app-service-data-3.10.4.tgz#dcd993a24d2edd97e7ad8a042a682e60582740ff"
+  integrity sha512-RaoWniioCe33PcPZoDuO66qOrIt0JeeCN8RzmCDrRVGvGmlDTZ3hNuWm9CnsAvO1U6sYDiulKPqrEQu8YKMG0w==
   dependencies:
     react-query "^3.13.11"
 
@@ -2106,25 +2127,33 @@
     "@dhis2/app-service-data" "^2.1.1"
     uuid "^8.1.0"
 
-"@dhis2/app-service-offline@3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.9.0.tgz#fe4f4a91a1da77554965f6a5fe6f6951d4c467f4"
-  integrity sha512-0q5zl0vw+a47Ab2qgu6hsZY5ybnH/ea43Vkk4aXYdgcf57xB8ck9DkIcNbc2e1+k9FhvimipxsgTZSbEA/8hJA==
+"@dhis2/app-service-offline@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-offline/-/app-service-offline-3.10.4.tgz#dcdaf3a76c6c7a71f28c89a403ec130bf10fcdf3"
+  integrity sha512-SUUS+sw3FjR0TMdKSSOVzL8IfPA185gSTHQ1WE4tLc2zE92elvxLL9FuSUuTbu+l1Kr4nRQNLh8muOMWKGnWDg==
   dependencies:
     lodash "^4.17.21"
 
-"@dhis2/app-shell@10.3.9":
-  version "10.3.9"
-  resolved "https://registry.yarnpkg.com/@dhis2/app-shell/-/app-shell-10.3.9.tgz#4def65cfa436047de896865b107d496afbafc643"
-  integrity sha512-GkKGz1FIcXL4XG7cMPob0T78EvI8ML3CJbtVDxMDx++20R8vD+gKB4jbdXA5QooWeojDA5kpPmNiVHNUJb6LUw==
+"@dhis2/app-service-plugin@3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-service-plugin/-/app-service-plugin-3.10.4.tgz#f5412a1320393042012dd75713e3215e51628554"
+  integrity sha512-GW6xa/5y2yFXvhtLConnaOxKqyu6VPZWRBaQR73/bRRmFcnd7hlMkZ2M0GWSjoW4QHLXlLhXHFsgHPETBftkPg==
   dependencies:
-    "@dhis2/app-adapter" "10.3.9"
-    "@dhis2/app-runtime" "^3.9.0"
+    post-robot "^10.0.46"
+
+"@dhis2/app-shell@11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/app-shell/-/app-shell-11.3.0.tgz#33fea2a2b6a1ee71962778c5c645b3690b10677a"
+  integrity sha512-beIch8qfOD0e6AeY5qnu/wNUYRUw/IDoDiwGgHU/sjnrs23n16DJXmFv8+fTo+oNOF1NIVUvqOArm9VqkqkPAw==
+  dependencies:
+    "@dhis2/app-adapter" "11.3.0"
+    "@dhis2/app-runtime" "^3.10.4"
     "@dhis2/d2-i18n" "^1.1.1"
-    "@dhis2/pwa" "10.3.9"
-    "@dhis2/ui" "^8.12.3"
+    "@dhis2/pwa" "11.3.0"
+    "@dhis2/ui" "^9.4.4"
     classnames "^2.2.6"
     moment "^2.29.1"
+    post-robot "^10.0.46"
     prop-types "^15.7.2"
     react "^16.8.6"
     react-dom "^16.8.6"
@@ -2134,10 +2163,10 @@
     typeface-roboto "^0.0.75"
     typescript "^3.6.3"
 
-"@dhis2/cli-app-scripts@^10.3.9":
-  version "10.3.9"
-  resolved "https://registry.yarnpkg.com/@dhis2/cli-app-scripts/-/cli-app-scripts-10.3.9.tgz#8a971b52c08f165bcee78fb5bddfd0891ae7f7c2"
-  integrity sha512-toltKttbok1ORBYvXYOtaIyUUs5C7lB3SEbZuk4KnibwmtG3v/37UEgXC6y0nc0L3XDBz/HK/LrbU4/7osfvcA==
+"@dhis2/cli-app-scripts@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/cli-app-scripts/-/cli-app-scripts-11.3.0.tgz#8a05577f981f4d51e537a514a37291a8111f464f"
+  integrity sha512-wJmjb6iFNR77LYyxLyuPcjmI/nd5hYRUwrcJk1KpUvy3v2VhhPCeKYW8fipTwVs/JayN9YcsfWSH4PskbK8/dQ==
   dependencies:
     "@babel/core" "^7.6.2"
     "@babel/plugin-proposal-class-properties" "^7.8.3"
@@ -2146,7 +2175,7 @@
     "@babel/preset-env" "^7.14.7"
     "@babel/preset-react" "^7.0.0"
     "@babel/preset-typescript" "^7.6.0"
-    "@dhis2/app-shell" "10.3.9"
+    "@dhis2/app-shell" "11.3.0"
     "@dhis2/cli-helpers-engine" "^3.2.0"
     "@jest/core" "^27.0.6"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.5.4"
@@ -2203,10 +2232,10 @@
     update-notifier "^3.0.0"
     yargs "^13.1.0"
 
-"@dhis2/cli-style@^10.5.1":
-  version "10.5.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/cli-style/-/cli-style-10.5.1.tgz#cf2df63b5eb203e3e3cec867bb9ba53b0d6f2ed6"
-  integrity sha512-epMQFxX+A7HzivXMqX5pHSJqP/CRw94HHWOZ+ab8Ug930Y3gF8YG1QtXgfvdMFz7u+LfQlLujj+DgVa/6W5GTQ==
+"@dhis2/cli-style@^10.7.3":
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/@dhis2/cli-style/-/cli-style-10.7.3.tgz#38cd2b6672fca44d9e72c64583ce7550e123686a"
+  integrity sha512-uqlJwV2hegPNgxpoqWH5nZhqBSvPH2GJ0Uoeaw7OpiHKFauOFUTuUiy6MGwUZqtgEAbmcq0DbyDexNQ/UqHQLQ==
   dependencies:
     "@commitlint/cli" "^12.1.4"
     "@commitlint/config-conventional" "^13.1.0"
@@ -2217,14 +2246,20 @@
     eslint-config-prettier "^8.3.0"
     eslint-plugin-import "^2.22.1"
     eslint-plugin-react "^7.31.10"
+    eslint-plugin-react-hooks "^4.6.2"
     fast-glob "^3.2.5"
     find-up "^5.0.0"
     fs-extra "^10.0.0"
     husky "^7.0.2"
     micromatch "^4.0.4"
     perfy "^1.1.5"
+    postcss "^8.4.38"
+    postcss-styled-jsx "^1.0.1"
+    postcss-syntax "^0.36.2"
     prettier "^2.4.1"
     semver "^7.3.5"
+    stylelint "^16.3.1"
+    stylelint-use-logical "^2.1.2"
     yargs "^16.2.0"
 
 "@dhis2/cypress-commands@^10.0.3":
@@ -2262,10 +2297,10 @@
   resolved "https://registry.yarnpkg.com/@dhis2/prop-types/-/prop-types-3.1.2.tgz#65b8ad2da8cd2f72bc8b951049a6c9d1b97af3e9"
   integrity sha512-eM0jjLOWvtXWqSFp5YC4DHFpkP8Y1D2eUwGV7MBWjni+o27oesVan+oT7WHeOeLdlAd4acRJrnaaAyB4Ck1wGQ==
 
-"@dhis2/pwa@10.3.9":
-  version "10.3.9"
-  resolved "https://registry.yarnpkg.com/@dhis2/pwa/-/pwa-10.3.9.tgz#c119b7da18218a4ea3d18c7eb01c2aca5fc619a2"
-  integrity sha512-yYxOjgi1D0S6Ah5xQwZauQ3zhXuiojc9AMkP+J+bpZYQhj4hzB2dKyJ252dClO6P/7EtoSj9XJOsMx007uIUEQ==
+"@dhis2/pwa@11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@dhis2/pwa/-/pwa-11.3.0.tgz#188f756ad2d95f5df4c32fe904118b066c31cead"
+  integrity sha512-e+Lc4xHFxpMLEn9Efopdmh/R1iqqXG+gJhizq5B8tFtctNohUiy/RgwxqfsquRbayNU6Gm6aKDp7dMbqEf4ZAQ==
   dependencies:
     idb "^6.0.0"
     workbox-core "^6.1.5"
@@ -2305,7 +2340,7 @@
   resolved "https://registry.yarnpkg.com/@dhis2/ui-icons/-/ui-icons-9.4.4.tgz#c4f488496389687ebd47266e93e0aacf27054ef3"
   integrity sha512-AGt+aYqpqb7f/2IH5quZ1bJoSz/WB3p7I1CdZHUPk/XP6rQpO2W7mqoLxiZYOHCiNlTU+sjfXcYauHaWZSTdjw==
 
-"@dhis2/ui@^8.12.3", "@dhis2/ui@^9.4.4":
+"@dhis2/ui@^9.4.4":
   version "9.4.4"
   resolved "https://registry.yarnpkg.com/@dhis2/ui/-/ui-9.4.4.tgz#ae7961d42753d72e209f7d11b160b3179e6a6452"
   integrity sha512-w1NMZy/S5tNbXGt7F5J5OM1P8qgq1Bo1ifV34YV3Cs+8rJYkHHsFOokUN+wSTdXUWqIKxOGrRoQkmgmjQ19WlA==
@@ -2391,6 +2426,11 @@
   dependencies:
     tslib "^2.0.0"
 
+"@dual-bundle/import-meta-resolve@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz#519c1549b0e147759e7825701ecffd25e5819f7b"
+  integrity sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -5133,6 +5173,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+balanced-match@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
+  integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
+
 base64-js@^1.0.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -5168,6 +5213,15 @@ before-after-hook@^2.2.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c"
   integrity sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==
 
+belter@^1.0.41:
+  version "1.0.190"
+  resolved "https://registry.yarnpkg.com/belter/-/belter-1.0.190.tgz#491857550ef240d9c66b56fc637991f5c3089966"
+  integrity sha512-jz05FHrO+bwitdI6JxV5ESyRdVhTcwMWQ7L4o+q/R4LNJFQrG58sp9EiwsSjhbihhiyYFcmmCMRRagxte6igtw==
+  dependencies:
+    cross-domain-safe-weakmap "^1"
+    cross-domain-utils "^2"
+    zalgo-promise "^1"
+
 bfj@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
@@ -6172,7 +6226,7 @@ color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-colord@^2.9.1:
+colord@^2.9.1, colord@^2.9.3:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
   integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
@@ -6520,6 +6574,16 @@ cosmiconfig@^8.0.0:
     parse-json "^5.2.0"
     path-type "^4.0.0"
 
+cosmiconfig@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d"
+  integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==
+  dependencies:
+    env-paths "^2.2.1"
+    import-fresh "^3.3.0"
+    js-yaml "^4.1.0"
+    parse-json "^5.2.0"
+
 crc32-stream@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-3.0.1.tgz#cae6eeed003b0e44d739d279de5ae63b171b4e85"
@@ -6566,6 +6630,20 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cross-domain-safe-weakmap@^1, cross-domain-safe-weakmap@^1.0.1:
+  version "1.0.29"
+  resolved "https://registry.yarnpkg.com/cross-domain-safe-weakmap/-/cross-domain-safe-weakmap-1.0.29.tgz#0847975c27d9e1cc840f24c1745311958df98022"
+  integrity sha512-VLoUgf2SXnf3+na8NfeUFV59TRZkIJqCIATaMdbhccgtnTlSnHXkyTRwokngEGYdQXx8JbHT9GDYitgR2sdjuA==
+  dependencies:
+    cross-domain-utils "^2.0.0"
+
+cross-domain-utils@^2, cross-domain-utils@^2.0.0:
+  version "2.0.38"
+  resolved "https://registry.yarnpkg.com/cross-domain-utils/-/cross-domain-utils-2.0.38.tgz#2eaf321c4dfdb61596805ca4233fde4400cb6377"
+  integrity sha512-zZfi3+2EIR9l4chrEiXI2xFleyacsJf8YMLR1eJ0Veb5FTMXeJ3DpxDjZkto2FhL/g717WSELqbptNSo85UJDw==
+  dependencies:
+    zalgo-promise "^1.0.11"
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -6646,6 +6724,11 @@ css-declaration-sorter@^6.3.0:
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz#72ebd995c8f4532ff0036631f7365cce9759df14"
   integrity sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==
 
+css-functions-list@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.2.tgz#9a54c6dd8416ed25c1079cd88234e927526c1922"
+  integrity sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==
+
 css-has-pseudo@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz#57f6be91ca242d5c9020ee3e51bbb5b89fc7af73"
@@ -6736,6 +6819,14 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-tree@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
+  integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
+  dependencies:
+    mdn-data "2.0.30"
+    source-map-js "^1.0.1"
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -7641,7 +7732,7 @@ env-ci@^8.0.0:
     execa "^6.1.0"
     java-properties "^1.0.2"
 
-env-paths@^2.2.0:
+env-paths@^2.2.0, env-paths@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
@@ -7983,10 +8074,10 @@ eslint-plugin-jsx-a11y@^6.5.1:
     minimatch "^3.1.2"
     semver "^6.3.0"
 
-eslint-plugin-react-hooks@^4.2.0, eslint-plugin-react-hooks@^4.3.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
-  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+eslint-plugin-react-hooks@^4.2.0, eslint-plugin-react-hooks@^4.3.0, eslint-plugin-react-hooks@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596"
+  integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
 
 eslint-plugin-react@^7.27.1, eslint-plugin-react@^7.31.10:
   version "7.32.2"
@@ -8508,10 +8599,10 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.9:
-  version "3.2.11"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
-  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
+fast-glob@^3.2.11, fast-glob@^3.2.5, fast-glob@^3.2.9, fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -8534,7 +8625,7 @@ fast-safe-stringify@^2.0.7:
   resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
   integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
 
-fastest-levenshtein@^1.0.12:
+fastest-levenshtein@^1.0.12, fastest-levenshtein@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
@@ -8596,6 +8687,13 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-entry-cache@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-9.0.0.tgz#4478e7ceaa5191fa9676a2daa7030211c31b1e7e"
+  integrity sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==
+  dependencies:
+    flat-cache "^5.0.0"
+
 file-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
@@ -8734,15 +8832,23 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
+flat-cache@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-5.0.0.tgz#26c4da7b0f288b408bb2b506b2cb66c240ddf062"
+  integrity sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==
+  dependencies:
+    flatted "^3.3.1"
+    keyv "^4.5.4"
+
 flat@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
-flatted@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.0.tgz#a5d06b4a8b01e3a63771daa5cb7a1903e2e57067"
-  integrity sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==
+flatted@^3.1.0, flatted@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 flow-parser@0.*:
   version "0.144.0"
@@ -9262,6 +9368,11 @@ globby@^11.0.0, globby@^11.0.1, globby@^11.0.4, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+globjoin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
+  integrity sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
+
 globule@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.1.tgz#90a25338f22b7fbeb527cee63c629aea754d33b9"
@@ -9614,6 +9725,11 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
+html-tags@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
+  integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
+
 html-webpack-plugin@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
@@ -9908,10 +10024,10 @@ ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
-  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+ignore@^5.2.0, ignore@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
 immer@^9.0.7:
   version "9.0.15"
@@ -11447,6 +11563,11 @@ json-buffer@3.0.0:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.0.tgz#5b1f397afc75d677bde8bcfc0e47e1f9a3d9a898"
   integrity sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=
 
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
 json-parse-better-errors@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -11592,6 +11713,13 @@ keyv@^3.0.0:
   dependencies:
     json-buffer "3.0.0"
 
+keyv@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -11626,6 +11754,11 @@ klona@^2.0.4, klona@^2.0.5:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
+known-css-properties@^0.31.0:
+  version "0.31.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.31.0.tgz#5c8d9d8777b3ca09482b2397f6a241e5d69a1023"
+  integrity sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==
+
 labeled-stream-splicer@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/labeled-stream-splicer/-/labeled-stream-splicer-2.0.2.tgz#42a41a16abcd46fd046306cf4f2c3576fffb1c21"
@@ -12371,6 +12504,11 @@ mathjs@^9.4.2:
     tiny-emitter "^2.1.0"
     typed-function "^2.0.0"
 
+mathml-tag-names@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
+  integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -12385,6 +12523,11 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+mdn-data@2.0.30:
+  version "2.0.30"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
+  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
+
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -12412,6 +12555,11 @@ memoize-one@^5.0.1, memoize-one@^5.1.1:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
+meow@^13.2.0:
+  version "13.2.0"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-13.2.0.tgz#6b7d63f913f984063b3cc261b6e8800c4cd3474f"
+  integrity sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==
+
 meow@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
@@ -12483,7 +12631,7 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
+micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.7:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -12837,10 +12985,10 @@ nanoid@3.3.3:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
   integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
 
-nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -13919,10 +14067,10 @@ picocolors@^0.2.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
   integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
 
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+picocolors@^1.0.0, picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
@@ -13988,6 +14136,17 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+post-robot@^10.0.46:
+  version "10.0.46"
+  resolved "https://registry.yarnpkg.com/post-robot/-/post-robot-10.0.46.tgz#39cea5b51033729390fc7c90be3285cd285f0377"
+  integrity sha512-EgVJiuvI4iRWDZvzObWes0X/n8olWBEJWxlSw79zmhpgkigX8UsVL4VOBhVtoJKwf0Y9qP9g2zOONw1rv80QbA==
+  dependencies:
+    belter "^1.0.41"
+    cross-domain-safe-weakmap "^1.0.1"
+    cross-domain-utils "^2.0.0"
+    universal-serialize "^1.0.4"
+    zalgo-promise "^1.0.3"
+
 postcss-attribute-case-insensitive@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
@@ -14497,6 +14656,16 @@ postcss-replace-overflow-wrap@^4.0.0:
   resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
   integrity sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==
 
+postcss-resolve-nested-selector@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
+  integrity sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==
+
+postcss-safe-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz#6273d4e5149e286db5a45bc6cf6eafcad464014a"
+  integrity sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==
+
 postcss-selector-not@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz#8f0a709bf7d4b45222793fc34409be407537556d"
@@ -14504,14 +14673,19 @@ postcss-selector-not@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.0.10"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
-  version "6.0.10"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
-  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9, postcss-selector-parser@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz#49694cb4e7c649299fea510a29fa6577104bcf53"
+  integrity sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-styled-jsx@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-styled-jsx/-/postcss-styled-jsx-1.0.1.tgz#07c17ca3bc574a06627103bb5dd475006c2d0d9e"
+  integrity sha512-508Vg2A0pHQstRxz8eoNYiT+RiCZdgE4EqN0x8oiPIZ/a6pp5q2NYefL39RRG8ORlxDehLHU3u/EOpux0kuATQ==
+
 postcss-svgo@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
@@ -14520,6 +14694,11 @@ postcss-svgo@^5.1.0:
     postcss-value-parser "^4.2.0"
     svgo "^2.7.0"
 
+postcss-syntax@^0.36.2:
+  version "0.36.2"
+  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
+  integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==
+
 postcss-unique-selectors@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz#a9f273d1eacd09e9aa6088f4b0507b18b1b541b6"
@@ -14540,14 +14719,14 @@ postcss@^7.0.35:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.4, postcss@^8.4.7:
-  version "8.4.16"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
-  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
+postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.38, postcss@^8.4.4, postcss@^8.4.7:
+  version "8.4.38"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
+  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
   dependencies:
-    nanoid "^3.3.4"
+    nanoid "^3.3.7"
     picocolors "^1.0.0"
-    source-map-js "^1.0.2"
+    source-map-js "^1.2.0"
 
 postinstall-postinstall@^2.1.0:
   version "2.1.0"
@@ -16168,6 +16347,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
 signale@^1.2.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/signale/-/signale-1.4.0.tgz#c4be58302fb0262ac00fc3d886a7c113759042f1"
@@ -16311,10 +16495,10 @@ source-map-explorer@^2.1.0:
     temp "^0.9.1"
     yargs "^15.3.1"
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
-  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+source-map-js@^1.0.1, source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
 source-map-loader@^3.0.0:
   version "3.0.1"
@@ -16764,10 +16948,10 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
-  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
   dependencies:
     ansi-regex "^6.0.1"
 
@@ -16850,6 +17034,56 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
+stylelint-use-logical@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/stylelint-use-logical/-/stylelint-use-logical-2.1.2.tgz#60296915cc27aa1292fbff9a29391c9a1d877563"
+  integrity sha512-4ffvPNk/swH4KS3izExWuzQOuzLmi0gb0uOhvxWJ20vDA5W5xKCjcHHtLoAj1kKvTIX6eGIN5xGtaVin9PD0wg==
+
+stylelint@^16.3.1:
+  version "16.6.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-16.6.1.tgz#84735aca2bb5cde535572b7a9b878d2ec983a570"
+  integrity sha512-yNgz2PqWLkhH2hw6X9AweV9YvoafbAD5ZsFdKN9BvSDVwGvPh+AUIrn7lYwy1S7IHmtFin75LLfX1m0D2tHu8Q==
+  dependencies:
+    "@csstools/css-parser-algorithms" "^2.6.3"
+    "@csstools/css-tokenizer" "^2.3.1"
+    "@csstools/media-query-list-parser" "^2.1.11"
+    "@csstools/selector-specificity" "^3.1.1"
+    "@dual-bundle/import-meta-resolve" "^4.1.0"
+    balanced-match "^2.0.0"
+    colord "^2.9.3"
+    cosmiconfig "^9.0.0"
+    css-functions-list "^3.2.2"
+    css-tree "^2.3.1"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    fastest-levenshtein "^1.0.16"
+    file-entry-cache "^9.0.0"
+    global-modules "^2.0.0"
+    globby "^11.1.0"
+    globjoin "^0.1.4"
+    html-tags "^3.3.1"
+    ignore "^5.3.1"
+    imurmurhash "^0.1.4"
+    is-plain-object "^5.0.0"
+    known-css-properties "^0.31.0"
+    mathml-tag-names "^2.1.3"
+    meow "^13.2.0"
+    micromatch "^4.0.7"
+    normalize-path "^3.0.0"
+    picocolors "^1.0.1"
+    postcss "^8.4.38"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-safe-parser "^7.0.0"
+    postcss-selector-parser "^6.1.0"
+    postcss-value-parser "^4.2.0"
+    resolve-from "^5.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^7.1.0"
+    supports-hyperlinks "^3.0.0"
+    svg-tags "^1.0.0"
+    table "^6.8.2"
+    write-file-atomic "^5.0.1"
+
 stylis-rule-sheet@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
@@ -16903,6 +17137,14 @@ supports-hyperlinks@^2.0.0, supports-hyperlinks@^2.3.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+supports-hyperlinks@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz#c711352a5c89070779b4dad54c05a2f14b15c94b"
+  integrity sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -16913,6 +17155,11 @@ svg-parser@^2.0.2:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
+
 svgo@^1.2.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
@@ -16957,17 +17204,16 @@ syntax-error@^1.1.1:
   dependencies:
     acorn-node "^1.2.0"
 
-table@^6.0.9:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
-  integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
+table@^6.0.9, table@^6.8.2:
+  version "6.8.2"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58"
+  integrity sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==
   dependencies:
     ajv "^8.0.1"
-    lodash.clonedeep "^4.5.0"
     lodash.truncate "^4.4.2"
     slice-ansi "^4.0.0"
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
+    string-width "^4.2.3"
+    strip-ansi "^6.0.1"
 
 tailwindcss@^3.0.2:
   version "3.1.8"
@@ -17635,6 +17881,11 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
+universal-serialize@^1.0.4:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/universal-serialize/-/universal-serialize-1.0.10.tgz#3279bb30f47290ea479f45135620f98fa9d3f3a6"
+  integrity sha512-FdouA4xSFa0fudk1+z5vLWtxZCoC0Q9lKYV3uUdFl7DttNfolmiw2ASr5ddY+/Yz6Isr68u3IqC9XMSwMP+Pow==
+
 universal-user-agent@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.1.tgz#15f20f55da3c930c57bddbf1734c6654d5fd35aa"
@@ -18511,6 +18762,14 @@ write-file-atomic@^4.0.0, write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
+write-file-atomic@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-5.0.1.tgz#68df4717c55c6fa4281a7860b4c2ba0a6d2b11e7"
+  integrity sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^4.0.1"
+
 ws@^5.2.0:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.4.tgz#c7bea9f1cfb5f410de50e70e82662e562113f9a7"
@@ -18703,6 +18962,11 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.1.1.tgz#fef65ce3ac9f8a32ceac5a634f74e17e5b232110"
   integrity sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==
 
+zalgo-promise@^1, zalgo-promise@^1.0.11, zalgo-promise@^1.0.3:
+  version "1.0.48"
+  resolved "https://registry.yarnpkg.com/zalgo-promise/-/zalgo-promise-1.0.48.tgz#9e33eef502d5ed9f5a09fc5728c833c3e87afa2e"
+  integrity sha512-LLHANmdm53+MucY9aOFIggzYtUdkSBFxUsy4glTTQYNyK6B3uCPWTbfiGvSrEvLojw0mSzyFJ1/RRLv+QMNdzQ==
+
 zip-stream@^2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-2.1.3.tgz#26cc4bdb93641a8590dd07112e1f77af1758865b"