@hitachivantara/uikit-react-core 5.0.0-next.7 → 5.0.0-next.9

package/dist/esm/components/Pagination/Pagination.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import { useCallback, useEffect } from "react";
 import clsx from "clsx";
 import { Hidden } from "@mui/material";
@@ -5,7 +6,6 @@ import { Start, Backwards, Forwards, End } from "@hitachivantara/uikit-react-ico
 import { Option } from "./Select.js";
 import { StyledRoot, StyledPageSizeOptions, StyledPageSizePrev, StyledSelect, StyledPageSizeTextContainer, StyledPageNavigator, StyledButtonIconTooltip, StyledPageInfo, StyledPageJump } from "./Pagination.styles.js";
 import { usePageInput, getSafePage, setColor } from "./utils.js";
-import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
 import paginationClasses from "./paginationClasses.js";
 import { useLabels } from "../../hooks/useLabels.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -68,132 +68,32 @@ const HvPagination = ({
       handleInputChange(null, page + 1);
     }
   }, [handleInputChange, page]);
-  const renderPageJump = () => /* @__PURE__ */ jsx(StyledPageJump, {
-    className: clsx(paginationClasses.pageJump, classes == null ? void 0 : classes.pageJump),
-    children: /* @__PURE__ */ jsx(HvInput, {
-      id: setId(id, "currentPage"),
-      labels,
-      inputProps: {
-        "aria-label": labels == null ? void 0 : labels.paginationInputLabel,
-        type: "number"
-      },
-      classes: {
-        root: clsx(paginationClasses.pageSizeInputContainer, classes == null ? void 0 : classes.pageSizeInputContainer),
-        input: clsx(paginationClasses.pageSizeInput, classes == null ? void 0 : classes.pageSizeInput),
-        inputRoot: clsx(paginationClasses.pageSizeInputRoot, classes == null ? void 0 : classes.pageSizeInputRoot)
-      },
-      onChange: handleInputChange,
-      value: String(pageInput),
-      onBlur: (evt, value) => changePage(value - 1),
-      onKeyDown: (evt, value) => isKeypress(evt, Enter) && changePage(value - 1),
-      disabled: pageSize === 0,
-      disableClear: true,
-      ...currentPageInputProps
-    })
-  });
-  return /* @__PURE__ */ jsxs(StyledRoot, {
-    id,
-    className: clsx(className, paginationClasses.root, classes == null ? void 0 : classes.root),
-    ...others,
-    children: [/* @__PURE__ */ jsx(StyledPageSizeOptions, {
-      className: clsx(paginationClasses.pageSizeOptions, classes == null ? void 0 : classes.pageSizeOptions),
-      ...showPageProps,
-      children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Hidden, {
-          xsDown: true,
-          children: /* @__PURE__ */ jsx(StyledPageSizePrev, {
-            className: clsx(paginationClasses.pageSizeTextContainer, classes == null ? void 0 : classes.pageSizeTextContainer),
-            children: /* @__PURE__ */ jsx(HvTypography, {
-              component: "span",
-              children: labels == null ? void 0 : labels.pageSizePrev
-            })
-          })
-        }), /* @__PURE__ */ jsx(StyledSelect, {
-          id: setId(id, "pageSize"),
-          disabled: pageSize === 0,
-          className: clsx(paginationClasses.pageSizeOptionsSelect, classes == null ? void 0 : classes.pageSizeOptionsSelect),
-          classes: {},
-          "aria-label": labels == null ? void 0 : labels.pageSizeSelectorDescription,
-          onChange: (evt, val) => onPageSizeChange == null ? void 0 : onPageSizeChange(val),
-          value: pageSize,
-          children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, {
-            value: option,
-            children: option
-          }, option))
-        }), /* @__PURE__ */ jsx(Hidden, {
-          xsDown: true,
-          children: /* @__PURE__ */ jsx(StyledPageSizeTextContainer, {
-            className: clsx(paginationClasses.pageSizeTextContainer, classes == null ? void 0 : classes.pageSizeTextContainer),
-            children: /* @__PURE__ */ jsx(HvTypography, {
-              component: "span",
-              children: labels == null ? void 0 : labels.pageSizeEntryName
-            })
-          })
-        })]
-      })
-    }), /* @__PURE__ */ jsxs(StyledPageNavigator, {
-      className: clsx(paginationClasses.pageNavigator, classes == null ? void 0 : classes.pageNavigator),
-      ...navigationProps,
-      children: [/* @__PURE__ */ jsx(StyledButtonIconTooltip, {
-        id: setId(id, "firstPage-button"),
-        "aria-label": labels == null ? void 0 : labels.firstPage,
-        className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
-        disabled: !canPrevious,
-        onClick: () => changePage(0),
-        tooltip: labels == null ? void 0 : labels.paginationFirstPageTitle,
-        children: /* @__PURE__ */ jsx(Start, {
-          className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon),
-          color: setColor(!canPrevious)
-        })
-      }), /* @__PURE__ */ jsx(StyledButtonIconTooltip, {
-        id: setId(id, "previousPage-button"),
-        "aria-label": labels == null ? void 0 : labels.previousPage,
-        className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
-        disabled: !canPrevious,
-        onClick: () => changePage(page - 1),
-        tooltip: labels == null ? void 0 : labels.paginationPreviousPageTitle,
-        children: /* @__PURE__ */ jsx(Backwards, {
-          className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon),
-          color: setColor(!canPrevious)
-        })
-      }), /* @__PURE__ */ jsxs(StyledPageInfo, {
-        className: clsx(paginationClasses.pageInfo, classes == null ? void 0 : classes.pageInfo),
-        children: [showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, {
-          component: "span",
-          children: `${page + 1}`
-        }), /* @__PURE__ */ jsx(HvTypography, {
-          component: "span",
-          children: `${labels == null ? void 0 : labels.pagesSeparator} `
-        }), /* @__PURE__ */ jsx(HvTypography, {
-          id: setId(id, "totalPages"),
-          component: "span",
-          children: pages
-        })]
-      }), /* @__PURE__ */ jsx(StyledButtonIconTooltip, {
-        id: setId(id, "nextPage-button"),
-        "aria-label": labels == null ? void 0 : labels.nextPage,
-        className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
-        disabled: !canNext,
-        onClick: () => changePage(page + 1),
-        tooltip: labels == null ? void 0 : labels.paginationNextPageTitle,
-        children: /* @__PURE__ */ jsx(Forwards, {
-          className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon),
-          color: setColor(!canNext)
-        })
-      }), /* @__PURE__ */ jsx(StyledButtonIconTooltip, {
-        id: setId(id, "lastPage-button"),
-        "aria-label": labels == null ? void 0 : labels.lastPage,
-        className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer),
-        disabled: !canNext,
-        onClick: () => changePage(pages - 1),
-        tooltip: labels == null ? void 0 : labels.paginationLastPageTitle,
-        children: /* @__PURE__ */ jsx(End, {
-          className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon),
-          color: setColor(!canNext)
-        })
-      })]
-    })]
-  });
+  const renderPageJump = () => /* @__PURE__ */ jsx(StyledPageJump, { className: clsx(paginationClasses.pageJump, classes == null ? void 0 : classes.pageJump), children: /* @__PURE__ */ jsx(HvInput, { id: setId(id, "currentPage"), labels, inputProps: {
+    "aria-label": labels == null ? void 0 : labels.paginationInputLabel,
+    type: "number"
+  }, classes: {
+    root: clsx(paginationClasses.pageSizeInputContainer, classes == null ? void 0 : classes.pageSizeInputContainer),
+    input: clsx(paginationClasses.pageSizeInput, classes == null ? void 0 : classes.pageSizeInput),
+    inputRoot: clsx(paginationClasses.pageSizeInputRoot, classes == null ? void 0 : classes.pageSizeInputRoot)
+  }, onChange: handleInputChange, value: String(pageInput), onBlur: (evt, value) => changePage(value - 1), onKeyDown: (evt, value) => isKeypress(evt, Enter) && changePage(value - 1), disabled: pageSize === 0, disableClear: true, ...currentPageInputProps }) });
+  return /* @__PURE__ */ jsxs(StyledRoot, { id, className: clsx(className, paginationClasses.root, classes == null ? void 0 : classes.root), ...others, children: [
+    /* @__PURE__ */ jsx(StyledPageSizeOptions, { className: clsx(paginationClasses.pageSizeOptions, classes == null ? void 0 : classes.pageSizeOptions), ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(StyledPageSizePrev, { className: clsx(paginationClasses.pageSizeTextContainer, classes == null ? void 0 : classes.pageSizeTextContainer), children: /* @__PURE__ */ jsx(HvTypography, { component: "span", children: labels == null ? void 0 : labels.pageSizePrev }) }) }),
+      /* @__PURE__ */ jsx(StyledSelect, { id: setId(id, "pageSize"), disabled: pageSize === 0, className: clsx(paginationClasses.pageSizeOptionsSelect, classes == null ? void 0 : classes.pageSizeOptionsSelect), classes: {}, "aria-label": labels == null ? void 0 : labels.pageSizeSelectorDescription, onChange: (evt, val) => onPageSizeChange == null ? void 0 : onPageSizeChange(val), value: pageSize, children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option)) }),
+      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(StyledPageSizeTextContainer, { className: clsx(paginationClasses.pageSizeTextContainer, classes == null ? void 0 : classes.pageSizeTextContainer), children: /* @__PURE__ */ jsx(HvTypography, { component: "span", children: labels == null ? void 0 : labels.pageSizeEntryName }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(StyledPageNavigator, { className: clsx(paginationClasses.pageNavigator, classes == null ? void 0 : classes.pageNavigator), ...navigationProps, children: [
+      /* @__PURE__ */ jsx(StyledButtonIconTooltip, { id: setId(id, "firstPage-button"), "aria-label": labels == null ? void 0 : labels.firstPage, className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer), disabled: !canPrevious, onClick: () => changePage(0), tooltip: labels == null ? void 0 : labels.paginationFirstPageTitle, children: /* @__PURE__ */ jsx(Start, { className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon), color: setColor(!canPrevious) }) }),
+      /* @__PURE__ */ jsx(StyledButtonIconTooltip, { id: setId(id, "previousPage-button"), "aria-label": labels == null ? void 0 : labels.previousPage, className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer), disabled: !canPrevious, onClick: () => changePage(page - 1), tooltip: labels == null ? void 0 : labels.paginationPreviousPageTitle, children: /* @__PURE__ */ jsx(Backwards, { className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon), color: setColor(!canPrevious) }) }),
+      /* @__PURE__ */ jsxs(StyledPageInfo, { className: clsx(paginationClasses.pageInfo, classes == null ? void 0 : classes.pageInfo), children: [
+        showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${page + 1}` }),
+        /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels == null ? void 0 : labels.pagesSeparator} ` }),
+        /* @__PURE__ */ jsx(HvTypography, { id: setId(id, "totalPages"), component: "span", children: pages })
+      ] }),
+      /* @__PURE__ */ jsx(StyledButtonIconTooltip, { id: setId(id, "nextPage-button"), "aria-label": labels == null ? void 0 : labels.nextPage, className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer), disabled: !canNext, onClick: () => changePage(page + 1), tooltip: labels == null ? void 0 : labels.paginationNextPageTitle, children: /* @__PURE__ */ jsx(Forwards, { className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon), color: setColor(!canNext) }) }),
+      /* @__PURE__ */ jsx(StyledButtonIconTooltip, { id: setId(id, "lastPage-button"), "aria-label": labels == null ? void 0 : labels.lastPage, className: clsx(paginationClasses.iconContainer, classes == null ? void 0 : classes.iconContainer), disabled: !canNext, onClick: () => changePage(pages - 1), tooltip: labels == null ? void 0 : labels.paginationLastPageTitle, children: /* @__PURE__ */ jsx(End, { className: clsx(paginationClasses.icon, classes == null ? void 0 : classes.icon), color: setColor(!canNext) }) })
+    ] })
+  ] });
 };
 export {
   HvPagination

package/dist/esm/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { Hidden } from \"@mui/material\";\nimport { HvInput, HvInputProps, HvTypography } from \"components\";\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"../../types\";\nimport { Option } from \"./Select\";\nimport {\n  StyledRoot,\n  StyledPageSizeOptions,\n  StyledPageSizePrev,\n  StyledSelect,\n  StyledPageSizeTextContainer,\n  StyledPageNavigator,\n  StyledButtonIconTooltip,\n  StyledPageJump,\n  StyledPageInfo,\n} from \"./Pagination.styles\";\nimport { paginationClasses, HvPaginationClasses } from \".\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport { useLabels } from \"hooks\";\n\nexport type HvPaginationLabels = {\n  /** The show label. */\n  pageSizePrev?: string;\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName?: string;\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription?: string;\n  /** Separator of current page and total pages. */\n  pagesSeparator?: string;\n  /** Title of button `firstPage`. */\n  paginationFirstPageTitle?: string;\n  /** Title of button `previousPage`. */\n  paginationPreviousPageTitle?: string;\n  /** Title of button `nextPage`. */\n  paginationNextPageTitle?: string;\n  /** Title of button `lastPage`. */\n  paginationLastPageTitle?: string;\n  /** Aria-label passed to the page input. */\n  paginationInputLabel?: string;\n  /** Aria-label of the first page button */\n  firstPage?: string;\n  /** Aria-label of the previous page button */\n  previousPage?: string;\n  /** Aria-label of the next page button */\n  nextPage?: string;\n  /** Aria-label of the last page button */\n  lastPage?: string;\n};\n\nexport type HvPaginationProps = HvBaseProps & {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n};\n\nconst DEFAULT_LABELS = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst { Enter } = keyboardCodes;\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = ({\n  classes,\n  className,\n  id,\n  pages = 1,\n  page = 0,\n  showPageSizeOptions = true,\n  pageSizeOptions = [5, 10, 20, 25, 50, 100],\n  pageSize = 1,\n  showPageJump = true,\n  canPrevious = false,\n  canNext = false,\n  onPageChange,\n  onPageSizeChange,\n  labels: labelsProp,\n  showPageProps,\n  navigationProps,\n  currentPageInputProps,\n  ...others\n}: HvPaginationProps) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n\n  const changePage = useCallback(\n    (newPage) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <StyledPageJump\n      className={clsx(paginationClasses.pageJump, classes?.pageJump)}\n    >\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // we really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: clsx(\n            paginationClasses.pageSizeInputContainer,\n            classes?.pageSizeInputContainer\n          ),\n          input: clsx(paginationClasses.pageSizeInput, classes?.pageSizeInput),\n          inputRoot: clsx(\n            paginationClasses.pageSizeInputRoot,\n            classes?.pageSizeInputRoot\n          ),\n        }}\n        onChange={handleInputChange}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(value - 1)}\n        onKeyDown={(evt, value) =>\n          isKeypress(evt, Enter) && changePage(value - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </StyledPageJump>\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, paginationClasses.root, classes?.root)}\n      {...others}\n    >\n      <StyledPageSizeOptions\n        className={clsx(\n          paginationClasses.pageSizeOptions,\n          classes?.pageSizeOptions\n        )}\n        {...showPageProps}\n      >\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <StyledPageSizePrev\n                className={clsx(\n                  paginationClasses.pageSizeTextContainer,\n                  classes?.pageSizeTextContainer\n                )}\n              >\n                <HvTypography component=\"span\">\n                  {labels?.pageSizePrev}\n                </HvTypography>\n              </StyledPageSizePrev>\n            </Hidden>\n            <StyledSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={clsx(\n                paginationClasses.pageSizeOptionsSelect,\n                classes?.pageSizeOptionsSelect\n              )}\n              classes={{}}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(evt, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </StyledSelect>\n            <Hidden xsDown>\n              <StyledPageSizeTextContainer\n                className={clsx(\n                  paginationClasses.pageSizeTextContainer,\n                  classes?.pageSizeTextContainer\n                )}\n              >\n                <HvTypography component=\"span\">\n                  {labels?.pageSizeEntryName}\n                </HvTypography>\n              </StyledPageSizeTextContainer>\n            </Hidden>\n          </>\n        )}\n      </StyledPageSizeOptions>\n      <StyledPageNavigator\n        className={clsx(\n          paginationClasses.pageNavigator,\n          classes?.pageNavigator\n        )}\n        {...navigationProps}\n      >\n        <StyledButtonIconTooltip\n          id={setId(id, \"firstPage-button\")}\n          aria-label={labels?.firstPage}\n          className={clsx(\n            paginationClasses.iconContainer,\n            classes?.iconContainer\n          )}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          tooltip={labels?.paginationFirstPageTitle}\n        >\n          <Start\n            className={clsx(paginationClasses.icon, classes?.icon)}\n            color={setColor(!canPrevious)}\n          />\n        </StyledButtonIconTooltip>\n        <StyledButtonIconTooltip\n          id={setId(id, \"previousPage-button\")}\n          aria-label={labels?.previousPage}\n          className={clsx(\n            paginationClasses.iconContainer,\n            classes?.iconContainer\n          )}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          tooltip={labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            className={clsx(paginationClasses.icon, classes?.icon)}\n            color={setColor(!canPrevious)}\n          />\n        </StyledButtonIconTooltip>\n        <StyledPageInfo\n          className={clsx(paginationClasses.pageInfo, classes?.pageInfo)}\n        >\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography component=\"span\">{`${page + 1}`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography id={setId(id, \"totalPages\")} component=\"span\">\n            {pages}\n          </HvTypography>\n        </StyledPageInfo>\n        <StyledButtonIconTooltip\n          id={setId(id, \"nextPage-button\")}\n          aria-label={labels?.nextPage}\n          className={clsx(\n            paginationClasses.iconContainer,\n            classes?.iconContainer\n          )}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          tooltip={labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            className={clsx(paginationClasses.icon, classes?.icon)}\n            color={setColor(!canNext)}\n          />\n        </StyledButtonIconTooltip>\n        <StyledButtonIconTooltip\n          id={setId(id, \"lastPage-button\")}\n          aria-label={labels?.lastPage}\n          className={clsx(\n            paginationClasses.iconContainer,\n            classes?.iconContainer\n          )}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          tooltip={labels?.paginationLastPageTitle}\n        >\n          <End\n            className={clsx(paginationClasses.icon, classes?.icon)}\n            color={setColor(!canNext)}\n          />\n        </StyledButtonIconTooltip>\n      </StyledPageNavigator>\n    </StyledRoot>\n  );\n};\n"],"names":["DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","Enter","keyboardCodes","HvPagination","classes","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","useLabels","pageInput","handleInputChange","usePageInput","changePage","useCallback","newPage","safePage","getSafePage","useEffect","renderPageJump","_jsx","StyledPageJump","clsx","paginationClasses","pageJump","children","HvInput","setId","inputProps","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","onChange","value","String","onBlur","evt","onKeyDown","isKeypress","disabled","disableClear","StyledRoot","StyledPageSizeOptions","_jsxs","_Fragment","Hidden","xsDown","StyledPageSizePrev","pageSizeTextContainer","HvTypography","component","StyledSelect","pageSizeOptionsSelect","val","map","option","Option","StyledPageSizeTextContainer","StyledPageNavigator","pageNavigator","StyledButtonIconTooltip","iconContainer","onClick","tooltip","Start","icon","color","setColor","Backwards","StyledPageInfo","pageInfo","Forwards","End"],"mappings":";;;;;;;;;;;;;;;AA0FA,MAAMA,iBAAiB;AAAA,EACrBC,cAAc;AAAA,EACdC,mBAAmB;AAAA,EACnBC,6BAA6B;AAAA,EAC7BC,gBAAgB;AAAA,EAChBC,0BAA0B;AAAA,EAC1BC,6BAA6B;AAAA,EAC7BC,yBAAyB;AAAA,EACzBC,yBAAyB;AAAA,EACzBC,sBAAsB;AAAA,EACtBC,WAAW;AAAA,EACXC,cAAc;AAAA,EACdC,UAAU;AAAA,EACVC,UAAU;AACZ;AAEA,MAAM;AAAA,EAAEC;AAAM,IAAIC;AAMX,MAAMC,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC,sBAAsB;AAAA,EACtBC,kBAAkB,CAAC,GAAG,IAAI,IAAI,IAAI,IAAI,GAAG;AAAA,EACzCC,WAAW;AAAA,EACXC,eAAe;AAAA,EACfC,cAAc;AAAA,EACdC,UAAU;AAAA,EACVC;AAAAA,EACAC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AACc,MAAM;AACjBL,QAAAA,SAASM,UAAUpC,gBAAgB+B,UAAU;AACnD,QAAM,CAACM,WAAWC,iBAAiB,IAAIC,aAAalB,IAAI;AAElDmB,QAAAA,aAAaC,YAChBC,CAAY,YAAA;AACX,UAAMC,WAAmBC,YAAYF,SAASrB,MAAMD,KAAK;AAEzDQ,iDAAee;AACG,sBAAA,MAAMA,WAAW,CAAC;AAAA,KAEtC,CAACtB,MAAMD,OAAOQ,cAAcU,iBAAiB,CAAC;AAGhDO,YAAU,MAAM;AACVxB,QAAAA,QAAQD,SAASA,QAAQ,GAAG;AAC9BoB,iBAAWnB,IAAI;AAAA,IACjB;AAAA,EACC,GAAA,CAACmB,YAAYnB,MAAMD,KAAK,CAAC;AAE5ByB,YAAU,MAAM;AACVR,QAAAA,cAAchB,OAAO,GAAG;AACR,wBAAA,MAAMA,OAAO,CAAC;AAAA,IAClC;AAAA,EAAA,GAQC,CAACiB,mBAAmBjB,IAAI,CAAC;AAEtByB,QAAAA,iBAAiBA,MACrBC,oBAACC,gBAAc;AAAA,IACb9B,WAAW+B,KAAKC,kBAAkBC,UAAUlC,mCAASkC,QAAQ;AAAA,IAAEC,8BAE9DC,SAAO;AAAA,MACNlC,IAAImC,MAAMnC,IAAI,aAAa;AAAA,MAC3BW;AAAAA,MACAyB,YAAY;AAAA,QACV,cAAczB,iCAAQrB;AAAAA,QAEtB+C,MAAM;AAAA,MACR;AAAA,MACAvC,SAAS;AAAA,QACPwC,MAAMR,KACJC,kBAAkBQ,wBAClBzC,mCAASyC,sBAAsB;AAAA,QAEjCC,OAAOV,KAAKC,kBAAkBU,eAAe3C,mCAAS2C,aAAa;AAAA,QACnEC,WAAWZ,KACTC,kBAAkBY,mBAClB7C,mCAAS6C,iBAAiB;AAAA,MAE9B;AAAA,MACAC,UAAUzB;AAAAA,MACV0B,OAAOC,OAAO5B,SAAS;AAAA,MACvB6B,QAAQA,CAACC,KAAKH,UAAUxB,WAAWwB,QAAQ,CAAC;AAAA,MAC5CI,WAAWA,CAACD,KAAKH,UACfK,WAAWF,KAAKrD,KAAK,KAAK0B,WAAWwB,QAAQ,CAAC;AAAA,MAEhDM,UAAU9C,aAAa;AAAA,MACvB+C,cAAY;AAAA,MAAA,GACRrC;AAAAA,IAAAA,CAAqB;AAAA,EAAA,CAG9B;AAED,8BACGsC,YAAU;AAAA,IACTrD;AAAAA,IACAD,WAAW+B,KAAK/B,WAAWgC,kBAAkBO,MAAMxC,mCAASwC,IAAI;AAAA,IAAE,GAC9DtB;AAAAA,IAAMiB,UAAA,CAEVL,oBAAC0B,uBAAqB;AAAA,MACpBvD,WAAW+B,KACTC,kBAAkB3B,iBAClBN,mCAASM,eAAe;AAAA,MACxB,GACES;AAAAA,MAAaoB,UAEhB9B,uBACCoD,qBAAAC,UAAA;AAAA,QAAAvB,UAAA,CACEL,oBAAC6B,QAAM;AAAA,UAACC,QAAM;AAAA,UAAAzB,8BACX0B,oBAAkB;AAAA,YACjB5D,WAAW+B,KACTC,kBAAkB6B,uBAClB9D,mCAAS8D,qBAAqB;AAAA,YAC9B3B,8BAED4B,cAAY;AAAA,cAACC,WAAU;AAAA,cAAM7B,UAC3BtB,iCAAQ7B;AAAAA,YAAAA,CAAY;AAAA,UAAA,CACR;AAAA,QAAA,CAEV,GACT8C,oBAACmC,cAAY;AAAA,UACX/D,IAAImC,MAAMnC,IAAI,UAAU;AAAA,UACxBmD,UAAU9C,aAAa;AAAA,UACvBN,WAAW+B,KACTC,kBAAkBiC,uBAClBlE,mCAASkE,qBAAqB;AAAA,UAEhClE,SAAS,CAAC;AAAA,UACV,cAAYa,iCAAQ3B;AAAAA,UACpB4D,UAAUA,CAACI,KAAKiB,QAAgBvD,qDAAmBuD;AAAAA,UACnDpB,OAAOxC;AAAAA,UAAS4B,UAEf7B,gBAAgB8D,IAAKC,CAAAA,+BACnBC,QAAM;AAAA,YAAcvB,OAAOsB;AAAAA,YAAOlC,UAChCkC;AAAAA,UAAM,GADIA,MAAM,CAGpB;AAAA,QAAA,CACY,GACfvC,oBAAC6B,QAAM;AAAA,UAACC,QAAM;AAAA,UAAAzB,8BACXoC,6BAA2B;AAAA,YAC1BtE,WAAW+B,KACTC,kBAAkB6B,uBAClB9D,mCAAS8D,qBAAqB;AAAA,YAC9B3B,8BAED4B,cAAY;AAAA,cAACC,WAAU;AAAA,cAAM7B,UAC3BtB,iCAAQ5B;AAAAA,YAAAA,CAAiB;AAAA,UAAA,CACb;AAAA,QAAA,CAEV,CAAA;AAAA,MAAA,CAAA;AAAA,IAAA,CAGS,GACxBwE,qBAACe,qBAAmB;AAAA,MAClBvE,WAAW+B,KACTC,kBAAkBwC,eAClBzE,mCAASyE,aAAa;AAAA,MACtB,GACEzD;AAAAA,MAAemB,UAAA,CAEnBL,oBAAC4C,yBAAuB;AAAA,QACtBxE,IAAImC,MAAMnC,IAAI,kBAAkB;AAAA,QAChC,cAAYW,iCAAQpB;AAAAA,QACpBQ,WAAW+B,KACTC,kBAAkB0C,eAClB3E,mCAAS2E,aAAa;AAAA,QAExBtB,UAAU,CAAC5C;AAAAA,QACXmE,SAASA,MAAMrD,WAAW,CAAC;AAAA,QAC3BsD,SAAShE,iCAAQzB;AAAAA,QAAyB+C,8BAEzC2C,OAAK;AAAA,UACJ7E,WAAW+B,KAAKC,kBAAkB8C,MAAM/E,mCAAS+E,IAAI;AAAA,UACrDC,OAAOC,SAAS,CAACxE,WAAW;AAAA,QAAA,CAAE;AAAA,MAAA,CAER,GAC1BqB,oBAAC4C,yBAAuB;AAAA,QACtBxE,IAAImC,MAAMnC,IAAI,qBAAqB;AAAA,QACnC,cAAYW,iCAAQnB;AAAAA,QACpBO,WAAW+B,KACTC,kBAAkB0C,eAClB3E,mCAAS2E,aAAa;AAAA,QAExBtB,UAAU,CAAC5C;AAAAA,QACXmE,SAASA,MAAMrD,WAAWnB,OAAO,CAAC;AAAA,QAClCyE,SAAShE,iCAAQxB;AAAAA,QAA4B8C,8BAE5C+C,WAAS;AAAA,UACRjF,WAAW+B,KAAKC,kBAAkB8C,MAAM/E,mCAAS+E,IAAI;AAAA,UACrDC,OAAOC,SAAS,CAACxE,WAAW;AAAA,QAAA,CAAE;AAAA,MAAA,CAER,GAC1BgD,qBAAC0B,gBAAc;AAAA,QACblF,WAAW+B,KAAKC,kBAAkBmD,UAAUpF,mCAASoF,QAAQ;AAAA,QAAEjD,UAAA,CAE9D3B,eACCqB,uCAECkC,cAAY;AAAA,UAACC,WAAU;AAAA,UAAM7B,UAAG,GAAE/B,OAAO;AAAA,QAAA,CAC3C,GACD0B,oBAACiC,cAAY;AAAA,UAACC,WAAU;AAAA,UAAM7B,UAAG,GAAEtB,iCAAQ1B;AAAAA,QAAAA,CAAiC,GAC5E2C,oBAACiC,cAAY;AAAA,UAAC7D,IAAImC,MAAMnC,IAAI,YAAY;AAAA,UAAG8D,WAAU;AAAA,UAAM7B,UACxDhC;AAAAA,QAAAA,CACY,CAAA;AAAA,MAAA,CACA,GACjB2B,oBAAC4C,yBAAuB;AAAA,QACtBxE,IAAImC,MAAMnC,IAAI,iBAAiB;AAAA,QAC/B,cAAYW,iCAAQlB;AAAAA,QACpBM,WAAW+B,KACTC,kBAAkB0C,eAClB3E,mCAAS2E,aAAa;AAAA,QAExBtB,UAAU,CAAC3C;AAAAA,QACXkE,SAASA,MAAMrD,WAAWnB,OAAO,CAAC;AAAA,QAClCyE,SAAShE,iCAAQvB;AAAAA,QAAwB6C,8BAExCkD,UAAQ;AAAA,UACPpF,WAAW+B,KAAKC,kBAAkB8C,MAAM/E,mCAAS+E,IAAI;AAAA,UACrDC,OAAOC,SAAS,CAACvE,OAAO;AAAA,QAAA,CAAE;AAAA,MAAA,CAEJ,GAC1BoB,oBAAC4C,yBAAuB;AAAA,QACtBxE,IAAImC,MAAMnC,IAAI,iBAAiB;AAAA,QAC/B,cAAYW,iCAAQjB;AAAAA,QACpBK,WAAW+B,KACTC,kBAAkB0C,eAClB3E,mCAAS2E,aAAa;AAAA,QAExBtB,UAAU,CAAC3C;AAAAA,QACXkE,SAASA,MAAMrD,WAAWpB,QAAQ,CAAC;AAAA,QACnC0E,SAAShE,iCAAQtB;AAAAA,QAAwB4C,8BAExCmD,KAAG;AAAA,UACFrF,WAAW+B,KAAKC,kBAAkB8C,MAAM/E,mCAAS+E,IAAI;AAAA,UACrDC,OAAOC,SAAS,CAACvE,OAAO;AAAA,QAAA,CAAE;AAAA,MAAA,CAEJ,CAAA;AAAA,IAAA,CACN,CAAA;AAAA,EAAA,CACX;AAEjB;"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { Hidden } from \"@mui/material\";\nimport { HvInput, HvInputProps, HvTypography } from \"components\";\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvBaseProps } from \"../../types\";\nimport { Option } from \"./Select\";\nimport {\n  StyledRoot,\n  StyledPageSizeOptions,\n  StyledPageSizePrev,\n  StyledSelect,\n  StyledPageSizeTextContainer,\n  StyledPageNavigator,\n  StyledButtonIconTooltip,\n  StyledPageJump,\n  StyledPageInfo,\n} from \"./Pagination.styles\";\nimport { paginationClasses, HvPaginationClasses } from \".\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\nimport { useLabels } from \"hooks\";\n\nexport type HvPaginationLabels = {\n  /** The show label. */\n  pageSizePrev?: string;\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName?: string;\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription?: string;\n  /** Separator of current page and total pages. */\n  pagesSeparator?: string;\n  /** Title of button `firstPage`. */\n  paginationFirstPageTitle?: string;\n  /** Title of button `previousPage`. */\n  paginationPreviousPageTitle?: string;\n  /** Title of button `nextPage`. */\n  paginationNextPageTitle?: string;\n  /** Title of button `lastPage`. */\n  paginationLastPageTitle?: string;\n  /** Aria-label passed to the page input. */\n  paginationInputLabel?: string;\n  /** Aria-label of the first page button */\n  firstPage?: string;\n  /** Aria-label of the previous page button */\n  previousPage?: string;\n  /** Aria-label of the next page button */\n  nextPage?: string;\n  /** Aria-label of the last page button */\n  lastPage?: string;\n};\n\nexport type HvPaginationProps = HvBaseProps & {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n};\n\nconst DEFAULT_LABELS = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst { Enter } = keyboardCodes;\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = ({\n  classes,\n  className,\n  id,\n  pages = 1,\n  page = 0,\n  showPageSizeOptions = true,\n  pageSizeOptions = [5, 10, 20, 25, 50, 100],\n  pageSize = 1,\n  showPageJump = true,\n  canPrevious = false,\n  canNext = false,\n  onPageChange,\n  onPageSizeChange,\n  labels: labelsProp,\n  showPageProps,\n  navigationProps,\n  currentPageInputProps,\n  ...others\n}: HvPaginationProps) => {\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n\n  const changePage = useCallback(\n    (newPage) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <StyledPageJump\n      className={clsx(paginationClasses.pageJump, classes?.pageJump)}\n    >\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // we really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: clsx(\n            paginationClasses.pageSizeInputContainer,\n            classes?.pageSizeInputContainer\n          ),\n          input: clsx(paginationClasses.pageSizeInput, classes?.pageSizeInput),\n          inputRoot: clsx(\n            paginationClasses.pageSizeInputRoot,\n            classes?.pageSizeInputRoot\n          ),\n        }}\n        onChange={handleInputChange}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(value - 1)}\n        onKeyDown={(evt, value) =>\n          isKeypress(evt, Enter) && changePage(value - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </StyledPageJump>\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, paginationClasses.root, classes?.root)}\n      {...others}\n    >\n      <StyledPageSizeOptions\n        className={clsx(\n          paginationClasses.pageSizeOptions,\n          classes?.pageSizeOptions\n        )}\n        {...showPageProps}\n      >\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <StyledPageSizePrev\n                className={clsx(\n                  paginationClasses.pageSizeTextContainer,\n                  classes?.pageSizeTextContainer\n                )}\n              >\n                <HvTypography component=\"span\">\n                  {labels?.pageSizePrev}\n                </HvTypography>\n              </StyledPageSizePrev>\n            </Hidden>\n            <StyledSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={clsx(\n                paginationClasses.pageSizeOptionsSelect,\n                classes?.pageSizeOptionsSelect\n              )}\n              classes={{}}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(evt, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </StyledSelect>\n            <Hidden xsDown>\n              <StyledPageSizeTextContainer\n                className={clsx(\n                  paginationClasses.pageSizeTextContainer,\n                  classes?.pageSizeTextContainer\n                )}\n              >\n                <HvTypography component=\"span\">\n                  {labels?.pageSizeEntryName}\n                </HvTypography>\n              </StyledPageSizeTextContainer>\n            </Hidden>\n          </>\n        )}\n      </StyledPageSizeOptions>\n      <StyledPageNavigator\n        className={clsx(\n          paginationClasses.pageNavigator,\n          classes?.pageNavigator\n        )}\n        {...navigationProps}\n      >\n        <StyledButtonIconTooltip\n          id={setId(id, \"firstPage-button\")}\n          aria-label={labels?.firstPage}\n          className={clsx(\n            paginationClasses.iconContainer,\n            classes?.iconContainer\n          )}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          tooltip={labels?.paginationFirstPageTitle}\n        >\n          <Start\n            className={clsx(paginationClasses.icon, classes?.icon)}\n            color={setColor(!canPrevious)}\n          />\n        </StyledButtonIconTooltip>\n        <StyledButtonIconTooltip\n          id={setId(id, \"previousPage-button\")}\n          aria-label={labels?.previousPage}\n          className={clsx(\n            paginationClasses.iconContainer,\n            classes?.iconContainer\n          )}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          tooltip={labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            className={clsx(paginationClasses.icon, classes?.icon)}\n            color={setColor(!canPrevious)}\n          />\n        </StyledButtonIconTooltip>\n        <StyledPageInfo\n          className={clsx(paginationClasses.pageInfo, classes?.pageInfo)}\n        >\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography component=\"span\">{`${page + 1}`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography id={setId(id, \"totalPages\")} component=\"span\">\n            {pages}\n          </HvTypography>\n        </StyledPageInfo>\n        <StyledButtonIconTooltip\n          id={setId(id, \"nextPage-button\")}\n          aria-label={labels?.nextPage}\n          className={clsx(\n            paginationClasses.iconContainer,\n            classes?.iconContainer\n          )}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          tooltip={labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            className={clsx(paginationClasses.icon, classes?.icon)}\n            color={setColor(!canNext)}\n          />\n        </StyledButtonIconTooltip>\n        <StyledButtonIconTooltip\n          id={setId(id, \"lastPage-button\")}\n          aria-label={labels?.lastPage}\n          className={clsx(\n            paginationClasses.iconContainer,\n            classes?.iconContainer\n          )}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          tooltip={labels?.paginationLastPageTitle}\n        >\n          <End\n            className={clsx(paginationClasses.icon, classes?.icon)}\n            color={setColor(!canNext)}\n          />\n        </StyledButtonIconTooltip>\n      </StyledPageNavigator>\n    </StyledRoot>\n  );\n};\n"],"names":["DEFAULT_LABELS","pageSizePrev","pageSizeEntryName","pageSizeSelectorDescription","pagesSeparator","paginationFirstPageTitle","paginationPreviousPageTitle","paginationNextPageTitle","paginationLastPageTitle","paginationInputLabel","firstPage","previousPage","nextPage","lastPage","Enter","keyboardCodes","HvPagination","classes","className","id","pages","page","showPageSizeOptions","pageSizeOptions","pageSize","showPageJump","canPrevious","canNext","onPageChange","onPageSizeChange","labels","labelsProp","showPageProps","navigationProps","currentPageInputProps","others","useLabels","pageInput","handleInputChange","usePageInput","changePage","useCallback","newPage","safePage","getSafePage","useEffect","renderPageJump","clsx","paginationClasses","pageJump","setId","type","root","pageSizeInputContainer","input","pageSizeInput","inputRoot","pageSizeInputRoot","String","evt","value","isKeypress","pageSizeTextContainer","pageSizeOptionsSelect","val","map","option","pageNavigator","iconContainer","icon","setColor","pageInfo"],"mappings":"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"}

package/dist/esm/components/Pagination/Select.js

@@ -1,7 +1,7 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import clsx from "clsx";
 import { StyledRoot } from "./Select.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -10,10 +10,7 @@ import { HvSelectionList } from "../SelectionList/SelectionList.js";
 const Option = ({
   children,
   ...others
-}) => /* @__PURE__ */ jsx(HvListItem, {
-  ...others,
-  children
-});
+}) => /* @__PURE__ */ jsx(HvListItem, { ...others, children });
 const HvSelect = ({
   className,
   classes,
@@ -41,33 +38,12 @@ const HvSelect = ({
       return true;
     });
   };
-  return /* @__PURE__ */ jsx(StyledRoot, {
-    children: /* @__PURE__ */ jsx(HvBaseDropdown, {
-      className,
-      classes: {
-        root: clsx(classes.base, classes.root),
-        anchor: classes.anchor,
-        header: classes.header,
-        headerOpen: classes.headerOpen
-      },
-      expanded: open,
-      onToggle: handleToggle,
-      onContainerCreation: setFocusToContent,
-      placeholder: /* @__PURE__ */ jsx(HvTypography, {
-        children: value
-      }),
-      disabled,
-      variableWidth: true,
-      ...others,
-      children: /* @__PURE__ */ jsx(HvPanel, {
-        children: /* @__PURE__ */ jsx(HvSelectionList, {
-          value,
-          onChange: handleSelect,
-          children
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(StyledRoot, { children: /* @__PURE__ */ jsx(HvBaseDropdown, { className, classes: {
+    root: clsx(classes.base, classes.root),
+    anchor: classes.anchor,
+    header: classes.header,
+    headerOpen: classes.headerOpen
+  }, expanded: open, onToggle: handleToggle, onContainerCreation: setFocusToContent, placeholder: /* @__PURE__ */ jsx(HvTypography, { children: value }), disabled, variableWidth: true, ...others, children: /* @__PURE__ */ jsx(HvPanel, { children: /* @__PURE__ */ jsx(HvSelectionList, { value, onChange: handleSelect, children }) }) }) });
 };
 export {
   Option,

package/dist/esm/components/Pagination/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Pagination/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n  HvBaseDropdown,\n  HvSelectionList,\n  HvListItem,\n  HvPanel,\n  HvTypography,\n} from \"../index\";\nimport { StyledRoot } from \"./Select.styles\";\n\nexport const Option = ({ children, ...others }) => (\n  <HvListItem {...others}>{children}</HvListItem>\n);\n\nconst HvSelect = ({\n  className,\n  classes,\n  onChange,\n  disabled,\n  value,\n  children,\n  ...others\n}) => {\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent = (containerRef) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <StyledRoot>\n      <HvBaseDropdown\n        className={className}\n        classes={{\n          root: clsx(classes.base, classes.root),\n          anchor: classes.anchor,\n          header: classes.header,\n          headerOpen: classes.headerOpen,\n        }}\n        expanded={open}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        placeholder={<HvTypography>{value}</HvTypography>}\n        disabled={disabled}\n        variableWidth\n        {...others}\n      >\n        <HvPanel>\n          <HvSelectionList value={value} onChange={handleSelect}>\n            {children}\n          </HvSelectionList>\n        </HvPanel>\n      </HvBaseDropdown>\n    </StyledRoot>\n  );\n};\n\nexport default HvSelect;\n"],"names":["Option","children","others","HvListItem","HvSelect","className","classes","onChange","disabled","value","open","setOpen","useState","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","StyledRoot","HvBaseDropdown","root","clsx","base","anchor","header","headerOpen","expanded","onToggle","onContainerCreation","placeholder","HvTypography","variableWidth","HvPanel","HvSelectionList"],"mappings":";;;;;;;;;AAWO,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,KAAaC;AAAO,0BAC1CC,YAAU;AAAA,EAAA,GAAKD;AAAAA,EAAMD;AAAW,CAClC;AAED,MAAMG,WAAWA,CAAC;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAR;AAAAA,KACGC;AACL,MAAM;AACJ,QAAM,CAACQ,MAAMC,OAAO,IAAIC,SAAS,KAAK;AAEhCC,QAAAA,eAAeA,CAACC,KAAKC,QAAQ;AACjCR,yCAAWO,KAAKC;AAChBJ,YAAQ,KAAK;AAAA,EAAA;AAGTK,QAAAA,eAAeA,CAACC,MAAMC,MAAM;AAChCP,YAAQO,CAAC;AAAA,EAAA;AAGX,QAAMC,oBAAqBC,CAAiB,iBAAA;AACpCC,UAAAA,YACJD,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxED,cAAUE,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASE,MAAO;AACT,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,6BACGC,YAAU;AAAA,IAAA1B,8BACR2B,gBAAc;AAAA,MACbvB;AAAAA,MACAC,SAAS;AAAA,QACPuB,MAAMC,KAAKxB,QAAQyB,MAAMzB,QAAQuB,IAAI;AAAA,QACrCG,QAAQ1B,QAAQ0B;AAAAA,QAChBC,QAAQ3B,QAAQ2B;AAAAA,QAChBC,YAAY5B,QAAQ4B;AAAAA,MACtB;AAAA,MACAC,UAAUzB;AAAAA,MACV0B,UAAUpB;AAAAA,MACVqB,qBAAqBlB;AAAAA,MACrBmB,iCAAcC,cAAY;AAAA,QAAAtC,UAAEQ;AAAAA,MAAAA,CAAsB;AAAA,MAClDD;AAAAA,MACAgC,eAAa;AAAA,MAAA,GACTtC;AAAAA,MAAMD,8BAETwC,SAAO;AAAA,QAAAxC,8BACLyC,iBAAe;AAAA,UAACjC;AAAAA,UAAcF,UAAUM;AAAAA,UAAaZ;AAAAA,QAAAA,CAC3C;AAAA,MAAA,CACO;AAAA,IAAA,CACV;AAAA,EAAA,CAED;AAEjB;"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Pagination/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport clsx from \"clsx\";\nimport {\n  HvBaseDropdown,\n  HvSelectionList,\n  HvListItem,\n  HvPanel,\n  HvTypography,\n} from \"../index\";\nimport { StyledRoot } from \"./Select.styles\";\n\nexport const Option = ({ children, ...others }) => (\n  <HvListItem {...others}>{children}</HvListItem>\n);\n\nconst HvSelect = ({\n  className,\n  classes,\n  onChange,\n  disabled,\n  value,\n  children,\n  ...others\n}) => {\n  const [open, setOpen] = useState(false);\n\n  const handleSelect = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent = (containerRef) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <StyledRoot>\n      <HvBaseDropdown\n        className={className}\n        classes={{\n          root: clsx(classes.base, classes.root),\n          anchor: classes.anchor,\n          header: classes.header,\n          headerOpen: classes.headerOpen,\n        }}\n        expanded={open}\n        onToggle={handleToggle}\n        onContainerCreation={setFocusToContent}\n        placeholder={<HvTypography>{value}</HvTypography>}\n        disabled={disabled}\n        variableWidth\n        {...others}\n      >\n        <HvPanel>\n          <HvSelectionList value={value} onChange={handleSelect}>\n            {children}\n          </HvSelectionList>\n        </HvPanel>\n      </HvBaseDropdown>\n    </StyledRoot>\n  );\n};\n\nexport default HvSelect;\n"],"names":["Option","children","others","HvSelect","className","classes","onChange","disabled","value","open","setOpen","useState","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","root","clsx","base","anchor","header","headerOpen"],"mappings":";;;;;;;;;AAWO,MAAMA,SAASA,CAAC;AAAA,EAAEC;AAAAA,KAAaC;AAAO,MAC1C,oBAAA,YAAA,EAAeA,GAAAA,QAASD,SAAS,CAAA;AAGpC,MAAME,WAAWA,CAAC;AAAA,EAChBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAP;AAAAA,KACGC;AACL,MAAM;AACJ,QAAM,CAACO,MAAMC,OAAO,IAAIC,SAAS,KAAK;AAEhCC,QAAAA,eAAeA,CAACC,KAAKC,QAAQ;AACjCR,yCAAWO,KAAKC;AAChBJ,YAAQ,KAAK;AAAA,EAAA;AAGTK,QAAAA,eAAeA,CAACC,MAAMC,MAAM;AAChCP,YAAQO,CAAC;AAAA,EAAA;AAGX,QAAMC,oBAAqBC,CAAiB,iBAAA;AACpCC,UAAAA,YACJD,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxED,cAAUE,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASE,MAAO;AACT,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,SACG,oBAAA,YAAA,EACC,UAAC,oBAAA,gBAAA,EACC,WACA,SAAS;AAAA,IACPC,MAAMC,KAAKtB,QAAQuB,MAAMvB,QAAQqB,IAAI;AAAA,IACrCG,QAAQxB,QAAQwB;AAAAA,IAChBC,QAAQzB,QAAQyB;AAAAA,IAChBC,YAAY1B,QAAQ0B;AAAAA,EAAAA,GAEtB,UAAUtB,MACV,UAAUM,cACV,qBAAqBG,mBACrB,aAAa,oBAAC,cAAcV,EAAAA,UAAAA,MAAM,CAAA,GAClC,UACA,eAAa,MACb,GAAIN,QAEJ,UAAC,oBAAA,SAAA,EACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAUU,cACtCX,SAAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;"}

package/dist/esm/components/Panel/Panel.js

@@ -1,7 +1,7 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import { StyledDiv } from "./Panel.styles.js";
 import panelClasses from "./panelClasses.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvPanel = (props) => {
   const {
     id,
@@ -10,12 +10,7 @@ const HvPanel = (props) => {
     children,
     ...others
   } = props;
-  return /* @__PURE__ */ jsx(StyledDiv, {
-    id,
-    className: clsx(className, panelClasses.root, classes == null ? void 0 : classes.root),
-    ...others,
-    children
-  });
+  return /* @__PURE__ */ jsx(StyledDiv, { id, className: clsx(className, panelClasses.root, classes == null ? void 0 : classes.root), ...others, children });
 };
 export {
   HvPanel

package/dist/esm/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledDiv } from \"./Panel.styles\";\nimport panelClasses, { HvPanelClasses } from \"./panelClasses\";\n\nexport type PanelProps = HvBaseProps & {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n};\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = (props: PanelProps) => {\n  const { id, className, classes, children, ...others } = props;\n\n  return (\n    <StyledDiv\n      id={id}\n      className={clsx(className, panelClasses.root, classes?.root)}\n      {...others}\n    >\n      {children}\n    </StyledDiv>\n  );\n};\n"],"names":["HvPanel","props","id","className","classes","children","others","StyledDiv","clsx","panelClasses","root"],"mappings":";;;;AAmBaA,MAAAA,UAAUA,CAACC,UAAsB;AACtC,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,IAAWC;AAAAA,IAASC;AAAAA,OAAaC;AAAAA,EAAWL,IAAAA;AAExD,6BACGM,WAAS;AAAA,IACRL;AAAAA,IACAC,WAAWK,KAAKL,WAAWM,aAAaC,MAAMN,mCAASM,IAAI;AAAA,IAAE,GACzDJ;AAAAA,IAAMD;AAAAA,EAAAA,CAGA;AAEhB;"}
+{"version":3,"file":"Panel.js","sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledDiv } from \"./Panel.styles\";\nimport panelClasses, { HvPanelClasses } from \"./panelClasses\";\n\nexport type PanelProps = HvBaseProps & {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvPanelClasses;\n};\n\n/**\n * A panel is a container used in a variety of patterns (e.g. dropdown, filter group, details section).\n * It can be horizontal or vertical and its size is defined by its content and how it relates to surrounding patterns.\n * Regardless of its content, a panel look and feel should be consistent.\n */\nexport const HvPanel = (props: PanelProps) => {\n  const { id, className, classes, children, ...others } = props;\n\n  return (\n    <StyledDiv\n      id={id}\n      className={clsx(className, panelClasses.root, classes?.root)}\n      {...others}\n    >\n      {children}\n    </StyledDiv>\n  );\n};\n"],"names":["HvPanel","props","id","className","classes","children","others","clsx","panelClasses","root"],"mappings":";;;;AAmBaA,MAAAA,UAAUA,CAACC,UAAsB;AACtC,QAAA;AAAA,IAAEC;AAAAA,IAAIC;AAAAA,IAAWC;AAAAA,IAASC;AAAAA,OAAaC;AAAAA,EAAWL,IAAAA;AAExD,SACG,oBAAA,WAAA,EACC,IACA,WAAWM,KAAKJ,WAAWK,aAAaC,MAAML,mCAASK,IAAI,GACvDH,GAAAA,QAEHD,SACH,CAAA;AAEJ;"}

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -1,8 +1,8 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import clamp from "lodash/clamp";
 import { StyledRoot, StyledProgressContainer, StyledValue, StyledProgressBarContainer, StyledProgressBar } from "./ProgressBar.styles.js";
 import progressBarClasses from "./progressBarClasses.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const HvProgressBar = (props) => {
   const {
     className,
@@ -13,33 +13,14 @@ const HvProgressBar = (props) => {
     ...others
   } = props;
   const clampedValue = clamp(value, 0, 100);
-  return /* @__PURE__ */ jsx(StyledRoot, {
-    className: clsx(className, progressBarClasses.root, classes == null ? void 0 : classes.root, progressBarClasses.progress, classes == null ? void 0 : classes.progress),
-    role: "progressbar",
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    "aria-valuenow": clampedValue,
-    ...others,
-    children: /* @__PURE__ */ jsxs(StyledProgressContainer, {
-      children: [/* @__PURE__ */ jsx(StyledValue, {
-        className: clsx(progressBarClasses.progressBarLabel, classes == null ? void 0 : classes.progressBarLabel),
-        variant: "caption2",
-        style: {
-          width: `${clampedValue}%`
-        },
-        ...labelProps,
-        children: `${clampedValue}%`
-      }), /* @__PURE__ */ jsx(StyledProgressBarContainer, {
-        children: /* @__PURE__ */ jsx(StyledProgressBar, {
-          style: {
-            width: `${clampedValue}%`
-          },
-          className: clsx(progressBarClasses.progressBar, classes == null ? void 0 : classes.progressBar),
-          $status: status
-        })
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsx(StyledRoot, { className: clsx(className, progressBarClasses.root, classes == null ? void 0 : classes.root, progressBarClasses.progress, classes == null ? void 0 : classes.progress), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": clampedValue, ...others, children: /* @__PURE__ */ jsxs(StyledProgressContainer, { className: clsx(classes == null ? void 0 : classes.progressContainer, progressBarClasses.progressContainer), children: [
+    /* @__PURE__ */ jsx(StyledValue, { className: clsx(progressBarClasses.progressBarLabel, classes == null ? void 0 : classes.progressBarLabel, status === "completed" && clsx(progressBarClasses.progressDone, classes == null ? void 0 : classes.progressDone)), variant: "caption2", style: {
+      width: `${clampedValue}%`
+    }, ...labelProps, children: `${clampedValue}%` }),
+    /* @__PURE__ */ jsx(StyledProgressBarContainer, { className: clsx(classes == null ? void 0 : classes.progressBarContainer, progressBarClasses.progressBarContainer), children: /* @__PURE__ */ jsx(StyledProgressBar, { style: {
+      width: `${clampedValue}%`
+    }, className: clsx(progressBarClasses.progressBar, classes == null ? void 0 : classes.progressBar, status === "completed" && clsx(classes == null ? void 0 : classes.progressDone, progressBarClasses.progressDone), status === "error" && clsx(classes == null ? void 0 : classes.progressError, progressBarClasses.progressError)), $status: status }) })
+  ] }) });
 };
 export {
   HvProgressBar

package/dist/esm/components/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvTypographyProps } from \"../Typography\";\nimport clamp from \"lodash/clamp\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledProgressBar,\n  StyledProgressBarContainer,\n  StyledProgressContainer,\n  StyledRoot,\n  StyledValue,\n} from \"./ProgressBar.styles\";\nimport progressBarClasses, { HvProgressBarClasses } from \"./progressBarClasses\";\n\nexport type HvProgressBarStatus = \"inProgress\" | \"completed\" | \"error\";\n\n/**\n * ProgressBar provides feedback about a process that is taking place in the application.\n */\nexport type HvProgressBarProps = HvBaseProps & {\n  /** The value of the progress bar. */\n  value: number;\n  /**\n   * The status of the progress bar.\n   *\n   * inProgress is black, error is red and completed is green.\n   *\n   * When uncontrolled and unspecified it will default to \"inProgress\".\n   */\n  status?: HvProgressBarStatus;\n  /** Aria Properties passed on to the progress bar. */\n  labelProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvProgressBarClasses;\n};\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n  const {\n    className,\n    classes,\n    value = 0,\n    status = \"inProgress\",\n    labelProps,\n    ...others\n  } = props;\n\n  const clampedValue = clamp(value, 0, 100);\n\n  return (\n    <StyledRoot\n      className={clsx(\n        className,\n        progressBarClasses.root,\n        classes?.root,\n        progressBarClasses.progress,\n        classes?.progress\n      )}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clampedValue}\n      {...others}\n    >\n      <StyledProgressContainer>\n        <StyledValue\n          className={clsx(\n            progressBarClasses.progressBarLabel,\n            classes?.progressBarLabel\n          )}\n          variant=\"caption2\"\n          style={{ width: `${clampedValue}%` }}\n          {...labelProps}\n        >\n          {`${clampedValue}%`}\n        </StyledValue>\n        <StyledProgressBarContainer>\n          <StyledProgressBar\n            style={{ width: `${clampedValue}%` }}\n            className={clsx(\n              progressBarClasses.progressBar,\n              classes?.progressBar\n            )}\n            $status={status}\n          />\n        </StyledProgressBarContainer>\n      </StyledProgressContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvProgressBar","props","className","classes","value","status","labelProps","others","clampedValue","clamp","StyledRoot","clsx","progressBarClasses","root","progress","role","children","StyledProgressContainer","_jsx","StyledValue","progressBarLabel","variant","style","width","StyledProgressBarContainer","StyledProgressBar","progressBar","$status"],"mappings":";;;;;AAmCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEJ,QAAMO,eAAeC,MAAML,OAAO,GAAG,GAAG;AAExC,6BACGM,YAAU;AAAA,IACTR,WAAWS,KACTT,WACAU,mBAAmBC,MACnBV,mCAASU,MACTD,mBAAmBE,UACnBX,mCAASW,QAAQ;AAAA,IAEnBC,MAAK;AAAA,IACL,iBAAe;AAAA,IACf,iBAAe;AAAA,IACf,iBAAeP;AAAAA,IAAa,GACxBD;AAAAA,IAAMS,+BAETC,yBAAuB;AAAA,MAAAD,UAAA,CACtBE,oBAACC,aAAW;AAAA,QACVjB,WAAWS,KACTC,mBAAmBQ,kBACnBjB,mCAASiB,gBAAgB;AAAA,QAE3BC,SAAQ;AAAA,QACRC,OAAO;AAAA,UAAEC,OAAQ,GAAEf;AAAAA,QAAgB;AAAA,QAAE,GACjCF;AAAAA,QAAUU,UAEZ,GAAER;AAAAA,MAAAA,CACQ,GACdU,oBAACM,4BAA0B;AAAA,QAAAR,8BACxBS,mBAAiB;AAAA,UAChBH,OAAO;AAAA,YAAEC,OAAQ,GAAEf;AAAAA,UAAgB;AAAA,UACnCN,WAAWS,KACTC,mBAAmBc,aACnBvB,mCAASuB,WAAW;AAAA,UAEtBC,SAAStB;AAAAA,QAAAA,CAAO;AAAA,MAAA,CAES,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEpB;AAEjB;"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvTypographyProps } from \"../Typography\";\nimport clamp from \"lodash/clamp\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledProgressBar,\n  StyledProgressBarContainer,\n  StyledProgressContainer,\n  StyledRoot,\n  StyledValue,\n} from \"./ProgressBar.styles\";\nimport progressBarClasses, { HvProgressBarClasses } from \"./progressBarClasses\";\n\nexport type HvProgressBarStatus = \"inProgress\" | \"completed\" | \"error\";\n\n/**\n * ProgressBar provides feedback about a process that is taking place in the application.\n */\nexport type HvProgressBarProps = HvBaseProps & {\n  /** The value of the progress bar. */\n  value: number;\n  /**\n   * The status of the progress bar.\n   *\n   * inProgress is black, error is red and completed is green.\n   *\n   * When uncontrolled and unspecified it will default to \"inProgress\".\n   */\n  status?: HvProgressBarStatus;\n  /** Aria Properties passed on to the progress bar. */\n  labelProps?: HvTypographyProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvProgressBarClasses;\n};\n\nexport const HvProgressBar = (props: HvProgressBarProps) => {\n  const {\n    className,\n    classes,\n    value = 0,\n    status = \"inProgress\",\n    labelProps,\n    ...others\n  } = props;\n\n  const clampedValue = clamp(value, 0, 100);\n\n  return (\n    <StyledRoot\n      className={clsx(\n        className,\n        progressBarClasses.root,\n        classes?.root,\n        progressBarClasses.progress,\n        classes?.progress\n      )}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={clampedValue}\n      {...others}\n    >\n      <StyledProgressContainer\n        className={clsx(\n          classes?.progressContainer,\n          progressBarClasses.progressContainer\n        )}\n      >\n        <StyledValue\n          className={clsx(\n            progressBarClasses.progressBarLabel,\n            classes?.progressBarLabel,\n            status === \"completed\" &&\n              clsx(progressBarClasses.progressDone, classes?.progressDone)\n          )}\n          variant=\"caption2\"\n          style={{ width: `${clampedValue}%` }}\n          {...labelProps}\n        >\n          {`${clampedValue}%`}\n        </StyledValue>\n        <StyledProgressBarContainer\n          className={clsx(\n            classes?.progressBarContainer,\n            progressBarClasses.progressBarContainer\n          )}\n        >\n          <StyledProgressBar\n            style={{ width: `${clampedValue}%` }}\n            className={clsx(\n              progressBarClasses.progressBar,\n              classes?.progressBar,\n              status === \"completed\" &&\n                clsx(classes?.progressDone, progressBarClasses.progressDone),\n              status === \"error\" &&\n                clsx(classes?.progressError, progressBarClasses.progressError)\n            )}\n            $status={status}\n          />\n        </StyledProgressBarContainer>\n      </StyledProgressContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvProgressBar","props","className","classes","value","status","labelProps","others","clampedValue","clamp","clsx","progressBarClasses","root","progress","progressContainer","progressBarLabel","progressDone","width","progressBarContainer","progressBar","progressError"],"mappings":";;;;;AAmCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC;AAAAA,OACGC;AAAAA,EACDN,IAAAA;AAEJ,QAAMO,eAAeC,MAAML,OAAO,GAAG,GAAG;AAExC,SACG,oBAAA,YAAA,EACC,WAAWM,KACTR,WACAS,mBAAmBC,MACnBT,mCAASS,MACTD,mBAAmBE,UACnBV,mCAASU,QAAQ,GAEnB,MAAK,eACL,iBAAe,GACf,iBAAe,KACf,iBAAeL,cACXD,GAAAA,QAEJ,UAAA,qBAAC,yBACC,EAAA,WAAWG,KACTP,mCAASW,mBACTH,mBAAmBG,iBAAiB,GAGtC,UAAA;AAAA,IAAA,oBAAC,eACC,WAAWJ,KACTC,mBAAmBI,kBACnBZ,mCAASY,kBACTV,WAAW,eACTK,KAAKC,mBAAmBK,cAAcb,mCAASa,YAAY,CAAC,GAEhE,SAAQ,YACR,OAAO;AAAA,MAAEC,OAAQ,GAAET;AAAAA,IAAAA,GACfF,GAAAA,YAEF,UAAA,GAAEE,iBACN;AAAA,IACA,oBAAC,4BACC,EAAA,WAAWE,KACTP,mCAASe,sBACTP,mBAAmBO,oBAAoB,GAGzC,UAAC,oBAAA,mBAAA,EACC,OAAO;AAAA,MAAED,OAAQ,GAAET;AAAAA,IAAgB,GACnC,WAAWE,KACTC,mBAAmBQ,aACnBhB,mCAASgB,aACTd,WAAW,eACTK,KAAKP,mCAASa,cAAcL,mBAAmBK,YAAY,GAC7DX,WAAW,WACTK,KAAKP,mCAASiB,eAAeT,mBAAmBS,aAAa,CAAC,GAElE,SAASf,OAAAA,CAAO,EAEpB,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/ProgressBar/progressBarClasses.js

@@ -1,5 +1,5 @@
 import { getClasses } from "../../utils/classes.js";
-const classKeys = ["root", "progress", "progressBar", "progressBarLabel"];
+const classKeys = ["root", "progress", "progressBar", "progressBarLabel", "progressContainer", "progressDone", "progressBarContainer", "progressError"];
 const progressBarClasses = getClasses(classKeys, "HvProgressBar");
 const progressBarClasses$1 = progressBarClasses;
 export {

package/dist/esm/components/ProgressBar/progressBarClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressBarClasses.js","sources":["../../../../src/components/ProgressBar/progressBarClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvProgressBarClasses = {\n  root?: string;\n  progress?: string;\n  progressBar?: string;\n  progressBarLabel?: string;\n};\n\nconst classKeys: string[] = [\n  \"root\",\n  \"progress\",\n  \"progressBar\",\n  \"progressBarLabel\",\n];\n\nconst progressBarClasses = getClasses<HvProgressBarClasses>(\n  classKeys,\n  \"HvProgressBar\"\n);\n\nexport default progressBarClasses;\n"],"names":["classKeys","progressBarClasses","getClasses"],"mappings":";AASA,MAAMA,YAAsB,CAC1B,QACA,YACA,eACA,kBAAkB;AAGpB,MAAMC,qBAAqBC,WACzBF,WACA,eAAe;AAGjB,MAAA,uBAAeC;"}
+{"version":3,"file":"progressBarClasses.js","sources":["../../../../src/components/ProgressBar/progressBarClasses.ts"],"sourcesContent":["import { getClasses } from \"utils\";\n\nexport type HvProgressBarClasses = {\n  root?: string;\n  progress?: string;\n  progressBar?: string;\n  progressBarLabel?: string;\n  progressContainer?: string;\n  progressDone?: string;\n  progressBarContainer?: string;\n  progressError?: string;\n};\n\nconst classKeys: string[] = [\n  \"root\",\n  \"progress\",\n  \"progressBar\",\n  \"progressBarLabel\",\n  \"progressContainer\",\n  \"progressDone\",\n  \"progressBarContainer\",\n  \"progressError\",\n];\n\nconst progressBarClasses = getClasses<HvProgressBarClasses>(\n  classKeys,\n  \"HvProgressBar\"\n);\n\nexport default progressBarClasses;\n"],"names":["classKeys","progressBarClasses","getClasses"],"mappings":";AAaA,MAAMA,YAAsB,CAC1B,QACA,YACA,eACA,oBACA,qBACA,gBACA,wBACA,eAAe;AAGjB,MAAMC,qBAAqBC,WACzBF,WACA,eAAe;AAGjB,MAAA,uBAAeC;"}

package/dist/esm/components/Radio/Radio.js

@@ -1,9 +1,9 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useState, useCallback } from "react";
 import clsx from "clsx";
 import { isInvalid } from "../Forms/FormElement/validationStates.js";
 import { StyledHvBaseRadio, StyledHvFormElement, StyledDivContainer, StyledHvLabel } from "./Radio.styles.js";
 import radioClasses from "./radioClasses.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import useUniqueId from "../../hooks/useUniqueId.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { setId } from "../../utils/setId.js";
@@ -57,56 +57,21 @@ const HvRadio = (props) => {
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-  const radio = /* @__PURE__ */ jsx(StyledHvBaseRadio, {
-    id: label ? setId(elementId, "input") : setId(id, "input"),
-    name,
-    className: clsx(radioClasses.radio, classes == null ? void 0 : classes.radio, isStateInvalid && clsx(radioClasses.invalidRadio, classes == null ? void 0 : classes.invalidRadio)),
-    $invalid: isStateInvalid,
-    disabled,
-    readOnly,
-    onChange: onLocalChange,
-    value,
-    checked: isChecked,
-    semantic,
-    inputProps: {
-      "aria-invalid": isStateInvalid ? true : void 0,
-      "aria-errormessage": errorMessageId,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      ...inputProps
-    },
-    onFocusVisible: onFocusVisibleCallback,
-    onBlur: onBlurCallback,
-    ...others
-  });
-  return /* @__PURE__ */ jsxs(StyledHvFormElement, {
-    id,
-    name,
-    status: status || "standBy",
-    disabled,
-    required,
-    readOnly,
-    className: clsx(className, radioClasses.root, classes == null ? void 0 : classes.root),
-    children: [hasLabel ? /* @__PURE__ */ jsxs(StyledDivContainer, {
-      className: clsx(radioClasses.container, classes == null ? void 0 : classes.container, disabled && clsx(radioClasses.disabled, classes == null ? void 0 : classes.disabled), focusVisible && label && clsx(radioClasses.focusVisible, classes == null ? void 0 : classes.focusVisible), isStateInvalid && clsx(radioClasses.invalidContainer, classes == null ? void 0 : classes.invalidContainer)),
-      $invalid: isStateInvalid,
-      $focusVisible: !!(focusVisible && label),
-      $disabled: disabled,
-      children: [radio, /* @__PURE__ */ jsx(StyledHvLabel, {
-        id: setId(elementId, "label"),
-        htmlFor: setId(elementId, "input"),
-        label,
-        className: clsx(radioClasses.label, classes == null ? void 0 : classes.label),
-        $disabled: disabled,
-        ...labelProps
-      })]
-    }) : radio, canShowError && /* @__PURE__ */ jsx(HvWarningText, {
-      id: setId(elementId, "error"),
-      disableBorder: true,
-      children: statusMessage
-    })]
-  });
+  const radio = /* @__PURE__ */ jsx(StyledHvBaseRadio, { id: label ? setId(elementId, "input") : setId(id, "input"), name, className: clsx(radioClasses.radio, classes == null ? void 0 : classes.radio, isStateInvalid && clsx(radioClasses.invalidRadio, classes == null ? void 0 : classes.invalidRadio)), $invalid: isStateInvalid, disabled, readOnly, onChange: onLocalChange, value, checked: isChecked, semantic, inputProps: {
+    "aria-invalid": isStateInvalid ? true : void 0,
+    "aria-errormessage": errorMessageId,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...inputProps
+  }, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
+  return /* @__PURE__ */ jsxs(StyledHvFormElement, { id, name, status: status || "standBy", disabled, required, readOnly, className: clsx(className, radioClasses.root, classes == null ? void 0 : classes.root), children: [
+    hasLabel ? /* @__PURE__ */ jsxs(StyledDivContainer, { className: clsx(radioClasses.container, classes == null ? void 0 : classes.container, disabled && clsx(radioClasses.disabled, classes == null ? void 0 : classes.disabled), focusVisible && label && clsx(radioClasses.focusVisible, classes == null ? void 0 : classes.focusVisible), isStateInvalid && clsx(radioClasses.invalidContainer, classes == null ? void 0 : classes.invalidContainer)), $invalid: isStateInvalid, $focusVisible: !!(focusVisible && label), $disabled: disabled, children: [
+      radio,
+      /* @__PURE__ */ jsx(StyledHvLabel, { id: setId(elementId, "label"), htmlFor: setId(elementId, "input"), label, className: clsx(radioClasses.label, classes == null ? void 0 : classes.label), $disabled: disabled, ...labelProps })
+    ] }) : radio,
+    canShowError && /* @__PURE__ */ jsx(HvWarningText, { id: setId(elementId, "error"), disableBorder: true, children: statusMessage })
+  ] });
 };
 export {
   HvRadio