npm - @hitachivantara/uikit-react-core - Versions diffs - 5.91.3 → 5.92.0 - Mend

@hitachivantara/uikit-react-core 5.91.3 → 5.92.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/dist/cjs/TreeView/TreeView.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const utils = require("@mui/base/utils");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../icons.cjs");
 const generic = require("../types/generic.cjs");
 const useTreeView = require("./internals/hooks/useTreeView.cjs");
 const TreeViewProvider = require("./internals/TreeViewProvider.cjs");
@@ -22,8 +22,8 @@ const HvTreeView = generic.fixedForwardRef(function HvTreeView2(props, ref) {
     selected,
     defaultSelected,
     disableSelection,
-    defaultCollapseIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {}),
-    defaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {}),
+    defaultCollapseIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs" }),
+    defaultExpandIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", size: "xs" }),
     defaultEndIcon,
     defaultParentIcon,
     onNodeSelect,

package/dist/cjs/VerticalNavigation/Header/Header.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
 const Header_styles = require("./Header.styles.cjs");
 const Button = require("../../Button/Button.cjs");
@@ -34,8 +34,8 @@ const HvVerticalNavigationHeader = (props) => {
     [parentItem, slider]
   );
   if (!shouldShowTitle) return null;
-  const openIcon = openIconProp ?? (!useIcons ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Menu, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, {}));
-  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, {});
+  const openIcon = openIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: useIcons ? "Forwards" : "Menu" });
+  const closeIcon = closeIconProp ?? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards" });
   const handleClickBack = () => navigateToParentHandler?.();
   const { className: backButtonClassName, ...otherBackButtonProps } = backButtonProps;
   const {
@@ -57,7 +57,7 @@ const HvVerticalNavigationHeader = (props) => {
             className: cx(classes.backButton, backButtonClassName),
             "aria-label": "Back",
             ...otherBackButtonProps,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { iconSize: "XS" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", size: "xs" })
           }
         ),
         isOpen && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.cjs CHANGED Viewed

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const NavigationSlider_styles = require("./NavigationSlider.styles.cjs");
 const Button = require("../../Button/Button.cjs");
 const ListContainer = require("../../ListContainer/ListContainer.cjs");
@@ -51,7 +51,7 @@ const HvVerticalNavigationSlider = (props) => {
               },
               className: classes.forwardButton,
               "aria-label": forwardButtonAriaLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", size: "xs" })
             }
           ) : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: item.label })

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useForkRef = require("../../hooks/useForkRef.cjs");
+const icons = require("../../icons.cjs");
 const DescendantProvider = require("../../TreeView/internals/DescendantProvider.cjs");
 const setId = require("../../utils/setId.cjs");
 const VerticalNavigationContext = require("../VerticalNavigationContext.cjs");
@@ -314,7 +314,7 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                       children: payload?.label?.substring(0, 1)
                     }
                   ) : useIcons && icon,
-                  hasChildren && !isOpen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { iconSize: "XS" }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", {})
+                  hasChildren && !isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", size: "xs", compact: true }) : hasAnyChildWithData && !isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", {})
                 ]
               }
             ),
@@ -328,7 +328,7 @@ const HvVerticalNavigationTreeViewItem = React.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: label })
               }
             ),
-            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: expanded })
+            isOpen && expandable && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: expanded })
           ]
         }
       ) });

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

@@ -132,7 +132,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
         marginLeft: "var(--icon-margin-left)"
       },
       "> div:nth-of-type(2)": {
-        width: "14px",
+        width: "12px",
         marginLeft: "auto"
       },
       [`&& .${Avatar_styles.staticClasses.root}`]: {

package/dist/cjs/icons.cjs CHANGED Viewed

@@ -1,8 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const styled = require("@emotion/styled");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const svgSizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 32,
+  lg: 96,
+  xl: 112
+};
 const SvgBase = styled__default.default("svg")({
   display: "inline-block",
   fill: "currentcolor",
@@ -12,4 +23,76 @@ const SvgBase = styled__default.default("svg")({
   flexShrink: 0,
   transition: "rotate 0.2s ease"
 });
+const Svg = styled__default.default(SvgBase)(({ size, color, compact, rotate }) => ({
+  rotate: rotate ? "180deg" : void 0,
+  margin: compact ? 0 : size === "xs" ? 10 : 8,
+  color: uikitStyles.getColor(color) ?? "inherit",
+  fontSize: svgSizeMap[size] ?? size ?? svgSizeMap.sm
+}));
+const defaultIconPathMap = {
+  // Semantic icons
+  Success: "M6.39 12 4 9.61l.7-.7 1.62 1.6 4.65-5.57.77.64zM8 15a7 7 0 0 1-4.94-2.06A7.02 7.02 0 1 1 8 15m8-7a8 8 0 1 0-8 8 8 8 0 0 0 8-8",
+  Caution: "M7.5 6h1v4h-1zm0 7h1v-1h-1zm8.5 2H0L8 1zM1.72 14h12.56L8 3.02z",
+  Fail: "M7.5 4h1v6h-1zm0 8h1v-1h-1zM16 8a8 8 0 1 0-8 8 8 8 0 0 0 8-8m-1 0a7 7 0 1 1-7-7 7 7 0 0 1 7 7",
+  Info: "M8 16a8 8 0 1 1 8-8 8 8 0 0 1-8 8M8 1a6.96 6.96 0 0 0-7 6.91V8a6.96 6.96 0 0 0 6.91 7H8a6.96 6.96 0 0 0 7-6.91V8a6.96 6.96 0 0 0-6.91-7zm-.5 11h1V6h-1zm0-7h1V4h-1z",
+  // Arrows/Navigation
+  CaretDown: "m8 11.53-6.13-6.13.93-.93L8 9.67l5.2-5.2.93.93z",
+  CaretRight: "m5.4 14.13-.93-.93L9.67 8l-5.2-5.2.93-.93L11.53 8z",
+  DotsHorizontal: "M9.1 7v2h-2V7zM2 7v2h2V7zm10 0v2h2V7z",
+  DotsVertical: "M7 6.9h2v2H7zM7 4h2V2H7zm0 10h2v-2H7z",
+  Start: "M2.99 16.05H2v-16h.99zm2.97-8 7.34 7.41.7-.7-6.64-6.71L14 1.33l-.7-.7z",
+  Backwards: "M11.3 15.5 4 8 11.3.5l.7.8L5.38 8 12 14.8z",
+  Forwards: "M4.79 15.5 4 14.8 10.62 8 4 1.3l.79-.8L12 8z",
+  End: "M13 0h1v16h-1zM2.58.58l-.7.7L8.57 8l-6.7 6.71.7.71L10 8z",
+  // Others
+  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: "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",
+  ColorPicker: "M15.41.57a2.05 2.05 0 0 0-2.82 0l-2.12 2.12-1.42-1.42-.7.71L14 7.64l.7-.7-1.4-1.42 2.1-2.12a2 2 0 0 0 0-2.83zm-.69 2.11L12.59 4.8l-1.42-1.42 2.12-2.12a1 1 0 0 1 1.42 1.42zM0 13v3h3l9-9-3-3zm2.59 2H1v-1.58l8-8L10.59 7z",
+  CurrentStep: "M16 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8",
+  Delete: "M12 1H4V0h8zm4 1v1h-2.1L13 16H3L2.1 3H0V2zm-3 1H3.1L4 15h8.1z",
+  Doc: "M9 0H2v16h12V5zm3.6 5H9V1.4zm.4 10H3V1h5v5h5z",
+  Edit: "M13.17 7.07 8.93 2.83 11.76 0 16 4.24zm-2.83-4.24 2.83 2.83 1.42-1.42-2.83-2.83zm-2.7 2.7L1 12.16V15h2.83l6.65-6.65-2.83-2.83m-.01-1.4 4.24 4.24L4.24 16H0v-4.24z",
+  Filters: "M1 2v1.6l6 6.1V14h2V9.7l6-6.1V2zM0 1h16v3l-6 6v5H6v-4.9L0 4z",
+  Fullscreen: "M16 0v4.5h-1V1.7l-4.65 4.65-.7-.7L14.29 1H11.5V0zM4.5 1V0H0v4.5h1V1.7l4.65 4.65.7-.7L1.71 1zM15 14.3l-4.65-4.65-.7.7L14.29 15H11.5v1H16v-4.5h-1zM5.65 9.64 1 14.29V11.5H0V16h4.5v-1H1.7l4.65-4.65z",
+  Menu: "M1 2v1.6l6 6.1V14h2V9.7l6-6.1V2zM0 1h16v3l-6 6v5H6v-4.9L0 4z",
+  OtherStep: "M12 8a4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4 4 4 0 0 1 4 4",
+  Time: "M8 15a7.02 7.02 0 1 0-4.94-2.06A7 7 0 0 0 8 15m0 1a8 8 0 1 1 8-8 8 8 0 0 1-8 8m2.65-4.65L7.5 8.21V3h1v4.8l2.85 2.85z",
+  User: "M9.6 8.7A4.5 4.5 0 0 0 8.04 0H8a4.5 4.5 0 0 0-4.5 4.46v.04a4.6 4.6 0 0 0 2.9 4.2A7.7 7.7 0 0 0 .5 16h1a6.5 6.5 0 0 1 6.47-6.5H8a6.5 6.5 0 0 1 6.5 6.47V16h1a7.5 7.5 0 0 0-5.9-7.3M4.5 4.5A3.54 3.54 0 0 1 8 1a3.54 3.54 0 0 1 3.5 3.5A3.54 3.54 0 0 1 8 8a3.54 3.54 0 0 1-3.5-3.5"
+};
+function HvIconInternal(props, ref) {
+  const { name, title, "aria-label": ariaLabel, children, ...others } = props;
+  const { activeTheme } = uikitReactUtils.useTheme();
+  const iconsPathMap = React.useMemo(
+    () => ({ ...defaultIconPathMap, ...activeTheme?.icons }),
+    [activeTheme?.icons]
+  );
+  const isDefaultIcon = iconsPathMap[name] === defaultIconPathMap[name];
+  return (
+    // @ts-expect-error `rotate` is fine
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Svg,
+      {
+        ref,
+        "data-name": name,
+        viewBox: !isDefaultIcon && activeTheme?.icons?.viewBox || "0 0 16 16",
+        focusable: false,
+        "aria-label": ariaLabel,
+        role: title || ariaLabel ? "img" : "none",
+        ...others,
+        children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: iconsPathMap[name] })
+        ]
+      }
+    )
+  );
+}
+const HvIcon = React.memo(React.forwardRef(HvIconInternal));
+exports.HvIcon = HvIcon;
 exports.SvgBase = SvgBase;

package/dist/cjs/utils/Callout.cjs CHANGED Viewed

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const SnackbarContent = require("@mui/material/SnackbarContent");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../icons.cjs");
 const iconVariant = require("./iconVariant.cjs");
 const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
 const Button = require("../Button/Button.cjs");
@@ -47,7 +47,9 @@ const { useClasses } = uikitReactUtils.createClasses("HvCallout", {
     overflow: "hidden",
     wordBreak: "break-word"
   },
-  messageIcon: {},
+  messageIcon: {
+    lineHeight: 0
+  },
   messageTitle: {
     display: "block",
     fontWeight: uikitStyles.theme.fontWeights.semibold
@@ -130,7 +132,7 @@ const HvCallout = React.forwardRef(function HvCallout2(props, ref) {
             "aria-label": "Close",
             onClick: (evt) => onClose?.(evt, "clickaway"),
             ...actionProps,
-            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { size: "XS" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { size: "xs", name: "Close" })
           }
         ),
         showCustomActions && actionsContent

package/dist/cjs/utils/iconVariant.cjs CHANGED Viewed

@@ -1,19 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../icons.cjs");
+const variantIconMap = {
+  success: "Success",
+  warning: "Caution",
+  error: "Fail",
+  info: "Info"
+};
 const iconVariant = (variant, color) => {
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Success, { color });
-    case "warning":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Caution, { color });
-    case "error":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fail, { color });
-    case "info":
-      return /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { color });
-    default:
-      return null;
-  }
+  if (variant === "default" || variant === "accent") return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: variantIconMap[variant], color });
 };
 exports.iconVariant = iconVariant;

package/dist/esm/Accordion/Accordion.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from "react";
-import { DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useExpandable } from "../hooks/useExpandable.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Accordion.styles.js";
 import { staticClasses } from "./Accordion.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -55,7 +55,7 @@ const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
         onClick: handleClick,
         variant: labelVariant,
         children: [
-          /* @__PURE__ */ jsx(DropUpXS, { rotate: !isOpen }),
+          /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", rotate: isOpen, size: "xs" }),
           label
         ]
       }

package/dist/esm/Accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { ~~DropUpXS } from~~ \~~"@hitachivantara/uikit-react-icons\";\nimport {\~~n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" \| \"children\"> {\n /** Content to be rendered. /\n children: React.ReactNode;\n /* The accordion label button. /\n label?: string;\n /* The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. /\n onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n /* Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* An object containing props to be passed onto container holding the accordion children. /\n containerProps?: React.HTMLAttributes<HTMLDivElement>;\n /* Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. /\n headingLevel?: 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n /* Whether the accordion is disabled. /\n disabled?: boolean;\n /* Typography variant for the label. /\n labelVariant?: HvTypographyVariants;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvAccordionClasses;\n /* Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. /\n disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/\n A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = forwardRef<\n React.ComponentRef<\"div\">,\n HvAccordionProps\n>(function HvAccordion(props, ref) {\n const {\n id,\n className,\n classes: classesProp,\n disabled = false,\n label,\n onChange,\n children,\n expanded,\n headingLevel,\n defaultExpanded = false,\n containerProps,\n labelVariant = \"label\",\n disableEventHandling,\n ...others\n } = useDefaultProps(\"HvAccordion\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n id,\n expanded,\n disabled,\n defaultExpanded,\n });\n\n const handleClick = useCallback(\n (event: React.SyntheticEvent) => {\n if (!disabled) {\n onChange?.(event, isOpen);\n toggleOpen();\n }\n\n if (!disableEventHandling) {\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n );\n\n const accordionHeader = useMemo(() => {\n const accordionButton = (\n <HvTypography\n {...buttonProps}\n component={HvButtonBase}\n className={cx(classes.label, { [classes.disabled]: disabled })}\n disabled={disabled}\n onClick={handleClick}\n variant={labelVariant}\n >\n <~~DropUpXS~~ rotate={!isOpen} />\n {label}\n </HvTypography>\n );\n\n return headingLevel === undefined ? (\n accordionButton\n ) : (\n <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n {accordionButton}\n </HvTypography>\n );\n }, [\n cx,\n classes,\n handleClick,\n label,\n buttonProps,\n disabled,\n headingLevel,\n isOpen,\n labelVariant,\n ]);\n\n return (\n <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n {accordionHeader}\n <div\n className={cx(classes.container, { [classes.hidden]: !isOpen })}\n hidden={!isOpen}\n {...regionProps}\n {...containerProps}\n >\n {children}\n </div>\n </div>\n );\n});\n"],"names":["HvAccordion"],"mappings":";;;;;;;;;AA8CO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb,mBAAA;AAAA,MAAA;AAGb,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MAAA;AAAA,IAE1B;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAC/D;AAEM,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,~~UAAC~~,~~oBAAA~~,~~UAAA~~,~~EAAS~~,QAAQ,~~CAAC~~,~~OAAQ~~,~~CAAA~~;AAAA,~~UAC1B~~;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAGK,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,iBAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAChE,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
1	+ {"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvIcon } from \"../icons\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" \| \"children\"> {\n /** Content to be rendered. /\n children: React.ReactNode;\n /* The accordion label button. /\n label?: string;\n /* The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. /\n onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n /* Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* An object containing props to be passed onto container holding the accordion children. /\n containerProps?: React.HTMLAttributes<HTMLDivElement>;\n /* Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. /\n headingLevel?: 1 \| 2 \| 3 \| 4 \| 5 \| 6;\n /* Whether the accordion is disabled. /\n disabled?: boolean;\n /* Typography variant for the label. /\n labelVariant?: HvTypographyVariants;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvAccordionClasses;\n /* Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. /\n disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/\n A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = forwardRef<\n React.ComponentRef<\"div\">,\n HvAccordionProps\n>(function HvAccordion(props, ref) {\n const {\n id,\n className,\n classes: classesProp,\n disabled = false,\n label,\n onChange,\n children,\n expanded,\n headingLevel,\n defaultExpanded = false,\n containerProps,\n labelVariant = \"label\",\n disableEventHandling,\n ...others\n } = useDefaultProps(\"HvAccordion\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n id,\n expanded,\n disabled,\n defaultExpanded,\n });\n\n const handleClick = useCallback(\n (event: React.SyntheticEvent) => {\n if (!disabled) {\n onChange?.(event, isOpen);\n toggleOpen();\n }\n\n if (!disableEventHandling) {\n event.preventDefault();\n event.stopPropagation();\n }\n },\n [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n );\n\n const accordionHeader = useMemo(() => {\n const accordionButton = (\n <HvTypography\n {...buttonProps}\n component={HvButtonBase}\n className={cx(classes.label, { [classes.disabled]: disabled })}\n disabled={disabled}\n onClick={handleClick}\n variant={labelVariant}\n >\n <HvIcon name=\"CaretDown\" rotate={isOpen} size=\"xs\" />\n {label}\n </HvTypography>\n );\n\n return headingLevel === undefined ? (\n accordionButton\n ) : (\n <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n {accordionButton}\n </HvTypography>\n );\n }, [\n cx,\n classes,\n handleClick,\n label,\n buttonProps,\n disabled,\n headingLevel,\n isOpen,\n labelVariant,\n ]);\n\n return (\n <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n {accordionHeader}\n <div\n className={cx(classes.container, { [classes.hidden]: !isOpen })}\n hidden={!isOpen}\n {...regionProps}\n {...containerProps}\n >\n {children}\n </div>\n </div>\n );\n});\n"],"names":["HvAccordion"],"mappings":";;;;;;;;;AA8CO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb,mBAAA;AAAA,MAAA;AAGb,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MAAA;AAAA,IAE1B;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAC/D;AAEM,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,UAAA,oBAAC,UAAO,MAAK,aAAY,QAAQ,QAAQ,MAAK,MAAK;AAAA,UAClD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAGK,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,iBAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAChE,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/esm/ActionsGeneric/ActionsGeneric.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, isValidElement } from "react";
-import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ActionsGeneric.styles.js";
 import { staticClasses } from "./ActionsGeneric.styles.js";
@@ -77,7 +77,7 @@ const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
             icon: classes.dropDownMenuButton,
             iconSelected: classes.dropDownMenuButtonSelected
           },
-          icon: /* @__PURE__ */ jsx(MoreOptionsVertical, { color: iconColor }),
+          icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical", color: iconColor }),
           placement: "left",
           onClick: (event, action) => {
             handleCallback(event, idProp || "", action);

package/dist/esm/ActionsGeneric/ActionsGeneric.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport { ~~MoreOptionsVertical } from~~ \~~"@hitachivantara/uikit-react-icons\";\nimport {\~~n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n /** Action id. /\n id: string;\n /* Action label. /\n label: string;\n /* Action icon. /\n icon?:\n \| React.ReactNode\n \| ((params: { isDisabled?: boolean }) => React.ReactNode);\n /* Whether the action is disabled or not. /\n disabled?: boolean;\n /* When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. /\n iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n /\n The button category for all actions.\n \n @deprecated Use `variant` instead.\n /\n category?: HvButtonVariant;\n /* The button variant for all actions. /\n variant?: HvButtonVariant;\n /* Whether the actions should be all disabled. /\n disabled?: boolean;\n /* Whether the actions should be all icon buttons when visible. /\n iconOnly?: boolean;\n /* The renderable content inside the actions slot of the footer, or an array of actions. /\n actions: React.ReactNode \| HvActionGeneric[];\n /\n The callback function called when an action is triggered, receiving the `action` as parameter.\n \n @deprecated Use `onAction` instead.\n * /\n actionsCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric,\n ) => void;\n /* The callback function called when an action is triggered, receiving the `action` as parameter. /\n onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n /* The maximum number of visible actions before they're collapsed into a dropdown menu. /\n maxVisibleActions?: number;\n /* Props to be applied to the dropdown menu. /\n dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = forwardRef<\n React.ComponentRef<\"div\">,\n HvActionsGenericProps\n>(function HvActionsGeneric(props, ref) {\n const {\n id: idProp,\n classes: classesProp,\n className,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant: variantProp,\n disabled = false,\n actions = [],\n actionsCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = Infinity,\n iconOnly: iconOnlyProp,\n dropdownMenuProps: dropdownMenuPropsProp,\n ...others\n } = useDefaultProps(\"HvActionsGeneric\", props);\n\n const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n dropdownMenuPropsProp \|\| {};\n\n const variant = variantProp \|\| category;\n\n const { classes, cx } = useClasses(classesProp);\n\n const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n event,\n id,\n action,\n ) => {\n actionsCallback?.(event, id, action);\n onAction?.(event, action);\n };\n\n if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n const renderButton = (action: HvActionGeneric, idx: number) => {\n const {\n disabled: actDisabled,\n id: actId,\n icon,\n label,\n iconOnly,\n ...other\n } = action;\n const actionId = setId(idProp, idx, \"action\", action.id);\n\n const renderedIcon = isValidElement(icon)\n ? icon\n : (icon as Function)?.({ isDisabled: disabled });\n\n const commonButtonProps: HvButtonProps = {\n id: actionId,\n variant,\n className: classes.button,\n disabled: actDisabled ?? disabled,\n onClick: (event) => handleCallback(event, idProp \|\| \"\", action),\n ...other,\n };\n\n const key = actionId \|\| idx;\n const isIcon = iconOnly ?? iconOnlyProp;\n\n if (isIcon) {\n return (\n <HvIconButton key={key} {...commonButtonProps} title={label}>\n {renderedIcon}\n </HvIconButton>\n );\n }\n\n return (\n <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n {label}\n </HvButton>\n );\n };\n\n const renderActionsGrid = () => {\n const actsVisible = actions.slice(0, maxVisibleActions);\n const actsDropdown = actions.slice(maxVisibleActions);\n\n const iconColor = (variant === \"semantic\" && \"textDark\") \|\| undefined;\n\n return (\n <>\n {actsVisible.map((action, idx) => renderButton(action, idx))}\n <HvDropDownMenu\n id={setId(idProp, \"menu\")}\n disabled={disabled}\n variant={variant}\n classes={{\n root: classes.dropDownMenu,\n icon: classes.dropDownMenuButton,\n iconSelected: classes.dropDownMenuButtonSelected,\n }}\n icon={<~~MoreOptionsVertical~~ color={iconColor} />}\n placement=\"left\"\n onClick={(event, action) => {\n handleCallback(event, idProp \|\| \"\", action as HvActionGeneric);\n onClickDropdownMenu?.(event, action);\n }}\n dataList={actsDropdown}\n keepOpened={false}\n disablePortal={false}\n {...dropdownMenuProps}\n />\n </>\n );\n };\n\n const actionOverflow = actions.length > maxVisibleActions;\n\n return (\n <div\n ref={ref}\n className={cx(\n classes.root,\n { [classes.actionContainer]: actionOverflow },\n className,\n )}\n {...others}\n >\n {actionOverflow\n ? renderActionsGrid()\n : actions.map((action, idx) => renderButton(action, idx))}\n </div>\n );\n});\n"],"names":["HvActionsGeneric"],"mappings":";;;;;;;;;;AAoEO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,qBAAqB,GAAG,kBAAkB,IACzD,yBAAyB,CAAC;AAE5B,QAAM,UAAU,eAAe;AAE/B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,iBAA2D,CAC/D,OACA,IACA,WACG;AACe,sBAAA,OAAO,IAAI,MAAM;AACnC,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEI,MAAA,CAAC,MAAM,QAAQ,OAAO,EAAU,QAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AACJ,UAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,OAAO,EAAE;AAEjD,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,UAAU;AAEjD,UAAM,oBAAmC;AAAA,MACvC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,UAAU,eAAe,OAAO,UAAU,IAAI,MAAM;AAAA,MAC9D,GAAG;AAAA,IACL;AAEA,UAAM,MAAM,YAAY;AACxB,UAAM,SAAS,YAAY;AAE3B,QAAI,QAAQ;AACV,iCACG,cAAwB,EAAA,GAAG,mBAAmB,OAAO,OACnD,0BADgB,GAEnB;AAAA,IAAA;AAIJ,+BACG,UAAoB,EAAA,GAAG,mBAAmB,WAAW,cACnD,mBADY,GAEf;AAAA,EAEJ;AAEA,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAE9C,UAAA,YAAa,YAAY,cAAc,cAAe;AAE5D,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,~~MAAM~~,~~oBAAC~~,~~qBAAoB~~,~~EAAA~~,OAAO,~~UAAW,CAAA~~;AAAA,~~UAC7C~~,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WAAW;AACX,2BAAA,OAAO,UAAU,IAAI,MAAyB;AAC7D,kCAAsB,OAAO,MAAM;AAAA,UACrC;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AAEM,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,eAAe,GAAG,eAAe;AAAA,QAC5C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,iBACG,kBAAkB,IAClB,QAAQ,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,IAAA;AAAA,EAC5D;AAEJ,CAAC;"}
1	+ {"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvIcon } from \"../icons\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n /** Action id. /\n id: string;\n /* Action label. /\n label: string;\n /* Action icon. /\n icon?:\n \| React.ReactNode\n \| ((params: { isDisabled?: boolean }) => React.ReactNode);\n /* Whether the action is disabled or not. /\n disabled?: boolean;\n /* When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. /\n iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n /\n The button category for all actions.\n \n @deprecated Use `variant` instead.\n /\n category?: HvButtonVariant;\n /* The button variant for all actions. /\n variant?: HvButtonVariant;\n /* Whether the actions should be all disabled. /\n disabled?: boolean;\n /* Whether the actions should be all icon buttons when visible. /\n iconOnly?: boolean;\n /* The renderable content inside the actions slot of the footer, or an array of actions. /\n actions: React.ReactNode \| HvActionGeneric[];\n /\n The callback function called when an action is triggered, receiving the `action` as parameter.\n \n @deprecated Use `onAction` instead.\n * /\n actionsCallback?: (\n event: React.SyntheticEvent,\n id: string,\n action: HvActionGeneric,\n ) => void;\n /* The callback function called when an action is triggered, receiving the `action` as parameter. /\n onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n /* The maximum number of visible actions before they're collapsed into a dropdown menu. /\n maxVisibleActions?: number;\n /* Props to be applied to the dropdown menu. /\n dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = forwardRef<\n React.ComponentRef<\"div\">,\n HvActionsGenericProps\n>(function HvActionsGeneric(props, ref) {\n const {\n id: idProp,\n classes: classesProp,\n className,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant: variantProp,\n disabled = false,\n actions = [],\n actionsCallback, // TODO - remove in v6\n onAction,\n maxVisibleActions = Infinity,\n iconOnly: iconOnlyProp,\n dropdownMenuProps: dropdownMenuPropsProp,\n ...others\n } = useDefaultProps(\"HvActionsGeneric\", props);\n\n const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n dropdownMenuPropsProp \|\| {};\n\n const variant = variantProp \|\| category;\n\n const { classes, cx } = useClasses(classesProp);\n\n const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n event,\n id,\n action,\n ) => {\n actionsCallback?.(event, id, action);\n onAction?.(event, action);\n };\n\n if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n const renderButton = (action: HvActionGeneric, idx: number) => {\n const {\n disabled: actDisabled,\n id: actId,\n icon,\n label,\n iconOnly,\n ...other\n } = action;\n const actionId = setId(idProp, idx, \"action\", action.id);\n\n const renderedIcon = isValidElement(icon)\n ? icon\n : (icon as Function)?.({ isDisabled: disabled });\n\n const commonButtonProps: HvButtonProps = {\n id: actionId,\n variant,\n className: classes.button,\n disabled: actDisabled ?? disabled,\n onClick: (event) => handleCallback(event, idProp \|\| \"\", action),\n ...other,\n };\n\n const key = actionId \|\| idx;\n const isIcon = iconOnly ?? iconOnlyProp;\n\n if (isIcon) {\n return (\n <HvIconButton key={key} {...commonButtonProps} title={label}>\n {renderedIcon}\n </HvIconButton>\n );\n }\n\n return (\n <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n {label}\n </HvButton>\n );\n };\n\n const renderActionsGrid = () => {\n const actsVisible = actions.slice(0, maxVisibleActions);\n const actsDropdown = actions.slice(maxVisibleActions);\n\n const iconColor = (variant === \"semantic\" && \"textDark\") \|\| undefined;\n\n return (\n <>\n {actsVisible.map((action, idx) => renderButton(action, idx))}\n <HvDropDownMenu\n id={setId(idProp, \"menu\")}\n disabled={disabled}\n variant={variant}\n classes={{\n root: classes.dropDownMenu,\n icon: classes.dropDownMenuButton,\n iconSelected: classes.dropDownMenuButtonSelected,\n }}\n icon={<HvIcon name=\"DotsVertical\" color={iconColor} />}\n placement=\"left\"\n onClick={(event, action) => {\n handleCallback(event, idProp \|\| \"\", action as HvActionGeneric);\n onClickDropdownMenu?.(event, action);\n }}\n dataList={actsDropdown}\n keepOpened={false}\n disablePortal={false}\n {...dropdownMenuProps}\n />\n </>\n );\n };\n\n const actionOverflow = actions.length > maxVisibleActions;\n\n return (\n <div\n ref={ref}\n className={cx(\n classes.root,\n { [classes.actionContainer]: actionOverflow },\n className,\n )}\n {...others}\n >\n {actionOverflow\n ? renderActionsGrid()\n : actions.map((action, idx) => renderButton(action, idx))}\n </div>\n );\n});\n"],"names":["HvActionsGeneric"],"mappings":";;;;;;;;;;AAoEO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,qBAAqB,GAAG,kBAAkB,IACzD,yBAAyB,CAAC;AAE5B,QAAM,UAAU,eAAe;AAE/B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,iBAA2D,CAC/D,OACA,IACA,WACG;AACe,sBAAA,OAAO,IAAI,MAAM;AACnC,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEI,MAAA,CAAC,MAAM,QAAQ,OAAO,EAAU,QAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AACJ,UAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,OAAO,EAAE;AAEjD,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,UAAU;AAEjD,UAAM,oBAAmC;AAAA,MACvC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,UAAU,eAAe,OAAO,UAAU,IAAI,MAAM;AAAA,MAC9D,GAAG;AAAA,IACL;AAEA,UAAM,MAAM,YAAY;AACxB,UAAM,SAAS,YAAY;AAE3B,QAAI,QAAQ;AACV,iCACG,cAAwB,EAAA,GAAG,mBAAmB,OAAO,OACnD,0BADgB,GAEnB;AAAA,IAAA;AAIJ,+BACG,UAAoB,EAAA,GAAG,mBAAmB,WAAW,cACnD,mBADY,GAEf;AAAA,EAEJ;AAEA,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAE9C,UAAA,YAAa,YAAY,cAAc,cAAe;AAE5D,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,MAAO,oBAAA,QAAA,EAAO,MAAK,gBAAe,OAAO,WAAW;AAAA,UACpD,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WAAW;AACX,2BAAA,OAAO,UAAU,IAAI,MAAyB;AAC7D,kCAAsB,OAAO,MAAM;AAAA,UACrC;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AAEM,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,eAAe,GAAG,eAAe;AAAA,QAC5C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,iBACG,kBAAkB,IAClB,QAAQ,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,IAAA;AAAA,EAC5D;AAEJ,CAAC;"}

package/dist/esm/AppSwitcher/Action/Action.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { Info } from "@hitachivantara/uikit-react-icons";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
+import { HvIcon } from "../../icons.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
 import { HvAvatar } from "../../Avatar/Avatar.js";
@@ -97,7 +97,15 @@ const HvAppSwitcherAction = ({
                 }
               }
             ),
-            description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(Info, { className: classes.iconInfo, id: descriptionElementId }) })
+            description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(
+              HvIcon,
+              {
+                name: "Info",
+                compact: true,
+                className: classes.iconInfo,
+                id: descriptionElementId
+              }
+            ) })
           ]
         }
       )

package/dist/esm/AppSwitcher/Action/Action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { ~~Info } from \"@hitachivantara/uikit-react-icons\";\nimport~~ { ~~type~~ ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n /** Id of the application. /\n id?: string;\n /* Name of the application, this is the value that will be displayed on the component. /\n name: string;\n /* URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. /\n iconUrl?: string;\n /* Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. /\n iconElement?: React.ReactElement<any>;\n /* Small description of the application. /\n description?: string;\n /* URL where the application is accessible. /\n url?: string;\n /* Defines if the application should be opened in the same tab or in a new one. /\n target?: \"_top\" \| \"_blank\";\n /* If true, the item will be disabled. /\n disabled?: boolean;\n /* True when the application is selected, false otherwise. /\n isSelected?: boolean;\n /* The color of the application. /\n color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n /* The application data to be used to render the Action object. /\n application: HvAppSwitcherActionApplication;\n /* Callback triggered when the action is clicked. /\n onClickCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication,\n ) => void;\n /* Must return a boolean stating if the action element is selected or not. /\n isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n id,\n className,\n classes: classesProp,\n application,\n onClickCallback = () => {},\n isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { name, description, disabled, iconElement, iconUrl, url, target } =\n application;\n\n const color = getColor(\n disabled ? \"textDisabled\" : application?.color,\n \"text\",\n );\n\n const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n const renderApplicationIcon = () => {\n if (iconElement) {\n return iconElement;\n }\n\n if (iconUrl && validIconUrl) {\n return (\n <img\n className={classes.iconUrl}\n src={iconUrl}\n onError={() => {\n setValidIconUrl(false);\n }}\n alt={description}\n />\n );\n }\n\n const brokenTitle = name.split(\" \");\n const initials =\n brokenTitle[0].substring(0, 1) +\n (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n return (\n <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n {initials}\n </HvAvatar>\n );\n };\n\n const isSelected = isSelectedCallback(application);\n\n /\n Handles the onClick event and triggers the appropriate callback if it exists.\n */\n const handleOnClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClickCallback?.(event, { ...application, isSelected });\n },\n [application, disabled, isSelected, onClickCallback],\n );\n\n const isLink = url != null;\n const descriptionElementId = useUniqueId(id);\n\n return (\n <HvListItem\n id={id}\n interactive\n tabIndex={0}\n selected={isSelected}\n disabled={disabled}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.selected]: isSelected },\n className,\n )}\n >\n <HvTypography\n component=\"button\"\n className={classes.typography}\n onClick={handleOnClick}\n style={{ borderColor: color }}\n aria-label={name}\n {...(description && { \"aria-describedby\": descriptionElementId })}\n {...(isLink && { component: \"a\", href: url, target: target \|\| \"_top\" })}\n >\n <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n <HvOverflowTooltip\n paragraphOverflow\n className={classes.title}\n placement=\"top-start\"\n data={name}\n classes={{\n tooltipAnchorParagraph: classes.titleAnchor,\n }}\n />\n\n {description && (\n <HvTooltip title={description}>\n <Info className={classes.iconInfo} id={descriptionElementId} />\n </HvTooltip>\n )}\n </HvTypography>\n </HvListItem>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,~~oBAAC~~,MAAK,~~EAAA~~,WAAW,QAAQ,~~UAAU~~,IAAI,~~qBAAA~~,~~CAAsB~~,~~EAC/D~~,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
1	+ {"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport type { ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvIcon } from \"../../icons\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n /** Id of the application. /\n id?: string;\n /* Name of the application, this is the value that will be displayed on the component. /\n name: string;\n /* URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. /\n iconUrl?: string;\n /* Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. /\n iconElement?: React.ReactElement<any>;\n /* Small description of the application. /\n description?: string;\n /* URL where the application is accessible. /\n url?: string;\n /* Defines if the application should be opened in the same tab or in a new one. /\n target?: \"_top\" \| \"_blank\";\n /* If true, the item will be disabled. /\n disabled?: boolean;\n /* True when the application is selected, false otherwise. /\n isSelected?: boolean;\n /* The color of the application. /\n color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n /* The application data to be used to render the Action object. /\n application: HvAppSwitcherActionApplication;\n /* Callback triggered when the action is clicked. /\n onClickCallback?: (\n event: React.MouseEvent,\n application: HvAppSwitcherActionApplication,\n ) => void;\n /* Must return a boolean stating if the action element is selected or not. /\n isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n id,\n className,\n classes: classesProp,\n application,\n onClickCallback = () => {},\n isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const { name, description, disabled, iconElement, iconUrl, url, target } =\n application;\n\n const color = getColor(\n disabled ? \"textDisabled\" : application?.color,\n \"text\",\n );\n\n const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n const renderApplicationIcon = () => {\n if (iconElement) {\n return iconElement;\n }\n\n if (iconUrl && validIconUrl) {\n return (\n <img\n className={classes.iconUrl}\n src={iconUrl}\n onError={() => {\n setValidIconUrl(false);\n }}\n alt={description}\n />\n );\n }\n\n const brokenTitle = name.split(\" \");\n const initials =\n brokenTitle[0].substring(0, 1) +\n (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n return (\n <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n {initials}\n </HvAvatar>\n );\n };\n\n const isSelected = isSelectedCallback(application);\n\n /\n Handles the onClick event and triggers the appropriate callback if it exists.\n */\n const handleOnClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClickCallback?.(event, { ...application, isSelected });\n },\n [application, disabled, isSelected, onClickCallback],\n );\n\n const isLink = url != null;\n const descriptionElementId = useUniqueId(id);\n\n return (\n <HvListItem\n id={id}\n interactive\n tabIndex={0}\n selected={isSelected}\n disabled={disabled}\n className={cx(\n classes.root,\n { [classes.disabled]: disabled, [classes.selected]: isSelected },\n className,\n )}\n >\n <HvTypography\n component=\"button\"\n className={classes.typography}\n onClick={handleOnClick}\n style={{ borderColor: color }}\n aria-label={name}\n {...(description && { \"aria-describedby\": descriptionElementId })}\n {...(isLink && { component: \"a\", href: url, target: target \|\| \"_top\" })}\n >\n <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n <HvOverflowTooltip\n paragraphOverflow\n className={classes.title}\n placement=\"top-start\"\n data={name}\n classes={{\n tooltipAnchorParagraph: classes.titleAnchor,\n }}\n />\n\n {description && (\n <HvTooltip title={description}>\n <HvIcon\n name=\"Info\"\n compact\n className={classes.iconInfo}\n id={descriptionElementId}\n />\n </HvTooltip>\n )}\n </HvTypography>\n </HvListItem>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAO;AAAA,gBACP,WAAW,QAAQ;AAAA,gBACnB,IAAI;AAAA,cAAA;AAAA,YAAA,EAER,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}

package/dist/esm/Avatar/Avatar.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
-import { User } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Avatar.styles.js";
 import { staticClasses } from "./Avatar.styles.js";
 const decreaseSizeMap = {
@@ -61,8 +61,9 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     [children] = alt;
   } else {
     children = /* @__PURE__ */ jsx(
-      User,
+      HvIcon,
       {
+        name: "User",
         color,
         size: decreaseSizeMap[size],
         className: classes.fallback

package/dist/esm/Avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport { ~~User } from~~ \~~"@hitachivantara/uikit-react-icons\";\nimport {\~~n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { useAvatarGroupContext } from \"../AvatarGroup/AvatarGroupContext\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nconst decreaseSizeMap = {\n xl: \"lg\",\n lg: \"md\",\n md: \"sm\",\n sm: \"xs\",\n xs: \"xs\",\n} satisfies Record<HvSize, HvSize>;\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" \| \"square\";\n\n/** @deprecated use `HvSize` instead /\nexport type HvAvatarSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n /* The component used for the root node. Either a string to use a DOM element or a component. /\n component?: React.ElementType;\n /* Sets one of the standard sizes of the icons /\n size?: HvSize;\n /* A color representing the foreground color of the avatar's letters or the generic User icon fallback. /\n color?: HvColorAny;\n /* A String representing the background color of the avatar. /\n backgroundColor?: HvColorAny;\n /* The `src` attribute for the `img` element. /\n src?: string;\n /* The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. /\n srcSet?: string;\n /* The `sizes` attribute for the `img` element. /\n sizes?: string;\n /* Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. /\n alt?: string;\n /\n Attributes applied to the `img` element if the component is used to display an image.\n * It can be used to listen for the loading error event.\n /\n imgProps?: React.HTMLAttributes<HTMLImageElement>;\n /* A string representing the type of avatar to display, circular or square. /\n variant?: HvAvatarVariant;\n /* A string representing the color of the avatar border that represents its status. /\n status?: string;\n /* A string representing the color of the avatar badge. /\n badge?: string;\n /* Attributes applied to the avatar element. /\n avatarProps?: MuiAvatarProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvAvatarClasses;\n}\n\n/\n Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<\n // no-indent\n React.ComponentRef<\"div\">,\n HvAvatarProps\n>(function HvAvatar(props, ref) {\n const {\n className,\n style,\n classes: classesProp,\n children: childrenProp,\n component = \"div\",\n size: sizeProp,\n backgroundColor = \"text\",\n color = \"bgContainer\",\n src,\n srcSet,\n sizes,\n alt,\n imgProps,\n status,\n badge,\n variant = \"circular\",\n avatarProps,\n ...others\n } = useDefaultProps(\"HvAvatar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const avatarGroupContext = useAvatarGroupContext();\n\n const size = sizeProp \|\| avatarGroupContext?.size \|\| \"sm\";\n\n let children: React.ReactNode;\n\n // Use a hook instead of onError on the img element to support server-side rendering.\n const imageLoaded = useImageLoaded(src, srcSet);\n const hasImg = src \|\| srcSet;\n const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n if (hasImgNotFailing) {\n children = (\n <img\n alt={alt}\n src={src}\n srcSet={srcSet}\n sizes={sizes}\n className={classes.img}\n {...imgProps}\n />\n );\n } else if (childrenProp != null) {\n children = childrenProp;\n } else if (hasImg && alt) {\n [children] = alt;\n } else {\n children = (\n <User\n color={color}\n size={decreaseSizeMap[size]}\n className={classes.fallback}\n />\n );\n }\n\n const inlineStyle: React.CSSProperties = {\n ...style,\n };\n\n if (component != null && typeof component !== \"string\") {\n // override border-radius with custom components\n inlineStyle.borderRadius = \"50%\";\n }\n\n if (!hasImgNotFailing) {\n inlineStyle.backgroundColor = getColor(backgroundColor, \"text\");\n inlineStyle.color = getColor(color, \"textDimmed\");\n }\n\n const statusInlineStyle: React.CSSProperties = {};\n if (status) {\n // set the status border. we're using the boxShadow property to set the border\n // to be inside the container and not on its edge.\n const statusColor = getColor(status, \"positive\");\n statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n }\n\n return (\n <div\n ref={ref}\n className={cx(classes.container, classes.status, classes[variant])}\n style={statusInlineStyle}\n {...others}\n >\n {badge && (\n <div\n className={classes.badge}\n style={{ backgroundColor: getColor(badge, \"positive\") }}\n />\n )}\n <MuiAvatar\n component={component}\n // Consider not using the root and className classes in this component\n className={cx(classes.root, classes.avatar, classes[size], className)}\n style={inlineStyle}\n variant={variant}\n size={size}\n {...avatarProps}\n >\n {children}\n </MuiAvatar>\n </div>\n );\n});\n"],"names":["HvAvatar"],"mappings":";;;;;;;;;;AAcA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAiDO,MAAM,WAAW,WAItB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,qBAAqB,sBAAsB;AAE3C,QAAA,OAAO,YAAY,oBAAoB,QAAQ;AAEjD,MAAA;AAGE,QAAA,cAAc,eAAe,KAAK,MAAM;AAC9C,QAAM,SAAS,OAAO;AAChB,QAAA,mBAAmB,UAAU,gBAAgB;AAEnD,MAAI,kBAAkB;AAElB,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,WAEO,gBAAgB,MAAM;AACpB,eAAA;AAAA,EAAA,WACF,UAAU,KAAK;AACxB,KAAC,QAAQ,IAAI;AAAA,EAAA,OACR;AAEH,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,gBAAgB,IAAI;AAAA,QAC1B,WAAW,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EAAA;AAIJ,QAAM,cAAmC;AAAA,IACvC,GAAG;AAAA,EACL;AAEA,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAAA;AAG7B,MAAI,CAAC,kBAAkB;AACT,gBAAA,kBAAkB,SAAS,iBAAiB,MAAM;AAClD,gBAAA,QAAQ,SAAS,OAAO,YAAY;AAAA,EAAA;AAGlD,QAAM,oBAAyC,CAAC;AAChD,MAAI,QAAQ;AAGJ,UAAA,cAAc,SAAS,QAAQ,UAAU;AAC7B,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EAAA;AAIlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,OAAO,CAAC;AAAA,MACjE,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,SAAS,OAAO,UAAU,EAAE;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YAEA,WAAW,GAAG,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS;AAAA,YACpE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { useAvatarGroupContext } from \"../AvatarGroup/AvatarGroupContext\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { HvIcon } from \"../icons\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nconst decreaseSizeMap = {\n xl: \"lg\",\n lg: \"md\",\n md: \"sm\",\n sm: \"xs\",\n xs: \"xs\",\n} satisfies Record<HvSize, HvSize>;\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" \| \"square\";\n\n/** @deprecated use `HvSize` instead /\nexport type HvAvatarSize = \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n /* The component used for the root node. Either a string to use a DOM element or a component. /\n component?: React.ElementType;\n /* Sets one of the standard sizes of the icons /\n size?: HvSize;\n /* A color representing the foreground color of the avatar's letters or the generic User icon fallback. /\n color?: HvColorAny;\n /* A String representing the background color of the avatar. /\n backgroundColor?: HvColorAny;\n /* The `src` attribute for the `img` element. /\n src?: string;\n /* The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. /\n srcSet?: string;\n /* The `sizes` attribute for the `img` element. /\n sizes?: string;\n /* Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. /\n alt?: string;\n /\n Attributes applied to the `img` element if the component is used to display an image.\n * It can be used to listen for the loading error event.\n /\n imgProps?: React.HTMLAttributes<HTMLImageElement>;\n /* A string representing the type of avatar to display, circular or square. /\n variant?: HvAvatarVariant;\n /* A string representing the color of the avatar border that represents its status. /\n status?: string;\n /* A string representing the color of the avatar badge. /\n badge?: string;\n /* Attributes applied to the avatar element. /\n avatarProps?: MuiAvatarProps;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvAvatarClasses;\n}\n\n/\n Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<\n // no-indent\n React.ComponentRef<\"div\">,\n HvAvatarProps\n>(function HvAvatar(props, ref) {\n const {\n className,\n style,\n classes: classesProp,\n children: childrenProp,\n component = \"div\",\n size: sizeProp,\n backgroundColor = \"text\",\n color = \"bgContainer\",\n src,\n srcSet,\n sizes,\n alt,\n imgProps,\n status,\n badge,\n variant = \"circular\",\n avatarProps,\n ...others\n } = useDefaultProps(\"HvAvatar\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const avatarGroupContext = useAvatarGroupContext();\n\n const size = sizeProp \|\| avatarGroupContext?.size \|\| \"sm\";\n\n let children: React.ReactNode;\n\n // Use a hook instead of onError on the img element to support server-side rendering.\n const imageLoaded = useImageLoaded(src, srcSet);\n const hasImg = src \|\| srcSet;\n const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n if (hasImgNotFailing) {\n children = (\n <img\n alt={alt}\n src={src}\n srcSet={srcSet}\n sizes={sizes}\n className={classes.img}\n {...imgProps}\n />\n );\n } else if (childrenProp != null) {\n children = childrenProp;\n } else if (hasImg && alt) {\n [children] = alt;\n } else {\n children = (\n <HvIcon\n name=\"User\"\n color={color}\n size={decreaseSizeMap[size]}\n className={classes.fallback}\n />\n );\n }\n\n const inlineStyle: React.CSSProperties = {\n ...style,\n };\n\n if (component != null && typeof component !== \"string\") {\n // override border-radius with custom components\n inlineStyle.borderRadius = \"50%\";\n }\n\n if (!hasImgNotFailing) {\n inlineStyle.backgroundColor = getColor(backgroundColor, \"text\");\n inlineStyle.color = getColor(color, \"textDimmed\");\n }\n\n const statusInlineStyle: React.CSSProperties = {};\n if (status) {\n // set the status border. we're using the boxShadow property to set the border\n // to be inside the container and not on its edge.\n const statusColor = getColor(status, \"positive\");\n statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n }\n\n return (\n <div\n ref={ref}\n className={cx(classes.container, classes.status, classes[variant])}\n style={statusInlineStyle}\n {...others}\n >\n {badge && (\n <div\n className={classes.badge}\n style={{ backgroundColor: getColor(badge, \"positive\") }}\n />\n )}\n <MuiAvatar\n component={component}\n // Consider not using the root and className classes in this component\n className={cx(classes.root, classes.avatar, classes[size], className)}\n style={inlineStyle}\n variant={variant}\n size={size}\n {...avatarProps}\n >\n {children}\n </MuiAvatar>\n </div>\n );\n});\n"],"names":["HvAvatar"],"mappings":";;;;;;;;;;AAcA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAiDO,MAAM,WAAW,WAItB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,qBAAqB,sBAAsB;AAE3C,QAAA,OAAO,YAAY,oBAAoB,QAAQ;AAEjD,MAAA;AAGE,QAAA,cAAc,eAAe,KAAK,MAAM;AAC9C,QAAM,SAAS,OAAO;AAChB,QAAA,mBAAmB,UAAU,gBAAgB;AAEnD,MAAI,kBAAkB;AAElB,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,WAEO,gBAAgB,MAAM;AACpB,eAAA;AAAA,EAAA,WACF,UAAU,KAAK;AACxB,KAAC,QAAQ,IAAI;AAAA,EAAA,OACR;AAEH,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,MAAM,gBAAgB,IAAI;AAAA,QAC1B,WAAW,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EAAA;AAIJ,QAAM,cAAmC;AAAA,IACvC,GAAG;AAAA,EACL;AAEA,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAAA;AAG7B,MAAI,CAAC,kBAAkB;AACT,gBAAA,kBAAkB,SAAS,iBAAiB,MAAM;AAClD,gBAAA,QAAQ,SAAS,OAAO,YAAY;AAAA,EAAA;AAGlD,QAAM,oBAAyC,CAAC;AAChD,MAAI,QAAQ;AAGJ,UAAA,cAAc,SAAS,QAAQ,UAAU;AAC7B,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EAAA;AAIlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,OAAO,CAAC;AAAA,MACjE,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,SAAS,OAAO,UAAU,EAAE;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YAEA,WAAW,GAAG,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS;AAAA,YACpE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/BaseDropdown/BaseDropdown.js CHANGED Viewed

@@ -3,10 +3,10 @@ import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElemen
 import { usePopper } from "react-popper";
 import { useForkRef } from "@mui/material/utils";
 import { detectOverflow } from "@popperjs/core";
-import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvIcon } from "../icons.js";
 import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
 import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
@@ -90,7 +90,6 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
     },
     [isOpen, disabled, setIsOpen, onToggle, referenceElement]
   );
-  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
   const defaultHeaderElement = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -120,10 +119,11 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
           }
         ),
         /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(
-          ExpanderComponent,
+          HvIcon,
           {
-            iconSize: "XS",
-            color: disabled ? "textDisabled" : void 0,
+            name: "CaretDown",
+            size: "xs",
+            rotate: isOpen,
             className: classes.arrow
           }
         ) })