@hitachivantara/uikit-react-core 5.106.2 → 5.108.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/SearchInput/SearchInput.styles.cjs

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSearchInput", {
-  root: { paddingLeft: uikitStyles.theme.space.xs },
+  root: {},
   input: { marginLeft: 0 }
 });
 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

@@ -15,12 +15,25 @@ const inputColors = {
   bg: ld("#FFFFFF", "#020617")
 };
 const popperStyles = {
+  margin: uikitStyles.theme.spacing("xxs", 0),
   backgroundColor: uikitStyles.theme.colors.bgContainer,
   border: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
   borderRadius: uikitStyles.theme.radii.large,
   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 +552,16 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         }
       }
     },
+    HvPagination: {
+      classes: {
+        root: {
+          ...uikitStyles.theme.typography.caption1
+        },
+        icon: {
+          fontSize: 16
+        }
+      }
+    },
     HvHeader: {
       classes: {
         root: {
@@ -684,6 +707,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
           },
@@ -838,6 +864,15 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
           borderRadius: uikitStyles.theme.radii.none
         }
       }
+    },
+    HvTooltip: {
+      classes: {
+        popper: {
+          "& .HvTooltip-tooltip": {
+            padding: uikitStyles.theme.spacing("xs", "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,