@hitachivantara/uikit-react-lab 3.41.5 → 3.41.8

package/dist/legacy/DotPagination/DotPagination.js

@@ -0,0 +1,136 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel", "id"];
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { HvRadio, HvRadioGroup } from "@hitachivantara/uikit-react-core";
+import { CurrentStep, RadioButtonUnselected } from "@hitachivantara/uikit-react-icons";
+import styles from "./styles";
+export var getSelectorIcons = function getSelectorIcons(classes, options) {
+  var disabled = options.disabled;
+  var color = disabled && ["atmo3", "atmo5"] || undefined;
+  var checkedColor = disabled && ["atmo3", "atmo5"] || undefined;
+  return {
+    radio: /*#__PURE__*/React.createElement(RadioButtonUnselected, {
+      color: color,
+      className: classes.icon,
+      iconSize: "XS"
+    }),
+    radioChecked: /*#__PURE__*/React.createElement(CurrentStep, {
+      color: checkedColor,
+      className: classes.icon,
+      iconSize: "XS"
+    })
+  };
+};
+/**
+ * DotPagination description/documentation paragraph
+ */
+
+var HvDotPagination = function HvDotPagination(props) {
+  var className = props.className,
+      classes = props.classes,
+      _props$pages = props.pages,
+      pages = _props$pages === void 0 ? 1 : _props$pages,
+      _props$page = props.page,
+      page = _props$page === void 0 ? 0 : _props$page,
+      onPageChange = props.onPageChange,
+      getItemAriaLabel = props.getItemAriaLabel,
+      id = props.id,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var range = function range(n) {
+    return Array.from(Array(n), function (v, i) {
+      return i;
+    });
+  };
+
+  var icons = getSelectorIcons(classes, {});
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(className, classes.root)
+  }, others), /*#__PURE__*/React.createElement(HvRadioGroup, {
+    classes: {
+      horizontal: classes.horizontal
+    },
+    orientation: "horizontal"
+  }, range(pages).map(function (pg, i) {
+    return /*#__PURE__*/React.createElement(HvRadio, {
+      classes: {
+        root: classes.radioRoot
+      },
+      key: "dot_navigation".concat(id && id.toString(), "_item").concat(i.toString()),
+      value: i,
+      checked: page === i,
+      onChange: function onChange() {
+        return onPageChange(i);
+      },
+      icon: icons.radio,
+      checkedIcon: icons.radioChecked,
+      "aria-label": getItemAriaLabel(i)
+    });
+  })));
+};
+
+process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the radio button group to overrrite horizontal class margins.
+     */
+    horizontal: PropTypes.string,
+
+    /**
+     *  Styles applied to the radio root ( to override radio group horizontal )
+     */
+    radioRoot: PropTypes.string
+  }).isRequired,
+
+  /**
+   *  The number of pages the component has.
+   */
+  pages: PropTypes.number,
+
+  /**
+   * The currently selected page (0-indexed).
+   */
+  page: PropTypes.number,
+
+  /**
+   * Function called when the page changes.
+   */
+  onPageChange: PropTypes.func,
+
+  /**
+   * Function called to get the respective aria label.
+   */
+  getItemAriaLabel: PropTypes.func,
+
+  /**
+   *  Component id used to generate unique radio keys ( to avoid repeated keys in case multiple dotPagination components are needed)
+   */
+  id: PropTypes.number
+} : void 0;
+export default withStyles(styles, {
+  name: "HvDotPagination"
+})(HvDotPagination);
+//# sourceMappingURL=DotPagination.js.map

package/dist/legacy/DotPagination/DotPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DotPagination/DotPagination.js"],"names":["React","PropTypes","clsx","withStyles","HvRadio","HvRadioGroup","CurrentStep","RadioButtonUnselected","styles","getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","id","others","range","n","Array","from","v","i","icons","root","horizontal","map","pg","radioRoot","toString","propTypes","string","shape","isRequired","number","func","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport { HvRadio, HvRadioGroup } from \"@hitachivantara/uikit-react-core\";\nimport { CurrentStep, RadioButtonUnselected } from \"@hitachivantara/uikit-react-icons\";\nimport styles from \"./styles\";\n\nexport const getSelectorIcons = (classes, options) => {\n  const { disabled } = options;\n  const color = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n  const checkedColor = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} iconSize=\"XS\" />,\n    radioChecked: <CurrentStep color={checkedColor} className={classes.icon} iconSize=\"XS\" />,\n  };\n};\n\n/**\n * DotPagination description/documentation paragraph\n */\nconst HvDotPagination = (props) => {\n  const {\n    className,\n    classes,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    id,\n    ...others\n  } = props;\n\n  const range = (n) => Array.from(Array(n), (v, i) => i);\n\n  const icons = getSelectorIcons(classes, {});\n\n  return (\n    <div className={clsx(className, classes.root)} {...others}>\n      <HvRadioGroup classes={{ horizontal: classes.horizontal }} orientation=\"horizontal\">\n        {range(pages).map((pg, i) => (\n          <HvRadio\n            classes={{ root: classes.radioRoot }}\n            key={`dot_navigation${id && id.toString()}_item${i.toString()}`}\n            value={i}\n            checked={page === i}\n            onChange={() => onPageChange(i)}\n            icon={icons.radio}\n            checkedIcon={icons.radioChecked}\n            aria-label={getItemAriaLabel(i)}\n          />\n        ))}\n      </HvRadioGroup>\n    </div>\n  );\n};\n\nHvDotPagination.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the radio button group to overrrite horizontal class margins.\n     */\n    horizontal: PropTypes.string,\n    /**\n     *  Styles applied to the radio root ( to override radio group horizontal )\n     */\n    radioRoot: PropTypes.string,\n  }).isRequired,\n  /**\n   *  The number of pages the component has.\n   */\n  pages: PropTypes.number,\n  /**\n   * The currently selected page (0-indexed).\n   */\n  page: PropTypes.number,\n  /**\n   * Function called when the page changes.\n   */\n  onPageChange: PropTypes.func,\n  /**\n   * Function called to get the respective aria label.\n   */\n  getItemAriaLabel: PropTypes.func,\n  /**\n   *  Component id used to generate unique radio keys ( to avoid repeated keys in case multiple dotPagination components are needed)\n   */\n  id: PropTypes.number,\n};\n\nexport default withStyles(styles, { name: \"HvDotPagination\" })(HvDotPagination);\n"],"file":"DotPagination.js"}

package/dist/legacy/DotPagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./DotPagination";
+export * from "./DotPagination";

package/dist/legacy/DotPagination/index.js

@@ -0,0 +1,2 @@
+export { default } from "./DotPagination";
+//# sourceMappingURL=index.js.map

package/dist/legacy/DotPagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DotPagination/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB","sourcesContent":["export { default } from \"./DotPagination\";\n"],"file":"index.js"}

package/dist/legacy/DotPagination/styles.js

@@ -0,0 +1,18 @@
+var styles = function styles() {
+  return {
+    root: {
+      display: "flex",
+      justifyContent: "center"
+    },
+    horizontal: {
+      marginLeft: 0,
+      width: "auto"
+    },
+    radioRoot: {
+      marginLeft: "0"
+    }
+  };
+};
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/DotPagination/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DotPagination/styles.js"],"names":["styles","root","display","justifyContent","horizontal","marginLeft","width","radioRoot"],"mappings":"AAAA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,OAAO,EAAE,MADL;AAEJC,MAAAA,cAAc,EAAE;AAFZ,KADc;AAMpBC,IAAAA,UAAU,EAAE;AACVC,MAAAA,UAAU,EAAE,CADF;AAEVC,MAAAA,KAAK,EAAE;AAFG,KANQ;AAWpBC,IAAAA,SAAS,EAAE;AACTF,MAAAA,UAAU,EAAE;AADH;AAXS,GAAP;AAAA,CAAf;;AAgBA,eAAeL,MAAf","sourcesContent":["const styles = () => ({\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n\n  radioRoot: {\n    marginLeft: \"0\",\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/legacy/NotificationPanel/Notification/Notification.js

@@ -58,16 +58,16 @@ var Notification = function Notification(_ref) {
   }, title)), title);
   return /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(event) {
-      return _onClick(event, notificationId);
+      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(event, notificationId);
     },
     onKeyPress: function onKeyPress(event) {
-      return _onKeyPress(event, notificationId);
+      return _onKeyPress === null || _onKeyPress === void 0 ? void 0 : _onKeyPress(event, notificationId);
     },
     className: clsx(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
     role: "button",
     tabIndex: 0
   }, /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
+    className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen, !!_onClick && classes.clickable)
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.iconContainer
   }, icon), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NotificationWithTooltip, null), /*#__PURE__*/React.createElement("div", {
@@ -144,7 +144,12 @@ process.env.NODE_ENV !== "production" ? Notification.propTypes = {
     /**
      * Styles applied to the notification message actions dropdown.
      */
-    notificationActionWrapper: PropTypes.string
+    notificationActionWrapper: PropTypes.string,
+
+    /**
+     * Styles applied to the notification when clickable
+     */
+    clickable: PropTypes.string
   }).isRequired,
 
   /**

package/dist/legacy/NotificationPanel/Notification/Notification.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n  const ComponentFunction = () => Component;\n  // override thr withTooltip styles as we want to use the styles of the component\n  return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n  classes,\n  className,\n  notificationId,\n  title,\n  isRead,\n  icon,\n  date,\n  onClick,\n  onKeyPress,\n  rightContainer,\n  isHighlighted,\n}) => {\n  const getTime = () => {\n    if (!isRead) {\n      return dayjs(date).fromNow();\n    }\n\n    const d = dayjs(date);\n    let format = \"D MMMM YYYY, h:mm A\";\n\n    if (d.isSame(Date.now(), \"week\")) {\n      format = \"ddd, h:mm A\";\n    }\n\n    return d.format(format);\n  };\n\n  const NotificationWithTooltip = wrapperTooltip(\n    <div className={classes.messageContainer}>\n      <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n    </div>,\n    title\n  );\n\n  return (\n    <div\n      onClick={(event) => onClick(event, notificationId)}\n      onKeyPress={(event) => onKeyPress(event, notificationId)}\n      className={clsx(className, classes.root, {\n        [classes.notificationWrapperDropdown]: isHighlighted,\n        [classes.read]: isRead,\n      })}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div\n        className={clsx(classes.notificationWrapper, {\n          [classes.notificationDropdownOpen]: isHighlighted,\n        })}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div>\n          <NotificationWithTooltip />\n          <div className={classes.timeContainer}>\n            <div\n              className={clsx(classes.bullet, {\n                [classes.hide]: isRead,\n              })}\n            />\n            <div className={classes.time}>{getTime()}</div>\n          </div>\n        </div>\n      </div>\n      <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n    </div>\n  );\n};\n\nNotification.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root of the accordion.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the notification wrapper.\n     */\n    notificationWrapper: PropTypes.string,\n\n    /**\n     * Styles applied to the notification wrapper when the actions dropdown is open.\n     */\n    notificationWrapperDropdown: PropTypes.string,\n\n    /**\n     * Styles applied to the notification icon container.\n     */\n    iconContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification message container.\n     */\n    messageContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification time container.\n     */\n    timeContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification bullet.\n     */\n    bullet: PropTypes.string,\n\n    /**\n     * Styles applied to the content when it is hidden.\n     */\n    hide: PropTypes.string,\n\n    /**\n     * Styles applied to the notification time indicator.\n     */\n    time: PropTypes.string,\n    /**\n     * Styles applied to the notification is read.\n     */\n    read: PropTypes.string,\n    /**\n     * Styles applied when the notification dropdown is open.\n     */\n    notificationDropdownOpen: PropTypes.string,\n\n    /**\n     * Styles applied to the notification message actions dropdown.\n     */\n    notificationActionWrapper: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Notification id\n   */\n  notificationId: PropTypes.string,\n  /**\n   * Title of the notification\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * 'true' if the notification has been read or 'false' if it has not been read\n   */\n  isRead: PropTypes.bool.isRequired,\n  /**\n   * date the notification was created\n   */\n  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n  /**\n   * renderable icon that denotes the status of the notification\n   */\n  icon: PropTypes.element,\n  /**\n   * Click action applied to the notification\n   */\n  onClick: PropTypes.func,\n  /**\n   * On Key Press action applied to the notification\n   */\n  onKeyPress: PropTypes.func,\n  /**\n   * Actions to be executed by the notification, available in the dropdown menu\n   */\n  rightContainer: PropTypes.node,\n  /**\n   * Denotes index of clicked notification\n   */\n  isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}
+{"version":3,"sources":["../../../../src/NotificationPanel/Notification/Notification.js"],"names":["React","PropTypes","clsx","dayjs","relativeTime","HvTypography","withTooltip","withStyles","styles","extend","hideTooltip","evt","target","scrollHeight","clientHeight","wrapperTooltip","Component","label","ComponentFunction","style","Notification","classes","className","notificationId","title","isRead","icon","date","onClick","onKeyPress","rightContainer","isHighlighted","getTime","fromNow","d","format","isSame","Date","now","NotificationWithTooltip","messageContainer","event","root","notificationWrapperDropdown","read","notificationWrapper","notificationDropdownOpen","clickable","iconContainer","timeContainer","bullet","hide","time","notificationActionWrapper","propTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport { HvTypography, withTooltip } from \"@hitachivantara/uikit-react-core\";\nimport { withStyles } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\ndayjs.extend(relativeTime);\n\nconst hideTooltip = (evt) => evt.target.scrollHeight <= evt.target.clientHeight;\n\nconst wrapperTooltip = (Component, label) => {\n  const ComponentFunction = () => Component;\n  // override thr withTooltip styles as we want to use the styles of the component\n  return withTooltip(ComponentFunction, label, \"top\", hideTooltip, { style: {} });\n};\n\nconst Notification = ({\n  classes,\n  className,\n  notificationId,\n  title,\n  isRead,\n  icon,\n  date,\n  onClick,\n  onKeyPress,\n  rightContainer,\n  isHighlighted,\n}) => {\n  const getTime = () => {\n    if (!isRead) {\n      return dayjs(date).fromNow();\n    }\n\n    const d = dayjs(date);\n    let format = \"D MMMM YYYY, h:mm A\";\n\n    if (d.isSame(Date.now(), \"week\")) {\n      format = \"ddd, h:mm A\";\n    }\n\n    return d.format(format);\n  };\n\n  const NotificationWithTooltip = wrapperTooltip(\n    <div className={classes.messageContainer}>\n      <HvTypography variant={isRead ? \"normalText\" : \"highlightText\"}>{title}</HvTypography>\n    </div>,\n    title\n  );\n\n  return (\n    <div\n      onClick={(event) => onClick?.(event, notificationId)}\n      onKeyPress={(event) => onKeyPress?.(event, notificationId)}\n      className={clsx(className, classes.root, {\n        [classes.notificationWrapperDropdown]: isHighlighted,\n        [classes.read]: isRead,\n      })}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div\n        className={clsx(classes.notificationWrapper, {\n          [classes.notificationDropdownOpen]: isHighlighted,\n          [classes.clickable]: !!onClick,\n        })}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div>\n          <NotificationWithTooltip />\n          <div className={classes.timeContainer}>\n            <div\n              className={clsx(classes.bullet, {\n                [classes.hide]: isRead,\n              })}\n            />\n            <div className={classes.time}>{getTime()}</div>\n          </div>\n        </div>\n      </div>\n      <div className={classes.notificationActionWrapper}>{rightContainer}</div>\n    </div>\n  );\n};\n\nNotification.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root of the accordion.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the notification wrapper.\n     */\n    notificationWrapper: PropTypes.string,\n\n    /**\n     * Styles applied to the notification wrapper when the actions dropdown is open.\n     */\n    notificationWrapperDropdown: PropTypes.string,\n\n    /**\n     * Styles applied to the notification icon container.\n     */\n    iconContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification message container.\n     */\n    messageContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification time container.\n     */\n    timeContainer: PropTypes.string,\n\n    /**\n     * Styles applied to the notification bullet.\n     */\n    bullet: PropTypes.string,\n\n    /**\n     * Styles applied to the content when it is hidden.\n     */\n    hide: PropTypes.string,\n\n    /**\n     * Styles applied to the notification time indicator.\n     */\n    time: PropTypes.string,\n    /**\n     * Styles applied to the notification is read.\n     */\n    read: PropTypes.string,\n    /**\n     * Styles applied when the notification dropdown is open.\n     */\n    notificationDropdownOpen: PropTypes.string,\n\n    /**\n     * Styles applied to the notification message actions dropdown.\n     */\n    notificationActionWrapper: PropTypes.string,\n    /**\n     * Styles applied to the notification when clickable\n     */\n    clickable: PropTypes.string,\n  }).isRequired,\n\n  /**\n   * Class names to be applied to the accordion.\n   */\n  className: PropTypes.string,\n  /**\n   * Notification id\n   */\n  notificationId: PropTypes.string,\n  /**\n   * Title of the notification\n   */\n  title: PropTypes.string.isRequired,\n  /**\n   * 'true' if the notification has been read or 'false' if it has not been read\n   */\n  isRead: PropTypes.bool.isRequired,\n  /**\n   * date the notification was created\n   */\n  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,\n  /**\n   * renderable icon that denotes the status of the notification\n   */\n  icon: PropTypes.element,\n  /**\n   * Click action applied to the notification\n   */\n  onClick: PropTypes.func,\n  /**\n   * On Key Press action applied to the notification\n   */\n  onKeyPress: PropTypes.func,\n  /**\n   * Actions to be executed by the notification, available in the dropdown menu\n   */\n  rightContainer: PropTypes.node,\n  /**\n   * Denotes index of clicked notification\n   */\n  isHighlighted: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvNotificationPanelNotification\" })(Notification);\n"],"file":"Notification.js"}

package/dist/legacy/NotificationPanel/Notification/styles.js

@@ -56,7 +56,6 @@ var styles = function styles(theme) {
       color: theme.hv.palette.accent.acce1,
       padding: "17px",
       paddingRight: 0,
-      cursor: "pointer",
       "&:focus": {
         backgroundColor: theme.hv.palette.atmosphere.atmo3,
         outline: "5px solid ".concat(theme.hv.palette.atmosphere.atmo3),
@@ -70,7 +69,10 @@ var styles = function styles(theme) {
         "& $notificationActionWrapper": {
           display: "block"
         }
-      })
+      }),
+      "&$clickable": {
+        cursor: "pointer"
+      }
     },
     iconContainer: {
       width: "32px",
@@ -83,7 +85,8 @@ var styles = function styles(theme) {
       display: "-webkit-box",
       lineClamp: 2,
       boxOrient: "vertical",
-      overflow: "hidden"
+      overflow: "hidden",
+      wordBreak: "break-all"
     },
     title: _objectSpread(_objectSpread({}, theme.hv.typography.highlightText), {}, {
       marginBottom: "5px"
@@ -104,6 +107,7 @@ var styles = function styles(theme) {
     },
     hide: {},
     read: {},
+    clickable: {},
     notificationWrapperDropdown: {
       outline: "3px solid ".concat(theme.hv.palette.atmosphere.atmo3),
       backgroundColor: theme.hv.palette.atmosphere.atmo3,

package/dist/legacy/NotificationPanel/Notification/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n  outlineColor: \"#52A8EC\",\n  outlineStyle: \"solid\",\n  outlineWidth: \"0px\",\n  outlineOffset: \"-1px\",\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    margin: \"3px 3px 6px 3px\",\n    \"&:hover\": {\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n    \"&$read\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo2,\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n      \"&:hover\": {\n        backgroundColor: theme.hv.palette.atmosphere.atmo3,\n        outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n        \"&.focus-visible\": {\n          ...outlineStyles,\n        },\n      },\n    },\n\n    \"&.focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"&$read\": {\n        ...outlineStyles,\n      },\n\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n  },\n  notificationWrapper: {\n    display: \"flex\",\n    minHeight: \"72px\",\n    marginRight: theme.hv.spacing.xs,\n    color: theme.hv.palette.accent.acce1,\n    padding: \"17px\",\n    paddingRight: 0,\n    cursor: \"pointer\",\n\n    \"&:focus\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n      boxShadow: \"none\",\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n\n    \"&.focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n  },\n\n  iconContainer: {\n    width: \"32px\",\n    minWidth: \"32px\",\n    marginRight: `${theme.hv.spacing.sm}px`,\n  },\n\n  messageContainer: {\n    width: \"196px\",\n    maxWidth: \"196px\",\n    display: \"-webkit-box\",\n    lineClamp: 2,\n    boxOrient: \"vertical\",\n    overflow: \"hidden\",\n  },\n\n  title: {\n    ...theme.hv.typography.highlightText,\n    marginBottom: \"5px\",\n  },\n  timeContainer: {\n    ...theme.hv.typography.vizText,\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  bullet: {\n    width: \"8px\",\n    height: \"8px\",\n    borderRadius: \"50%\",\n    marginRight: \"4px\",\n    backgroundColor: theme.hv.palette.accent.acce1,\n\n    \"&$hide\": {\n      display: \"none\",\n    },\n  },\n  hide: {},\n  read: {},\n  notificationWrapperDropdown: {\n    outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    \"& $notificationActionWrapper\": {\n      display: \"block\",\n    },\n    \"&$read\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n    },\n  },\n\n  notificationDropdownOpen: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n  },\n\n  notificationActionWrapper: {\n    \"& > div\": {\n      marginTop: 17,\n    },\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}
+{"version":3,"sources":["../../../../src/NotificationPanel/Notification/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","display","backgroundColor","hv","palette","atmosphere","atmo1","margin","outline","atmo3","atmo2","notificationWrapper","minHeight","marginRight","spacing","xs","color","accent","acce1","padding","paddingRight","cursor","iconContainer","width","minWidth","sm","messageContainer","maxWidth","lineClamp","boxOrient","overflow","wordBreak","title","typography","highlightText","marginBottom","timeContainer","vizText","alignItems","bullet","height","borderRadius","hide","read","clickable","notificationWrapperDropdown","notificationDropdownOpen","notificationActionWrapper","marginTop"],"mappings":"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","sourcesContent":["const outlineStyles = {\n  outlineColor: \"#52A8EC\",\n  outlineStyle: \"solid\",\n  outlineWidth: \"0px\",\n  outlineOffset: \"-1px\",\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n  root: {\n    display: \"flex\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo1,\n    margin: \"3px 3px 6px 3px\",\n    \"&:hover\": {\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n    \"&$read\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo2,\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo2}`,\n      \"&:hover\": {\n        backgroundColor: theme.hv.palette.atmosphere.atmo3,\n        outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n\n        \"&.focus-visible\": {\n          ...outlineStyles,\n        },\n      },\n    },\n\n    \"&.focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"&$read\": {\n        ...outlineStyles,\n      },\n\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n  },\n  notificationWrapper: {\n    display: \"flex\",\n    minHeight: \"72px\",\n    marginRight: theme.hv.spacing.xs,\n    color: theme.hv.palette.accent.acce1,\n    padding: \"17px\",\n    paddingRight: 0,\n\n    \"&:focus\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,\n      boxShadow: \"none\",\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n\n    \"&.focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      \"& $notificationActionWrapper\": {\n        display: \"block\",\n      },\n    },\n\n    \"&$clickable\": {\n      cursor: \"pointer\",\n    },\n  },\n\n  iconContainer: {\n    width: \"32px\",\n    minWidth: \"32px\",\n    marginRight: `${theme.hv.spacing.sm}px`,\n  },\n\n  messageContainer: {\n    width: \"196px\",\n    maxWidth: \"196px\",\n    display: \"-webkit-box\",\n    lineClamp: 2,\n    boxOrient: \"vertical\",\n    overflow: \"hidden\",\n    wordBreak: \"break-all\",\n  },\n\n  title: {\n    ...theme.hv.typography.highlightText,\n    marginBottom: \"5px\",\n  },\n  timeContainer: {\n    ...theme.hv.typography.vizText,\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  bullet: {\n    width: \"8px\",\n    height: \"8px\",\n    borderRadius: \"50%\",\n    marginRight: \"4px\",\n    backgroundColor: theme.hv.palette.accent.acce1,\n\n    \"&$hide\": {\n      display: \"none\",\n    },\n  },\n  hide: {},\n  read: {},\n  clickable: {},\n  notificationWrapperDropdown: {\n    outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n    \"& $notificationActionWrapper\": {\n      display: \"block\",\n    },\n    \"&$read\": {\n      backgroundColor: theme.hv.palette.atmosphere.atmo3,\n      outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,\n    },\n  },\n\n  notificationDropdownOpen: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo3,\n  },\n\n  notificationActionWrapper: {\n    \"& > div\": {\n      marginTop: 17,\n    },\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/legacy/index.d.ts

@@ -39,3 +39,6 @@ export * from "./InlineEditor";
 
 export { default as HvProgressBar } from "./ProgressBar";
 export * from "./ProgressBar";
+
+export { default as HvDotPagination } from "./DotPagination";
+export * from "./DotPagination";

package/dist/legacy/index.js

@@ -16,4 +16,5 @@ export { default as HvColorPicker } from "./ColorPicker";
 export { default as HvQueryBuilder } from "./QueryBuilder";
 export { default as HvInlineEditor } from "./InlineEditor";
 export { default as HvProgressBar } from "./ProgressBar";
+export { default as HvDotPagination } from "./DotPagination";
 //# sourceMappingURL=index.js.map

package/dist/legacy/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.js"],"names":["default","HvAppSwitcherPanel","HvFormComposer","HvNavigationAnchors","HvNotificationPanel","HvSlider","HvTable","HvTimeAgo","HvTimePicker","HvTag","HvDrawer","HvColorPicker","HvQueryBuilder","HvInlineEditor","HvProgressBar"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,kBAApB,QAA8C,oBAA9C;AACA,cAAc,oBAAd;AACA,SAASD,OAAO,IAAIE,cAApB,QAA0C,gBAA1C;AACA,SAASF,OAAO,IAAIG,mBAApB,QAA+C,qBAA/C;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,qBAA/C;AACA,SAASJ,OAAO,IAAIK,QAApB,QAAoC,UAApC;AACA,SAASL,OAAO,IAAIM,OAApB,QAAmC,SAAnC;AACA,cAAc,SAAd;AACA,SAASN,OAAO,IAAIO,SAApB,QAAqC,WAArC;AACA,cAAc,WAAd;AACA,SAASP,OAAO,IAAIQ,YAApB,QAAwC,cAAxC;AACA,SAASR,OAAO,IAAIS,KAApB,QAAiC,OAAjC;AACA,SAAST,OAAO,IAAIU,QAApB,QAAoC,UAApC;AACA,SAASV,OAAO,IAAIW,aAApB,QAAyC,eAAzC;AACA,SAASX,OAAO,IAAIY,cAApB,QAA0C,gBAA1C;AACA,SAASZ,OAAO,IAAIa,cAApB,QAA0C,gBAA1C;AACA,SAASb,OAAO,IAAIc,aAApB,QAAyC,eAAzC","sourcesContent":["// components\nexport { default as HvAppSwitcherPanel } from \"./AppSwitcherPanel\";\nexport * from \"./AppSwitcherPanel\";\nexport { default as HvFormComposer } from \"./FormComposer\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvSlider } from \"./Slider\";\nexport { default as HvTable } from \"./Table\";\nexport * from \"./Table\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvTimePicker } from \"./TimePicker\";\nexport { default as HvTag } from \"./Tag\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvQueryBuilder } from \"./QueryBuilder\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvProgressBar } from \"./ProgressBar\";\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default","HvAppSwitcherPanel","HvFormComposer","HvNavigationAnchors","HvNotificationPanel","HvSlider","HvTable","HvTimeAgo","HvTimePicker","HvTag","HvDrawer","HvColorPicker","HvQueryBuilder","HvInlineEditor","HvProgressBar","HvDotPagination"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,kBAApB,QAA8C,oBAA9C;AACA,cAAc,oBAAd;AACA,SAASD,OAAO,IAAIE,cAApB,QAA0C,gBAA1C;AACA,SAASF,OAAO,IAAIG,mBAApB,QAA+C,qBAA/C;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,qBAA/C;AACA,SAASJ,OAAO,IAAIK,QAApB,QAAoC,UAApC;AACA,SAASL,OAAO,IAAIM,OAApB,QAAmC,SAAnC;AACA,cAAc,SAAd;AACA,SAASN,OAAO,IAAIO,SAApB,QAAqC,WAArC;AACA,cAAc,WAAd;AACA,SAASP,OAAO,IAAIQ,YAApB,QAAwC,cAAxC;AACA,SAASR,OAAO,IAAIS,KAApB,QAAiC,OAAjC;AACA,SAAST,OAAO,IAAIU,QAApB,QAAoC,UAApC;AACA,SAASV,OAAO,IAAIW,aAApB,QAAyC,eAAzC;AACA,SAASX,OAAO,IAAIY,cAApB,QAA0C,gBAA1C;AACA,SAASZ,OAAO,IAAIa,cAApB,QAA0C,gBAA1C;AACA,SAASb,OAAO,IAAIc,aAApB,QAAyC,eAAzC;AACA,SAASd,OAAO,IAAIe,eAApB,QAA2C,iBAA3C","sourcesContent":["// components\nexport { default as HvAppSwitcherPanel } from \"./AppSwitcherPanel\";\nexport * from \"./AppSwitcherPanel\";\nexport { default as HvFormComposer } from \"./FormComposer\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvSlider } from \"./Slider\";\nexport { default as HvTable } from \"./Table\";\nexport * from \"./Table\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvTimePicker } from \"./TimePicker\";\nexport { default as HvTag } from \"./Tag\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvQueryBuilder } from \"./QueryBuilder\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvProgressBar } from \"./ProgressBar\";\nexport { default as HvDotPagination } from \"./DotPagination\";\n"],"file":"index.js"}

package/dist/modern/DotPagination/DotPagination.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export type HvDotPaginationClassKey = "root";
+
+export type HvDotPaginationProps = StandardProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HvDotPaginationClassKey
+>;
+
+export default function HvDotPagination(props: HvDotPaginationProps): JSX.Element | null;

package/dist/modern/DotPagination/DotPagination.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel", "id"];
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { withStyles } from "@material-ui/core";
+import { HvRadio, HvRadioGroup } from "@hitachivantara/uikit-react-core";
+import { CurrentStep, RadioButtonUnselected } from "@hitachivantara/uikit-react-icons";
+import styles from "./styles";
+export const getSelectorIcons = (classes, options) => {
+  const {
+    disabled
+  } = options;
+  const color = disabled && ["atmo3", "atmo5"] || undefined;
+  const checkedColor = disabled && ["atmo3", "atmo5"] || undefined;
+  return {
+    radio: /*#__PURE__*/React.createElement(RadioButtonUnselected, {
+      color: color,
+      className: classes.icon,
+      iconSize: "XS"
+    }),
+    radioChecked: /*#__PURE__*/React.createElement(CurrentStep, {
+      color: checkedColor,
+      className: classes.icon,
+      iconSize: "XS"
+    })
+  };
+};
+/**
+ * DotPagination description/documentation paragraph
+ */
+
+const HvDotPagination = props => {
+  const {
+    className,
+    classes,
+    pages = 1,
+    page = 0,
+    onPageChange,
+    getItemAriaLabel,
+    id
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const range = n => Array.from(Array(n), (v, i) => i);
+
+  const icons = getSelectorIcons(classes, {});
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(className, classes.root)
+  }, others), /*#__PURE__*/React.createElement(HvRadioGroup, {
+    classes: {
+      horizontal: classes.horizontal
+    },
+    orientation: "horizontal"
+  }, range(pages).map((pg, i) => /*#__PURE__*/React.createElement(HvRadio, {
+    classes: {
+      root: classes.radioRoot
+    },
+    key: `dot_navigation${id && id.toString()}_item${i.toString()}`,
+    value: i,
+    checked: page === i,
+    onChange: () => onPageChange(i),
+    icon: icons.radio,
+    checkedIcon: icons.radioChecked,
+    "aria-label": getItemAriaLabel(i)
+  }))));
+};
+
+process.env.NODE_ENV !== "production" ? HvDotPagination.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: PropTypes.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: PropTypes.string,
+
+    /**
+     * Styles applied to the radio button group to overrrite horizontal class margins.
+     */
+    horizontal: PropTypes.string,
+
+    /**
+     *  Styles applied to the radio root ( to override radio group horizontal )
+     */
+    radioRoot: PropTypes.string
+  }).isRequired,
+
+  /**
+   *  The number of pages the component has.
+   */
+  pages: PropTypes.number,
+
+  /**
+   * The currently selected page (0-indexed).
+   */
+  page: PropTypes.number,
+
+  /**
+   * Function called when the page changes.
+   */
+  onPageChange: PropTypes.func,
+
+  /**
+   * Function called to get the respective aria label.
+   */
+  getItemAriaLabel: PropTypes.func,
+
+  /**
+   *  Component id used to generate unique radio keys ( to avoid repeated keys in case multiple dotPagination components are needed)
+   */
+  id: PropTypes.number
+} : void 0;
+export default withStyles(styles, {
+  name: "HvDotPagination"
+})(HvDotPagination);
+//# sourceMappingURL=DotPagination.js.map

package/dist/modern/DotPagination/DotPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DotPagination/DotPagination.js"],"names":["React","PropTypes","clsx","withStyles","HvRadio","HvRadioGroup","CurrentStep","RadioButtonUnselected","styles","getSelectorIcons","classes","options","disabled","color","undefined","checkedColor","radio","icon","radioChecked","HvDotPagination","props","className","pages","page","onPageChange","getItemAriaLabel","id","others","range","n","Array","from","v","i","icons","root","horizontal","map","pg","radioRoot","toString","propTypes","string","shape","isRequired","number","func","name"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { withStyles } from \"@material-ui/core\";\nimport { HvRadio, HvRadioGroup } from \"@hitachivantara/uikit-react-core\";\nimport { CurrentStep, RadioButtonUnselected } from \"@hitachivantara/uikit-react-icons\";\nimport styles from \"./styles\";\n\nexport const getSelectorIcons = (classes, options) => {\n  const { disabled } = options;\n  const color = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n  const checkedColor = (disabled && [\"atmo3\", \"atmo5\"]) || undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} iconSize=\"XS\" />,\n    radioChecked: <CurrentStep color={checkedColor} className={classes.icon} iconSize=\"XS\" />,\n  };\n};\n\n/**\n * DotPagination description/documentation paragraph\n */\nconst HvDotPagination = (props) => {\n  const {\n    className,\n    classes,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    id,\n    ...others\n  } = props;\n\n  const range = (n) => Array.from(Array(n), (v, i) => i);\n\n  const icons = getSelectorIcons(classes, {});\n\n  return (\n    <div className={clsx(className, classes.root)} {...others}>\n      <HvRadioGroup classes={{ horizontal: classes.horizontal }} orientation=\"horizontal\">\n        {range(pages).map((pg, i) => (\n          <HvRadio\n            classes={{ root: classes.radioRoot }}\n            key={`dot_navigation${id && id.toString()}_item${i.toString()}`}\n            value={i}\n            checked={page === i}\n            onChange={() => onPageChange(i)}\n            icon={icons.radio}\n            checkedIcon={icons.radioChecked}\n            aria-label={getItemAriaLabel(i)}\n          />\n        ))}\n      </HvRadioGroup>\n    </div>\n  );\n};\n\nHvDotPagination.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the radio button group to overrrite horizontal class margins.\n     */\n    horizontal: PropTypes.string,\n    /**\n     *  Styles applied to the radio root ( to override radio group horizontal )\n     */\n    radioRoot: PropTypes.string,\n  }).isRequired,\n  /**\n   *  The number of pages the component has.\n   */\n  pages: PropTypes.number,\n  /**\n   * The currently selected page (0-indexed).\n   */\n  page: PropTypes.number,\n  /**\n   * Function called when the page changes.\n   */\n  onPageChange: PropTypes.func,\n  /**\n   * Function called to get the respective aria label.\n   */\n  getItemAriaLabel: PropTypes.func,\n  /**\n   *  Component id used to generate unique radio keys ( to avoid repeated keys in case multiple dotPagination components are needed)\n   */\n  id: PropTypes.number,\n};\n\nexport default withStyles(styles, { name: \"HvDotPagination\" })(HvDotPagination);\n"],"file":"DotPagination.js"}

package/dist/modern/DotPagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./DotPagination";
+export * from "./DotPagination";

package/dist/modern/DotPagination/index.js

@@ -0,0 +1,2 @@
+export { default } from "./DotPagination";
+//# sourceMappingURL=index.js.map

package/dist/modern/DotPagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DotPagination/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,iBAAxB","sourcesContent":["export { default } from \"./DotPagination\";\n"],"file":"index.js"}

package/dist/modern/DotPagination/styles.js

@@ -0,0 +1,16 @@
+const styles = () => ({
+  root: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  horizontal: {
+    marginLeft: 0,
+    width: "auto"
+  },
+  radioRoot: {
+    marginLeft: "0"
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/DotPagination/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DotPagination/styles.js"],"names":["styles","root","display","justifyContent","horizontal","marginLeft","width","radioRoot"],"mappings":"AAAA,MAAMA,MAAM,GAAG,OAAO;AACpBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,OAAO,EAAE,MADL;AAEJC,IAAAA,cAAc,EAAE;AAFZ,GADc;AAMpBC,EAAAA,UAAU,EAAE;AACVC,IAAAA,UAAU,EAAE,CADF;AAEVC,IAAAA,KAAK,EAAE;AAFG,GANQ;AAWpBC,EAAAA,SAAS,EAAE;AACTF,IAAAA,UAAU,EAAE;AADH;AAXS,CAAP,CAAf;;AAgBA,eAAeL,MAAf","sourcesContent":["const styles = () => ({\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n\n  radioRoot: {\n    marginLeft: \"0\",\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}

package/dist/modern/NotificationPanel/Notification/Notification.js

@@ -53,13 +53,13 @@ const Notification = ({
     variant: isRead ? "normalText" : "highlightText"
   }, title)), title);
   return /*#__PURE__*/React.createElement("div", {
-    onClick: event => onClick(event, notificationId),
-    onKeyPress: event => onKeyPress(event, notificationId),
+    onClick: event => onClick === null || onClick === void 0 ? void 0 : onClick(event, notificationId),
+    onKeyPress: event => onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event, notificationId),
     className: clsx(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
     role: "button",
     tabIndex: 0
   }, /*#__PURE__*/React.createElement("div", {
-    className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
+    className: clsx(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen, !!onClick && classes.clickable)
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.iconContainer
   }, icon), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NotificationWithTooltip, null), /*#__PURE__*/React.createElement("div", {
@@ -136,7 +136,12 @@ process.env.NODE_ENV !== "production" ? Notification.propTypes = {
     /**
      * Styles applied to the notification message actions dropdown.
      */
-    notificationActionWrapper: PropTypes.string
+    notificationActionWrapper: PropTypes.string,
+
+    /**
+     * Styles applied to the notification when clickable
+     */
+    clickable: PropTypes.string
   }).isRequired,
 
   /**