@hitachivantara/uikit-react-lab 3.41.5 → 3.41.8

package/dist/modern/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/modern/NotificationPanel/Notification/styles.js

@@ -48,7 +48,6 @@ const styles = theme => ({
     color: theme.hv.palette.accent.acce1,
     padding: "17px",
     paddingRight: 0,
-    cursor: "pointer",
     "&:focus": {
       backgroundColor: theme.hv.palette.atmosphere.atmo3,
       outline: `5px solid ${theme.hv.palette.atmosphere.atmo3}`,
@@ -62,7 +61,10 @@ const styles = theme => ({
       "& $notificationActionWrapper": {
         display: "block"
       }
-    })
+    }),
+    "&$clickable": {
+      cursor: "pointer"
+    }
   },
   iconContainer: {
     width: "32px",
@@ -75,7 +77,8 @@ const 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"
@@ -96,6 +99,7 @@ const styles = theme => ({
   },
   hide: {},
   read: {},
+  clickable: {},
   notificationWrapperDropdown: {
     outline: `3px solid ${theme.hv.palette.atmosphere.atmo3}`,
     backgroundColor: theme.hv.palette.atmosphere.atmo3,

package/dist/modern/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/modern/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/modern/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/modern/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "3.41.5",
+  "version": "3.41.8",
   "description": "A collection of contributed React components for the Hitachi Vantara's Design System.",
   "homepage": "https://github.com/lumada-design/hv-uikit-react",
   "license": "Apache-2.0",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fbd0734a32959d9d90fb4846028b98c3180e9c98"
+  "gitHead": "b56cd62ca44fba35522ef9146d4f876dbd4c8edd"
 }