@usefragments/ui 1.5.3 → 1.6.0

package/dist/components/Avatar/index.cjs

@@ -79,131 +79,113 @@ function getContrastTextColor(bgColor) {
     /light-dark\(\s*hsl\((\d+)\s+(\d+)%\s+(\d+)%\)\s*,\s*hsl\((\d+)\s+(\d+)%\s+(\d+)%\)\s*\)/
   );
   if (ld) {
-    const lightText = contrastForHsl(
-      parseInt(ld[1]),
-      parseInt(ld[2]) / 100,
-      parseInt(ld[3]) / 100
-    );
-    const darkText = contrastForHsl(
-      parseInt(ld[4]),
-      parseInt(ld[5]) / 100,
-      parseInt(ld[6]) / 100
-    );
+    const lightText = contrastForHsl(parseInt(ld[1]), parseInt(ld[2]) / 100, parseInt(ld[3]) / 100);
+    const darkText = contrastForHsl(parseInt(ld[4]), parseInt(ld[5]) / 100, parseInt(ld[6]) / 100);
     return lightText === darkText ? lightText : `light-dark(${lightText}, ${darkText})`;
   }
   const match = bgColor.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
   if (!match) return void 0;
-  return contrastForHsl(
-    parseInt(match[1]),
-    parseInt(match[2]) / 100,
-    parseInt(match[3]) / 100
-  );
+  return contrastForHsl(parseInt(match[1]), parseInt(match[2]) / 100, parseInt(match[3]) / 100);
 }
-const AvatarBase = React__namespace.forwardRef(
-  function AvatarBase2({
-    src,
-    alt = "",
-    initials,
-    name,
-    size = "md",
-    customSize,
-    shape = "circle",
-    color,
-    imageStyle,
-    imageProps,
-    className,
-    style: styleProp,
-    ...htmlProps
-  }, ref) {
-    const imgRef = React__namespace.useRef(null);
-    const [imageError, setImageError] = React__namespace.useState(false);
-    React__namespace.useEffect(() => {
-      setImageError(false);
-      const img = imgRef.current;
-      if (img && img.complete && img.naturalWidth === 0) {
-        setImageError(true);
-      }
-    }, [src]);
-    const showFallback = !src || imageError;
-    const displayInitials = initials || (name ? getInitials(name) : "");
-    const fallbackColor = color || (name ? stringToColor(name) : void 0);
-    const fallbackLabel = alt || name;
-    const hasFallbackLabel = showFallback && Boolean(fallbackLabel && fallbackLabel.trim().length > 0);
-    const avatarClasses = [
-      Avatar_module.default.avatar,
-      Avatar_module.default[size],
-      shape === "square" && Avatar_module.default.square,
-      className
-    ].filter(Boolean).join(" ");
-    const style = { ...styleProp };
-    if (customSize !== void 0) {
-      const resolvedSize = typeof customSize === "number" ? `${customSize}px` : customSize;
-      style.width = resolvedSize;
-      style.height = resolvedSize;
-      if (style.fontSize === void 0) {
-        style.fontSize = `calc(${resolvedSize} * 0.4)`;
-      }
-    }
-    if (showFallback && fallbackColor) {
-      style.backgroundColor = fallbackColor;
-      const textColor = getContrastTextColor(fallbackColor);
-      if (textColor) {
-        style["--avatar-initials-color"] = textColor;
-      }
-    }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        ...htmlProps,
-        className: avatarClasses,
-        style,
-        role: hasFallbackLabel ? "img" : void 0,
-        "aria-label": hasFallbackLabel ? fallbackLabel : void 0,
-        "aria-hidden": showFallback && !hasFallbackLabel ? true : void 0,
-        children: [
-          !showFallback && /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              ref: imgRef,
-              ...imageProps,
-              src,
-              alt,
-              className: Avatar_module.default.image,
-              onError: (event) => {
-                var _a;
-                (_a = imageProps == null ? void 0 : imageProps.onError) == null ? void 0 : _a.call(imageProps, event);
-                if (!event.defaultPrevented) {
-                  setImageError(true);
-                }
-              },
-              style: { ...imageStyle }
-            }
-          ),
-          showFallback && displayInitials && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Avatar_module.default.initials, children: displayInitials }),
-          showFallback && !displayInitials && /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              className: Avatar_module.default.fallbackIcon,
-              xmlns: "http://www.w3.org/2000/svg",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-function AvatarGroup({
-  max,
+const AvatarBase = React__namespace.forwardRef(function AvatarBase2({
+  src,
+  alt = "",
+  initials,
+  name,
+  fallback,
   size = "md",
-  children,
+  customSize,
+  shape = "circle",
+  color,
+  imageStyle,
+  imageProps,
   className,
+  style: styleProp,
   ...htmlProps
-}) {
+}, ref) {
+  const imgRef = React__namespace.useRef(null);
+  const [imageError, setImageError] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    setImageError(false);
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalWidth === 0) {
+      setImageError(true);
+    }
+  }, [src]);
+  const showFallback = !src || imageError;
+  const displayInitials = initials || (name ? getInitials(name) : "");
+  const fallbackColor = color || (name ? stringToColor(name) : void 0);
+  const fallbackLabel = alt || name;
+  const hasFallbackLabel = showFallback && Boolean(fallbackLabel && fallbackLabel.trim().length > 0);
+  const avatarClasses = [
+    Avatar_module.default.avatar,
+    Avatar_module.default[size],
+    shape === "square" && Avatar_module.default.square,
+    className
+  ].filter(Boolean).join(" ");
+  const style = { ...styleProp };
+  if (customSize !== void 0) {
+    const resolvedSize = typeof customSize === "number" ? `${customSize}px` : customSize;
+    style.width = resolvedSize;
+    style.height = resolvedSize;
+    if (style.fontSize === void 0) {
+      style.fontSize = `calc(${resolvedSize} * 0.4)`;
+    }
+  }
+  if (showFallback && fallbackColor) {
+    style.backgroundColor = fallbackColor;
+    const textColor = getContrastTextColor(fallbackColor);
+    if (textColor) {
+      style["--avatar-initials-color"] = textColor;
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      ...htmlProps,
+      className: avatarClasses,
+      style,
+      role: hasFallbackLabel ? "img" : void 0,
+      "aria-label": hasFallbackLabel ? fallbackLabel : void 0,
+      "aria-hidden": showFallback && !hasFallbackLabel ? true : void 0,
+      children: [
+        !showFallback && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            ref: imgRef,
+            ...imageProps,
+            src,
+            alt,
+            className: Avatar_module.default.image,
+            onError: (event) => {
+              var _a;
+              (_a = imageProps == null ? void 0 : imageProps.onError) == null ? void 0 : _a.call(imageProps, event);
+              if (!event.defaultPrevented) {
+                setImageError(true);
+              }
+            },
+            style: { ...imageStyle }
+          }
+        ),
+        showFallback && displayInitials && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Avatar_module.default.initials, children: displayInitials }),
+        showFallback && !displayInitials && fallback !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Avatar_module.default.fallback, children: fallback }),
+        showFallback && !displayInitials && fallback === void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: Avatar_module.default.fallbackIcon,
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+          }
+        )
+      ]
+    }
+  );
+});
+function AvatarGroup({ max, size = "md", children, className, ...htmlProps }) {
   const childArray = React__namespace.Children.toArray(children);
   const displayCount = max && max < childArray.length ? max : childArray.length;
   const overflowCount = max && childArray.length > max ? childArray.length - max : 0;
@@ -222,7 +204,7 @@ function AvatarGroup({
     overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: [Avatar_module.default.avatar, Avatar_module.default[size], Avatar_module.default.overflow].join(" "),
+        className: [Avatar_module.default.avatar, Avatar_module.default[size], Avatar_module.default.groupItem, Avatar_module.default.overflow].join(" "),
         role: "img",
         "aria-label": `${overflowCount} more ${overflowCount === 1 ? "person" : "people"}`,
         children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Avatar_module.default.initials, "aria-hidden": "true", children: [

package/dist/components/Avatar/index.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+import * as React from "react";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 /**
  * Avatar for user photos, initials, or placeholder icons.
  * @see https://usefragments.com/components/avatar
  */
-export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {
+export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     /** Image source URL */
     src?: string;
     /** Alt text for the image */
@@ -13,18 +13,20 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     initials?: string;
     /** Full name - used to generate initials if not provided */
     name?: string;
+    /** Visual fallback rendered after initials/name and before the generic icon */
+    fallback?: React.ReactNode;
     /** Size variant */
     size?: AvatarSize;
     /** Custom avatar size (overrides size width/height) */
     customSize?: number | string;
     /** Shape variant */
-    shape?: 'circle' | 'square';
+    shape?: "circle" | "square";
     /** Custom background color for fallback */
     color?: string;
     /** Inline style for the underlying image element */
     imageStyle?: React.CSSProperties;
     /** Additional props for the underlying img element */
-    imageProps?: Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'className' | 'style'>;
+    imageProps?: Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "className" | "style">;
 }
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Maximum number of avatars to display */

package/dist/components/Avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,sDAAsD;IACtD,UAAU,CAAC,EAAE,IAAI,CACf,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EACzC,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,OAAO,CACtC,CAAC;CACH;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA0ND,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,EAAE,gBAAgB,2CA8BlB;AAMD,eAAO,MAAM,MAAM;;CAEjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1D;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,oBAAoB;IACpB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,sDAAsD;IACtD,UAAU,CAAC,EAAE,IAAI,CACf,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EACzC,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,OAAO,CACtC,CAAC;CACH;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkOD,iBAAS,WAAW,CAAC,EAAE,GAAG,EAAE,IAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,gBAAgB,2CAgC7F;AAMD,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/dist/components/Avatar/index.js

@@ -60,131 +60,113 @@ function getContrastTextColor(bgColor) {
     /light-dark\(\s*hsl\((\d+)\s+(\d+)%\s+(\d+)%\)\s*,\s*hsl\((\d+)\s+(\d+)%\s+(\d+)%\)\s*\)/
   );
   if (ld) {
-    const lightText = contrastForHsl(
-      parseInt(ld[1]),
-      parseInt(ld[2]) / 100,
-      parseInt(ld[3]) / 100
-    );
-    const darkText = contrastForHsl(
-      parseInt(ld[4]),
-      parseInt(ld[5]) / 100,
-      parseInt(ld[6]) / 100
-    );
+    const lightText = contrastForHsl(parseInt(ld[1]), parseInt(ld[2]) / 100, parseInt(ld[3]) / 100);
+    const darkText = contrastForHsl(parseInt(ld[4]), parseInt(ld[5]) / 100, parseInt(ld[6]) / 100);
     return lightText === darkText ? lightText : `light-dark(${lightText}, ${darkText})`;
   }
   const match = bgColor.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
   if (!match) return void 0;
-  return contrastForHsl(
-    parseInt(match[1]),
-    parseInt(match[2]) / 100,
-    parseInt(match[3]) / 100
-  );
+  return contrastForHsl(parseInt(match[1]), parseInt(match[2]) / 100, parseInt(match[3]) / 100);
 }
-const AvatarBase = React.forwardRef(
-  function AvatarBase2({
-    src,
-    alt = "",
-    initials,
-    name,
-    size = "md",
-    customSize,
-    shape = "circle",
-    color,
-    imageStyle,
-    imageProps,
-    className,
-    style: styleProp,
-    ...htmlProps
-  }, ref) {
-    const imgRef = React.useRef(null);
-    const [imageError, setImageError] = React.useState(false);
-    React.useEffect(() => {
-      setImageError(false);
-      const img = imgRef.current;
-      if (img && img.complete && img.naturalWidth === 0) {
-        setImageError(true);
-      }
-    }, [src]);
-    const showFallback = !src || imageError;
-    const displayInitials = initials || (name ? getInitials(name) : "");
-    const fallbackColor = color || (name ? stringToColor(name) : void 0);
-    const fallbackLabel = alt || name;
-    const hasFallbackLabel = showFallback && Boolean(fallbackLabel && fallbackLabel.trim().length > 0);
-    const avatarClasses = [
-      styles.avatar,
-      styles[size],
-      shape === "square" && styles.square,
-      className
-    ].filter(Boolean).join(" ");
-    const style = { ...styleProp };
-    if (customSize !== void 0) {
-      const resolvedSize = typeof customSize === "number" ? `${customSize}px` : customSize;
-      style.width = resolvedSize;
-      style.height = resolvedSize;
-      if (style.fontSize === void 0) {
-        style.fontSize = `calc(${resolvedSize} * 0.4)`;
-      }
-    }
-    if (showFallback && fallbackColor) {
-      style.backgroundColor = fallbackColor;
-      const textColor = getContrastTextColor(fallbackColor);
-      if (textColor) {
-        style["--avatar-initials-color"] = textColor;
-      }
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        ...htmlProps,
-        className: avatarClasses,
-        style,
-        role: hasFallbackLabel ? "img" : void 0,
-        "aria-label": hasFallbackLabel ? fallbackLabel : void 0,
-        "aria-hidden": showFallback && !hasFallbackLabel ? true : void 0,
-        children: [
-          !showFallback && /* @__PURE__ */ jsx(
-            "img",
-            {
-              ref: imgRef,
-              ...imageProps,
-              src,
-              alt,
-              className: styles.image,
-              onError: (event) => {
-                var _a;
-                (_a = imageProps == null ? void 0 : imageProps.onError) == null ? void 0 : _a.call(imageProps, event);
-                if (!event.defaultPrevented) {
-                  setImageError(true);
-                }
-              },
-              style: { ...imageStyle }
-            }
-          ),
-          showFallback && displayInitials && /* @__PURE__ */ jsx("span", { className: styles.initials, children: displayInitials }),
-          showFallback && !displayInitials && /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: styles.fallbackIcon,
-              xmlns: "http://www.w3.org/2000/svg",
-              viewBox: "0 0 24 24",
-              fill: "currentColor",
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-function AvatarGroup({
-  max,
+const AvatarBase = React.forwardRef(function AvatarBase2({
+  src,
+  alt = "",
+  initials,
+  name,
+  fallback,
   size = "md",
-  children,
+  customSize,
+  shape = "circle",
+  color,
+  imageStyle,
+  imageProps,
   className,
+  style: styleProp,
   ...htmlProps
-}) {
+}, ref) {
+  const imgRef = React.useRef(null);
+  const [imageError, setImageError] = React.useState(false);
+  React.useEffect(() => {
+    setImageError(false);
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalWidth === 0) {
+      setImageError(true);
+    }
+  }, [src]);
+  const showFallback = !src || imageError;
+  const displayInitials = initials || (name ? getInitials(name) : "");
+  const fallbackColor = color || (name ? stringToColor(name) : void 0);
+  const fallbackLabel = alt || name;
+  const hasFallbackLabel = showFallback && Boolean(fallbackLabel && fallbackLabel.trim().length > 0);
+  const avatarClasses = [
+    styles.avatar,
+    styles[size],
+    shape === "square" && styles.square,
+    className
+  ].filter(Boolean).join(" ");
+  const style = { ...styleProp };
+  if (customSize !== void 0) {
+    const resolvedSize = typeof customSize === "number" ? `${customSize}px` : customSize;
+    style.width = resolvedSize;
+    style.height = resolvedSize;
+    if (style.fontSize === void 0) {
+      style.fontSize = `calc(${resolvedSize} * 0.4)`;
+    }
+  }
+  if (showFallback && fallbackColor) {
+    style.backgroundColor = fallbackColor;
+    const textColor = getContrastTextColor(fallbackColor);
+    if (textColor) {
+      style["--avatar-initials-color"] = textColor;
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...htmlProps,
+      className: avatarClasses,
+      style,
+      role: hasFallbackLabel ? "img" : void 0,
+      "aria-label": hasFallbackLabel ? fallbackLabel : void 0,
+      "aria-hidden": showFallback && !hasFallbackLabel ? true : void 0,
+      children: [
+        !showFallback && /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref: imgRef,
+            ...imageProps,
+            src,
+            alt,
+            className: styles.image,
+            onError: (event) => {
+              var _a;
+              (_a = imageProps == null ? void 0 : imageProps.onError) == null ? void 0 : _a.call(imageProps, event);
+              if (!event.defaultPrevented) {
+                setImageError(true);
+              }
+            },
+            style: { ...imageStyle }
+          }
+        ),
+        showFallback && displayInitials && /* @__PURE__ */ jsx("span", { className: styles.initials, children: displayInitials }),
+        showFallback && !displayInitials && fallback !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.fallback, children: fallback }),
+        showFallback && !displayInitials && fallback === void 0 && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: styles.fallbackIcon,
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+          }
+        )
+      ]
+    }
+  );
+});
+function AvatarGroup({ max, size = "md", children, className, ...htmlProps }) {
   const childArray = React.Children.toArray(children);
   const displayCount = max && max < childArray.length ? max : childArray.length;
   const overflowCount = max && childArray.length > max ? childArray.length - max : 0;
@@ -203,7 +185,7 @@ function AvatarGroup({
     overflowCount > 0 && /* @__PURE__ */ jsx(
       "div",
       {
-        className: [styles.avatar, styles[size], styles.overflow].join(" "),
+        className: [styles.avatar, styles[size], styles.groupItem, styles.overflow].join(" "),
         role: "img",
         "aria-label": `${overflowCount} more ${overflowCount === 1 ? "person" : "people"}`,
         children: /* @__PURE__ */ jsxs("span", { className: styles.initials, "aria-hidden": "true", children: [

package/dist/components/Badge/Badge.module.scss.cjs

@@ -1,28 +1,28 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const badge = "_badge_1luxf_1";
-const sm = "_sm_1luxf_14";
-const md = "_md_1luxf_19";
-const lg = "_lg_1luxf_24";
-const success = "_success_1luxf_34";
-const warning = "_warning_1luxf_39";
-const error = "_error_1luxf_44";
-const info = "_info_1luxf_49";
-const outline = "_outline_1luxf_54";
-const label = "_label_1luxf_60";
-const dim = "_dim_1luxf_71";
-const active = "_active_1luxf_82";
-const dot = "_dot_1luxf_88";
-const dotPulse = "_dotPulse_1luxf_100";
-const fuiBadgeDotPulse = "_fui-badge-dot-pulse_1luxf_1";
-const icon = "_icon_1luxf_114";
-const remove = "_remove_1luxf_119";
+const badge = "_badge_15ow6_1";
+const sm = "_sm_15ow6_13";
+const md = "_md_15ow6_23";
+const lg = "_lg_15ow6_33";
+const success = "_success_15ow6_48";
+const warning = "_warning_15ow6_53";
+const error = "_error_15ow6_58";
+const info = "_info_15ow6_63";
+const outline = "_outline_15ow6_68";
+const label = "_label_15ow6_74";
+const dim = "_dim_15ow6_81";
+const active = "_active_15ow6_88";
+const dot = "_dot_15ow6_94";
+const dotPulse = "_dotPulse_15ow6_106";
+const fuiBadgeDotPulse = "_fui-badge-dot-pulse_15ow6_1";
+const icon = "_icon_15ow6_120";
+const remove = "_remove_15ow6_144";
 const styles = {
   badge,
   sm,
   md,
   lg,
-  "default": "_default_1luxf_29",
+  "default": "_default_15ow6_43",
   success,
   warning,
   error,
@@ -33,7 +33,7 @@ const styles = {
   active,
   dot,
   dotPulse,
-  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_1luxf_1",
+  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_15ow6_1",
   fuiBadgeDotPulse,
   icon,
   remove

package/dist/components/Badge/Badge.module.scss.js

@@ -1,26 +1,26 @@
-const badge = "_badge_1luxf_1";
-const sm = "_sm_1luxf_14";
-const md = "_md_1luxf_19";
-const lg = "_lg_1luxf_24";
-const success = "_success_1luxf_34";
-const warning = "_warning_1luxf_39";
-const error = "_error_1luxf_44";
-const info = "_info_1luxf_49";
-const outline = "_outline_1luxf_54";
-const label = "_label_1luxf_60";
-const dim = "_dim_1luxf_71";
-const active = "_active_1luxf_82";
-const dot = "_dot_1luxf_88";
-const dotPulse = "_dotPulse_1luxf_100";
-const fuiBadgeDotPulse = "_fui-badge-dot-pulse_1luxf_1";
-const icon = "_icon_1luxf_114";
-const remove = "_remove_1luxf_119";
+const badge = "_badge_15ow6_1";
+const sm = "_sm_15ow6_13";
+const md = "_md_15ow6_23";
+const lg = "_lg_15ow6_33";
+const success = "_success_15ow6_48";
+const warning = "_warning_15ow6_53";
+const error = "_error_15ow6_58";
+const info = "_info_15ow6_63";
+const outline = "_outline_15ow6_68";
+const label = "_label_15ow6_74";
+const dim = "_dim_15ow6_81";
+const active = "_active_15ow6_88";
+const dot = "_dot_15ow6_94";
+const dotPulse = "_dotPulse_15ow6_106";
+const fuiBadgeDotPulse = "_fui-badge-dot-pulse_15ow6_1";
+const icon = "_icon_15ow6_120";
+const remove = "_remove_15ow6_144";
 const styles = {
   badge,
   sm,
   md,
   lg,
-  "default": "_default_1luxf_29",
+  "default": "_default_15ow6_43",
   success,
   warning,
   error,
@@ -31,7 +31,7 @@ const styles = {
   active,
   dot,
   dotPulse,
-  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_1luxf_1",
+  "fui-badge-dot-pulse": "_fui-badge-dot-pulse_15ow6_1",
   fuiBadgeDotPulse,
   icon,
   remove

package/dist/components/BentoGrid/BentoGrid.module.scss.cjs

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const grid = "_grid_12mpr_1";
-const columns2 = "_columns2_12mpr_7";
-const columns3 = "_columns3_12mpr_11";
-const columns4 = "_columns4_12mpr_15";
-const gapNone = "_gapNone_12mpr_32";
-const gapXs = "_gapXs_12mpr_36";
-const gapSm = "_gapSm_12mpr_40";
-const gapMd = "_gapMd_12mpr_44";
-const gapLg = "_gapLg_12mpr_48";
-const gapXl = "_gapXl_12mpr_52";
-const item = "_item_12mpr_56";
-const subgridRows = "_subgridRows_12mpr_132";
-const subgridColumns = "_subgridColumns_12mpr_137";
-const subgridBoth = "_subgridBoth_12mpr_142";
+const grid = "_grid_qr1ks_1";
+const columns2 = "_columns2_qr1ks_7";
+const columns3 = "_columns3_qr1ks_11";
+const columns4 = "_columns4_qr1ks_15";
+const gapNone = "_gapNone_qr1ks_32";
+const gapXs = "_gapXs_qr1ks_36";
+const gapSm = "_gapSm_qr1ks_40";
+const gapMd = "_gapMd_qr1ks_44";
+const gapLg = "_gapLg_qr1ks_48";
+const gapXl = "_gapXl_qr1ks_52";
+const item = "_item_qr1ks_56";
+const subgridRows = "_subgridRows_qr1ks_117";
+const subgridColumns = "_subgridColumns_qr1ks_122";
+const subgridBoth = "_subgridBoth_qr1ks_127";
 const styles = {
   grid,
   columns2,