@hitachivantara/uikit-react-core 5.41.1 → 5.42.1

package/dist/esm/ActionsGeneric/ActionsGeneric.mjs

@@ -0,0 +1,90 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { isValidElement } from "react";
+import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { setId } from "../utils/setId.mjs";
+import { useClasses } from "./ActionsGeneric.styles.mjs";
+import { staticClasses } from "./ActionsGeneric.styles.mjs";
+import { HvButton } from "../Button/Button.mjs";
+import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.mjs";
+const HvActionsGeneric = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    category = "secondaryGhost",
+    disabled = false,
+    actions = [],
+    actionsCallback,
+    maxVisibleActions = Infinity,
+    ...others
+  } = useDefaultProps("HvActionsGeneric", props);
+  const { classes, cx } = useClasses(classesProp);
+  if (!Array.isArray(actions))
+    return isValidElement(actions) ? actions : null;
+  const renderButton = (action, idx) => {
+    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;
+    const actionId = setId(id, idx, "action", action.id);
+    const renderedIcon = isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
+    return /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        id: actionId,
+        variant: category,
+        className: classes.button,
+        disabled: actDisabled ?? disabled,
+        onClick: (event) => actionsCallback?.(event, id || "", action),
+        startIcon: renderedIcon,
+        ...other,
+        children: label
+      },
+      actionId || idx
+    );
+  };
+  const renderActionsGrid = () => {
+    const actsVisible = actions.slice(0, maxVisibleActions);
+    const actsDropdown = actions.slice(maxVisibleActions);
+    const semantic = category === "semantic";
+    const iconColor = disabled && "secondary_60" || semantic && "base_dark" || void 0;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      actsVisible.map((action, idx) => renderButton(action, idx)),
+      /* @__PURE__ */ jsx(
+        HvDropDownMenu,
+        {
+          id: setId(id, "menu"),
+          disabled,
+          category,
+          classes: {
+            root: classes.dropDownMenu,
+            icon: classes.dropDownMenuButton,
+            iconSelected: classes.dropDownMenuButtonSelected
+          },
+          icon: /* @__PURE__ */ jsx(MoreOptionsVertical, { color: iconColor }),
+          placement: "left",
+          onClick: (event, action) => actionsCallback?.(event, id || "", action),
+          dataList: actsDropdown,
+          keepOpened: false,
+          disablePortal: false
+        }
+      )
+    ] });
+  };
+  const actionOverflow = actions.length > maxVisibleActions;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        { [classes.actionContainer]: actionOverflow },
+        className
+      ),
+      ...others,
+      children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
+    }
+  );
+};
+export {
+  HvActionsGeneric,
+  staticClasses as actionsGenericClasses
+};
+//# sourceMappingURL=ActionsGeneric.mjs.map

package/dist/esm/ActionsGeneric/ActionsGeneric.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsGeneric.mjs","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButton, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu } from \"../DropDownMenu\";\nimport { setId } from \"../utils/setId\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  id: string;\n  label: string;\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  disabled?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /** Button category. */\n  category?: HvButtonVariant;\n  /**  Whether actions should be all disabled */\n  disabled?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an Array of actions `{id, label, icon, disabled}` */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**  The callback function ran when an action is triggered, receiving `action` as param */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric\n  ) => void;\n  /**  The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\",\n    disabled = false,\n    actions = [],\n    actionsCallback,\n    maxVisibleActions = Infinity,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;\n    const actionId = setId(id, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    return (\n      <HvButton\n        id={actionId}\n        key={actionId || idx}\n        variant={category}\n        className={classes.button}\n        disabled={actDisabled ?? disabled}\n        onClick={(event) => actionsCallback?.(event, id || \"\", action)}\n        startIcon={renderedIcon}\n        {...other}\n      >\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 semantic = category === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(id, \"menu\")}\n          disabled={disabled}\n          category={category}\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            actionsCallback?.(event, id || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\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":[],"mappings":";;;;;;;;;AA4Ca,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE1C,MAAA,CAAC,MAAM,QAAQ,OAAO;AAAU,WAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA,EAAE,UAAU,aAAa,IAAI,OAAO,MAAM,OAAO,GAAG,MAAU,IAAA;AACpE,UAAM,WAAW,MAAM,IAAI,KAAK,UAAU,OAAO,EAAE;AAE7C,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,SAAA,CAAU;AAG/C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QAEJ,SAAS;AAAA,QACT,WAAW,QAAQ;AAAA,QACnB,UAAU,eAAe;AAAA,QACzB,SAAS,CAAC,UAAU,kBAAkB,OAAO,MAAM,IAAI,MAAM;AAAA,QAC7D,WAAW;AAAA,QACV,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,MARI,YAAY;AAAA,IAAA;AAAA,EASnB;AAIJ,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAEpD,UAAM,WAAW,aAAa;AAC9B,UAAM,YACH,YAAY,kBAAoB,YAAY,eAAgB;AAE/D,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,IAAI,MAAM;AAAA,UACpB;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,WACf,kBAAkB,OAAO,MAAM,IAAI,MAAyB;AAAA,UAE9D,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IACF,EAAA,CAAA;AAAA,EAAA;AAIE,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,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,EAAA;AAGhE;"}

package/dist/esm/ActionsGeneric/ActionsGeneric.styles.mjs

@@ -0,0 +1,22 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvActionsGeneric", {
+  root: {},
+  button: {
+    "&:not(:last-child)": {
+      marginRight: theme.space.xs
+    },
+    "&:hover": {
+      backgroundColor: theme.alpha("base_light", 0.3)
+    }
+  },
+  actionContainer: { display: "flex", alignItems: "center", float: "right" },
+  dropDownMenu: {},
+  dropDownMenuButton: {},
+  dropDownMenuButtonSelected: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ActionsGeneric.styles.mjs.map

package/dist/esm/ActionsGeneric/ActionsGeneric.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionsGeneric.styles.mjs","sources":["../../../src/ActionsGeneric/ActionsGeneric.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionsGeneric\", {\n  root: {},\n  button: {\n    \"&:not(:last-child)\": {\n      marginRight: theme.space.xs,\n    },\n    \"&:hover\": {\n      backgroundColor: theme.alpha(\"base_light\", 0.3),\n    },\n  },\n  actionContainer: { display: \"flex\", alignItems: \"center\", float: \"right\" },\n  dropDownMenu: {},\n  dropDownMenuButton: {},\n  dropDownMenuButtonSelected: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,sBAAsB;AAAA,MACpB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,cAAc,GAAG;AAAA,IAChD;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,QAAQ,YAAY,UAAU,OAAO,QAAQ;AAAA,EACzE,cAAc,CAAC;AAAA,EACf,oBAAoB,CAAC;AAAA,EACrB,4BAA4B,CAAC;AAC/B,CAAC;"}

package/dist/esm/AppSwitcher/Action/Action.mjs

@@ -0,0 +1,149 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { theme, getColor } from "@hitachivantara/uikit-styles";
+import { Info } from "@hitachivantara/uikit-react-icons";
+import { useUniqueId } from "../../hooks/useUniqueId.mjs";
+import { useClasses } from "./Action.styles.mjs";
+import { staticClasses } from "./Action.styles.mjs";
+import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.mjs";
+import { HvAvatar } from "../../Avatar/Avatar.mjs";
+import { HvTypography } from "../../Typography/Typography.mjs";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.mjs";
+import { HvTooltip } from "../../Tooltip/Tooltip.mjs";
+const HvAppSwitcherAction = ({
+  id,
+  className,
+  classes: classesProp,
+  application,
+  onClickCallback = () => {
+  },
+  isSelectedCallback = () => false
+}) => {
+  const { classes, cx } = useClasses(classesProp);
+  const { name, description, disabled, iconElement, iconUrl, url, target } = application;
+  const color = disabled ? theme.colors.secondary_60 : getColor(application?.color, theme.colors.secondary);
+  const [validIconUrl, setValidIconUrl] = useState(true);
+  const renderApplicationIcon = () => {
+    if (iconElement) {
+      return iconElement;
+    }
+    if (iconUrl && validIconUrl) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: classes.iconUrl,
+          src: iconUrl,
+          onError: () => {
+            setValidIconUrl(false);
+          },
+          alt: description
+        }
+      );
+    }
+    const brokenTitle = name.split(" ");
+    const initials = brokenTitle[0].substring(0, 1) + (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : "");
+    return /* @__PURE__ */ jsx(HvAvatar, { size: "sm", backgroundColor: color, variant: "square", "aria-hidden": true, children: initials });
+  };
+  const isSelected = isSelectedCallback(application);
+  const handleOnClick = useCallback(
+    (event) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      onClickCallback?.(event, { ...application, isSelected });
+    },
+    [application, disabled, isSelected, onClickCallback]
+  );
+  const isLink = url != null;
+  const descriptionElementId = useUniqueId(id, "hvAction-description");
+  const renderApplication = useCallback(
+    (children) => {
+      const typographyProps = {
+        className: classes.typography,
+        onClick: handleOnClick,
+        style: { borderColor: color },
+        "aria-label": name,
+        ...description && { "aria-describedby": descriptionElementId }
+      };
+      if (isLink) {
+        return /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            component: "a",
+            href: url,
+            target: target || "_top",
+            ...typographyProps,
+            children
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(HvTypography, { component: "button", ...typographyProps, children });
+    },
+    [
+      classes.typography,
+      color,
+      description,
+      descriptionElementId,
+      handleOnClick,
+      isLink,
+      name,
+      target,
+      url
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    HvListItem,
+    {
+      id,
+      interactive: true,
+      tabIndex: 0,
+      selected: isSelected,
+      disabled,
+      className: cx(
+        classes.root,
+        { [classes.disabled]: disabled, [classes.selected]: isSelected },
+        className
+      ),
+      children: renderApplication(
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: classes.icon, children: renderApplicationIcon() }),
+          /* @__PURE__ */ jsx(
+            HvOverflowTooltip,
+            {
+              paragraphOverflow: true,
+              className: classes.title,
+              placement: "top-start",
+              data: name,
+              classes: {
+                tooltipAnchorParagraph: classes.titleAnchor
+              }
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            HvTooltip,
+            {
+              disableFocusListener: true,
+              disableTouchListener: true,
+              title: /* @__PURE__ */ jsx(HvTypography, { children: description }),
+              children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                Info,
+                {
+                  className: classes.iconInfo,
+                  role: "img",
+                  "aria-label": description,
+                  id: descriptionElementId
+                }
+              ) })
+            }
+          )
+        ] })
+      )
+    }
+  );
+};
+export {
+  HvAppSwitcherAction,
+  staticClasses as appSwitcherActionClasses
+};
+//# sourceMappingURL=Action.mjs.map

package/dist/esm/AppSwitcher/Action/Action.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.mjs","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport { theme, getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvTypography } from \"../../Typography\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useClasses, staticClasses } 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;\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 = disabled\n    ? theme.colors.secondary_60\n    : getColor(application?.color, theme.colors.secondary);\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, \"hvAction-description\");\n\n  const renderApplication = useCallback(\n    (children: React.ReactNode) => {\n      const typographyProps = {\n        className: classes.typography,\n        onClick: handleOnClick,\n        style: { borderColor: color },\n        \"aria-label\": name,\n        ...(description && { \"aria-describedby\": descriptionElementId }),\n      };\n\n      if (isLink) {\n        return (\n          <HvTypography\n            component=\"a\"\n            href={url}\n            target={target || \"_top\"}\n            {...typographyProps}\n          >\n            {children}\n          </HvTypography>\n        );\n      }\n\n      return (\n        <HvTypography component=\"button\" {...typographyProps}>\n          {children}\n        </HvTypography>\n      );\n    },\n    [\n      classes.typography,\n      color,\n      description,\n      descriptionElementId,\n      handleOnClick,\n      isLink,\n      name,\n      target,\n      url,\n    ]\n  );\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      {/* As HvTooltip don't have the id prop, is not possible to use the aria-labelledby to reference it.\n       In substitution is used the aria-label with the \"title\" value */}\n      {renderApplication(\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\n              disableFocusListener\n              disableTouchListener\n              title={<HvTypography>{description}</HvTypography>}\n            >\n              <div>\n                <Info\n                  className={classes.iconInfo}\n                  role=\"img\"\n                  aria-label={description}\n                  id={descriptionElementId}\n                />\n              </div>\n            </HvTooltip>\n          )}\n        </>\n      )}\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/AppSwitcher/Action/Action.styles.mjs

@@ -0,0 +1,51 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses(
+  "HvAppSwitcher-Action",
+  {
+    root: {
+      width: "100%",
+      maxWidth: 280,
+      minHeight: 52,
+      marginRight: theme.space.sm
+    },
+    icon: { display: "flex", minWidth: 40, justifyContent: "center" },
+    iconUrl: { width: 32 },
+    iconInfo: { minWidth: 32 },
+    disabled: {},
+    selected: {},
+    typography: {
+      display: "flex",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      width: "100%",
+      minHeight: 52,
+      padding: `6px ${theme.space.xs}`,
+      border: "none",
+      borderLeft: `solid 2px ${theme.colors.secondary}`,
+      cursor: "pointer",
+      textDecoration: "inherit",
+      color: "inherit",
+      backgroundColor: "inherit",
+      "$disabled &": {
+        cursor: "not-allowed"
+      }
+    },
+    title: {
+      flexGrow: 1,
+      whiteSpace: "normal",
+      textAlign: "left",
+      margin: `0 ${theme.space.xs}`,
+      textWrap: "balance",
+      ...theme.typography.label
+    },
+    titleAnchor: {
+      WebkitLineClamp: 2
+    }
+  }
+);
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Action.styles.mjs.map

package/dist/esm/AppSwitcher/Action/Action.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.styles.mjs","sources":["../../../../src/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\n      marginRight: theme.space.sm,\n    },\n    icon: { display: \"flex\", minWidth: 40, justifyContent: \"center\" },\n    iconUrl: { width: 32 },\n    iconInfo: { minWidth: 32 },\n    disabled: {},\n    selected: {},\n    typography: {\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n\n      width: \"100%\",\n      minHeight: 52,\n\n      padding: `6px ${theme.space.xs}`,\n\n      border: \"none\",\n      borderLeft: `solid 2px ${theme.colors.secondary}`,\n\n      cursor: \"pointer\",\n\n      textDecoration: \"inherit\",\n      color: \"inherit\",\n      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      whiteSpace: \"normal\",\n      textAlign: \"left\",\n      margin: `0 ${theme.space.xs}`,\n      textWrap: \"balance\",\n      ...theme.typography.label,\n    },\n    titleAnchor: {\n      WebkitLineClamp: 2,\n    },\n  }\n);\n"],"names":[],"mappings":";;AAIa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,IACA,MAAM,EAAE,SAAS,QAAQ,UAAU,IAAI,gBAAgB,SAAS;AAAA,IAChE,SAAS,EAAE,OAAO,GAAG;AAAA,IACrB,UAAU,EAAE,UAAU,GAAG;AAAA,IACzB,UAAU,CAAC;AAAA,IACX,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,SAAS,OAAO,MAAM,MAAM,EAAE;AAAA,MAE9B,QAAQ;AAAA,MACR,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,MAE/C,QAAQ;AAAA,MAER,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,iBAAiB;AAAA,MAEjB,eAAe;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAK,MAAM,MAAM,EAAE;AAAA,MAC3B,UAAU;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,IACA,aAAa;AAAA,MACX,iBAAiB;AAAA,IACnB;AAAA,EACF;AACF;"}

package/dist/esm/AppSwitcher/AppSwitcher.mjs

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./AppSwitcher.styles.mjs";
+import { staticClasses } from "./AppSwitcher.styles.mjs";
+import { HvAppSwitcherAction } from "./Action/Action.mjs";
+import { HvTypography } from "../Typography/Typography.mjs";
+import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.mjs";
+import { HvListContainer } from "../ListContainer/ListContainer.mjs";
+const HvAppSwitcher = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    layout = "single",
+    title,
+    applications,
+    onActionClickedCallback = () => {
+    },
+    isActionSelectedCallback = () => false,
+    header,
+    footer,
+    isOpen
+  } = useDefaultProps("HvAppSwitcher", props);
+  const { classes, cx } = useClasses(classesProp);
+  const panelActions = useMemo(
+    () => applications && applications?.map((application) => {
+      if (application.name) {
+        return /* @__PURE__ */ jsx(
+          HvAppSwitcherAction,
+          {
+            application,
+            onClickCallback: onActionClickedCallback,
+            isSelectedCallback: isActionSelectedCallback,
+            classes: {
+              root: classes.item,
+              selected: classes.itemSelected,
+              disabled: classes.itemDisabled,
+              typography: classes.itemTrigger,
+              icon: classes.itemIcon,
+              title: classes.itemTitle,
+              iconInfo: classes.itemInfoIcon
+            }
+          },
+          application.id || `${application.name}_${application.url}`
+        );
+      }
+      return void 0;
+    }),
+    [applications, classes, isActionSelectedCallback, onActionClickedCallback]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: cx(
+        classes.root,
+        classes[layout],
+        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },
+        className
+      ),
+      children: [
+        header && /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "label", className: classes.title, children: header }) || title && /* @__PURE__ */ jsx(
+          HvOverflowTooltip,
+          {
+            className: classes.title,
+            data: title,
+            placement: "top-start",
+            classes: {
+              tooltipAnchorParagraph: classes.titleAnchor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(HvListContainer, { disableGutters: true, className: classes.actionsContainer, children: panelActions }),
+        footer && /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            component: "div",
+            variant: "label",
+            className: classes.footerContainer,
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  HvAppSwitcher,
+  staticClasses as appSwitcherClasses
+};
+//# sourceMappingURL=AppSwitcher.mjs.map

package/dist/esm/AppSwitcher/AppSwitcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSwitcher.mjs","sources":["../../../src/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvTypography } from \"../Typography\";\nimport { HvOverflowTooltip } from \"../OverflowTooltip\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherProps extends HvBaseProps {\n  /** Number of columns to render. One, two, or whatever fits the component's width. */\n  layout?: \"single\" | \"dual\" | \"fluid\";\n  /** Title to be displayed on the header of the component. */\n  title?: string;\n  /** The list of applications to be used to render the actions on the component. */\n  applications?: HvAppSwitcherActionApplication[];\n  /** Triggered when an action is clicked. */\n  onActionClickedCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isActionSelectedCallback?: (\n    application: HvAppSwitcherActionApplication\n  ) => boolean;\n  /** Element to be added to the header container, if none is provided a label with the title will be added. */\n  header?: React.ReactNode;\n  /** Element to be added to the footer container. */\n  footer?: React.ReactNode;\n  /**\n   * Flag stating if the panel is opened or closed.\n   *\n   * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.\n   */\n  isOpen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherClasses;\n}\n\nexport const HvAppSwitcher = (props: HvAppSwitcherProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    layout = \"single\",\n    title,\n    applications,\n    onActionClickedCallback = () => {},\n    isActionSelectedCallback = () => false,\n    header,\n    footer,\n    isOpen,\n  } = useDefaultProps(\"HvAppSwitcher\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const panelActions = useMemo(\n    () =>\n      applications &&\n      applications?.map((application) => {\n        if (application.name) {\n          return (\n            <HvAppSwitcherAction\n              key={application.id || `${application.name}_${application.url}`}\n              application={application}\n              onClickCallback={onActionClickedCallback}\n              isSelectedCallback={isActionSelectedCallback}\n              classes={{\n                root: classes.item,\n                selected: classes.itemSelected,\n                disabled: classes.itemDisabled,\n                typography: classes.itemTrigger,\n                icon: classes.itemIcon,\n                title: classes.itemTitle,\n                iconInfo: classes.itemInfoIcon,\n              }}\n            />\n          );\n        }\n\n        return undefined;\n      }),\n    [applications, classes, isActionSelectedCallback, onActionClickedCallback]\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        classes[layout],\n        { [classes.open]: !!isOpen, [classes.closed]: isOpen === false },\n        className\n      )}\n    >\n      {(header && (\n        <HvTypography component=\"div\" variant=\"label\" className={classes.title}>\n          {header}\n        </HvTypography>\n      )) ||\n        (title && (\n          <HvOverflowTooltip\n            className={classes.title}\n            data={title}\n            placement=\"top-start\"\n            classes={{\n              tooltipAnchorParagraph: classes.titleAnchor,\n            }}\n          />\n        ))}\n      <HvListContainer disableGutters className={classes.actionsContainer}>\n        {panelActions}\n      </HvListContainer>\n      {footer && (\n        <HvTypography\n          component=\"div\"\n          variant=\"label\"\n          className={classes.footerContainer}\n        >\n          {footer}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8Ca,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,0BAA0B,MAAM;AAAA,IAAC;AAAA,IACjC,2BAA2B,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,eAAe;AAAA,IACnB,MACE,gBACA,cAAc,IAAI,CAAC,gBAAgB;AACjC,UAAI,YAAY,MAAM;AAElB,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,iBAAiB;AAAA,YACjB,oBAAoB;AAAA,YACpB,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,cACd,UAAU,QAAQ;AAAA,cAClB,UAAU,QAAQ;AAAA,cAClB,YAAY,QAAQ;AAAA,cACpB,MAAM,QAAQ;AAAA,cACd,OAAO,QAAQ;AAAA,cACf,UAAU,QAAQ;AAAA,YACpB;AAAA,UAAA;AAAA,UAZK,YAAY,MAAM,GAAG,YAAY,IAAI,IAAI,YAAY,GAAG;AAAA,QAAA;AAAA,MAenE;AAEO,aAAA;AAAA,IAAA,CACR;AAAA,IACH,CAAC,cAAc,SAAS,0BAA0B,uBAAuB;AAAA,EAAA;AAIzE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,MAAM;AAAA,QACd,EAAE,CAAC,QAAQ,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,MAAM,GAAG,WAAW,MAAM;AAAA,QAC/D;AAAA,MACF;AAAA,MAEE,UAAA;AAAA,QACA,UAAA,oBAAC,cAAa,EAAA,WAAU,OAAM,SAAQ,SAAQ,WAAW,QAAQ,OAC9D,UACH,OAAA,CAAA,KAEC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,MAAM;AAAA,YACN,WAAU;AAAA,YACV,SAAS;AAAA,cACP,wBAAwB,QAAQ;AAAA,YAClC;AAAA,UAAA;AAAA,QACF;AAAA,4BAEH,iBAAgB,EAAA,gBAAc,MAAC,WAAW,QAAQ,kBAChD,UACH,cAAA;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/AppSwitcher/AppSwitcher.styles.mjs

@@ -0,0 +1,65 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvAppSwitcher", {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: theme.colors.atmo1,
+    overflow: "hidden",
+    // we need to play with the 4px because of the focus ring
+    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${
+    //   theme.spacing(2) - 4
+    // }px`,
+    padding: theme.spacing("sm", 0, "sm", "sm")
+  },
+  item: {},
+  itemSelected: {},
+  itemDisabled: {},
+  itemTrigger: {},
+  itemIcon: {},
+  itemTitle: {},
+  itemInfoIcon: {},
+  actionsContainer: {
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "flex-start",
+    overflowY: "auto",
+    // We need to play with the 4px because of the focus ring
+    padding: "4px 0 4px 4px"
+  },
+  footerContainer: {
+    display: "flex",
+    alignItems: "center",
+    marginTop: "auto",
+    height: 52,
+    // We need to play with the 4px because of the focus ring
+    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,
+    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`
+  },
+  open: {
+    zIndex: "1200",
+    position: "absolute",
+    top: "50px",
+    overflowX: "hidden",
+    boxShadow: theme.colors.shadow
+  },
+  closed: { display: "none" },
+  title: {
+    minHeight: 36,
+    // we need to play with the 4px because of the focus ring
+    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,
+    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,
+    ...theme.typography.label
+  },
+  titleAnchor: {
+    WebkitLineClamp: 2
+  },
+  single: { width: 320 },
+  dual: { width: 640 },
+  fluid: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=AppSwitcher.styles.mjs.map

package/dist/esm/AppSwitcher/AppSwitcher.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSwitcher.styles.mjs","sources":["../../../src/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAppSwitcher\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    overflow: \"hidden\",\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `${theme.spacing(2) - 4}px 0 ${theme.spacing(2) - 4}px ${\n    //   theme.spacing(2) - 4\n    // }px`,\n    padding: theme.spacing(\"sm\", 0, \"sm\", \"sm\"),\n  },\n  item: {},\n  itemSelected: {},\n  itemDisabled: {},\n  itemTrigger: {},\n  itemIcon: {},\n  itemTitle: {},\n  itemInfoIcon: {},\n  actionsContainer: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"flex-start\",\n\n    overflowY: \"auto\",\n\n    // We need to play with the 4px because of the focus ring\n    padding: \"4px 0 4px 4px\",\n  },\n  footerContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    marginTop: \"auto\",\n    height: 52,\n\n    // We need to play with the 4px because of the focus ring\n    // padding: `${theme.hv.spacing.sm - 4}px ${theme.hv.spacing.sm + 4}px 4px 4px`,\n    padding: `${theme.space.sm} ${theme.space.sm} 4px 4px`,\n  },\n  open: {\n    zIndex: \"1200\",\n    position: \"absolute\",\n    top: \"50px\",\n    overflowX: \"hidden\",\n    boxShadow: theme.colors.shadow,\n  },\n  closed: { display: \"none\" },\n  title: {\n    minHeight: 36,\n\n    // we need to play with the 4px because of the focus ring\n    // padding: `4px ${theme.hv.spacing.sm}px ${theme.hv.spacing.sm - 4}px 4px`,\n    padding: `4px ${theme.space.sm} ${theme.space.sm} 4px`,\n    ...theme.typography.label,\n  },\n  titleAnchor: {\n    WebkitLineClamp: 2,\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,iBAAiB,MAAM,OAAO;AAAA,IAC9B,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,SAAS,MAAM,QAAQ,MAAM,GAAG,MAAM,IAAI;AAAA,EAC5C;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc,CAAC;AAAA,EACf,cAAc,CAAC;AAAA,EACf,aAAa,CAAC;AAAA,EACd,UAAU,CAAC;AAAA,EACX,WAAW,CAAC;AAAA,EACZ,cAAc,CAAC;AAAA,EACf,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAEhB,WAAW;AAAA;AAAA,IAGX,SAAS;AAAA,EACX;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA;AAAA;AAAA,IAIR,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC9C;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,WAAW;AAAA,IACX,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,WAAW;AAAA;AAAA;AAAA,IAIX,SAAS,OAAO,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,IAChD,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,aAAa;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,QAAQ,EAAE,OAAO,IAAI;AAAA,EACrB,MAAM,EAAE,OAAO,IAAI;AAAA,EACnB,OAAO,CAAC;AACV,CAAC;"}

package/dist/esm/Avatar/Avatar.mjs

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { User } from "@hitachivantara/uikit-react-icons";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
+import MuiAvatar from "@mui/material/Avatar";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useImageLoaded } from "../hooks/useImageLoaded.mjs";
+import { decreaseSize } from "../utils/sizes.mjs";
+import { useClasses } from "./Avatar.styles.mjs";
+import { staticClasses } from "./Avatar.styles.mjs";
+const HvAvatar = forwardRef((props, ref) => {
+  const {
+    className,
+    style,
+    classes: classesProp,
+    children: childrenProp,
+    component = "div",
+    size = "sm",
+    backgroundColor = "secondary",
+    color = "atmo1",
+    src,
+    srcSet,
+    sizes,
+    alt,
+    imgProps,
+    status,
+    badge,
+    variant = "circular",
+    avatarProps,
+    ...others
+  } = useDefaultProps("HvAvatar", props);
+  const { classes, cx } = useClasses(classesProp);
+  let children;
+  const imageLoaded = useImageLoaded(src, srcSet);
+  const hasImg = src || srcSet;
+  const hasImgNotFailing = hasImg && imageLoaded !== "error";
+  if (hasImgNotFailing) {
+    children = /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt,
+        src,
+        srcSet,
+        sizes,
+        className: classes.img,
+        ...imgProps
+      }
+    );
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  } else if (hasImg && alt) {
+    [children] = alt;
+  } else {
+    children = /* @__PURE__ */ jsx(
+      User,
+      {
+        color,
+        iconSize: decreaseSize(size),
+        className: classes.fallback
+      }
+    );
+  }
+  const inlineStyle = {
+    ...style
+  };
+  if (component != null && typeof component !== "string") {
+    inlineStyle.borderRadius = "50%";
+  }
+  if (!hasImgNotFailing) {
+    inlineStyle.backgroundColor = getColor(
+      backgroundColor,
+      theme.colors.secondary
+    );
+    inlineStyle.color = getColor(color, theme.colors.atmo1);
+  }
+  const statusInlineStyle = {};
+  if (status) {
+    const statusColor = getColor(status, theme.colors.positive);
+    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
+  }
+  const badgeColor = getColor(badge || "", theme.colors.positive);
+  return /* @__PURE__ */ jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(classes.status, classes[variant], classes[size]),
+      style: statusInlineStyle,
+      children: [
+        badge && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classes.badge,
+            style: { backgroundColor: badgeColor }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MuiAvatar,
+          {
+            component,
+            className: cx(classes.root, classes.avatar, classes[size], className),
+            style: inlineStyle,
+            variant,
+            size,
+            ...avatarProps,
+            children
+          }
+        )
+      ]
+    }
+  ) });
+});
+export {
+  HvAvatar,
+  staticClasses as avatarClasses
+};
+//# sourceMappingURL=Avatar.mjs.map