@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

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

@@ -1 +1 @@
-{"version":3,"file":"Action.styles.js","sources":["../../../../src/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\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      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      whiteSpace: \"normal\",\n      textAlign: \"left\",\n      margin: `0 ${theme.space.xs}`,\n      textWrap: \"balance\",\n      ...theme.typography.label,\n      color: \"inherit\",\n    },\n    titleAnchor: {\n      WebkitLineClamp: 2,\n    },\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA,MAAM,EAAE,SAAS,QAAQ,UAAU,IAAI,gBAAgB,SAAS;AAAA,IAChE,SAAS,EAAE,OAAO,GAAG;AAAA,IACrB,UAAU,EAAE,UAAU,GAAG;AAAA,IACzB,UAAU,CAAC;AAAA,IACX,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,SAAS,OAAO,MAAM,MAAM,EAAE;AAAA,MAE9B,QAAQ;AAAA,MACR,YAAY,aAAa,MAAM,OAAO,SAAS;AAAA,MAE/C,QAAQ;AAAA,MAER,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MAEjB,eAAe;AAAA,QACb,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAK,MAAM,MAAM,EAAE;AAAA,MAC3B,UAAU;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ;"}
+{"version":3,"file":"Action.styles.js","sources":["../../../../src/AppSwitcher/Action/Action.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvAppSwitcher-Action\",\n  {\n    root: {\n      width: \"100%\",\n      maxWidth: 280,\n      minHeight: 52,\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: `2px solid currentcolor`,\n\n      cursor: \"pointer\",\n\n      textDecoration: \"inherit\",\n      backgroundColor: \"inherit\",\n\n      \"$disabled &\": {\n        cursor: \"not-allowed\",\n      },\n    },\n    title: {\n      flexGrow: 1,\n      whiteSpace: \"normal\",\n      textAlign: \"left\",\n      margin: `0 ${theme.space.xs}`,\n      textWrap: \"balance\",\n      ...theme.typography.label,\n      color: \"inherit\",\n    },\n    titleAnchor: {\n      WebkitLineClamp: 2,\n    },\n  },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA,MAAM,EAAE,SAAS,QAAQ,UAAU,IAAI,gBAAgB,SAAS;AAAA,IAChE,SAAS,EAAE,OAAO,GAAG;AAAA,IACrB,UAAU,EAAE,UAAU,GAAG;AAAA,IACzB,UAAU,CAAC;AAAA,IACX,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACV,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MAEZ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,SAAS,OAAO,MAAM,MAAM,EAAE;AAAA,MAE9B,QAAQ;AAAA,MACR,YAAY;AAAA,MAEZ,QAAQ;AAAA,MAER,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MAEjB,eAAe;AAAA,QACb,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA,IACA,OAAO;AAAA,MACL,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAK,MAAM,MAAM,EAAE;AAAA,MAC3B,UAAU;AAAA,MACV,GAAG,MAAM,WAAW;AAAA,MACpB,OAAO;AAAA,IACT;AAAA,IACA,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ;"}

package/dist/esm/Avatar/Avatar.js

@@ -3,12 +3,18 @@ import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
 import { User } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { getColor } from "@hitachivantara/uikit-styles";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
-import { decreaseSize } from "../utils/sizes.js";
 import { useClasses } from "./Avatar.styles.js";
 import { staticClasses } from "./Avatar.styles.js";
+const decreaseSizeMap = {
+  xl: "lg",
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xs: "xs"
+};
 const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
   const {
     className,
@@ -17,8 +23,8 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     children: childrenProp,
     component = "div",
     size: sizeProp,
-    backgroundColor = "secondary",
-    color = "atmo1",
+    backgroundColor = "text",
+    color = "bgContainer",
     src,
     srcSet,
     sizes,
@@ -58,7 +64,7 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
       User,
       {
         color,
-        iconSize: decreaseSize(size),
+        size: decreaseSizeMap[size],
         className: classes.fallback
       }
     );
@@ -70,29 +76,27 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     inlineStyle.borderRadius = "50%";
   }
   if (!hasImgNotFailing) {
-    inlineStyle.backgroundColor = getColor(
-      backgroundColor,
-      theme.colors.secondary
-    );
-    inlineStyle.color = getColor(color, theme.colors.atmo1);
+    inlineStyle.backgroundColor = getColor(backgroundColor, "text");
+    inlineStyle.color = getColor(color, "textDimmed");
   }
   const statusInlineStyle = {};
   if (status) {
-    const statusColor = getColor(status, theme.colors.positive);
+    const statusColor = getColor(status, "positive");
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
-  const badgeColor = getColor(badge || "", theme.colors.positive);
-  return /* @__PURE__ */ jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(classes.status, classes[variant], classes[size]),
+      ref,
+      className: cx(classes.container, classes.status, classes[variant]),
       style: statusInlineStyle,
+      ...others,
       children: [
         badge && /* @__PURE__ */ jsx(
           "div",
           {
             className: classes.badge,
-            style: { backgroundColor: badgeColor }
+            style: { backgroundColor: getColor(badge, "positive") }
           }
         ),
         /* @__PURE__ */ jsx(
@@ -109,7 +113,7 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
         )
       ]
     }
-  ) });
+  );
 });
 export {
   HvAvatar,

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

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

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

@@ -1,20 +1,10 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
+import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
-const EXTRA_SMALL = { container: "32px", avatar: "24px" };
-const SMALL = { container: "40px", avatar: "32px" };
-const MEDIUM = { container: "48px", avatar: "40px" };
-const LARGE = { container: "60px", avatar: "52px" };
-const EXTRA_LARGE = { container: "96px", avatar: "88px" };
 const { staticClasses, useClasses } = createClasses("HvAvatar", {
   root: {
     fontSize: "1rem"
   },
-  container: {
-    "&:focus-visible": {
-      ...outlineStyles,
-      borderRadius: 0
-    }
-  },
   img: {
     width: "100%",
     height: "100%",
@@ -27,47 +17,34 @@ const { staticClasses, useClasses } = createClasses("HvAvatar", {
     textIndent: 1e4
   },
   fallback: {},
-  status: {
+  /** @deprecated use `classes.container` instead */
+  status: {},
+  container: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
     position: "relative",
-    "&$xs": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },
-    "&$sm": { width: SMALL.container, height: SMALL.container },
-    "&$md": { width: MEDIUM.container, height: MEDIUM.container },
-    "&$lg": { width: LARGE.container, height: LARGE.container },
-    "&$xl": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container }
-  },
-  avatar: {
-    "&$xs": {
-      width: EXTRA_SMALL.avatar,
-      height: EXTRA_SMALL.avatar,
-      fontSize: "0.5rem"
-    },
-    "&$sm": { width: SMALL.avatar, height: SMALL.avatar, fontSize: "0.625rem" },
-    "&$md": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: "1rem" },
-    "&$lg": { width: LARGE.avatar, height: LARGE.avatar, fontSize: "1.5rem" },
-    "&$xl": {
-      width: EXTRA_LARGE.avatar,
-      height: EXTRA_LARGE.avatar,
-      fontSize: "2rem"
+    padding: theme.space.xxs,
+    ":focus-visible": {
+      ...outlineStyles,
+      borderRadius: 0
     }
   },
+  xs: { width: 24, height: 24, fontSize: "0.5rem" },
+  sm: { width: 32, height: 32, fontSize: "0.625rem" },
+  md: { width: 40, height: 40, fontSize: "1rem" },
+  lg: { width: 52, height: 52, fontSize: "1.5rem" },
+  xl: { width: 88, height: 88, fontSize: "2rem" },
+  avatar: {},
   badge: {
     width: 8,
     height: 8,
     position: "absolute",
     top: 0,
     right: 0,
-    borderRadius: "50%",
+    borderRadius: theme.radii.full,
     zIndex: 1
   },
-  xs: {},
-  sm: {},
-  md: {},
-  lg: {},
-  xl: {},
-  circular: { borderRadius: "50%" },
+  circular: { borderRadius: theme.radii.full },
   square: {}
 });
 export {

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

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

package/dist/esm/AvatarGroup/AvatarGroup.js

@@ -60,7 +60,7 @@ const Overflow = ({
         HvAvatar,
         {
           size,
-          backgroundColor: theme.colors.atmo4,
+          backgroundColor: theme.colors.border,
           classes: {
             avatar: css({
               [`&.HvAvatar-${size}`]: {

package/dist/esm/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useCss,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\nimport { HvAvatarGroupProvider } from \"./AvatarGroupContext\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarGroupClasses;\n  /** The avatar size. */\n  size?: HvSize;\n  /** The spacing between avatars. */\n  spacing?: \"compact\" | \"loose\";\n  /** The direction of the group. */\n  direction?: \"row\" | \"column\";\n  /** Whether the avatars display behind the previous avatar or on top. */\n  toBack?: boolean;\n  /**\n   * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n   * be added to the end of the list, indicating the number of hidden avatars.\n   */\n  maxVisible?: number;\n  /**\n   * What to show as an overflow representation.\n   * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n   * */\n  overflowComponent?: (overflowCount: number) => React.ReactNode;\n  /**\n   * If `true` the avatars will be brought to the front when hovered.\n   */\n  highlight?: boolean;\n}\n\nconst getSpacingValue = (\n  spacing: HvAvatarGroupProps[\"spacing\"],\n  size: HvAvatarGroupProps[\"size\"],\n) => {\n  switch (size) {\n    case \"xs\":\n      return spacing === \"compact\" ? 24 : 16;\n    case \"sm\":\n      return spacing === \"compact\" ? 30 : 18;\n    case \"md\":\n      return spacing === \"compact\" ? 36 : 20;\n    case \"lg\":\n      return spacing === \"compact\" ? 44 : 24;\n    case \"xl\":\n      return spacing === \"compact\" ? 72 : 34;\n    default:\n      return spacing === \"compact\" ? 30 : 18;\n  }\n};\n\nconst getFontSize = (size: HvAvatarGroupProps[\"size\"]) => {\n  switch (size) {\n    case \"xs\":\n      return \"1em\";\n    case \"sm\":\n      return \"1.25em\";\n    case \"md\":\n      return \"1.5em\";\n    case \"lg\":\n      return \"1.75em\";\n    case \"xl\":\n      return \"3em\";\n    default:\n      return \"1em\";\n  }\n};\n\ninterface OverflowProps {\n  direction: HvAvatarGroupProps[\"direction\"];\n  childrenToShow: React.ReactNode[];\n  spacingValue: number;\n  overflowComponent?: (n: number) => React.ReactNode;\n  totalChildren: number;\n  maxVisible: number;\n  size: HvAvatarGroupProps[\"size\"];\n}\n\nconst Overflow = ({\n  direction,\n  childrenToShow,\n  spacingValue,\n  overflowComponent,\n  totalChildren,\n  maxVisible,\n  size,\n}: OverflowProps) => {\n  const { css } = useCss();\n\n  return (\n    <div\n      style={{\n        marginLeft:\n          direction === \"row\" && childrenToShow.length > 0 ? -spacingValue : 0,\n        marginTop:\n          direction === \"column\" && childrenToShow.length > 0\n            ? -spacingValue\n            : 0,\n        zIndex: 0,\n      }}\n    >\n      {overflowComponent ? (\n        overflowComponent(totalChildren - maxVisible)\n      ) : (\n        <HvAvatar\n          size={size}\n          backgroundColor={theme.colors.atmo4}\n          classes={{\n            avatar: css({\n              [`&.HvAvatar-${size}`]: {\n                fontSize: getFontSize(size),\n              },\n            }),\n          }}\n        >\n          +{totalChildren - maxVisible}\n        </HvAvatar>\n      )}\n    </div>\n  );\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n  function HvAvatarGroup(props, ref) {\n    const {\n      className,\n      style,\n      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      maxVisible = 3,\n      overflowComponent,\n      highlight = false,\n      toBack = false,\n      ...others\n    } = useDefaultProps(\"HvAvatarGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const spacingValue = getSpacingValue(spacing, size);\n\n    const totalChildren = Children.count(children);\n    const willOverflow = totalChildren > maxVisible;\n\n    const childrenToShow = Children.toArray(children).slice(0, maxVisible);\n\n    // Since the `HvAvatar` components are displayed in reverse order using `row-reverse`, we need to reverse the array.\n    if (toBack) childrenToShow.reverse();\n\n    return (\n      <div\n        className={cx(\n          classes.root,\n          classes[direction],\n          {\n            [classes.highlight]: highlight,\n            [classes.toBack]: toBack,\n          },\n          className,\n        )}\n        style={mergeStyles(style, {\n          \"--spacing\": `-${spacingValue}px`,\n        })}\n        ref={ref}\n        {...others}\n      >\n        <HvAvatarGroupProvider size={size}>\n          {toBack && willOverflow && (\n            <Overflow\n              childrenToShow={childrenToShow}\n              direction={direction}\n              maxVisible={maxVisible}\n              overflowComponent={overflowComponent}\n              size={size}\n              spacingValue={spacingValue}\n              totalChildren={totalChildren}\n            />\n          )}\n          {childrenToShow}\n          {!toBack && willOverflow && (\n            <Overflow\n              childrenToShow={childrenToShow}\n              direction={direction}\n              maxVisible={maxVisible}\n              overflowComponent={overflowComponent}\n              size={size}\n              spacingValue={spacingValue}\n              totalChildren={totalChildren}\n            />\n          )}\n        </HvAvatarGroupProvider>\n      </div>\n    );\n  },\n);\n"],"names":["HvAvatarGroup"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, forwardRef } from \"react\";\nimport {\n  mergeStyles,\n  useCss,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\nimport { HvAvatarGroupProvider } from \"./AvatarGroupContext\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarGroupClasses;\n  /** The avatar size. */\n  size?: HvSize;\n  /** The spacing between avatars. */\n  spacing?: \"compact\" | \"loose\";\n  /** The direction of the group. */\n  direction?: \"row\" | \"column\";\n  /** Whether the avatars display behind the previous avatar or on top. */\n  toBack?: boolean;\n  /**\n   * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n   * be added to the end of the list, indicating the number of hidden avatars.\n   */\n  maxVisible?: number;\n  /**\n   * What to show as an overflow representation.\n   * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n   * */\n  overflowComponent?: (overflowCount: number) => React.ReactNode;\n  /**\n   * If `true` the avatars will be brought to the front when hovered.\n   */\n  highlight?: boolean;\n}\n\nconst getSpacingValue = (\n  spacing: HvAvatarGroupProps[\"spacing\"],\n  size: HvAvatarGroupProps[\"size\"],\n) => {\n  switch (size) {\n    case \"xs\":\n      return spacing === \"compact\" ? 24 : 16;\n    case \"sm\":\n      return spacing === \"compact\" ? 30 : 18;\n    case \"md\":\n      return spacing === \"compact\" ? 36 : 20;\n    case \"lg\":\n      return spacing === \"compact\" ? 44 : 24;\n    case \"xl\":\n      return spacing === \"compact\" ? 72 : 34;\n    default:\n      return spacing === \"compact\" ? 30 : 18;\n  }\n};\n\nconst getFontSize = (size: HvAvatarGroupProps[\"size\"]) => {\n  switch (size) {\n    case \"xs\":\n      return \"1em\";\n    case \"sm\":\n      return \"1.25em\";\n    case \"md\":\n      return \"1.5em\";\n    case \"lg\":\n      return \"1.75em\";\n    case \"xl\":\n      return \"3em\";\n    default:\n      return \"1em\";\n  }\n};\n\ninterface OverflowProps {\n  direction: HvAvatarGroupProps[\"direction\"];\n  childrenToShow: React.ReactNode[];\n  spacingValue: number;\n  overflowComponent?: (n: number) => React.ReactNode;\n  totalChildren: number;\n  maxVisible: number;\n  size: HvAvatarGroupProps[\"size\"];\n}\n\nconst Overflow = ({\n  direction,\n  childrenToShow,\n  spacingValue,\n  overflowComponent,\n  totalChildren,\n  maxVisible,\n  size,\n}: OverflowProps) => {\n  const { css } = useCss();\n\n  return (\n    <div\n      style={{\n        marginLeft:\n          direction === \"row\" && childrenToShow.length > 0 ? -spacingValue : 0,\n        marginTop:\n          direction === \"column\" && childrenToShow.length > 0\n            ? -spacingValue\n            : 0,\n        zIndex: 0,\n      }}\n    >\n      {overflowComponent ? (\n        overflowComponent(totalChildren - maxVisible)\n      ) : (\n        <HvAvatar\n          size={size}\n          backgroundColor={theme.colors.border}\n          classes={{\n            avatar: css({\n              [`&.HvAvatar-${size}`]: {\n                fontSize: getFontSize(size),\n              },\n            }),\n          }}\n        >\n          +{totalChildren - maxVisible}\n        </HvAvatar>\n      )}\n    </div>\n  );\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n  function HvAvatarGroup(props, ref) {\n    const {\n      className,\n      style,\n      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      maxVisible = 3,\n      overflowComponent,\n      highlight = false,\n      toBack = false,\n      ...others\n    } = useDefaultProps(\"HvAvatarGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const spacingValue = getSpacingValue(spacing, size);\n\n    const totalChildren = Children.count(children);\n    const willOverflow = totalChildren > maxVisible;\n\n    const childrenToShow = Children.toArray(children).slice(0, maxVisible);\n\n    // Since the `HvAvatar` components are displayed in reverse order using `row-reverse`, we need to reverse the array.\n    if (toBack) childrenToShow.reverse();\n\n    return (\n      <div\n        className={cx(\n          classes.root,\n          classes[direction],\n          {\n            [classes.highlight]: highlight,\n            [classes.toBack]: toBack,\n          },\n          className,\n        )}\n        style={mergeStyles(style, {\n          \"--spacing\": `-${spacingValue}px`,\n        })}\n        ref={ref}\n        {...others}\n      >\n        <HvAvatarGroupProvider size={size}>\n          {toBack && willOverflow && (\n            <Overflow\n              childrenToShow={childrenToShow}\n              direction={direction}\n              maxVisible={maxVisible}\n              overflowComponent={overflowComponent}\n              size={size}\n              spacingValue={spacingValue}\n              totalChildren={totalChildren}\n            />\n          )}\n          {childrenToShow}\n          {!toBack && willOverflow && (\n            <Overflow\n              childrenToShow={childrenToShow}\n              direction={direction}\n              maxVisible={maxVisible}\n              overflowComponent={overflowComponent}\n              size={size}\n              spacingValue={spacingValue}\n              totalChildren={totalChildren}\n            />\n          )}\n        </HvAvatarGroupProvider>\n      </div>\n    );\n  },\n);\n"],"names":["HvAvatarGroup"],"mappings":"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"}

package/dist/esm/AvatarGroup/AvatarGroup.styles.js

@@ -6,65 +6,58 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
   root: {
     display: "flex",
     [`& .${staticClasses$1.root}`]: {
-      border: `2px solid ${theme.colors.atmo2}`,
+      border: `2px solid ${theme.colors.bgPage}`,
       boxSizing: "content-box"
     },
-    "&$row": {
-      flexDirection: "row",
-      justifyContent: "flex-start",
+    [`& .${staticClasses$1.container}`]: {
+      padding: 2
+    }
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    [`& .${staticClasses$1.container}`]: {
+      "&:not(:first-of-type)": {
+        marginLeft: "var(--spacing)"
+      }
+    },
+    "&$toBack": {
+      flexDirection: "row-reverse",
+      justifyContent: "flex-end",
       [`& .${staticClasses$1.container}`]: {
-        "&:not(:first-of-type)": {
+        "&:last-of-type": {
+          marginLeft: 0
+        },
+        "&:not(:last-of-type)": {
           marginLeft: "var(--spacing)"
         }
-      },
-      "&$toBack": {
-        flexDirection: "row-reverse",
-        justifyContent: "flex-end",
-        [`& .${staticClasses$1.container}`]: {
-          "&:last-of-type": {
-            marginLeft: 0
-          },
-          "&:not(:last-of-type)": {
-            marginLeft: "var(--spacing)"
-          }
-        }
+      }
+    }
+  },
+  column: {
+    flexDirection: "column",
+    [`& .${staticClasses$1.container}`]: {
+      "&:not(:first-of-type)": {
+        marginTop: "var(--spacing)"
       }
     },
-    "&$column": {
-      flexDirection: "column",
+    "&$toBack": {
+      flexDirection: "column-reverse",
       [`& .${staticClasses$1.container}`]: {
-        "&:not(:first-of-type)": {
+        "&:last-of-type": {
+          marginTop: 0
+        },
+        "&:not(:last-of-type)": {
           marginTop: "var(--spacing)"
         }
-      },
-      "&$toBack": {
-        flexDirection: "column-reverse",
-        [`& .${staticClasses$1.container}`]: {
-          "&:last-of-type": {
-            marginTop: 0
-          },
-          "&:not(:last-of-type)": {
-            marginTop: "var(--spacing)"
-          }
-        }
-      }
-    },
-    [`&$highlight`]: {
-      [`& .${staticClasses$1.status}:hover`]: {
-        zIndex: theme.zIndices.popover
       }
     }
   },
-  row: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    "&$toBack": {
-      flexDirection: "row-reverse",
-      justifyContent: "flex-end"
+  highlight: {
+    [`& .${staticClasses$1.container}:hover`]: {
+      zIndex: theme.zIndices.popover
     }
   },
-  column: {},
-  highlight: {},
   toBack: {}
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.styles.js","sources":["../../../src/AvatarGroup/AvatarGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../Avatar/Avatar\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatarGroup\", {\n  root: {\n    display: \"flex\",\n    [`& .${avatarClasses.root}`]: {\n      border: `2px solid ${theme.colors.atmo2}`,\n      boxSizing: \"content-box\",\n    },\n    \"&$row\": {\n      flexDirection: \"row\",\n      justifyContent: \"flex-start\",\n\n      [`& .${avatarClasses.container}`]: {\n        \"&:not(:first-of-type)\": {\n          marginLeft: \"var(--spacing)\",\n        },\n      },\n      \"&$toBack\": {\n        flexDirection: \"row-reverse\",\n        justifyContent: \"flex-end\",\n        [`& .${avatarClasses.container}`]: {\n          \"&:last-of-type\": {\n            marginLeft: 0,\n          },\n          \"&:not(:last-of-type)\": {\n            marginLeft: \"var(--spacing)\",\n          },\n        },\n      },\n    },\n    \"&$column\": {\n      flexDirection: \"column\",\n      [`& .${avatarClasses.container}`]: {\n        \"&:not(:first-of-type)\": {\n          marginTop: \"var(--spacing)\",\n        },\n      },\n      \"&$toBack\": {\n        flexDirection: \"column-reverse\",\n        [`& .${avatarClasses.container}`]: {\n          \"&:last-of-type\": {\n            marginTop: 0,\n          },\n          \"&:not(:last-of-type)\": {\n            marginTop: \"var(--spacing)\",\n          },\n        },\n      },\n    },\n    [`&$highlight`]: {\n      [`& .${avatarClasses.status}:hover`]: {\n        zIndex: theme.zIndices.popover,\n      },\n    },\n  },\n  row: {\n    flexDirection: \"row\",\n    justifyContent: \"flex-start\",\n    \"&$toBack\": {\n      flexDirection: \"row-reverse\",\n      justifyContent: \"flex-end\",\n    },\n  },\n  column: {},\n  highlight: {},\n  toBack: {},\n});\n"],"names":["avatarClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,CAAC,MAAMA,gBAAc,IAAI,EAAE,GAAG;AAAA,MAC5B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,MACvC,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,QACjC,yBAAyB;AAAA,UACvB,YAAY;AAAA,QAAA;AAAA,MAEhB;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,UACjC,kBAAkB;AAAA,YAChB,YAAY;AAAA,UACd;AAAA,UACA,wBAAwB;AAAA,YACtB,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,IAEJ;AAAA,IACA,YAAY;AAAA,MACV,eAAe;AAAA,MACf,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,QACjC,yBAAyB;AAAA,UACvB,WAAW;AAAA,QAAA;AAAA,MAEf;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,QACf,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,UACjC,kBAAkB;AAAA,YAChB,WAAW;AAAA,UACb;AAAA,UACA,wBAAwB;AAAA,YACtB,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IAEJ;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,MACf,CAAC,MAAMA,gBAAc,MAAM,QAAQ,GAAG;AAAA,QACpC,QAAQ,MAAM,SAAS;AAAA,MAAA;AAAA,IACzB;AAAA,EAEJ;AAAA,EACA,KAAK;AAAA,IACH,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,MACV,eAAe;AAAA,MACf,gBAAgB;AAAA,IAAA;AAAA,EAEpB;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA,EACZ,QAAQ,CAAA;AACV,CAAC;"}
+{"version":3,"file":"AvatarGroup.styles.js","sources":["../../../src/AvatarGroup/AvatarGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../Avatar/Avatar\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatarGroup\", {\n  root: {\n    display: \"flex\",\n    [`& .${avatarClasses.root}`]: {\n      border: `2px solid ${theme.colors.bgPage}`,\n      boxSizing: \"content-box\",\n    },\n    [`& .${avatarClasses.container}`]: {\n      padding: 2,\n    },\n  },\n  row: {\n    flexDirection: \"row\",\n    justifyContent: \"flex-start\",\n    [`& .${avatarClasses.container}`]: {\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"var(--spacing)\",\n      },\n    },\n    \"&$toBack\": {\n      flexDirection: \"row-reverse\",\n      justifyContent: \"flex-end\",\n      [`& .${avatarClasses.container}`]: {\n        \"&:last-of-type\": {\n          marginLeft: 0,\n        },\n        \"&:not(:last-of-type)\": {\n          marginLeft: \"var(--spacing)\",\n        },\n      },\n    },\n  },\n  column: {\n    flexDirection: \"column\",\n    [`& .${avatarClasses.container}`]: {\n      \"&:not(:first-of-type)\": {\n        marginTop: \"var(--spacing)\",\n      },\n    },\n    \"&$toBack\": {\n      flexDirection: \"column-reverse\",\n      [`& .${avatarClasses.container}`]: {\n        \"&:last-of-type\": {\n          marginTop: 0,\n        },\n        \"&:not(:last-of-type)\": {\n          marginTop: \"var(--spacing)\",\n        },\n      },\n    },\n  },\n  highlight: {\n    [`& .${avatarClasses.container}:hover`]: {\n      zIndex: theme.zIndices.popover,\n    },\n  },\n  toBack: {},\n});\n"],"names":["avatarClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,CAAC,MAAMA,gBAAc,IAAI,EAAE,GAAG;AAAA,MAC5B,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,MACxC,WAAW;AAAA,IACb;AAAA,IACA,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,MACjC,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,KAAK;AAAA,IACH,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,MACjC,yBAAyB;AAAA,QACvB,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IACA,YAAY;AAAA,MACV,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,QACjC,kBAAkB;AAAA,UAChB,YAAY;AAAA,QACd;AAAA,QACA,wBAAwB;AAAA,UACtB,YAAY;AAAA,QAAA;AAAA,MACd;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,QAAQ;AAAA,IACN,eAAe;AAAA,IACf,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,MACjC,yBAAyB;AAAA,QACvB,WAAW;AAAA,MAAA;AAAA,IAEf;AAAA,IACA,YAAY;AAAA,MACV,eAAe;AAAA,MACf,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,QACjC,kBAAkB;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA,wBAAwB;AAAA,UACtB,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EAEJ;AAAA,EACA,WAAW;AAAA,IACT,CAAC,MAAMA,gBAAc,SAAS,QAAQ,GAAG;AAAA,MACvC,QAAQ,MAAM,SAAS;AAAA,IAAA;AAAA,EAE3B;AAAA,EACA,QAAQ,CAAA;AACV,CAAC;"}

package/dist/esm/Badge/Badge.js

@@ -26,10 +26,11 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
   const children = childrenProp || icon || text && /* @__PURE__ */ jsx(HvTypography, { variant: textVariant, children: text });
   return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     children,
-    /* @__PURE__ */ jsx("div", { className: cx({ [classes.badgeContainer]: children }), children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       "div",
       {
         className: cx(classes.badgePosition, {
+          [classes.badgeContainer]: children,
           [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),
           // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `badgePosition`)
           [classes.badge]: !!(count > 0 || renderedCountOrLabel),
@@ -40,7 +41,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
         }),
         children: renderedCountOrLabel
       }
-    ) })
+    )
   ] });
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\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   * @deprecated use numeric `label` instead\n   */\n  count?: number;\n  /**\n   * True if `count` should be displayed.\n   *\n   * NOTE: `showCount` is ignored when a **non-numeric** `label` is specified.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Badge content to show in.\n   *\n   * If value is numeric, then `showCount` and `maxCount` will show or limit the value respectively.\n   */\n  label?: React.ReactNode;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. @deprecated use `children` instead. */\n  text?: string;\n  /** Text variant. @deprecated use a `HvTypography` on `children` instead. */\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 = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvBadgeProps\n>(function HvBadge(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count: countProp = 0,\n    maxCount = 99,\n    label,\n    icon,\n    text,\n    textVariant,\n    children: childrenProp,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const count = typeof label === \"number\" ? label : countProp;\n  const countValue = count > maxCount ? `${maxCount}+` : count;\n  const renderedCount = showCount && count > 0 ? countValue : \"\";\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 && typeof label !== \"number\" ? label : renderedCount;\n  const children =\n    childrenProp ||\n    icon ||\n    (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n      <div className={cx({ [classes.badgeContainer]: children })}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),\n            // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `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"],"mappings":";;;;;;AAiDO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,OAAO,YAAY;AAAA,IACnB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,QAAQ,OAAO,UAAU,WAAW,QAAQ;AAClD,QAAM,aAAa,QAAQ,WAAW,GAAG,QAAQ,MAAM;AACvD,QAAM,gBAAgB,aAAa,QAAQ,IAAI,aAAa;AAK5D,QAAM,uBACJ,SAAS,OAAO,UAAU,WAAW,QAAQ;AACzC,QAAA,WACJ,gBACA,QACC,4BAAS,cAAa,EAAA,SAAS,aAAc,UAAK,KAAA,CAAA;AAGnD,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,cAAc,GAAG,UAAU,GACvD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,eAAe;AAAA,UACnC,CAAC,QAAQ,WAAW,GAAG,EAAE,QAAQ,KAAK;AAAA;AAAA,UAEtC,CAAC,QAAQ,KAAK,GAAG,CAAC,EAAE,QAAQ,KAAK;AAAA,UACjC,CAAC,QAAQ,SAAS,GAAG,CAAC,EAAE,CAAC,SAAS;AAAA,UAClC,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,aAAa,GAAG,OAAO,oBAAoB,EAAE,WAAW;AAAA,QAAA,CAClE;AAAA,QAEA,UAAA;AAAA,MAAA;AAAA,IAAA,EAEL,CAAA;AAAA,EAAA,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\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   * @deprecated use numeric `label` instead\n   */\n  count?: number;\n  /**\n   * True if `count` should be displayed.\n   *\n   * NOTE: `showCount` is ignored when a **non-numeric** `label` is specified.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Badge content to show in.\n   *\n   * If value is numeric, then `showCount` and `maxCount` will show or limit the value respectively.\n   */\n  label?: React.ReactNode;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. @deprecated use `children` instead. */\n  text?: string;\n  /** Text variant. @deprecated use a `HvTypography` on `children` instead. */\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 = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvBadgeProps\n>(function HvBadge(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count: countProp = 0,\n    maxCount = 99,\n    label,\n    icon,\n    text,\n    textVariant,\n    children: childrenProp,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const count = typeof label === \"number\" ? label : countProp;\n  const countValue = count > maxCount ? `${maxCount}+` : count;\n  const renderedCount = showCount && count > 0 ? countValue : \"\";\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 && typeof label !== \"number\" ? label : renderedCount;\n  const children =\n    childrenProp ||\n    icon ||\n    (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n      <div\n        className={cx(classes.badgePosition, {\n          [classes.badgeContainer]: children,\n          [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),\n          // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `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  );\n});\n"],"names":["HvBadge"],"mappings":";;;;;;AAiDO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,OAAO,YAAY;AAAA,IACnB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,QAAQ,OAAO,UAAU,WAAW,QAAQ;AAClD,QAAM,aAAa,QAAQ,WAAW,GAAG,QAAQ,MAAM;AACvD,QAAM,gBAAgB,aAAa,QAAQ,IAAI,aAAa;AAK5D,QAAM,uBACJ,SAAS,OAAO,UAAU,WAAW,QAAQ;AACzC,QAAA,WACJ,gBACA,QACC,4BAAS,cAAa,EAAA,SAAS,aAAc,UAAK,KAAA,CAAA;AAGnD,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,eAAe;AAAA,UACnC,CAAC,QAAQ,cAAc,GAAG;AAAA,UAC1B,CAAC,QAAQ,WAAW,GAAG,EAAE,QAAQ,KAAK;AAAA;AAAA,UAEtC,CAAC,QAAQ,KAAK,GAAG,CAAC,EAAE,QAAQ,KAAK;AAAA,UACjC,CAAC,QAAQ,SAAS,GAAG,CAAC,EAAE,CAAC,SAAS;AAAA,UAClC,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,aAAa,GAAG,OAAO,oBAAoB,EAAE,WAAW;AAAA,QAAA,CAClE;AAAA,QAEA,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/esm/Badge/Badge.styles.js

@@ -3,13 +3,16 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvBadge", {
   root: { position: "relative", "&>*": { float: "left" } },
   /** class applied to the badge container when it has content */
-  badgeContainer: { width: 0 },
+  badgeContainer: {},
   /** class applied to the badge */
   badgePosition: {
+    // TODO: change to relative so that badges don't overflow into the siblings
+    position: "absolute",
+    left: "100%",
     ...theme.typography.caption2,
-    color: theme.colors.atmo1,
+    color: theme.colors.textDimmed,
     borderRadius: theme.radii.full,
-    backgroundColor: theme.colors.secondary,
+    backgroundColor: theme.colors.text,
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",
@@ -30,7 +33,7 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
   },
   showCount: {},
   showLabel: {},
-  badgeIcon: { position: "relative", top: "1px", left: "-7px" },
+  badgeIcon: { top: "1px", left: "calc(100% - 7px)" },
   badgeOneDigit: { padding: 0, width: "16px" }
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.styles.js","sources":["../../../src/Badge/Badge.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBadge\", {\n  root: { position: \"relative\", \"&>*\": { float: \"left\" } },\n  /** class applied to the badge container when it has content */\n  badgeContainer: { width: 0 },\n  /** class applied to the badge */\n  badgePosition: {\n    ...theme.typography.caption2,\n    color: theme.colors.atmo1,\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.secondary,\n    lineHeight: \"16px\",\n    minWidth: 8,\n    padding: \"0 5px\",\n    float: \"left\",\n    wordBreak: \"keep-all\",\n    textAlign: \"center\",\n\n    \":empty\": {\n      height: 8,\n      width: 8,\n      padding: 0,\n    },\n  },\n  /** applied to the badge when it's visible */\n  badge: {},\n  /** applied to the badge when it's hidden */\n  badgeHidden: {\n    display: \"none\",\n  },\n  showCount: {},\n  showLabel: {},\n  badgeIcon: { position: \"relative\", top: \"1px\", left: \"-7px\" },\n  badgeOneDigit: { padding: 0, width: \"16px\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,UAAU,YAAY,OAAO,EAAE,OAAO,SAAS;AAAA;AAAA,EAEvD,gBAAgB,EAAE,OAAO,EAAE;AAAA;AAAA,EAE3B,eAAe;AAAA,IACb,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,IACpB,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IAEX,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA,EAEA,OAAO,CAAC;AAAA;AAAA,EAER,aAAa;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW,CAAC;AAAA,EACZ,WAAW,EAAE,UAAU,YAAY,KAAK,OAAO,MAAM,OAAO;AAAA,EAC5D,eAAe,EAAE,SAAS,GAAG,OAAO,OAAO;AAC7C,CAAC;"}
+{"version":3,"file":"Badge.styles.js","sources":["../../../src/Badge/Badge.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBadge\", {\n  root: { position: \"relative\", \"&>*\": { float: \"left\" } },\n  /** class applied to the badge container when it has content */\n  badgeContainer: {},\n  /** class applied to the badge */\n  badgePosition: {\n    // TODO: change to relative so that badges don't overflow into the siblings\n    position: \"absolute\",\n    left: \"100%\",\n    ...theme.typography.caption2,\n    color: theme.colors.textDimmed,\n    borderRadius: theme.radii.full,\n    backgroundColor: theme.colors.text,\n    lineHeight: \"16px\",\n    minWidth: 8,\n    padding: \"0 5px\",\n    float: \"left\",\n    wordBreak: \"keep-all\",\n    textAlign: \"center\",\n\n    \":empty\": {\n      height: 8,\n      width: 8,\n      padding: 0,\n    },\n  },\n  /** applied to the badge when it's visible */\n  badge: {},\n  /** applied to the badge when it's hidden */\n  badgeHidden: {\n    display: \"none\",\n  },\n  showCount: {},\n  showLabel: {},\n  badgeIcon: { top: \"1px\", left: \"calc(100% - 7px)\" },\n  badgeOneDigit: { padding: 0, width: \"16px\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,UAAU,YAAY,OAAO,EAAE,OAAO,SAAS;AAAA;AAAA,EAEvD,gBAAgB,CAAC;AAAA;AAAA,EAEjB,eAAe;AAAA;AAAA,IAEb,UAAU;AAAA,IACV,MAAM;AAAA,IACN,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,IACpB,cAAc,MAAM,MAAM;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IAEX,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA,EAEA,OAAO,CAAC;AAAA;AAAA,EAER,aAAa;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW,CAAC;AAAA,EACZ,WAAW,EAAE,KAAK,OAAO,MAAM,mBAAmB;AAAA,EAClD,eAAe,EAAE,SAAS,GAAG,OAAO,OAAO;AAC7C,CAAC;"}

package/dist/esm/Banner/Banner.js

@@ -12,6 +12,7 @@ const HvBanner = forwardRef(function HvBanner2(props, ref) {
     id,
     classes: classesProp,
     className,
+    title,
     open,
     onClose,
     anchorOrigin = "top",
@@ -68,6 +69,7 @@ const HvBanner = forwardRef(function HvBanner2(props, ref) {
         HvBannerContent,
         {
           id: setId(id, "content"),
+          title,
           variant,
           customIcon,
           showIcon,

package/dist/esm/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/Banner/Banner.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport Snackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Banner.styles\";\nimport {\n  HvBannerContent,\n  HvBannerContentProps,\n} from \"./BannerContent/BannerContent\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"./types\";\n\nexport { staticClasses as bannerClasses };\n\nexport type HvBannerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerProps\n  extends Omit<MuiSnackbarProps, \"anchorOrigin\" | \"classes\" | \"onClose\"> {\n  /** If true, the snackbar is open. */\n  open: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The message to display. */\n  label?: string;\n  /** The anchor of the Snackbar. */\n  anchorOrigin?: \"top\" | \"bottom\";\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** How much the transition animation last in milliseconds, if 0 no animation is played. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the banner should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Offset from top/bottom of the page, in px. Defaults to 60px. */\n  offset?: number;\n  /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */\n  bannerContentProps?: HvBannerContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.\n * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.\n */\nexport const HvBanner = forwardRef<\n  React.ComponentRef<typeof Snackbar>,\n  HvBannerProps\n>(function HvBanner(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    open,\n    onClose,\n    anchorOrigin = \"top\",\n    variant,\n    transitionDuration = 300,\n    transitionDirection = \"down\",\n    container,\n    showIcon,\n    customIcon,\n    actions,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    actionsPosition,\n    label,\n    offset = 60,\n    bannerContentProps,\n    ...others\n  } = useDefaultProps(\"HvBanner\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const anchorOriginBanner: SnackbarOrigin = {\n    horizontal: \"center\",\n    vertical: anchorOrigin,\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection],\n  );\n\n  return (\n    <Snackbar\n      ref={ref}\n      id={id}\n      open={open}\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.rootClosed]: !open }),\n        anchorOriginTopCenter: classes.anchorOriginTopCenter,\n        anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\n      }}\n      style={{ [anchorOrigin]: offset }}\n      anchorOrigin={anchorOriginBanner}\n      TransitionComponent={SlideTransition}\n      transitionDuration={transitionDuration}\n      {...others}\n    >\n      <HvBannerContent\n        id={setId(id, \"content\")}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        actions={actions}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        actionsPosition={actionsPosition}\n        onClose={onClose}\n        {...bannerContentProps}\n      >\n        {label}\n      </HvBannerContent>\n    </Snackbar>\n  );\n});\n"],"names":["HvBanner"],"mappings":";;;;;;;;;AA4EO,MAAM,WAAW,WAGtB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,qBAAqC;AAAA,IACzC,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAEA,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,CAAC,MAAM;AAAA,QACtD,uBAAuB,QAAQ;AAAA,QAC/B,0BAA0B,QAAQ;AAAA,MACpC;AAAA,MACA,OAAO,EAAE,CAAC,YAAY,GAAG,OAAO;AAAA,MAChC,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"Banner.js","sources":["../../../src/Banner/Banner.tsx"],"sourcesContent":["import { forwardRef, useCallback } from \"react\";\nimport Slide, { SlideProps } from \"@mui/material/Slide\";\nimport Snackbar, {\n  SnackbarProps as MuiSnackbarProps,\n  SnackbarOrigin,\n} from \"@mui/material/Snackbar\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Banner.styles\";\nimport {\n  HvBannerActionPosition,\n  HvBannerContent,\n  HvBannerContentProps,\n  HvBannerVariant,\n} from \"./BannerContent/BannerContent\";\n\nexport { staticClasses as bannerClasses };\n\nexport type HvBannerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerProps\n  extends Omit<MuiSnackbarProps, \"anchorOrigin\" | \"classes\" | \"onClose\"> {\n  /** If true, the snackbar is open. */\n  open: boolean;\n  /**\n   * Callback fired when the component requests to be closed.\n   * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.\n   * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.\n   * */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The message to display. */\n  label?: string;\n  /** The anchor of the Snackbar. */\n  anchorOrigin?: \"top\" | \"bottom\";\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** How much the transition animation last in milliseconds, if 0 no animation is played. */\n  transitionDuration?: number;\n  /** Direction of slide transition. */\n  transitionDirection?: \"up\" | \"down\" | \"left\" | \"right\";\n  /** The container the banner should slide from. */\n  container?: SlideProps[\"container\"];\n  /** Offset from top/bottom of the page, in px. Defaults to 60px. */\n  offset?: number;\n  /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */\n  bannerContentProps?: HvBannerContentProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerClasses;\n  /** @ignore */\n  ref?: MuiSnackbarProps[\"ref\"];\n}\n\n/**\n * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.\n * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.\n */\nexport const HvBanner = forwardRef<\n  React.ComponentRef<typeof Snackbar>,\n  HvBannerProps\n>(function HvBanner(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    title,\n    open,\n    onClose,\n    anchorOrigin = \"top\",\n    variant,\n    transitionDuration = 300,\n    transitionDirection = \"down\",\n    container,\n    showIcon,\n    customIcon,\n    actions,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    actionsPosition,\n    label,\n    offset = 60,\n    bannerContentProps,\n    ...others\n  } = useDefaultProps(\"HvBanner\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const anchorOriginBanner: SnackbarOrigin = {\n    horizontal: \"center\",\n    vertical: anchorOrigin,\n  };\n\n  const SlideTransition = useCallback<\n    NonNullable<MuiSnackbarProps[\"TransitionComponent\"]>\n  >(\n    (properties) => (\n      <Slide\n        {...properties}\n        container={container}\n        direction={transitionDirection}\n      />\n    ),\n    [container, transitionDirection],\n  );\n\n  return (\n    <Snackbar\n      ref={ref}\n      id={id}\n      open={open}\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.rootClosed]: !open }),\n        anchorOriginTopCenter: classes.anchorOriginTopCenter,\n        anchorOriginBottomCenter: classes.anchorOriginBottomCenter,\n      }}\n      style={{ [anchorOrigin]: offset }}\n      anchorOrigin={anchorOriginBanner}\n      TransitionComponent={SlideTransition}\n      transitionDuration={transitionDuration}\n      {...others}\n    >\n      <HvBannerContent\n        id={setId(id, \"content\")}\n        title={title}\n        variant={variant}\n        customIcon={customIcon}\n        showIcon={showIcon}\n        actions={actions}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        actionsPosition={actionsPosition}\n        onClose={onClose}\n        {...bannerContentProps}\n      >\n        {label}\n      </HvBannerContent>\n    </Snackbar>\n  );\n});\n"],"names":["HvBanner"],"mappings":";;;;;;;;;AA6EO,MAAM,WAAW,WAGtB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,qBAAqC;AAAA,IACzC,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAEA,QAAM,kBAAkB;AAAA,IAGtB,CAAC,eACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,CAAC,WAAW,mBAAmB;AAAA,EACjC;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,CAAC,MAAM;AAAA,QACtD,uBAAuB,QAAQ;AAAA,QAC/B,0BAA0B,QAAQ;AAAA,MACpC;AAAA,MACA,OAAO,EAAE,CAAC,YAAY,GAAG,OAAO;AAAA,MAChC,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,SAAS;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/Banner/BannerContent/BannerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.js","sources":["../../../../src/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { SnackbarContentProps as MuiSnackbarContentProps } from \"@mui/material/SnackbarContent\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGenericProps } from \"../../ActionsGeneric\";\nimport { HvButtonProps } from \"../../Button\";\nimport { HvCallout } from \"../../utils/Callout\";\nimport { HvBannerActionPosition, HvBannerVariant } from \"../types\";\nimport { staticClasses, useClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. @deprecated use `children` instead */\n  content?: string;\n  /** The message to display. */\n  children?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Function called when clicking on the close button. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: Partial<HvButtonProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvBannerContentProps\n>(function HvBannerContent(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    showIcon,\n    customIcon,\n    variant = \"default\",\n    onClose,\n    actions,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    actionsPosition = \"auto\",\n    content,\n    children,\n    actionProps,\n    ...others\n  } = useDefaultProps(\"HvBannerContent\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvCallout\n      ref={ref}\n      id={id}\n      variant={variant}\n      showClose\n      showIcon={showIcon}\n      customIcon={customIcon}\n      classes={{\n        root: cx(\n          classes.root,\n          classes.outContainer,\n          classes.baseVariant,\n          classes[variant],\n          className,\n        ),\n        message: classes.message,\n        action: classes.action,\n        messageIcon: classes.iconContainer,\n        messageContent: classes.messageContainer,\n        actionCustom: classes.messageActions,\n        actionContent: cx(\n          classes.actionContainer,\n          classes.actionsInnerContainer,\n        ),\n        actionClose: classes.closeAction,\n      }}\n      actions={actions}\n      actionsPosition={actionsPosition}\n      actionProps={actionProps}\n      onClose={(evt) => onClose?.(evt as React.MouseEvent<any>)}\n      onAction={(evt, action) => {\n        onAction?.(evt, action);\n        actionsCallback?.(evt, id!, action);\n      }}\n      {...others}\n    >\n      {children ?? content}\n    </HvCallout>\n  );\n});\n"],"names":["HvBannerContent"],"mappings":";;;;;;AAiDO,MAAM,kBAAkB,WAI7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,UACJ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf;AAAA,QACF;AAAA,QACA,SAAS,QAAQ;AAAA,QACjB,QAAQ,QAAQ;AAAA,QAChB,aAAa,QAAQ;AAAA,QACrB,gBAAgB,QAAQ;AAAA,QACxB,cAAc,QAAQ;AAAA,QACtB,eAAe;AAAA,UACb,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA,QACA,aAAa,QAAQ;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,CAAC,QAAQ,UAAU,GAA4B;AAAA,MACxD,UAAU,CAAC,KAAK,WAAW;AACzB,mBAAW,KAAK,MAAM;AACJ,0BAAA,KAAK,IAAK,MAAM;AAAA,MACpC;AAAA,MACC,GAAG;AAAA,MAEH,UAAY,YAAA;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;"}
+{"version":3,"file":"BannerContent.js","sources":["../../../../src/Banner/BannerContent/BannerContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { SnackbarContentProps as MuiSnackbarContentProps } from \"@mui/material/SnackbarContent\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionsGenericProps } from \"../../ActionsGeneric\";\nimport { HvButtonProps } from \"../../Button\";\nimport { HvCallout, HvCalloutVariant } from \"../../utils/Callout\";\nimport { staticClasses, useClasses } from \"./BannerContent.styles\";\n\nexport { staticClasses as bannerContentClasses };\n\nexport type HvBannerVariant = HvCalloutVariant;\n\nexport type HvBannerActionPosition = \"auto\" | \"inline\" | \"bottom-right\";\n\nexport type HvBannerContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBannerContentProps\n  extends Omit<MuiSnackbarContentProps, \"variant\" | \"classes\" | \"onClose\"> {\n  /** The message to display. @deprecated use `children` instead */\n  content?: string;\n  /** The message to display. */\n  children?: React.ReactNode;\n  /** Variant of the snackbar. */\n  variant?: HvBannerVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** Function called when clicking on the close button. */\n  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** Actions to display on the right side. */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The position property of the header. */\n  actionsPosition?: HvBannerActionPosition;\n  /** The props to pass down to the Action Container. */\n  actionProps?: Partial<HvButtonProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBannerContentClasses;\n}\n\nexport const HvBannerContent = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvBannerContentProps\n>(function HvBannerContent(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    showIcon,\n    customIcon,\n    variant = \"default\",\n    onClose,\n    actions,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    actionsPosition = \"auto\",\n    content,\n    children,\n    actionProps,\n    ...others\n  } = useDefaultProps(\"HvBannerContent\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvCallout\n      ref={ref}\n      id={id}\n      variant={variant}\n      showClose\n      showIcon={showIcon}\n      customIcon={customIcon}\n      classes={{\n        root: cx(\n          classes.root,\n          classes.outContainer,\n          classes.baseVariant,\n          classes[variant],\n          className,\n        ),\n        message: classes.message,\n        action: classes.action,\n        messageIcon: classes.iconContainer,\n        messageContent: classes.messageContainer,\n        actionCustom: classes.messageActions,\n        actionContent: cx(\n          classes.actionContainer,\n          classes.actionsInnerContainer,\n        ),\n        actionClose: classes.closeAction,\n      }}\n      actions={actions}\n      actionsPosition={actionsPosition}\n      actionProps={actionProps}\n      onClose={(evt) => onClose?.(evt as React.MouseEvent<any>)}\n      onAction={(evt, action) => {\n        onAction?.(evt, action);\n        actionsCallback?.(evt, id!, action);\n      }}\n      {...others}\n    >\n      {children ?? content}\n    </HvCallout>\n  );\n});\n"],"names":["HvBannerContent"],"mappings":";;;;;;AAoDO,MAAM,kBAAkB,WAI7B,SAASA,iBAAgB,OAAO,KAAK;AAC/B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,UACJ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ,OAAO;AAAA,UACf;AAAA,QACF;AAAA,QACA,SAAS,QAAQ;AAAA,QACjB,QAAQ,QAAQ;AAAA,QAChB,aAAa,QAAQ;AAAA,QACrB,gBAAgB,QAAQ;AAAA,QACxB,cAAc,QAAQ;AAAA,QACtB,eAAe;AAAA,UACb,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA,QACA,aAAa,QAAQ;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,CAAC,QAAQ,UAAU,GAA4B;AAAA,MACxD,UAAU,CAAC,KAAK,WAAW;AACzB,mBAAW,KAAK,MAAM;AACJ,0BAAA,KAAK,IAAK,MAAM;AAAA,MACpC;AAAA,MACC,GAAG;AAAA,MAEH,UAAY,YAAA;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;"}