@hitachivantara/uikit-react-core 5.106.2 → 5.107.0

package/dist/cjs/ActionBar/ActionBar.styles.cjs

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvActionBar
   root: {
     width: "100%",
     padding: uikitStyles.theme.space.sm,
-    borderTop: `1px solid ${uikitStyles.theme.colors.border}`,
+    borderTop: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/cjs/Pagination/Pagination.cjs

@@ -10,9 +10,9 @@ const icons = require("../icons.cjs");
 const setId = require("../utils/setId.cjs");
 const Pagination_styles = require("./Pagination.styles.cjs");
 const Select = require("./Select.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
-const Input = require("../Input/Input.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const BaseInput = require("../BaseInput/BaseInput.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
 const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
@@ -86,64 +86,53 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
   React.useEffect(() => {
     setPageInput(page);
   }, [page]);
-  const renderPageJump = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Input.HvInput,
+  const renderPageJump = () => /* @__PURE__ */ jsxRuntime.jsx(
+    BaseInput.HvBaseInput,
     {
       id: setId.setId(id, "currentPage"),
-      labels,
       inputProps: {
         "aria-label": labels?.paginationInputLabel,
         // We really want the native number input
         type: "number"
       },
       classes: {
-        root: classes?.pageSizeInputContainer,
-        input: classes?.pageSizeInput,
-        inputRoot: classes?.pageSizeInputRoot
+        root: cx(
+          classes.pageJump,
+          classes.pageSizeInputRoot,
+          classes.pageSizeInputContainer
+        ),
+        input: classes.pageSizeInput
       },
       value: String(pageInput + 1),
       onChange: (event, value) => setPageInput(Number(value) - 1),
-      onBlur: (evt, value) => changePage(Math.round(Number(value)) - 1),
-      onEnter: (evt, value) => changePage(Math.round(Number(value)) - 1),
+      onBlur: (evt) => changePage(Math.round(Number(evt.target.value)) - 1),
+      onKeyDown: (evt) => {
+        if (evt.key !== "Enter") return;
+        changePage(Math.round(Number(evt.currentTarget.value)) - 1);
+      },
       disabled: pageSize === 0,
-      disableClear: true,
       ...currentPageInputProps
     }
-  ) });
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      !isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
-        Typography.HvTypography,
-        {
-          component: "span",
-          className: classes?.pageSizeTextContainer,
-          children: labels?.pageSizePrev
-        }
-      ),
+      !isXsDown && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes?.pageSizeTextContainer, children: labels?.pageSizePrev }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Select.default,
         {
           id: setId.setId(id, "pageSize"),
           disabled: pageSize === 0,
-          className: classes.pageSizeOptionsSelect,
           "aria-label": labels?.pageSizeSelectorDescription,
-          onChange: (_, val) => onPageSizeChange?.(val),
+          onChange: (evt, val) => onPageSizeChange?.(val),
           value: pageSize,
           classes: {
             header: classes.pageSizeHeader,
-            root: classes.pageSizeRoot
+            root: cx(classes.pageSizeOptionsSelect, classes.pageSizeRoot)
           },
           children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Option, { value: option, children: option }, option))
         }
       ),
-      !isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
-        Typography.HvTypography,
-        {
-          component: "span",
-          className: classes.pageSizeTextContainer,
-          children: labels?.pageSizeEntryName
-        }
-      )
+      !isXsDown && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.pageSizeTextContainer, children: labels?.pageSizeEntryName })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -169,17 +158,9 @@ const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageInfo, children: [
-        showPageJump ? renderPageJump() : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
+        showPageJump ? renderPageJump() : /* @__PURE__ */ jsxRuntime.jsx("span", { children: `${page + 1}` }),
         /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Typography.HvTypography,
-          {
-            component: "span",
-            id: setId.setId(id, "totalPages"),
-            className: classes.totalPagesTextContainer,
-            children: pages
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.totalPagesTextContainer, children: pages })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         IconButton.HvIconButton,

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -4,7 +4,6 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
-const Input_styles = require("../Input/Input.styles.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {
@@ -15,24 +14,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
     alignItems: "stretch",
     flexWrap: "wrap",
     marginTop: uikitStyles.theme.space.sm,
-    [`& $pageSizeInput`]: {
-      ...uikitStyles.theme.typography.caption2,
-      "&:focus": {
-        padding: 0
-      }
-    },
-    [`& $pageSizeInputContainer`]: {
-      width: 24,
-      minWidth: 24,
-      maxWidth: uikitStyles.theme.spacing(8)
-    },
-    [`&& $pageSizeInputRoot`]: {
-      backgroundColor: "transparent",
-      height: "24px",
-      "&:focus, &:focus-within, &:hover": {
-        backgroundColor: uikitStyles.theme.colors.bgHover
-      }
-    }
+    ...uikitStyles.theme.typography.caption2
   },
   /** Styles applied to the page size selector container. */
   pageSizeOptions: {
@@ -60,6 +42,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
     }
   },
   pageSizeRoot: {
+    display: "inline-block",
     width: "auto"
   },
   /** Styles applied to the element that holds the labels for the page size selector */
@@ -68,18 +51,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
     alignItems: "center",
     justifyContent: "center",
     height: "24px",
-    padding: "8px 0",
-    ...uikitStyles.theme.typography.caption2
-  },
-  totalPagesTextContainer: {
-    ...uikitStyles.theme.typography.caption2
-  },
-  /** Styles applied to the page size selector dropdown element. */
-  pageSizeOptionsSelect: {
-    display: "inline-block",
-    width: "auto",
-    ...uikitStyles.theme.typography.caption2
+    padding: "8px 0"
   },
+  /** @deprecated unused */
+  totalPagesTextContainer: {},
+  /** Styles applied to the page size selector dropdown element. @deprecated use `classes.pageSizeRoot` instead. */
+  pageSizeOptionsSelect: {},
   /** Styles applied to the page navigation container. */
   pageNavigator: {
     display: "flex",
@@ -102,30 +79,39 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
   },
   /** Styles applied to the page selector input container. */
   pageJump: {
-    display: "inline-block",
-    marginRight: `4px`,
-    [`& .${Input_styles.staticClasses.inputRoot}`]: {
-      [`& $pageSizeInput`]: {
-        paddingLeft: `4px`,
-        paddingRight: `4px`,
-        margin: 0,
-        textAlign: "center",
-        borderRadius: uikitStyles.theme.radii.base,
-        MozAppearance: "textfield",
-        "&:focus": {
-          backgroundColor: uikitStyles.theme.colors.bgHover
-        },
-        "&:hover": {
-          cursor: "pointer"
-        }
-      }
+    marginRight: 4,
+    width: 24,
+    minWidth: 24,
+    maxWidth: uikitStyles.theme.spacing(8),
+    backgroundColor: "transparent",
+    height: "24px",
+    "&:focus, &:focus-within, &:hover": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
+    },
+    "&, & $pageSizeInput": {
+      fontSize: "inherit",
+      lineHeight: "inherit"
     }
   },
   /** Styles passed down to the page selector Input component as `input`. */
-  pageSizeInput: {},
-  /** Styles passed down to the page selector Input root. */
+  pageSizeInput: {
+    paddingLeft: 4,
+    paddingRight: 4,
+    margin: 0,
+    textAlign: "center",
+    borderRadius: uikitStyles.theme.radii.base,
+    MozAppearance: "textfield",
+    "&:focus": {
+      padding: 0,
+      backgroundColor: uikitStyles.theme.colors.bgHover
+    },
+    "&:hover": {
+      cursor: "pointer"
+    }
+  },
+  /** Styles passed down to the page selector Input root. @deprecated use `classes.pageJump` instead. */
   pageSizeInputRoot: {},
-  /** Styles passed down to the page selector Input component as `container`. */
+  /** Styles passed down to the page selector Input component as `container`. @deprecated use `classes.pageJump` instead. */
   pageSizeInputContainer: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Select/Select.cjs

@@ -20,7 +20,6 @@ const ListContainer = require("../ListContainer/ListContainer.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 function defaultRenderValue(options) {
   if (Array.isArray(options)) {
-    if (options.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((o) => o.label).join(", ") });
   }
   return options?.label ?? null;
@@ -46,6 +45,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
     defaultOpen,
     multiple,
     autoComplete,
+    renderValue: renderValueProp,
     options: optionsProp,
     variableWidth,
     value: valueProp,
@@ -96,6 +96,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
     onChange,
     onOpenChange: handleOpenChange
   });
+  const renderValue = renderValueProp ?? defaultRenderValue;
   const id = useUniqueId.useUniqueId(idProp);
   const labelId = useUniqueId.useUniqueId(setId.setId(idProp, "label"));
   const descriptionId = useUniqueId.useUniqueId(setId.setId(idProp, "description"));
@@ -172,7 +173,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
               [descriptionId]: description
             }),
             ...getButtonProps(),
-            children: defaultRenderValue(actualValue) ?? placeholder
+            children: renderValue(actualValue) ?? placeholder
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/StatusIcon/StatusIcon.cjs

@@ -56,8 +56,8 @@ const pentahoIconsMap = {
     ] })
   },
   info: {
-    regular: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" }),
-    fill: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z" }),
+    regular: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" }),
+    fill: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z" }),
     duotone: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -66,7 +66,7 @@ const pentahoIconsMap = {
           opacity: "0.2"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" })
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z" })
     ] })
   }
 };

package/dist/cjs/providers/ThemeProvider.cjs

@@ -59,7 +59,7 @@ const HvThemeProvider = ({
     ]
   );
   const muiTheme = React.useMemo(() => {
-    const colors = activeTheme.colors.modes[colorMode];
+    const colors = activeTheme.colors.modes[selectedMode];
     return styles.createTheme({
       spacing: activeTheme.space.base,
       typography: {
@@ -99,7 +99,7 @@ const HvThemeProvider = ({
       },
       breakpoints: activeTheme.breakpoints
     });
-  }, [activeTheme, colorMode]);
+  }, [activeTheme, selectedMode]);
   const emotionCacheValue = React.useMemo(
     () => ({ cache: emotionCache }),
     [emotionCache]

package/dist/cjs/themes/ds3.cjs

@@ -786,20 +786,19 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
     HvPagination: {
       classes: {
         root: {
-          [`& .HvPagination-pageSizeInput`]: {
-            ...uikitStyles.theme.typography.label,
-            "&:focus": {
-              padding: "unset"
-            }
-          },
-          [`& .HvPagination-pageSizeInputContainer`]: {
-            width: 40,
-            minWidth: 40
-          },
-          [`&& .HvPagination-pageSizeInputRoot`]: {
-            height: 32
+          ...uikitStyles.theme.typography.body
+        },
+        pageSizeInput: {
+          ...uikitStyles.theme.typography.label,
+          "&:focus": {
+            padding: "unset"
           }
         },
+        pageJump: {
+          width: 40,
+          minWidth: 40,
+          height: 32
+        },
         icon: {
           fontSize: 16
         },
@@ -807,20 +806,10 @@ const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, {
           height: 32
         },
         pageSizeHeader: {
-          height: "unset",
-          [`& .HvBaseDropdown-arrowContainer`]: {
-            marginTop: 0
-          }
+          height: "unset"
         },
         pageSizeTextContainer: {
-          height: 32,
-          ...uikitStyles.theme.typography.body
-        },
-        pageSizeOptionsSelect: {
-          ...uikitStyles.theme.typography.body
-        },
-        totalPagesTextContainer: {
-          ...uikitStyles.theme.typography.body
+          height: 32
         },
         pageNavigator: {
           alignItems: "stretch"

package/dist/cjs/themes/pentahoPlus.cjs

@@ -21,6 +21,18 @@ const popperStyles = {
   boxShadow: `0px 0px 6px 0px rgba(65, 65, 65, 0.08)`
 };
 const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
+  icons: {
+    viewBox: "0 0 256 256",
+    // Semantic icons
+    Success: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z",
+    Caution: "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z",
+    Fail: "M128,72a8,8,0,0,1,8,8v56a8,8,0,0,1-16,0V80A8,8,0,0,1,128,72ZM116,172a12,12,0,1,0,12-12A12,12,0,0,0,116,172Zm124-44a15.85,15.85,0,0,1-4.67,11.28l-96.05,96.06a16,16,0,0,1-22.56,0h0l-96-96.06a16,16,0,0,1,0-22.56l96.05-96.06a16,16,0,0,1,22.56,0l96.05,96.06A15.85,15.85,0,0,1,240,128Zm-16,0L128,32,32,128,128,224h0Z",
+    Info: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z",
+    Start: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z",
+    Backwards: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z",
+    Forwards: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z",
+    End: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
+  },
   components: {
     HvLoading: {
       classes: {
@@ -539,6 +551,16 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         }
       }
     },
+    HvPagination: {
+      classes: {
+        root: {
+          ...uikitStyles.theme.typography.caption1
+        },
+        icon: {
+          fontSize: 16
+        }
+      }
+    },
     HvHeader: {
       classes: {
         root: {
@@ -684,6 +706,9 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
               display: "none"
             }
           },
+          "& .MuiCardContent-root:last-child": {
+            paddingBottom: 0
+          },
           "& > :last-child:not(.HvCardMedia-root)": {
             paddingBottom: uikitStyles.theme.space.sm
           },

package/dist/esm/ActionBar/ActionBar.styles.js

@@ -4,7 +4,7 @@ const { staticClasses, useClasses } = createClasses("HvActionBar", {
   root: {
     width: "100%",
     padding: theme.space.sm,
-    borderTop: `1px solid ${theme.colors.border}`,
+    borderTop: `1px solid ${theme.colors.borderSubtle}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/esm/Pagination/Pagination.js

@@ -9,9 +9,9 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./Pagination.styles.js";
 import { staticClasses } from "./Pagination.styles.js";
 import HvSelect, { Option } from "./Select.js";
-import { HvTypography } from "../Typography/Typography.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
-import { HvInput } from "../Input/Input.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. */
@@ -83,64 +83,53 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
   useEffect(() => {
     setPageInput(page);
   }, [page]);
-  const renderPageJump = () => /* @__PURE__ */ jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsx(
-    HvInput,
+  const renderPageJump = () => /* @__PURE__ */ jsx(
+    HvBaseInput,
     {
       id: setId(id, "currentPage"),
-      labels,
       inputProps: {
         "aria-label": labels?.paginationInputLabel,
         // We really want the native number input
         type: "number"
       },
       classes: {
-        root: classes?.pageSizeInputContainer,
-        input: classes?.pageSizeInput,
-        inputRoot: classes?.pageSizeInputRoot
+        root: cx(
+          classes.pageJump,
+          classes.pageSizeInputRoot,
+          classes.pageSizeInputContainer
+        ),
+        input: classes.pageSizeInput
       },
       value: String(pageInput + 1),
       onChange: (event, value) => setPageInput(Number(value) - 1),
-      onBlur: (evt, value) => changePage(Math.round(Number(value)) - 1),
-      onEnter: (evt, value) => changePage(Math.round(Number(value)) - 1),
+      onBlur: (evt) => changePage(Math.round(Number(evt.target.value)) - 1),
+      onKeyDown: (evt) => {
+        if (evt.key !== "Enter") return;
+        changePage(Math.round(Number(evt.currentTarget.value)) - 1);
+      },
       disabled: pageSize === 0,
-      disableClear: true,
       ...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(
-        HvTypography,
-        {
-          component: "span",
-          className: classes?.pageSizeTextContainer,
-          children: labels?.pageSizePrev
-        }
-      ),
+      !isXsDown && /* @__PURE__ */ jsx("span", { className: classes?.pageSizeTextContainer, children: labels?.pageSizePrev }),
       /* @__PURE__ */ jsx(
         HvSelect,
         {
           id: setId(id, "pageSize"),
           disabled: pageSize === 0,
-          className: classes.pageSizeOptionsSelect,
           "aria-label": labels?.pageSizeSelectorDescription,
-          onChange: (_, val) => onPageSizeChange?.(val),
+          onChange: (evt, val) => onPageSizeChange?.(val),
           value: pageSize,
           classes: {
             header: classes.pageSizeHeader,
-            root: classes.pageSizeRoot
+            root: cx(classes.pageSizeOptionsSelect, classes.pageSizeRoot)
           },
           children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
         }
       ),
-      !isXsDown && /* @__PURE__ */ jsx(
-        HvTypography,
-        {
-          component: "span",
-          className: classes.pageSizeTextContainer,
-          children: labels?.pageSizeEntryName
-        }
-      )
+      !isXsDown && /* @__PURE__ */ jsx("span", { className: classes.pageSizeTextContainer, children: labels?.pageSizeEntryName })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
       /* @__PURE__ */ jsx(
@@ -166,17 +155,9 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
-        showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
+        showPageJump ? renderPageJump() : /* @__PURE__ */ jsx("span", { children: `${page + 1}` }),
         /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
-        /* @__PURE__ */ jsx(
-          HvTypography,
-          {
-            component: "span",
-            id: setId(id, "totalPages"),
-            className: classes.totalPagesTextContainer,
-            children: pages
-          }
-        )
+        /* @__PURE__ */ jsx("span", { className: classes.totalPagesTextContainer, children: pages })
       ] }),
       /* @__PURE__ */ jsx(
         HvIconButton,

package/dist/esm/Pagination/Pagination.styles.js

@@ -1,8 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$2 } from "../BaseDropdown/BaseDropdown.styles.js";
+import { staticClasses as staticClasses$1 } from "../BaseDropdown/BaseDropdown.styles.js";
 import "../BaseDropdown/BaseDropdown.js";
-import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
 const { staticClasses, useClasses } = createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {
@@ -13,24 +12,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
     alignItems: "stretch",
     flexWrap: "wrap",
     marginTop: theme.space.sm,
-    [`& $pageSizeInput`]: {
-      ...theme.typography.caption2,
-      "&:focus": {
-        padding: 0
-      }
-    },
-    [`& $pageSizeInputContainer`]: {
-      width: 24,
-      minWidth: 24,
-      maxWidth: theme.spacing(8)
-    },
-    [`&& $pageSizeInputRoot`]: {
-      backgroundColor: "transparent",
-      height: "24px",
-      "&:focus, &:focus-within, &:hover": {
-        backgroundColor: theme.colors.bgHover
-      }
-    }
+    ...theme.typography.caption2
   },
   /** Styles applied to the page size selector container. */
   pageSizeOptions: {
@@ -46,7 +28,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
     height: 24,
     display: "flex",
     alignItems: "center",
-    [`& .${staticClasses$2.arrowContainer}`]: {
+    [`& .${staticClasses$1.arrowContainer}`]: {
       display: "flex",
       alignItems: "center",
       top: "unset",
@@ -58,6 +40,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
     }
   },
   pageSizeRoot: {
+    display: "inline-block",
     width: "auto"
   },
   /** Styles applied to the element that holds the labels for the page size selector */
@@ -66,18 +49,12 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
     alignItems: "center",
     justifyContent: "center",
     height: "24px",
-    padding: "8px 0",
-    ...theme.typography.caption2
-  },
-  totalPagesTextContainer: {
-    ...theme.typography.caption2
-  },
-  /** Styles applied to the page size selector dropdown element. */
-  pageSizeOptionsSelect: {
-    display: "inline-block",
-    width: "auto",
-    ...theme.typography.caption2
+    padding: "8px 0"
   },
+  /** @deprecated unused */
+  totalPagesTextContainer: {},
+  /** Styles applied to the page size selector dropdown element. @deprecated use `classes.pageSizeRoot` instead. */
+  pageSizeOptionsSelect: {},
   /** Styles applied to the page navigation container. */
   pageNavigator: {
     display: "flex",
@@ -100,30 +77,39 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
   },
   /** Styles applied to the page selector input container. */
   pageJump: {
-    display: "inline-block",
-    marginRight: `4px`,
-    [`& .${staticClasses$1.inputRoot}`]: {
-      [`& $pageSizeInput`]: {
-        paddingLeft: `4px`,
-        paddingRight: `4px`,
-        margin: 0,
-        textAlign: "center",
-        borderRadius: theme.radii.base,
-        MozAppearance: "textfield",
-        "&:focus": {
-          backgroundColor: theme.colors.bgHover
-        },
-        "&:hover": {
-          cursor: "pointer"
-        }
-      }
+    marginRight: 4,
+    width: 24,
+    minWidth: 24,
+    maxWidth: theme.spacing(8),
+    backgroundColor: "transparent",
+    height: "24px",
+    "&:focus, &:focus-within, &:hover": {
+      backgroundColor: theme.colors.bgHover
+    },
+    "&, & $pageSizeInput": {
+      fontSize: "inherit",
+      lineHeight: "inherit"
     }
   },
   /** Styles passed down to the page selector Input component as `input`. */
-  pageSizeInput: {},
-  /** Styles passed down to the page selector Input root. */
+  pageSizeInput: {
+    paddingLeft: 4,
+    paddingRight: 4,
+    margin: 0,
+    textAlign: "center",
+    borderRadius: theme.radii.base,
+    MozAppearance: "textfield",
+    "&:focus": {
+      padding: 0,
+      backgroundColor: theme.colors.bgHover
+    },
+    "&:hover": {
+      cursor: "pointer"
+    }
+  },
+  /** Styles passed down to the page selector Input root. @deprecated use `classes.pageJump` instead. */
   pageSizeInputRoot: {},
-  /** Styles passed down to the page selector Input component as `container`. */
+  /** Styles passed down to the page selector Input component as `container`. @deprecated use `classes.pageJump` instead. */
   pageSizeInputContainer: {}
 });
 export {

package/dist/esm/Select/Select.js

@@ -19,7 +19,6 @@ import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 function defaultRenderValue(options) {
   if (Array.isArray(options)) {
-    if (options.length === 0) return null;
     return /* @__PURE__ */ jsx(Fragment, { children: options.map((o) => o.label).join(", ") });
   }
   return options?.label ?? null;
@@ -45,6 +44,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
     defaultOpen,
     multiple,
     autoComplete,
+    renderValue: renderValueProp,
     options: optionsProp,
     variableWidth,
     value: valueProp,
@@ -95,6 +95,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
     onChange,
     onOpenChange: handleOpenChange
   });
+  const renderValue = renderValueProp ?? defaultRenderValue;
   const id = useUniqueId(idProp);
   const labelId = useUniqueId(setId(idProp, "label"));
   const descriptionId = useUniqueId(setId(idProp, "description"));
@@ -171,7 +172,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
               [descriptionId]: description
             }),
             ...getButtonProps(),
-            children: defaultRenderValue(actualValue) ?? placeholder
+            children: renderValue(actualValue) ?? placeholder
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/esm/StatusIcon/StatusIcon.js

@@ -55,8 +55,8 @@ const pentahoIconsMap = {
     ] })
   },
   info: {
-    regular: /* @__PURE__ */ jsx("path", { d: "M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" }),
-    fill: /* @__PURE__ */ jsx("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z" }),
+    regular: /* @__PURE__ */ jsx("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z" }),
+    fill: /* @__PURE__ */ jsx("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z" }),
     duotone: /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "path",
@@ -65,7 +65,7 @@ const pentahoIconsMap = {
           opacity: "0.2"
         }
       ),
-      /* @__PURE__ */ jsx("path", { d: "M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" })
+      /* @__PURE__ */ jsx("path", { d: "M144,176a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176Zm88-48A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128ZM124,96a12,12,0,1,0-12-12A12,12,0,0,0,124,96Z" })
     ] })
   }
 };

package/dist/esm/providers/ThemeProvider.js

@@ -58,7 +58,7 @@ const HvThemeProvider = ({
     ]
   );
   const muiTheme = useMemo(() => {
-    const colors = activeTheme.colors.modes[colorMode];
+    const colors = activeTheme.colors.modes[selectedMode];
     return createTheme({
       spacing: activeTheme.space.base,
       typography: {
@@ -98,7 +98,7 @@ const HvThemeProvider = ({
       },
       breakpoints: activeTheme.breakpoints
     });
-  }, [activeTheme, colorMode]);
+  }, [activeTheme, selectedMode]);
   const emotionCacheValue = useMemo(
     () => ({ cache: emotionCache }),
     [emotionCache]

package/dist/esm/themes/ds3.js

@@ -784,20 +784,19 @@ const ds3 = mergeTheme(ds3$1, {
     HvPagination: {
       classes: {
         root: {
-          [`& .HvPagination-pageSizeInput`]: {
-            ...theme.typography.label,
-            "&:focus": {
-              padding: "unset"
-            }
-          },
-          [`& .HvPagination-pageSizeInputContainer`]: {
-            width: 40,
-            minWidth: 40
-          },
-          [`&& .HvPagination-pageSizeInputRoot`]: {
-            height: 32
+          ...theme.typography.body
+        },
+        pageSizeInput: {
+          ...theme.typography.label,
+          "&:focus": {
+            padding: "unset"
           }
         },
+        pageJump: {
+          width: 40,
+          minWidth: 40,
+          height: 32
+        },
         icon: {
           fontSize: 16
         },
@@ -805,20 +804,10 @@ const ds3 = mergeTheme(ds3$1, {
           height: 32
         },
         pageSizeHeader: {
-          height: "unset",
-          [`& .HvBaseDropdown-arrowContainer`]: {
-            marginTop: 0
-          }
+          height: "unset"
         },
         pageSizeTextContainer: {
-          height: 32,
-          ...theme.typography.body
-        },
-        pageSizeOptionsSelect: {
-          ...theme.typography.body
-        },
-        totalPagesTextContainer: {
-          ...theme.typography.body
+          height: 32
         },
         pageNavigator: {
           alignItems: "stretch"

package/dist/esm/themes/pentahoPlus.js

@@ -19,6 +19,18 @@ const popperStyles = {
   boxShadow: `0px 0px 6px 0px rgba(65, 65, 65, 0.08)`
 };
 const pentahoPlus = mergeTheme(pentahoPlus$1, {
+  icons: {
+    viewBox: "0 0 256 256",
+    // Semantic icons
+    Success: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z",
+    Caution: "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z",
+    Fail: "M128,72a8,8,0,0,1,8,8v56a8,8,0,0,1-16,0V80A8,8,0,0,1,128,72ZM116,172a12,12,0,1,0,12-12A12,12,0,0,0,116,172Zm124-44a15.85,15.85,0,0,1-4.67,11.28l-96.05,96.06a16,16,0,0,1-22.56,0h0l-96-96.06a16,16,0,0,1,0-22.56l96.05-96.06a16,16,0,0,1,22.56,0l96.05,96.06A15.85,15.85,0,0,1,240,128Zm-16,0L128,32,32,128,128,224h0Z",
+    Info: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z",
+    Start: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z",
+    Backwards: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z",
+    Forwards: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z",
+    End: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
+  },
   components: {
     HvLoading: {
       classes: {
@@ -537,6 +549,16 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         }
       }
     },
+    HvPagination: {
+      classes: {
+        root: {
+          ...theme.typography.caption1
+        },
+        icon: {
+          fontSize: 16
+        }
+      }
+    },
     HvHeader: {
       classes: {
         root: {
@@ -682,6 +704,9 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
               display: "none"
             }
           },
+          "& .MuiCardContent-root:last-child": {
+            paddingBottom: 0
+          },
           "& > :last-child:not(.HvCardMedia-root)": {
             paddingBottom: theme.space.sm
           },

package/dist/types/index.d.ts

@@ -71,6 +71,8 @@ import { ReducerTableState } from 'react-table';
 import { RefAttributes } from 'react';
 import { Renderer } from 'react-table';
 import { Row } from 'react-table';
+import { SelectOption } from '@mui/base/useOption';
+import { SelectValue } from '@mui/base/useSelect';
 import { SlideProps } from '@mui/material/Slide';
 import { SliderProps } from 'rc-slider';
 import { SliderRef } from 'rc-slider';
@@ -716,6 +718,16 @@ declare const DEFAULT_LABELS_3: {
 };
 
 declare const DEFAULT_LABELS_4: {
+    backwards: string;
+    forwards: string;
+};
+
+declare const DEFAULT_LABELS_5: {
+    recommendedColorsLabel: string;
+    customColorsLabel: string;
+};
+
+declare const DEFAULT_LABELS_6: {
     /** The label of the clear button. */
     clearButtonLabel: string;
     /** The label of the reveal password button. @deprecated unused */
@@ -728,16 +740,6 @@ declare const DEFAULT_LABELS_4: {
     searchButtonLabel: string;
 };
 
-declare const DEFAULT_LABELS_5: {
-    backwards: string;
-    forwards: string;
-};
-
-declare const DEFAULT_LABELS_6: {
-    recommendedColorsLabel: string;
-    customColorsLabel: string;
-};
-
 declare const DEFAULT_LABELS_7: {
     /** Label for overwrite the default header behavior. */
     select: string | undefined;
@@ -2292,7 +2294,7 @@ declare interface HvCarouselControlsProps extends HvBaseProps<HTMLDivElement>, P
     onPreviousClick?: React.MouseEventHandler<HTMLButtonElement>;
     onNextClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** Labels used on the component. */
-    labels?: Partial<typeof DEFAULT_LABELS_5>;
+    labels?: Partial<typeof DEFAULT_LABELS_4>;
 }
 
 export declare interface HvCarouselProps extends HvBaseProps<HTMLDivElement, "title" | "onChange"> {
@@ -2423,7 +2425,7 @@ export declare type HvCheckBoxClasses = ExtractNames<typeof useClasses_37>;
  */
 export declare const HvCheckBoxGroup: ForwardRefExoticComponent<HvCheckBoxGroupProps & RefAttributes<HTMLDivElement>>;
 
-export declare type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses_49>;
+export declare type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses_48>;
 
 export declare interface HvCheckBoxGroupProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
@@ -2559,7 +2561,7 @@ export { HvColorAny }
  */
 export declare const HvColorPicker: ForwardRefExoticComponent<HvColorPickerProps & RefAttributes<HTMLDivElement>>;
 
-export declare type HvColorPickerClasses = ExtractNames<typeof useClasses_50>;
+export declare type HvColorPickerClasses = ExtractNames<typeof useClasses_49>;
 
 export declare interface HvColorPickerProps {
     "aria-label"?: string;
@@ -2607,7 +2609,7 @@ export declare interface HvColorPickerProps {
     /** If `true`, the labels are shown. If `false`, they are not shown. */
     showLabels?: boolean;
     /** An object containing all the labels. */
-    labels?: Partial<typeof DEFAULT_LABELS_6>;
+    labels?: Partial<typeof DEFAULT_LABELS_5>;
     /** Icon type for the input's end adornment. */
     dropdownIcon?: "arrow" | "colorPicker";
     /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */
@@ -2676,7 +2678,7 @@ declare type HvColumnWithStrictAccessor<D extends object = Record<string, unknow
 /** The container enables you to center your content horizontally and bound it to a specific breakpoint. */
 export declare const HvContainer: ForwardRefExoticComponent<Omit<HvContainerProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare type HvContainerClasses = ExtractNames<typeof useClasses_51>;
+export declare type HvContainerClasses = ExtractNames<typeof useClasses_50>;
 
 export declare interface HvContainerProps extends Omit<ContainerProps, "classes"> {
     /**
@@ -2705,7 +2707,7 @@ export declare interface HvContainerProps extends Omit<ContainerProps, "classes"
 
 export declare const HvControls: (props: HvControlsProps) => JSX_2.Element;
 
-export declare type HvControlsClasses = ExtractNames<typeof useClasses_52>;
+export declare type HvControlsClasses = ExtractNames<typeof useClasses_51>;
 
 export declare interface HvControlsProps extends HvBaseProps {
     /**
@@ -4204,9 +4206,9 @@ export declare type HvInlineEditorProps<C extends React.ElementType = typeof HvI
  */
 export declare const HvInput: <InputElement extends HTMLElement = HTMLTextAreaElement | HTMLInputElement>(props: HvInputProps<InputElement> & RefAttributes<InputElement>) => React.ReactElement<any> | null;
 
-export declare type HvInputClasses = ExtractNames<typeof useClasses_47>;
+export declare type HvInputClasses = ExtractNames<typeof useClasses_57>;
 
-export declare type HvInputLabels = Partial<typeof DEFAULT_LABELS_4>;
+export declare type HvInputLabels = Partial<typeof DEFAULT_LABELS_6>;
 
 export declare interface HvInputProps<InputElement extends HTMLElement = HTMLInputElement | HTMLTextAreaElement> extends Omit<HvBaseInputProps, "onChange" | "onBlur" | "onFocus" | "onKeyDown"> {
     /** @inheritdoc */
@@ -4406,7 +4408,7 @@ export declare interface HvLabelProps extends HvTypographyProps<"label"> {
 
 export declare const HvLeftControl: ({ id, classes: classesProp, className, children, placeholder, onSearch, hideSearch, searchProps, ...others }: HvLeftControlProps) => JSX_2.Element;
 
-export declare type HvLeftControlClasses = ExtractNames<typeof useClasses_57>;
+export declare type HvLeftControlClasses = ExtractNames<typeof useClasses_56>;
 
 export declare interface HvLeftControlProps extends HvBaseProps {
     /** if `true` the hide sort by dropdown is not rendered */
@@ -4444,9 +4446,9 @@ export declare const HvList: (props: HvListProps) => JSX_2.Element | null;
 export declare type HvListClasses = ExtractNames<typeof useClasses_88>;
 
 /**
- * A <b>list</b> is any enumeration of a set of items.
- * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.
- * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.
+ * A **list** is any enumeration of a set of items.
+ * The simple list is for continuous **vertical indexes of text or icons+text**. The content of these lists must be simple: ideally simples fields.
+ * This pattern is ideal for **selections**. It should be used inside an `HvPanel`.
  */
 export declare const HvListContainer: ForwardRefExoticComponent<HvListContainerProps & RefAttributes<HTMLUListElement>>;
 
@@ -4772,7 +4774,7 @@ export declare interface HvOverflowTooltipProps extends HvBaseProps {
  */
 export declare const HvPagination: ForwardRefExoticComponent<HvPaginationProps & RefAttributes<HTMLDivElement>>;
 
-export declare type HvPaginationClasses = ExtractNames<typeof useClasses_48>;
+export declare type HvPaginationClasses = ExtractNames<typeof useClasses_47>;
 
 export declare type HvPaginationLabels = Partial<typeof DEFAULT_LABELS_3>;
 
@@ -4806,7 +4808,7 @@ export declare interface HvPaginationProps extends HvBaseProps {
     /** Other props to pagination component. */
     navigationProps?: React.HTMLAttributes<HTMLDivElement>;
     /** Extra properties passed to the input component representing the current pages. */
-    currentPageInputProps?: HvInputProps;
+    currentPageInputProps?: HvBaseInputProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvPaginationClasses;
 }
@@ -4939,7 +4941,7 @@ export declare interface HvProviderProps {
  * This component allows you to create conditions and group them using logical operators.
  * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.
  *
- * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.
+ * Take a look at the [usage page](https://pentaho.github.io/uikit-docs/master/components/query-builder) to learn more about this component.
  */
 export declare const HvQueryBuilder: (props: HvQueryBuilderProps) => JSX_2.Element;
 
@@ -5703,6 +5705,8 @@ export declare interface HvSelectProps<OptionValue extends {}, Multiple extends
     classes?: HvSelectClasses;
     placeholder?: React.ReactNode;
     autoComplete?: string;
+    /** Custom render function for rendering the selected value. */
+    renderValue?: (option: SelectValue<SelectOption<OptionValue>, Multiple>) => React.ReactNode;
     /** Whether the width of the select panel can vary independently. */
     variableWidth?: boolean;
     /**
@@ -6256,7 +6260,7 @@ export declare type HvTabClasses = ExtractNames<typeof useClasses_118>;
  * You can rely on these **elements** when your table doesn’t have many interactions or you need it to be very lightweight.
  *
  * For better data handling and **advanced features** we recommend the use of the utility hooks collection.
- * See the [Table Hooks documentation](https://lumada-design.github.io/uikit/master/?path=/docs/visualizations-table-table-hooks--docs) for more details.
+ * See the [Table Hooks documentation](https://pentaho.github.io/uikit-docs/master/components/table#usehvtable-hooks) for more details.
  */
 export declare const HvTable: ForwardRefExoticComponent<HvTableProps & RefAttributes<HTMLElement>>;
 
@@ -6300,7 +6304,7 @@ export declare const HvTableCell: ForwardRefExoticComponent<HvTableCellProps & R
 
 export declare type HvTableCellAlign = "center" | "inherit" | "justify" | "left" | "right";
 
-export declare type HvTableCellClasses = ExtractNames<typeof useClasses_53>;
+export declare type HvTableCellClasses = ExtractNames<typeof useClasses_52>;
 
 export declare interface HvTableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */
@@ -6339,7 +6343,7 @@ export declare type HvTableCellType = "body" | "footer" | "head";
 
 export declare type HvTableCellVariant = "checkbox" | "expand" | "actions" | "default" | "none";
 
-export declare type HvTableClasses = ExtractNames<typeof useClasses_56>;
+export declare type HvTableClasses = ExtractNames<typeof useClasses_55>;
 
 export declare type HvTableColumnConfig<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvColumnGroup<D, H> | HvColumnWithLooseAccessor<D, H> | HvColumnWithStrictAccessor<D, H>;
 
@@ -6385,7 +6389,7 @@ export declare type HvTableHeadClasses = ExtractNames<typeof useClasses_115>;
  */
 export declare const HvTableHeader: ForwardRefExoticComponent<HvTableHeaderProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableHeaderClasses = ExtractNames<typeof useClasses_55>;
+export declare type HvTableHeaderClasses = ExtractNames<typeof useClasses_54>;
 
 export declare interface HvTableHeaderProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, "align"> {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */
@@ -6526,7 +6530,7 @@ export declare interface HvTableProps extends React.TableHTMLAttributes<HTMLTabl
  */
 export declare const HvTableRow: ForwardRefExoticComponent<HvTableRowProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableRowClasses = ExtractNames<typeof useClasses_54>;
+export declare type HvTableRowClasses = ExtractNames<typeof useClasses_53>;
 
 export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement, "children"> {
     /** Content to be rendered */
@@ -9543,33 +9547,7 @@ declare const useClasses_46: (classesProp?: Partial<Record<"image" | "slide", st
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_47: (classesProp?: Partial<Record<"label" | "icon" | "input" | "root" | "error" | "description" | "adornmentButton" | "inputBorderContainer" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "labelContainer" | "adornmentsBox" | "iconClear" | "hasSuggestions" | "suggestionsContainer" | "suggestionList" | "inputExtension", string>>, addStatic?: boolean) => {
-    readonly classes: {
-        root: string;
-        labelContainer: string;
-        label: string;
-        description: string;
-        adornmentsBox: string;
-        icon: string;
-        adornmentButton: string;
-        iconClear: string;
-        hasSuggestions: string;
-        suggestionsContainer: string;
-        suggestionList: string;
-        inputExtension: string;
-        input: string;
-        inputRoot: string;
-        inputRootFocused: string;
-        inputRootDisabled: string;
-        inputRootMultiline: string;
-        inputBorderContainer: string;
-        error: string;
-    };
-    readonly css: any;
-    readonly cx: (...args: any) => string;
-};
-
-declare const useClasses_48: (classesProp?: Partial<Record<"icon" | "root" | "pageSizeOptions" | "pageSizeHeader" | "pageSizeRoot" | "pageSizeTextContainer" | "totalPagesTextContainer" | "pageSizeOptionsSelect" | "pageNavigator" | "iconContainer" | "pageInfo" | "pageJump" | "pageSizeInput" | "pageSizeInputRoot" | "pageSizeInputContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_47: (classesProp?: Partial<Record<"icon" | "root" | "pageSizeOptions" | "pageSizeHeader" | "pageSizeRoot" | "pageSizeTextContainer" | "totalPagesTextContainer" | "pageSizeOptionsSelect" | "pageNavigator" | "iconContainer" | "pageInfo" | "pageJump" | "pageSizeInput" | "pageSizeInputRoot" | "pageSizeInputContainer", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         pageSizeOptions: string;
@@ -9591,7 +9569,7 @@ declare const useClasses_48: (classesProp?: Partial<Record<"icon" | "root" | "pa
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_49: (classesProp?: Partial<Record<"vertical" | "horizontal" | "label" | "root" | "group" | "error" | "invalid" | "selectAll", string>>, addStatic?: boolean) => {
+declare const useClasses_48: (classesProp?: Partial<Record<"vertical" | "horizontal" | "label" | "root" | "group" | "error" | "invalid" | "selectAll", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         label: string;
@@ -9606,15 +9584,7 @@ declare const useClasses_49: (classesProp?: Partial<Record<"vertical" | "horizon
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_5: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
-    readonly classes: {
-        root: string;
-    };
-    readonly css: any;
-    readonly cx: (...args: any) => string;
-};
-
-declare const useClasses_50: (classesProp?: Partial<Record<"label" | "colorPicker" | "root" | "description" | "panel" | "labelContainer" | "headerColorValue" | "headerColorIcon" | "colorPickerIcon" | "recommendedColorsRoot" | "dropdownRootIconOnly" | "headerColorIconOnly" | "pickerFields", string>>, addStatic?: boolean) => {
+declare const useClasses_49: (classesProp?: Partial<Record<"label" | "colorPicker" | "root" | "description" | "panel" | "labelContainer" | "headerColorValue" | "headerColorIcon" | "colorPickerIcon" | "recommendedColorsRoot" | "dropdownRootIconOnly" | "headerColorIconOnly" | "pickerFields", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         labelContainer: string;
@@ -9634,7 +9604,15 @@ declare const useClasses_50: (classesProp?: Partial<Record<"label" | "colorPicke
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_51: (classesProp?: Partial<Record<"fixed" | "root" | "disableGutters" | "maxWidthXs" | "maxWidthSm" | "maxWidthMd" | "maxWidthLg" | "maxWidthXl", string>>, addStatic?: boolean) => {
+declare const useClasses_5: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    readonly classes: {
+        root: string;
+    };
+    readonly css: any;
+    readonly cx: (...args: any) => string;
+};
+
+declare const useClasses_50: (classesProp?: Partial<Record<"fixed" | "root" | "disableGutters" | "maxWidthXs" | "maxWidthSm" | "maxWidthMd" | "maxWidthLg" | "maxWidthXl", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         disableGutters: string;
@@ -9649,7 +9627,7 @@ declare const useClasses_51: (classesProp?: Partial<Record<"fixed" | "root" | "d
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_52: (classesProp?: Partial<Record<"section" | "root" | "rightSection" | "leftSection", string>>, addStatic?: boolean) => {
+declare const useClasses_51: (classesProp?: Partial<Record<"section" | "root" | "rightSection" | "leftSection", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         section: string;
@@ -9660,7 +9638,7 @@ declare const useClasses_52: (classesProp?: Partial<Record<"section" | "root" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_53: (classesProp?: Partial<Record<"body" | "footer" | "head" | "root" | "resizable" | "sorted" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "variantNone" | "variantCheckbox" | "variantActions" | "variantExpand" | "variantList" | "variantListHead" | "variantListactions" | "variantListcheckbox" | "stickyColumn" | "stickyColumnMostLeft" | "stickyColumnLeastRight" | "groupColumnMostLeft" | "groupColumnMostRight" | "resizing", string>>, addStatic?: boolean) => {
+declare const useClasses_52: (classesProp?: Partial<Record<"body" | "footer" | "head" | "root" | "resizable" | "sorted" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "variantNone" | "variantCheckbox" | "variantActions" | "variantExpand" | "variantList" | "variantListHead" | "variantListactions" | "variantListcheckbox" | "stickyColumn" | "stickyColumnMostLeft" | "stickyColumnLeastRight" | "groupColumnMostLeft" | "groupColumnMostRight" | "resizing", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         head: string;
@@ -9691,7 +9669,7 @@ declare const useClasses_53: (classesProp?: Partial<Record<"body" | "footer" | "
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_54: (classesProp?: Partial<Record<"body" | "expanded" | "footer" | "head" | "selected" | "root" | "variantList" | "variantListHead" | "striped" | "hover", string>>, addStatic?: boolean) => {
+declare const useClasses_53: (classesProp?: Partial<Record<"body" | "expanded" | "footer" | "head" | "selected" | "root" | "variantList" | "variantListHead" | "striped" | "hover", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         head: string;
@@ -9708,7 +9686,7 @@ declare const useClasses_54: (classesProp?: Partial<Record<"body" | "expanded" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_55: (classesProp?: Partial<Record<"body" | "resizer" | "footer" | "head" | "root" | "resizable" | "sorted" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "variantNone" | "variantCheckbox" | "variantActions" | "variantExpand" | "variantList" | "stickyColumn" | "stickyColumnMostLeft" | "stickyColumnLeastRight" | "groupColumnMostLeft" | "groupColumnMostRight" | "resizing" | "headerContent" | "headerText" | "headerParagraph" | "sortableHeaderText" | "sortable" | "sortButton" | "sortIcon" | "alignFlexLeft" | "alignFlexRight" | "alignFlexCenter" | "alignFlexJustify", string>>, addStatic?: boolean) => {
+declare const useClasses_54: (classesProp?: Partial<Record<"body" | "resizer" | "footer" | "head" | "root" | "resizable" | "sorted" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "variantNone" | "variantCheckbox" | "variantActions" | "variantExpand" | "variantList" | "stickyColumn" | "stickyColumnMostLeft" | "stickyColumnLeastRight" | "groupColumnMostLeft" | "groupColumnMostRight" | "resizing" | "headerContent" | "headerText" | "headerParagraph" | "sortableHeaderText" | "sortable" | "sortButton" | "sortIcon" | "alignFlexLeft" | "alignFlexRight" | "alignFlexCenter" | "alignFlexJustify", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         head: string;
@@ -9748,7 +9726,7 @@ declare const useClasses_55: (classesProp?: Partial<Record<"body" | "resizer" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_56: (classesProp?: Partial<Record<"root" | "stickyHeader" | "stickyColumns" | "listRow", string>>, addStatic?: boolean) => {
+declare const useClasses_55: (classesProp?: Partial<Record<"root" | "stickyHeader" | "stickyColumns" | "listRow", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         stickyHeader: string;
@@ -9759,9 +9737,35 @@ declare const useClasses_56: (classesProp?: Partial<Record<"root" | "stickyHeade
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_57: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_56: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    readonly classes: {
+        root: string;
+    };
+    readonly css: any;
+    readonly cx: (...args: any) => string;
+};
+
+declare const useClasses_57: (classesProp?: Partial<Record<"label" | "icon" | "input" | "root" | "error" | "description" | "adornmentButton" | "inputBorderContainer" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "labelContainer" | "adornmentsBox" | "iconClear" | "hasSuggestions" | "suggestionsContainer" | "suggestionList" | "inputExtension", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
+        labelContainer: string;
+        label: string;
+        description: string;
+        adornmentsBox: string;
+        icon: string;
+        adornmentButton: string;
+        iconClear: string;
+        hasSuggestions: string;
+        suggestionsContainer: string;
+        suggestionList: string;
+        inputExtension: string;
+        input: string;
+        inputRoot: string;
+        inputRootFocused: string;
+        inputRootDisabled: string;
+        inputRootMultiline: string;
+        inputBorderContainer: string;
+        error: string;
     };
     readonly css: any;
     readonly cx: (...args: any) => string;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.106.2",
+  "version": "5.107.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
-  "homepage": "https://github.com/lumada-design/hv-uikit-react",
+  "homepage": "https://github.com/pentaho/hv-uikit-react",
   "sideEffects": false,
   "keywords": [
     "hitachi-vantara",
@@ -15,12 +15,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/lumada-design/hv-uikit-react.git",
+    "url": "git+https://github.com/pentaho/hv-uikit-react.git",
     "directory": "packages/core"
   },
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/lumada-design/hv-uikit-react/issues"
+    "url": "https://github.com/pentaho/hv-uikit-react/issues"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
@@ -32,9 +32,9 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.5.7",
-    "@hitachivantara/uikit-react-utils": "^0.2.47",
-    "@hitachivantara/uikit-styles": "^5.52.0",
+    "@hitachivantara/uikit-react-shared": "^5.5.8",
+    "@hitachivantara/uikit-react-utils": "^0.2.48",
+    "@hitachivantara/uikit-styles": "^5.53.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@popperjs/core": "^2.11.8",
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "5d8b51e8fe0aa203dc0bd0f33c7dca13883a03a1",
+  "gitHead": "e34acd74656ecb0ad2c31d6afaed30a00d58a8ca",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",