@hitachivantara/uikit-react-core 5.39.2 → 5.39.4

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

@@ -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.js";
+import { useClasses } from "./Action.styles.js";
+import { staticClasses } from "./Action.styles.js";
+import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
+import { HvAvatar } from "../../Avatar/Avatar.js";
+import { HvTypography } from "../../Typography/Typography.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
+import { HvTooltip } from "../../Tooltip/Tooltip.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Action.js","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.js

@@ -0,0 +1,51 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Action.styles.js","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.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { useMemo } from "react";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./AppSwitcher.styles.js";
+import { staticClasses } from "./AppSwitcher.styles.js";
+import { HvAppSwitcherAction } from "./Action/Action.js";
+import { HvTypography } from "../Typography/Typography.js";
+import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
+import { HvListContainer } from "../ListContainer/ListContainer.js";
+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.js.map

package/dist/esm/AppSwitcher/AppSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSwitcher.js","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.js

@@ -0,0 +1,65 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppSwitcher.styles.js","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.js

@@ -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.js";
+import { useImageLoaded } from "../hooks/useImageLoaded.js";
+import { decreaseSize } from "../utils/sizes.js";
+import { useClasses } from "./Avatar.styles.js";
+import { staticClasses } from "./Avatar.styles.js";
+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.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, forwardRef } from \"react\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { decreaseSize } from \"../utils/sizes\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** Inline styles to be applied to the root element. */\n  style?: CSSProperties;\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?: HvAvatarSize;\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?: 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<any, HvAvatarProps>((props, ref) => {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size = \"sm\",\n    backgroundColor = \"secondary\",\n    color = \"atmo1\",\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  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        iconSize={decreaseSize(size)}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: 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(\n      backgroundColor,\n      theme.colors.secondary\n    );\n    inlineStyle.color = getColor(color, theme.colors.atmo1);\n  }\n\n  const statusInlineStyle: 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, theme.colors.positive);\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  const badgeColor = getColor(badge || \"\", theme.colors.positive);\n\n  return (\n    <div ref={ref} className={classes.container} {...others}>\n      <div\n        className={cx(classes.status, classes[variant], classes[size])}\n        style={statusInlineStyle}\n      >\n        {badge && (\n          <div\n            className={classes.badge}\n            style={{ backgroundColor: badgeColor }}\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    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AAgEO,MAAM,WAAW,WAA+B,CAAC,OAAO,QAAQ;AAC/D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,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,GAAG,IAAI,WAAW,WAAW;AAE1C,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,IAAA;AAAA,EACN,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,UAAU,aAAa,IAAI;AAAA,QAC3B,WAAW,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzB;AAEA,QAAM,cAA6B;AAAA,IACjC,GAAG;AAAA,EAAA;AAGL,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAC7B;AAEA,MAAI,CAAC,kBAAkB;AACrB,gBAAY,kBAAkB;AAAA,MAC5B;AAAA,MACA,MAAM,OAAO;AAAA,IAAA;AAEf,gBAAY,QAAQ,SAAS,OAAO,MAAM,OAAO,KAAK;AAAA,EACxD;AAEA,QAAM,oBAAmC,CAAA;AACzC,MAAI,QAAQ;AAGV,UAAM,cAAc,SAAS,QAAQ,MAAM,OAAO,QAAQ;AACxC,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EACpE;AAEA,QAAM,aAAa,SAAS,SAAS,IAAI,MAAM,OAAO,QAAQ;AAE9D,6BACG,OAAI,EAAA,KAAU,WAAW,QAAQ,WAAY,GAAG,QAC/C,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,OAAO,GAAG,QAAQ,IAAI,CAAC;AAAA,MAC7D,OAAO;AAAA,MAEN,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,WAAW;AAAA,UAAA;AAAA,QACvC;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,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/Avatar/Avatar.styles.js

@@ -0,0 +1,77 @@
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+const EXTRA_SMALL = { container: "32px", avatar: "24px" };
+const SMALL = { container: "40px", avatar: "32px" };
+const MEDIUM = { container: "48px", avatar: "40px" };
+const LARGE = { container: "60px", avatar: "52px" };
+const EXTRA_LARGE = { container: "96px", avatar: "88px" };
+const { staticClasses, useClasses } = createClasses("HvAvatar", {
+  root: {
+    fontSize: "1rem"
+  },
+  container: {
+    "&:focus-visible": {
+      ...outlineStyles,
+      borderRadius: 0
+    }
+  },
+  img: {
+    width: "100%",
+    height: "100%",
+    textAlign: "center",
+    // Handle non-square image. The property isn't supported by IE 11.
+    objectFit: "cover",
+    // Hide alt text.
+    color: "transparent",
+    // Hide the image broken icon, only works on Chrome.
+    textIndent: 1e4
+  },
+  fallback: {},
+  status: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    "&$xs": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },
+    "&$sm": { width: SMALL.container, height: SMALL.container },
+    "&$md": { width: MEDIUM.container, height: MEDIUM.container },
+    "&$lg": { width: LARGE.container, height: LARGE.container },
+    "&$xl": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container }
+  },
+  avatar: {
+    "&$xs": {
+      width: EXTRA_SMALL.avatar,
+      height: EXTRA_SMALL.avatar,
+      fontSize: "0.5rem"
+    },
+    "&$sm": { width: SMALL.avatar, height: SMALL.avatar, fontSize: "0.625rem" },
+    "&$md": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: "1rem" },
+    "&$lg": { width: LARGE.avatar, height: LARGE.avatar, fontSize: "1.5rem" },
+    "&$xl": {
+      width: EXTRA_LARGE.avatar,
+      height: EXTRA_LARGE.avatar,
+      fontSize: "2rem"
+    }
+  },
+  badge: {
+    width: 8,
+    height: 8,
+    position: "absolute",
+    top: 0,
+    right: 0,
+    borderRadius: "50%",
+    zIndex: 1
+  },
+  xs: {},
+  sm: {},
+  md: {},
+  lg: {},
+  xl: {},
+  circular: { borderRadius: "50%" },
+  square: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Avatar.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.js","sources":["../../../src/Avatar/Avatar.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nconst EXTRA_SMALL = { container: \"32px\", avatar: \"24px\" };\nconst SMALL = { container: \"40px\", avatar: \"32px\" };\nconst MEDIUM = { container: \"48px\", avatar: \"40px\" };\nconst LARGE = { container: \"60px\", avatar: \"52px\" };\nconst EXTRA_LARGE = { container: \"96px\", avatar: \"88px\" };\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatar\", {\n  root: {\n    fontSize: \"1rem\",\n  },\n  container: {\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      borderRadius: 0,\n    },\n  },\n  img: {\n    width: \"100%\",\n    height: \"100%\",\n    textAlign: \"center\",\n    // Handle non-square image. The property isn't supported by IE 11.\n    objectFit: \"cover\",\n    // Hide alt text.\n    color: \"transparent\",\n    // Hide the image broken icon, only works on Chrome.\n    textIndent: 10000,\n  },\n  fallback: {},\n  status: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n\n    \"&$xs\": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },\n    \"&$sm\": { width: SMALL.container, height: SMALL.container },\n    \"&$md\": { width: MEDIUM.container, height: MEDIUM.container },\n    \"&$lg\": { width: LARGE.container, height: LARGE.container },\n    \"&$xl\": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container },\n  },\n  avatar: {\n    \"&$xs\": {\n      width: EXTRA_SMALL.avatar,\n      height: EXTRA_SMALL.avatar,\n      fontSize: \"0.5rem\",\n    },\n    \"&$sm\": { width: SMALL.avatar, height: SMALL.avatar, fontSize: \"0.625rem\" },\n    \"&$md\": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: \"1rem\" },\n    \"&$lg\": { width: LARGE.avatar, height: LARGE.avatar, fontSize: \"1.5rem\" },\n    \"&$xl\": {\n      width: EXTRA_LARGE.avatar,\n      height: EXTRA_LARGE.avatar,\n      fontSize: \"2rem\",\n    },\n  },\n  badge: {\n    width: 8,\n    height: 8,\n    position: \"absolute\",\n    top: 0,\n    right: 0,\n    borderRadius: \"50%\",\n    zIndex: 1,\n  },\n  xs: {},\n  sm: {},\n  md: {},\n  lg: {},\n  xl: {},\n  circular: { borderRadius: \"50%\" },\n  square: {},\n});\n"],"names":[],"mappings":";;AAGA,MAAM,cAAc,EAAE,WAAW,QAAQ,QAAQ,OAAO;AACxD,MAAM,QAAQ,EAAE,WAAW,QAAQ,QAAQ,OAAO;AAClD,MAAM,SAAS,EAAE,WAAW,QAAQ,QAAQ,OAAO;AACnD,MAAM,QAAQ,EAAE,WAAW,QAAQ,QAAQ,OAAO;AAClD,MAAM,cAAc,EAAE,WAAW,QAAQ,QAAQ,OAAO;AAEjD,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,IACT,mBAAmB;AAAA,MACjB,GAAG;AAAA,MACH,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,KAAK;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA,IAEX,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA;AAAA,IAEP,YAAY;AAAA,EACd;AAAA,EACA,UAAU,CAAC;AAAA,EACX,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IAEV,QAAQ,EAAE,OAAO,YAAY,WAAW,QAAQ,YAAY,UAAU;AAAA,IACtE,QAAQ,EAAE,OAAO,MAAM,WAAW,QAAQ,MAAM,UAAU;AAAA,IAC1D,QAAQ,EAAE,OAAO,OAAO,WAAW,QAAQ,OAAO,UAAU;AAAA,IAC5D,QAAQ,EAAE,OAAO,MAAM,WAAW,QAAQ,MAAM,UAAU;AAAA,IAC1D,QAAQ,EAAE,OAAO,YAAY,WAAW,QAAQ,YAAY,UAAU;AAAA,EACxE;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,OAAO,YAAY;AAAA,MACnB,QAAQ,YAAY;AAAA,MACpB,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,EAAE,OAAO,MAAM,QAAQ,QAAQ,MAAM,QAAQ,UAAU,WAAW;AAAA,IAC1E,QAAQ,EAAE,OAAO,OAAO,QAAQ,QAAQ,OAAO,QAAQ,UAAU,OAAO;AAAA,IACxE,QAAQ,EAAE,OAAO,MAAM,QAAQ,QAAQ,MAAM,QAAQ,UAAU,SAAS;AAAA,IACxE,QAAQ;AAAA,MACN,OAAO,YAAY;AAAA,MACnB,QAAQ,YAAY;AAAA,MACpB,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,cAAc;AAAA,IACd,QAAQ;AAAA,EACV;AAAA,EACA,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,IAAI,CAAC;AAAA,EACL,UAAU,EAAE,cAAc,MAAM;AAAA,EAChC,QAAQ,CAAC;AACX,CAAC;"}