From dc4430f494c26f63d725d389df07995abcba99c2 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Thu, 29 Jun 2023 13:44:18 +0200
Subject: [PATCH 01/19] fix: dimension item design

---
 .../DimensionsPanel/List/DimensionItem.js     |  53 +++----
 .../DimensionsPanel/List/OptionsButton.js     |  31 +++-
 .../List/styles/DimensionItem.style.js        | 137 +++++++++---------
 .../List/styles/DimensionList.style.js        |   5 +-
 4 files changed, 120 insertions(+), 106 deletions(-)

diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js
index 7b3bd648b..0fd402b80 100644
--- a/src/components/DimensionsPanel/List/DimensionItem.js
+++ b/src/components/DimensionsPanel/List/DimensionItem.js
@@ -8,7 +8,7 @@ import {
 } from '../../../modules/predefinedDimensions.js'
 import OptionsButton from './OptionsButton.js'
 import RecommendedIcon from './RecommendedIcon.js'
-import { styles } from './styles/DimensionItem.style.js'
+import styles from './styles/DimensionItem.style.js'
 
 class DimensionItem extends Component {
     state = { mouseOver: false }
@@ -27,26 +27,16 @@ class DimensionItem extends Component {
     getDimensionIcon = () => {
         const Icon = getPredefinedDimensionProp(this.props.id, 'icon')
         return Icon ? (
-            <Icon style={styles.fixedDimensionIcon} />
+            <Icon className="fixed-dimension-icon" />
         ) : (
-            <DynamicDimensionIcon style={styles.dynamicDimensionIcon} />
+            <DynamicDimensionIcon className="dynamic-dimension-icon" />
         )
     }
 
     getDimensionType = () => {
-        const { id, name, isDeactivated } = this.props
+        const { id, name } = this.props
 
-        return (
-            <span
-                data-dimensionid={id}
-                style={{
-                    ...styles.text,
-                    ...(isDeactivated ? styles.textDeactivated : {}),
-                }}
-            >
-                {name}
-            </span>
-        )
+        return <span data-dimensionid={id}>{name}</span>
     }
 
     render() {
@@ -59,17 +49,12 @@ class DimensionItem extends Component {
             onClick,
             onOptionsClick,
             innerRef,
-            style,
             dataTest,
             ...rest
         } = this.props
 
         const Icon = this.getDimensionIcon()
         const Label = this.getDimensionType()
-        const itemStyle =
-            isSelected && !isDeactivated
-                ? { ...styles.item, ...styles.selected }
-                : styles.item
 
         const optionsRef = createRef()
 
@@ -87,24 +72,25 @@ class DimensionItem extends Component {
                 onMouseOver={this.onMouseOver}
                 onMouseLeave={this.onMouseExit}
                 ref={innerRef}
-                style={Object.assign(
-                    {},
-                    itemStyle,
-                    style,
-                    !isDeactivated && styles.clickable
-                )}
+                className={`
+                item 
+                ${!isDeactivated ? `clickable` : `deactivated`}
+                ${isSelected && !isDeactivated ? `selected` : ``}
+                `}
                 data-test={dataTest}
                 onClick={onLabelClick}
                 {...rest}
             >
                 <div
-                    className="label"
+                    className={`
+                    label
+                    ${isDeactivated ? `label-deactivated` : ``}
+                    `}
                     tabIndex={0}
-                    style={styles.label}
                     data-test={`${dataTest}-button-${id}`}
                 >
-                    <div style={styles.iconWrapper}>{Icon}</div>
-                    <div style={styles.labelWrapper}>
+                    <div className="icon-wrapper">{Icon}</div>
+                    <div className="label-wrapper">
                         {Label}
                         <RecommendedIcon
                             isRecommended={isRecommended}
@@ -112,25 +98,25 @@ class DimensionItem extends Component {
                         />
                     </div>
                     {isLocked && (
-                        <div style={styles.iconWrapper}>
+                        <div className="lock-wrapper">
                             <IconLock16 />
                         </div>
                     )}
                 </div>
                 {onOptionsClick ? (
                     <div
-                        style={styles.optionsWrapper}
+                        className="options-wrapper"
                         ref={optionsRef}
                         data-test={`${dataTest}-menu-${id}`}
                     >
                         {this.state.mouseOver && !isDeactivated && !isLocked ? (
                             <OptionsButton
-                                style={styles.optionsButton}
                                 onClick={this.onOptionsClick(id, optionsRef)}
                             />
                         ) : null}
                     </div>
                 ) : null}
+                <style jsx>{styles}</style>
             </li>
         )
     }
@@ -145,7 +131,6 @@ DimensionItem.propTypes = {
     isDeactivated: PropTypes.bool,
     isLocked: PropTypes.bool,
     isRecommended: PropTypes.bool,
-    style: PropTypes.object,
     onClick: PropTypes.func,
     onOptionsClick: PropTypes.func,
 }
diff --git a/src/components/DimensionsPanel/List/OptionsButton.js b/src/components/DimensionsPanel/List/OptionsButton.js
index 0686000a2..202bada66 100644
--- a/src/components/DimensionsPanel/List/OptionsButton.js
+++ b/src/components/DimensionsPanel/List/OptionsButton.js
@@ -2,14 +2,35 @@ import { IconMore16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const OptionsButton = ({ style, onClick }) => (
-    <button style={style} onClick={onClick}>
-        <IconMore16 />
-    </button>
+const OptionsButton = ({ onClick }) => (
+    <>
+        <button onClick={onClick}>
+            <IconMore16 />
+        </button>
+        <style jsx>
+            {`
+                button {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 20px;
+                    width: 20px;
+                    padding: 0;
+                    border: none;
+                    background: none;
+                    outline: none;
+                    cursor: pointer;
+                    border-radius: 4px;
+                }
+                button:hover {
+                    background-color: rgba(0, 0, 0, 0.12);
+                }
+            `}
+        </style>
+    </>
 )
 
 OptionsButton.propTypes = {
-    style: PropTypes.object,
     onClick: PropTypes.func,
 }
 
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
index c0a7ebd33..632be2ac5 100644
--- a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
+++ b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
@@ -1,67 +1,74 @@
 import { colors, theme } from '@dhis2/ui'
+import css from 'styled-jsx/css'
 
-export const styles = {
-    labelWrapper: {
-        padding: '2px 5px 2px 0',
-    },
-    text: {
-        color: colors.grey900,
-        userSelect: 'none',
-        wordBreak: 'break-word',
-        fontSize: '14px',
-    },
-    textDeactivated: {
-        cursor: 'auto',
-        color: colors.grey500,
-    },
-    item: {
-        display: 'flex',
-        minHeight: '24px',
-        marginTop: 3,
-        marginBottom: 3,
-        alignItems: 'center',
-        borderRadius: '2px',
-    },
-    clickable: {
-        cursor: 'pointer',
-    },
-    selected: {
-        backgroundColor: theme.secondary100,
-        fontWeight: 500,
-    },
-    fixedDimensionIcon: {
-        paddingLeft: '6px',
-        paddingBottom: '2px',
-    },
-    dynamicDimensionIcon: {
-        paddingLeft: '9px',
-        paddingRight: '9px',
-    },
-    iconWrapper: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '3px 8px 0 8px',
-    },
-    optionsWrapper: {
-        position: 'relative',
-        left: '5px',
-        width: '20px',
-        height: '20px',
-    },
-    optionsButton: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '20px',
-        width: '20px',
-        padding: 0,
-        border: 'none',
-        background: 'none',
-        outline: 'none',
-        cursor: 'pointer',
-    },
-    label: {
-        display: 'flex',
-        outline: 'none',
-    },
-}
+export default css`
+    .label {
+        display: flex;
+        outline: none;
+        color: ${colors.grey900};
+        user-select: none;
+        word-break: break-word;
+        font-size: 14px;
+    }
+    .label-wrapper {
+        padding: 2px 5px 2px 0;
+    }
+    .item {
+        display: flex;
+        min-height: 24px;
+        margin-top: 3px;
+        margin-bottom: 3px;
+        align-items: center;
+        border-radius: 2px;
+    }
+    .item:hover {
+        background-color: ${colors.grey200};
+    }
+    .item:active {
+        background-color: ${colors.grey300};
+    }
+    .deactivated {
+        color: ${colors.grey500};
+    }
+    .deactivated:hover {
+        background-color: transparent;
+        cursor: not-allowed;
+    }
+    .label-deactivated {
+        color: ${colors.grey500};
+    }
+    .clickable {
+        cursor: pointer;
+    }
+    .selected {
+        background-color: ${theme.secondary100};
+        font-weight: 500;
+    }
+    .selected:hover {
+        background-color: ${theme.secondary200};
+    }
+    .fixed-dimension-icon {
+        padding-left: 6px;
+        padding-bottom: 2px;
+    }
+    .dynamic-dimension-icon {
+        padding-left: 9px;
+        padding-right: 9px;
+    }
+    .icon-wrapper {
+        display: flex;
+        flex-direction: column;
+        padding: 3px 8px 0 8px;
+    }
+    .lock-wrapper {
+        display: flex;
+        align-items: center;
+        color: ${colors.grey600};
+    }
+    .options-wrapper {
+        position: relative;
+        left: 5px;
+        width: 20px;
+        height: 20px;
+    }
+`
diff --git a/src/components/DimensionsPanel/List/styles/DimensionList.style.js b/src/components/DimensionsPanel/List/styles/DimensionList.style.js
index de1760c82..571e7e7ef 100644
--- a/src/components/DimensionsPanel/List/styles/DimensionList.style.js
+++ b/src/components/DimensionsPanel/List/styles/DimensionList.style.js
@@ -26,9 +26,10 @@ export default css`
     .header {
         text-transform: uppercase;
         font-size: 11px;
-        color: ${colors.grey700};
-        margin: 5px 0;
+        color: ${colors.grey600};
+        margin: 0 0 ${spacers.dp8} 0;
         letter-spacing: 0.3px;
+        font-weight: 400;
     }
     .section:not(:last-child) {
         margin-bottom: ${spacers.dp24};

From a3cbc548777dae860bf3c1e2dba7a28bec6637cc Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Thu, 29 Jun 2023 15:04:34 +0200
Subject: [PATCH 02/19] chore: update test snapshots

---
 .../__snapshots__/DimensionItem.spec.js.snap  | 309 ++++--------------
 1 file changed, 72 insertions(+), 237 deletions(-)

diff --git a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
index 1c33a04bf..b9ff35cd2 100644
--- a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
+++ b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
@@ -2,68 +2,37 @@
 
 exports[`DimensionItem matches the snapshot 1`] = `
 <li
+  className="
+                item 
+                clickable
+                
+                "
   name="Period"
   onClick={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "borderRadius": "2px",
-      "cursor": "pointer",
-      "display": "flex",
-      "marginBottom": 3,
-      "marginTop": 3,
-      "minHeight": "24px",
-    }
-  }
+  style={Object {}}
 >
   <div
-    className="label"
+    className="
+                    label
+                    
+                    "
     data-test="undefined-button-pe"
-    style={
-      Object {
-        "display": "flex",
-        "outline": "none",
-      }
-    }
     tabIndex={0}
   >
     <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
-          "padding": "3px 8px 0 8px",
-        }
-      }
+      className="icon-wrapper"
     >
       <SvgClock16
-        style={
-          Object {
-            "paddingBottom": "2px",
-            "paddingLeft": "6px",
-          }
-        }
+        className="fixed-dimension-icon"
       />
     </div>
     <div
-      style={
-        Object {
-          "padding": "2px 5px 2px 0",
-        }
-      }
+      className="label-wrapper"
     >
       <span
         data-dimensionid="pe"
-        style={
-          Object {
-            "color": "#212934",
-            "fontSize": "14px",
-            "userSelect": "none",
-            "wordBreak": "break-word",
-          }
-        }
       >
         Period
       </span>
@@ -73,73 +42,43 @@ exports[`DimensionItem matches the snapshot 1`] = `
       />
     </div>
   </div>
+  <style />
 </li>
 `;
 
 exports[`DimensionItem matches the snapshot with locked 1`] = `
 <li
+  className="
+                item 
+                clickable
+                
+                "
   name="Period"
   onClick={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "borderRadius": "2px",
-      "cursor": "pointer",
-      "display": "flex",
-      "marginBottom": 3,
-      "marginTop": 3,
-      "minHeight": "24px",
-    }
-  }
+  style={Object {}}
 >
   <div
-    className="label"
+    className="
+                    label
+                    
+                    "
     data-test="undefined-button-pe"
-    style={
-      Object {
-        "display": "flex",
-        "outline": "none",
-      }
-    }
     tabIndex={0}
   >
     <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
-          "padding": "3px 8px 0 8px",
-        }
-      }
+      className="icon-wrapper"
     >
       <SvgClock16
-        style={
-          Object {
-            "paddingBottom": "2px",
-            "paddingLeft": "6px",
-          }
-        }
+        className="fixed-dimension-icon"
       />
     </div>
     <div
-      style={
-        Object {
-          "padding": "2px 5px 2px 0",
-        }
-      }
+      className="label-wrapper"
     >
       <span
         data-dimensionid="pe"
-        style={
-          Object {
-            "color": "#212934",
-            "fontSize": "14px",
-            "userSelect": "none",
-            "wordBreak": "break-word",
-          }
-        }
       >
         Period
       </span>
@@ -149,84 +88,48 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
       />
     </div>
     <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
-          "padding": "3px 8px 0 8px",
-        }
-      }
+      className="lock-wrapper"
     >
       <SvgLock16 />
     </div>
   </div>
+  <style />
 </li>
 `;
 
 exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
 <li
+  className="
+                item 
+                clickable
+                
+                "
   name="Period"
   onClick={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "borderRadius": "2px",
-      "cursor": "pointer",
-      "display": "flex",
-      "marginBottom": 3,
-      "marginTop": 3,
-      "minHeight": "24px",
-    }
-  }
+  style={Object {}}
 >
   <div
-    className="label"
+    className="
+                    label
+                    
+                    "
     data-test="undefined-button-pe"
-    style={
-      Object {
-        "display": "flex",
-        "outline": "none",
-      }
-    }
     tabIndex={0}
   >
     <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
-          "padding": "3px 8px 0 8px",
-        }
-      }
+      className="icon-wrapper"
     >
       <SvgClock16
-        style={
-          Object {
-            "paddingBottom": "2px",
-            "paddingLeft": "6px",
-          }
-        }
+        className="fixed-dimension-icon"
       />
     </div>
     <div
-      style={
-        Object {
-          "padding": "2px 5px 2px 0",
-        }
-      }
+      className="label-wrapper"
     >
       <span
         data-dimensionid="pe"
-        style={
-          Object {
-            "color": "#212934",
-            "fontSize": "14px",
-            "userSelect": "none",
-            "wordBreak": "break-word",
-          }
-        }
       >
         Period
       </span>
@@ -237,83 +140,46 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
     </div>
   </div>
   <div
+    className="options-wrapper"
     data-test="undefined-menu-pe"
-    style={
-      Object {
-        "height": "20px",
-        "left": "5px",
-        "position": "relative",
-        "width": "20px",
-      }
-    }
   />
+  <style />
 </li>
 `;
 
 exports[`DimensionItem matches the snapshot with recommended 1`] = `
 <li
+  className="
+                item 
+                clickable
+                
+                "
   name="Period"
   onClick={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "borderRadius": "2px",
-      "cursor": "pointer",
-      "display": "flex",
-      "marginBottom": 3,
-      "marginTop": 3,
-      "minHeight": "24px",
-    }
-  }
+  style={Object {}}
 >
   <div
-    className="label"
+    className="
+                    label
+                    
+                    "
     data-test="undefined-button-pe"
-    style={
-      Object {
-        "display": "flex",
-        "outline": "none",
-      }
-    }
     tabIndex={0}
   >
     <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
-          "padding": "3px 8px 0 8px",
-        }
-      }
+      className="icon-wrapper"
     >
       <SvgClock16
-        style={
-          Object {
-            "paddingBottom": "2px",
-            "paddingLeft": "6px",
-          }
-        }
+        className="fixed-dimension-icon"
       />
     </div>
     <div
-      style={
-        Object {
-          "padding": "2px 5px 2px 0",
-        }
-      }
+      className="label-wrapper"
     >
       <span
         data-dimensionid="pe"
-        style={
-          Object {
-            "color": "#212934",
-            "fontSize": "14px",
-            "userSelect": "none",
-            "wordBreak": "break-word",
-          }
-        }
       >
         Period
       </span>
@@ -323,75 +189,43 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
       />
     </div>
   </div>
+  <style />
 </li>
 `;
 
 exports[`DimensionItem matches the snapshot with selected 1`] = `
 <li
+  className="
+                item 
+                clickable
+                selected
+                "
   name="Period"
   onClick={[Function]}
   onMouseLeave={[Function]}
   onMouseOver={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#e0f2f1",
-      "borderRadius": "2px",
-      "cursor": "pointer",
-      "display": "flex",
-      "fontWeight": 500,
-      "marginBottom": 3,
-      "marginTop": 3,
-      "minHeight": "24px",
-    }
-  }
+  style={Object {}}
 >
   <div
-    className="label"
+    className="
+                    label
+                    
+                    "
     data-test="undefined-button-pe"
-    style={
-      Object {
-        "display": "flex",
-        "outline": "none",
-      }
-    }
     tabIndex={0}
   >
     <div
-      style={
-        Object {
-          "display": "flex",
-          "flexDirection": "column",
-          "padding": "3px 8px 0 8px",
-        }
-      }
+      className="icon-wrapper"
     >
       <SvgClock16
-        style={
-          Object {
-            "paddingBottom": "2px",
-            "paddingLeft": "6px",
-          }
-        }
+        className="fixed-dimension-icon"
       />
     </div>
     <div
-      style={
-        Object {
-          "padding": "2px 5px 2px 0",
-        }
-      }
+      className="label-wrapper"
     >
       <span
         data-dimensionid="pe"
-        style={
-          Object {
-            "color": "#212934",
-            "fontSize": "14px",
-            "userSelect": "none",
-            "wordBreak": "break-word",
-          }
-        }
       >
         Period
       </span>
@@ -401,5 +235,6 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
       />
     </div>
   </div>
+  <style />
 </li>
 `;

From 7e5ffa1af92da3400f4b4cfe280cdb951d1366f5 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Fri, 15 Dec 2023 15:24:22 +0100
Subject: [PATCH 03/19] fix: update dimension chip style

---
 src/assets/DynamicDimensionIcon.js            |  57 +++------
 .../DimensionsPanel/List/DimensionItem.js     | 114 ++++++++++--------
 .../DimensionsPanel/List/OptionsButton.js     |   5 +-
 .../DimensionsPanel/List/RecommendedIcon.js   |   1 -
 .../List/styles/DimensionItem.module.css      |  79 ++++++++++++
 .../List/styles/DimensionItem.style.js        |  74 ------------
 .../List/styles/DimensionList.style.js        |   3 +
 .../List/styles/RecommendedIcon.style.js      |   8 +-
 .../styles/DimensionsPanel.style.js           |   2 +-
 9 files changed, 172 insertions(+), 171 deletions(-)
 create mode 100644 src/components/DimensionsPanel/List/styles/DimensionItem.module.css
 delete mode 100644 src/components/DimensionsPanel/List/styles/DimensionItem.style.js

diff --git a/src/assets/DynamicDimensionIcon.js b/src/assets/DynamicDimensionIcon.js
index 83d6c678d..8fbeb84ab 100644
--- a/src/assets/DynamicDimensionIcon.js
+++ b/src/assets/DynamicDimensionIcon.js
@@ -3,49 +3,24 @@ import React from 'react'
 const DynamicDimensionIcon = () => {
     return (
         <svg
-            width="16px"
-            height="16px"
-            viewBox="0 0 16 16"
-            version="1.1"
+            width="16"
+            height="16"
+            fill="none"
             xmlns="http://www.w3.org/2000/svg"
         >
-            <g
-                id="Exp"
-                stroke="none"
-                strokeWidth="1"
-                fill="none"
-                fillRule="evenodd"
-            >
-                <g id="Artboard" transform="translate(-80.000000, -9.000000)">
-                    <g
-                        id="icon_dimension_new"
-                        transform="translate(80.000000, 9.000000)"
-                    >
-                        <rect id="frame" x="0" y="0" width="16" height="16" />
-                        <g
-                            id="module"
-                            transform="translate(4.000000, 4.000000)"
-                            stroke="#000000"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                        >
-                            <path
-                                d="M0.33209728,1.1742111 L3.16308174,0.0641666694 C3.37911767,-0.0213888898 3.61963794,-0.0213888898 3.83567387,0.0641666694 L6.66665833,1.1742111 C6.87300668,1.26220739 7.00497003,1.467 6.99984343,1.69127776 L6.99984343,5.30887771 C7.00517859,5.53285411 6.87376309,5.73756106 6.66790272,5.82594437 L3.83691826,6.93629991 C3.62076407,7.02123336 3.38048032,7.02123336 3.16432613,6.93629991 L0.333341668,5.82594437 C0.126993317,5.73794808 -0.00497002591,5.53315547 0.000156574133,5.30887771 L0.000156574133,1.69127776 C-0.00517858533,1.46730136 0.126236906,1.26259441 0.33209728,1.1742111 Z"
-                                id="Shape"
-                            />
-                            <path
-                                d="M3.5,2.72795833 L0.322,1.48195833"
-                                id="Shape"
-                            />
-                            <path
-                                d="M3.5,2.72795833 L6.678,1.48195833"
-                                id="Shape"
-                            />
-                            <path d="M3.5,6.78125 L3.5,2.72795833" id="Shape" />
-                        </g>
-                    </g>
-                </g>
-            </g>
+            <path
+                clipRule="evenodd"
+                d="m4.832 5.674 2.831-1.11a.913.913 0 0 1 .673 0l2.83 1.11a.548.548 0 0 1 .334.517V9.81a.548.548 0 0 1-.332.517l-2.831 1.11a.92.92 0 0 1-.673 0l-2.83-1.11a.548.548 0 0 1-.334-.517V6.19a.548.548 0 0 1 .332-.517Z"
+                stroke="#212934"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M8 7.228 4.822 5.982M8 7.228l3.178-1.246M8 11.281V7.228"
+                stroke="#212934"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
         </svg>
     )
 }
diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js
index 0fd402b80..a4088a8f8 100644
--- a/src/components/DimensionsPanel/List/DimensionItem.js
+++ b/src/components/DimensionsPanel/List/DimensionItem.js
@@ -1,4 +1,5 @@
-import { IconLock16 } from '@dhis2/ui'
+import { CssVariables } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { Component, createRef } from 'react'
 import DynamicDimensionIcon from '../../../assets/DynamicDimensionIcon.js'
@@ -8,7 +9,7 @@ import {
 } from '../../../modules/predefinedDimensions.js'
 import OptionsButton from './OptionsButton.js'
 import RecommendedIcon from './RecommendedIcon.js'
-import styles from './styles/DimensionItem.style.js'
+import style from './styles/DimensionItem.module.css'
 
 class DimensionItem extends Component {
     state = { mouseOver: false }
@@ -27,7 +28,7 @@ class DimensionItem extends Component {
     getDimensionIcon = () => {
         const Icon = getPredefinedDimensionProp(this.props.id, 'icon')
         return Icon ? (
-            <Icon className="fixed-dimension-icon" />
+            <Icon className={style.fixedDimensionIcon} />
         ) : (
             <DynamicDimensionIcon className="dynamic-dimension-icon" />
         )
@@ -58,6 +59,22 @@ class DimensionItem extends Component {
 
         const optionsRef = createRef()
 
+        const LockIcon = (
+            <svg
+                width="7"
+                height="9"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
+                    fill="none"
+                />
+            </svg>
+        )
+
         const onLabelClick = () => {
             if (
                 !isDeactivated &&
@@ -68,56 +85,57 @@ class DimensionItem extends Component {
         }
 
         return (
-            <li
-                onMouseOver={this.onMouseOver}
-                onMouseLeave={this.onMouseExit}
-                ref={innerRef}
-                className={`
-                item 
-                ${!isDeactivated ? `clickable` : `deactivated`}
-                ${isSelected && !isDeactivated ? `selected` : ``}
-                `}
-                data-test={dataTest}
-                onClick={onLabelClick}
-                {...rest}
-            >
-                <div
-                    className={`
-                    label
-                    ${isDeactivated ? `label-deactivated` : ``}
-                    `}
-                    tabIndex={0}
-                    data-test={`${dataTest}-button-${id}`}
+            <>
+                <CssVariables colors />
+                <li
+                    onMouseOver={this.onMouseOver}
+                    onMouseLeave={this.onMouseExit}
+                    ref={innerRef}
+                    className={cx(style.item, {
+                        [style.deactivated]: isDeactivated,
+                        [style.selected]: isSelected && !isDeactivated,
+                    })}
+                    data-test={dataTest}
+                    onClick={onLabelClick}
+                    {...rest}
                 >
-                    <div className="icon-wrapper">{Icon}</div>
-                    <div className="label-wrapper">
-                        {Label}
-                        <RecommendedIcon
-                            isRecommended={isRecommended}
-                            dataTest={`${dataTest}-recommended-icon`}
-                        />
-                    </div>
-                    {isLocked && (
-                        <div className="lock-wrapper">
-                            <IconLock16 />
-                        </div>
-                    )}
-                </div>
-                {onOptionsClick ? (
                     <div
-                        className="options-wrapper"
-                        ref={optionsRef}
-                        data-test={`${dataTest}-menu-${id}`}
+                        className={style.label}
+                        tabIndex={0}
+                        data-test={`${dataTest}-button-${id}`}
                     >
-                        {this.state.mouseOver && !isDeactivated && !isLocked ? (
-                            <OptionsButton
-                                onClick={this.onOptionsClick(id, optionsRef)}
+                        <div className={style.iconWrapper}>{Icon}</div>
+                        <div className={style.labelWrapper}>
+                            <span className={style.labelText}>{Label}</span>
+                            <RecommendedIcon
+                                isRecommended={isRecommended}
+                                dataTest={`${dataTest}-recommended-icon`}
                             />
-                        ) : null}
+                        </div>
                     </div>
-                ) : null}
-                <style jsx>{styles}</style>
-            </li>
+                    {onOptionsClick ? (
+                        <div
+                            className={style.optionsWrapper}
+                            ref={optionsRef}
+                            data-test={`${dataTest}-menu-${id}`}
+                        >
+                            {this.state.mouseOver &&
+                            !isDeactivated &&
+                            !isLocked ? (
+                                <OptionsButton
+                                    onClick={this.onOptionsClick(
+                                        id,
+                                        optionsRef
+                                    )}
+                                />
+                            ) : null}
+                        </div>
+                    ) : null}
+                    {isLocked && (
+                        <div className={style.lockWrapper}>{LockIcon}</div>
+                    )}
+                </li>
+            </>
         )
     }
 }
diff --git a/src/components/DimensionsPanel/List/OptionsButton.js b/src/components/DimensionsPanel/List/OptionsButton.js
index 202bada66..b7200ddcf 100644
--- a/src/components/DimensionsPanel/List/OptionsButton.js
+++ b/src/components/DimensionsPanel/List/OptionsButton.js
@@ -20,10 +20,11 @@ const OptionsButton = ({ onClick }) => (
                     background: none;
                     outline: none;
                     cursor: pointer;
-                    border-radius: 4px;
+                    border-top-right-radius: 2px;
+                    border-bottom-left-radius: 2px;
                 }
                 button:hover {
-                    background-color: rgba(0, 0, 0, 0.12);
+                    background-color: rgba(0, 0, 0, 0.09);
                 }
             `}
         </style>
diff --git a/src/components/DimensionsPanel/List/RecommendedIcon.js b/src/components/DimensionsPanel/List/RecommendedIcon.js
index 3a8b75dc9..12609d3a7 100644
--- a/src/components/DimensionsPanel/List/RecommendedIcon.js
+++ b/src/components/DimensionsPanel/List/RecommendedIcon.js
@@ -9,7 +9,6 @@ const RecommendedIcon = ({ isRecommended, dataTest }) =>
         <Tooltip
             content={i18n.t('Dimension recommended with selected data')}
             placement="bottom"
-            maxWidth={160}
         >
             <div style={styles.recommendedIcon} data-test={dataTest} />
         </Tooltip>
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
new file mode 100644
index 000000000..b89b36275
--- /dev/null
+++ b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
@@ -0,0 +1,79 @@
+.item {
+    color: var(--colors-grey900);
+    background-color: transparent;
+    fill: var(--colors-grey800);
+    display: flex;
+    outline: none;
+    justify-content: space-between;
+    padding: 0 0 0 4px;
+    margin: 0;
+    border-radius: 2px;
+    cursor: pointer;
+    min-height: 22px;
+    border: 1px solid transparent;
+}
+
+.item:not(.deactivated):not(.dragging):hover {
+    background-color: var(--colors-grey100);
+    border-color: var(--colors-grey400);
+}
+
+.label {
+    display: flex;
+    align-items: center;
+}
+.labelWrapper {
+    display: flex;
+    align-items: center;
+}
+.labelText {
+    font-size: 13px;
+    line-height: 15px;
+    margin-top: 1px;
+}
+
+.iconWrapper {
+    width: 16px;
+    height: 16px;
+    margin: 2px 4px 0 0;
+    flex: 0 0 auto;
+    align-self: flex-start;
+}
+
+.item.deactivated {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.item.selected {
+    background-color: var(--colors-teal100);
+    border: 1px solid var(--colors-teal200);
+    color: var(--colors-teal900);
+    fill: var(--colors-teal800);
+    font-weight: 400;
+}
+.item.selected:not(.deactivated):hover {
+    background: #cdeae8;
+    border-color: #93c4bf;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.optionsWrapper {
+    width: 20px;
+    height: 20px;
+}
+
+.lockWrapper svg path {
+    fill: var(--colors-grey800);
+}
+.lockWrapper {
+    background: var(--colors-grey300);
+    height: 20px;
+    padding: 0 1px 0 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.item.selected .lockWrapper svg path {
+    fill: var(--colors-teal900);
+}
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
deleted file mode 100644
index 632be2ac5..000000000
--- a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { colors, theme } from '@dhis2/ui'
-import css from 'styled-jsx/css'
-
-export default css`
-    .label {
-        display: flex;
-        outline: none;
-        color: ${colors.grey900};
-        user-select: none;
-        word-break: break-word;
-        font-size: 14px;
-    }
-    .label-wrapper {
-        padding: 2px 5px 2px 0;
-    }
-    .item {
-        display: flex;
-        min-height: 24px;
-        margin-top: 3px;
-        margin-bottom: 3px;
-        align-items: center;
-        border-radius: 2px;
-    }
-    .item:hover {
-        background-color: ${colors.grey200};
-    }
-    .item:active {
-        background-color: ${colors.grey300};
-    }
-    .deactivated {
-        color: ${colors.grey500};
-    }
-    .deactivated:hover {
-        background-color: transparent;
-        cursor: not-allowed;
-    }
-    .label-deactivated {
-        color: ${colors.grey500};
-    }
-    .clickable {
-        cursor: pointer;
-    }
-    .selected {
-        background-color: ${theme.secondary100};
-        font-weight: 500;
-    }
-    .selected:hover {
-        background-color: ${theme.secondary200};
-    }
-    .fixed-dimension-icon {
-        padding-left: 6px;
-        padding-bottom: 2px;
-    }
-    .dynamic-dimension-icon {
-        padding-left: 9px;
-        padding-right: 9px;
-    }
-    .icon-wrapper {
-        display: flex;
-        flex-direction: column;
-        padding: 3px 8px 0 8px;
-    }
-    .lock-wrapper {
-        display: flex;
-        align-items: center;
-        color: ${colors.grey600};
-    }
-    .options-wrapper {
-        position: relative;
-        left: 5px;
-        width: 20px;
-        height: 20px;
-    }
-`
diff --git a/src/components/DimensionsPanel/List/styles/DimensionList.style.js b/src/components/DimensionsPanel/List/styles/DimensionList.style.js
index 571e7e7ef..a7d4e7ded 100644
--- a/src/components/DimensionsPanel/List/styles/DimensionList.style.js
+++ b/src/components/DimensionsPanel/List/styles/DimensionList.style.js
@@ -22,6 +22,9 @@ export default css`
     .list {
         margin: 0;
         padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
     }
     .header {
         text-transform: uppercase;
diff --git a/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js b/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js
index af7fa2d8b..66a385268 100644
--- a/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js
+++ b/src/components/DimensionsPanel/List/styles/RecommendedIcon.style.js
@@ -2,11 +2,11 @@ import { theme } from '@dhis2/ui'
 
 export const styles = {
     recommendedIcon: {
-        backgroundColor: theme.secondary300,
-        height: '8px',
-        width: '8px',
+        backgroundColor: theme.secondary400,
+        height: '6px',
+        width: '6px',
         borderRadius: '4px',
-        marginLeft: '5px',
+        marginLeft: '6px',
         display: 'inline-block',
         cursor: 'pointer',
     },
diff --git a/src/components/DimensionsPanel/styles/DimensionsPanel.style.js b/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
index 8bf0b3294..d6f6b4e10 100644
--- a/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
+++ b/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
@@ -5,7 +5,7 @@ export const styles = {
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: colors.grey050,
+        backgroundColor: colors.white,
         padding: '8px',
         overflow: 'hidden',
     },

From a0e9ba9684778234394747ecb5d08ede638cef56 Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Mon, 18 Dec 2023 11:23:33 +0100
Subject: [PATCH 04/19] fix: append className passed in as prop

---
 .../DimensionsPanel/List/DimensionItem.js          | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js
index a4088a8f8..42e868594 100644
--- a/src/components/DimensionsPanel/List/DimensionItem.js
+++ b/src/components/DimensionsPanel/List/DimensionItem.js
@@ -51,6 +51,7 @@ class DimensionItem extends Component {
             onOptionsClick,
             innerRef,
             dataTest,
+            className,
             ...rest
         } = this.props
 
@@ -91,10 +92,14 @@ class DimensionItem extends Component {
                     onMouseOver={this.onMouseOver}
                     onMouseLeave={this.onMouseExit}
                     ref={innerRef}
-                    className={cx(style.item, {
-                        [style.deactivated]: isDeactivated,
-                        [style.selected]: isSelected && !isDeactivated,
-                    })}
+                    className={cx(
+                        style.item,
+                        {
+                            [style.deactivated]: isDeactivated,
+                            [style.selected]: isSelected && !isDeactivated,
+                        },
+                        className
+                    )}
                     data-test={dataTest}
                     onClick={onLabelClick}
                     {...rest}
@@ -144,6 +149,7 @@ DimensionItem.propTypes = {
     id: PropTypes.string.isRequired,
     isSelected: PropTypes.bool.isRequired, // XXX
     name: PropTypes.string.isRequired,
+    className: PropTypes.string,
     dataTest: PropTypes.string,
     innerRef: PropTypes.func,
     isDeactivated: PropTypes.bool,

From 30b56da57135410ff564d62afb2ea7c22f3445fa Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Mon, 18 Dec 2023 11:24:41 +0100
Subject: [PATCH 05/19] chore: update snapshots

---
 .../__snapshots__/DimensionItem.spec.js.snap  | 391 +++++++++---------
 1 file changed, 190 insertions(+), 201 deletions(-)

diff --git a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
index b9ff35cd2..3465accf1 100644
--- a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
+++ b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
@@ -1,240 +1,229 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DimensionItem matches the snapshot 1`] = `
-<li
-  className="
-                item 
-                clickable
-                
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className=""
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={false}
+        />
+      </div>
     </div>
-    <div
-      className="label-wrapper"
-    >
-      <span
-        data-dimensionid="pe"
-      >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={false}
-      />
-    </div>
-  </div>
-  <style />
-</li>
+  </li>
+</Fragment>
 `;
 
 exports[`DimensionItem matches the snapshot with locked 1`] = `
-<li
-  className="
-                item 
-                clickable
-                
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className=""
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={false}
+        />
+      </div>
     </div>
-    <div
-      className="label-wrapper"
-    >
-      <span
-        data-dimensionid="pe"
+    <div>
+      <svg
+        fill="none"
+        height="9"
+        width="7"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={false}
-      />
-    </div>
-    <div
-      className="lock-wrapper"
-    >
-      <SvgLock16 />
+        <path
+          clipRule="evenodd"
+          d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
+          fill="none"
+          fillRule="evenodd"
+        />
+      </svg>
     </div>
-  </div>
-  <style />
-</li>
+  </li>
+</Fragment>
 `;
 
 exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
-<li
-  className="
-                item 
-                clickable
-                
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className=""
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={false}
+        />
+      </div>
     </div>
     <div
-      className="label-wrapper"
-    >
-      <span
-        data-dimensionid="pe"
-      >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={false}
-      />
-    </div>
-  </div>
-  <div
-    className="options-wrapper"
-    data-test="undefined-menu-pe"
-  />
-  <style />
-</li>
+      data-test="undefined-menu-pe"
+    />
+  </li>
+</Fragment>
 `;
 
 exports[`DimensionItem matches the snapshot with recommended 1`] = `
-<li
-  className="
-                item 
-                clickable
-                
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className=""
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={true}
+        />
+      </div>
     </div>
-    <div
-      className="label-wrapper"
-    >
-      <span
-        data-dimensionid="pe"
-      >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={true}
-      />
-    </div>
-  </div>
-  <style />
-</li>
+  </li>
+</Fragment>
 `;
 
 exports[`DimensionItem matches the snapshot with selected 1`] = `
-<li
-  className="
-                item 
-                clickable
-                selected
-                "
-  name="Period"
-  onClick={[Function]}
-  onMouseLeave={[Function]}
-  onMouseOver={[Function]}
-  style={Object {}}
->
-  <div
-    className="
-                    label
-                    
-                    "
-    data-test="undefined-button-pe"
-    tabIndex={0}
+<Fragment>
+  <CssVariables
+    colors={true}
+    elevations={false}
+    layers={false}
+    spacers={false}
+    theme={false}
+  />
+  <li
+    className="undefined"
+    name="Period"
+    onClick={[Function]}
+    onMouseLeave={[Function]}
+    onMouseOver={[Function]}
+    style={Object {}}
   >
     <div
-      className="icon-wrapper"
-    >
-      <SvgClock16
-        className="fixed-dimension-icon"
-      />
-    </div>
-    <div
-      className="label-wrapper"
+      data-test="undefined-button-pe"
+      tabIndex={0}
     >
-      <span
-        data-dimensionid="pe"
-      >
-        Period
-      </span>
-      <RecommendedIcon
-        dataTest="undefined-recommended-icon"
-        isRecommended={false}
-      />
+      <div>
+        <SvgClock16 />
+      </div>
+      <div>
+        <span>
+          <span
+            data-dimensionid="pe"
+          >
+            Period
+          </span>
+        </span>
+        <RecommendedIcon
+          dataTest="undefined-recommended-icon"
+          isRecommended={false}
+        />
+      </div>
     </div>
-  </div>
-  <style />
-</li>
+  </li>
+</Fragment>
 `;

From 3a6ab365c3f691e952007b3f552c000423c19095 Mon Sep 17 00:00:00 2001
From: Joseph John Aas Cooper <joe@dhis2.org>
Date: Mon, 18 Dec 2023 13:01:06 +0100
Subject: [PATCH 06/19] fix: locked dimension color and story example

---
 src/__demo__/DimensionsPanel.stories.js                       | 1 +
 .../DimensionsPanel/List/styles/DimensionItem.module.css      | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/__demo__/DimensionsPanel.stories.js b/src/__demo__/DimensionsPanel.stories.js
index 6a3fbc6de..71cc1abc6 100644
--- a/src/__demo__/DimensionsPanel.stories.js
+++ b/src/__demo__/DimensionsPanel.stories.js
@@ -94,6 +94,7 @@ storiesOf('DimensionsPanel', module).add('locked dimension', () => {
         <DimensionsPanel
             dimensions={[...fixedDimensions, ...dynamicDimensions]}
             onDimensionClick={onDimensionClick}
+            selectedIds={[DIMENSION_ID_DATA]}
             lockedDimension={(dimension) => dimension === DIMENSION_ID_DATA}
         />
     )
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
index b89b36275..88dc05214 100644
--- a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
+++ b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
@@ -65,6 +65,7 @@
 .lockWrapper svg path {
     fill: var(--colors-grey800);
 }
+
 .lockWrapper {
     background: var(--colors-grey300);
     height: 20px;
@@ -74,6 +75,9 @@
     justify-content: center;
 }
 
+.item.selected .lockWrapper {
+    background: #cbe7e5;
+}
 .item.selected .lockWrapper svg path {
     fill: var(--colors-teal900);
 }

From 52d260820c68977e07c6bd2d7b084f1fb76faa19 Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Fri, 22 Dec 2023 10:24:21 +0100
Subject: [PATCH 07/19] refactor: remove css module

---
 .../DimensionsPanel/List/DimensionItem.js     | 25 +++---
 .../List/styles/DimensionItem.module.css      | 83 -----------------
 .../List/styles/DimensionItem.style.js        | 88 +++++++++++++++++++
 3 files changed, 100 insertions(+), 96 deletions(-)
 delete mode 100644 src/components/DimensionsPanel/List/styles/DimensionItem.module.css
 create mode 100644 src/components/DimensionsPanel/List/styles/DimensionItem.style.js

diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js
index 42e868594..fa309d6f6 100644
--- a/src/components/DimensionsPanel/List/DimensionItem.js
+++ b/src/components/DimensionsPanel/List/DimensionItem.js
@@ -9,7 +9,7 @@ import {
 } from '../../../modules/predefinedDimensions.js'
 import OptionsButton from './OptionsButton.js'
 import RecommendedIcon from './RecommendedIcon.js'
-import style from './styles/DimensionItem.module.css'
+import styles from './styles/DimensionItem.style.js'
 
 class DimensionItem extends Component {
     state = { mouseOver: false }
@@ -28,7 +28,7 @@ class DimensionItem extends Component {
     getDimensionIcon = () => {
         const Icon = getPredefinedDimensionProp(this.props.id, 'icon')
         return Icon ? (
-            <Icon className={style.fixedDimensionIcon} />
+            <Icon className="fixedDimensionIcon" />
         ) : (
             <DynamicDimensionIcon className="dynamic-dimension-icon" />
         )
@@ -93,10 +93,10 @@ class DimensionItem extends Component {
                     onMouseLeave={this.onMouseExit}
                     ref={innerRef}
                     className={cx(
-                        style.item,
+                        'item',
                         {
-                            [style.deactivated]: isDeactivated,
-                            [style.selected]: isSelected && !isDeactivated,
+                            deactivated: isDeactivated,
+                            selected: isSelected && !isDeactivated,
                         },
                         className
                     )}
@@ -105,13 +105,13 @@ class DimensionItem extends Component {
                     {...rest}
                 >
                     <div
-                        className={style.label}
+                        className="label"
                         tabIndex={0}
                         data-test={`${dataTest}-button-${id}`}
                     >
-                        <div className={style.iconWrapper}>{Icon}</div>
-                        <div className={style.labelWrapper}>
-                            <span className={style.labelText}>{Label}</span>
+                        <div className="iconWrapper">{Icon}</div>
+                        <div className="labelWrapper">
+                            <span className="labelText">{Label}</span>
                             <RecommendedIcon
                                 isRecommended={isRecommended}
                                 dataTest={`${dataTest}-recommended-icon`}
@@ -120,7 +120,7 @@ class DimensionItem extends Component {
                     </div>
                     {onOptionsClick ? (
                         <div
-                            className={style.optionsWrapper}
+                            className="optionsWrapper"
                             ref={optionsRef}
                             data-test={`${dataTest}-menu-${id}`}
                         >
@@ -136,10 +136,9 @@ class DimensionItem extends Component {
                             ) : null}
                         </div>
                     ) : null}
-                    {isLocked && (
-                        <div className={style.lockWrapper}>{LockIcon}</div>
-                    )}
+                    {isLocked && <div className="lockWrapper">{LockIcon}</div>}
                 </li>
+                <style jsx>{styles}</style>
             </>
         )
     }
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css b/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
deleted file mode 100644
index 88dc05214..000000000
--- a/src/components/DimensionsPanel/List/styles/DimensionItem.module.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.item {
-    color: var(--colors-grey900);
-    background-color: transparent;
-    fill: var(--colors-grey800);
-    display: flex;
-    outline: none;
-    justify-content: space-between;
-    padding: 0 0 0 4px;
-    margin: 0;
-    border-radius: 2px;
-    cursor: pointer;
-    min-height: 22px;
-    border: 1px solid transparent;
-}
-
-.item:not(.deactivated):not(.dragging):hover {
-    background-color: var(--colors-grey100);
-    border-color: var(--colors-grey400);
-}
-
-.label {
-    display: flex;
-    align-items: center;
-}
-.labelWrapper {
-    display: flex;
-    align-items: center;
-}
-.labelText {
-    font-size: 13px;
-    line-height: 15px;
-    margin-top: 1px;
-}
-
-.iconWrapper {
-    width: 16px;
-    height: 16px;
-    margin: 2px 4px 0 0;
-    flex: 0 0 auto;
-    align-self: flex-start;
-}
-
-.item.deactivated {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.item.selected {
-    background-color: var(--colors-teal100);
-    border: 1px solid var(--colors-teal200);
-    color: var(--colors-teal900);
-    fill: var(--colors-teal800);
-    font-weight: 400;
-}
-.item.selected:not(.deactivated):hover {
-    background: #cdeae8;
-    border-color: #93c4bf;
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.optionsWrapper {
-    width: 20px;
-    height: 20px;
-}
-
-.lockWrapper svg path {
-    fill: var(--colors-grey800);
-}
-
-.lockWrapper {
-    background: var(--colors-grey300);
-    height: 20px;
-    padding: 0 1px 0 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.item.selected .lockWrapper {
-    background: #cbe7e5;
-}
-.item.selected .lockWrapper svg path {
-    fill: var(--colors-teal900);
-}
diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
new file mode 100644
index 000000000..a4e9aed8f
--- /dev/null
+++ b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
@@ -0,0 +1,88 @@
+import { colors } from '@dhis2/ui'
+import css from 'styled-jsx/css'
+
+export default css`
+    .item {
+        color: ${colors.grey900};
+        background-color: transparent;
+        fill: ${colors.grey800};
+        display: flex;
+        outline: none;
+        justify-content: space-between;
+        padding: 0 0 0 4px;
+        margin: 0;
+        border-radius: 2px;
+        cursor: pointer;
+        min-height: 22px;
+        border: 1px solid transparent;
+    }
+
+    .item:not(.deactivated):not(.dragging):hover {
+        background-color: ${colors.grey100};
+        border-color: ${colors.grey400};
+    }
+
+    .label {
+        display: flex;
+        align-items: center;
+    }
+    .labelWrapper {
+        display: flex;
+        align-items: center;
+    }
+    .labelText {
+        font-size: 13px;
+        line-height: 15px;
+        margin-top: 1px;
+    }
+
+    .iconWrapper {
+        width: 16px;
+        height: 16px;
+        margin: 2px 4px 0 0;
+        flex: 0 0 auto;
+        align-self: flex-start;
+    }
+
+    .item.deactivated {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+    .item.selected {
+        background-color: ${colors.teal100};
+        border: 1px solid ${colors.teal200};
+        color: ${colors.teal900};
+        fill: ${colors.teal800};
+        font-weight: 400;
+    }
+    .item.selected:not(.deactivated):hover {
+        background: #cdeae8;
+        border-color: #93c4bf;
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    }
+
+    .optionsWrapper {
+        width: 20px;
+        height: 20px;
+    }
+
+    .lockWrapper svg path {
+        fill: ${colors.grey800};
+    }
+
+    .lockWrapper {
+        background: ${colors.grey300};
+        height: 20px;
+        padding: 0 1px 0 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .item.selected .lockWrapper {
+        background: #cbe7e5;
+    }
+    .item.selected .lockWrapper svg path {
+        fill: ${colors.teal900};
+    }
+`

From c581ff4490fcf57b4b1c0a09488a3028c167641c Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Fri, 22 Dec 2023 10:24:56 +0100
Subject: [PATCH 08/19] chore: update snapshots

---
 .../__snapshots__/DimensionItem.spec.js.snap  | 105 +++++++++++++-----
 1 file changed, 79 insertions(+), 26 deletions(-)

diff --git a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
index 3465accf1..965f99522 100644
--- a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
+++ b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
@@ -10,7 +10,7 @@ exports[`DimensionItem matches the snapshot 1`] = `
     theme={false}
   />
   <li
-    className=""
+    className="item"
     name="Period"
     onClick={[Function]}
     onMouseLeave={[Function]}
@@ -18,14 +18,23 @@ exports[`DimensionItem matches the snapshot 1`] = `
     style={Object {}}
   >
     <div
+      className="label"
       data-test="undefined-button-pe"
       tabIndex={0}
     >
-      <div>
-        <SvgClock16 />
+      <div
+        className="iconWrapper"
+      >
+        <SvgClock16
+          className="fixedDimensionIcon"
+        />
       </div>
-      <div>
-        <span>
+      <div
+        className="labelWrapper"
+      >
+        <span
+          className="labelText"
+        >
           <span
             data-dimensionid="pe"
           >
@@ -39,6 +48,7 @@ exports[`DimensionItem matches the snapshot 1`] = `
       </div>
     </div>
   </li>
+  <style />
 </Fragment>
 `;
 
@@ -52,7 +62,7 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
     theme={false}
   />
   <li
-    className=""
+    className="item"
     name="Period"
     onClick={[Function]}
     onMouseLeave={[Function]}
@@ -60,14 +70,23 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
     style={Object {}}
   >
     <div
+      className="label"
       data-test="undefined-button-pe"
       tabIndex={0}
     >
-      <div>
-        <SvgClock16 />
+      <div
+        className="iconWrapper"
+      >
+        <SvgClock16
+          className="fixedDimensionIcon"
+        />
       </div>
-      <div>
-        <span>
+      <div
+        className="labelWrapper"
+      >
+        <span
+          className="labelText"
+        >
           <span
             data-dimensionid="pe"
           >
@@ -80,7 +99,9 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
         />
       </div>
     </div>
-    <div>
+    <div
+      className="lockWrapper"
+    >
       <svg
         fill="none"
         height="9"
@@ -96,6 +117,7 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
       </svg>
     </div>
   </li>
+  <style />
 </Fragment>
 `;
 
@@ -109,7 +131,7 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
     theme={false}
   />
   <li
-    className=""
+    className="item"
     name="Period"
     onClick={[Function]}
     onMouseLeave={[Function]}
@@ -117,14 +139,23 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
     style={Object {}}
   >
     <div
+      className="label"
       data-test="undefined-button-pe"
       tabIndex={0}
     >
-      <div>
-        <SvgClock16 />
+      <div
+        className="iconWrapper"
+      >
+        <SvgClock16
+          className="fixedDimensionIcon"
+        />
       </div>
-      <div>
-        <span>
+      <div
+        className="labelWrapper"
+      >
+        <span
+          className="labelText"
+        >
           <span
             data-dimensionid="pe"
           >
@@ -138,9 +169,11 @@ exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
       </div>
     </div>
     <div
+      className="optionsWrapper"
       data-test="undefined-menu-pe"
     />
   </li>
+  <style />
 </Fragment>
 `;
 
@@ -154,7 +187,7 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
     theme={false}
   />
   <li
-    className=""
+    className="item"
     name="Period"
     onClick={[Function]}
     onMouseLeave={[Function]}
@@ -162,14 +195,23 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
     style={Object {}}
   >
     <div
+      className="label"
       data-test="undefined-button-pe"
       tabIndex={0}
     >
-      <div>
-        <SvgClock16 />
+      <div
+        className="iconWrapper"
+      >
+        <SvgClock16
+          className="fixedDimensionIcon"
+        />
       </div>
-      <div>
-        <span>
+      <div
+        className="labelWrapper"
+      >
+        <span
+          className="labelText"
+        >
           <span
             data-dimensionid="pe"
           >
@@ -183,6 +225,7 @@ exports[`DimensionItem matches the snapshot with recommended 1`] = `
       </div>
     </div>
   </li>
+  <style />
 </Fragment>
 `;
 
@@ -196,7 +239,7 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
     theme={false}
   />
   <li
-    className="undefined"
+    className="item selected"
     name="Period"
     onClick={[Function]}
     onMouseLeave={[Function]}
@@ -204,14 +247,23 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
     style={Object {}}
   >
     <div
+      className="label"
       data-test="undefined-button-pe"
       tabIndex={0}
     >
-      <div>
-        <SvgClock16 />
+      <div
+        className="iconWrapper"
+      >
+        <SvgClock16
+          className="fixedDimensionIcon"
+        />
       </div>
-      <div>
-        <span>
+      <div
+        className="labelWrapper"
+      >
+        <span
+          className="labelText"
+        >
           <span
             data-dimensionid="pe"
           >
@@ -225,5 +277,6 @@ exports[`DimensionItem matches the snapshot with selected 1`] = `
       </div>
     </div>
   </li>
+  <style />
 </Fragment>
 `;

From 96980027d514e6af075d574c82f190d274272941 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Fri, 26 Apr 2024 14:59:07 +0300
Subject: [PATCH 09/19] chore: bump ui to latest

---
 package.json |   2 +-
 yarn.lock    | 871 ++++++++++++++++++++++++++-------------------------
 2 files changed, 437 insertions(+), 436 deletions(-)

diff --git a/package.json b/package.json
index 2966c8b8f..46dff958e 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
         "@dhis2/cli-app-scripts": "^9.0.1",
         "@dhis2/cli-style": "^10.4.1",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^9.2.0",
+        "@dhis2/ui": "^9.4.4",
         "@sambego/storybook-state": "^2.0.1",
         "@storybook/addons": "^6.5.16",
         "@storybook/preset-create-react-app": "^3.1.7",
diff --git a/yarn.lock b/yarn.lock
index 0488c6214..ca4038043 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1722,583 +1722,584 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@dhis2-ui/alert@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/alert/-/alert-9.2.0.tgz#3b30e90a88a96c617219c60ad8bc16a5969e85d1"
-  integrity sha512-9uh6vIKlj9vm9wOr/7UvSvxrEgl0p99+FdfFtvCeiOywR2+CCPvd9fRsL/vWKcCraopOriCmTm5PzBUWPuatvg==
+"@dhis2-ui/alert@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/alert/-/alert-9.4.4.tgz#4045882cb5bc5e6763897e4eca3d779e54f64d71"
+  integrity sha512-v3TjIQEDqUtAqcUsH62/TYqQLehzqRPOwqdw6LDa3Yldqf9iMJ6v66DBESO2QsYd33ZWPj0+ZWw8BDtAP/SubQ==
   dependencies:
-    "@dhis2-ui/portal" "9.2.0"
+    "@dhis2-ui/portal" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/box@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/box/-/box-9.2.0.tgz#0f8fd79059d724c075180ea442c860ebff88c802"
-  integrity sha512-ERNEd8lDAQIGDmTYknWClPGbmWuOpFAnE8XurB6wrkydn0M2+wsIa00q2on6RgY2YaAjVtYZEXr9CfjBtwh04w==
+"@dhis2-ui/box@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/box/-/box-9.4.4.tgz#646cdb3b30708ba2332d249eae47fa03a1e6d309"
+  integrity sha512-xTkjLlcKm7Z6gESys2QLkgYWZSKyvKXcU4GHDJMZ+HXjiSxLfGSmbKDJfBkGuOsCGYlgCMdM1jMBUQjT7zp/Fg==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/button@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/button/-/button-9.2.0.tgz#8d465f471ca629e1cb0ded01fc68143eb4960c1c"
-  integrity sha512-YBdIpaOqEgpI0JhHm8XBlpFGDF7O6eiFQ4Noxu131KEyDOf7a+AkIyECVZw6Jsj3n2zrbyzBDw6IndSFSlBqRQ==
+"@dhis2-ui/button@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/button/-/button-9.4.4.tgz#5fa1765e6b7a26fdeca875bf3114a5039deab8f0"
+  integrity sha512-U0JNzTcQkOlSm0GJsSPGRLDXMA5czS33SkaaL0S7kkNLcsTceZX/4cO6ldTuAJWPJLiuNsR8e/Rklos9xospLg==
   dependencies:
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
-    "@dhis2-ui/popper" "9.2.0"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
+    "@dhis2-ui/popper" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/calendar@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/calendar/-/calendar-9.2.0.tgz#c3fbcdc622a13dd112de163719cfdcd0f960cfe2"
-  integrity sha512-6xxkCx66tjfGffGoPnDB6pe9Pvx+UybAGCqof7/0xfHP2vnfdss716imM02HfJRZwp5dNUrXqBO9uuQ1qkp/HA==
-  dependencies:
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/card" "9.2.0"
-    "@dhis2-ui/input" "9.2.0"
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/popper" "9.2.0"
-    "@dhis2/multi-calendar-dates" "1.0.2"
+"@dhis2-ui/calendar@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/calendar/-/calendar-9.4.4.tgz#3b5147a42ffbefaab77824f5c95e755508d2291f"
+  integrity sha512-wBzWhJdnCyGJuNYFhLiLh2cwiSm2iSa/JNud449+atCK6O/XygBel96eaLUh63GWgKmM5RE9PIoHWm1xYfn5XA==
+  dependencies:
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/card" "9.4.4"
+    "@dhis2-ui/input" "9.4.4"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/popper" "9.4.4"
+    "@dhis2/multi-calendar-dates" "^1.1.1"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/card@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/card/-/card-9.2.0.tgz#1a2d8f2f9becfd9fd43e7e315fda511418698fd1"
-  integrity sha512-++eLieBc4WsNXD1iQEQaqijnQ7hpKu0HH9cjkwTa46jjI9SoJGdYInvCzZPafB1XuCZ42f08kTcdND2qZWbssQ==
+"@dhis2-ui/card@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/card/-/card-9.4.4.tgz#8bb0ca90f5eef4421beef9506b2c244041f1c1ef"
+  integrity sha512-ZquXjtHeY+/zt5ojXmB8ZeqD5pnEriw7/8LHGi2TYGZovCbw0rN76pTIgL+9X7V2WcVbSQinxUpdlcXex8heGQ==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/center@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/center/-/center-9.2.0.tgz#f7fbcbd00696d718286f269a64a5bad327160449"
-  integrity sha512-IBwLld/SQEtT5acjBr3nJnpkXNzypxm9f+QfdGYRq2ZSQmkIv9IUjIvlC25CU72Ksq+N0nWvA8AYp2Qx/l04fg==
+"@dhis2-ui/center@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/center/-/center-9.4.4.tgz#c62c32bbe83aa20278845ec22cfcb5cc3a394d26"
+  integrity sha512-I+d1ByUcemZDYCPauiXY/EOjUDjoLPXTzpzAF3AboZNvGjo2+1AgHKNkAMp5WgBBQRaGoAiNLRhhgGEX6f9DhQ==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/checkbox@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/checkbox/-/checkbox-9.2.0.tgz#7f27c645bb9d31df4898c9c96cfdabf9ddd01ab3"
-  integrity sha512-EIGbkdnCLOyW3s7Mh31LdPgghHPaTAt0MJe5ieF/1NycUCfx99NGoR7wXlAlI6wNvjkuTYnYBknERGHUEzY9rA==
+"@dhis2-ui/checkbox@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/checkbox/-/checkbox-9.4.4.tgz#61b75fa7d1773e1d9a11b95126c44a465ac59eaa"
+  integrity sha512-i26bv/lBynQ1AeOhMmRJ4rQJr5HOFXe4VNCaQhq/+1q+g2dewyf0gIygJnjYMzcX48eyfQsBDU5JBYhuSz6kWw==
   dependencies:
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/required" "9.2.0"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/required" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/chip@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/chip/-/chip-9.2.0.tgz#45b5e55e6d11318bb6917f1bcdee9bf9b67bd620"
-  integrity sha512-PesbKz0MrXegDAFcGHq34Ast0kM/mJrmExiLua262egYYaRiQXDYeaNuS2TT+qPsPsDva2Pp7kqjdrFRDL2Few==
+"@dhis2-ui/chip@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/chip/-/chip-9.4.4.tgz#f1b151e0bc091aca4e288ed7f4889a38bf1f74c6"
+  integrity sha512-+2FLdWcDGNOQmrCU0sKve+JRD1hwCd53sQ0D/OCI4zFCrJwJ5C7Pet5Y3Ys0hv8lAu4hCdwklSyKuwlIjYntjg==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/cover@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/cover/-/cover-9.2.0.tgz#0288dad0ba9caf8c0b77c86868fc4bae3388f6c7"
-  integrity sha512-ZxcOOuyy/dB4pgjdVzBlgwtVue0HEct2XOiuIKM66F5G0DPBqz6UtLDD+8VRofQwTKcTYQh9kPZPmx/9q65Zcg==
+"@dhis2-ui/cover@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/cover/-/cover-9.4.4.tgz#89ed8113be5ba541d7250e32a828c5e2046369e7"
+  integrity sha512-JAywkI+Hebyn4EkiSf3li2E2+iDUvBwcgHH4AW5QkkRaM8YGqgluNnsn+AOL1Igs6lXh3jzGrsiN3xZSoGO6ww==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/css@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/css/-/css-9.2.0.tgz#ad881b90371c7506690ee2a2b2151c09f793e368"
-  integrity sha512-dBe9S75+Nj1c9SNRkxU0VWTVwFZJ+vLFKxD1UYaPdbJ2DHD6AD4UJ1YtXgvBvgiJ0wbT1vesh3tKfEUXbnTmkw==
+"@dhis2-ui/css@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/css/-/css-9.4.4.tgz#c46af291af86eec008f60205c7c46e100ef8188a"
+  integrity sha512-VBmYcTKet0YDEguptZ0+Yc789HmNiaMDTu3iUnJKuvurhYSaFGD/oK7d2Sr6bIo0KTQ+/XpcOL68+wRLktGgwQ==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/divider@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/divider/-/divider-9.2.0.tgz#2f9ea2f3a1f89853963bcffdeef27e5ebc390021"
-  integrity sha512-z87v4XKIO1IXhWmHYhCQgR7MTiuU+zLMg9Py2OIDxMchVXrdyGSeKCpL9UgOzl/jtHxwoMdnVDzy8sLLzITgsw==
+"@dhis2-ui/divider@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/divider/-/divider-9.4.4.tgz#d904282c0bc8552180923e36189b421dfb4d3853"
+  integrity sha512-YjERDzyV4aznyKpREUDhh5QgykRAhNE6xr7rO5LiCNeFx2MpZY1Xq6AFoPZSuy966iAEU0KmOK+8Ow0NGg/9GA==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/field@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/field/-/field-9.2.0.tgz#d16b443ff168e352b6f5168d2179975377902dd1"
-  integrity sha512-pZr1LkzOm4TOPdPAen9e3RHQE8Y1uCbdFhP1oc5vg44etmudX7stJuEXP6/DrPm6sHCJRojf90laqPai1vfrHg==
+"@dhis2-ui/field@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/field/-/field-9.4.4.tgz#80753ca3bc2c419dc1066e5e6d662b18ddaec032"
+  integrity sha512-07O3Npth26D0+kOHYdsfoF3fZm8SXfmtonKyOIOpRAmIX1TJZRNO9LuI5S9+z5vh0++x3Y+c9hIFmac0Vvm9aQ==
   dependencies:
-    "@dhis2-ui/box" "9.2.0"
-    "@dhis2-ui/help" "9.2.0"
-    "@dhis2-ui/label" "9.2.0"
+    "@dhis2-ui/box" "9.4.4"
+    "@dhis2-ui/help" "9.4.4"
+    "@dhis2-ui/label" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/file-input@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/file-input/-/file-input-9.2.0.tgz#d48e9d290aea798640b251d915b9a8f51abcf363"
-  integrity sha512-x+lKilo6aQN320fIAPZMAq13PxKuTb/jhZb7m7pMS0HKsPqfT5rWm1VfmBlN/02BkKsmhsvo/tTe9vxpAic71A==
-  dependencies:
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/label" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
-    "@dhis2-ui/status-icon" "9.2.0"
+"@dhis2-ui/file-input@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/file-input/-/file-input-9.4.4.tgz#02878069f9f4db33a14dba9e18642d8e85f6d2e9"
+  integrity sha512-GS89r/FxYfd9GlXUqscUXjzh1f190mo9qwJN6GrrzeK+gSGwtFDtGHDCyES7qQ8MdtvgDlC8Dgdjl5EU7YP6tQ==
+  dependencies:
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/label" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
+    "@dhis2-ui/status-icon" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/header-bar@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/header-bar/-/header-bar-9.2.0.tgz#83efe93821318decca3bd1a28d30fd3089435b6d"
-  integrity sha512-7iNKOllQNeYfa9nJjXVqiohcuKEk+RMhuu/7BY8g2oPmwbvS0uc49KiL53cFfAWBST/v5fU1XOpWS/N7PmJr2g==
-  dependencies:
-    "@dhis2-ui/box" "9.2.0"
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/card" "9.2.0"
-    "@dhis2-ui/center" "9.2.0"
-    "@dhis2-ui/divider" "9.2.0"
-    "@dhis2-ui/input" "9.2.0"
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
-    "@dhis2-ui/logo" "9.2.0"
-    "@dhis2-ui/menu" "9.2.0"
-    "@dhis2-ui/modal" "9.2.0"
-    "@dhis2-ui/user-avatar" "9.2.0"
+"@dhis2-ui/header-bar@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/header-bar/-/header-bar-9.4.4.tgz#7c26955ea968bb25cac6766e549402ccde34d8c3"
+  integrity sha512-IA6yFbFFimWMYyHSD9idCLCamnWtAgRuoD3FG/8kKvOurTEwUcb0qYaecnQAstwWwZ8C+ZIKiTB0796WXj/SDg==
+  dependencies:
+    "@dhis2-ui/box" "9.4.4"
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/card" "9.4.4"
+    "@dhis2-ui/center" "9.4.4"
+    "@dhis2-ui/divider" "9.4.4"
+    "@dhis2-ui/input" "9.4.4"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
+    "@dhis2-ui/logo" "9.4.4"
+    "@dhis2-ui/menu" "9.4.4"
+    "@dhis2-ui/modal" "9.4.4"
+    "@dhis2-ui/user-avatar" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     moment "^2.29.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/help@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/help/-/help-9.2.0.tgz#76556c0d581fb0f7611fe5c5bb0d9adf35ad0c8e"
-  integrity sha512-qD3oNEwEb+pT7jsD4ciHtu16KrxMySPWoqco5nJwoGbcZFLw/caEfkBo2IroImD0MxtI0mKt5emD7V2yXRWm7A==
+"@dhis2-ui/help@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/help/-/help-9.4.4.tgz#6b3df94b6b8c0f7269dde3c90602dbb6dac889fa"
+  integrity sha512-V/ZNC/QwlN+444rb2wBAzEkqeLToafHQOEWCUUvcYEgC2Vxdh2bXEqBl6w4Bv2Xmh563k+AdxvXZtVL4zLA/og==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/input@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/input/-/input-9.2.0.tgz#bdf7c72e11b818ed86e1e6335cd373ae037f4ef3"
-  integrity sha512-0bzF/8pZSMqe5ZN2v0t0/rMTvKWd9kl5MDOy9fRXpX6yoFgfH+j+iIU06eVyqJl3DMqCdInfapJvpJR7MHvd+g==
-  dependencies:
-    "@dhis2-ui/box" "9.2.0"
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/input" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
-    "@dhis2-ui/status-icon" "9.2.0"
+"@dhis2-ui/input@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/input/-/input-9.4.4.tgz#621eab6b8d535fcb111094f660415ff4136cb156"
+  integrity sha512-F6GEeRUQXFxjhoY3+CuaZWrkS2D54vTuP429uCL77/Wn2HdqYWnDMz3ILubIR+T1C5otmAH5cqW3IinRGlOq+Q==
+  dependencies:
+    "@dhis2-ui/box" "9.4.4"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/input" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
+    "@dhis2-ui/status-icon" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/intersection-detector@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/intersection-detector/-/intersection-detector-9.2.0.tgz#31f19bfb8645ebda7d7af6f6e641b40fa1e57888"
-  integrity sha512-erBoDMhOPmua8eP8bKJNl4WIUUm+Fw3Jj9M0OxC+xia3/Fi8scLUyk0Yek1Y0lGdb4YHJEXqx475dLNjpmiLRQ==
+"@dhis2-ui/intersection-detector@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/intersection-detector/-/intersection-detector-9.4.4.tgz#1ad2a7b47a84aeb674274272d362302f4b23ba56"
+  integrity sha512-+DhDX7/Y0uKZnTy4r4qTt6kQtdlYxJVnlx42CwAO4KWAJirOISDyepzKUii9ZFMLCcxQgQ2uddiCwdjPqLqiAQ==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/label@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/label/-/label-9.2.0.tgz#81ec2de2ea1b9bc7cf25eb8bb036d451d5b61748"
-  integrity sha512-k9Q4XyIbaNRvCn1+rLcEb/iDi479S3fOEJ2MCT6wsGxr1+Hys7yVw7Ggq0OQ9SLCEwElNQcvj+vWB4dZltXl5Q==
+"@dhis2-ui/label@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/label/-/label-9.4.4.tgz#107e21bcc7a8d29e8355d54d5e475c96364fc78d"
+  integrity sha512-uoYpozTDR1kxM+g8tWvvCV9Z4KT9+t4t4IKULICJLwEW8JfwXQxZnVmCvCc3Zv2fHZlmUN9XXGVt00VG1ldWsg==
   dependencies:
-    "@dhis2-ui/required" "9.2.0"
+    "@dhis2-ui/required" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/layer@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/layer/-/layer-9.2.0.tgz#7afcb2ef8571eb9c839fc522eb76ead70e395dbc"
-  integrity sha512-95aFgQYxgJ7GmWY6AOSoAH4BH7wkIyUAioAIRUDwp0mmSJhJxG6P9b1PFqw4koX1zV4/RLoz+NiQ7Twv+03CLQ==
+"@dhis2-ui/layer@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/layer/-/layer-9.4.4.tgz#980a9e397468b9418937202a0afaae868bed4b4b"
+  integrity sha512-PLqcBHfUB1EV24trWbkDv2m1viU3ijVYZQa13htxa5r800ei+ze6K4x15hnvI9qtCbNAvBv/N1Axxui4Xwjkdg==
   dependencies:
-    "@dhis2-ui/portal" "9.2.0"
+    "@dhis2-ui/portal" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/legend@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/legend/-/legend-9.2.0.tgz#a051822fd67c1442b6986a86097aca94f3960dd2"
-  integrity sha512-IfJhu48eu//O9AlHt7IUdsv5E92XG7v/95laFfyQOaGhf1C4BQf11s6yXc3nTFoil/p55oAsZnWp5e7UXcgrhg==
+"@dhis2-ui/legend@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/legend/-/legend-9.4.4.tgz#5476cfa7937ca9bbac3b9e64e991b17d51e9ced1"
+  integrity sha512-uqxHCFYMfP8yxV0lOyOgKbOUYRP3TNoO+fHyo78y2OGhjrsanHolZMPokf+POgZAFmBvQDtibOoyp2J7jq1Qog==
   dependencies:
-    "@dhis2-ui/required" "9.2.0"
+    "@dhis2-ui/required" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/loader@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/loader/-/loader-9.2.0.tgz#f45fdb19a37182351932cd3e11980d43b4895d40"
-  integrity sha512-M8tuLE5kgm7oHmIN6par8GfRDpmt+DXFU3cCSZdiYIUM6SQSD8G5LmA8AaIHR5h7l430d93vcw7RQL3eeE/svw==
+"@dhis2-ui/loader@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/loader/-/loader-9.4.4.tgz#2bd268cba9310db47c0a9dda04cff760380fc6b0"
+  integrity sha512-2B9PZ/iQIuCWbPIQFihrmX+1YHW5vZlOv+rsJT1SipSIj5sLWy4KYtjvm89lSu+Or60jnrNAJ8Iix5bnlb+dWw==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/logo@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/logo/-/logo-9.2.0.tgz#0452aadd8e92afc1c558869a08c8e5d1f14ff55f"
-  integrity sha512-OEFrSpDijeCIhLjJ8vipDGRdihTgj8+iLcPLDrOeRAurlgJZJZiicxBKSuY6uc6p1/9QPccqX2huJjM1uNqo2g==
+"@dhis2-ui/logo@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/logo/-/logo-9.4.4.tgz#a0050a56aabafe33ef4c232a116980d289fbcc34"
+  integrity sha512-Nps/U5rCBaO8X8/A0gbd8SuGRdd1ymCRnXv5FuUvciQ8CcoQnjE8aVi0TMY1h/A8XDrLWZXyAnm3WbmA0GnOvw==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/menu@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/menu/-/menu-9.2.0.tgz#996729545b29def9366a099005a17c781bdca8f6"
-  integrity sha512-8k15qmoqBWKo1Afj+QXFnDAIoDyAqosvq3j8M/+xM+cSn0H+6e3Q7UOp0ByVQlumoY5DyrT9Z7NojULIjFUifQ==
-  dependencies:
-    "@dhis2-ui/card" "9.2.0"
-    "@dhis2-ui/divider" "9.2.0"
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/popper" "9.2.0"
-    "@dhis2-ui/portal" "9.2.0"
+"@dhis2-ui/menu@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/menu/-/menu-9.4.4.tgz#a25fe07705d8e14e97390d8b59e7330d7fdc335e"
+  integrity sha512-TSIPM9vNswIo59yxPEZN30KTWbxQNXC2BLu6Fkd0FpgLO8ZxnAtG7qbgay8Y3c+9FIAt+Be/N41d+5VlSG8WtA==
+  dependencies:
+    "@dhis2-ui/card" "9.4.4"
+    "@dhis2-ui/divider" "9.4.4"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/popper" "9.4.4"
+    "@dhis2-ui/portal" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/modal@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/modal/-/modal-9.2.0.tgz#7815efe62be4f482b2e2224ffe92981068b1bae9"
-  integrity sha512-gp+gCTmtoiLVAhigo1i6msE598qIGnkW6To+dTkUecvxyvni+DZTAulTmL62UtTzzjPjYO0yOqNTWQztbpj1KQ==
+"@dhis2-ui/modal@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/modal/-/modal-9.4.4.tgz#3edbc8e3bb942aba2c8377aadd79514fe2fa7930"
+  integrity sha512-Ny9y9hxinbrnSQxoDCFh902BNozGjHdp1YG5w+sxyg4gfUjP2gh+OyoLILvw8LqvrjoukI7anfmikNoAEwjanw==
   dependencies:
-    "@dhis2-ui/card" "9.2.0"
-    "@dhis2-ui/center" "9.2.0"
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/portal" "9.2.0"
+    "@dhis2-ui/card" "9.4.4"
+    "@dhis2-ui/center" "9.4.4"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/portal" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/node@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/node/-/node-9.2.0.tgz#3560b3e7394d275c1bce3e800b2654cddcd2adb2"
-  integrity sha512-xx7P/6V7vq3JLXUUATKGGUCORHqQL74fsGYUd9a0izyUyq4h3pEHL9ZT6Cel+A0d5ODYn/j/Q6fHICZzg55FBQ==
+"@dhis2-ui/node@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/node/-/node-9.4.4.tgz#3c13b7424a172564a0d52893b4d1ac8a7d9ceac3"
+  integrity sha512-8kyvwqFc/cx1U50AhDymUnKR3OvWy6/EBnt8IOGrdFGrIRTk6P+JiRFUMfQ2aRubhtLMsDTpQ3LOMeHeP7/87w==
   dependencies:
-    "@dhis2-ui/loader" "9.2.0"
+    "@dhis2-ui/loader" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/notice-box@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/notice-box/-/notice-box-9.2.0.tgz#8c1fb4a2a780fea0fde4b8f9eaf8f73957187c99"
-  integrity sha512-DY3WYXj1hsOsiBHGaNrOeZ8h7SPaXox6iMCTzL/jLvnfmTrH7wy6SHRLQYWg0BMrDflhMJu9qhn0jtzhEXZNMQ==
+"@dhis2-ui/notice-box@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/notice-box/-/notice-box-9.4.4.tgz#c333a0ffa0cddc20431071ec56f0521fa3dbcb5d"
+  integrity sha512-u7zcrq4EqCwCOszyl1FlfpeQj+Tn/UJ/J6mZ3v44+7gCTNMrEfT7Hf/drmTVLmFNquqDUP/ppr1uxwtQOResyA==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/organisation-unit-tree@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/organisation-unit-tree/-/organisation-unit-tree-9.2.0.tgz#ce33d91361145d6574ddbef3866b56be06cee6cb"
-  integrity sha512-PHm908gNGPhq5D655BI4lrB+hMqfISKASjoFCWxG2f9FU64/pvQ+snZQQwQFMAJYMd6FKw4GOP1isKz0jTGNuA==
+"@dhis2-ui/organisation-unit-tree@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/organisation-unit-tree/-/organisation-unit-tree-9.4.4.tgz#3e952d2fe0fd045d6bc2a6a92872ef8e83a6e7f2"
+  integrity sha512-qUDsQIHPE2QQVizfs+bomsrlPKVrPi8L2MtKVkma2P1/GlDnZaOoLYB70zzLLbqH90dUbwMlGF3ZXnbIhi+A6g==
   dependencies:
-    "@dhis2-ui/checkbox" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
-    "@dhis2-ui/node" "9.2.0"
+    "@dhis2-ui/checkbox" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
+    "@dhis2-ui/node" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/pagination@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/pagination/-/pagination-9.2.0.tgz#f38d1ada2bc9f9795dae8f86c52d54f29889dd17"
-  integrity sha512-jXJNQ8JOPweeMFCsPXgAb8dAx8J/rNTnExL8WA6rfRDWujOojLp8Gu2MrH5jlHRpCBWIl+aJO1I/ZKHekQOeDg==
+"@dhis2-ui/pagination@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/pagination/-/pagination-9.4.4.tgz#35d4ab7e35a0a37d998fe51394ac1bda26b7052f"
+  integrity sha512-WnruI7k/wcXzZF84fWRcFhfA131p23NwkeUUbt45cm/36+SnDoYAl6Nbh1elEQpYu2jqMWVk2w82u37MT/usxg==
   dependencies:
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/select" "9.2.0"
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/select" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/popover@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/popover/-/popover-9.2.0.tgz#3eccd6abde1da72089aa5feda5669ce4d1aa6f7e"
-  integrity sha512-7g8AHPrzUuMuv2MXpX5HdwiyO+peSGoq7hg6rHN/VDasIUvGS7vbaV4Xbxfd32fNmpHceBV7gMga31hRNaKtgw==
+"@dhis2-ui/popover@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/popover/-/popover-9.4.4.tgz#547dbffefbfdd838bf401a5a44e1e524ab028440"
+  integrity sha512-UosiUkknLNl3h+IuqNiEcLuGSskP8SV55BOUHEHIyE5HacRVjzyeKyK6ak/g0L8FyscYdpPvAAUqFRq7pnByzg==
   dependencies:
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/popper" "9.2.0"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/popper" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/popper@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/popper/-/popper-9.2.0.tgz#6d17ca49d7f0496289e11315d414095d93d179b5"
-  integrity sha512-6xWNvUQaDu8VE4rCa+uYOheb/4BD/52Cs23w2yt4lLAVrym4kV+0cnpHtlEG1ZuuVrK/yHelMjrmYxn6yJE41Q==
+"@dhis2-ui/popper@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/popper/-/popper-9.4.4.tgz#84d3e2155d93bc54cebdf1430dc7b2f207d681ae"
+  integrity sha512-avSwb0Ty25mE7BkoV/dWvwxZFLEWOOkEXSa2z5F/YNfec8gvCODiVGcHU6CEBfDXk7y4dqv7QtLEfaeoa8cpnA==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     "@popperjs/core" "^2.10.1"
     classnames "^2.3.1"
     prop-types "^15.7.2"
     react-popper "^2.2.5"
     resize-observer-polyfill "^1.5.1"
 
-"@dhis2-ui/portal@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/portal/-/portal-9.2.0.tgz#12435f3a8886de685fc9ee4540639810eabf0191"
-  integrity sha512-a5DqmTG+pn4y1aXZWr8wEGlK4xRqdvnOWJVqO/6aebEn4ZtcPJT6yyXouviAM2yoW7+fDj6TZhKrZo3vgMLHlA==
+"@dhis2-ui/portal@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/portal/-/portal-9.4.4.tgz#8de12cd6c0e975b47cd19caae8acc1500034f206"
+  integrity sha512-HSXWzWFlSy9layr9zmxQcITiOIsse9y7bK0kPRlqjqEtSSfF57iGcFSAOTwX4HBW0xE/lQ8n4UfHoGOU76LF0Q==
   dependencies:
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/radio@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/radio/-/radio-9.2.0.tgz#9223ada90fe2d0eae375e85e0d99e6eb81d5269a"
-  integrity sha512-rjcz05spFlvRL8fnkO/7/ckznY4agQLl5P7UKSFL3Kz0KxvnocmounTX1BDsm6iQhKKt2HqJCYShpzPhTXavSA==
+"@dhis2-ui/radio@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/radio/-/radio-9.4.4.tgz#5654713ad8646aac31909ff6009b189975b3eaf5"
+  integrity sha512-JAqnlbX9arPASFNHJw8leeDs0FGKWvIOQDZeye9ApG8Xnl2vdu4Oa/8GfDPSPYHIGdvhx5VVH0D+PzAFLBeIUA==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/required@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/required/-/required-9.2.0.tgz#8d76c914c3eb483958284c8ddf52ef7095cc2f42"
-  integrity sha512-cNoQct7gVbrAdzGDDFLnfBktmwmxAhD48oEZ6z4TE7IrPi2N+idqOiQCTEVKEWmuY7VGv9TV0I/1OLX6oiuSvA==
+"@dhis2-ui/required@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/required/-/required-9.4.4.tgz#fc167134d435a7ee4a86966887f282653e87f9f3"
+  integrity sha512-jwLwL+6y7Wp0IWiXyj28xmBpOsZOdyJlBUpdfmur7akVK46jMMTlugz36SpygU7f9dzExl2hJgDu01X8q/kdng==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/segmented-control@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/segmented-control/-/segmented-control-9.2.0.tgz#2b230eea17e35194072544ebbfc68e2c896fb951"
-  integrity sha512-x4eDqGu4JFfFPQk06mg8YdUCjYeYyXCLmZ0gbGj1Zx03gxpMwb4/nVyGoAxZg31/IVkhBOeAwXlvt+ckNXovgw==
+"@dhis2-ui/segmented-control@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/segmented-control/-/segmented-control-9.4.4.tgz#8f4b756b913f5162f7523c4044be80a068584649"
+  integrity sha512-A8p8VxRea3VV4G9yWc+zTfQarW/ZDIfkEWzKzsmyQEuqIWlTVPf7Hcva9I7Lx1CiDpScJdJbK5vGlglj4PKj5g==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/select@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/select/-/select-9.2.0.tgz#e854ecf6fd2580f9fb904301d1985923c1ade9cf"
-  integrity sha512-Hv0mRbpJNHJUa2lVivrWBt67iJ+4xTb7KxZkThISkmpQpzbWmhmJWlDbe0L+PdqOsaB2A70/N9HH4dhQyVP8vA==
-  dependencies:
-    "@dhis2-ui/box" "9.2.0"
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/card" "9.2.0"
-    "@dhis2-ui/checkbox" "9.2.0"
-    "@dhis2-ui/chip" "9.2.0"
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/input" "9.2.0"
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
-    "@dhis2-ui/popper" "9.2.0"
-    "@dhis2-ui/status-icon" "9.2.0"
+"@dhis2-ui/select@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/select/-/select-9.4.4.tgz#39e566dc565a07c783ca9c3be0ad15de2484eec4"
+  integrity sha512-qIJunqROPGcP9Ys/yx4D/jUS20DE8ORxT3W1l+r/RnL/z8gPlyBAYeYB914nxualIhoUYXr7UjhgyJZfQbIafQ==
+  dependencies:
+    "@dhis2-ui/box" "9.4.4"
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/card" "9.4.4"
+    "@dhis2-ui/checkbox" "9.4.4"
+    "@dhis2-ui/chip" "9.4.4"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/input" "9.4.4"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
+    "@dhis2-ui/popper" "9.4.4"
+    "@dhis2-ui/status-icon" "9.4.4"
+    "@dhis2-ui/tooltip" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/selector-bar@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/selector-bar/-/selector-bar-9.2.0.tgz#23790f850bee1142e7bdffd711a2dea27dc78112"
-  integrity sha512-HDb/XKuUdD82vDh5mgz+OWIwpKjyiZEqek74y8g2r/AsMIl5Fe2rOyncOUPpGctxYeVp9u3gAlkFbIHd/qpv/w==
-  dependencies:
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/card" "9.2.0"
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/popper" "9.2.0"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+"@dhis2-ui/selector-bar@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/selector-bar/-/selector-bar-9.4.4.tgz#79513f90bdc1f4a2c6270cb8f2083dd14d4b11d9"
+  integrity sha512-9Z9dyrFU6XAEu0KLIa4TDQR/E8KJvjqMeaxWWpSrjnyM2Lmlfn9gH+qZ27TJSUMKqY/mdFJpSSr45aIQGgg2Rw==
+  dependencies:
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/card" "9.4.4"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/popper" "9.4.4"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     "@testing-library/react" "^12.1.2"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/sharing-dialog@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/sharing-dialog/-/sharing-dialog-9.2.0.tgz#8818e5119c2113b3a54add3bd56dfe55ad2fc52a"
-  integrity sha512-h7chsY8XM2kw06r52pGRjS8ZknuwiEkRxuBTXD77G1Loni5TMm6xr0OFr9nSQHSsbcbxydbo2WPRPAu6WjVyfg==
-  dependencies:
-    "@dhis2-ui/box" "9.2.0"
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/card" "9.2.0"
-    "@dhis2-ui/divider" "9.2.0"
-    "@dhis2-ui/input" "9.2.0"
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/menu" "9.2.0"
-    "@dhis2-ui/modal" "9.2.0"
-    "@dhis2-ui/notice-box" "9.2.0"
-    "@dhis2-ui/popper" "9.2.0"
-    "@dhis2-ui/select" "9.2.0"
-    "@dhis2-ui/tab" "9.2.0"
-    "@dhis2-ui/tooltip" "9.2.0"
-    "@dhis2-ui/user-avatar" "9.2.0"
+"@dhis2-ui/sharing-dialog@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/sharing-dialog/-/sharing-dialog-9.4.4.tgz#dcb9aa7436cd037e59f02231eeece7fbf6d82414"
+  integrity sha512-pYhMR+HXu4gvpFTfwWIe1XtW7+m4DxVzWPHGmHKi7ZbVh42csi466mlpJ29qid8KBo/KmsNASt+R6Vp0I3Dq5w==
+  dependencies:
+    "@dhis2-ui/box" "9.4.4"
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/card" "9.4.4"
+    "@dhis2-ui/divider" "9.4.4"
+    "@dhis2-ui/input" "9.4.4"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/menu" "9.4.4"
+    "@dhis2-ui/modal" "9.4.4"
+    "@dhis2-ui/notice-box" "9.4.4"
+    "@dhis2-ui/popper" "9.4.4"
+    "@dhis2-ui/select" "9.4.4"
+    "@dhis2-ui/tab" "9.4.4"
+    "@dhis2-ui/tooltip" "9.4.4"
+    "@dhis2-ui/user-avatar" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     "@react-hook/size" "^2.1.2"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/status-icon@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/status-icon/-/status-icon-9.2.0.tgz#5686721ef7dc1b1cd1cca315b11136e0809e568f"
-  integrity sha512-oILHs38xICDU27C7CXgFAEttU4QJzg0wImKlX4XVJ5z1aGeq6qOW0RUVibF6JtyAppEi9XsYZ+AB1KLEGnDFJw==
+"@dhis2-ui/status-icon@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/status-icon/-/status-icon-9.4.4.tgz#ab44a615aee73a6f4edae6c2eeee017e9970b6c9"
+  integrity sha512-Hh/UueN9wrbpfrxegT7/712YlhZPlQ+fYDvPOty1GbAALDdPiMUg0F0YqonNXCeZUAuzX+mzxcxOoHk446GVaA==
   dependencies:
-    "@dhis2-ui/loader" "9.2.0"
+    "@dhis2-ui/loader" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/switch@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/switch/-/switch-9.2.0.tgz#1fc9ed88546906da11aa19348b8ba8ff2e7c8414"
-  integrity sha512-IwVUiqxMKZmx7VtEJkyHqGzy4tvRNh4qbhmrFodaH6d9YrbycaFNECbphrT1OywrUBuci0Q2LovZhYKInkeIFg==
+"@dhis2-ui/switch@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/switch/-/switch-9.4.4.tgz#181df81c21f369752bacabd62088b9531248ae13"
+  integrity sha512-MH3h3+EPtR9ZSq+fsFQSJkCxuKyzLZolcGCBPX2u+8sVmV+7AZ2P6yJ6YiAUGI9udMwZokLjPZSgp3QWwKEQQg==
   dependencies:
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/required" "9.2.0"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/required" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/tab@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/tab/-/tab-9.2.0.tgz#910223a907f8c007921924138306b53c2014f0fd"
-  integrity sha512-zVxwQ7WgjcrCGd+qWzLx+OtTWlGOIuC+AuSknHz0wpGgW3vawr1rMDA6j129l4O+ezzPs5bw8vN3xUQORbj0Bg==
+"@dhis2-ui/tab@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/tab/-/tab-9.4.4.tgz#66ef74adf7e01c8a2f68327e0616795da1b7b064"
+  integrity sha512-2DqkH+IhiV4uFdvMg9aVJoao2D+U3s4kP+EsUlPPvRxvf2c7P6vjcitvACVgmDBnc2EWGw0jh02QhvOgQezhLA==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/table@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/table/-/table-9.2.0.tgz#83d535e6c60ff9c9c3f436e592489a131caef772"
-  integrity sha512-wep8wPQKRg5vYPGg3HLAvsAEo+lUk3L7wO7axHyzx/XuHR40QXRirpv4tsFVn8VPpSFVq0w/BFGp8ijp3Y6RtA==
+"@dhis2-ui/table@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/table/-/table-9.4.4.tgz#b93c9ea878914df7dd3147f067c00ea946602fc4"
+  integrity sha512-i3f8go7JE/+7OyjWXN/ePlRduOC4Pc+9w4P+Sq3VOTFgYnMEPyVpZmz9/dgNtAGTto1Lh54ISU/wxwC+TXfRxw==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/tag@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/tag/-/tag-9.2.0.tgz#c6a11fbdfc20151cc75c323e6a6b1470ef064e58"
-  integrity sha512-qt/FUIFPZkghfF/fhhLHr4oOl54d1Zwy4CKf4cZmO2DSd09h7E7cfIUxXaX/shRHsSmeUhrFP2Nv5LAvu8XVUg==
+"@dhis2-ui/tag@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/tag/-/tag-9.4.4.tgz#493a2369f384cb12f1104b18e34b54d516bce740"
+  integrity sha512-YMKndGKVXdQo5plKYy5RsN8AD233BbGZ9uzd/zmf7u2xs9C/DcK0JL+5UCZwVX++4swXTXbuSblE3Kl26a4U9Q==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/text-area@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/text-area/-/text-area-9.2.0.tgz#75f279281f1513801148f11c2693537a5e9beed7"
-  integrity sha512-KLBlerlO3OvBvzTVKKolfghaAMjDPUZkxFsyRvWEIPh1RRxS9ZprunXpBWRkNO2I6U6uwqN0DiBLTNbh/zrafg==
+"@dhis2-ui/text-area@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/text-area/-/text-area-9.4.4.tgz#f5d6ee3fab9c2f71b129ea6ce4b3f7d7b36e3bf5"
+  integrity sha512-vphcZ42dqr2kXpAbJZPyJpr911B/3dAHM/PmUIIF07CzNs3daiEiIELm38KQ1cs0Na5oqXgrdw3HZyhAo02vsw==
   dependencies:
-    "@dhis2-ui/box" "9.2.0"
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
-    "@dhis2-ui/status-icon" "9.2.0"
+    "@dhis2-ui/box" "9.4.4"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
+    "@dhis2-ui/status-icon" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/tooltip@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/tooltip/-/tooltip-9.2.0.tgz#e7a0827d9ca6b30b69073916f7801d01fb7c9793"
-  integrity sha512-7Gb/Occ5/Bju95dnxUGzt/Q4129zqGWrxu1+S2uhc0YPRSx83JcG0MivPsVsr0BeU+p+8xwTVdGBOhMmqLpL9Q==
+"@dhis2-ui/tooltip@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/tooltip/-/tooltip-9.4.4.tgz#268c4d0a395669522d45dd0a5720c18589887929"
+  integrity sha512-qCHsGMuzL9YV3OnWw0j+tK0p5e+tzUd5g7CXbHPsrhtsctgKO5u/VWYnFaJlFh2cbctqvFPpS+buLMe1jndpjw==
   dependencies:
-    "@dhis2-ui/popper" "9.2.0"
-    "@dhis2-ui/portal" "9.2.0"
+    "@dhis2-ui/popper" "9.4.4"
+    "@dhis2-ui/portal" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/transfer@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/transfer/-/transfer-9.2.0.tgz#3624d08100b72143da5639ce231b53d57706ffdc"
-  integrity sha512-1+SdfeCBr+iOLaXf4gkpNLlysaBsWLOmlVzBdGVqFt4I4SMJrhFrCMUTz4A1Nsw7GpKGds35vGClQUe5LcuVSw==
-  dependencies:
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/input" "9.2.0"
-    "@dhis2-ui/intersection-detector" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
+"@dhis2-ui/transfer@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/transfer/-/transfer-9.4.4.tgz#d3f45a4a41eb35363c3f6ac57f8d499dd0ac198b"
+  integrity sha512-JMw2VWbybqOx5+4Sh1C9cPeiWN8xS6+ZNUivEwxOpKv/TBpeRBowOV7q0QEfzE1fGC9qyJqVxevBQhcp+2aUaA==
+  dependencies:
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/input" "9.4.4"
+    "@dhis2-ui/intersection-detector" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2-ui/user-avatar@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2-ui/user-avatar/-/user-avatar-9.2.0.tgz#722b4bad239aff8eb2b639ca51bd6528a08da1e4"
-  integrity sha512-XRop5Mmc5q1GnrM3YgIEdjw0OX7/KA9ZdxRNS4AU7ifYMEjUNutYmq8a2bJ1M6eZfq2DrhRQui9/1E7MvK+Evw==
+"@dhis2-ui/user-avatar@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2-ui/user-avatar/-/user-avatar-9.4.4.tgz#cb97b581e288c9d6a99d5f98a66fa3c63a6b27be"
+  integrity sha512-GILxEnNh0KwTKEMf5RCIvwV/BOv9GUKstuyLt9o5lX7YhT8QfMC0Uwn+IMOHtV6RoaewLbn0zyZF30NlZGohwg==
   dependencies:
     "@dhis2/prop-types" "^3.1.2"
-    "@dhis2/ui-constants" "9.2.0"
+    "@dhis2/ui-constants" "9.4.4"
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
@@ -2469,10 +2470,10 @@
     "@js-temporal/polyfill" "^0.4.2"
     classnames "^2.3.2"
 
-"@dhis2/multi-calendar-dates@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@dhis2/multi-calendar-dates/-/multi-calendar-dates-1.0.2.tgz#e54dc85e512aba93fceef3004e67e199077f3ba8"
-  integrity sha512-oQZ7PFMwHFpt4ygDN9DmAeYO3g07L7AHJW6diZ37mzpkEF/DyMafhsZHnJWNlTH5HDp8nYuO3EjBiM7fZN6C0g==
+"@dhis2/multi-calendar-dates@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@dhis2/multi-calendar-dates/-/multi-calendar-dates-1.1.1.tgz#fb76a77114ce0b757db7dd9f588d1a47809732da"
+  integrity sha512-kaisVuRGfdqY/Up6sWqgc81K67ymPVoRYgYRcT29z61ol2WhiTXTSTuRX/gDO1VKjmskeB5/badRrdLMf4BBUA==
   dependencies:
     "@js-temporal/polyfill" "^0.4.2"
     classnames "^2.3.2"
@@ -2493,91 +2494,91 @@
     workbox-routing "^6.1.5"
     workbox-strategies "^6.1.5"
 
-"@dhis2/ui-constants@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/ui-constants/-/ui-constants-9.2.0.tgz#47506acaec5e4ce28630519a630a05657d2d29f6"
-  integrity sha512-gMbnVJQJmCPoGJHnY09BoDe6Z1vukzFdUcm0HPYyijs8ZWnclLs+69iVamxhskOnNWgj8hEt/FVs4mfhMcW3Cg==
+"@dhis2/ui-constants@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/ui-constants/-/ui-constants-9.4.4.tgz#4fe728f96fe92752b4a033b03f2fdb1313eafeb3"
+  integrity sha512-O+jHTT/S3jgcHP7gxcZenpMyOfBktvoB9MVGzoVaAW5rRbYe0cCSe1Zh70h25VMVhwxBTCTIR7G3uvDWcdb5Ww==
   dependencies:
     prop-types "^15.7.2"
 
-"@dhis2/ui-forms@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/ui-forms/-/ui-forms-9.2.0.tgz#a5651dc5010a495c8a52ef5484e7d44b2583b715"
-  integrity sha512-eodiPW+ahR5wVsgrl/bFvj2zyeJD+DR9woqys4ZyoaHlKjOdeLqDNbJDnrS+AmHfte5uorF/aWzmEZr825LBVg==
-  dependencies:
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/checkbox" "9.2.0"
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/file-input" "9.2.0"
-    "@dhis2-ui/input" "9.2.0"
-    "@dhis2-ui/radio" "9.2.0"
-    "@dhis2-ui/select" "9.2.0"
-    "@dhis2-ui/switch" "9.2.0"
-    "@dhis2-ui/text-area" "9.2.0"
+"@dhis2/ui-forms@9.4.4":
+  version "9.4.4"
+  resolved "https://registry.yarnpkg.com/@dhis2/ui-forms/-/ui-forms-9.4.4.tgz#9104665d2a57429df89caac720c59ad509328515"
+  integrity sha512-4QU4NXlExBqHWfoWnKIpDHB3wahDnJYO1CdZ64UcVurjdGKQdiAbX/WbrFYSpWuk8gO/DqQ8AC7JkTtpXXF9Lg==
+  dependencies:
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/checkbox" "9.4.4"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/file-input" "9.4.4"
+    "@dhis2-ui/input" "9.4.4"
+    "@dhis2-ui/radio" "9.4.4"
+    "@dhis2-ui/select" "9.4.4"
+    "@dhis2-ui/switch" "9.4.4"
+    "@dhis2-ui/text-area" "9.4.4"
     "@dhis2/prop-types" "^3.1.2"
     classnames "^2.3.1"
     final-form "^4.20.2"
     prop-types "^15.7.2"
     react-final-form "^6.5.3"
 
-"@dhis2/ui-icons@9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/ui-icons/-/ui-icons-9.2.0.tgz#bddf5223cabec93c9499281b2181eb165346b639"
-  integrity sha512-g9993UGWVLwDcbV+wp3HqrK8AXFu49aped0GpZsQUlGbHIzEl1EgmjiII44N40VbXwVUnqIDmu99wBxpH5Gd+g==
-
-"@dhis2/ui@^8.0.0", "@dhis2/ui@^9.2.0":
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/ui/-/ui-9.2.0.tgz#33d474cbc7cd95f8a714e019d6c69e144f77f86b"
-  integrity sha512-nhKwW5bmIfQvt3L16PffFO2NsDk9BgYb91vHx06fPgM56UdwGYSejpax8eU29vE9urmHSkijSpnBqY4buZy6Ow==
-  dependencies:
-    "@dhis2-ui/alert" "9.2.0"
-    "@dhis2-ui/box" "9.2.0"
-    "@dhis2-ui/button" "9.2.0"
-    "@dhis2-ui/calendar" "9.2.0"
-    "@dhis2-ui/card" "9.2.0"
-    "@dhis2-ui/center" "9.2.0"
-    "@dhis2-ui/checkbox" "9.2.0"
-    "@dhis2-ui/chip" "9.2.0"
-    "@dhis2-ui/cover" "9.2.0"
-    "@dhis2-ui/css" "9.2.0"
-    "@dhis2-ui/divider" "9.2.0"
-    "@dhis2-ui/field" "9.2.0"
-    "@dhis2-ui/file-input" "9.2.0"
-    "@dhis2-ui/header-bar" "9.2.0"
-    "@dhis2-ui/help" "9.2.0"
-    "@dhis2-ui/input" "9.2.0"
-    "@dhis2-ui/intersection-detector" "9.2.0"
-    "@dhis2-ui/label" "9.2.0"
-    "@dhis2-ui/layer" "9.2.0"
-    "@dhis2-ui/legend" "9.2.0"
-    "@dhis2-ui/loader" "9.2.0"
-    "@dhis2-ui/logo" "9.2.0"
-    "@dhis2-ui/menu" "9.2.0"
-    "@dhis2-ui/modal" "9.2.0"
-    "@dhis2-ui/node" "9.2.0"
-    "@dhis2-ui/notice-box" "9.2.0"
-    "@dhis2-ui/organisation-unit-tree" "9.2.0"
-    "@dhis2-ui/pagination" "9.2.0"
-    "@dhis2-ui/popover" "9.2.0"
-    "@dhis2-ui/popper" "9.2.0"
-    "@dhis2-ui/portal" "9.2.0"
-    "@dhis2-ui/radio" "9.2.0"
-    "@dhis2-ui/required" "9.2.0"
-    "@dhis2-ui/segmented-control" "9.2.0"
-    "@dhis2-ui/select" "9.2.0"
-    "@dhis2-ui/selector-bar" "9.2.0"
-    "@dhis2-ui/sharing-dialog" "9.2.0"
-    "@dhis2-ui/switch" "9.2.0"
-    "@dhis2-ui/tab" "9.2.0"
-    "@dhis2-ui/table" "9.2.0"
-    "@dhis2-ui/tag" "9.2.0"
-    "@dhis2-ui/text-area" "9.2.0"
-    "@dhis2-ui/tooltip" "9.2.0"
-    "@dhis2-ui/transfer" "9.2.0"
-    "@dhis2-ui/user-avatar" "9.2.0"
-    "@dhis2/ui-constants" "9.2.0"
-    "@dhis2/ui-forms" "9.2.0"
-    "@dhis2/ui-icons" "9.2.0"
+"@dhis2/ui-icons@9.4.4":
+  version "9.4.4"
+  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.0.0", "@dhis2/ui@^9.2.0", "@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==
+  dependencies:
+    "@dhis2-ui/alert" "9.4.4"
+    "@dhis2-ui/box" "9.4.4"
+    "@dhis2-ui/button" "9.4.4"
+    "@dhis2-ui/calendar" "9.4.4"
+    "@dhis2-ui/card" "9.4.4"
+    "@dhis2-ui/center" "9.4.4"
+    "@dhis2-ui/checkbox" "9.4.4"
+    "@dhis2-ui/chip" "9.4.4"
+    "@dhis2-ui/cover" "9.4.4"
+    "@dhis2-ui/css" "9.4.4"
+    "@dhis2-ui/divider" "9.4.4"
+    "@dhis2-ui/field" "9.4.4"
+    "@dhis2-ui/file-input" "9.4.4"
+    "@dhis2-ui/header-bar" "9.4.4"
+    "@dhis2-ui/help" "9.4.4"
+    "@dhis2-ui/input" "9.4.4"
+    "@dhis2-ui/intersection-detector" "9.4.4"
+    "@dhis2-ui/label" "9.4.4"
+    "@dhis2-ui/layer" "9.4.4"
+    "@dhis2-ui/legend" "9.4.4"
+    "@dhis2-ui/loader" "9.4.4"
+    "@dhis2-ui/logo" "9.4.4"
+    "@dhis2-ui/menu" "9.4.4"
+    "@dhis2-ui/modal" "9.4.4"
+    "@dhis2-ui/node" "9.4.4"
+    "@dhis2-ui/notice-box" "9.4.4"
+    "@dhis2-ui/organisation-unit-tree" "9.4.4"
+    "@dhis2-ui/pagination" "9.4.4"
+    "@dhis2-ui/popover" "9.4.4"
+    "@dhis2-ui/popper" "9.4.4"
+    "@dhis2-ui/portal" "9.4.4"
+    "@dhis2-ui/radio" "9.4.4"
+    "@dhis2-ui/required" "9.4.4"
+    "@dhis2-ui/segmented-control" "9.4.4"
+    "@dhis2-ui/select" "9.4.4"
+    "@dhis2-ui/selector-bar" "9.4.4"
+    "@dhis2-ui/sharing-dialog" "9.4.4"
+    "@dhis2-ui/switch" "9.4.4"
+    "@dhis2-ui/tab" "9.4.4"
+    "@dhis2-ui/table" "9.4.4"
+    "@dhis2-ui/tag" "9.4.4"
+    "@dhis2-ui/text-area" "9.4.4"
+    "@dhis2-ui/tooltip" "9.4.4"
+    "@dhis2-ui/transfer" "9.4.4"
+    "@dhis2-ui/user-avatar" "9.4.4"
+    "@dhis2/ui-constants" "9.4.4"
+    "@dhis2/ui-forms" "9.4.4"
+    "@dhis2/ui-icons" "9.4.4"
     prop-types "^15.7.2"
 
 "@discoveryjs/json-ext@^0.5.3":

From a8283f348e8ee04ed58d2a414258e0f623eef4d5 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Fri, 26 Apr 2024 15:01:52 +0300
Subject: [PATCH 10/19] v999.9.9-chip-alpha.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 46dff958e..533164736 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "26.6.5",
+    "version": "999.9.9-chip-alpha.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {

From 2a04c047f204087bc6d2b260e368c02a20dff2d7 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Tue, 30 Apr 2024 12:02:29 +0300
Subject: [PATCH 11/19] fix: add padding to dimension list

---
 .../DimensionsPanel/List/styles/DimensionList.style.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DimensionsPanel/List/styles/DimensionList.style.js b/src/components/DimensionsPanel/List/styles/DimensionList.style.js
index a7d4e7ded..a82e78b23 100644
--- a/src/components/DimensionsPanel/List/styles/DimensionList.style.js
+++ b/src/components/DimensionsPanel/List/styles/DimensionList.style.js
@@ -17,7 +17,7 @@ export default css`
         height: 100%;
         overflow: auto;
         margin-top: 0;
-        padding: 0;
+        padding: 0 ${spacers.dp8} 0 0;
     }
     .list {
         margin: 0;

From 429baaabd6f968e3f87cb19c7c003f57aa1772ff Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Tue, 30 Apr 2024 12:02:33 +0300
Subject: [PATCH 12/19] v999.9.9-chip-alpha.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 533164736..d412f6d8b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "999.9.9-chip-alpha.1",
+    "version": "999.9.9-chip-alpha.2",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {

From edbf0aa33c84ad0d587f0f08a4adfa98cf63610d Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Fri, 3 May 2024 15:09:30 +0200
Subject: [PATCH 13/19] fix: add styles to LockIcon

---
 .../DimensionsPanel/List/DimensionItem.js     | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/DimensionsPanel/List/DimensionItem.js b/src/components/DimensionsPanel/List/DimensionItem.js
index fa309d6f6..8f9e09933 100644
--- a/src/components/DimensionsPanel/List/DimensionItem.js
+++ b/src/components/DimensionsPanel/List/DimensionItem.js
@@ -61,19 +61,24 @@ class DimensionItem extends Component {
         const optionsRef = createRef()
 
         const LockIcon = (
-            <svg
-                width="7"
-                height="9"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
-                    fill="none"
-                />
-            </svg>
+            <>
+                <div className="lockWrapper">
+                    <svg
+                        width="7"
+                        height="9"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
+                            fill="none"
+                        />
+                    </svg>
+                </div>
+                <style jsx>{styles}</style>
+            </>
         )
 
         const onLabelClick = () => {
@@ -118,15 +123,13 @@ class DimensionItem extends Component {
                             />
                         </div>
                     </div>
-                    {onOptionsClick ? (
+                    {onOptionsClick && !isDeactivated && !isLocked ? (
                         <div
                             className="optionsWrapper"
                             ref={optionsRef}
                             data-test={`${dataTest}-menu-${id}`}
                         >
-                            {this.state.mouseOver &&
-                            !isDeactivated &&
-                            !isLocked ? (
+                            {this.state.mouseOver ? (
                                 <OptionsButton
                                     onClick={this.onOptionsClick(
                                         id,
@@ -136,7 +139,7 @@ class DimensionItem extends Component {
                             ) : null}
                         </div>
                     ) : null}
-                    {isLocked && <div className="lockWrapper">{LockIcon}</div>}
+                    {isLocked && LockIcon}
                 </li>
                 <style jsx>{styles}</style>
             </>

From b529ce11b3bf6705892ea3357404bb43dfaa1bd5 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Fri, 3 May 2024 15:11:45 +0200
Subject: [PATCH 14/19] chore: update snapshot

---
 .../List/__tests__/__snapshots__/DimensionItem.spec.js.snap      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
index 965f99522..f58b07faa 100644
--- a/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
+++ b/src/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap
@@ -116,6 +116,7 @@ exports[`DimensionItem matches the snapshot with locked 1`] = `
         />
       </svg>
     </div>
+    <style />
   </li>
   <style />
 </Fragment>

From 029fddebee7459a0e1f10e8037e1554cdac3e133 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Fri, 3 May 2024 15:20:43 +0200
Subject: [PATCH 15/19] v999.9.9-chip-alpha.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d412f6d8b..d7357f703 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "999.9.9-chip-alpha.2",
+    "version": "999.9.9-chip-alpha.3",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {

From 23d3e716fd2ca0b35de3dbcd924b9ffece83bd16 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Mon, 6 May 2024 10:55:18 +0200
Subject: [PATCH 16/19] fix: adjust padding for lock wrapper

---
 .../DimensionsPanel/List/styles/DimensionItem.style.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
index a4e9aed8f..d7671fa75 100644
--- a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
+++ b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
@@ -73,7 +73,7 @@ export default css`
     .lockWrapper {
         background: ${colors.grey300};
         height: 20px;
-        padding: 0 1px 0 2px;
+        padding: 0 2px 1px 3px;
         display: flex;
         align-items: center;
         justify-content: center;

From e94f2ffe4a8d7bbbb7755c3b9cded6a1cb88ab53 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Mon, 6 May 2024 10:56:35 +0200
Subject: [PATCH 17/19] v999.9.9-chip-alpha.4

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d7357f703..e49e67bd9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "999.9.9-chip-alpha.3",
+    "version": "999.9.9-chip-alpha.4",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {

From da69d37a4d3a56d78b5b92685ef862892cab25c6 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Mon, 6 May 2024 11:10:00 +0200
Subject: [PATCH 18/19] fix: adjust padding for lock wrapper

---
 .../DimensionsPanel/List/styles/DimensionItem.style.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
index d7671fa75..7d831b278 100644
--- a/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
+++ b/src/components/DimensionsPanel/List/styles/DimensionItem.style.js
@@ -73,7 +73,7 @@ export default css`
     .lockWrapper {
         background: ${colors.grey300};
         height: 20px;
-        padding: 0 2px 1px 3px;
+        padding: 0 2px 0 3px;
         display: flex;
         align-items: center;
         justify-content: center;

From 436da7d31092147bec7f3b1eec53ba6e45e7fa90 Mon Sep 17 00:00:00 2001
From: Martin Ohlson <martin@moid.se>
Date: Mon, 6 May 2024 11:11:08 +0200
Subject: [PATCH 19/19] v999.9.9-chip-alpha.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e49e67bd9..59f3b866d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "999.9.9-chip-alpha.4",
+    "version": "999.9.9-chip-alpha.5",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {