@dhis2-ui/header-bar 9.3.0 → 9.4.0-alpha.2

package/build/cjs/apps.js

@@ -108,7 +108,7 @@ function List(_ref3) {
   } = _ref3;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": "headerbar-apps-menu-list",
-    className: "jsx-2076871745"
+    className: "jsx-2424821176"
   }, apps.filter(_ref4 => {
     let {
       displayName,
@@ -132,8 +132,8 @@ function List(_ref3) {
       img: icon
     });
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2076871745"
-  }, ["div.jsx-2076871745{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:30vw;min-width:300px;max-width:560px;min-height:200px;max-height:465px;margin:0 8px 8px 8px;overflow:auto;overflow-x:hidden;}"]));
+    id: "2424821176"
+  }, ["div.jsx-2424821176{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:30vw;min-width:300px;max-width:560px;min-height:200px;max-height:465px;margin-block-start:0;margin-block-end:8px;margin-inline:8px;overflow:auto;overflow-x:hidden;}"]));
 }
 
 List.propTypes = {
@@ -149,7 +149,7 @@ const AppMenu = _ref6 => {
   } = _ref6;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": "headerbar-apps-menu",
-    className: "jsx-105953480"
+    className: "jsx-3826299842"
   }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement(Search, {
     value: filter,
     onChange: onFilterChange
@@ -157,8 +157,8 @@ const AppMenu = _ref6 => {
     apps: apps,
     filter: filter
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "105953480"
-  }, ["div.jsx-105953480{z-index:10000;position:absolute;right:-4px;}"]));
+    id: "3826299842"
+  }, ["div.jsx-3826299842{z-index:10000;position:absolute;inset-inline-end:-4px;}"]));
 };
 
 AppMenu.propTypes = {
@@ -193,11 +193,11 @@ const Apps = _ref7 => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerEl,
     "data-test": "headerbar-apps",
-    className: _style.default.dynamic([["2891838412", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp12]]])
+    className: _style.default.dynamic([["325245423", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp12]]])
   }, /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleVisibilityToggle,
     "data-test": "headerbar-apps-icon",
-    className: _style.default.dynamic([["2891838412", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp12]]])
+    className: _style.default.dynamic([["325245423", [_uiConstants.spacers.dp4, _uiConstants.spacers.dp12]]])
   }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconApps24, {
     color: _uiConstants.colors.white
   })), show ? /*#__PURE__*/_react.default.createElement(AppMenu, {
@@ -205,9 +205,9 @@ const Apps = _ref7 => {
     filter: filter,
     onFilterChange: handleFilterChange
   }) : null, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2891838412",
+    id: "325245423",
     dynamic: [_uiConstants.spacers.dp4, _uiConstants.spacers.dp12]
-  }, ["button.__jsx-style-dynamic-selector{display:block;background:transparent;padding:".concat(_uiConstants.spacers.dp4, " ").concat(_uiConstants.spacers.dp12, " 0;border:0;cursor:pointer;height:100%;}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "button.__jsx-style-dynamic-selector:active{background:#104067;}", "div.__jsx-style-dynamic-selector{position:relative;height:100%;}"]));
+  }, ["button.__jsx-style-dynamic-selector{display:block;background:transparent;padding-block-start:".concat(_uiConstants.spacers.dp4, ";padding-block-end:0;padding-inline:").concat(_uiConstants.spacers.dp12, ";border:0;cursor:pointer;height:100%;}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "button.__jsx-style-dynamic-selector:active{background:#104067;}", "div.__jsx-style-dynamic-selector{position:relative;height:100%;}"]));
 };
 
 Apps.propTypes = {

package/build/cjs/debug-info/debug-info-table.js

@@ -30,18 +30,18 @@ function DebugInfoTable() {
   const debugInfo = (0, _useDebugInfo.useDebugInfo)();
   return /*#__PURE__*/_react.default.createElement("table", {
     'data-test': 'dhis2-ui-headerbar-debuginfotable',
-    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]])
+    className: _style.default.dynamic([["4076206425", [_uiConstants.colors.grey700]]])
   }, /*#__PURE__*/_react.default.createElement("tbody", {
-    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]])
+    className: _style.default.dynamic([["4076206425", [_uiConstants.colors.grey700]]])
   }, Object.keys(debugInfo).map(key => /*#__PURE__*/_react.default.createElement("tr", {
     key: key,
-    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]])
+    className: _style.default.dynamic([["4076206425", [_uiConstants.colors.grey700]]])
   }, /*#__PURE__*/_react.default.createElement("td", {
-    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]]) + " " + "debug-info-key"
+    className: _style.default.dynamic([["4076206425", [_uiConstants.colors.grey700]]]) + " " + "debug-info-key"
   }, formatDebugInfoKey(key)), /*#__PURE__*/_react.default.createElement("td", {
-    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]])
+    className: _style.default.dynamic([["4076206425", [_uiConstants.colors.grey700]]])
   }, debugInfo[key])))), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "865651843",
+    id: "4076206425",
     dynamic: [_uiConstants.colors.grey700]
-  }, ["table.__jsx-style-dynamic-selector{white-space:pre-wrap;font-size:14px;line-height:1.2;color:".concat(_uiConstants.colors.grey700, ";font-famile:Menlo,Courier,monospace !important;}"), "td.__jsx-style-dynamic-selector{padding:3px 16px 3px 0;}", ".debug-info-key.__jsx-style-dynamic-selector{font-weight:bold;}"]));
+  }, ["table.__jsx-style-dynamic-selector{white-space:pre-wrap;font-size:14px;line-height:1.2;color:".concat(_uiConstants.colors.grey700, ";font-famile:Menlo,Courier,monospace !important;}"), "td.__jsx-style-dynamic-selector{padding-block:3px;padding-inline-end:16px;padding-inline-start:0;}", ".debug-info-key.__jsx-style-dynamic-selector{font-weight:bold;}"]));
 }

package/build/cjs/header-bar.js

@@ -102,14 +102,14 @@ const HeaderBar = _ref => {
     updateAvailable: updateAvailable,
     onApplyAvailableUpdate: onApplyAvailableUpdate
   }, /*#__PURE__*/_react.default.createElement("header", {
-    className: _style.default.dynamic([["2211918310", [_uiConstants.colors.white]]]) + " " + (className || "")
+    className: _style.default.dynamic([["4230161118", [_uiConstants.colors.white]]]) + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["2211918310", [_uiConstants.colors.white]]]) + " " + "main"
+    className: _style.default.dynamic([["4230161118", [_uiConstants.colors.white]]]) + " " + "main"
   }, !loading && !error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_logo.Logo, null), /*#__PURE__*/_react.default.createElement(_title.Title, {
     app: appName || configAppName,
     instance: data.title.applicationTitle
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["2211918310", [_uiConstants.colors.white]]]) + " " + "right-control-spacer"
+    className: _style.default.dynamic([["4230161118", [_uiConstants.colors.white]]]) + " " + "right-control-spacer"
   }), pwaEnabled && /*#__PURE__*/_react.default.createElement(_onlineStatus.OnlineStatus, null), /*#__PURE__*/_react.default.createElement(_notifications.Notifications, {
     interpretations: data.notifications.unreadInterpretations,
     messages: data.notifications.unreadMessageConversations,
@@ -124,9 +124,9 @@ const HeaderBar = _ref => {
   }))), pwaEnabled && !loading && !error && /*#__PURE__*/_react.default.createElement(_onlineStatus.OnlineStatus, {
     dense: true
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2211918310",
+    id: "4230161118",
     dynamic: [_uiConstants.colors.white]
-  }, [".main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;color:".concat(_uiConstants.colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-left:auto;}"])));
+  }, [".main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;color:".concat(_uiConstants.colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-inline-start:auto;}"])));
 };
 
 exports.HeaderBar = HeaderBar;

package/build/cjs/header-bar.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithUpdateNotification = exports.WithOnlineStatusMessage = exports.WithOnlineStatus = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
+exports.default = exports.WithUpdateNotification = exports.WithOnlineStatusMessage = exports.WithOnlineStatus = exports.RTLHeader = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
 
 var _appRuntime = require("@dhis2/app-runtime");
 
@@ -246,6 +246,16 @@ const WithOnlineStatusMessage = () => /*#__PURE__*/_react.default.createElement(
 }), /*#__PURE__*/_react.default.createElement(_onlineStatusMessage.OnlineStatusMessageUpdate, null));
 
 exports.WithOnlineStatusMessage = WithOnlineStatusMessage;
+
+const RTLHeader = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+  data: customData
+}, /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Example!"
+})));
+
+exports.RTLHeader = RTLHeader;
 WithOnlineStatusMessage.decorators = [(0, _common.createDecoratorProvider)({ ..._common.providerConfig,
   pwaEnabled: true
 }, { ..._common.mockOfflineInterface,

package/build/cjs/logo.js

@@ -21,13 +21,13 @@ const Logo = () => {
   } = (0, _appRuntime.useConfig)();
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": "headerbar-logo",
-    className: "jsx-2077637423"
+    className: "jsx-1445465036"
   }, /*#__PURE__*/_react.default.createElement("a", {
     href: baseUrl,
-    className: "jsx-2077637423"
+    className: "jsx-1445465036"
   }, /*#__PURE__*/_react.default.createElement(_logoImage.LogoImage, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2077637423"
-  }, ["div.jsx-2077637423{box-sizing:border-box;min-width:49px;max-height:48px;margin:0 12px 0 0;border-right:1px solid rgba(32,32,32,0.15);}", "div.jsx-2077637423:hover{background-color:#1a557f;}", "a.jsx-2077637423,a.jsx-2077637423:hover,a.jsx-2077637423:focus,a.jsx-2077637423:active,a.jsx-2077637423:visited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", "a.jsx-2077637423:focus{outline:2px solid white;outline-offset:-2px;}", "a.jsx-2077637423:focus.jsx-2077637423:not(:focus-visible){outline:none;}"]));
+    id: "1445465036"
+  }, ["div.jsx-1445465036{box-sizing:border-box;min-width:49px;max-height:48px;margin-block:0;margin-inline-end:12px;margin-inline-start:0;border-inline-end:1px solid rgba(32,32,32,0.15);}", "div.jsx-1445465036:hover{background-color:#1a557f;}", "a.jsx-1445465036,a.jsx-1445465036:hover,a.jsx-1445465036:focus,a.jsx-1445465036:active,a.jsx-1445465036:visited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", "a.jsx-1445465036:focus{outline:2px solid white;outline-offset:-2px;}", "a.jsx-1445465036:focus.jsx-1445465036:not(:focus-visible){outline:none;}"]));
 };
 
 exports.Logo = Logo;

package/build/cjs/notification-icon.js

@@ -37,16 +37,17 @@ const NotificationIcon = _ref => {
     dataTestId
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("a", {
+    dir: "ltr",
     href: href,
     "data-test": dataTestId,
-    className: _style.default.dynamic([["2752984221", [_uiConstants.spacers.dp12, _uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]]]) + " " + (kind || "")
+    className: _style.default.dynamic([["995028205", [_uiConstants.spacers.dp12, _uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]]]) + " " + (kind || "")
   }, icon(kind), count > 0 && /*#__PURE__*/_react.default.createElement("span", {
     "data-test": "".concat(dataTestId, "-count"),
-    className: _style.default.dynamic([["2752984221", [_uiConstants.spacers.dp12, _uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]]])
+    className: _style.default.dynamic([["995028205", [_uiConstants.spacers.dp12, _uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]]])
   }, count), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2752984221",
+    id: "995028205",
     dynamic: [_uiConstants.spacers.dp12, _uiConstants.spacers.dp12, _uiConstants.theme.secondary500, _uiConstants.colors.white, _uiConstants.spacers.dp4]
-  }, ["a.__jsx-style-dynamic-selector{position:relative;margin:0;cursor:pointer;padding:0 ".concat(_uiConstants.spacers.dp12, ";height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"), "a.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "a.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "a.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "a.__jsx-style-dynamic-selector:active{background:#104067;}", "span.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;position:absolute;top:3px;right:2px;min-width:18px;min-height:18px;border-radius:".concat(_uiConstants.spacers.dp12, ";box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);background-color:").concat(_uiConstants.theme.secondary500, ";color:").concat(_uiConstants.colors.white, ";font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ").concat(_uiConstants.spacers.dp4, ";}")]));
+  }, ["a.__jsx-style-dynamic-selector{position:relative;margin:0;cursor:pointer;padding:0 ".concat(_uiConstants.spacers.dp12, ";height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"), "a.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "a.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "a.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "a.__jsx-style-dynamic-selector:active{background:#104067;}", "span.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;position:absolute;top:3px;inset-inline-end:2px;min-width:18px;min-height:18px;border-radius:".concat(_uiConstants.spacers.dp12, ";box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);background-color:").concat(_uiConstants.theme.secondary500, ";color:").concat(_uiConstants.colors.white, ";font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ").concat(_uiConstants.spacers.dp4, ";}")]));
 };
 
 exports.NotificationIcon = NotificationIcon;

package/build/cjs/online-status.styles.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-const _defaultExport = [".container.jsx-3029616205{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(_uiConstants.colors.grey100, ";}"), ".container.badge.jsx-3029616205{margin-right:".concat(_uiConstants.spacers.dp8, ";padding:").concat(_uiConstants.spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-3029616205{display:none;padding:0px ".concat(_uiConstants.spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-3029616205{display:none;}.container.bar.jsx-3029616205{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-3029616205{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-3029616205{margin-right:".concat(_uiConstants.spacers.dp16, ";}"), ".info-dense.jsx-3029616205{margin-left:".concat(_uiConstants.spacers.dp12, ";font-size:12px;}"), ".icon.jsx-3029616205{width:8px;min-width:8px;height:8px;border-radius:8px;margin-right:".concat(_uiConstants.spacers.dp4, ";}"), ".icon.online.jsx-3029616205{background-color:".concat(_uiConstants.colors.teal400, ";}"), ".icon.offline.jsx-3029616205{background-color:transparent;border:1px solid ".concat(_uiConstants.colors.yellow300, ";}"), ".icon.reconnecting.jsx-3029616205{background:".concat(_uiConstants.colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-3029616205 2s linear infinite;animation:fadeinout-jsx-3029616205 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-3029616205{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-3029616205{50%{opacity:1;}}", "@keyframes fadeinout-jsx-3029616205{50%{opacity:1;}}", ".label.jsx-3029616205{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
-_defaultExport.__hash = "3029616205";
+const _defaultExport = [".container.jsx-2382375945{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(_uiConstants.colors.grey100, ";}"), ".container.badge.jsx-2382375945{margin-inline-end:".concat(_uiConstants.spacers.dp8, ";padding:").concat(_uiConstants.spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-2382375945{display:none;padding:0px ".concat(_uiConstants.spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-2382375945{display:none;}.container.bar.jsx-2382375945{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-2382375945{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-2382375945{margin-inline-end:".concat(_uiConstants.spacers.dp16, ";}"), ".info-dense.jsx-2382375945{margin-inline-start:".concat(_uiConstants.spacers.dp12, ";font-size:12px;}"), ".icon.jsx-2382375945{width:8px;min-width:8px;height:8px;border-radius:8px;margin-inline-end:".concat(_uiConstants.spacers.dp4, ";}"), ".icon.online.jsx-2382375945{background-color:".concat(_uiConstants.colors.teal400, ";}"), ".icon.offline.jsx-2382375945{background-color:transparent;border:1px solid ".concat(_uiConstants.colors.yellow300, ";}"), ".icon.reconnecting.jsx-2382375945{background:".concat(_uiConstants.colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-2382375945 2s linear infinite;animation:fadeinout-jsx-2382375945 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-2382375945{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-2382375945{50%{opacity:1;}}", "@keyframes fadeinout-jsx-2382375945{50%{opacity:1;}}", ".label.jsx-2382375945{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
+_defaultExport.__hash = "2382375945";
 var _default = _defaultExport;
 exports.default = _default;

package/build/cjs/profile-menu/profile-header.js

@@ -79,10 +79,10 @@ const ProfileDetails = _ref4 => {
     email
   } = _ref4;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-3814112749"
+    className: "jsx-4236878114"
   }, /*#__PURE__*/_react.default.createElement(ProfileName, null, name), /*#__PURE__*/_react.default.createElement(ProfileEmail, null, email), /*#__PURE__*/_react.default.createElement(ProfileEdit, null, _index.default.t('Edit profile')), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3814112749"
-  }, ["div.jsx-3814112749{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:20px;color:#000;font-size:14px;font-weight:400;}"]));
+    id: "4236878114"
+  }, ["div.jsx-4236878114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-inline-start:20px;color:#000;font-size:14px;font-weight:400;}"]));
 };
 
 ProfileDetails.propTypes = {
@@ -97,7 +97,7 @@ const ProfileHeader = _ref5 => {
     avatarId
   } = _ref5;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-3625287538"
+    className: "jsx-371352323"
   }, /*#__PURE__*/_react.default.createElement(_userAvatar.UserAvatar, {
     avatarId: avatarId,
     name: name,
@@ -107,8 +107,8 @@ const ProfileHeader = _ref5 => {
     name: name,
     email: email
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3625287538"
-  }, ["div.jsx-3625287538{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-left:24px;padding-top:20px;}"]));
+    id: "371352323"
+  }, ["div.jsx-371352323{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-inline-start:24px;padding-top:20px;}"]));
 };
 
 exports.ProfileHeader = ProfileHeader;

package/build/cjs/profile-menu/profile-menu.js

@@ -145,10 +145,10 @@ const ProfileMenu = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": "headerbar-profile-menu",
-    className: "jsx-2907613216"
+    className: "jsx-3924623997"
   }, /*#__PURE__*/_react.default.createElement(ProfileContents, props), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2907613216"
-  }, ["div.jsx-2907613216{z-index:10000;position:absolute;right:4px;width:320px;}"]));
+    id: "3924623997"
+  }, ["div.jsx-3924623997{z-index:10000;position:absolute;inset-inline-end:4px;width:320px;}"]));
 };
 
 exports.ProfileMenu = ProfileMenu;

package/build/es/apps.js

@@ -86,7 +86,7 @@ function List(_ref3) {
   } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-apps-menu-list",
-    className: "jsx-2076871745"
+    className: "jsx-2424821176"
   }, apps.filter(_ref4 => {
     let {
       displayName,
@@ -110,8 +110,8 @@ function List(_ref3) {
       img: icon
     });
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2076871745"
-  }, ["div.jsx-2076871745{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:30vw;min-width:300px;max-width:560px;min-height:200px;max-height:465px;margin:0 8px 8px 8px;overflow:auto;overflow-x:hidden;}"]));
+    id: "2424821176"
+  }, ["div.jsx-2424821176{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:30vw;min-width:300px;max-width:560px;min-height:200px;max-height:465px;margin-block-start:0;margin-block-end:8px;margin-inline:8px;overflow:auto;overflow-x:hidden;}"]));
 }
 
 List.propTypes = {
@@ -127,7 +127,7 @@ const AppMenu = _ref6 => {
   } = _ref6;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-apps-menu",
-    className: "jsx-105953480"
+    className: "jsx-3826299842"
   }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Search, {
     value: filter,
     onChange: onFilterChange
@@ -135,8 +135,8 @@ const AppMenu = _ref6 => {
     apps: apps,
     filter: filter
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "105953480"
-  }, ["div.jsx-105953480{z-index:10000;position:absolute;right:-4px;}"]));
+    id: "3826299842"
+  }, ["div.jsx-3826299842{z-index:10000;position:absolute;inset-inline-end:-4px;}"]));
 };
 
 AppMenu.propTypes = {
@@ -171,11 +171,11 @@ const Apps = _ref7 => {
   return /*#__PURE__*/React.createElement("div", {
     ref: containerEl,
     "data-test": "headerbar-apps",
-    className: _JSXStyle.dynamic([["2891838412", [spacers.dp4, spacers.dp12]]])
+    className: _JSXStyle.dynamic([["325245423", [spacers.dp4, spacers.dp12]]])
   }, /*#__PURE__*/React.createElement("button", {
     onClick: handleVisibilityToggle,
     "data-test": "headerbar-apps-icon",
-    className: _JSXStyle.dynamic([["2891838412", [spacers.dp4, spacers.dp12]]])
+    className: _JSXStyle.dynamic([["325245423", [spacers.dp4, spacers.dp12]]])
   }, /*#__PURE__*/React.createElement(IconApps24, {
     color: colors.white
   })), show ? /*#__PURE__*/React.createElement(AppMenu, {
@@ -183,9 +183,9 @@ const Apps = _ref7 => {
     filter: filter,
     onFilterChange: handleFilterChange
   }) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2891838412",
+    id: "325245423",
     dynamic: [spacers.dp4, spacers.dp12]
-  }, ["button.__jsx-style-dynamic-selector{display:block;background:transparent;padding:".concat(spacers.dp4, " ").concat(spacers.dp12, " 0;border:0;cursor:pointer;height:100%;}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "button.__jsx-style-dynamic-selector:active{background:#104067;}", "div.__jsx-style-dynamic-selector{position:relative;height:100%;}"]));
+  }, ["button.__jsx-style-dynamic-selector{display:block;background:transparent;padding-block-start:".concat(spacers.dp4, ";padding-block-end:0;padding-inline:").concat(spacers.dp12, ";border:0;cursor:pointer;height:100%;}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "button.__jsx-style-dynamic-selector:active{background:#104067;}", "div.__jsx-style-dynamic-selector{position:relative;height:100%;}"]));
 };
 
 Apps.propTypes = {

package/build/es/debug-info/debug-info-table.js

@@ -18,18 +18,18 @@ export function DebugInfoTable() {
   const debugInfo = useDebugInfo();
   return /*#__PURE__*/React.createElement("table", {
     'data-test': 'dhis2-ui-headerbar-debuginfotable',
-    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]])
+    className: _JSXStyle.dynamic([["4076206425", [colors.grey700]]])
   }, /*#__PURE__*/React.createElement("tbody", {
-    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]])
+    className: _JSXStyle.dynamic([["4076206425", [colors.grey700]]])
   }, Object.keys(debugInfo).map(key => /*#__PURE__*/React.createElement("tr", {
     key: key,
-    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]])
+    className: _JSXStyle.dynamic([["4076206425", [colors.grey700]]])
   }, /*#__PURE__*/React.createElement("td", {
-    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]]) + " " + "debug-info-key"
+    className: _JSXStyle.dynamic([["4076206425", [colors.grey700]]]) + " " + "debug-info-key"
   }, formatDebugInfoKey(key)), /*#__PURE__*/React.createElement("td", {
-    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]])
+    className: _JSXStyle.dynamic([["4076206425", [colors.grey700]]])
   }, debugInfo[key])))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "865651843",
+    id: "4076206425",
     dynamic: [colors.grey700]
-  }, ["table.__jsx-style-dynamic-selector{white-space:pre-wrap;font-size:14px;line-height:1.2;color:".concat(colors.grey700, ";font-famile:Menlo,Courier,monospace !important;}"), "td.__jsx-style-dynamic-selector{padding:3px 16px 3px 0;}", ".debug-info-key.__jsx-style-dynamic-selector{font-weight:bold;}"]));
+  }, ["table.__jsx-style-dynamic-selector{white-space:pre-wrap;font-size:14px;line-height:1.2;color:".concat(colors.grey700, ";font-famile:Menlo,Courier,monospace !important;}"), "td.__jsx-style-dynamic-selector{padding-block:3px;padding-inline-end:16px;padding-inline-start:0;}", ".debug-info-key.__jsx-style-dynamic-selector{font-weight:bold;}"]));
 }

package/build/es/header-bar.js

@@ -72,14 +72,14 @@ export const HeaderBar = _ref => {
     updateAvailable: updateAvailable,
     onApplyAvailableUpdate: onApplyAvailableUpdate
   }, /*#__PURE__*/React.createElement("header", {
-    className: _JSXStyle.dynamic([["2211918310", [colors.white]]]) + " " + (className || "")
+    className: _JSXStyle.dynamic([["4230161118", [colors.white]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2211918310", [colors.white]]]) + " " + "main"
+    className: _JSXStyle.dynamic([["4230161118", [colors.white]]]) + " " + "main"
   }, !loading && !error && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Logo, null), /*#__PURE__*/React.createElement(Title, {
     app: appName || configAppName,
     instance: data.title.applicationTitle
   }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2211918310", [colors.white]]]) + " " + "right-control-spacer"
+    className: _JSXStyle.dynamic([["4230161118", [colors.white]]]) + " " + "right-control-spacer"
   }), pwaEnabled && /*#__PURE__*/React.createElement(OnlineStatus, null), /*#__PURE__*/React.createElement(Notifications, {
     interpretations: data.notifications.unreadInterpretations,
     messages: data.notifications.unreadMessageConversations,
@@ -94,9 +94,9 @@ export const HeaderBar = _ref => {
   }))), pwaEnabled && !loading && !error && /*#__PURE__*/React.createElement(OnlineStatus, {
     dense: true
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2211918310",
+    id: "4230161118",
     dynamic: [colors.white]
-  }, [".main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;color:".concat(colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-left:auto;}"])));
+  }, [".main.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;color:".concat(colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-inline-start:auto;}"])));
 };
 HeaderBar.propTypes = {
   appName: PropTypes.string,

package/build/es/header-bar.stories.js

@@ -204,6 +204,13 @@ export const WithOnlineStatusMessage = () => /*#__PURE__*/React.createElement(Cu
 }, /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Exemple!"
 }), /*#__PURE__*/React.createElement(OnlineStatusMessageUpdate, null));
+export const RTLHeader = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+  data: customData
+}, /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Example!"
+})));
 WithOnlineStatusMessage.decorators = [createDecoratorProvider({ ...providerConfig,
   pwaEnabled: true
 }, { ...mockOfflineInterface,

package/build/es/logo.js

@@ -8,11 +8,11 @@ export const Logo = () => {
   } = useConfig();
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-logo",
-    className: "jsx-2077637423"
+    className: "jsx-1445465036"
   }, /*#__PURE__*/React.createElement("a", {
     href: baseUrl,
-    className: "jsx-2077637423"
+    className: "jsx-1445465036"
   }, /*#__PURE__*/React.createElement(LogoImage, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2077637423"
-  }, ["div.jsx-2077637423{box-sizing:border-box;min-width:49px;max-height:48px;margin:0 12px 0 0;border-right:1px solid rgba(32,32,32,0.15);}", "div.jsx-2077637423:hover{background-color:#1a557f;}", "a.jsx-2077637423,a.jsx-2077637423:hover,a.jsx-2077637423:focus,a.jsx-2077637423:active,a.jsx-2077637423:visited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", "a.jsx-2077637423:focus{outline:2px solid white;outline-offset:-2px;}", "a.jsx-2077637423:focus.jsx-2077637423:not(:focus-visible){outline:none;}"]));
+    id: "1445465036"
+  }, ["div.jsx-1445465036{box-sizing:border-box;min-width:49px;max-height:48px;margin-block:0;margin-inline-end:12px;margin-inline-start:0;border-inline-end:1px solid rgba(32,32,32,0.15);}", "div.jsx-1445465036:hover{background-color:#1a557f;}", "a.jsx-1445465036,a.jsx-1445465036:hover,a.jsx-1445465036:focus,a.jsx-1445465036:active,a.jsx-1445465036:visited{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", "a.jsx-1445465036:focus{outline:2px solid white;outline-offset:-2px;}", "a.jsx-1445465036:focus.jsx-1445465036:not(:focus-visible){outline:none;}"]));
 };

package/build/es/notification-icon.js

@@ -24,16 +24,17 @@ export const NotificationIcon = _ref => {
     dataTestId
   } = _ref;
   return /*#__PURE__*/React.createElement("a", {
+    dir: "ltr",
     href: href,
     "data-test": dataTestId,
-    className: _JSXStyle.dynamic([["2752984221", [spacers.dp12, spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]]) + " " + (kind || "")
+    className: _JSXStyle.dynamic([["995028205", [spacers.dp12, spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]]) + " " + (kind || "")
   }, icon(kind), count > 0 && /*#__PURE__*/React.createElement("span", {
     "data-test": "".concat(dataTestId, "-count"),
-    className: _JSXStyle.dynamic([["2752984221", [spacers.dp12, spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]])
+    className: _JSXStyle.dynamic([["995028205", [spacers.dp12, spacers.dp12, theme.secondary500, colors.white, spacers.dp4]]])
   }, count), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2752984221",
+    id: "995028205",
     dynamic: [spacers.dp12, spacers.dp12, theme.secondary500, colors.white, spacers.dp4]
-  }, ["a.__jsx-style-dynamic-selector{position:relative;margin:0;cursor:pointer;padding:0 ".concat(spacers.dp12, ";height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"), "a.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "a.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "a.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "a.__jsx-style-dynamic-selector:active{background:#104067;}", "span.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;position:absolute;top:3px;right:2px;min-width:18px;min-height:18px;border-radius:".concat(spacers.dp12, ";box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);background-color:").concat(theme.secondary500, ";color:").concat(colors.white, ";font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ").concat(spacers.dp4, ";}")]));
+  }, ["a.__jsx-style-dynamic-selector{position:relative;margin:0;cursor:pointer;padding:0 ".concat(spacers.dp12, ";height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"), "a.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "a.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "a.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "a.__jsx-style-dynamic-selector:active{background:#104067;}", "span.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:1;position:absolute;top:3px;inset-inline-end:2px;min-width:18px;min-height:18px;border-radius:".concat(spacers.dp12, ";box-shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);background-color:").concat(theme.secondary500, ";color:").concat(colors.white, ";font-size:13px;font-weight:600;line-height:15px;text-align:center;cursor:inherit;padding:0 ").concat(spacers.dp4, ";}")]));
 };
 NotificationIcon.defaultProps = {
   count: 0

package/build/es/online-status.styles.js

@@ -1,4 +1,4 @@
 import { colors, spacers } from '@dhis2/ui-constants';
-const _defaultExport = [".container.jsx-3029616205{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(colors.grey100, ";}"), ".container.badge.jsx-3029616205{margin-right:".concat(spacers.dp8, ";padding:").concat(spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-3029616205{display:none;padding:0px ".concat(spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-3029616205{display:none;}.container.bar.jsx-3029616205{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-3029616205{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-3029616205{margin-right:".concat(spacers.dp16, ";}"), ".info-dense.jsx-3029616205{margin-left:".concat(spacers.dp12, ";font-size:12px;}"), ".icon.jsx-3029616205{width:8px;min-width:8px;height:8px;border-radius:8px;margin-right:".concat(spacers.dp4, ";}"), ".icon.online.jsx-3029616205{background-color:".concat(colors.teal400, ";}"), ".icon.offline.jsx-3029616205{background-color:transparent;border:1px solid ".concat(colors.yellow300, ";}"), ".icon.reconnecting.jsx-3029616205{background:".concat(colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-3029616205 2s linear infinite;animation:fadeinout-jsx-3029616205 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-3029616205{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-3029616205{50%{opacity:1;}}", "@keyframes fadeinout-jsx-3029616205{50%{opacity:1;}}", ".label.jsx-3029616205{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
-_defaultExport.__hash = "3029616205";
+const _defaultExport = [".container.jsx-2382375945{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(colors.grey100, ";}"), ".container.badge.jsx-2382375945{margin-inline-end:".concat(spacers.dp8, ";padding:").concat(spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-2382375945{display:none;padding:0px ".concat(spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-2382375945{display:none;}.container.bar.jsx-2382375945{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-2382375945{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-2382375945{margin-inline-end:".concat(spacers.dp16, ";}"), ".info-dense.jsx-2382375945{margin-inline-start:".concat(spacers.dp12, ";font-size:12px;}"), ".icon.jsx-2382375945{width:8px;min-width:8px;height:8px;border-radius:8px;margin-inline-end:".concat(spacers.dp4, ";}"), ".icon.online.jsx-2382375945{background-color:".concat(colors.teal400, ";}"), ".icon.offline.jsx-2382375945{background-color:transparent;border:1px solid ".concat(colors.yellow300, ";}"), ".icon.reconnecting.jsx-2382375945{background:".concat(colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-2382375945 2s linear infinite;animation:fadeinout-jsx-2382375945 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-2382375945{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-2382375945{50%{opacity:1;}}", "@keyframes fadeinout-jsx-2382375945{50%{opacity:1;}}", ".label.jsx-2382375945{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
+_defaultExport.__hash = "2382375945";
 export default _defaultExport;

package/build/es/profile-menu/profile-header.js

@@ -64,10 +64,10 @@ const ProfileDetails = _ref4 => {
     email
   } = _ref4;
   return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-3814112749"
+    className: "jsx-4236878114"
   }, /*#__PURE__*/React.createElement(ProfileName, null, name), /*#__PURE__*/React.createElement(ProfileEmail, null, email), /*#__PURE__*/React.createElement(ProfileEdit, null, i18n.t('Edit profile')), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3814112749"
-  }, ["div.jsx-3814112749{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-left:20px;color:#000;font-size:14px;font-weight:400;}"]));
+    id: "4236878114"
+  }, ["div.jsx-4236878114{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-inline-start:20px;color:#000;font-size:14px;font-weight:400;}"]));
 };
 
 ProfileDetails.propTypes = {
@@ -81,7 +81,7 @@ export const ProfileHeader = _ref5 => {
     avatarId
   } = _ref5;
   return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-3625287538"
+    className: "jsx-371352323"
   }, /*#__PURE__*/React.createElement(UserAvatar, {
     avatarId: avatarId,
     name: name,
@@ -91,8 +91,8 @@ export const ProfileHeader = _ref5 => {
     name: name,
     email: email
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3625287538"
-  }, ["div.jsx-3625287538{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-left:24px;padding-top:20px;}"]));
+    id: "371352323"
+  }, ["div.jsx-371352323{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-inline-start:24px;padding-top:20px;}"]));
 };
 ProfileHeader.propTypes = {
   avatarId: PropTypes.string,

package/build/es/profile-menu/profile-menu.js

@@ -115,10 +115,10 @@ export const ProfileMenu = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-profile-menu",
-    className: "jsx-2907613216"
+    className: "jsx-3924623997"
   }, /*#__PURE__*/React.createElement(ProfileContents, props), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2907613216"
-  }, ["div.jsx-2907613216{z-index:10000;position:absolute;right:4px;width:320px;}"]));
+    id: "3924623997"
+  }, ["div.jsx-3924623997{z-index:10000;position:absolute;inset-inline-end:4px;width:320px;}"]));
 };
 ProfileMenu.propTypes = {
   hideProfileMenu: PropTypes.func.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/header-bar",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.2",
     "description": "UI HeaderBar",
     "repository": {
         "type": "git",
@@ -34,21 +34,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "9.3.0",
-        "@dhis2-ui/button": "9.3.0",
-        "@dhis2-ui/card": "9.3.0",
-        "@dhis2-ui/center": "9.3.0",
-        "@dhis2-ui/divider": "9.3.0",
-        "@dhis2-ui/input": "9.3.0",
-        "@dhis2-ui/layer": "9.3.0",
-        "@dhis2-ui/loader": "9.3.0",
-        "@dhis2-ui/logo": "9.3.0",
-        "@dhis2-ui/menu": "9.3.0",
-        "@dhis2-ui/modal": "9.3.0",
-        "@dhis2-ui/user-avatar": "9.3.0",
+        "@dhis2-ui/box": "9.4.0-alpha.2",
+        "@dhis2-ui/button": "9.4.0-alpha.2",
+        "@dhis2-ui/card": "9.4.0-alpha.2",
+        "@dhis2-ui/center": "9.4.0-alpha.2",
+        "@dhis2-ui/divider": "9.4.0-alpha.2",
+        "@dhis2-ui/input": "9.4.0-alpha.2",
+        "@dhis2-ui/layer": "9.4.0-alpha.2",
+        "@dhis2-ui/loader": "9.4.0-alpha.2",
+        "@dhis2-ui/logo": "9.4.0-alpha.2",
+        "@dhis2-ui/menu": "9.4.0-alpha.2",
+        "@dhis2-ui/modal": "9.4.0-alpha.2",
+        "@dhis2-ui/user-avatar": "9.4.0-alpha.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
-        "@dhis2/ui-icons": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.2",
+        "@dhis2/ui-icons": "9.4.0-alpha.2",
         "classnames": "^2.3.1",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2"