@hitachivantara/uikit-react-lab 3.41.6 → 3.41.9

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.41.9](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-lab@3.41.8...@hitachivantara/uikit-react-lab@3.41.9) (2022-04-19)
+
+**Note:** Version bump only for package @hitachivantara/uikit-react-lab
+
+
+
+
+
+## [3.41.8](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-lab@3.41.7...@hitachivantara/uikit-react-lab@3.41.8) (2022-04-18)
+
+
+### Bug Fixes
+
+* **NotificationPanel:** toggles pointer cursor according to available onClick param. HVUIKIT-2740 ([9f7f1c2](https://github.com/lumada-design/hv-uikit-react/commit/9f7f1c264126fc29e961d4a21fab93e401a3d4ea))
+
+
+
+
+
+## [3.41.7](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-lab@3.41.6...@hitachivantara/uikit-react-lab@3.41.7) (2022-04-15)
+
+**Note:** Version bump only for package @hitachivantara/uikit-react-lab
+
+
+
+
+
 ## [3.41.6](https://github.com/lumada-design/hv-uikit-react/compare/@hitachivantara/uikit-react-lab@3.41.5...@hitachivantara/uikit-react-lab@3.41.6) (2022-04-14)
 
 

package/dist/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/DotPagination/DotPagination.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectorIcons = exports.default = void 0;
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["className", "classes", "pages", "page", "onPageChange", "getItemAriaLabel", "id"];
+
+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.default.createElement(_uikitReactIcons.RadioButtonUnselected, {
+      color: color,
+      className: classes.icon,
+      iconSize: "XS"
+    }),
+    radioChecked: /*#__PURE__*/_react.default.createElement(_uikitReactIcons.CurrentStep, {
+      color: checkedColor,
+      className: classes.icon,
+      iconSize: "XS"
+    })
+  };
+};
+/**
+ * DotPagination description/documentation paragraph
+ */
+
+
+exports.getSelectorIcons = getSelectorIcons;
+
+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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var range = function range(n) {
+    return Array.from(Array(n), function (v, i) {
+      return i;
+    });
+  };
+
+  var icons = getSelectorIcons(classes, {});
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: (0, _clsx.default)(className, classes.root)
+  }, others), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvRadioGroup, {
+    classes: {
+      horizontal: classes.horizontal
+    },
+    orientation: "horizontal"
+  }, range(pages).map(function (pg, i) {
+    return /*#__PURE__*/_react.default.createElement(_uikitReactCore.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.default.string,
+
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the radio button group to overrrite horizontal class margins.
+     */
+    horizontal: _propTypes.default.string,
+
+    /**
+     *  Styles applied to the radio root ( to override radio group horizontal )
+     */
+    radioRoot: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   *  The number of pages the component has.
+   */
+  pages: _propTypes.default.number,
+
+  /**
+   * The currently selected page (0-indexed).
+   */
+  page: _propTypes.default.number,
+
+  /**
+   * Function called when the page changes.
+   */
+  onPageChange: _propTypes.default.func,
+
+  /**
+   * Function called to get the respective aria label.
+   */
+  getItemAriaLabel: _propTypes.default.func,
+
+  /**
+   *  Component id used to generate unique radio keys ( to avoid repeated keys in case multiple dotPagination components are needed)
+   */
+  id: _propTypes.default.number
+} : void 0;
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDotPagination"
+})(HvDotPagination);
+
+exports.default = _default;
+//# sourceMappingURL=DotPagination.js.map

package/dist/DotPagination/DotPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DotPagination/DotPagination.js"],"names":["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","PropTypes","string","shape","isRequired","number","func","styles","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/DotPagination/index.d.ts

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

package/dist/DotPagination/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _DotPagination.default;
+  }
+});
+
+var _DotPagination = _interopRequireDefault(require("./DotPagination"));
+//# sourceMappingURL=index.js.map

package/dist/DotPagination/index.js.map

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

package/dist/DotPagination/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var styles = function styles() {
+  return {
+    root: {
+      display: "flex",
+      justifyContent: "center"
+    },
+    horizontal: {
+      marginLeft: 0,
+      width: "auto"
+    },
+    radioRoot: {
+      marginLeft: "0"
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/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;;eAgBeL,M","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/NotificationPanel/Notification/Notification.js

@@ -75,16 +75,16 @@ var Notification = function Notification(_ref) {
   }, title)), title);
   return /*#__PURE__*/_react.default.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: (0, _clsx.default)(className, classes.root, isHighlighted && classes.notificationWrapperDropdown, isRead && classes.read),
     role: "button",
     tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen)
+    className: (0, _clsx.default)(classes.notificationWrapper, isHighlighted && classes.notificationDropdownOpen, !!_onClick && classes.clickable)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.iconContainer
   }, icon), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(NotificationWithTooltip, null), /*#__PURE__*/_react.default.createElement("div", {
@@ -161,7 +161,12 @@ process.env.NODE_ENV !== "production" ? Notification.propTypes = {
     /**
      * Styles applied to the notification message actions dropdown.
      */
-    notificationActionWrapper: _propTypes.default.string
+    notificationActionWrapper: _propTypes.default.string,
+
+    /**
+     * Styles applied to the notification when clickable
+     */
+    clickable: _propTypes.default.string
   }).isRequired,
 
   /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/NotificationPanel/Notification/Notification.js"],"names":["dayjs","extend","relativeTime","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","PropTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","styles","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":["dayjs","extend","relativeTime","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","PropTypes","shape","string","isRequired","bool","oneOfType","number","object","element","func","node","styles","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/NotificationPanel/Notification/styles.js

@@ -72,7 +72,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),
@@ -86,7 +85,10 @@ var styles = function styles(theme) {
         "& $notificationActionWrapper": {
           display: "block"
         }
-      })
+      }),
+      "&$clickable": {
+        cursor: "pointer"
+      }
     },
     iconContainer: {
       width: "32px",
@@ -121,6 +123,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/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","wordBreak","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    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  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/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/index.js

@@ -37,7 +37,8 @@ var _exportNames = {
   HvColorPicker: true,
   HvQueryBuilder: true,
   HvInlineEditor: true,
-  HvProgressBar: true
+  HvProgressBar: true,
+  HvDotPagination: true
 };
 Object.defineProperty(exports, "HvAppSwitcherPanel", {
   enumerable: true,
@@ -51,6 +52,12 @@ Object.defineProperty(exports, "HvColorPicker", {
     return _ColorPicker.default;
   }
 });
+Object.defineProperty(exports, "HvDotPagination", {
+  enumerable: true,
+  get: function get() {
+    return _DotPagination.default;
+  }
+});
 Object.defineProperty(exports, "HvDrawer", {
   enumerable: true,
   get: function get() {
@@ -188,6 +195,8 @@ var _InlineEditor = _interopRequireDefault(require("./InlineEditor"));
 
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 
+var _DotPagination = _interopRequireDefault(require("./DotPagination"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","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/legacy/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/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