@hitachivantara/uikit-react-core 5.22.0 → 5.22.1

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 MuiAvatar from "@mui/material/Avatar";
 import { useImageLoaded } from "../../hooks/useImageLoaded.js";
 import { decreaseSize } from "../../utils/sizes.js";
-import { StyledImg, StyledContainer, StyledStatus, StyledBadge, StyledAvatar } from "./Avatar.styles.js";
-import avatarClasses from "./avatarClasses.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 { CSSProperties, HTMLAttributes } from \"react\";\n\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useImageLoaded } from \"@core/hooks/useImageLoaded\";\nimport { decreaseSize } from \"@core/utils/sizes\";\n\nimport {\n  StyledAvatar,\n  StyledBadge,\n  StyledContainer,\n  StyledImg,\n  StyledStatus,\n} from \"./Avatar.styles\";\nimport avatarClasses, { HvAvatarClasses } from \"./avatarClasses\";\nimport { HvAvatarSize, HvAvatarVariant } from \"./types\";\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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWUrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0F2YXRhci9BdmF0YXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuXG5pbXBvcnQgeyBBdmF0YXIgYXMgTXVpQXZhdGFyIH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcblxuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcblxuaW1wb3J0IHsgSHZBdmF0YXJTaXplLCBIdkF2YXRhclZhcmlhbnQgfSBmcm9tIFwiLi90eXBlc1wiO1xuXG5jb25zdCBFWFRSQV9TTUFMTCA9IHsgY29udGFpbmVyOiBcIjMycHhcIiwgYXZhdGFyOiBcIjI0cHhcIiB9O1xuY29uc3QgU01BTEwgPSB7IGNvbnRhaW5lcjogXCI0MHB4XCIsIGF2YXRhcjogXCIzMnB4XCIgfTtcbmNvbnN0IE1FRElVTSA9IHsgY29udGFpbmVyOiBcIjQ4cHhcIiwgYXZhdGFyOiBcIjQwcHhcIiB9O1xuY29uc3QgTEFSR0UgPSB7IGNvbnRhaW5lcjogXCI2MHB4XCIsIGF2YXRhcjogXCI1MnB4XCIgfTtcbmNvbnN0IEVYVFJBX0xBUkdFID0geyBjb250YWluZXI6IFwiOTZweFwiLCBhdmF0YXI6IFwiODhweFwiIH07XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBcIiY6Zm9jdXMtdmlzaWJsZVwiOiB7XG4gICAgLi4ub3V0bGluZVN0eWxlcyxcbiAgICBib3JkZXJSYWRpdXM6IDAsXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEltZyA9IHN0eWxlZChcImltZ1wiKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgaGVpZ2h0OiBcIjEwMCVcIixcbiAgdGV4dEFsaWduOiBcImNlbnRlclwiLFxuICAvLyBIYW5kbGUgbm9uLXNxdWFyZSBpbWFnZS4gVGhlIHByb3BlcnR5IGlzbid0IHN1cHBvcnRlZCBieSBJRSAxMS5cbiAgb2JqZWN0Rml0OiBcImNvdmVyXCIsXG4gIC8vIEhpZGUgYWx0IHRleHQuXG4gIGNvbG9yOiBcInRyYW5zcGFyZW50XCIsXG4gIC8vIEhpZGUgdGhlIGltYWdlIGJyb2tlbiBpY29uLCBvbmx5IHdvcmtzIG9uIENocm9tZS5cbiAgdGV4dEluZGVudDogMTAwMDAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFN0YXR1cyA9IHN0eWxlZChcbiAgXCJkaXZcIixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkdmFyaWFudCxcbiAgICAkc2l6ZSxcbiAgfToge1xuICAgICR2YXJpYW50OiBIdkF2YXRhclZhcmlhbnQ7XG4gICAgJHNpemU6IEh2QXZhdGFyU2l6ZTtcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG5cbiAgICAvLyB2YXJpYW50XG4gICAgLi4uKCR2YXJpYW50ID09PSBcImNpcmN1bGFyXCIgJiYge1xuICAgICAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICAgIH0pLFxuICAgIC8vIHNpemVcbiAgICAuLi4oJHNpemUgPT09IFwieHNcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfU01BTEwuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9TTUFMTC5jb250YWluZXIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcInNtXCIgJiYge1xuICAgICAgd2lkdGg6IFNNQUxMLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogU01BTEwuY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJtZFwiICYmIHtcbiAgICAgIHdpZHRoOiBNRURJVU0uY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBNRURJVU0uY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJsZ1wiICYmIHtcbiAgICAgIHdpZHRoOiBMQVJHRS5jb250YWluZXIsXG4gICAgICBoZWlnaHQ6IExBUkdFLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwieGxcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfTEFSR0UuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9MQVJHRS5jb250YWluZXIsXG4gICAgfSksXG4gIH0pXG4pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQXZhdGFyID0gc3R5bGVkKE11aUF2YXRhcikoXG4gICh7IHNpemUgfTogeyBjb21wb25lbnQ6IGFueTsgc2l6ZTogSHZBdmF0YXJTaXplIH0pID0+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCeUIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgQXZhdGFyIGFzIE11aUF2YXRhciB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5cbmltcG9ydCB7IEh2QXZhdGFyU2l6ZSwgSHZBdmF0YXJWYXJpYW50IH0gZnJvbSBcIi4vdHlwZXNcIjtcblxuY29uc3QgRVhUUkFfU01BTEwgPSB7IGNvbnRhaW5lcjogXCIzMnB4XCIsIGF2YXRhcjogXCIyNHB4XCIgfTtcbmNvbnN0IFNNQUxMID0geyBjb250YWluZXI6IFwiNDBweFwiLCBhdmF0YXI6IFwiMzJweFwiIH07XG5jb25zdCBNRURJVU0gPSB7IGNvbnRhaW5lcjogXCI0OHB4XCIsIGF2YXRhcjogXCI0MHB4XCIgfTtcbmNvbnN0IExBUkdFID0geyBjb250YWluZXI6IFwiNjBweFwiLCBhdmF0YXI6IFwiNTJweFwiIH07XG5jb25zdCBFWFRSQV9MQVJHRSA9IHsgY29udGFpbmVyOiBcIjk2cHhcIiwgYXZhdGFyOiBcIjg4cHhcIiB9O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQoXCJpbWdcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgLy8gSGFuZGxlIG5vbi1zcXVhcmUgaW1hZ2UuIFRoZSBwcm9wZXJ0eSBpc24ndCBzdXBwb3J0ZWQgYnkgSUUgMTEuXG4gIG9iamVjdEZpdDogXCJjb3ZlclwiLFxuICAvLyBIaWRlIGFsdCB0ZXh0LlxuICBjb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAvLyBIaWRlIHRoZSBpbWFnZSBicm9rZW4gaWNvbiwgb25seSB3b3JrcyBvbiBDaHJvbWUuXG4gIHRleHRJbmRlbnQ6IDEwMDAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTdGF0dXMgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZhcmlhbnQsXG4gICAgJHNpemUsXG4gIH06IHtcbiAgICAkdmFyaWFudDogSHZBdmF0YXJWYXJpYW50O1xuICAgICRzaXplOiBIdkF2YXRhclNpemU7XG4gIH0pID0+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgQXZhdGFyIGFzIE11aUF2YXRhciB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5cbmltcG9ydCB7IEh2QXZhdGFyU2l6ZSwgSHZBdmF0YXJWYXJpYW50IH0gZnJvbSBcIi4vdHlwZXNcIjtcblxuY29uc3QgRVhUUkFfU01BTEwgPSB7IGNvbnRhaW5lcjogXCIzMnB4XCIsIGF2YXRhcjogXCIyNHB4XCIgfTtcbmNvbnN0IFNNQUxMID0geyBjb250YWluZXI6IFwiNDBweFwiLCBhdmF0YXI6IFwiMzJweFwiIH07XG5jb25zdCBNRURJVU0gPSB7IGNvbnRhaW5lcjogXCI0OHB4XCIsIGF2YXRhcjogXCI0MHB4XCIgfTtcbmNvbnN0IExBUkdFID0geyBjb250YWluZXI6IFwiNjBweFwiLCBhdmF0YXI6IFwiNTJweFwiIH07XG5jb25zdCBFWFRSQV9MQVJHRSA9IHsgY29udGFpbmVyOiBcIjk2cHhcIiwgYXZhdGFyOiBcIjg4cHhcIiB9O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQoXCJpbWdcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgLy8gSGFuZGxlIG5vbi1zcXVhcmUgaW1hZ2UuIFRoZSBwcm9wZXJ0eSBpc24ndCBzdXBwb3J0ZWQgYnkgSUUgMTEuXG4gIG9iamVjdEZpdDogXCJjb3ZlclwiLFxuICAvLyBIaWRlIGFsdCB0ZXh0LlxuICBjb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAvLyBIaWRlIHRoZSBpbWFnZSBicm9rZW4gaWNvbiwgb25seSB3b3JrcyBvbiBDaHJvbWUuXG4gIHRleHRJbmRlbnQ6IDEwMDAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTdGF0dXMgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZhcmlhbnQsXG4gICAgJHNpemUsXG4gIH06IHtcbiAgICAkdmFyaWFudDogSHZBdmF0YXJWYXJpYW50O1xuICAgICRzaXplOiBIdkF2YXRhclNpemU7XG4gIH0pID0+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThFNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgQXZhdGFyIGFzIE11aUF2YXRhciB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5cbmltcG9ydCB7IEh2QXZhdGFyU2l6ZSwgSHZBdmF0YXJWYXJpYW50IH0gZnJvbSBcIi4vdHlwZXNcIjtcblxuY29uc3QgRVhUUkFfU01BTEwgPSB7IGNvbnRhaW5lcjogXCIzMnB4XCIsIGF2YXRhcjogXCIyNHB4XCIgfTtcbmNvbnN0IFNNQUxMID0geyBjb250YWluZXI6IFwiNDBweFwiLCBhdmF0YXI6IFwiMzJweFwiIH07XG5jb25zdCBNRURJVU0gPSB7IGNvbnRhaW5lcjogXCI0OHB4XCIsIGF2YXRhcjogXCI0MHB4XCIgfTtcbmNvbnN0IExBUkdFID0geyBjb250YWluZXI6IFwiNjBweFwiLCBhdmF0YXI6IFwiNTJweFwiIH07XG5jb25zdCBFWFRSQV9MQVJHRSA9IHsgY29udGFpbmVyOiBcIjk2cHhcIiwgYXZhdGFyOiBcIjg4cHhcIiB9O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQoXCJpbWdcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgLy8gSGFuZGxlIG5vbi1zcXVhcmUgaW1hZ2UuIFRoZSBwcm9wZXJ0eSBpc24ndCBzdXBwb3J0ZWQgYnkgSUUgMTEuXG4gIG9iamVjdEZpdDogXCJjb3ZlclwiLFxuICAvLyBIaWRlIGFsdCB0ZXh0LlxuICBjb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAvLyBIaWRlIHRoZSBpbWFnZSBicm9rZW4gaWNvbiwgb25seSB3b3JrcyBvbiBDaHJvbWUuXG4gIHRleHRJbmRlbnQ6IDEwMDAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTdGF0dXMgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZhcmlhbnQsXG4gICAgJHNpemUsXG4gIH06IHtcbiAgICAkdmFyaWFudDogSHZBdmF0YXJWYXJpYW50O1xuICAgICRzaXplOiBIdkF2YXRhclNpemU7XG4gIH0pID0+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQXZhdGFyL0F2YXRhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStHMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgQXZhdGFyIGFzIE11aUF2YXRhciB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IHsgb3V0bGluZVN0eWxlcyB9IGZyb20gXCJAY29yZS91dGlscy9mb2N1c1V0aWxzXCI7XG5cbmltcG9ydCB7IEh2QXZhdGFyU2l6ZSwgSHZBdmF0YXJWYXJpYW50IH0gZnJvbSBcIi4vdHlwZXNcIjtcblxuY29uc3QgRVhUUkFfU01BTEwgPSB7IGNvbnRhaW5lcjogXCIzMnB4XCIsIGF2YXRhcjogXCIyNHB4XCIgfTtcbmNvbnN0IFNNQUxMID0geyBjb250YWluZXI6IFwiNDBweFwiLCBhdmF0YXI6IFwiMzJweFwiIH07XG5jb25zdCBNRURJVU0gPSB7IGNvbnRhaW5lcjogXCI0OHB4XCIsIGF2YXRhcjogXCI0MHB4XCIgfTtcbmNvbnN0IExBUkdFID0geyBjb250YWluZXI6IFwiNjBweFwiLCBhdmF0YXI6IFwiNTJweFwiIH07XG5jb25zdCBFWFRSQV9MQVJHRSA9IHsgY29udGFpbmVyOiBcIjk2cHhcIiwgYXZhdGFyOiBcIjg4cHhcIiB9O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ29udGFpbmVyID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgYm9yZGVyUmFkaXVzOiAwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRJbWcgPSBzdHlsZWQoXCJpbWdcIikoe1xuICB3aWR0aDogXCIxMDAlXCIsXG4gIGhlaWdodDogXCIxMDAlXCIsXG4gIHRleHRBbGlnbjogXCJjZW50ZXJcIixcbiAgLy8gSGFuZGxlIG5vbi1zcXVhcmUgaW1hZ2UuIFRoZSBwcm9wZXJ0eSBpc24ndCBzdXBwb3J0ZWQgYnkgSUUgMTEuXG4gIG9iamVjdEZpdDogXCJjb3ZlclwiLFxuICAvLyBIaWRlIGFsdCB0ZXh0LlxuICBjb2xvcjogXCJ0cmFuc3BhcmVudFwiLFxuICAvLyBIaWRlIHRoZSBpbWFnZSBicm9rZW4gaWNvbiwgb25seSB3b3JrcyBvbiBDaHJvbWUuXG4gIHRleHRJbmRlbnQ6IDEwMDAwLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTdGF0dXMgPSBzdHlsZWQoXG4gIFwiZGl2XCIsXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHZhcmlhbnQsXG4gICAgJHNpemUsXG4gIH06IHtcbiAgICAkdmFyaWFudDogSHZBdmF0YXJWYXJpYW50O1xuICAgICRzaXplOiBIdkF2YXRhclNpemU7XG4gIH0pID0+ICh7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgYWxpZ25JdGVtczogXCJjZW50ZXJcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuXG4gICAgLy8gdmFyaWFudFxuICAgIC4uLigkdmFyaWFudCA9PT0gXCJjaXJjdWxhclwiICYmIHtcbiAgICAgIGJvcmRlclJhZGl1czogXCI1MCVcIixcbiAgICB9KSxcbiAgICAvLyBzaXplXG4gICAgLi4uKCRzaXplID09PSBcInhzXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX1NNQUxMLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfU01BTEwuY29udGFpbmVyLFxuICAgIH0pLFxuICAgIC4uLigkc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5jb250YWluZXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogTUVESVVNLmNvbnRhaW5lcixcbiAgICB9KSxcbiAgICAuLi4oJHNpemUgPT09IFwibGdcIiAmJiB7XG4gICAgICB3aWR0aDogTEFSR0UuY29udGFpbmVyLFxuICAgICAgaGVpZ2h0OiBMQVJHRS5jb250YWluZXIsXG4gICAgfSksXG4gICAgLi4uKCRzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmNvbnRhaW5lcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuY29udGFpbmVyLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEF2YXRhciA9IHN0eWxlZChNdWlBdmF0YXIpKFxuICAoeyBzaXplIH06IHsgY29tcG9uZW50OiBhbnk7IHNpemU6IEh2QXZhdGFyU2l6ZSB9KSA9PiAoe1xuICAgIC8vIHJvb3RcbiAgICBmb250U2l6ZTogXCIxcmVtXCIsXG4gICAgLy8gYXZhdGFyXG4gICAgLi4uKHNpemUgPT09IFwieHNcIiAmJiB7XG4gICAgICB3aWR0aDogRVhUUkFfU01BTEwuYXZhdGFyLFxuICAgICAgaGVpZ2h0OiBFWFRSQV9TTUFMTC5hdmF0YXIsXG4gICAgICBmb250U2l6ZTogXCIwLjVyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJzbVwiICYmIHtcbiAgICAgIHdpZHRoOiBTTUFMTC5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IFNNQUxMLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjAuNjI1cmVtXCIsXG4gICAgfSksXG4gICAgLi4uKHNpemUgPT09IFwibWRcIiAmJiB7XG4gICAgICB3aWR0aDogTUVESVVNLmF2YXRhcixcbiAgICAgIGhlaWdodDogTUVESVVNLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjFyZW1cIixcbiAgICB9KSxcbiAgICAuLi4oc2l6ZSA9PT0gXCJsZ1wiICYmIHtcbiAgICAgIHdpZHRoOiBMQVJHRS5hdmF0YXIsXG4gICAgICBoZWlnaHQ6IExBUkdFLmF2YXRhcixcbiAgICAgIGZvbnRTaXplOiBcIjEuNXJlbVwiLFxuICAgIH0pLFxuICAgIC4uLihzaXplID09PSBcInhsXCIgJiYge1xuICAgICAgd2lkdGg6IEVYVFJBX0xBUkdFLmF2YXRhcixcbiAgICAgIGhlaWdodDogRVhUUkFfTEFSR0UuYXZhdGFyLFxuICAgICAgZm9udFNpemU6IFwiMnJlbVwiLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEJhZGdlID0gc3R5bGVkKFwiZGl2XCIpKHtcbiAgd2lkdGg6IDgsXG4gIGhlaWdodDogOCxcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgdG9wOiAwLFxuICByaWdodDogMCxcbiAgYm9yZGVyUmFkaXVzOiBcIjUwJVwiLFxuICB6SW5kZXg6IDEsXG59KTtcbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  square: {}
 });
 export {
-  StyledAvatar,
-  StyledBadge,
-  StyledContainer,
-  StyledImg,
-  StyledStatus
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Avatar.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.js","sources":["../../../../src/components/Avatar/Avatar.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { Avatar as MuiAvatar } from \"@mui/material\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { HvAvatarSize, HvAvatarVariant } from \"./types\";\n\nconst EXTRA_SMALL = { container: \"32px\", avatar: \"24px\" };\nconst SMALL = { container: \"40px\", avatar: \"32px\" };\nconst MEDIUM = { container: \"48px\", avatar: \"40px\" };\nconst LARGE = { container: \"60px\", avatar: \"52px\" };\nconst EXTRA_LARGE = { container: \"96px\", avatar: \"88px\" };\n\nexport const StyledContainer = styled(\"div\")({\n  \"&:focus-visible\": {\n    ...outlineStyles,\n    borderRadius: 0,\n  },\n});\n\nexport const StyledImg = styled(\"img\")({\n  width: \"100%\",\n  height: \"100%\",\n  textAlign: \"center\",\n  // Handle non-square image. The property isn't supported by IE 11.\n  objectFit: \"cover\",\n  // Hide alt text.\n  color: \"transparent\",\n  // Hide the image broken icon, only works on Chrome.\n  textIndent: 10000,\n});\n\nexport const StyledStatus = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $variant,\n    $size,\n  }: {\n    $variant: HvAvatarVariant;\n    $size: HvAvatarSize;\n  }) => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n\n    // variant\n    ...($variant === \"circular\" && {\n      borderRadius: \"50%\",\n    }),\n    // size\n    ...($size === \"xs\" && {\n      width: EXTRA_SMALL.container,\n      height: EXTRA_SMALL.container,\n    }),\n    ...($size === \"sm\" && {\n      width: SMALL.container,\n      height: SMALL.container,\n    }),\n    ...($size === \"md\" && {\n      width: MEDIUM.container,\n      height: MEDIUM.container,\n    }),\n    ...($size === \"lg\" && {\n      width: LARGE.container,\n      height: LARGE.container,\n    }),\n    ...($size === \"xl\" && {\n      width: EXTRA_LARGE.container,\n      height: EXTRA_LARGE.container,\n    }),\n  })\n);\n\nexport const StyledAvatar = styled(MuiAvatar)(\n  ({ size }: { component: any; size: HvAvatarSize }) => ({\n    // root\n    fontSize: \"1rem\",\n    // avatar\n    ...(size === \"xs\" && {\n      width: EXTRA_SMALL.avatar,\n      height: EXTRA_SMALL.avatar,\n      fontSize: \"0.5rem\",\n    }),\n    ...(size === \"sm\" && {\n      width: SMALL.avatar,\n      height: SMALL.avatar,\n      fontSize: \"0.625rem\",\n    }),\n    ...(size === \"md\" && {\n      width: MEDIUM.avatar,\n      height: MEDIUM.avatar,\n      fontSize: \"1rem\",\n    }),\n    ...(size === \"lg\" && {\n      width: LARGE.avatar,\n      height: LARGE.avatar,\n      fontSize: \"1.5rem\",\n    }),\n    ...(size === \"xl\" && {\n      width: EXTRA_LARGE.avatar,\n      height: EXTRA_LARGE.avatar,\n      fontSize: \"2rem\",\n    }),\n  })\n);\n\nexport const StyledBadge = styled(\"div\")({\n  width: 8,\n  height: 8,\n  position: \"absolute\",\n  top: 0,\n  right: 0,\n  borderRadius: \"50%\",\n  zIndex: 1,\n});\n"],"names":["EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","StyledContainer","process","env","NODE_ENV","target","label","outlineStyles","borderRadius","StyledImg","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledStatus","_extends","transientOptions","$variant","$size","display","alignItems","justifyContent","position","width","height","StyledAvatar","MuiAvatar","size","fontSize","StyledBadge"],"mappings":"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"}
+{"version":3,"file":"Avatar.styles.js","sources":["../../../../src/components/Avatar/Avatar.styles.tsx"],"sourcesContent":["import { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst EXTRA_SMALL = { container: \"32px\", avatar: \"24px\" };\nconst SMALL = { container: \"40px\", avatar: \"32px\" };\nconst MEDIUM = { container: \"48px\", avatar: \"40px\" };\nconst LARGE = { container: \"60px\", avatar: \"52px\" };\nconst EXTRA_LARGE = { container: \"96px\", avatar: \"88px\" };\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatar\", {\n  root: {\n    fontSize: \"1rem\",\n  },\n  container: {\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      borderRadius: 0,\n    },\n  },\n  img: {\n    width: \"100%\",\n    height: \"100%\",\n    textAlign: \"center\",\n    // Handle non-square image. The property isn't supported by IE 11.\n    objectFit: \"cover\",\n    // Hide alt text.\n    color: \"transparent\",\n    // Hide the image broken icon, only works on Chrome.\n    textIndent: 10000,\n  },\n  fallback: {},\n  status: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n\n    \"&$xs\": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },\n    \"&$sm\": { width: SMALL.container, height: SMALL.container },\n    \"&$md\": { width: MEDIUM.container, height: MEDIUM.container },\n    \"&$lg\": { width: LARGE.container, height: LARGE.container },\n    \"&$xl\": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container },\n  },\n  avatar: {\n    \"&$xs\": {\n      width: EXTRA_SMALL.avatar,\n      height: EXTRA_SMALL.avatar,\n      fontSize: \"0.5rem\",\n    },\n    \"&$sm\": { width: SMALL.avatar, height: SMALL.avatar, fontSize: \"0.625rem\" },\n    \"&$md\": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: \"1rem\" },\n    \"&$lg\": { width: LARGE.avatar, height: LARGE.avatar, fontSize: \"1.5rem\" },\n    \"&$xl\": {\n      width: EXTRA_LARGE.avatar,\n      height: EXTRA_LARGE.avatar,\n      fontSize: \"2rem\",\n    },\n  },\n  badge: {\n    width: 8,\n    height: 8,\n    position: \"absolute\",\n    top: 0,\n    right: 0,\n    borderRadius: \"50%\",\n    zIndex: 1,\n  },\n  xs: {},\n  sm: {},\n  md: {},\n  lg: {},\n  xl: {},\n  circular: { borderRadius: \"50%\" },\n  square: {},\n});\n"],"names":["EXTRA_SMALL","container","avatar","SMALL","MEDIUM","LARGE","EXTRA_LARGE","staticClasses","useClasses","createClasses","root","fontSize","outlineStyles","borderRadius","img","width","height","textAlign","objectFit","color","textIndent","fallback","status","display","alignItems","justifyContent","position","badge","top","right","zIndex","xs","sm","md","lg","xl","circular","square"],"mappings":";;AAGA,MAAMA,cAAc;AAAA,EAAEC,WAAW;AAAA,EAAQC,QAAQ;AAAO;AACxD,MAAMC,QAAQ;AAAA,EAAEF,WAAW;AAAA,EAAQC,QAAQ;AAAO;AAClD,MAAME,SAAS;AAAA,EAAEH,WAAW;AAAA,EAAQC,QAAQ;AAAO;AACnD,MAAMG,QAAQ;AAAA,EAAEJ,WAAW;AAAA,EAAQC,QAAQ;AAAO;AAClD,MAAMI,cAAc;AAAA,EAAEL,WAAW;AAAA,EAAQC,QAAQ;AAAO;AAE3C,MAAA;AAAA,EAAEK;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM;AAAA,IACJC,UAAU;AAAA,EACZ;AAAA,EACAV,WAAW;AAAA,IACT,mBAAmB;AAAA,MACjB,GAAGW;AAAAA,MACHC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,KAAK;AAAA,IACHC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,WAAW;AAAA;AAAA,IAEXC,WAAW;AAAA;AAAA,IAEXC,OAAO;AAAA;AAAA,IAEPC,YAAY;AAAA,EACd;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAChBC,UAAU;AAAA,IAEV,QAAQ;AAAA,MAAEX,OAAOf,YAAYC;AAAAA,MAAWe,QAAQhB,YAAYC;AAAAA,IAAU;AAAA,IACtE,QAAQ;AAAA,MAAEc,OAAOZ,MAAMF;AAAAA,MAAWe,QAAQb,MAAMF;AAAAA,IAAU;AAAA,IAC1D,QAAQ;AAAA,MAAEc,OAAOX,OAAOH;AAAAA,MAAWe,QAAQZ,OAAOH;AAAAA,IAAU;AAAA,IAC5D,QAAQ;AAAA,MAAEc,OAAOV,MAAMJ;AAAAA,MAAWe,QAAQX,MAAMJ;AAAAA,IAAU;AAAA,IAC1D,QAAQ;AAAA,MAAEc,OAAOT,YAAYL;AAAAA,MAAWe,QAAQV,YAAYL;AAAAA,IAAU;AAAA,EACxE;AAAA,EACAC,QAAQ;AAAA,IACN,QAAQ;AAAA,MACNa,OAAOf,YAAYE;AAAAA,MACnBc,QAAQhB,YAAYE;AAAAA,MACpBS,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MAAEI,OAAOZ,MAAMD;AAAAA,MAAQc,QAAQb,MAAMD;AAAAA,MAAQS,UAAU;AAAA,IAAW;AAAA,IAC1E,QAAQ;AAAA,MAAEI,OAAOX,OAAOF;AAAAA,MAAQc,QAAQZ,OAAOF;AAAAA,MAAQS,UAAU;AAAA,IAAO;AAAA,IACxE,QAAQ;AAAA,MAAEI,OAAOV,MAAMH;AAAAA,MAAQc,QAAQX,MAAMH;AAAAA,MAAQS,UAAU;AAAA,IAAS;AAAA,IACxE,QAAQ;AAAA,MACNI,OAAOT,YAAYJ;AAAAA,MACnBc,QAAQV,YAAYJ;AAAAA,MACpBS,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAgB,OAAO;AAAA,IACLZ,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRU,UAAU;AAAA,IACVE,KAAK;AAAA,IACLC,OAAO;AAAA,IACPhB,cAAc;AAAA,IACdiB,QAAQ;AAAA,EACV;AAAA,EACAC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,IAAI,CAAC;AAAA,EACLC,UAAU;AAAA,IAAEvB,cAAc;AAAA,EAAM;AAAA,EAChCwB,QAAQ,CAAC;AACX,CAAC;"}

package/dist/esm/components/Badge/Badge.js

@@ -1,11 +1,10 @@
-import { clsx } from "clsx";
-import { StyledRoot, StyledContainer, StyledBadge } from "./Badge.styles.js";
-import badgeClasses from "./badgeClasses.js";
+import { useClasses } from "./Badge.styles.js";
+import { staticClasses } from "./Badge.styles.js";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvTypography } from "../Typography/Typography.js";
 const HvBadge = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     showCount = false,
     count = 0,
@@ -16,32 +15,37 @@ const HvBadge = (props) => {
     textVariant = void 0,
     ...others
   } = props;
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const renderedCount = count > maxCount ? `${maxCount}+` : count;
   const renderedCountOrLabel = label || showCount && count > 0 && renderedCount || null;
   const Component = icon || text && /* @__PURE__ */ jsx(HvTypography, {
     variant: textVariant,
     children: text
   });
-  return /* @__PURE__ */ jsxs(StyledRoot, {
+  return /* @__PURE__ */ jsxs("div", {
     "aria-label": renderedCountOrLabel == null ? void 0 : renderedCountOrLabel.toString(),
-    className: clsx(className, badgeClasses.root, classes == null ? void 0 : classes.root),
+    className: cx(classes.root, className),
     ...others,
-    children: [Component, /* @__PURE__ */ jsx(StyledContainer, {
-      $component: !!Component,
-      className: Component ? clsx(badgeClasses.badgeContainer, classes == null ? void 0 : classes.badgeContainer) : "",
-      children: /* @__PURE__ */ jsx(StyledBadge, {
-        className: clsx(badgeClasses.badgePosition, classes == null ? void 0 : classes.badgePosition, !!(count > 0 || renderedCountOrLabel) && clsx(badgeClasses.badge, classes == null ? void 0 : classes.badge), !!(!label && renderedCountOrLabel) && clsx(badgeClasses.showCount, classes == null ? void 0 : classes.showCount), !!label && clsx(badgeClasses.showLabel, classes == null ? void 0 : classes.showLabel), !!icon && clsx(badgeClasses.badgeIcon, classes == null ? void 0 : classes.badgeIcon), String(renderedCountOrLabel).length === 1 && clsx(badgeClasses.badgeOneDigit, classes == null ? void 0 : classes.badgeOneDigit)),
-        $badge: !!(count > 0 || renderedCountOrLabel),
-        $showCount: !!(!label && renderedCountOrLabel),
-        $showLabel: !!label,
-        $badgeIcon: !!icon,
-        $badgeOneDigit: String(renderedCountOrLabel).length === 1,
+    children: [Component, /* @__PURE__ */ jsx("div", {
+      className: Component ? classes.badgeContainer : void 0,
+      children: /* @__PURE__ */ jsx("div", {
+        className: cx(classes.badgePosition, {
+          [classes.badge]: !!(count > 0 || renderedCountOrLabel),
+          [classes.showCount]: !!(!label && renderedCountOrLabel),
+          [classes.showLabel]: !!label,
+          [classes.badgeIcon]: !!icon,
+          [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1
+        }),
         children: renderedCountOrLabel
       })
     })]
   });
 };
 export {
-  HvBadge
+  HvBadge,
+  staticClasses as badgeClasses
 };
 //# sourceMappingURL=Badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\n\nimport {\n  HvTypography,\n  HvTypographyVariants,\n} from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledBadge, StyledContainer, StyledRoot } from \"./Badge.styles\";\nimport badgeClasses, { HvBadgeClasses } from \"./badgeClasses\";\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   */\n  count?: number;\n  /**\n   * True if count should be displayed.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Custom text to show in place of count.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  label?: string;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = (props: HvBadgeProps) => {\n  const {\n    classes,\n    className,\n    showCount = false,\n    count = 0,\n    maxCount = 99,\n    label = null,\n    icon = null,\n    text = null,\n    textVariant = undefined,\n    ...others\n  } = props;\n\n  const renderedCount = count > maxCount ? `${maxCount}+` : count;\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label || (showCount && count > 0 && renderedCount) || null;\n  const Component =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <StyledRoot\n      aria-label={renderedCountOrLabel?.toString()}\n      className={clsx(className, badgeClasses.root, classes?.root)}\n      {...others}\n    >\n      {Component}\n      <StyledContainer\n        $component={!!Component}\n        className={\n          Component\n            ? clsx(badgeClasses.badgeContainer, classes?.badgeContainer)\n            : \"\"\n        }\n      >\n        <StyledBadge\n          className={clsx(\n            badgeClasses.badgePosition,\n            classes?.badgePosition,\n            !!(count > 0 || renderedCountOrLabel) &&\n              clsx(badgeClasses.badge, classes?.badge),\n            !!(!label && renderedCountOrLabel) &&\n              clsx(badgeClasses.showCount, classes?.showCount),\n            !!label && clsx(badgeClasses.showLabel, classes?.showLabel),\n            !!icon && clsx(badgeClasses.badgeIcon, classes?.badgeIcon),\n            String(renderedCountOrLabel).length === 1 &&\n              clsx(badgeClasses.badgeOneDigit, classes?.badgeOneDigit)\n          )}\n          $badge={!!(count > 0 || renderedCountOrLabel)}\n          $showCount={!!(!label && renderedCountOrLabel)}\n          $showLabel={!!label}\n          $badgeIcon={!!icon}\n          $badgeOneDigit={String(renderedCountOrLabel).length === 1}\n        >\n          {renderedCountOrLabel}\n        </StyledBadge>\n      </StyledContainer>\n    </StyledRoot>\n  );\n};\n"],"names":["HvBadge","props","classes","className","showCount","count","maxCount","label","icon","text","textVariant","undefined","others","renderedCount","renderedCountOrLabel","Component","_jsx","HvTypography","variant","children","StyledRoot","toString","clsx","badgeClasses","root","StyledContainer","$component","badgeContainer","StyledBadge","badgePosition","badge","showLabel","badgeIcon","String","length","badgeOneDigit","$badge","$showCount","$showLabel","$badgeIcon","$badgeOneDigit"],"mappings":";;;;;AA6CaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,OAAO;AAAA,IACPC,cAAcC;AAAAA,IACd,GAAGC;AAAAA,EACDX,IAAAA;AAEJ,QAAMY,gBAAgBR,QAAQC,WAAY,GAAEA,cAAcD;AAK1D,QAAMS,uBACJP,SAAUH,aAAaC,QAAQ,KAAKQ,iBAAkB;AACxD,QAAME,YACJP,QAASC,QAAQO,oBAACC,cAAY;AAAA,IAACC,SAASR;AAAAA,IAAYS,UAAEV;AAAAA,EAAAA,CAAmB;AAE3E,8BACGW,YAAU;AAAA,IACT,cAAYN,6DAAsBO;AAAAA,IAClClB,WAAWmB,KAAKnB,WAAWoB,aAAaC,MAAMtB,mCAASsB,IAAI;AAAA,IAAE,GACzDZ;AAAAA,IAAMO,UAETJ,CAAAA,WACDC,oBAACS,iBAAe;AAAA,MACdC,YAAY,CAAC,CAACX;AAAAA,MACdZ,WACEY,YACIO,KAAKC,aAAaI,gBAAgBzB,mCAASyB,cAAc,IACzD;AAAA,MACLR,8BAEAS,aAAW;AAAA,QACVzB,WAAWmB,KACTC,aAAaM,eACb3B,mCAAS2B,eACT,CAAC,EAAExB,QAAQ,KAAKS,yBACdQ,KAAKC,aAAaO,OAAO5B,mCAAS4B,KAAK,GACzC,CAAC,EAAE,CAACvB,SAASO,yBACXQ,KAAKC,aAAanB,WAAWF,mCAASE,SAAS,GACjD,CAAC,CAACG,SAASe,KAAKC,aAAaQ,WAAW7B,mCAAS6B,SAAS,GAC1D,CAAC,CAACvB,QAAQc,KAAKC,aAAaS,WAAW9B,mCAAS8B,SAAS,GACzDC,OAAOnB,oBAAoB,EAAEoB,WAAW,KACtCZ,KAAKC,aAAaY,eAAejC,mCAASiC,aAAa,CAC3D;AAAA,QACAC,QAAQ,CAAC,EAAE/B,QAAQ,KAAKS;AAAAA,QACxBuB,YAAY,CAAC,EAAE,CAAC9B,SAASO;AAAAA,QACzBwB,YAAY,CAAC,CAAC/B;AAAAA,QACdgC,YAAY,CAAC,CAAC/B;AAAAA,QACdgC,gBAAgBP,OAAOnB,oBAAoB,EAAEoB,WAAW;AAAA,QAAEf,UAEzDL;AAAAA,MAAAA,CACU;AAAA,IAAA,CACE,CAAC;AAAA,EAAA,CACR;AAEhB;"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  HvTypography,\n  HvTypographyVariants,\n} from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   */\n  count?: number;\n  /**\n   * True if count should be displayed.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Custom text to show in place of count.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  label?: string;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = (props: HvBadgeProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count = 0,\n    maxCount = 99,\n    label = null,\n    icon = null,\n    text = null,\n    textVariant = undefined,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderedCount = count > maxCount ? `${maxCount}+` : count;\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label || (showCount && count > 0 && renderedCount) || null;\n  const Component =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div\n      aria-label={renderedCountOrLabel?.toString()}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {Component}\n      <div className={Component ? classes.badgeContainer : undefined}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvBadge","props","classes","classesProp","className","showCount","count","maxCount","label","icon","text","textVariant","undefined","others","cx","useClasses","renderedCount","renderedCountOrLabel","Component","_jsx","HvTypography","variant","children","toString","root","badgeContainer","badgePosition","badge","showLabel","badgeIcon","badgeOneDigit","String","length"],"mappings":";;;;AA+CaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,OAAO;AAAA,IACPC,cAAcC;AAAAA,IACd,GAAGC;AAAAA,EACDZ,IAAAA;AAEE,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,WAAWZ,WAAW;AAE9C,QAAMa,gBAAgBV,QAAQC,WAAY,GAAEA,cAAcD;AAK1D,QAAMW,uBACJT,SAAUH,aAAaC,QAAQ,KAAKU,iBAAkB;AACxD,QAAME,YACJT,QAASC,QAAQS,oBAACC,cAAY;AAAA,IAACC,SAASV;AAAAA,IAAYW,UAAEZ;AAAAA,EAAAA,CAAmB;AAE3E,8BACE,OAAA;AAAA,IACE,cAAYO,6DAAsBM;AAAAA,IAClCnB,WAAWU,GAAGZ,QAAQsB,MAAMpB,SAAS;AAAA,IAAE,GACnCS;AAAAA,IAAMS,UAAA,CAETJ,WACDC,oBAAA,OAAA;AAAA,MAAKf,WAAWc,YAAYhB,QAAQuB,iBAAiBb;AAAAA,MAAUU,8BAC7D,OAAA;AAAA,QACElB,WAAWU,GAAGZ,QAAQwB,eAAe;AAAA,UACnC,CAACxB,QAAQyB,KAAK,GAAG,CAAC,EAAErB,QAAQ,KAAKW;AAAAA,UACjC,CAACf,QAAQG,SAAS,GAAG,CAAC,EAAE,CAACG,SAASS;AAAAA,UAClC,CAACf,QAAQ0B,SAAS,GAAG,CAAC,CAACpB;AAAAA,UACvB,CAACN,QAAQ2B,SAAS,GAAG,CAAC,CAACpB;AAAAA,UACvB,CAACP,QAAQ4B,aAAa,GAAGC,OAAOd,oBAAoB,EAAEe,WAAW;AAAA,QAAA,CAClE;AAAA,QAAEV,UAEFL;AAAAA,MAAAA,CACE;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACH;AAET;"}