@hitachivantara/uikit-react-core 5.71.0 → 5.72.0

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -20,14 +20,7 @@ const HvDropdownButton = React.forwardRef((props, ref) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvDropdownButton", props);
   const { classes, cx } = DropdownButton_styles.useClasses(classesProp);
-  const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactIcons.DropDownXS,
-    {
-      iconSize: "XS",
-      style: { rotate: open ? "180deg" : void 0 },
-      className: classes.arrow
-    }
-  );
+  const endIcon = icon ? void 0 : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { iconSize: "XS", style: { rotate: open ? "180deg" : void 0 } });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Button.HvButton,
     {

package/dist/cjs/DropdownButton/DropdownButton.styles.cjs

@@ -56,9 +56,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownB
   placeholder: {},
   arrowContainer: {
     marginRight: uikitStyles.theme.spacing(-2)
-  },
-  arrow: {
-    transition: "rotate 0.2s ease"
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Typography/Typography.cjs

@@ -50,7 +50,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
     disabled = false,
     ...others
   } = uikitReactUtils.useDefaultProps("HvTypography", props);
-  const { classes, cx } = Typography_styles.useClasses(classesProp);
+  const { classes, css, cx } = Typography_styles.useClasses(classesProp);
   const { activeTheme } = uikitReactUtils.useTheme();
   const variant = utils.mapVariant(variantProp, activeTheme?.base);
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
@@ -59,6 +59,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
     {
       ref,
       className: cx(
+        css({ ...activeTheme?.typography[variant] }),
         classes.root,
         classes[variant],
         {

package/dist/cjs/Typography/Typography.styles.cjs

@@ -20,45 +20,44 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTypograph
     whiteSpace: "nowrap"
   },
   // variants
-  display: { ...uikitStyles.theme.typography.display },
-  title1: { ...uikitStyles.theme.typography.title1 },
-  title2: { ...uikitStyles.theme.typography.title2 },
-  title3: { ...uikitStyles.theme.typography.title3 },
-  title4: { ...uikitStyles.theme.typography.title4 },
-  body: { ...uikitStyles.theme.typography.body },
-  label: { ...uikitStyles.theme.typography.label },
-  captionLabel: { ...uikitStyles.theme.typography.captionLabel },
-  caption1: { ...uikitStyles.theme.typography.caption1 },
-  caption2: { ...uikitStyles.theme.typography.caption2 },
+  display: {},
+  title1: {},
+  title2: {},
+  title3: {},
+  title4: {},
+  body: {},
+  label: {},
+  captionLabel: {},
+  caption1: {},
+  caption2: {},
   // legacy variants
-  "5xlTitle": { ...uikitStyles.theme.typography["5xlTitle"] },
-  "4xlTitle": { ...uikitStyles.theme.typography["4xlTitle"] },
+  // TODO: remove (legacy or all variants) in v6 in favour of dynamic variants
+  "5xlTitle": {},
+  "4xlTitle": {},
   // @ts-ignore non-existent variant
-  "3xlTitle": { ...uikitStyles.theme.typography["3xlTitle"] },
-  xxlTitle: { ...uikitStyles.theme.typography.xxlTitle },
+  "3xlTitle": {},
+  xxlTitle: {},
   xlTitle: {},
-  lTitle: { ...uikitStyles.theme.typography.lTitle },
+  lTitle: {},
   mTitle: {},
-  sTitle: { ...uikitStyles.theme.typography.sTitle },
+  sTitle: {},
   xsTitle: {},
-  xxsTitle: { ...uikitStyles.theme.typography.xxsTitle },
+  xxsTitle: {},
   sectionTitle: {
-    ...uikitStyles.theme.typography.sectionTitle,
     textTransform: "uppercase"
   },
   highlightText: {},
   normalText: {},
-  placeholderText: { ...uikitStyles.theme.typography.placeholderText },
+  placeholderText: {},
   link: {
-    ...uikitStyles.theme.typography.link,
     cursor: "pointer",
     textDecoration: "underline"
   },
-  disabledText: { ...uikitStyles.theme.typography.disabledText },
-  selectedNavText: { ...uikitStyles.theme.typography.selectedNavText },
+  disabledText: {},
+  selectedNavText: {},
   vizText: {},
-  vizTextDisabled: { ...uikitStyles.theme.typography.vizTextDisabled },
-  xsInlineLink: { ...uikitStyles.theme.typography.xsInlineLink }
+  vizTextDisabled: {},
+  xsInlineLink: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/VerticalNavigation/Actions/Action.cjs

@@ -3,11 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Action_styles = require("./Action.styles.cjs");
-const Typography = require("../../Typography/Typography.cjs");
+const Button = require("../../Button/Button.cjs");
 const HvVerticalNavigationAction = (props) => {
   const {
     className,
@@ -15,26 +14,16 @@ const HvVerticalNavigationAction = (props) => {
     id,
     label = "",
     icon,
-    onClick,
     ...others
   } = uikitReactUtils.useDefaultProps("HvVerticalNavigationAction", props);
   const { isOpen } = React.useContext(VerticalNavigationContext.VerticalNavigationContext);
   const { classes, cx } = Action_styles.useClasses(classesProp);
-  const handleKeyDown = React.useCallback(
-    (event) => {
-      if (!onClick || !keyboardUtils.isKey(event, "Enter") && !keyboardUtils.isKey(event, "Space")) {
-        return;
-      }
-      onClick(event);
-    },
-    [onClick]
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Typography.HvTypography,
+    Button.HvButton,
     {
       id: setId.setId(id, "button"),
-      component: "div",
-      role: "button",
+      variant: "secondaryGhost",
+      icon: !isOpen,
       className: cx(
         classes.action,
         {
@@ -43,10 +32,7 @@ const HvVerticalNavigationAction = (props) => {
         },
         className
       ),
-      tabIndex: 0,
       ...!isOpen && { "aria-label": label },
-      onKeyDown: handleKeyDown,
-      onClick,
       ...others,
       children: [
         icon,

package/dist/cjs/VerticalNavigation/Actions/Action.styles.cjs

@@ -2,31 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../../utils/focusUtils.cjs");
-const hover = {
-  background: uikitStyles.theme.colors.containerBackgroundHover
-};
 const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationAction",
   {
     action: {
       width: "100%",
-      display: "flex",
       justifyContent: "flex-start",
-      alignItems: "center",
       height: "32px",
-      color: uikitStyles.theme.colors.secondary,
-      // hover
-      "&:hover": { ...hover },
-      "&:focus": {
-        outline: "none",
-        ...hover
-      },
-      "&:focus-visible": {
-        ...focusUtils.outlineStyles
-      },
+      color: "inherit",
+      fontWeight: "inherit",
+      padding: 0,
+      border: "none",
       // cursor
-      cursor: "pointer",
       "& *": {
         cursor: "pointer"
       }

package/dist/cjs/VerticalNavigation/Actions/Actions.styles.cjs

@@ -6,12 +6,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
   "HvVerticalNavigationActions",
   {
     root: {
-      display: "block",
-      background: uikitStyles.theme.colors.atmo1,
+      display: "flex",
+      flexDirection: "column",
       marginTop: "auto",
-      "& :not(:last-child)": {
-        marginBottom: "8px"
-      }
+      gap: uikitStyles.theme.space.xs
     },
     hide: {
       display: "none"

package/dist/cjs/VerticalNavigation/Header/Header.styles.cjs

@@ -16,12 +16,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     },
     collapseButton: {
       marginLeft: "auto",
+      color: "inherit",
       "&$minimized": {
         marginLeft: 0
       }
     },
-    backButton: {},
-    title: {}
+    backButton: {
+      color: "inherit"
+    },
+    title: {
+      color: "inherit"
+    }
   }
 );
 exports.staticClasses = staticClasses;

package/dist/cjs/VerticalNavigation/Navigation/Navigation.cjs

@@ -7,7 +7,7 @@ const useControlled = require("../../hooks/useControlled.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const setId = require("../../utils/setId.cjs");
 const NavigationPopupContainer = require("../NavigationPopup/NavigationPopupContainer.cjs");
-const NavigationSlider_utils = require("../NavigationSlider/utils/NavigationSlider.utils.cjs");
+const utils = require("../NavigationSlider/utils.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Navigation_styles = require("./Navigation.styles.cjs");
 const NavigationSlider = require("../NavigationSlider/NavigationSlider.cjs");
@@ -199,8 +199,8 @@ const HvVerticalNavigationTree = (props) => {
     if (setParentData) setParentData(data);
   }, [data, setParentData]);
   React.useEffect(() => {
-    if (withParentData && selected && setParentItem && NavigationSlider_utils.getParentItemById(withParentData, selected)) {
-      setParentItem(NavigationSlider_utils.getParentItemById(withParentData, selected));
+    if (withParentData && selected && setParentItem && utils.getParentItemById(withParentData, selected)) {
+      setParentItem(utils.getParentItemById(withParentData, selected));
     }
   }, [withParentData, selected, setParentItem]);
   const navigateToTargetHandler = (event, selectedItem) => handleChange(event, selectedItem.id, selectedItem);

package/dist/cjs/VerticalNavigation/Navigation/Navigation.styles.cjs

@@ -1,13 +1,11 @@
 "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(
   "HvVerticalNavigationTree",
   {
     root: {
       display: "block",
-      background: uikitStyles.theme.colors.atmo1,
       overflowY: "auto"
     },
     list: {},

package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.cjs

@@ -51,7 +51,7 @@ const HvVerticalNavigationSlider = (props) => {
               },
               className: classes.forwardButton,
               "aria-label": forwardButtonAriaLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, { color: "currentcolor" })
             }
           ) : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label })

package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs

@@ -10,9 +10,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       alignItems: "center",
       borderLeft: `4px solid transparent`,
       minHeight: "48px",
+      color: "inherit",
       marginBottom: "8px",
       "& > button": {
         marginLeft: "auto"
+      },
+      "& .HvListItem-startAdornment .color0": {
+        fill: "currentColor"
       }
     },
     listItemSelected: {
@@ -22,7 +26,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     listItemFocus: {
       background: uikitStyles.theme.colors.atmo3
     },
-    forwardButton: {},
+    forwardButton: {
+      color: "inherit"
+    },
     listContainer: {},
     listItemDisabled: {}
   }

package/dist/cjs/VerticalNavigation/TreeView/TreeView.styles.cjs

@@ -1,13 +1,11 @@
 "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(
   "HvVerticalNavigationTreeView",
   {
     root: {
       display: "block",
-      background: uikitStyles.theme.colors.atmo1,
       padding: `0px`,
       margin: "0",
       listStyle: "none",

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.cjs

@@ -10,9 +10,9 @@ const setId = require("../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const TreeViewContext = require("./TreeViewContext.cjs");
 const TreeViewItem_styles = require("./TreeViewItem.styles.cjs");
-const IconWrapper = require("./IconWrapper/IconWrapper.cjs");
 const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const Typography = require("../../Typography/Typography.cjs");
+const Avatar = require("../../Avatar/Avatar.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
 const preventSelection = (event, disabled) => {
   if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
@@ -271,10 +271,12 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
           component: isLink ? "a" : "div",
           ...isLink ? buttonLinkProps : null,
           ref: contentRef,
-          className: cx(classes.content, {
-            [classes.link]: isLink,
-            [classes.minimized]: !isOpen
-          }),
+          classes: {
+            root: cx(classes.content, {
+              [classes.link]: isLink,
+              [classes.minimized]: !isOpen
+            })
+          },
           variant: "body",
           disabled,
           onClick: handleClick,
@@ -295,22 +297,25 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
             "aria-label": payload?.label
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              IconWrapper.IconWrapper,
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                icon: useIcons && icon,
-                label: payload?.label,
-                hasChildren,
-                showAvatar: !icon && useIcons,
-                isOpen,
-                hasAnyChildWithData,
-                style: uikitReactUtils.mergeStyles(
-                  {},
-                  {
-                    "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
-                  }
-                ),
-                className: classes.icon
+                className: classes.icon,
+                style: uikitReactUtils.mergeStyles(void 0, {
+                  "--icon-margin-left": hasAnyChildWithData ? "auto" : "unset"
+                }),
+                children: [
+                  !icon && useIcons ? /* @__PURE__ */ jsxRuntime.jsx(
+                    Avatar.HvAvatar,
+                    {
+                      variant: "square",
+                      size: "xs",
+                      backgroundColor: "secondary_80",
+                      children: payload?.label?.substring(0, 1)
+                    }
+                  ) : useIcons && icon,
+                  hasChildren && !isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", {})
+                ]
               }
             ),
             isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -323,7 +328,13 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && (expanded ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {}))
+            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(
+              uikitReactIcons.DropDownXS,
+              {
+                color: "currentcolor",
+                style: { rotate: expanded ? "180deg" : void 0 }
+              }
+            )
           ]
         }
       ) });

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.styles.cjs

@@ -42,6 +42,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       width: "100%",
       display: "flex",
       justifyContent: "flex-start",
+      color: "inherit",
       alignItems: "center",
       height: "32px",
       borderLeft: `4px solid transparent`,
@@ -127,6 +128,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
     },
     icon: {
       display: "flex",
+      "& .color0": {
+        fill: "currentColor"
+      },
       "> div:first-of-type": {
         marginLeft: "var(--icon-margin-left)"
       },

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const utils = require("./NavigationSlider/utils.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");
 const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
 const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
-const NavigationSlider_utils = require("./NavigationSlider/utils/NavigationSlider.utils.cjs");
-const HvVerticalNavigation = (props) => {
+const HvVerticalNavigation = React.forwardRef((props, ref) => {
   const {
     id,
     className,
@@ -21,13 +21,12 @@ const HvVerticalNavigation = (props) => {
   const { classes, cx } = VerticalNavigation_styles.useClasses(classesProp);
   const [parentData, setParentData] = React.useState([]);
   const [parentSelected, setParentSelected] = React.useState();
-  const [headerTitle, setHeaderTitle] = React.useState();
   const withParentData = React.useMemo(
-    () => NavigationSlider_utils.fillDataWithParentId(parentData),
+    () => utils.fillDataWithParentId(parentData),
     [parentData]
   );
   const initialParentItem = React.useMemo(
-    () => NavigationSlider_utils.getParentItemById(withParentData, parentSelected),
+    () => utils.getParentItemById(withParentData, parentSelected),
     [withParentData, parentSelected]
   );
   const [parentItem, setParentItem] = React.useState(initialParentItem);
@@ -35,19 +34,16 @@ const HvVerticalNavigation = (props) => {
     () => VerticalNavigation_utils.hasChildNavigationItems(parentData),
     [parentData]
   );
-  React.useEffect(
-    () => setHeaderTitle(parentItem?.label),
-    [parentItem, setParentItem]
-  );
+  const headerTitle = React.useMemo(() => parentItem?.label, [parentItem]);
   const navigateToParentHandler = React.useCallback(() => {
-    setParentItem(NavigationSlider_utils.getParentItemById(withParentData, parentItem.id));
-  }, [parentItem, setParentItem, withParentData]);
+    setParentItem(utils.getParentItemById(withParentData, parentItem.id));
+  }, [parentItem, withParentData]);
   const navigateToChildHandler = React.useCallback(
     (event, item) => {
-      setParentItem(NavigationSlider_utils.getNavigationItemById(withParentData, item.id));
+      setParentItem(utils.getNavigationItemById(withParentData, item.id));
       event.stopPropagation();
     },
-    [setParentItem, withParentData]
+    [withParentData]
   );
   const value = React.useMemo(
     () => ({
@@ -55,7 +51,6 @@ const HvVerticalNavigation = (props) => {
       useIcons,
       slider,
       headerTitle,
-      setHeaderTitle,
       parentItem,
       setParentItem,
       withParentData,
@@ -72,7 +67,6 @@ const HvVerticalNavigation = (props) => {
       useIcons,
       slider,
       headerTitle,
-      setHeaderTitle,
       parentItem,
       setParentItem,
       withParentData,
@@ -83,10 +77,11 @@ const HvVerticalNavigation = (props) => {
       parentSelected
     ]
   );
-  const content = /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.VerticalNavigationContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       id,
+      ref,
       className: cx(
         classes.root,
         {
@@ -100,7 +95,6 @@ const HvVerticalNavigation = (props) => {
       children
     }
   ) });
-  return content;
-};
+});
 exports.verticalNavigationClasses = VerticalNavigation_styles.staticClasses;
 exports.HvVerticalNavigation = HvVerticalNavigation;

package/dist/cjs/VerticalNavigation/VerticalNavigation.styles.cjs

@@ -10,7 +10,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       flexDirection: "column",
       justifyContent: "flex-start",
       width: "220px",
-      background: uikitStyles.theme.colors.atmo1,
+      backgroundColor: uikitStyles.theme.colors.atmo1,
       boxShadow: uikitStyles.theme.colors.shadow,
       clipPath: "inset(0px -12px 0px 0px)",
       "& > :only-child": {

package/dist/esm/DropdownButton/DropdownButton.js

@@ -19,14 +19,7 @@ const HvDropdownButton = forwardRef((props, ref) => {
     ...others
   } = useDefaultProps("HvDropdownButton", props);
   const { classes, cx } = useClasses(classesProp);
-  const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(
-    DropDownXS,
-    {
-      iconSize: "XS",
-      style: { rotate: open ? "180deg" : void 0 },
-      className: classes.arrow
-    }
-  );
+  const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(DropDownXS, { iconSize: "XS", style: { rotate: open ? "180deg" : void 0 } });
   return /* @__PURE__ */ jsx(
     HvButton,
     {

package/dist/esm/DropdownButton/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>((props, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const endIcon = icon ? undefined : (\n    <DropDownXS\n      iconSize=\"XS\"\n      style={{ rotate: open ? \"180deg\" : undefined }}\n      className={classes.arrow}\n    />\n  );\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.openUp]: open && placement.includes(\"top\"),\n          [classes.openDown]: open && placement.includes(\"bottom\"),\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className,\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      <div className={cx({ [classes.selection]: !icon })}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,UAAU,OAAO,SACrB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,OAAO,WAAW,OAAU;AAAA,MAC7C,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA;AAKrB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAK,CAAC,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAS,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>((props, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const endIcon = icon ? undefined : (\n    <DropDownXS iconSize=\"XS\" style={{ rotate: open ? \"180deg\" : undefined }} />\n  );\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.openUp]: open && placement.includes(\"top\"),\n          [classes.openDown]: open && placement.includes(\"bottom\"),\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className,\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      <div className={cx({ [classes.selection]: !icon })}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,UAAU,OAAO,SACrB,oBAAC,YAAW,EAAA,UAAS,MAAK,OAAO,EAAE,QAAQ,OAAO,WAAW,OAAa,EAAA,CAAA;AAI1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAK,CAAC,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAS,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/DropdownButton/DropdownButton.styles.js

@@ -54,9 +54,6 @@ const { staticClasses, useClasses } = createClasses("HvDropdownButton", {
   placeholder: {},
   arrowContainer: {
     marginRight: theme.spacing(-2)
-  },
-  arrow: {
-    transition: "rotate 0.2s ease"
   }
 });
 export {

package/dist/esm/DropdownButton/DropdownButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.styles.js","sources":["../../../src/DropdownButton/DropdownButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../Button\";\n\nconst disabledStyle = {\n  backgroundColor: theme.colors.atmo3,\n  borderColor: theme.colors.atmo3,\n  [`&.${buttonClasses.subtle}`]: {\n    backgroundColor: theme.colors.atmo3,\n    borderColor: theme.colors.atmo3,\n    \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n  },\n  [`&.${buttonClasses.ghost}`]: {\n    backgroundColor: theme.colors.atmo3,\n    borderColor: theme.colors.atmo3,\n    \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownButton\", {\n  root: {\n    userSelect: \"none\",\n    position: \"relative\",\n\n    [`&:not(.${buttonClasses.icon})`]: {\n      width: \"100%\",\n      minWidth: \"unset\",\n      justifyContent: \"flex-start\",\n      paddingLeft: theme.space.xs,\n    },\n  },\n  disabled: {\n    ...disabledStyle,\n  },\n  readOnly: {\n    userSelect: \"text\",\n    ...disabledStyle,\n  },\n  open: {\n    backgroundColor: theme.colors.atmo1,\n  },\n  openUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  openDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  selection: {\n    color: \"inherit\",\n    flex: 1,\n    textAlign: \"start\",\n    overflow: \"auto\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholder: {},\n  arrowContainer: {\n    marginRight: theme.spacing(-2),\n  },\n  arrow: {\n    transition: \"rotate 0.2s ease\",\n  },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAKA,MAAM,gBAAgB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAAA,EAC9B,aAAa,MAAM,OAAO;AAAA,EAC1B,CAAC,KAAKA,gBAAc,MAAM,EAAE,GAAG;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AAAA,EACA,CAAC,KAAKA,gBAAc,KAAK,EAAE,GAAG;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUA,gBAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAa,MAAM,QAAQ,EAAE;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,EACd;AACF,CAAC;"}
+{"version":3,"file":"DropdownButton.styles.js","sources":["../../../src/DropdownButton/DropdownButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../Button\";\n\nconst disabledStyle = {\n  backgroundColor: theme.colors.atmo3,\n  borderColor: theme.colors.atmo3,\n  [`&.${buttonClasses.subtle}`]: {\n    backgroundColor: theme.colors.atmo3,\n    borderColor: theme.colors.atmo3,\n    \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n  },\n  [`&.${buttonClasses.ghost}`]: {\n    backgroundColor: theme.colors.atmo3,\n    borderColor: theme.colors.atmo3,\n    \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n  },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownButton\", {\n  root: {\n    userSelect: \"none\",\n    position: \"relative\",\n\n    [`&:not(.${buttonClasses.icon})`]: {\n      width: \"100%\",\n      minWidth: \"unset\",\n      justifyContent: \"flex-start\",\n      paddingLeft: theme.space.xs,\n    },\n  },\n  disabled: {\n    ...disabledStyle,\n  },\n  readOnly: {\n    userSelect: \"text\",\n    ...disabledStyle,\n  },\n  open: {\n    backgroundColor: theme.colors.atmo1,\n  },\n  openUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  openDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  selection: {\n    color: \"inherit\",\n    flex: 1,\n    textAlign: \"start\",\n    overflow: \"auto\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholder: {},\n  arrowContainer: {\n    marginRight: theme.spacing(-2),\n  },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAKA,MAAM,gBAAgB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAAA,EAC9B,aAAa,MAAM,OAAO;AAAA,EAC1B,CAAC,KAAKA,gBAAc,MAAM,EAAE,GAAG;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AAAA,EACA,CAAC,KAAKA,gBAAc,KAAK,EAAE,GAAG;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUA,gBAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAa,MAAM,QAAQ,EAAE;AAAA,EAC/B;AACF,CAAC;"}

package/dist/esm/Typography/Typography.js

@@ -49,7 +49,7 @@ const HvTypography = fixedForwardRef(function HvTypography2(props, ref) {
     disabled = false,
     ...others
   } = useDefaultProps("HvTypography", props);
-  const { classes, cx } = useClasses(classesProp);
+  const { classes, css, cx } = useClasses(classesProp);
   const { activeTheme } = useTheme();
   const variant = mapVariant(variantProp, activeTheme?.base);
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
@@ -58,6 +58,7 @@ const HvTypography = fixedForwardRef(function HvTypography2(props, ref) {
     {
       ref,
       className: cx(
+        css({ ...activeTheme?.typography[variant] }),
         classes.root,
         classes[variant],
         {