@hitachivantara/uikit-react-core 6.2.0 → 6.4.0

package/dist/AppSwitcher/Action/Action.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { useCallback } from "react";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { HvIcon } from "../../icons.js";
@@ -22,30 +22,25 @@ const HvAppSwitcherAction = ({
   const { classes, cx } = useClasses(classesProp);
   const { name, description, disabled, iconElement, iconUrl, url, target } = application;
   const color = getColor(
-    disabled ? "textDisabled" : application?.color,
-    "text"
+    disabled && "textDisabled" || application?.color || "text"
   );
-  const [validIconUrl, setValidIconUrl] = useState(true);
   const renderApplicationIcon = () => {
-    if (iconElement) {
-      return iconElement;
-    }
-    if (iconUrl && validIconUrl) {
-      return /* @__PURE__ */ jsx(
-        "img",
-        {
-          className: classes.iconUrl,
-          src: iconUrl,
-          onError: () => {
-            setValidIconUrl(false);
-          },
-          alt: description
-        }
-      );
-    }
-    const brokenTitle = name.split(" ");
-    const initials = brokenTitle[0].slice(0, 1) + (brokenTitle[1] ? brokenTitle[1].slice(0, 1) : "");
-    return /* @__PURE__ */ jsx(HvAvatar, { size: "sm", backgroundColor: color, variant: "square", "aria-hidden": true, children: initials });
+    if (iconElement) return iconElement;
+    const nameParts = name.split(/\s+/);
+    const initials = nameParts[0].charAt(0) + (nameParts[1]?.charAt(0) || "");
+    return /* @__PURE__ */ jsx(
+      HvAvatar,
+      {
+        size: "sm",
+        src: iconUrl,
+        className: classes.iconUrl,
+        alt: description,
+        backgroundColor: color,
+        color: "bgContainer",
+        "aria-hidden": true,
+        children: initials
+      }
+    );
   };
   const isSelected = isSelectedCallback(application);
   const handleOnClick = useCallback(

package/dist/AppSwitcher/Action/Action.styles.js

@@ -1,7 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses(
-  "HvAppSwitcher-Action",
+  "HvAppSwitcherAction",
   {
     root: {
       width: "100%",
@@ -9,7 +9,7 @@ const { staticClasses, useClasses } = createClasses(
       minHeight: 52
     },
     icon: { display: "flex", minWidth: 40, justifyContent: "center" },
-    iconUrl: { width: 32 },
+    iconUrl: { borderColor: "transparent" },
     iconInfo: { minWidth: 32 },
     disabled: {},
     selected: {},

package/dist/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
@@ -23,8 +23,8 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     children: childrenProp,
     component = "div",
     size: sizeProp,
-    backgroundColor = "text",
-    color = "bgContainer",
+    backgroundColor,
+    color: colorProp,
     src,
     srcSet,
     sizes,
@@ -37,6 +37,7 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     ...others
   } = useDefaultProps("HvAvatar", props);
   const { classes, cx } = useClasses(classesProp);
+  const color = props.backgroundColor ? props.color || "bgContainer" : colorProp;
   const avatarGroupContext = useAvatarGroupContext();
   const size = sizeProp || avatarGroupContext?.size || "sm";
   let children;
@@ -57,40 +58,28 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     );
   } else if (childrenProp != null) {
     children = childrenProp;
-  } else if (hasImg && alt) {
+  } else if (alt) {
     [children] = alt;
   } else {
     children = /* @__PURE__ */ jsx(
       HvIcon,
       {
         name: "User",
-        color,
         size: decreaseSizeMap[size],
         className: classes.fallback
       }
     );
   }
-  const inlineStyle = {
-    ...style
-  };
-  if (component != null && typeof component !== "string") {
-    inlineStyle.borderRadius = "50%";
-  }
-  if (!hasImgNotFailing) {
-    inlineStyle.backgroundColor = getColor(backgroundColor, "text");
-    inlineStyle.color = getColor(color, "textDimmed");
-  }
-  const statusInlineStyle = {};
-  if (status) {
-    const statusColor = getColor(status, "positive");
-    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
-  }
+  const statusColor = getColor(status, "positive");
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       className: cx(classes.container, classes[variant]),
-      style: statusInlineStyle,
+      style: mergeStyles(void 0, {
+        // we're using the boxShadow to have the border inside the container and not on its edge.
+        boxShadow: status && `inset 0px 0px 0px 2px ${statusColor}`
+      }),
       ...others,
       children: [
         badge && /* @__PURE__ */ jsx(
@@ -105,7 +94,12 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
           {
             component,
             className: cx(classes.root, classes.avatar, classes[size], className),
-            style: inlineStyle,
+            "data-color": color,
+            style: mergeStyles(style, {
+              "--bgColor": !hasImgNotFailing && getColor(backgroundColor, "text"),
+              "--textColor": !hasImgNotFailing && getColor(color, "bgContainer"),
+              borderRadius: component != null && typeof component !== "string" && "50%"
+            }),
             variant,
             size,
             ...avatarProps,

package/dist/Avatar/Avatar.styles.js

@@ -1,10 +1,8 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvAvatar", {
-  root: {
-    fontSize: "1rem"
-  },
+  // use `classes.avatar` instead
+  root: {},
   img: {
     width: "100%",
     height: "100%",
@@ -23,17 +21,21 @@ const { staticClasses, useClasses } = createClasses("HvAvatar", {
     position: "relative",
     padding: theme.space.xxs,
     height: "fit-content",
-    ":focus-visible": {
-      ...outlineStyles,
-      borderRadius: 0
-    }
+    fontSize: "1rem"
+  },
+  xs: { "--size": "24px", fontSize: theme.fontSizes.sm },
+  sm: { "--size": "32px", fontSize: theme.fontSizes.base },
+  md: { "--size": "40px", fontSize: theme.fontSizes.xl },
+  lg: { "--size": "52px", fontSize: theme.fontSizes.xl2 },
+  xl: { "--size": "88px", fontSize: theme.fontSizes.xl3 },
+  avatar: {
+    fontSize: "1em",
+    borderRadius: "inherit",
+    color: "var(--textColor)",
+    width: "var(--size)",
+    height: "var(--size)",
+    backgroundColor: "var(--bgColor)"
   },
-  xs: { width: 24, height: 24, fontSize: "0.5rem" },
-  sm: { width: 32, height: 32, fontSize: "0.625rem" },
-  md: { width: 40, height: 40, fontSize: "1rem" },
-  lg: { width: 52, height: 52, fontSize: "1.5rem" },
-  xl: { width: 88, height: 88, fontSize: "2rem" },
-  avatar: { borderRadius: "inherit" },
   badge: {
     width: 8,
     height: 8,

package/dist/AvatarGroup/AvatarGroup.js

@@ -1,82 +1,23 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Children } from "react";
-import { useDefaultProps, mergeStyles, useCss } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { HvAvatar } from "../Avatar/Avatar.js";
 import { useClasses } from "./AvatarGroup.styles.js";
 import { staticClasses } from "./AvatarGroup.styles.js";
 import { HvAvatarGroupProvider } from "./AvatarGroupContext.js";
 const getSpacingValue = (spacing, size) => {
   switch (size) {
-    case "xs":
-      return spacing === "compact" ? 24 : 16;
-    case "sm":
-      return spacing === "compact" ? 30 : 18;
-    case "md":
-      return spacing === "compact" ? 36 : 20;
-    case "lg":
-      return spacing === "compact" ? 44 : 24;
     case "xl":
-      return spacing === "compact" ? 72 : 34;
-    default:
-      return spacing === "compact" ? 30 : 18;
-  }
-};
-const getFontSize = (size) => {
-  switch (size) {
+      return spacing === "compact" ? 40 : 16;
+    case "lg":
+    case "md":
+      return spacing === "compact" ? 32 : 20;
     case "xs":
-      return "1em";
     case "sm":
-      return "1.25em";
-    case "md":
-      return "1.5em";
-    case "lg":
-      return "1.75em";
-    case "xl":
-      return "3em";
     default:
-      return "1em";
+      return spacing === "compact" ? 24 : 12;
   }
 };
-const Overflow = ({
-  direction,
-  childrenToShow,
-  spacingValue,
-  overflowComponent,
-  totalChildren,
-  maxVisible,
-  size
-}) => {
-  const { css } = useCss();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        marginLeft: direction === "row" && childrenToShow.length > 0 ? -spacingValue : 0,
-        marginTop: direction === "column" && childrenToShow.length > 0 ? -spacingValue : 0,
-        zIndex: 0
-      },
-      children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxs(
-        HvAvatar,
-        {
-          size,
-          backgroundColor: theme.colors.border,
-          classes: {
-            avatar: css({
-              [`&.HvAvatar-${size}`]: {
-                fontSize: getFontSize(size)
-              }
-            })
-          },
-          children: [
-            "+",
-            totalChildren - maxVisible
-          ]
-        }
-      )
-    }
-  );
-};
 const HvAvatarGroup = forwardRef(
   function HvAvatarGroup2(props, ref) {
     const {
@@ -94,11 +35,20 @@ const HvAvatarGroup = forwardRef(
       ...others
     } = useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = useClasses(classesProp);
-    const spacingValue = getSpacingValue(spacing, size);
     const totalChildren = Children.count(children);
     const willOverflow = totalChildren > maxVisible;
+    const overflowValue = totalChildren - maxVisible;
     const childrenToShow = Children.toArray(children).slice(0, maxVisible);
     if (toBack) childrenToShow.reverse();
+    const overflowElement = /* @__PURE__ */ jsx("div", { children: overflowComponent?.(overflowValue) || /* @__PURE__ */ jsx(
+      HvAvatar,
+      {
+        size,
+        avatarProps: { ["data-color"]: "neutral" },
+        backgroundColor: "border",
+        children: `+${overflowValue}`
+      }
+    ) });
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -112,36 +62,14 @@ const HvAvatarGroup = forwardRef(
           className
         ),
         style: mergeStyles(style, {
-          "--spacing": `-${spacingValue}px`
+          "--spacing": `-${getSpacingValue(spacing, size)}px`
         }),
         ref,
         ...others,
         children: /* @__PURE__ */ jsxs(HvAvatarGroupProvider, { size, children: [
-          toBack && willOverflow && /* @__PURE__ */ jsx(
-            Overflow,
-            {
-              childrenToShow,
-              direction,
-              maxVisible,
-              overflowComponent,
-              size,
-              spacingValue,
-              totalChildren
-            }
-          ),
+          toBack && willOverflow && overflowElement,
           childrenToShow,
-          !toBack && willOverflow && /* @__PURE__ */ jsx(
-            Overflow,
-            {
-              childrenToShow,
-              direction,
-              maxVisible,
-              overflowComponent,
-              size,
-              spacingValue,
-              totalChildren
-            }
-          )
+          !toBack && willOverflow && overflowElement
         ] })
       }
     );

package/dist/AvatarGroup/AvatarGroup.styles.js

@@ -16,15 +16,13 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
   row: {
     flexDirection: "row",
     justifyContent: "flex-start",
-    [`& .${staticClasses$1.container}`]: {
-      "&:not(:first-of-type)": {
-        marginLeft: "var(--spacing)"
-      }
+    "&>*:not(:first-of-type)": {
+      marginLeft: "var(--spacing)"
     },
     "&$toBack": {
       flexDirection: "row-reverse",
       justifyContent: "flex-end",
-      [`& .${staticClasses$1.container}`]: {
+      "&>*": {
         "&:last-of-type": {
           marginLeft: 0
         },
@@ -36,14 +34,12 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
   },
   column: {
     flexDirection: "column",
-    [`& .${staticClasses$1.container}`]: {
-      "&:not(:first-of-type)": {
-        marginTop: "var(--spacing)"
-      }
+    "&>*:not(:first-of-type)": {
+      marginTop: "var(--spacing)"
     },
     "&$toBack": {
       flexDirection: "column-reverse",
-      [`& .${staticClasses$1.container}`]: {
+      "&>*": {
         "&:last-of-type": {
           marginTop: 0
         },
@@ -54,7 +50,7 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
     }
   },
   highlight: {
-    [`& .${staticClasses$1.container}:hover`]: {
+    "&>*:hover": {
       zIndex: theme.zIndices.popover
     }
   },

package/dist/BreadCrumb/BreadCrumb.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, isValidElement } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BreadCrumb.styles.js";
 import { staticClasses } from "./BreadCrumb.styles.js";
 import { pathWithSubMenu, removeExtension } from "./utils.js";
@@ -18,9 +18,11 @@ const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
     onClick,
     component,
     dropDownMenuProps,
+    separator,
     ...others
   } = useDefaultProps("HvBreadCrumb", props);
   const { classes, cx } = useClasses(classesProp);
+  const { activeTheme } = useTheme();
   const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
   let listPath = listRoute.slice();
   if (url != null) {
@@ -36,11 +38,13 @@ const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
     listPath,
     maxVisibleElem,
     onClick,
-    dropDownMenuProps
+    dropDownMenuProps,
+    activeTheme?.name === "pentahoPlus" ? 2 : 1
   ) : listPath;
   return /* @__PURE__ */ jsx("nav", { ref, id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsx("ol", { className: classes.orderedList, children: listPath.map((elem, index) => {
     const key = `key_${index}`;
     const isLast = index === breadcrumbPath.length - 1;
+    const isFirst = index === 0;
     return /* @__PURE__ */ jsx(
       HvPathElement,
       {
@@ -49,10 +53,19 @@ const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
           separatorContainer: classes.separatorContainer
         },
         last: isLast,
-        children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(HvTypography, { className: classes.currentPage, variant: "body", children: removeExtension(elem.label) }) || /* @__PURE__ */ jsx(
+        separator,
+        children: isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            className: classes.currentPage,
+            variant: "caption1",
+            children: removeExtension(elem.label)
+          }
+        ) || /* @__PURE__ */ jsx(
           HvBreadCrumbPage,
           {
             elem,
+            showHome: isFirst && activeTheme?.name === "pentahoPlus",
             classes: {
               a: classes.a,
               link: classes.link

package/dist/BreadCrumb/Page/Page.js

@@ -1,14 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { SvgBase } from "../../icons.js";
 import { useClasses } from "./Page.styles.js";
 import { staticClasses } from "./Page.styles.js";
+import { HvIconButton } from "../../IconButton/IconButton.js";
 import { HvTypography } from "../../Typography/Typography.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
+const HomeIcon = (props) => /* @__PURE__ */ jsx(SvgBase, { viewBox: "0 0 256 256", width: "16", height: "16", ...props, children: /* @__PURE__ */ jsx("path", { d: "M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z" }) });
 const HvBreadCrumbPage = (props) => {
   const {
     component,
     onClick,
     elem,
+    showHome,
     classes: classesProp
   } = useDefaultProps("HvBreadCrumbPage", props);
   const { classes, cx } = useClasses(classesProp);
@@ -17,11 +21,20 @@ const HvBreadCrumbPage = (props) => {
     event.preventDefault();
     onClick?.(event, elem);
   };
-  return /* @__PURE__ */ jsx(
+  return showHome ? /* @__PURE__ */ jsx(
+    HvIconButton,
+    {
+      title: elem.label,
+      component: component || "a",
+      href: elem.path,
+      onClick: onClick && handleClick,
+      children: /* @__PURE__ */ jsx(HomeIcon, {})
+    }
+  ) : /* @__PURE__ */ jsx(
     HvTypography,
     {
       noWrap: true,
-      variant: "label",
+      variant: "captionLabel",
       component: component || "a",
       href: elem.path,
       onClick: onClick && handleClick,

package/dist/BreadCrumb/PathElement/PathElement.js

@@ -5,20 +5,13 @@ import { staticClasses } from "./PathElement.styles.js";
 const HvPathElement = ({
   classes: classesProp,
   last = false,
+  separator,
   children
 }) => {
   const { classes } = useClasses(classesProp);
   return /* @__PURE__ */ jsxs("li", { className: classes.centerContainer, children: [
     children,
-    !last && /* @__PURE__ */ jsx(
-      HvIcon,
-      {
-        name: "CaretRight",
-        size: "xs",
-        className: classes.separatorContainer,
-        color: "textDisabled"
-      }
-    )
+    !last && /* @__PURE__ */ jsx("div", { className: classes.separatorContainer, children: separator || /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs", color: "textDisabled" }) })
   ] });
 };
 export {

package/dist/BreadCrumb/utils.js

@@ -2,15 +2,18 @@ import { jsx } from "react/jsx-runtime";
 import { HvIcon } from "../icons.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
 const removeExtension = (label) => label.includes(".") ? label.slice(0, label.lastIndexOf(".")) : label;
-const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps) => {
+const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps, moreOptionsPosition = 1) => {
   const nbrElemToSubMenu = listRoute.length - maxVisible;
-  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);
+  const subMenuList = listRoute.slice(
+    1,
+    nbrElemToSubMenu + moreOptionsPosition
+  );
   const handleClick = (event, data) => {
     event.preventDefault();
     onClick?.(event, data);
   };
   listRoute.splice(
-    1,
+    moreOptionsPosition,
     nbrElemToSubMenu,
     /* @__PURE__ */ jsx(
       HvDropDownMenu,

package/dist/Pagination/Pagination.js

@@ -9,12 +9,11 @@ import { useClasses } from "./Pagination.styles.js";
 import { staticClasses } from "./Pagination.styles.js";
 import HvSelect, { Option } from "./Select.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
-import { HvTypography } from "../Typography/Typography.js";
 import { HvBaseInput } from "../BaseInput/BaseInput.js";
 const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
 const DEFAULT_LABELS = {
   /** The show label. */
-  pageSizePrev: "Show",
+  pageSizePrev: "",
   /** Indicate the units of the page size selection. */
   pageSizeEntryName: "rows",
   /** Used for the aria-label of the selection of number of unit.s */
@@ -36,15 +35,14 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
   const {
     classes: classesProp,
     className,
-    id,
     pages = 1,
     page = 0,
     showPageSizeOptions = true,
     pageSizeOptions = defaultPageSizeOptions,
     pageSize = defaultPageSizeOptions[1],
     showPageJump = true,
-    canPrevious = false,
-    canNext = false,
+    canPrevious,
+    canNext,
     onPageChange,
     onPageSizeChange,
     labels: labelsProp,
@@ -56,7 +54,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const muiTheme = useTheme();
-  const isXsDown = useMediaQuery(muiTheme.breakpoints.down("xs"));
+  const isXsDown = useMediaQuery(muiTheme.breakpoints.only("xs"));
   const [pageInput, setPageInput] = useState(page);
   const changePage = useCallback(
     (newPage) => {
@@ -97,14 +95,14 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
       ...currentPageInputProps
     }
   );
-  return /* @__PURE__ */ jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
-    /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
-      !isXsDown && /* @__PURE__ */ jsx("span", { className: classes?.pageSizeTextContainer, children: labels?.pageSizePrev }),
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
+    showPageSizeOptions && /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isXsDown && labels.pageSizePrev && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels.pageSizePrev }),
       /* @__PURE__ */ jsx(
         HvSelect,
         {
           disabled: pageSize === 0,
-          "aria-label": labels?.pageSizeSelectorDescription,
+          "aria-label": labels.pageSizeSelectorDescription,
           onChange: (evt, val) => onPageSizeChange?.(val),
           value: pageSize,
           classes: {
@@ -114,7 +112,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
           children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
         }
       ),
-      !isXsDown && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels?.pageSizeEntryName })
+      !isXsDown && labels.pageSizeEntryName && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels.pageSizeEntryName })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
       /* @__PURE__ */ jsx(
@@ -139,7 +137,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
       ),
       /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
         showPageJump ? renderPageJump() : /* @__PURE__ */ jsx("span", { children: `${page + 1}` }),
-        /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
+        /* @__PURE__ */ jsx("span", { children: `${labels?.pagesSeparator} ` }),
         /* @__PURE__ */ jsx("span", { children: pages })
       ] }),
       /* @__PURE__ */ jsx(