@hitachivantara/uikit-react-core 5.21.0 → 5.22.1

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

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { Info } from "@hitachivantara/uikit-react-icons";
+import { useUniqueId } from "../../../hooks/useUniqueId.js";
 import TitleWithTooltip from "../TitleWithTooltip.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import useUniqueId from "../../../hooks/useUniqueId.js";
 import { HvAvatar } from "../../Avatar/Avatar.js";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -91,8 +91,10 @@ const HvAppSwitcherAction = ({
       style: {
         borderColor: color
       },
-      "aria-describedby": descriptionElementId,
       "aria-label": name,
+      ...description && {
+        "aria-describedby": descriptionElementId
+      },
       children: [/* @__PURE__ */ jsx("div", {
         className: classes.icon,
         children: renderApplicationIcon()

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

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport {\n  HvAvatar,\n  HvListItem,\n  HvTooltip,\n  HvTypography,\n} from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useUniqueId } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { HvAppSwitcherActionApplication } from \"../AppSwitcher\";\nimport TitleWithTooltip from \"../TitleWithTooltip\";\nimport { useClasses, staticClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\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\nconst getColor = (color: any, defaultColor: string) =>\n  theme.colors[color] || color || defaultColor;\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 = (event: React.MouseEvent) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClickCallback?.(event, { ...application, isSelected });\n  };\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\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      <HvTypography\n        component={isLink ? \"a\" : \"button\"}\n        href={isLink ? url : undefined}\n        target={isLink ? target || \"_top\" : undefined}\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-describedby={descriptionElementId}\n        aria-label={name}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <TitleWithTooltip title={name} className={classes.title} />\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      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","secondary_60","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","src","onError","alt","brokenTitle","split","initials","substring","HvAvatar","size","backgroundColor","variant","children","isSelected","handleOnClick","event","preventDefault","isLink","descriptionElementId","useUniqueId","HvListItem","interactive","tabIndex","selected","root","HvTypography","component","href","undefined","typography","onClick","style","borderColor","_jsx","icon","TitleWithTooltip","title","HvTooltip","disableFocusListener","disableTouchListener","Info","iconInfo","role"],"mappings":"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"}
+{"version":3,"file":"Action.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvAvatar } from \"@core/components/Avatar\";\nimport { HvListItem } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport TitleWithTooltip from \"../TitleWithTooltip\";\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?: string;\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\nconst getColor = (color: any, defaultColor: string) =>\n  theme.colors[color] || color || defaultColor;\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 = (event: React.MouseEvent) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    onClickCallback?.(event, { ...application, isSelected });\n  };\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id, \"hvAction-description\");\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      <HvTypography\n        component={isLink ? \"a\" : \"button\"}\n        href={isLink ? url : undefined}\n        target={isLink ? target || \"_top\" : undefined}\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <TitleWithTooltip title={name} className={classes.title} />\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      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAppSwitcherAction","id","className","classes","classesProp","application","onClickCallback","isSelectedCallback","cx","useClasses","name","description","disabled","iconElement","iconUrl","url","target","secondary_60","secondary","validIconUrl","setValidIconUrl","useState","renderApplicationIcon","src","onError","alt","brokenTitle","split","initials","substring","HvAvatar","size","backgroundColor","variant","children","isSelected","handleOnClick","event","preventDefault","isLink","descriptionElementId","useUniqueId","HvListItem","interactive","tabIndex","selected","root","HvTypography","component","href","undefined","typography","onClick","style","borderColor","_jsx","icon","TitleWithTooltip","title","HvTooltip","disableFocusListener","disableTouchListener","Info","iconInfo","role"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Action.styles.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils\";\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      margin: `0 ${theme.space.xs}`,\n\n      textAlign: \"left\",\n\n      overflow: \"hidden\",\n      whiteSpace: \"nowrap\",\n      textOverflow: \"ellipsis\",\n\n      color: \"inherit\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","maxWidth","minHeight","marginRight","theme","space","sm","icon","display","minWidth","justifyContent","iconUrl","iconInfo","disabled","selected","typography","alignItems","padding","xs","border","borderLeft","colors","secondary","cursor","textDecoration","color","backgroundColor","title","flexGrow","margin","textAlign","overflow","whiteSpace","textOverflow"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAaC,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,UAAU;AAAA,IAAIC,gBAAgB;AAAA,EAAS;AAAA,EAChEC,SAAS;AAAA,IAAEX,OAAO;AAAA,EAAG;AAAA,EACrBY,UAAU;AAAA,IAAEH,UAAU;AAAA,EAAG;AAAA,EACzBI,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,YAAY;AAAA,IACVP,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBM,YAAY;AAAA,IAEZhB,OAAO;AAAA,IACPE,WAAW;AAAA,IAEXe,SAAU,OAAMb,MAAMC,MAAMa;AAAAA,IAE5BC,QAAQ;AAAA,IACRC,YAAa,aAAYhB,MAAMiB,OAAOC;AAAAA,IAEtCC,QAAQ;AAAA,IAERC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,iBAAiB;AAAA,IAEjB,eAAe;AAAA,MACbH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAI,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,QAAS,KAAIzB,MAAMC,MAAMa;AAAAA,IAEzBY,WAAW;AAAA,IAEXC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,cAAc;AAAA,IAEdR,OAAO;AAAA,EACT;AACF,CACF;"}
+{"version":3,"file":"Action.styles.js","sources":["../../../../../src/components/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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      margin: `0 ${theme.space.xs}`,\n\n      textAlign: \"left\",\n\n      overflow: \"hidden\",\n      whiteSpace: \"nowrap\",\n      textOverflow: \"ellipsis\",\n\n      color: \"inherit\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","width","maxWidth","minHeight","marginRight","theme","space","sm","icon","display","minWidth","justifyContent","iconUrl","iconInfo","disabled","selected","typography","alignItems","padding","xs","border","borderLeft","colors","secondary","cursor","textDecoration","color","backgroundColor","title","flexGrow","margin","textAlign","overflow","whiteSpace","textOverflow"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAaC,MAAMC,MAAMC;AAAAA,EAC3B;AAAA,EACAC,MAAM;AAAA,IAAEC,SAAS;AAAA,IAAQC,UAAU;AAAA,IAAIC,gBAAgB;AAAA,EAAS;AAAA,EAChEC,SAAS;AAAA,IAAEX,OAAO;AAAA,EAAG;AAAA,EACrBY,UAAU;AAAA,IAAEH,UAAU;AAAA,EAAG;AAAA,EACzBI,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AAAA,EACXC,YAAY;AAAA,IACVP,SAAS;AAAA,IACTE,gBAAgB;AAAA,IAChBM,YAAY;AAAA,IAEZhB,OAAO;AAAA,IACPE,WAAW;AAAA,IAEXe,SAAU,OAAMb,MAAMC,MAAMa;AAAAA,IAE5BC,QAAQ;AAAA,IACRC,YAAa,aAAYhB,MAAMiB,OAAOC;AAAAA,IAEtCC,QAAQ;AAAA,IAERC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,iBAAiB;AAAA,IAEjB,eAAe;AAAA,MACbH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAI,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,QAAS,KAAIzB,MAAMC,MAAMa;AAAAA,IAEzBY,WAAW;AAAA,IAEXC,UAAU;AAAA,IACVC,YAAY;AAAA,IACZC,cAAc;AAAA,IAEdR,OAAO;AAAA,EACT;AACF,CACF;"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport { HvListContainer, HvTypography } from \"@core/components\";\n\nimport { HvAppSwitcherAction } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\n\nexport { staticClasses as appSwitcherClasses };\n\nexport type HvAppSwitcherClasses = 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?: string;\n}\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 = ({\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}: HvAppSwitcherProps) => {\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 && <TitleWithTooltip className={classes.title} title={title} />)}\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":["HvAppSwitcher","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","onClickCallback","isSelectedCallback","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","open","closed","children","_jsx","HvTypography","component","variant","TitleWithTooltip","HvListContainer","disableGutters","actionsContainer","footerContainer"],"mappings":";;;;;;;;AAmEO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC,SAAS;AAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,0BAA0BA,MAAM;AAAA,EAAC;AAAA,EACjCC,2BAA2BA,MAAM;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AACkB,MAAM;AAClB,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,eAAeC,QACnB,MACET,iBACAA,6CAAcU,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,iCACGC,qBAAmB;AAAA,QAElBF;AAAAA,QACAG,iBAAiBb;AAAAA,QACjBc,oBAAoBb;AAAAA,QACpBN,SAAS;AAAA,UACPoB,MAAMpB,QAAQqB;AAAAA,UACdC,UAAUtB,QAAQuB;AAAAA,UAClBC,UAAUxB,QAAQyB;AAAAA,UAClBC,YAAY1B,QAAQ2B;AAAAA,UACpBC,MAAM5B,QAAQ6B;AAAAA,UACd1B,OAAOH,QAAQ8B;AAAAA,UACfC,UAAU/B,QAAQgC;AAAAA,QACpB;AAAA,MAAA,GAZKjB,YAAYjB,MAAO,GAAEiB,YAAYC,QAAQD,YAAYkB,KAa3D;AAAA,IAEL;AAEOC,WAAAA;AAAAA,EAAAA,KAEX,CAAC9B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAEA,8BACE,OAAA;AAAA,IACEP;AAAAA,IACAC,WAAWW,GACTV,QAAQoB,MACRpB,QAAQE,MAAM,GACd;AAAA,MAAE,CAACF,QAAQmC,IAAI,GAAG,CAAC,CAAC1B;AAAAA,MAAQ,CAACT,QAAQoC,MAAM,GAAG3B,WAAW;AAAA,OACzDV,SACF;AAAA,IAAEsC,UAEA9B,CAAAA,UACA+B,oBAACC,cAAY;AAAA,MAACC,WAAU;AAAA,MAAMC,SAAQ;AAAA,MAAQ1C,WAAWC,QAAQG;AAAAA,MAAMkC,UACpE9B;AAAAA,IAAAA,CACW,KAEbJ,SAASmC,oBAACI,kBAAgB;AAAA,MAAC3C,WAAWC,QAAQG;AAAAA,MAAOA;AAAAA,IAAAA,CAAe,GACvEmC,oBAACK,iBAAe;AAAA,MAACC,gBAAc;AAAA,MAAC7C,WAAWC,QAAQ6C;AAAAA,MAAiBR,UACjEzB;AAAAA,IAAAA,CACc,GAChBJ,UACC8B,oBAACC,cAAY;AAAA,MACXC,WAAU;AAAA,MACVC,SAAQ;AAAA,MACR1C,WAAWC,QAAQ8C;AAAAA,MAAgBT,UAElC7B;AAAAA,IAAAA,CACW,CACf;AAAA,EAAA,CACE;AAET;"}
+{"version":3,"file":"AppSwitcher.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvListContainer } from \"@core/components/ListContainer\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvAppSwitcherAction, HvAppSwitcherActionApplication } from \"./Action\";\nimport { useClasses, staticClasses } from \"./AppSwitcher.styles\";\nimport TitleWithTooltip from \"./TitleWithTooltip\";\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 = ({\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}: HvAppSwitcherProps) => {\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 && <TitleWithTooltip className={classes.title} title={title} />)}\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":["HvAppSwitcher","id","className","classes","classesProp","layout","title","applications","onActionClickedCallback","isActionSelectedCallback","header","footer","isOpen","cx","useClasses","panelActions","useMemo","map","application","name","HvAppSwitcherAction","onClickCallback","isSelectedCallback","root","item","selected","itemSelected","disabled","itemDisabled","typography","itemTrigger","icon","itemIcon","itemTitle","iconInfo","itemInfoIcon","url","undefined","open","closed","children","_jsx","HvTypography","component","variant","TitleWithTooltip","HvListContainer","disableGutters","actionsContainer","footerContainer"],"mappings":";;;;;;;;AA6CO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC,SAAS;AAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,0BAA0BA,MAAM;AAAA,EAAC;AAAA,EACjCC,2BAA2BA,MAAM;AAAA,EACjCC;AAAAA,EACAC;AAAAA,EACAC;AACkB,MAAM;AAClB,QAAA;AAAA,IAAET;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,eAAeC,QACnB,MACET,iBACAA,6CAAcU,IAAKC,CAAgB,gBAAA;AACjC,QAAIA,YAAYC,MAAM;AACpB,iCACGC,qBAAmB;AAAA,QAElBF;AAAAA,QACAG,iBAAiBb;AAAAA,QACjBc,oBAAoBb;AAAAA,QACpBN,SAAS;AAAA,UACPoB,MAAMpB,QAAQqB;AAAAA,UACdC,UAAUtB,QAAQuB;AAAAA,UAClBC,UAAUxB,QAAQyB;AAAAA,UAClBC,YAAY1B,QAAQ2B;AAAAA,UACpBC,MAAM5B,QAAQ6B;AAAAA,UACd1B,OAAOH,QAAQ8B;AAAAA,UACfC,UAAU/B,QAAQgC;AAAAA,QACpB;AAAA,MAAA,GAZKjB,YAAYjB,MAAO,GAAEiB,YAAYC,QAAQD,YAAYkB,KAa3D;AAAA,IAEL;AAEOC,WAAAA;AAAAA,EAAAA,KAEX,CAAC9B,cAAcJ,SAASM,0BAA0BD,uBAAuB,CAC3E;AAEA,8BACE,OAAA;AAAA,IACEP;AAAAA,IACAC,WAAWW,GACTV,QAAQoB,MACRpB,QAAQE,MAAM,GACd;AAAA,MAAE,CAACF,QAAQmC,IAAI,GAAG,CAAC,CAAC1B;AAAAA,MAAQ,CAACT,QAAQoC,MAAM,GAAG3B,WAAW;AAAA,OACzDV,SACF;AAAA,IAAEsC,UAEA9B,CAAAA,UACA+B,oBAACC,cAAY;AAAA,MAACC,WAAU;AAAA,MAAMC,SAAQ;AAAA,MAAQ1C,WAAWC,QAAQG;AAAAA,MAAMkC,UACpE9B;AAAAA,IAAAA,CACW,KAEbJ,SAASmC,oBAACI,kBAAgB;AAAA,MAAC3C,WAAWC,QAAQG;AAAAA,MAAOA;AAAAA,IAAAA,CAAe,GACvEmC,oBAACK,iBAAe;AAAA,MAACC,gBAAc;AAAA,MAAC7C,WAAWC,QAAQ6C;AAAAA,MAAiBR,UACjEzB;AAAAA,IAAAA,CACc,GAChBJ,UACC8B,oBAACC,cAAY;AAAA,MACXC,WAAU;AAAA,MACVC,SAAQ;AAAA,MACR1C,WAAWC,QAAQ8C;AAAAA,MAAgBT,UAElC7B;AAAAA,IAAAA,CACW,CACf;AAAA,EAAA,CACE;AAET;"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppSwitcher.styles.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils\";\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.space.sm} 0 ${theme.space.sm} ${theme.space.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\n    overflow: \"hidden\",\n    whiteSpace: \"nowrap\",\n    textOverflow: \"ellipsis\",\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","space","sm","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","whiteSpace","textOverflow","single","width","dual","fluid"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAAU,GAAEJ,MAAMK,MAAMC,QAAQN,MAAMK,MAAMC,MAAMN,MAAMK,MAAMC;AAAAA,EAChE;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBjB,SAAS;AAAA,IACTkB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXb,SAAS;AAAA,EACX;AAAA,EACAc,iBAAiB;AAAA,IACfrB,SAAS;AAAA,IACTsB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRjB,SAAU,GAAEJ,MAAMK,MAAMC,MAAMN,MAAMK,MAAMC;AAAAA,EAC5C;AAAA,EACAgB,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW3B,MAAMC,OAAO2B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEhC,SAAS;AAAA,EAAO;AAAA,EAC1BiC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX3B,SAAU,OAAMJ,MAAMK,MAAMC,MAAMN,MAAMK,MAAMC;AAAAA,IAE9CH,UAAU;AAAA,IACV6B,YAAY;AAAA,IACZC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;"}
+{"version":3,"file":"AppSwitcher.styles.js","sources":["../../../../src/components/AppSwitcher/AppSwitcher.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/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.space.sm} 0 ${theme.space.sm} ${theme.space.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\n    overflow: \"hidden\",\n    whiteSpace: \"nowrap\",\n    textOverflow: \"ellipsis\",\n  },\n  single: { width: 320 },\n  dual: { width: 640 },\n  fluid: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","backgroundColor","theme","colors","atmo1","overflow","padding","space","sm","item","itemSelected","itemDisabled","itemTrigger","itemIcon","itemTitle","itemInfoIcon","actionsContainer","flexWrap","justifyContent","overflowY","footerContainer","alignItems","marginTop","height","open","zIndex","position","top","overflowX","boxShadow","shadow","closed","title","minHeight","whiteSpace","textOverflow","single","width","dual","fluid"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAMVC,SAAU,GAAEJ,MAAMK,MAAMC,QAAQN,MAAMK,MAAMC,MAAMN,MAAMK,MAAMC;AAAAA,EAChE;AAAA,EACAC,MAAM,CAAC;AAAA,EACPC,cAAc,CAAC;AAAA,EACfC,cAAc,CAAC;AAAA,EACfC,aAAa,CAAC;AAAA,EACdC,UAAU,CAAC;AAAA,EACXC,WAAW,CAAC;AAAA,EACZC,cAAc,CAAC;AAAA,EACfC,kBAAkB;AAAA,IAChBjB,SAAS;AAAA,IACTkB,UAAU;AAAA,IACVC,gBAAgB;AAAA,IAEhBC,WAAW;AAAA;AAAA,IAGXb,SAAS;AAAA,EACX;AAAA,EACAc,iBAAiB;AAAA,IACfrB,SAAS;AAAA,IACTsB,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,QAAQ;AAAA;AAAA;AAAA,IAIRjB,SAAU,GAAEJ,MAAMK,MAAMC,MAAMN,MAAMK,MAAMC;AAAAA,EAC5C;AAAA,EACAgB,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,UAAU;AAAA,IACVC,KAAK;AAAA,IACLC,WAAW;AAAA,IACXC,WAAW3B,MAAMC,OAAO2B;AAAAA,EAC1B;AAAA,EACAC,QAAQ;AAAA,IAAEhC,SAAS;AAAA,EAAO;AAAA,EAC1BiC,OAAO;AAAA,IACLC,WAAW;AAAA;AAAA;AAAA,IAIX3B,SAAU,OAAMJ,MAAMK,MAAMC,MAAMN,MAAMK,MAAMC;AAAAA,IAE9CH,UAAU;AAAA,IACV6B,YAAY;AAAA,IACZC,cAAc;AAAA,EAChB;AAAA,EACAC,QAAQ;AAAA,IAAEC,OAAO;AAAA,EAAI;AAAA,EACrBC,MAAM;AAAA,IAAED,OAAO;AAAA,EAAI;AAAA,EACnBE,OAAO,CAAC;AACV,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"TitleWithTooltip.js","sources":["../../../../src/components/AppSwitcher/TitleWithTooltip.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { HvTooltip, HvTypography } from \"@core/components\";\n\nconst TitleWithTooltip = ({ className, title }) => {\n  const textRef = useRef<HTMLDivElement>(null);\n\n  const isOverflowed = useMemo(() => {\n    const el = textRef.current;\n    if (!el) return false;\n\n    return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n  }, []);\n\n  return (\n    <HvTooltip\n      disableHoverListener={!isOverflowed}\n      placement=\"top-start\"\n      title={<HvTypography>{title}</HvTypography>}\n    >\n      <HvTypography\n        className={className}\n        variant=\"label\"\n        component=\"span\"\n        ref={textRef}\n      >\n        {title}\n      </HvTypography>\n    </HvTooltip>\n  );\n};\n\nexport default TitleWithTooltip;\n"],"names":["TitleWithTooltip","className","title","textRef","useRef","isOverflowed","useMemo","el","current","scrollWidth","clientWidth","scrollHeight","clientHeight","HvTooltip","disableHoverListener","placement","HvTypography","children","variant","component","ref"],"mappings":";;;;AAGA,MAAMA,mBAAmBA,CAAC;AAAA,EAAEC;AAAAA,EAAWC;AAAM,MAAM;AAC3CC,QAAAA,UAAUC,OAAuB,IAAI;AAErCC,QAAAA,eAAeC,QAAQ,MAAM;AACjC,UAAMC,KAAKJ,QAAQK;AACnB,QAAI,CAACD;AAAW,aAAA;AAEhB,WAAOA,GAAGE,cAAcF,GAAGG,eAAeH,GAAGI,eAAeJ,GAAGK;AAAAA,EACjE,GAAG,CAAE,CAAA;AAEL,6BACGC,WAAS;AAAA,IACRC,sBAAsB,CAACT;AAAAA,IACvBU,WAAU;AAAA,IACVb,2BAAQc,cAAY;AAAA,MAAAC,UAAEf;AAAAA,IAAAA,CAAoB;AAAA,IAAEe,8BAE3CD,cAAY;AAAA,MACXf;AAAAA,MACAiB,SAAQ;AAAA,MACRC,WAAU;AAAA,MACVC,KAAKjB;AAAAA,MAAQc,UAEZf;AAAAA,IAAAA,CACW;AAAA,EAAA,CACL;AAEf;AAEA,MAAA,qBAAeF;"}
+{"version":3,"file":"TitleWithTooltip.js","sources":["../../../../src/components/AppSwitcher/TitleWithTooltip.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\n\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nconst TitleWithTooltip = ({ className, title }) => {\n  const textRef = useRef<HTMLDivElement>(null);\n\n  const isOverflowed = useMemo(() => {\n    const el = textRef.current;\n    if (!el) return false;\n\n    return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n  }, []);\n\n  return (\n    <HvTooltip\n      disableHoverListener={!isOverflowed}\n      placement=\"top-start\"\n      title={<HvTypography>{title}</HvTypography>}\n    >\n      <HvTypography\n        className={className}\n        variant=\"label\"\n        component=\"span\"\n        ref={textRef}\n      >\n        {title}\n      </HvTypography>\n    </HvTooltip>\n  );\n};\n\nexport default TitleWithTooltip;\n"],"names":["TitleWithTooltip","className","title","textRef","useRef","isOverflowed","useMemo","el","current","scrollWidth","clientWidth","scrollHeight","clientHeight","HvTooltip","disableHoverListener","placement","HvTypography","children","variant","component","ref"],"mappings":";;;;AAKA,MAAMA,mBAAmBA,CAAC;AAAA,EAAEC;AAAAA,EAAWC;AAAM,MAAM;AAC3CC,QAAAA,UAAUC,OAAuB,IAAI;AAErCC,QAAAA,eAAeC,QAAQ,MAAM;AACjC,UAAMC,KAAKJ,QAAQK;AACnB,QAAI,CAACD;AAAW,aAAA;AAEhB,WAAOA,GAAGE,cAAcF,GAAGG,eAAeH,GAAGI,eAAeJ,GAAGK;AAAAA,EACjE,GAAG,CAAE,CAAA;AAEL,6BACGC,WAAS;AAAA,IACRC,sBAAsB,CAACT;AAAAA,IACvBU,WAAU;AAAA,IACVb,2BAAQc,cAAY;AAAA,MAAAC,UAAEf;AAAAA,IAAAA,CAAoB;AAAA,IAAEe,8BAE3CD,cAAY;AAAA,MACXf;AAAAA,MACAiB,SAAQ;AAAA,MACRC,WAAU;AAAA,MACVC,KAAKjB;AAAAA,MAAQc,UAEZf;AAAAA,IAAAA,CACW;AAAA,EAAA,CACL;AAEf;AAEA,MAAA,qBAAeF;"}

package/dist/esm/components/Avatar/Avatar.js

@@ -1,16 +1,16 @@
 import { User } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
-import { clsx } from "clsx";
-import { StyledImg, StyledContainer, StyledStatus, StyledBadge, StyledAvatar } from "./Avatar.styles.js";
-import avatarClasses from "./avatarClasses.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import MuiAvatar from "@mui/material/Avatar";
 import { useImageLoaded } from "../../hooks/useImageLoaded.js";
 import { decreaseSize } from "../../utils/sizes.js";
+import { useClasses } from "./Avatar.styles.js";
+import { staticClasses } from "./Avatar.styles.js";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 const getColor = (color, defaultColor) => theme.colors[color] || color || defaultColor;
 const HvAvatar = ({
   className,
   style,
-  classes,
+  classes: classesProp,
   children: childrenProp,
   component = "div",
   size = "sm",
@@ -27,17 +27,21 @@ const HvAvatar = ({
   avatarProps,
   ...others
 }) => {
+  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(StyledImg, {
+    children = /* @__PURE__ */ jsx("img", {
       alt,
       src,
       srcSet,
       sizes,
-      className: clsx(classes == null ? void 0 : classes.img, avatarClasses.img),
+      className: classes.img,
       ...imgProps
     });
   } else if (childrenProp != null) {
@@ -48,7 +52,7 @@ const HvAvatar = ({
     children = /* @__PURE__ */ jsx(User, {
       color,
       iconSize: decreaseSize(size),
-      className: clsx(avatarClasses.fallback, classes == null ? void 0 : classes.fallback)
+      className: classes.fallback
     });
   }
   const inlineStyle = {
@@ -67,22 +71,20 @@ const HvAvatar = ({
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
   const badgeColor = getColor(badge || "", theme.colors.positive);
-  return /* @__PURE__ */ jsx(StyledContainer, {
-    className: clsx(avatarClasses.container, classes == null ? void 0 : classes.container),
+  return /* @__PURE__ */ jsx("div", {
+    className: classes.container,
     ...others,
-    children: /* @__PURE__ */ jsxs(StyledStatus, {
-      className: clsx(avatarClasses.status, classes == null ? void 0 : classes.status, avatarClasses[variant], classes == null ? void 0 : classes[variant], avatarClasses[size], classes == null ? void 0 : classes[size]),
+    children: /* @__PURE__ */ jsxs("div", {
+      className: cx(classes.status, classes[variant], classes[size]),
       style: statusInlineStyle,
-      $variant: variant,
-      $size: size,
-      children: [badge && /* @__PURE__ */ jsx(StyledBadge, {
-        className: clsx(avatarClasses.badge, classes == null ? void 0 : classes.badge),
+      children: [badge && /* @__PURE__ */ jsx("div", {
+        className: classes.badge,
         style: {
           backgroundColor: badgeColor
         }
-      }), /* @__PURE__ */ jsx(StyledAvatar, {
+      }), /* @__PURE__ */ jsx(MuiAvatar, {
         component,
-        className: clsx(className, avatarClasses.root, classes == null ? void 0 : classes.root, avatarClasses.avatar, classes == null ? void 0 : classes.avatar, avatarClasses[size], classes == null ? void 0 : classes[size]),
+        className: cx(classes.root, classes.avatar, classes[size], className),
         style: inlineStyle,
         variant,
         size,
@@ -93,6 +95,7 @@ const HvAvatar = ({
   });
 };
 export {
-  HvAvatar
+  HvAvatar,
+  staticClasses as avatarClasses
 };
 //# sourceMappingURL=Avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport { clsx } from \"clsx\";\nimport { CSSProperties, HTMLAttributes } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { useImageLoaded } from \"@core/hooks\";\nimport { decreaseSize } from \"@core/utils\";\nimport {\n  StyledAvatar,\n  StyledBadge,\n  StyledContainer,\n  StyledImg,\n  StyledStatus,\n} from \"./Avatar.styles\";\nimport avatarClasses, { HvAvatarClasses } from \"./avatarClasses\";\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  /**\n   * A string representing the foreground color of the avatar's\n   * letters or the generic User icon fallback.\n   * You can use either an HEX or color name from the palette.\n   */\n  color?: string;\n  /** A String representing the background color of the avatar. You can use either an HEX or color name from the palette. */\n  backgroundColor?: string;\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 * Get a color from the theme palette\n * @param {object} theme The theme object\n * @param {string} color A color to use if none is found on the theme palette\n * @param {string} defaultColor The fallback color to use\n */\nconst getColor = (color: string, defaultColor: string): string =>\n  theme.colors[color] || color || defaultColor;\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 = ({\n  className,\n  style,\n  classes,\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}: HvAvatarProps) => {\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      <StyledImg\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={clsx(classes?.img, avatarClasses.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={clsx(avatarClasses.fallback, 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    <StyledContainer\n      className={clsx(avatarClasses.container, classes?.container)}\n      {...others}\n    >\n      <StyledStatus\n        className={clsx(\n          avatarClasses.status,\n          classes?.status,\n          avatarClasses[variant],\n          classes?.[variant],\n          avatarClasses[size],\n          classes?.[size]\n        )}\n        style={statusInlineStyle}\n        $variant={variant}\n        $size={size}\n      >\n        {badge && (\n          <StyledBadge\n            className={clsx(avatarClasses.badge, classes?.badge)}\n            style={{ backgroundColor: badgeColor }}\n          />\n        )}\n        <StyledAvatar\n          component={component}\n          className={clsx(\n            className,\n            avatarClasses.root,\n            classes?.root,\n            avatarClasses.avatar,\n            classes?.avatar,\n            avatarClasses[size],\n            classes?.[size]\n          )}\n          style={inlineStyle}\n          variant={variant}\n          size={size}\n          {...avatarProps}\n        >\n          {children}\n        </StyledAvatar>\n      </StyledStatus>\n    </StyledContainer>\n  );\n};\n"],"names":["getColor","color","defaultColor","theme","colors","HvAvatar","className","style","classes","children","childrenProp","component","size","backgroundColor","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","StyledImg","clsx","img","avatarClasses","User","iconSize","decreaseSize","fallback","inlineStyle","borderRadius","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","StyledContainer","container","StyledStatus","$variant","$size","_jsx","StyledBadge","StyledAvatar","root","avatar"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from \"react\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\nimport { ExtractNames } from \"@core/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  /**\n   * A string representing the foreground color of the avatar's\n   * letters or the generic User icon fallback.\n   * You can use either an HEX or color name from the palette.\n   */\n  color?: string;\n  /** A String representing the background color of the avatar. You can use either an HEX or color name from the palette. */\n  backgroundColor?: string;\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 * Get a color from the theme palette\n * @param {object} theme The theme object\n * @param {string} color A color to use if none is found on the theme palette\n * @param {string} defaultColor The fallback color to use\n */\nconst getColor = (color: string, defaultColor: string): string =>\n  theme.colors[color] || color || defaultColor;\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 = ({\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}: HvAvatarProps) => {\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 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          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":["getColor","color","defaultColor","theme","colors","HvAvatar","className","style","classes","classesProp","children","childrenProp","component","size","backgroundColor","src","srcSet","sizes","alt","imgProps","status","badge","variant","avatarProps","others","cx","useClasses","imageLoaded","useImageLoaded","hasImg","hasImgNotFailing","img","User","iconSize","decreaseSize","fallback","inlineStyle","borderRadius","secondary","atmo1","statusInlineStyle","statusColor","positive","boxShadow","badgeColor","container","_jsx","MuiAvatar","root","avatar"],"mappings":";;;;;;;;AAoEA,MAAMA,WAAWA,CAACC,OAAeC,iBAC/BC,MAAMC,OAAOH,KAAK,KAAKA,SAASC;AAM3B,MAAMG,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC,UAAUC;AAAAA,EACVC,YAAY;AAAA,EACZC,OAAO;AAAA,EACPC,kBAAkB;AAAA,EAClBb,QAAQ;AAAA,EACRc;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC;AAAAA,EACA,GAAGC;AACU,MAAM;AACb,QAAA;AAAA,IAAEhB;AAAAA,IAASiB;AAAAA,EAAAA,IAAOC,WAAWjB,WAAW;AAE1CC,MAAAA;AAGEiB,QAAAA,cAAcC,eAAeb,KAAKC,MAAM;AAC9C,QAAMa,SAASd,OAAOC;AAChBc,QAAAA,mBAAmBD,UAAUF,gBAAgB;AAEnD,MAAIG,kBAAkB;AACpBpB,mCACE,OAAA;AAAA,MACEQ;AAAAA,MACAH;AAAAA,MACAC;AAAAA,MACAC;AAAAA,MACAX,WAAWE,QAAQuB;AAAAA,MAAI,GACnBZ;AAAAA,IAAAA,CACL;AAAA,EAAA,WAEMR,gBAAgB,MAAM;AACpBA,eAAAA;AAAAA,EAAAA,WACFkB,UAAUX,KAAK;AACxB,KAACR,QAAQ,IAAIQ;AAAAA,EAAAA,OACR;AACLR,mCACGsB,MAAI;AAAA,MACH/B;AAAAA,MACAgC,UAAUC,aAAarB,IAAI;AAAA,MAC3BP,WAAWE,QAAQ2B;AAAAA,IAAAA,CACpB;AAAA,EAEL;AAEA,QAAMC,cAA6B;AAAA,IACjC,GAAG7B;AAAAA,EAAAA;AAGL,MAAIK,aAAa,QAAQ,OAAOA,cAAc,UAAU;AAEtDwB,gBAAYC,eAAe;AAAA,EAC7B;AAEA,MAAI,CAACP,kBAAkB;AACrBM,gBAAYtB,kBAAkBd,SAC5Bc,iBACAX,MAAMC,OAAOkC,SACf;AACAF,gBAAYnC,QAAQD,SAASC,OAAOE,MAAMC,OAAOmC,KAAK;AAAA,EACxD;AAEA,QAAMC,oBAAmC,CAAA;AACzC,MAAIpB,QAAQ;AAGV,UAAMqB,cAAczC,SAASoB,QAAQjB,MAAMC,OAAOsC,QAAQ;AAC1DF,sBAAkBG,YAAa,yBAAwBF;AAAAA,EACzD;AAEA,QAAMG,aAAa5C,SAASqB,SAAS,IAAIlB,MAAMC,OAAOsC,QAAQ;AAE9D,6BACE,OAAA;AAAA,IAAKpC,WAAWE,QAAQqC;AAAAA,IAAU,GAAKrB;AAAAA,IAAMd,+BAC3C,OAAA;AAAA,MACEJ,WAAWmB,GAAGjB,QAAQY,QAAQZ,QAAQc,OAAO,GAAGd,QAAQK,IAAI,CAAC;AAAA,MAC7DN,OAAOiC;AAAAA,MAAkB9B,UAAA,CAExBW,SACCyB,oBAAA,OAAA;AAAA,QACExC,WAAWE,QAAQa;AAAAA,QACnBd,OAAO;AAAA,UAAEO,iBAAiB8B;AAAAA,QAAW;AAAA,MAAA,CACtC,GAEHE,oBAACC,WAAS;AAAA,QACRnC;AAAAA,QACAN,WAAWmB,GAAGjB,QAAQwC,MAAMxC,QAAQyC,QAAQzC,QAAQK,IAAI,GAAGP,SAAS;AAAA,QACpEC,OAAO6B;AAAAA,QACPd;AAAAA,QACAT;AAAAA,QAAW,GACPU;AAAAA,QAAWb;AAAAA,MAAAA,CAGN,CAAC;AAAA,IAAA,CACT;AAAA,EAAA,CACF;AAET;"}

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

@@ -1,24 +1,5 @@
-import _styled from "@emotion/styled/base";
-import { Avatar } from "@mui/material";
-import { transientOptions } from "../../utils/transientOptions.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
+import { createClasses } from "../../utils/classes.js";
 const EXTRA_SMALL = {
   container: "32px",
   avatar: "24px"
@@ -39,126 +20,105 @@ const EXTRA_LARGE = {
   container: "96px",
   avatar: "88px"
 };
-const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1sw81qd4"
-} : {
-  target: "e1sw81qd4",
-  label: "StyledContainer"
-})({
-  "&:focus-visible": {
-    ...outlineStyles,
-    borderRadius: 0
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVkrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0F2YXRhci9BdmF0YXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgQXZhdGFyIGFzIE11aUF2YXRhciB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5pbXBvcnQgeyB0cmFuc2llbnRPcHRpb25zIH0gZnJvbSBcIkBjb3JlL3V0aWxzL3RyYW5zaWVudE9wdGlvbnNcIjtcbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuaW1wb3J0IHsgSHZBdmF0YXJTaXplLCBIdkF2YXRhclZhcmlhbnQgfSBmcm9tIFwiLlwiO1xuXG5jb25zdCBFWFRSQV9TTUFMTCA9IHsgY29udGFpbmVyOiBcIjMycHhcIiwgYXZhdGFyOiBcIjI0cHhcIiB9O1xuY29uc3QgU01BTEwgPSB7IGNvbnRhaW5lcjogXCI0MHB4XCIsIGF2YXRhcjogXCIzMnB4XCIgfTtcbmNvbnN0IE1FRElVTSA9IHsgY29udGFpbmVyOiBcIjQ4cHhcIiwgYXZhdGFyOiBcIjQwcHhcIiB9O1xuY29uc3QgTEFSR0UgPSB7IGNvbnRhaW5lcjogXCI2MHB4XCIsIGF2YXRhcjogXCI1MnB4XCIgfTtcbmNvbnN0IEVYVFJBX0xBUkdFID0geyBjb250YWluZXI6IFwiOTZweFwiLCBhdmF0YXI6IFwiODhweFwiIH07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBcIiY6Zm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEltZyA9IHN0eWxlZChcImltZ1wiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAvLyBIYW5kbGUgbm9uLXNxdWFyZSBpbWFnZS4gVGhlIHByb3BlcnR5IGlzbid0IHN1cHBvcnRlZCBieSBJRSAxMS5cbiAgb2JqZWN0Rml0OiBcImNvdmVyXCIsXG4gIC8vIEhpZGUgYWx0IHRleHQuXG4gIGNvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIC8vIEhpZGUgdGhlIGltYWdlIGJyb2tlbiBpY29uLCBvbmx5IHdvcmtzIG9uIENocm9tZS5cbiAgdGV4dEluZGVudDogMTAwMDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFN0YXR1cyA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkdmFyaWFudCxcbiAgICAkc2l6ZSxcbiAgfToge1xuICAgICR2YXJpYW50OiBIdkF2YXRhclZhcmlhbnQ7XG4gICAgJHNpemU6IEh2QXZhdGFyU2l6ZTtcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG5cbiAgICAvLyB2YXJpYW50XG4gICAgLi4uKCR2YXJpYW50ID09PSBcImNpcmN1bGFyXCIgJiYge1xuICAgICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgIH0pLFxuICAgIC8vIHNpemVcbiAgICAuLi4oJHNpemUgPT09IFwieHNcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfU01BTEwuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9TTUFMTC5jb250YWluZXIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcInNtXCIgJiYge1xuICAgICAgd2lkdGg6IFNNQUxMLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogU01BTEwuY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJtZFwiICYmIHtcbiAgICAgIHdpZHRoOiBNRURJVU0uY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBNRURJVU0uY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJsZ1wiICYmIHtcbiAgICAgIHdpZHRoOiBMQVJHRS5jb250YWluZXIsXG4gICAgICBoZWlnaHQ6IExBUkdFLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwieGxcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfTEFSR0UuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9MQVJHRS5jb250YWluZXIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQXZhdGFyID0gc3R5bGVkKE11aUF2YXRhcikoXG4gICh7IHNpemUgfTogeyBjb21wb25lbnQ6IGFueTsgc2l6ZTogSHZBdmF0YXJTaXplIH0pID0+ICh7XG4gICAgLy8gcm9vdFxuICAgIGZvbnRTaXplOiBcIjFyZW1cIixcbiAgICAvLyBhdmF0YXJcbiAgICAuLi4oc2l6ZSA9PT0gXCJ4c1wiICYmIHtcbiAgICAgIHdpZHRoOiBFWFRSQV9TTUFMTC5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IEVYVFJBX1NNQUxMLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjAuNXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLihzaXplID09PSBcInNtXCIgJiYge1xuICAgICAgd2lkdGg6IFNNQUxMLmF2YXRhcixcbiAgICAgIGhlaWdodDogU01BTEwuYXZhdGFyLFxuICAgICAgZm9udFNpemU6IFwiMC42MjVyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJtZFwiICYmIHtcbiAgICAgIHdpZHRoOiBNRURJVU0uYXZhdGFyLFxuICAgICAgaGVpZ2h0OiBNRURJVU0uYXZhdGFyLFxuICAgICAgZm9udFNpemU6IFwiMXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLihzaXplID09PSBcImxnXCIgJiYge1xuICAgICAgd2lkdGg6IExBUkdFLmF2YXRhcixcbiAgICAgIGhlaWdodDogTEFSR0UuYXZhdGFyLFxuICAgICAgZm9udFNpemU6IFwiMS41cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKHNpemUgPT09IFwieGxcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfTEFSR0UuYXZhdGFyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9MQVJHRS5hdmF0YXIsXG4gICAgICBmb250U2l6ZTogXCIycmVtXCIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFkZ2UgPSBzdHlsZWQoXCJkaXZcIikoe1xuICB3aWR0aDogOCxcbiAgaGVpZ2h0OiA4LFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0b3A6IDAsXG4gIHJpZ2h0OiAwLFxuICBib3JkZXJSYWRpdXM6IFwiNTAlXCIsXG4gIHpJbmRleDogMSxcbn0pO1xuIl19 */");
-const StyledImg = /* @__PURE__ */ _styled("img", process.env.NODE_ENV === "production" ? {
-  target: "e1sw81qd3"
-} : {
-  target: "e1sw81qd3",
-  label: "StyledImg"
-})(process.env.NODE_ENV === "production" ? {
-  name: "p646uu",
-  styles: "width:100%;height:100%;text-align:center;object-fit:cover;color:transparent;text-indent:10000px"
-} : {
-  name: "p646uu",
-  styles: "width:100%;height:100%;text-align:center;object-fit:cover;color:transparent;text-indent:10000px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CeUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEF2YXRhciBhcyBNdWlBdmF0YXIgfSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IEh2QXZhdGFyU2l6ZSwgSHZBdmF0YXJWYXJpYW50IH0gZnJvbSBcIi5cIjtcblxuY29uc3QgRVhUUkFfU01BTEwgPSB7IGNvbnRhaW5lcjogXCIzMnB4XCIsIGF2YXRhcjogXCIyNHB4XCIgfTtcbmNvbnN0IFNNQUxMID0geyBjb250YWluZXI6IFwiNDBweFwiLCBhdmF0YXI6IFwiMzJweFwiIH07XG5jb25zdCBNRURJVU0gPSB7IGNvbnRhaW5lcjogXCI0OHB4XCIsIGF2YXRhcjogXCI0MHB4XCIgfTtcbmNvbnN0IExBUkdFID0geyBjb250YWluZXI6IFwiNjBweFwiLCBhdmF0YXI6IFwiNTJweFwiIH07XG5jb25zdCBFWFRSQV9MQVJHRSA9IHsgY29udGFpbmVyOiBcIjk2cHhcIiwgYXZhdGFyOiBcIjg4cHhcIiB9O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQoXCJpbWdcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgLy8gSGFuZGxlIG5vbi1zcXVhcmUgaW1hZ2UuIFRoZSBwcm9wZXJ0eSBpc24ndCBzdXBwb3J0ZWQgYnkgSUUgMTEuXG4gIG9iamVjdEZpdDogXCJjb3ZlclwiLFxuICAvLyBIaWRlIGFsdCB0ZXh0LlxuICBjb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAvLyBIaWRlIHRoZSBpbWFnZSBicm9rZW4gaWNvbiwgb25seSB3b3JrcyBvbiBDaHJvbWUuXG4gIHRleHRJbmRlbnQ6IDEwMDAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTdGF0dXMgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZhcmlhbnQsXG4gICAgJHNpemUsXG4gIH06IHtcbiAgICAkdmFyaWFudDogSHZBdmF0YXJWYXJpYW50O1xuICAgICRzaXplOiBIdkF2YXRhclNpemU7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuXG4gICAgLy8gdmFyaWFudFxuICAgIC4uLigkdmFyaWFudCA9PT0gXCJjaXJjdWxhclwiICYmIHtcbiAgICAgIGJvcmRlclJhZGl1czogXCI1MCVcIixcbiAgICB9KSxcbiAgICAvLyBzaXplXG4gICAgLi4uKCRzaXplID09PSBcInhzXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX1NNQUxMLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfU01BTEwuY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5jb250YWluZXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogTUVESVVNLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibGdcIiAmJiB7XG4gICAgICB3aWR0aDogTEFSR0UuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBMQVJHRS5jb250YWluZXIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuY29udGFpbmVyLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChNdWlBdmF0YXIpKFxuICAoeyBzaXplIH06IHsgY29tcG9uZW50OiBhbnk7IHNpemU6IEh2QXZhdGFyU2l6ZSB9KSA9PiAoe1xuICAgIC8vIHJvb3RcbiAgICBmb250U2l6ZTogXCIxcmVtXCIsXG4gICAgLy8gYXZhdGFyXG4gICAgLi4uKHNpemUgPT09IFwieHNcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfU01BTEwuYXZhdGFyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9TTUFMTC5hdmF0YXIsXG4gICAgICBmb250U2l6ZTogXCIwLjVyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjAuNjI1cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmF2YXRhcixcbiAgICAgIGhlaWdodDogTUVESVVNLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjFyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJsZ1wiICYmIHtcbiAgICAgIHdpZHRoOiBMQVJHRS5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IExBUkdFLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjEuNXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLihzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmF2YXRhcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuYXZhdGFyLFxuICAgICAgZm9udFNpemU6IFwiMnJlbVwiLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhZGdlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IDgsXG4gIGhlaWdodDogOCxcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgdG9wOiAwLFxuICByaWdodDogMCxcbiAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICB6SW5kZXg6IDEsXG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledStatus = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1sw81qd2"
-}, transientOptions) : _extends({}, {
-  target: "e1sw81qd2",
-  label: "StyledStatus"
-}, transientOptions))(({
-  $variant,
-  $size
-}) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  position: "relative",
-  // variant
-  ...$variant === "circular" && {
-    borderRadius: "50%"
-  },
-  // size
-  ...$size === "xs" && {
-    width: EXTRA_SMALL.container,
-    height: EXTRA_SMALL.container
-  },
-  ...$size === "sm" && {
-    width: SMALL.container,
-    height: SMALL.container
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvAvatar", {
+  root: {
+    fontSize: "1rem"
   },
-  ...$size === "md" && {
-    width: MEDIUM.container,
-    height: MEDIUM.container
+  container: {
+    "&:focus-visible": {
+      ...outlineStyles,
+      borderRadius: 0
+    }
   },
-  ...$size === "lg" && {
-    width: LARGE.container,
-    height: LARGE.container
+  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
   },
-  ...$size === "xl" && {
-    width: EXTRA_LARGE.container,
-    height: EXTRA_LARGE.container
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEF2YXRhciBhcyBNdWlBdmF0YXIgfSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IEh2QXZhdGFyU2l6ZSwgSHZBdmF0YXJWYXJpYW50IH0gZnJvbSBcIi5cIjtcblxuY29uc3QgRVhUUkFfU01BTEwgPSB7IGNvbnRhaW5lcjogXCIzMnB4XCIsIGF2YXRhcjogXCIyNHB4XCIgfTtcbmNvbnN0IFNNQUxMID0geyBjb250YWluZXI6IFwiNDBweFwiLCBhdmF0YXI6IFwiMzJweFwiIH07XG5jb25zdCBNRURJVU0gPSB7IGNvbnRhaW5lcjogXCI0OHB4XCIsIGF2YXRhcjogXCI0MHB4XCIgfTtcbmNvbnN0IExBUkdFID0geyBjb250YWluZXI6IFwiNjBweFwiLCBhdmF0YXI6IFwiNTJweFwiIH07XG5jb25zdCBFWFRSQV9MQVJHRSA9IHsgY29udGFpbmVyOiBcIjk2cHhcIiwgYXZhdGFyOiBcIjg4cHhcIiB9O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQoXCJpbWdcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgLy8gSGFuZGxlIG5vbi1zcXVhcmUgaW1hZ2UuIFRoZSBwcm9wZXJ0eSBpc24ndCBzdXBwb3J0ZWQgYnkgSUUgMTEuXG4gIG9iamVjdEZpdDogXCJjb3ZlclwiLFxuICAvLyBIaWRlIGFsdCB0ZXh0LlxuICBjb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAvLyBIaWRlIHRoZSBpbWFnZSBicm9rZW4gaWNvbiwgb25seSB3b3JrcyBvbiBDaHJvbWUuXG4gIHRleHRJbmRlbnQ6IDEwMDAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTdGF0dXMgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZhcmlhbnQsXG4gICAgJHNpemUsXG4gIH06IHtcbiAgICAkdmFyaWFudDogSHZBdmF0YXJWYXJpYW50O1xuICAgICRzaXplOiBIdkF2YXRhclNpemU7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuXG4gICAgLy8gdmFyaWFudFxuICAgIC4uLigkdmFyaWFudCA9PT0gXCJjaXJjdWxhclwiICYmIHtcbiAgICAgIGJvcmRlclJhZGl1czogXCI1MCVcIixcbiAgICB9KSxcbiAgICAvLyBzaXplXG4gICAgLi4uKCRzaXplID09PSBcInhzXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX1NNQUxMLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfU01BTEwuY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5jb250YWluZXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogTUVESVVNLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibGdcIiAmJiB7XG4gICAgICB3aWR0aDogTEFSR0UuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBMQVJHRS5jb250YWluZXIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuY29udGFpbmVyLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChNdWlBdmF0YXIpKFxuICAoeyBzaXplIH06IHsgY29tcG9uZW50OiBhbnk7IHNpemU6IEh2QXZhdGFyU2l6ZSB9KSA9PiAoe1xuICAgIC8vIHJvb3RcbiAgICBmb250U2l6ZTogXCIxcmVtXCIsXG4gICAgLy8gYXZhdGFyXG4gICAgLi4uKHNpemUgPT09IFwieHNcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfU01BTEwuYXZhdGFyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9TTUFMTC5hdmF0YXIsXG4gICAgICBmb250U2l6ZTogXCIwLjVyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjAuNjI1cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmF2YXRhcixcbiAgICAgIGhlaWdodDogTUVESVVNLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjFyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJsZ1wiICYmIHtcbiAgICAgIHdpZHRoOiBMQVJHRS5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IExBUkdFLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjEuNXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLihzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmF2YXRhcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuYXZhdGFyLFxuICAgICAgZm9udFNpemU6IFwiMnJlbVwiLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhZGdlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IDgsXG4gIGhlaWdodDogOCxcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgdG9wOiAwLFxuICByaWdodDogMCxcbiAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICB6SW5kZXg6IDEsXG59KTtcbiJdfQ== */");
-const StyledAvatar = /* @__PURE__ */ _styled(Avatar, process.env.NODE_ENV === "production" ? {
-  target: "e1sw81qd1"
-} : {
-  target: "e1sw81qd1",
-  label: "StyledAvatar"
-})(({
-  size
-}) => ({
-  // root
-  fontSize: "1rem",
-  // avatar
-  ...size === "xs" && {
-    width: EXTRA_SMALL.avatar,
-    height: EXTRA_SMALL.avatar,
-    fontSize: "0.5rem"
+  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
+    }
   },
-  ...size === "sm" && {
-    width: SMALL.avatar,
-    height: SMALL.avatar,
-    fontSize: "0.625rem"
+  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"
+    }
   },
-  ...size === "md" && {
-    width: MEDIUM.avatar,
-    height: MEDIUM.avatar,
-    fontSize: "1rem"
+  badge: {
+    width: 8,
+    height: 8,
+    position: "absolute",
+    top: 0,
+    right: 0,
+    borderRadius: "50%",
+    zIndex: 1
   },
-  ...size === "lg" && {
-    width: LARGE.avatar,
-    height: LARGE.avatar,
-    fontSize: "1.5rem"
+  xs: {},
+  sm: {},
+  md: {},
+  lg: {},
+  xl: {},
+  circular: {
+    borderRadius: "50%"
   },
-  ...size === "xl" && {
-    width: EXTRA_LARGE.avatar,
-    height: EXTRA_LARGE.avatar,
-    fontSize: "2rem"
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJFNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEF2YXRhciBhcyBNdWlBdmF0YXIgfSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IEh2QXZhdGFyU2l6ZSwgSHZBdmF0YXJWYXJpYW50IH0gZnJvbSBcIi5cIjtcblxuY29uc3QgRVhUUkFfU01BTEwgPSB7IGNvbnRhaW5lcjogXCIzMnB4XCIsIGF2YXRhcjogXCIyNHB4XCIgfTtcbmNvbnN0IFNNQUxMID0geyBjb250YWluZXI6IFwiNDBweFwiLCBhdmF0YXI6IFwiMzJweFwiIH07XG5jb25zdCBNRURJVU0gPSB7IGNvbnRhaW5lcjogXCI0OHB4XCIsIGF2YXRhcjogXCI0MHB4XCIgfTtcbmNvbnN0IExBUkdFID0geyBjb250YWluZXI6IFwiNjBweFwiLCBhdmF0YXI6IFwiNTJweFwiIH07XG5jb25zdCBFWFRSQV9MQVJHRSA9IHsgY29udGFpbmVyOiBcIjk2cHhcIiwgYXZhdGFyOiBcIjg4cHhcIiB9O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQoXCJpbWdcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgLy8gSGFuZGxlIG5vbi1zcXVhcmUgaW1hZ2UuIFRoZSBwcm9wZXJ0eSBpc24ndCBzdXBwb3J0ZWQgYnkgSUUgMTEuXG4gIG9iamVjdEZpdDogXCJjb3ZlclwiLFxuICAvLyBIaWRlIGFsdCB0ZXh0LlxuICBjb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAvLyBIaWRlIHRoZSBpbWFnZSBicm9rZW4gaWNvbiwgb25seSB3b3JrcyBvbiBDaHJvbWUuXG4gIHRleHRJbmRlbnQ6IDEwMDAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTdGF0dXMgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZhcmlhbnQsXG4gICAgJHNpemUsXG4gIH06IHtcbiAgICAkdmFyaWFudDogSHZBdmF0YXJWYXJpYW50O1xuICAgICRzaXplOiBIdkF2YXRhclNpemU7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuXG4gICAgLy8gdmFyaWFudFxuICAgIC4uLigkdmFyaWFudCA9PT0gXCJjaXJjdWxhclwiICYmIHtcbiAgICAgIGJvcmRlclJhZGl1czogXCI1MCVcIixcbiAgICB9KSxcbiAgICAvLyBzaXplXG4gICAgLi4uKCRzaXplID09PSBcInhzXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX1NNQUxMLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfU01BTEwuY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5jb250YWluZXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogTUVESVVNLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibGdcIiAmJiB7XG4gICAgICB3aWR0aDogTEFSR0UuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBMQVJHRS5jb250YWluZXIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuY29udGFpbmVyLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChNdWlBdmF0YXIpKFxuICAoeyBzaXplIH06IHsgY29tcG9uZW50OiBhbnk7IHNpemU6IEh2QXZhdGFyU2l6ZSB9KSA9PiAoe1xuICAgIC8vIHJvb3RcbiAgICBmb250U2l6ZTogXCIxcmVtXCIsXG4gICAgLy8gYXZhdGFyXG4gICAgLi4uKHNpemUgPT09IFwieHNcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfU01BTEwuYXZhdGFyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9TTUFMTC5hdmF0YXIsXG4gICAgICBmb250U2l6ZTogXCIwLjVyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjAuNjI1cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmF2YXRhcixcbiAgICAgIGhlaWdodDogTUVESVVNLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjFyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJsZ1wiICYmIHtcbiAgICAgIHdpZHRoOiBMQVJHRS5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IExBUkdFLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjEuNXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLihzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmF2YXRhcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuYXZhdGFyLFxuICAgICAgZm9udFNpemU6IFwiMnJlbVwiLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhZGdlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IDgsXG4gIGhlaWdodDogOCxcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgdG9wOiAwLFxuICByaWdodDogMCxcbiAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICB6SW5kZXg6IDEsXG59KTtcbiJdfQ== */");
-const StyledBadge = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1sw81qd0"
-} : {
-  target: "e1sw81qd0",
-  label: "StyledBadge"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1318xp0",
-  styles: "width:8px;height:8px;position:absolute;top:0;right:0;border-radius:50%;z-index:1"
-} : {
-  name: "1318xp0",
-  styles: "width:8px;height:8px;position:absolute;top:0;right:0;border-radius:50%;z-index:1",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRHMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEF2YXRhciBhcyBNdWlBdmF0YXIgfSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IEh2QXZhdGFyU2l6ZSwgSHZBdmF0YXJWYXJpYW50IH0gZnJvbSBcIi5cIjtcblxuY29uc3QgRVhUUkFfU01BTEwgPSB7IGNvbnRhaW5lcjogXCIzMnB4XCIsIGF2YXRhcjogXCIyNHB4XCIgfTtcbmNvbnN0IFNNQUxMID0geyBjb250YWluZXI6IFwiNDBweFwiLCBhdmF0YXI6IFwiMzJweFwiIH07XG5jb25zdCBNRURJVU0gPSB7IGNvbnRhaW5lcjogXCI0OHB4XCIsIGF2YXRhcjogXCI0MHB4XCIgfTtcbmNvbnN0IExBUkdFID0geyBjb250YWluZXI6IFwiNjBweFwiLCBhdmF0YXI6IFwiNTJweFwiIH07XG5jb25zdCBFWFRSQV9MQVJHRSA9IHsgY29udGFpbmVyOiBcIjk2cHhcIiwgYXZhdGFyOiBcIjg4cHhcIiB9O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQoXCJpbWdcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgLy8gSGFuZGxlIG5vbi1zcXVhcmUgaW1hZ2UuIFRoZSBwcm9wZXJ0eSBpc24ndCBzdXBwb3J0ZWQgYnkgSUUgMTEuXG4gIG9iamVjdEZpdDogXCJjb3ZlclwiLFxuICAvLyBIaWRlIGFsdCB0ZXh0LlxuICBjb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAvLyBIaWRlIHRoZSBpbWFnZSBicm9rZW4gaWNvbiwgb25seSB3b3JrcyBvbiBDaHJvbWUuXG4gIHRleHRJbmRlbnQ6IDEwMDAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTdGF0dXMgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZhcmlhbnQsXG4gICAgJHNpemUsXG4gIH06IHtcbiAgICAkdmFyaWFudDogSHZBdmF0YXJWYXJpYW50O1xuICAgICRzaXplOiBIdkF2YXRhclNpemU7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuXG4gICAgLy8gdmFyaWFudFxuICAgIC4uLigkdmFyaWFudCA9PT0gXCJjaXJjdWxhclwiICYmIHtcbiAgICAgIGJvcmRlclJhZGl1czogXCI1MCVcIixcbiAgICB9KSxcbiAgICAvLyBzaXplXG4gICAgLi4uKCRzaXplID09PSBcInhzXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX1NNQUxMLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfU01BTEwuY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5jb250YWluZXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogTUVESVVNLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibGdcIiAmJiB7XG4gICAgICB3aWR0aDogTEFSR0UuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBMQVJHRS5jb250YWluZXIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuY29udGFpbmVyLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChNdWlBdmF0YXIpKFxuICAoeyBzaXplIH06IHsgY29tcG9uZW50OiBhbnk7IHNpemU6IEh2QXZhdGFyU2l6ZSB9KSA9PiAoe1xuICAgIC8vIHJvb3RcbiAgICBmb250U2l6ZTogXCIxcmVtXCIsXG4gICAgLy8gYXZhdGFyXG4gICAgLi4uKHNpemUgPT09IFwieHNcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfU01BTEwuYXZhdGFyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9TTUFMTC5hdmF0YXIsXG4gICAgICBmb250U2l6ZTogXCIwLjVyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjAuNjI1cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmF2YXRhcixcbiAgICAgIGhlaWdodDogTUVESVVNLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjFyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJsZ1wiICYmIHtcbiAgICAgIHdpZHRoOiBMQVJHRS5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IExBUkdFLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjEuNXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLihzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmF2YXRhcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuYXZhdGFyLFxuICAgICAgZm9udFNpemU6IFwiMnJlbVwiLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhZGdlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IDgsXG4gIGhlaWdodDogOCxcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgdG9wOiAwLFxuICByaWdodDogMCxcbiAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICB6SW5kZXg6IDEsXG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  square: {}
 });
 export {
-  StyledAvatar,
-  StyledBadge,
-  StyledContainer,
-  StyledImg,
-  StyledStatus
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Avatar.styles.js.map