@dhis2-ui/alert 10.16.3 → 10.16.4

package/build/cjs/alert-bar/action.js

@@ -8,15 +8,14 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class Action extends _react.Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "onClick", event => {
       this.props.onClick(event);
       this.props.hide(event);

package/build/cjs/alert-bar/actions.js

@@ -12,12 +12,11 @@ var _react = _interopRequireDefault(require("react"));
 var _action = require("./action.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const Actions = _ref => {
-  let {
-    actions,
-    hide,
-    dataTest
-  } = _ref;
+const Actions = ({
+  actions,
+  hide,
+  dataTest
+}) => {
   if (!actions) {
     return null;
   }

package/build/cjs/alert-bar/alert-bar.e2e.stories.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.WithOnHidden = exports.WithMessage = exports.PermanentWithActions = exports.Permanent = exports.HiddenProp = exports.DisabledIcon = exports.Default = exports.CustomIcon = exports.CustomDuration = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("./index.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 window.onHidden = window.Cypress && window.Cypress.cy.stub();
 var _default = exports.default = {
   title: 'AlertBar'

package/build/cjs/alert-bar/alert-bar.js

@@ -14,24 +14,22 @@ var _alertBarStyles = _interopRequireWildcard(require("./alert-bar.styles.js"));
 var _dismiss = require("./dismiss.js");
 var _icon = require("./icon.js");
 var _message = require("./message.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AlertBar = _ref => {
-  let {
-    actions,
-    children,
-    className,
-    critical,
-    dataTest = 'dhis2-uicore-alertbar',
-    duration = 8000,
-    hidden,
-    icon = true,
-    permanent,
-    success,
-    warning,
-    onHidden
-  } = _ref;
+const AlertBar = ({
+  actions,
+  children,
+  className,
+  critical,
+  dataTest = 'dhis2-uicore-alertbar',
+  duration = 8000,
+  hidden,
+  icon = true,
+  permanent,
+  success,
+  warning,
+  onHidden
+}) => {
   const [inViewport, setInViewport] = (0, _react.useState)(!hidden);
   const [inDOM, setInDOM] = (0, _react.useState)(!hidden);
   const alertRef = (0, _react.useRef)(null);

package/build/cjs/alert-bar/alert-bar.prod.stories.js

@@ -7,8 +7,7 @@ exports.default = exports.WithActionsAndInsufficientSpace = exports.WithActions
 var _uiIcons = require("@dhis2/ui-icons");
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("./index.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const subtitle = `
 A floating alert that informs the user about temporary information
 in the context of the current screen.

package/build/cjs/alert-bar/dismiss.js

@@ -10,20 +10,17 @@ var _uiIcons = require("@dhis2/ui-icons");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Dismiss = _ref => {
-  let {
-    onClick,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    onClick: onClick,
-    "data-test": dataTest,
-    className: _style.default.dynamic([["1892313381", [_uiConstants.spacers.dp16]]])
-  }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross24, null), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1892313381",
-    dynamic: [_uiConstants.spacers.dp16]
-  }, [`div.__jsx-style-dynamic-selector{margin-inline-start:${_uiConstants.spacers.dp16};min-height:32px;min-width:32px;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;border-radius:5px;}`, "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
-};
+const Dismiss = ({
+  onClick,
+  dataTest
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  onClick: onClick,
+  "data-test": dataTest,
+  className: _style.default.dynamic([["1892313381", [_uiConstants.spacers.dp16]]])
+}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross24, null), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "1892313381",
+  dynamic: [_uiConstants.spacers.dp16]
+}, [`div.__jsx-style-dynamic-selector{margin-inline-start:${_uiConstants.spacers.dp16};min-height:32px;min-width:32px;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;border-radius:5px;}`, "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
 exports.Dismiss = Dismiss;
 Dismiss.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/alert-bar/icon.js

@@ -11,14 +11,13 @@ var _uiIcons = require("@dhis2/ui-icons");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StatusIcon = _ref => {
-  let {
-    error,
-    warning,
-    valid,
-    info,
-    defaultTo = null
-  } = _ref;
+const StatusIcon = ({
+  error,
+  warning,
+  valid,
+  info,
+  defaultTo = null
+}) => {
   if (error) {
     return /*#__PURE__*/_react.default.createElement(_uiIcons.IconErrorFilled24, {
       color: _uiConstants.colors.white
@@ -48,15 +47,14 @@ StatusIcon.propTypes = {
   valid: _propTypes2.default.bool,
   warning: _propTypes2.default.bool
 };
-const Icon = _ref2 => {
-  let {
-    icon,
-    success,
-    warning,
-    critical,
-    info,
-    dataTest
-  } = _ref2;
+const Icon = ({
+  icon,
+  success,
+  warning,
+  critical,
+  info,
+  dataTest
+}) => {
   if (icon === false) {
     return null;
   }

package/build/cjs/alert-bar/message.js

@@ -8,16 +8,13 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Message = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-2181391309"
-  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2181391309"
-  }, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
-};
+const Message = ({
+  children
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  className: "jsx-2181391309"
+}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "2181391309"
+}, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
 exports.Message = Message;
 Message.propTypes = {
   children: _propTypes.default.string.isRequired

package/build/cjs/alert-stack/alert-stack.js

@@ -11,20 +11,17 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AlertStack = _ref => {
-  let {
-    className,
-    children,
-    dataTest = 'dhis2-uicore-alertstack'
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_portal.Portal, null, /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest,
-    className: _style.default.dynamic([["1009591311", [_uiConstants.layers.alert]]]) + " " + ((0, _classnames.default)(className) || "")
-  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1009591311",
-    dynamic: [_uiConstants.layers.alert]
-  }, [`div.__jsx-style-dynamic-selector{position:fixed;top:auto;inset-inline-end:auto;bottom:0;inset-inline-start:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:${_uiConstants.layers.alert};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;pointer-events:none;}`, "div.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}"])));
-};
+const AlertStack = ({
+  className,
+  children,
+  dataTest = 'dhis2-uicore-alertstack'
+}) => /*#__PURE__*/_react.default.createElement(_portal.Portal, null, /*#__PURE__*/_react.default.createElement("div", {
+  "data-test": dataTest,
+  className: _style.default.dynamic([["1009591311", [_uiConstants.layers.alert]]]) + " " + ((0, _classnames.default)(className) || "")
+}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "1009591311",
+  dynamic: [_uiConstants.layers.alert]
+}, [`div.__jsx-style-dynamic-selector{position:fixed;top:auto;inset-inline-end:auto;bottom:0;inset-inline-start:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:${_uiConstants.layers.alert};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;pointer-events:none;}`, "div.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}"])));
 exports.AlertStack = AlertStack;
 AlertStack.propTypes = {
   children: _propTypes.default.node,

package/build/cjs/alert-stack/alert-stack.prod.stories.js

@@ -7,8 +7,7 @@ exports.default = exports.RTL = exports.Interactive = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../alert-bar/index.js");
 var _alertStack = require("./alert-stack.js");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const VARIANTS = ['info', 'success', 'warning', 'critical'];
 const description = `
 A container for Alert Bars.
@@ -68,18 +67,15 @@ const Interactive = args => {
       fontSize: '14px',
       cursor: 'pointer'
     }
-  }, "Add alert"), /*#__PURE__*/_react.default.createElement(_alertStack.AlertStack, args, alerts.map(_ref => {
-    let {
-      id,
-      variant,
-      message
-    } = _ref;
-    return /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
-      key: id,
-      [variant]: true,
-      onHidden: () => removeAlert(id)
-    }, message);
-  })));
+  }, "Add alert"), /*#__PURE__*/_react.default.createElement(_alertStack.AlertStack, args, alerts.map(({
+    id,
+    variant,
+    message
+  }) => /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
+    key: id,
+    [variant]: true,
+    onHidden: () => removeAlert(id)
+  }, message))));
 };
 exports.Interactive = Interactive;
 const RTL = args => {

package/build/es/alert-bar/action.js

@@ -6,8 +6,8 @@ import { spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 class Action extends Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     _defineProperty(this, "onClick", event => {
       this.props.onClick(event);
       this.props.hide(event);

package/build/es/alert-bar/actions.js

@@ -5,12 +5,11 @@ import { spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Action } from './action.js';
-const Actions = _ref => {
-  let {
-    actions,
-    hide,
-    dataTest
-  } = _ref;
+const Actions = ({
+  actions,
+  hide,
+  dataTest
+}) => {
   if (!actions) {
     return null;
   }

package/build/es/alert-bar/alert-bar.js

@@ -8,21 +8,20 @@ import styles, { ANIMATION_TIME } from './alert-bar.styles.js';
 import { Dismiss } from './dismiss.js';
 import { Icon, iconPropType } from './icon.js';
 import { Message } from './message.js';
-const AlertBar = _ref => {
-  let {
-    actions,
-    children,
-    className,
-    critical,
-    dataTest = 'dhis2-uicore-alertbar',
-    duration = 8000,
-    hidden,
-    icon = true,
-    permanent,
-    success,
-    warning,
-    onHidden
-  } = _ref;
+const AlertBar = ({
+  actions,
+  children,
+  className,
+  critical,
+  dataTest = 'dhis2-uicore-alertbar',
+  duration = 8000,
+  hidden,
+  icon = true,
+  permanent,
+  success,
+  warning,
+  onHidden
+}) => {
   const [inViewport, setInViewport] = useState(!hidden);
   const [inDOM, setInDOM] = useState(!hidden);
   const alertRef = useRef(null);

package/build/es/alert-bar/dismiss.js

@@ -3,20 +3,17 @@ import { spacers } from '@dhis2/ui-constants';
 import { IconCross24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-const Dismiss = _ref => {
-  let {
-    onClick,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: onClick,
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["1892313381", [spacers.dp16]]])
-  }, /*#__PURE__*/React.createElement(IconCross24, null), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1892313381",
-    dynamic: [spacers.dp16]
-  }, [`div.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp16};min-height:32px;min-width:32px;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;border-radius:5px;}`, "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
-};
+const Dismiss = ({
+  onClick,
+  dataTest
+}) => /*#__PURE__*/React.createElement("div", {
+  onClick: onClick,
+  "data-test": dataTest,
+  className: _JSXStyle.dynamic([["1892313381", [spacers.dp16]]])
+}, /*#__PURE__*/React.createElement(IconCross24, null), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "1892313381",
+  dynamic: [spacers.dp16]
+}, [`div.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp16};min-height:32px;min-width:32px;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;border-radius:5px;}`, "div.__jsx-style-dynamic-selector:hover{cursor:pointer;background:rgba(0,0,0,0.15);}", "div.__jsx-style-dynamic-selector:active{background:rgba(0,0,0,0.25);}", "div.__jsx-style-dynamic-selector svg{width:18px;height:18px;}"]));
 Dismiss.propTypes = {
   dataTest: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired

package/build/es/alert-bar/icon.js

@@ -4,14 +4,13 @@ import { spacers, colors } from '@dhis2/ui-constants';
 import { IconErrorFilled24, IconInfoFilled24, IconWarningFilled24, IconCheckmark24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-const StatusIcon = _ref => {
-  let {
-    error,
-    warning,
-    valid,
-    info,
-    defaultTo = null
-  } = _ref;
+const StatusIcon = ({
+  error,
+  warning,
+  valid,
+  info,
+  defaultTo = null
+}) => {
   if (error) {
     return /*#__PURE__*/React.createElement(IconErrorFilled24, {
       color: colors.white
@@ -41,15 +40,14 @@ StatusIcon.propTypes = {
   valid: PropTypes.bool,
   warning: PropTypes.bool
 };
-const Icon = _ref2 => {
-  let {
-    icon,
-    success,
-    warning,
-    critical,
-    info,
-    dataTest
-  } = _ref2;
+const Icon = ({
+  icon,
+  success,
+  warning,
+  critical,
+  info,
+  dataTest
+}) => {
   if (icon === false) {
     return null;
   }

package/build/es/alert-bar/message.js

@@ -1,16 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
-const Message = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "jsx-2181391309"
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2181391309"
-  }, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
-};
+const Message = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "jsx-2181391309"
+}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "2181391309"
+}, ["div.jsx-2181391309{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"]));
 Message.propTypes = {
   children: PropTypes.string.isRequired
 };

package/build/es/alert-stack/alert-stack.js

@@ -4,20 +4,17 @@ import { Portal } from '@dhis2-ui/portal';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const AlertStack = _ref => {
-  let {
-    className,
-    children,
-    dataTest = 'dhis2-uicore-alertstack'
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["1009591311", [layers.alert]]]) + " " + (cx(className) || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1009591311",
-    dynamic: [layers.alert]
-  }, [`div.__jsx-style-dynamic-selector{position:fixed;top:auto;inset-inline-end:auto;bottom:0;inset-inline-start:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:${layers.alert};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;pointer-events:none;}`, "div.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}"])));
-};
+export const AlertStack = ({
+  className,
+  children,
+  dataTest = 'dhis2-uicore-alertstack'
+}) => /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  className: _JSXStyle.dynamic([["1009591311", [layers.alert]]]) + " " + (cx(className) || "")
+}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "1009591311",
+  dynamic: [layers.alert]
+}, [`div.__jsx-style-dynamic-selector{position:fixed;top:auto;inset-inline-end:auto;bottom:0;inset-inline-start:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:${layers.alert};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;pointer-events:none;}`, "div.__jsx-style-dynamic-selector:dir(rtl){-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}"])));
 AlertStack.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

package/build/es/alert-stack/alert-stack.prod.stories.js

@@ -59,18 +59,15 @@ export const Interactive = args => {
       fontSize: '14px',
       cursor: 'pointer'
     }
-  }, "Add alert"), /*#__PURE__*/React.createElement(AlertStack, args, alerts.map(_ref => {
-    let {
-      id,
-      variant,
-      message
-    } = _ref;
-    return /*#__PURE__*/React.createElement(AlertBar, {
-      key: id,
-      [variant]: true,
-      onHidden: () => removeAlert(id)
-    }, message);
-  })));
+  }, "Add alert"), /*#__PURE__*/React.createElement(AlertStack, args, alerts.map(({
+    id,
+    variant,
+    message
+  }) => /*#__PURE__*/React.createElement(AlertBar, {
+    key: id,
+    [variant]: true,
+    onHidden: () => removeAlert(id)
+  }, message))));
 };
 export const RTL = args => {
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/alert",
-    "version": "10.16.3",
+    "version": "10.16.4",
     "description": "UI Alert",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/portal": "10.16.3",
-        "@dhis2/ui-constants": "10.16.3",
-        "@dhis2/ui-icons": "10.16.3",
+        "@dhis2-ui/portal": "10.16.4",
+        "@dhis2/ui-constants": "10.16.4",
+        "@dhis2/ui-icons": "10.16.4",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },