@hitachivantara/uikit-react-core 6.0.0-next.1 → 6.0.0-next.3

package/dist/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/Button/Button.js

@@ -7,10 +7,10 @@ import { useClasses, getIconSizeStyles, getSizeStyles } from "./Button.styles.js
 import { staticClasses } from "./Button.styles.js";
 function parseVariant(variant) {
   if (variant === "semantic") return ["inherit", "ghost"];
-  if (variant === "secondary") return ["secondary", "subtle"];
+  if (variant === "secondary") return ["text", "subtle"];
   if (variant === "ghost") return ["primary", "ghost"];
   if (variant === "contained" || variant === "subtle") {
-    return ["secondary", variant];
+    return ["text", variant];
   }
   const result = variant.split(/(?=[A-Z])/);
   if (!result[1]) return [result[0], "contained"];

package/dist/CheckBox/CheckBox.js

@@ -138,6 +138,7 @@ const HvCheckBox = forwardRef(
         readOnly,
         className: cx(
           classes.root,
+          classes[labelPosition],
           { [classes.focusVisible]: !!(focusVisible && label) },
           className
         ),
@@ -145,7 +146,7 @@ const HvCheckBox = forwardRef(
           hasLabel ? /* @__PURE__ */ jsxs(
             "div",
             {
-              className: cx(classes.container, classes[labelPosition], {
+              className: cx(classes.container, {
                 [classes.invalidContainer]: isStateInvalid,
                 [classes.disabled]: disabled
               }),

package/dist/CheckBox/CheckBox.styles.js

@@ -14,13 +14,6 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     },
     ":where(:has($label)) $checkbox": {
       borderRadius: "inherit"
-    },
-    "&$left": {
-      flexDirection: "row-reverse",
-      justifyContent: "flex-end"
-    },
-    "&$right": {
-      flexDirection: "row"
     }
   },
   invalidContainer: {},
@@ -38,18 +31,24 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     verticalAlign: "middle",
     ...theme.typography.body,
     cursor: "pointer",
-    lineHeight: "32px"
+    lineHeight: "32px",
+    flex: 1
   },
   checked: {},
   indeterminate: {},
   semantic: {},
   left: {
-    "& .HvCheckBox-label": {
-      paddingLeft: theme.space.xs
+    "& $label": {
+      paddingLeft: theme.space.xs,
+      textAlign: "right"
+    },
+    "& $container": {
+      flexDirection: "row-reverse"
+      // justifyContent: "flex-end",
     }
   },
   right: {
-    "& .HvCheckBox-label": {
+    "& $label": {
       paddingRight: theme.space.xs
     }
   }

package/dist/Header/Actions/Actions.styles.js

@@ -1,16 +1,13 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { staticClasses as staticClasses$1 } from "../../Button/Button.styles.js";
 const { staticClasses, useClasses } = createClasses("HvHeaderActions", {
   root: {
     backgroundColor: "transparent",
     display: "flex",
     gap: theme.space.xs,
     alignItems: "center",
-    marginLeft: "auto",
-    [`& .${staticClasses$1?.root}`]: {
-      "&:hover": { backgroundColor: theme.colors.bgHover }
-    }
+    justifyContent: "flex-end",
+    marginLeft: "auto"
   }
 });
 export {

package/dist/Header/Header.js

@@ -19,7 +19,6 @@ const HvHeader = forwardRef(function HvHeader2(props, ref) {
       style: { position },
       className: cx(
         classes.root,
-        classes.backgroundColor,
         { [classes.fixed]: position === "fixed" },
         className
       ),

package/dist/Header/Header.styles.js

@@ -23,8 +23,7 @@ const { staticClasses, useClasses } = createClasses("HvHeader", {
       zIndex: 2
     }
   },
-  fixed: { position: "fixed", top: 0, left: "auto", right: 0 },
-  backgroundColor: {}
+  fixed: { position: "fixed", top: 0, left: "auto", right: 0 }
 });
 export {
   staticClasses,

package/dist/Input/Input.js

@@ -89,7 +89,7 @@ const HvInput = fixedForwardRef(function HvInput2(props, ref) {
   const inputRef = useRef(null);
   const forkedRef = useForkRef(ref, inputRef, inputRefProp);
   const suggestionsRef = useRef(null);
-  const [description, infoMessage] = activeTheme?.name === "pentaho" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
+  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
   const [focused, setFocused] = useState(false);
   const isDirty = useRef(false);
   const isEmptyValue = !inputRef.current?.value;

package/dist/OverflowTooltip/OverflowTooltip.js

@@ -5,7 +5,6 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./OverflowTooltip.styles.js";
 import { staticClasses } from "./OverflowTooltip.styles.js";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
-import { HvTypography } from "../Typography/Typography.js";
 const isParagraph = (children = "") => /\s/.test(children);
 const HvOverflowTooltip = (props) => {
   const {
@@ -74,7 +73,8 @@ const HvOverflowTooltip = (props) => {
       disableHoverListener: !isOverflowing,
       open,
       placement,
-      title: /* @__PURE__ */ jsx(HvTypography, { className: classes.tooltipData, variant: "body", children: data }),
+      classes: { tooltip: classes.tooltipData },
+      title: data,
       "aria-label": null,
       "aria-labelledby": null,
       ...tooltipsProps,

package/dist/Pagination/Pagination.js

@@ -8,9 +8,9 @@ import { HvIcon } from "../icons.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. */
@@ -74,46 +74,38 @@ 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,
     {
-      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: classes.pageJump,
+        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,
         {
           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,
@@ -122,14 +114,7 @@ const HvPagination = forwardRef(function HvPagination2(props, ref) {
           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(
@@ -153,16 +138,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",
-            className: classes.totalPagesTextContainer,
-            children: pages
-          }
-        )
+        /* @__PURE__ */ jsx("span", { children: pages })
       ] }),
       /* @__PURE__ */ jsx(
         HvIconButton,

package/dist/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,17 +49,7 @@ 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"
   },
   /** Styles applied to the page navigation container. */
   pageNavigator: {
@@ -100,31 +73,36 @@ 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. */
-  pageSizeInputRoot: {},
-  /** Styles passed down to the page selector Input component as `container`. */
-  pageSizeInputContainer: {}
+  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"
+    }
+  }
 });
 export {
   staticClasses,

package/dist/Radio/Radio.js

@@ -109,12 +109,12 @@ const HvRadio = forwardRef(
         disabled,
         required,
         readOnly,
-        className: cx(classes.root, className),
+        className: cx(classes.root, classes[labelPosition], className),
         children: [
           hasLabel ? /* @__PURE__ */ jsxs(
             "div",
             {
-              className: cx(classes.container, classes[labelPosition], {
+              className: cx(classes.container, {
                 [classes.focusVisible]: !!(focusVisible && label),
                 [classes.semantic]: semantic,
                 [classes.checked]: isChecked,

package/dist/Radio/Radio.styles.js

@@ -14,13 +14,6 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     },
     ":where(:has($label)) $radio": {
       borderRadius: "inherit"
-    },
-    "&$left": {
-      flexDirection: "row-reverse",
-      justifyContent: "flex-end"
-    },
-    "&$right": {
-      flexDirection: "row"
     }
   },
   invalidContainer: {},
@@ -38,17 +31,22 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     verticalAlign: "middle",
     ...theme.typography.body,
     cursor: "pointer",
-    lineHeight: "32px"
+    lineHeight: "32px",
+    flex: 1
   },
   checked: {},
   semantic: {},
   left: {
-    "& .HvRadio-label": {
-      paddingLeft: theme.space.xs
+    "& $label": {
+      paddingLeft: theme.space.xs,
+      textAlign: "right"
+    },
+    "& $container": {
+      flexDirection: "row-reverse"
     }
   },
   right: {
-    "& .HvRadio-label": {
+    "& $label": {
       paddingRight: theme.space.xs
     }
   }

package/dist/SearchInput/SearchInput.styles.js

@@ -1,7 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvSearchInput", {
-  root: { paddingLeft: theme.space.xs },
+  root: {},
   input: { marginLeft: 0 }
 });
 export {

package/dist/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/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" })
     ] })
   }
 };
@@ -89,7 +89,7 @@ const HvStatusIcon = forwardRef(function HvStatusIcon2(props, ref) {
       "data-type": type,
       "data-size": size,
       className: cx(classes.root, className),
-      children: activeTheme?.name === "pentaho" && !customIcon ? /* @__PURE__ */ jsx(HvIconContainer, { size, children: /* @__PURE__ */ jsx(SvgBase, { viewBox: "0 0 256 256", className: classes.icon, children: pentahoIconsMap[variant]?.[weight] }) }) : /* @__PURE__ */ jsx(HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsx(
+      children: activeTheme?.name === "pentahoPlus" && !customIcon ? /* @__PURE__ */ jsx(HvIconContainer, { size, children: /* @__PURE__ */ jsx(SvgBase, { viewBox: "0 0 256 256", className: classes.icon, children: pentahoIconsMap[variant]?.[weight] }) }) : /* @__PURE__ */ jsx(HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsx(
         HvIcon,
         {
           compact: true,

package/dist/StatusIcon/StatusIcon.styles.js

@@ -14,37 +14,32 @@ const { staticClasses, useClasses } = createClasses("HvStatusIcon", {
     lineHeight: 0,
     flexShrink: 0,
     padding: theme.space.xxs,
+    borderRadius: theme.radii.base,
     "--icsize": "auto",
-    [`&[data-size=xs]`]: { borderRadius: theme.radii.base },
-    [`&[data-size=sm]`]: { borderRadius: theme.radii.base },
-    [`&[data-size=md]`]: { borderRadius: theme.radii.round },
-    [`&[data-size=lg]`]: { borderRadius: theme.radii.large },
-    [`&[data-size=xl]`]: { borderRadius: theme.radii.large },
-    [`:not([data-type="simple"])`]: {
+    ":where([data-size=md])": { borderRadius: theme.radii.round },
+    ":where([data-size=lg])": { borderRadius: theme.radii.large },
+    ":where([data-size=xl])": { borderRadius: theme.radii.large },
+    ":where([data-type=full])": {
       outline: "1px solid currentcolor"
     },
     ...Object.fromEntries(
       Object.entries(notificationMap).map(([variant, color]) => [
-        [`&[data-variant="${variant}"]`],
+        [`:where([data-variant=${variant}])`],
         {
           color: theme.colors[color],
           outline: `1px solid ${theme.colors[`${color}Border`]}`,
           backgroundColor: theme.colors[`${color}Dimmed`],
-          [`&[data-type="simple"]`]: {
+          ":where([data-type=simple])": {
             outline: "none",
             backgroundColor: "transparent"
           }
         }
       ])
     ),
-    [`&[data-variant="default"]`]: {
+    ":where([data-variant=default][data-type=full])": {
       color: theme.colors.text,
       backgroundColor: theme.colors.bgPage,
-      outline: `1px solid ${theme.colors.borderSubtle}`,
-      [`&[data-type="simple"]`]: {
-        outline: "none",
-        backgroundColor: "transparent"
-      }
+      outline: `1px solid ${theme.colors.borderSubtle}`
     }
   },
   icon: {

package/dist/Tag/Tag.js

@@ -51,7 +51,7 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
     event.stopPropagation();
     onDelete?.(event);
   };
-  const color = activeTheme?.name === "pentaho" && colorMap[colorProp] || colorProp;
+  const color = activeTheme?.name === "pentahoPlus" && colorMap[colorProp] || colorProp;
   const tagColor = (
     // backwards-compatibility for `type` prop
     type === "categorical" && theme.alpha(color || "cat1", 0.2) || // use the palette color if it matches

package/dist/TextArea/TextArea.js

@@ -61,7 +61,7 @@ const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   const isDirty = useRef(false);
   const inputRef = useRef(null);
   const forkedRef = useForkRef(ref, inputRefProp, inputRef);
-  const [description, infoMessage] = activeTheme?.name === "pentaho" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
+  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
   const [focused, setFocused] = useState(false);
   const [autoScrolling, setAutoScrolling] = useState(autoScroll);
   const [validationState, setValidationState] = useControlled(

package/dist/icons.js

@@ -44,8 +44,8 @@ const defaultIconPathMap = {
   Add: "M16 8.5H8.5V16h-1V8.5H0v-1h7.5V0h1v7.5H16z",
   Close: "m8.7 8 5.3 5.3-.7.7L8 8.7 2.7 14l-.7-.7L7.3 8 2 2.7l.7-.7L8 7.3 13.3 2l.7.7z",
   Search: "M15.07 14.52 10.5 9.95a5.96 5.96 0 1 0-.72.7l4.58 4.58zM5.9 11A4.95 4.95 0 0 1 1 6v-.1A4.95 4.95 0 0 1 6 1h.1A4.95 4.95 0 0 1 11 6v.1A4.95 4.95 0 0 1 6 11z",
-  SortAsc: "M.08 6.07 6.5.01l6.42 6.06Zm0 0",
-  SortDesc: "M12.92 8.93 6.5 14.99.08 8.93Zm0 0",
+  SortAsc: "M10.24 7 6 11.24 1.76 7z",
+  SortDesc: "M1.76 5 6 .76 10.24 5z",
   Sort: "M10.24 7 6 11.24 1.76 7zM1.76 5 6 .76 10.24 5z",
   // single-use icons in Widgets
   Calendar: "M10.5 2V0h-1v2h-3V0h-1v2H0v14h16V2zM15 15H1V3h14zM3 6h2v2H3zm4 0h2v2H7zm4 0h2v2h-2zm-8 4h2v2H3zm4 0h2v2H7zm4 0h2v2h-2z",