@servicetitan/anvil2 3.0.3 → 3.0.4

package/dist/Announcement.css

@@ -1,4 +1,4 @@
-.anvil2 {._announcement_kpf9b_1 {
+.anvil2 {._announcement_nddy0_1 {
   --a2-internal-announcement-button-color: var(
     --a2-mod-announcement-button-color
   );
@@ -8,7 +8,6 @@
   --a2-mod-announcement-button-color-hover: var(--a2-announcement-info-action-button-background-color-hover, var(--a2-background-color-secondary-strong-hover, light-dark(rgba(4, 4, 4, 0.2509803922), rgba(255, 255, 255, 0.6509803922))));
   --a2-mod-announcement-focus-ring-color: var(--a2-announcement-info-action-button-focus-ring-color, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
   --a2-mod-announcement-foreground-color: var(--a2-announcement-info-foreground-color, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
-  all: unset;
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: var(--a2-mod-announcement-foreground-color);
@@ -30,7 +29,7 @@
   padding-inline: var(--a2-size-4, 1rem) calc(var(--a2-size-6, 1.5rem) + var(--a2-size-8, 2rem));
   position: relative;
   width: 100%;
-}._announcement_kpf9b_1 button:not(._close-button_kpf9b_34):not([aria-disabled=true]):not([disabled]) {
+}._announcement_nddy0_1 button:not(._close-button_nddy0_33):not([aria-disabled=true]):not([disabled]) {
   --a2-mod-button-background-color: var(
     --a2-internal-announcement-button-color
   );
@@ -50,7 +49,7 @@
     --a2-mod-announcement-foreground-color
   );
   outline-color: var(--a2-mod-announcement-focus-ring-color);
-}._close-container_kpf9b_56 {
+}._close-container_nddy0_55 {
   align-items: center;
   display: flex;
   height: var(--a2-size-6, 1.5rem);
@@ -58,7 +57,7 @@
   justify-content: center;
   position: absolute;
   width: var(--a2-size-6, 1.5rem);
-}._close-button_kpf9b_34 {
+}._close-button_nddy0_33 {
   --a2-mod-button-background-color-active: var(
     --a2-mod-announcement-button-color-active
   );
@@ -73,33 +72,33 @@
     --a2-mod-announcement-foreground-color
   );
   --a2-mod-button-focus-ring-color: var(--a2-mod-announcement-focus-ring-color);
-}._title-container_kpf9b_83 {
+}._title-container_nddy0_82 {
   align-items: center;
   display: flex;
   gap: var(--a2-size-1, 0.25rem);
   overflow: hidden;
-}._title_kpf9b_83 {
+}._title_nddy0_82 {
   font-size: var(--a2-typography-label-size-large, var(--a2-font-size-400, 1rem));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}._status-icon_kpf9b_97 {
+}._status-icon_nddy0_96 {
   color: inherit;
-}._success_kpf9b_101 {
+}._success_nddy0_100 {
   --a2-mod-announcement-background-color: var(--a2-announcement-success-background-color, var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085))));
   --a2-mod-announcement-button-color: var(--a2-announcement-success-action-button-background-color, var(--a2-background-color-secondary-strong, light-dark(rgba(4, 4, 4, 0.1490196078), rgba(255, 255, 255, 0.5490196078))));
   --a2-mod-announcement-button-color-active: var(--a2-announcement-success-action-button-background-color-active, var(--a2-background-color-secondary-strong-active, light-dark(rgba(4, 4, 4, 0.3019607843), rgba(255, 255, 255, 0.7490196078))));
   --a2-mod-announcement-button-color-hover: var(--a2-announcement-success-action-button-background-color-hover, var(--a2-background-color-secondary-strong-hover, light-dark(rgba(4, 4, 4, 0.2509803922), rgba(255, 255, 255, 0.6509803922))));
   --a2-mod-announcement-focus-ring-color: var(--a2-announcement-success-action-button-focus-ring-color, var(--a2-foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
   --a2-mod-announcement-foreground-color: var(--a2-announcement-success-foreground-color, var(--a2-foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
-}._warning_kpf9b_110 {
+}._warning_nddy0_109 {
   --a2-mod-announcement-background-color: var(--a2-announcement-warning-background-color, var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #ffbe00), var(--a2-color-yellow-300, #ffe278))));
   --a2-mod-announcement-button-color: var(--a2-announcement-warning-action-button-background-color, var(--a2-background-color-secondary-strong, light-dark(rgba(4, 4, 4, 0.1490196078), rgba(255, 255, 255, 0.5490196078))));
   --a2-mod-announcement-button-color-active: var(--a2-announcement-warning-action-button-background-color-active, var(--a2-background-color-secondary-strong-active, light-dark(rgba(4, 4, 4, 0.3019607843), rgba(255, 255, 255, 0.7490196078))));
   --a2-mod-announcement-button-color-hover: var(--a2-announcement-warning-action-button-background-color-hover, var(--a2-background-color-secondary-strong-hover, light-dark(rgba(4, 4, 4, 0.2509803922), rgba(255, 255, 255, 0.6509803922))));
   --a2-mod-announcement-focus-ring-color: var(--a2-announcement-warning-action-button-focus-ring-color, var(--a2-foreground-color-on-warning, var(--a2-color-neutral-900, #1a1a1a)));
   --a2-mod-announcement-foreground-color: var(--a2-announcement-warning-foreground-color, var(--a2-foreground-color-on-warning, var(--a2-color-neutral-900, #1a1a1a)));
-}._danger_kpf9b_119 {
+}._danger_nddy0_118 {
   --a2-mod-announcement-background-color: var(--a2-announcement-danger-background-color, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
   --a2-mod-announcement-button-color: var(--a2-announcement-danger-action-button-background-color, var(--a2-background-color-secondary-strong, light-dark(rgba(4, 4, 4, 0.1490196078), rgba(255, 255, 255, 0.5490196078))));
   --a2-mod-announcement-button-color-active: var(--a2-announcement-danger-action-button-background-color-active, var(--a2-background-color-secondary-strong-active, light-dark(rgba(4, 4, 4, 0.3019607843), rgba(255, 255, 255, 0.7490196078))));

package/dist/Announcement.d.ts

@@ -1,6 +1 @@
-export * from './components/Announcement/index'
-export {}
-import _default from './components/Announcement/index'
-export default _default
-export * from './components/Announcement/index'
 export {}

package/dist/Announcement.js

@@ -1,2 +1,2 @@
-export { A as Announcement, A as default } from './Announcement-_C5g2Lzm.js';
+export { A as Announcement, A as default } from './Announcement-CgTqDU8A.js';
 //# sourceMappingURL=Announcement.js.map

package/dist/AnvilProvider.d.ts

@@ -1,6 +1 @@
-export * from './providers/AnvilProvider/index'
-export {}
-import _default from './providers/AnvilProvider/index'
-export default _default
-export * from './providers/AnvilProvider/index'
 export {}

package/dist/Avatar-B_cRQqKR.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { a as Avatar$1, A as AvatarGroup } from './Avatar-FDHyqiCy.js';
+import { forwardRef } from 'react';
+
+const Avatar = Object.assign(
+  forwardRef(function AvatarInner(props, ref) {
+    return /* @__PURE__ */ jsx(Avatar$1, { ref, ...props });
+  }),
+  {
+    /**
+     * AvatarGroup component for displaying multiple avatars in a group.
+     *
+     * Features:
+     * - Displays multiple avatars in a stacked layout
+     * - Handles overflow with a count indicator
+     * - Maintains consistent sizing across all avatars
+     * - Supports custom styling and layout
+     * - Automatically adjusts z-index for proper stacking
+     * - Fully accessible with screen reader support
+     *
+     * @example
+     * <Avatar.Group max={3}>
+     *   <Avatar name="John Doe" />
+     *   <Avatar name="Jane Smith" />
+     *   <Avatar name="Bob Johnson" />
+     *   <Avatar name="Alice Brown" />
+     * </Avatar.Group>
+     */
+    Group: AvatarGroup
+  }
+);
+Avatar.displayName = Avatar$1.displayName;
+
+export { Avatar as A };
+//# sourceMappingURL=Avatar-B_cRQqKR.js.map

package/dist/Avatar-B_cRQqKR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-B_cRQqKR.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import {\n  Avatar as CoreAvatar,\n  AvatarProps as CoreAvatarProps,\n} from \"./internal/Avatar\";\nimport { forwardRef } from \"react\";\nimport { DistributiveOmit } from \"../../types\";\nimport { AvatarGroup } from \"./AvatarGroup\";\n\n/**\n * Props for the Avatar component\n * @property {string} name - Full name used for alt text and screen reader\n * @property {string} [color] - Custom color of the Avatar\n * @property {string} [image] - Image source to be used for Avatar\n * @property {\"small\" | \"medium\" | \"large\"} [size] - Size of the Avatar\n * @property {\"online\" | \"offline\"} [status] - Online status of the Avatar\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<AvatarBaseProps, \"initials\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n * @extends DataTrackingId\n */\nexport type AvatarProps = DistributiveOmit<CoreAvatarProps, \"size\"> & {\n  size?: Extract<CoreAvatarProps[\"size\"], \"small\" | \"medium\" | \"large\">;\n};\n\n/**\n * Avatar component for displaying user avatars with initials or images.\n *\n * Features:\n * - Displays user initials when no image is provided\n * - Supports custom colors and sizes\n * - Shows online/offline status\n * - Fully accessible with screen reader support\n * - Automatic image fallback handling\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Avatar name=\"John Doe\" size=\"medium\" status=\"online\" />\n */\nexport const Avatar = Object.assign(\n  forwardRef<HTMLSpanElement, AvatarProps>(function AvatarInner(props, ref) {\n    return <CoreAvatar ref={ref} {...props} />;\n  }),\n  {\n    /**\n     * AvatarGroup component for displaying multiple avatars in a group.\n     *\n     * Features:\n     * - Displays multiple avatars in a stacked layout\n     * - Handles overflow with a count indicator\n     * - Maintains consistent sizing across all avatars\n     * - Supports custom styling and layout\n     * - Automatically adjusts z-index for proper stacking\n     * - Fully accessible with screen reader support\n     *\n     * @example\n     * <Avatar.Group max={3}>\n     *   <Avatar name=\"John Doe\" />\n     *   <Avatar name=\"Jane Smith\" />\n     *   <Avatar name=\"Bob Johnson\" />\n     *   <Avatar name=\"Alice Brown\" />\n     * </Avatar.Group>\n     */\n    Group: AvatarGroup,\n  },\n);\nAvatar.displayName = CoreAvatar.displayName;\n"],"names":["CoreAvatar"],"mappings":";;;;AAsCO,MAAM,SAAS,MAAA,CAAO,MAAA;AAAA,EAC3B,UAAA,CAAyC,SAAS,WAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AACxE,IAAA,uBAAO,GAAA,CAACA,QAAA,EAAA,EAAW,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAAA,EAC1C,CAAC,CAAA;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBE,KAAA,EAAO;AAAA;AAEX;AACA,MAAA,CAAO,cAAcA,QAAA,CAAW,WAAA;;;;"}

package/dist/Avatar-FDHyqiCy.js

@@ -0,0 +1,258 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useContext, useMemo, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { c as cx } from './index-De1g9FRV.js';
+import { u as useAccessibleColor, t as tinycolor } from './useAccessibleColor-BYKjkGRg.js';
+import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
+import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
+import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
+import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+
+import './Avatar.css';function getInitial(name) {
+  if (!name) return void 0;
+  const nameArray = name.split(" ").filter(Boolean);
+  if (nameArray.length > 1)
+    return `${nameArray[0][0]?.toUpperCase()}${nameArray[nameArray.length - 1][0].toUpperCase()}`;
+  if (nameArray[0][1]) {
+    return `${nameArray[0][0].toUpperCase()}${nameArray[0][1].toLowerCase()}`;
+  }
+  return `${nameArray[0][0].toUpperCase()}`;
+}
+
+const small$1 = "_small_1op2x_22";
+const medium = "_medium_1op2x_27";
+const large$1 = "_large_1op2x_32";
+const styles = {
+	"avatar-group": "_avatar-group_1op2x_1",
+	small: small$1,
+	medium: medium,
+	large: large$1
+};
+
+const initial = "_initial_1orn6_45";
+const img = "_img_1orn6_54";
+const indicator = "_indicator_1orn6_64";
+const online = "_online_1orn6_77";
+const offline = "_offline_1orn6_81";
+const xsmall = "_xsmall_1orn6_85";
+const small = "_small_1orn6_91";
+const large = "_large_1orn6_97";
+const avatarBaseStyles = {
+	"avatar-base": "_avatar-base_1orn6_1",
+	initial: initial,
+	img: img,
+	indicator: indicator,
+	online: online,
+	offline: offline,
+	xsmall: xsmall,
+	small: small,
+	large: large,
+	"overflow-ten-plus": "_overflow-ten-plus_1orn6_105"
+};
+
+const AvatarBase = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      color,
+      status,
+      name,
+      image,
+      initials,
+      style,
+      size,
+      ...rest
+    } = props;
+    const elRef = useRef(null);
+    const imgRef = useRef(null);
+    const [hasImageErrored, setHasImageErrored] = useState(false);
+    const avatarBaseClassNames = cx(avatarBaseStyles["avatar-base"], className, {
+      [avatarBaseStyles[`${size}`]]: size && size !== "medium"
+    });
+    const onlineIndicatorClassNames = cx(avatarBaseStyles["indicator"], {
+      [avatarBaseStyles["offline"]]: !status || status === "offline",
+      [avatarBaseStyles["online"]]: status && status === "online"
+    });
+    const { mode: themeMode } = useContext(ThemeProviderContext);
+    const { mode: sysMode } = usePrefersColorScheme();
+    const mode = themeMode ?? sysMode;
+    const { foreground, background, border } = useAccessibleColor(color, mode);
+    const styleWithColor = {
+      "--a2-inline-avatar-background-color": color && background,
+      "--a2-inline-avatar-font-color": color && foreground,
+      "--a2-inline-avatar-border-color": color && border,
+      ...style
+    };
+    const onlineIndicatorBorderColor = useMemo(() => {
+      if (mode === "dark") {
+        if (color) {
+          return tinycolor(background).brighten(20).toHexString();
+        }
+      }
+      return "var(--a2-background-color-default)";
+    }, [color, mode, background]);
+    const onlineIndicatorStyles = {
+      "--a2-inline-avatar-border-color": onlineIndicatorBorderColor
+    };
+    const onlineString = status;
+    const srOnly = [name, onlineString].filter(Boolean).join(" ");
+    useEffect(() => {
+      if (image) {
+        setHasImageErrored(false);
+      }
+    }, [image]);
+    useEffect(() => {
+      if (image && imgRef.current && imgRef.current.complete) {
+        const img = new Image();
+        img.onerror = () => setHasImageErrored(true);
+        img.src = image;
+      }
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: avatarBaseClassNames,
+        style: styleWithColor,
+        "data-anv": "avatarBase",
+        ...rest,
+        ref: useMergeRefs([elRef, ref]),
+        children: [
+          image && !hasImageErrored ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: avatarBaseStyles["img"],
+              "aria-hidden": true,
+              src: image,
+              alt: name,
+              onError: () => setHasImageErrored(true),
+              ref: imgRef
+            }
+          ) : initials ? /* @__PURE__ */ jsx("span", { className: avatarBaseStyles["initial"], "aria-hidden": true, children: initials }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "?" }),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: onlineIndicatorClassNames,
+              style: onlineIndicatorStyles
+            }
+          ),
+          /* @__PURE__ */ jsx(SrOnly, { children: srOnly })
+        ]
+      }
+    );
+  }
+);
+AvatarBase.displayName = "AvatarBase";
+
+const AvatarGroup = forwardRef(
+  (props, ref) => {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const { className, max, style, children, ...rest } = componentProps;
+    const childrenArr = Children.toArray(children);
+    const inferredSize = (isValidElement(childrenArr[0]) && childrenArr[0].props.size) ?? "medium";
+    const isOverflowing = max ? max < childrenArr.length : false;
+    const overflowCount = max && childrenArr.length - max;
+    const avatarGroupClassNames = cx(styles["avatar-group"], className, {
+      [styles[`${inferredSize}`]]: inferredSize
+    });
+    const avatarBaseOverflowClassNames = cx(
+      avatarBaseStyles["avatar-base-overflow"],
+      {
+        [avatarBaseStyles["overflow-ten-plus"]]: overflowCount && overflowCount > 9
+      }
+    );
+    const styleCombined = {
+      ...style,
+      ...layoutStyles
+    };
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: avatarGroupClassNames,
+        style: styleCombined,
+        "data-anv": "avatar-group",
+        ...rest,
+        children: [
+          childrenArr.map((child, i) => {
+            let childEl = child;
+            if (isValidElement(child)) {
+              const nIndex = childrenArr.length - i;
+              const nStyle = {
+                ...child.props.style,
+                zIndex: nIndex
+              };
+              childEl = cloneElement(child, {
+                style: nStyle
+              });
+            }
+            if (!max) return childEl;
+            if (i < max) return childEl;
+            return null;
+          }),
+          isOverflowing && max && /* @__PURE__ */ jsx(
+            AvatarBase,
+            {
+              className: avatarBaseOverflowClassNames,
+              name: `+${overflowCount}`,
+              initials: `+${overflowCount}`,
+              size: inferredSize
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+const Avatar = Object.assign(
+  forwardRef(function AvatarInner(props, ref) {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const { name, style, ...rest } = componentProps;
+    const styleWithLayout = useMemo(() => {
+      return {
+        ...layoutStyles,
+        ...style
+      };
+    }, [layoutStyles, style]);
+    const initials = getInitial(name);
+    return /* @__PURE__ */ jsx(
+      AvatarBase,
+      {
+        style: styleWithLayout,
+        "data-anv": "avatar",
+        name,
+        ref,
+        initials: rest.size === "small" ? initials?.[0] : initials,
+        ...rest
+      }
+    );
+  }),
+  {
+    /**
+     * AvatarGroup component for displaying multiple avatars in a group.
+     *
+     * Features:
+     * - Displays multiple avatars in a stacked layout
+     * - Handles overflow with a count indicator
+     * - Maintains consistent sizing across all avatars
+     * - Supports custom styling and layout
+     * - Automatically adjusts z-index for proper stacking
+     * - Fully accessible with screen reader support
+     *
+     * @example
+     * <Avatar.Group max={3}>
+     *   <Avatar name="John Doe" />
+     *   <Avatar name="Jane Smith" />
+     *   <Avatar name="Bob Johnson" />
+     *   <Avatar name="Alice Brown" />
+     * </Avatar.Group>
+     */
+    Group: AvatarGroup
+  }
+);
+Avatar.displayName = "Avatar";
+
+export { AvatarGroup as A, Avatar as a };
+//# sourceMappingURL=Avatar-FDHyqiCy.js.map

package/dist/Avatar-FDHyqiCy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-FDHyqiCy.js","sources":["../src/internal/functions/getInitial.ts","../src/components/Avatar/internal/AvatarBase.tsx","../src/components/Avatar/AvatarGroup.tsx","../src/components/Avatar/internal/Avatar.tsx"],"sourcesContent":["/**\n * Extracts initials from a full name string.\n *\n * Features:\n * - Handles single names (returns first two characters)\n * - Handles multiple names (returns first and last name initials)\n * - Automatically capitalizes all initials\n * - Filters out empty strings and whitespace\n * - Handles edge cases like empty names and single characters\n * - Preserves proper capitalization rules\n * - Returns undefined for empty or falsy input\n *\n * @param name - The full name string to extract initials from\n * @returns The initials as a string, or undefined if name is empty\n */\nexport function getInitial(name: string) {\n  if (!name) return undefined;\n\n  const nameArray = name.split(\" \").filter(Boolean);\n\n  if (nameArray.length > 1)\n    return `${nameArray[0][0]?.toUpperCase()}${nameArray[\n      nameArray.length - 1\n    ][0].toUpperCase()}`;\n\n  if (nameArray[0][1]) {\n    return `${nameArray[0][0].toUpperCase()}${nameArray[0][1].toLowerCase()}`;\n  }\n  return `${nameArray[0][0].toUpperCase()}`;\n}\n","import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useContext,\n  useRef,\n  useState,\n  useEffect,\n  useMemo,\n} from \"react\";\nimport cx from \"classnames\";\nimport tinycolor from \"tinycolor2\";\n\nimport { LayoutUtilProps, Size } from \"../../../types\";\nimport { SrOnly } from \"../../SrOnly\";\nimport {\n  useAccessibleColor,\n  useMergeRefs,\n  usePrefersColorScheme,\n} from \"../../../hooks\";\n\nimport styles from \"./AvatarBase.module.scss\";\nimport { ThemeProviderContext } from \"../../../providers/ThemeProvider/internal/ThemeProviderContext\";\n\n/**\n * Props for the AvatarBase component\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type AvatarBaseProps = ComponentPropsWithoutRef<\"span\"> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * Full name\n     * @accessibility This is used for alt text and Screenreader\n     */\n    name: string;\n    /**\n     * Custom color of the AvatarBase\n     */\n    color?: string;\n    /**\n     * Image source to be used for AvatarBase\n     */\n    image?: string;\n    /**\n     * Initials to display if no image is provided\n     */\n    initials?: string;\n    /**\n     * @default medium\n     */\n    size?: Extract<Size, \"xsmall\" | \"small\" | \"medium\" | \"large\">;\n    /**\n     * Online status of the AvatarBase\n     */\n    status?: \"online\" | \"offline\";\n  };\n\n/**\n * Base Avatar component that handles the core avatar functionality.\n *\n * Features:\n * - Renders user avatars with images or initials\n * - Supports custom colors with accessible contrast\n * - Shows online/offline status indicator\n * - Handles image loading errors gracefully\n * - Supports light and dark themes\n * - Fully accessible with screen reader support\n *\n * @example\n * <AvatarBase name=\"John Doe\" size=\"medium\" status=\"online\" />\n */\nexport const AvatarBase = forwardRef<HTMLSpanElement, AvatarBaseProps>(\n  (props, ref) => {\n    const {\n      className,\n      color,\n      status,\n      name,\n      image,\n      initials,\n      style,\n      size,\n      ...rest\n    } = props;\n\n    const elRef = useRef<HTMLSpanElement>(null);\n    const imgRef = useRef<HTMLImageElement>(null);\n    const [hasImageErrored, setHasImageErrored] = useState(false);\n    const avatarBaseClassNames = cx(styles[\"avatar-base\"], className, {\n      [styles[`${size}`]]: size && size !== \"medium\",\n    });\n    const onlineIndicatorClassNames = cx(styles[\"indicator\"], {\n      [styles[\"offline\"]]: !status || status === \"offline\",\n      [styles[\"online\"]]: status && status === \"online\",\n    });\n\n    const { mode: themeMode } = useContext(ThemeProviderContext);\n    const { mode: sysMode } = usePrefersColorScheme();\n    const mode = themeMode ?? sysMode;\n\n    const { foreground, background, border } = useAccessibleColor(color, mode);\n\n    const styleWithColor = {\n      \"--a2-inline-avatar-background-color\": color && background,\n      \"--a2-inline-avatar-font-color\": color && foreground,\n      \"--a2-inline-avatar-border-color\": color && border,\n      ...style,\n    };\n\n    const onlineIndicatorBorderColor = useMemo(() => {\n      if (mode === \"dark\") {\n        if (color) {\n          return tinycolor(background).brighten(20).toHexString();\n        }\n      }\n      return \"var(--a2-background-color-default)\";\n    }, [color, mode, background]);\n\n    const onlineIndicatorStyles = {\n      \"--a2-inline-avatar-border-color\": onlineIndicatorBorderColor,\n    } as React.CSSProperties;\n\n    const onlineString = status;\n    const srOnly = [name, onlineString].filter(Boolean).join(\" \");\n\n    // if the image prop updates, also reset the error state for the new image\n    useEffect(() => {\n      if (image) {\n        setHasImageErrored(false);\n      }\n    }, [image]);\n\n    // if the image is already complete on our first render (likely due to SSR),\n    // check the error state of the already complete image\n    useEffect(() => {\n      if (image && imgRef.current && imgRef.current.complete) {\n        const img = new Image();\n        img.onerror = () => setHasImageErrored(true);\n        img.src = image;\n      }\n    }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <span\n        className={avatarBaseClassNames}\n        style={styleWithColor}\n        data-anv=\"avatarBase\"\n        {...rest}\n        ref={useMergeRefs([elRef, ref])}\n      >\n        {image && !hasImageErrored ? (\n          <img\n            className={styles[\"img\"]}\n            aria-hidden\n            src={image}\n            alt={name}\n            onError={() => setHasImageErrored(true)}\n            ref={imgRef}\n          />\n        ) : initials ? (\n          <span className={styles[\"initial\"]} aria-hidden>\n            {initials}\n          </span>\n        ) : (\n          <span aria-hidden>?</span>\n        )}\n\n        {status && (\n          <span\n            aria-hidden\n            className={onlineIndicatorClassNames}\n            style={onlineIndicatorStyles}\n          />\n        )}\n\n        <SrOnly>{srOnly}</SrOnly>\n      </span>\n    );\n  },\n);\n\nAvatarBase.displayName = \"AvatarBase\";\n","import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  Children,\n  isValidElement,\n  cloneElement,\n  CSSProperties,\n  ReactElement,\n} from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./AvatarGroup.module.scss\";\nimport avatarBaseStyles from \"./internal/AvatarBase.module.scss\";\nimport type { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { AvatarBase } from \"./internal/AvatarBase\";\n\n/**\n * Props for the AvatarGroup component\n * @property {number} [max] - Maximum number of avatars to display before truncating\n * @extends LayoutUtilProps\n * @extends ComponentPropsWithoutRef<\"span\">\n */\nexport type AvatarGroupProps = LayoutUtilProps &\n  ComponentPropsWithoutRef<\"span\"> & {\n    /**\n     * Max child to show before truncating\n     */\n    max?: number;\n  };\n\n/**\n * AvatarGroup component for displaying multiple avatars in a group.\n *\n * Features:\n * - Displays multiple avatars in a stacked layout\n * - Handles overflow with a count indicator\n * - Maintains consistent sizing across all avatars\n * - Supports custom styling and layout\n * - Automatically adjusts z-index for proper stacking\n * - Fully accessible with screen reader support\n *\n * @example\n * <Avatar.Group max={3}>\n *   <Avatar name=\"John Doe\" />\n *   <Avatar name=\"Jane Smith\" />\n *   <Avatar name=\"Bob Johnson\" />\n *   <Avatar name=\"Alice Brown\" />\n * </Avatar.Group>\n */\nexport const AvatarGroup = forwardRef<HTMLSpanElement, AvatarGroupProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const { className, max, style, children, ...rest } = componentProps;\n    const childrenArr = Children.toArray(children);\n    const inferredSize =\n      (isValidElement(childrenArr[0]) && childrenArr[0].props.size) ?? \"medium\";\n    const isOverflowing = max ? max < childrenArr.length : false;\n\n    const overflowCount = max && childrenArr.length - max;\n\n    const avatarGroupClassNames = cx(styles[\"avatar-group\"], className, {\n      [styles[`${inferredSize}`]]: inferredSize,\n    });\n\n    const avatarBaseOverflowClassNames = cx(\n      avatarBaseStyles[\"avatar-base-overflow\"],\n      {\n        [avatarBaseStyles[\"overflow-ten-plus\"]]:\n          overflowCount && overflowCount > 9,\n      },\n    );\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n    return (\n      <span\n        ref={ref}\n        className={avatarGroupClassNames}\n        style={styleCombined}\n        data-anv=\"avatar-group\"\n        {...rest}\n      >\n        {childrenArr.map((child, i) => {\n          let childEl = child;\n          if (isValidElement(child)) {\n            const nIndex = childrenArr.length - i;\n            const nStyle: CSSProperties = {\n              ...child.props.style,\n              zIndex: nIndex,\n            };\n            childEl = cloneElement(child as ReactElement, {\n              style: nStyle,\n            });\n          }\n\n          if (!max) return childEl;\n          if (i < max) return childEl;\n          return null;\n        })}\n        {isOverflowing && max && (\n          <AvatarBase\n            className={avatarBaseOverflowClassNames}\n            name={`+${overflowCount}`}\n            initials={`+${overflowCount}`}\n            size={inferredSize}\n          />\n        )}\n      </span>\n    );\n  },\n);\n\nAvatarGroup.displayName = \"AvatarGroup\";\n","import { ComponentPropsWithoutRef, forwardRef, useMemo } from \"react\";\nimport { AvatarGroup } from \"../AvatarGroup\";\nimport { LayoutUtilProps } from \"../../../types\";\nimport { getInitial } from \"../../../internal/functions\";\n\nimport { useLayoutPropsUtil } from \"../../../internal/hooks\";\nimport { AvatarBase, AvatarBaseProps } from \"./AvatarBase\";\n\n/**\n * Props for the Avatar component\n * @property {string} name - Full name of the user. Used for alt text and screen reader announcements\n * @property {string} [color] - Custom color of the avatar. Should maintain sufficient contrast ratio for accessibility\n * @property {string} [image] - Image source to be used for avatar. Falls back to initials if image fails to load\n * @property {Extract<Size, \"small\" | \"medium\" | \"large\">} [size] - Size of the Avatar\n * @property {\"online\" | \"offline\"} [status] - Online status of the Avatar\n * @extends ComponentPropsWithoutRef<\"span\">\n * @extends Omit<AvatarBaseProps, \"initials\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type AvatarProps = ComponentPropsWithoutRef<\"span\"> &\n  Omit<AvatarBaseProps, \"initials\"> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">;\n\n/**\n * Avatar component for displaying user avatars with initials or images.\n *\n * Features:\n * - Displays user initials when no image is provided\n * - Supports custom colors and sizes\n * - Shows online/offline status\n * - Fully accessible with screen reader support\n * - Automatic image fallback handling\n * - Supports layout utilities for positioning and spacing\n *\n * @example\n * <Avatar\n *   name=\"John Doe\"\n *   image=\"https://example.com/avatar.jpg\"\n *   size=\"medium\"\n *   status=\"online\"\n * />\n */\nexport const Avatar = Object.assign(\n  forwardRef<HTMLSpanElement, AvatarProps>(function AvatarInner(props, ref) {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const { name, style, ...rest } = componentProps;\n\n    const styleWithLayout = useMemo(() => {\n      return {\n        ...layoutStyles,\n        ...style,\n      };\n    }, [layoutStyles, style]);\n\n    const initials = getInitial(name);\n\n    return (\n      <AvatarBase\n        style={styleWithLayout}\n        data-anv=\"avatar\"\n        name={name}\n        ref={ref}\n        initials={rest.size === \"small\" ? initials?.[0] : initials}\n        {...rest}\n      />\n    );\n  }),\n  {\n    /**\n     * AvatarGroup component for displaying multiple avatars in a group.\n     *\n     * Features:\n     * - Displays multiple avatars in a stacked layout\n     * - Handles overflow with a count indicator\n     * - Maintains consistent sizing across all avatars\n     * - Supports custom styling and layout\n     * - Automatically adjusts z-index for proper stacking\n     * - Fully accessible with screen reader support\n     *\n     * @example\n     * <Avatar.Group max={3}>\n     *   <Avatar name=\"John Doe\" />\n     *   <Avatar name=\"Jane Smith\" />\n     *   <Avatar name=\"Bob Johnson\" />\n     *   <Avatar name=\"Alice Brown\" />\n     * </Avatar.Group>\n     */\n    Group: AvatarGroup,\n  },\n);\nAvatar.displayName = \"Avatar\";\n"],"names":["styles"],"mappings":";;;;;;;;;;AAeO,SAAS,WAAW,IAAA,EAAc;AACvC,EAAA,IAAI,CAAC,MAAM,OAAO,MAAA;AAElB,EAAA,MAAM,YAAY,IAAA,CAAK,KAAA,CAAM,GAAG,CAAA,CAAE,OAAO,OAAO,CAAA;AAEhD,EAAA,IAAI,UAAU,MAAA,GAAS,CAAA;AACrB,IAAA,OAAO,GAAG,SAAA,CAAU,CAAC,CAAA,CAAE,CAAC,GAAG,WAAA,EAAa,CAAA,EAAG,SAAA,CACzC,UAAU,MAAA,GAAS,CACrB,EAAE,CAAC,CAAA,CAAE,aAAa,CAAA,CAAA;AAEpB,EAAA,IAAI,SAAA,CAAU,CAAC,CAAA,CAAE,CAAC,CAAA,EAAG;AACnB,IAAA,OAAO,CAAA,EAAG,SAAA,CAAU,CAAC,CAAA,CAAE,CAAC,CAAA,CAAE,WAAA,EAAa,CAAA,EAAG,UAAU,CAAC,CAAA,CAAE,CAAC,CAAA,CAAE,aAAa,CAAA,CAAA;AAAA,EACzE;AACA,EAAA,OAAO,GAAG,SAAA,CAAU,CAAC,EAAE,CAAC,CAAA,CAAE,aAAa,CAAA,CAAA;AACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC0CO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,KAAA,GAAQ,OAAwB,IAAI,CAAA;AAC1C,IAAA,MAAM,MAAA,GAAS,OAAyB,IAAI,CAAA;AAC5C,IAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5D,IAAA,MAAM,oBAAA,GAAuB,EAAA,CAAGA,gBAAA,CAAO,aAAa,GAAG,SAAA,EAAW;AAAA,MAChE,CAACA,iBAAO,CAAA,EAAG,IAAI,EAAE,CAAC,GAAG,QAAQ,IAAA,KAAS;AAAA,KACvC,CAAA;AACD,IAAA,MAAM,yBAAA,GAA4B,EAAA,CAAGA,gBAAA,CAAO,WAAW,CAAA,EAAG;AAAA,MACxD,CAACA,gBAAA,CAAO,SAAS,CAAC,GAAG,CAAC,UAAU,MAAA,KAAW,SAAA;AAAA,MAC3C,CAACA,gBAAA,CAAO,QAAQ,CAAC,GAAG,UAAU,MAAA,KAAW;AAAA,KAC1C,CAAA;AAED,IAAA,MAAM,EAAE,IAAA,EAAM,SAAA,EAAU,GAAI,WAAW,oBAAoB,CAAA;AAC3D,IAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAQ,GAAI,qBAAA,EAAsB;AAChD,IAAA,MAAM,OAAO,SAAA,IAAa,OAAA;AAE1B,IAAA,MAAM,EAAE,UAAA,EAAY,UAAA,EAAY,QAAO,GAAI,kBAAA,CAAmB,OAAO,IAAI,CAAA;AAEzE,IAAA,MAAM,cAAA,GAAiB;AAAA,MACrB,uCAAuC,KAAA,IAAS,UAAA;AAAA,MAChD,iCAAiC,KAAA,IAAS,UAAA;AAAA,MAC1C,mCAAmC,KAAA,IAAS,MAAA;AAAA,MAC5C,GAAG;AAAA,KACL;AAEA,IAAA,MAAM,0BAAA,GAA6B,QAAQ,MAAM;AAC/C,MAAA,IAAI,SAAS,MAAA,EAAQ;AACnB,QAAA,IAAI,KAAA,EAAO;AACT,UAAA,OAAO,UAAU,UAAU,CAAA,CAAE,QAAA,CAAS,EAAE,EAAE,WAAA,EAAY;AAAA,QACxD;AAAA,MACF;AACA,MAAA,OAAO,oCAAA;AAAA,IACT,CAAA,EAAG,CAAC,KAAA,EAAO,IAAA,EAAM,UAAU,CAAC,CAAA;AAE5B,IAAA,MAAM,qBAAA,GAAwB;AAAA,MAC5B,iCAAA,EAAmC;AAAA,KACrC;AAEA,IAAA,MAAM,YAAA,GAAe,MAAA;AACrB,IAAA,MAAM,MAAA,GAAS,CAAC,IAAA,EAAM,YAAY,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAG5D,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,kBAAA,CAAmB,KAAK,CAAA;AAAA,MAC1B;AAAA,IACF,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAIV,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,KAAA,IAAS,MAAA,CAAO,OAAA,IAAW,MAAA,CAAO,QAAQ,QAAA,EAAU;AACtD,QAAA,MAAM,GAAA,GAAM,IAAI,KAAA,EAAM;AACtB,QAAA,GAAA,CAAI,OAAA,GAAU,MAAM,kBAAA,CAAmB,IAAI,CAAA;AAC3C,QAAA,GAAA,CAAI,GAAA,GAAM,KAAA;AAAA,MACZ;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,oBAAA;AAAA,QACX,KAAA,EAAO,cAAA;AAAA,QACP,UAAA,EAAS,YAAA;AAAA,QACR,GAAG,IAAA;AAAA,QACJ,GAAA,EAAK,YAAA,CAAa,CAAC,KAAA,EAAO,GAAG,CAAC,CAAA;AAAA,QAE7B,QAAA,EAAA;AAAA,UAAA,KAAA,IAAS,CAAC,eAAA,mBACT,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWA,iBAAO,KAAK,CAAA;AAAA,cACvB,aAAA,EAAW,IAAA;AAAA,cACX,GAAA,EAAK,KAAA;AAAA,cACL,GAAA,EAAK,IAAA;AAAA,cACL,OAAA,EAAS,MAAM,kBAAA,CAAmB,IAAI,CAAA;AAAA,cACtC,GAAA,EAAK;AAAA;AAAA,cAEL,QAAA,mBACF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWA,iBAAO,SAAS,CAAA,EAAG,aAAA,EAAW,IAAA,EAC5C,oBACH,CAAA,mBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,MAAC,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,UAGpB,MAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAW,IAAA;AAAA,cACX,SAAA,EAAW,yBAAA;AAAA,cACX,KAAA,EAAO;AAAA;AAAA,WACT;AAAA,0BAGF,GAAA,CAAC,UAAQ,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KAClB;AAAA,EAEJ;AACF,CAAA;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;ACpIlB,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,OAAO,QAAA,EAAU,GAAG,MAAK,GAAI,cAAA;AACrD,IAAA,MAAM,WAAA,GAAc,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AAC7C,IAAA,MAAM,YAAA,GAAA,CACH,cAAA,CAAe,WAAA,CAAY,CAAC,CAAC,KAAK,WAAA,CAAY,CAAC,CAAA,CAAE,KAAA,CAAM,IAAA,KAAS,QAAA;AACnE,IAAA,MAAM,aAAA,GAAgB,GAAA,GAAM,GAAA,GAAM,WAAA,CAAY,MAAA,GAAS,KAAA;AAEvD,IAAA,MAAM,aAAA,GAAgB,GAAA,IAAO,WAAA,CAAY,MAAA,GAAS,GAAA;AAElD,IAAA,MAAM,qBAAA,GAAwB,EAAA,CAAG,MAAA,CAAO,cAAc,GAAG,SAAA,EAAW;AAAA,MAClE,CAAC,MAAA,CAAO,CAAA,EAAG,YAAY,CAAA,CAAE,CAAC,GAAG;AAAA,KAC9B,CAAA;AAED,IAAA,MAAM,4BAAA,GAA+B,EAAA;AAAA,MACnC,iBAAiB,sBAAsB,CAAA;AAAA,MACvC;AAAA,QACE,CAAC,gBAAA,CAAiB,mBAAmB,CAAC,GACpC,iBAAiB,aAAA,GAAgB;AAAA;AACrC,KACF;AAEA,IAAA,MAAM,aAAA,GAAgB;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG;AAAA,KACL;AACA,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,qBAAA;AAAA,QACX,KAAA,EAAO,aAAA;AAAA,QACP,UAAA,EAAS,cAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,WAAA,CAAY,GAAA,CAAI,CAAC,KAAA,EAAO,CAAA,KAAM;AAC7B,YAAA,IAAI,OAAA,GAAU,KAAA;AACd,YAAA,IAAI,cAAA,CAAe,KAAK,CAAA,EAAG;AACzB,cAAA,MAAM,MAAA,GAAS,YAAY,MAAA,GAAS,CAAA;AACpC,cAAA,MAAM,MAAA,GAAwB;AAAA,gBAC5B,GAAG,MAAM,KAAA,CAAM,KAAA;AAAA,gBACf,MAAA,EAAQ;AAAA,eACV;AACA,cAAA,OAAA,GAAU,aAAa,KAAA,EAAuB;AAAA,gBAC5C,KAAA,EAAO;AAAA,eACR,CAAA;AAAA,YACH;AAEA,YAAA,IAAI,CAAC,KAAK,OAAO,OAAA;AACjB,YAAA,IAAI,CAAA,GAAI,KAAK,OAAO,OAAA;AACpB,YAAA,OAAO,IAAA;AAAA,UACT,CAAC,CAAA;AAAA,UACA,iBAAiB,GAAA,oBAChB,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,4BAAA;AAAA,cACX,IAAA,EAAM,IAAI,aAAa,CAAA,CAAA;AAAA,cACvB,QAAA,EAAU,IAAI,aAAa,CAAA,CAAA;AAAA,cAC3B,IAAA,EAAM;AAAA;AAAA;AACR;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;ACxEnB,MAAM,SAAS,MAAA,CAAO,MAAA;AAAA,EAC3B,UAAA,CAAyC,SAAS,WAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AACxE,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,GAAG,MAAK,GAAI,cAAA;AAEjC,IAAA,MAAM,eAAA,GAAkB,QAAQ,MAAM;AACpC,MAAA,OAAO;AAAA,QACL,GAAG,YAAA;AAAA,QACH,GAAG;AAAA,OACL;AAAA,IACF,CAAA,EAAG,CAAC,YAAA,EAAc,KAAK,CAAC,CAAA;AAExB,IAAA,MAAM,QAAA,GAAW,WAAW,IAAI,CAAA;AAEhC,IAAA,uBACE,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,eAAA;AAAA,QACP,UAAA,EAAS,QAAA;AAAA,QACT,IAAA;AAAA,QACA,GAAA;AAAA,QACA,UAAU,IAAA,CAAK,IAAA,KAAS,OAAA,GAAU,QAAA,GAAW,CAAC,CAAA,GAAI,QAAA;AAAA,QACjD,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ,CAAC,CAAA;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBE,KAAA,EAAO;AAAA;AAEX;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

package/dist/Avatar.css

@@ -1,7 +1,6 @@
-.anvil2 {._avatar-group_1faog_1 {
+.anvil2 {._avatar-group_1op2x_1 {
   --a2-mod-avatar-group-margin-inline-start: calc(var(--a2-size-2, 0.5rem) * -1);
   --a2-mod-avatar-group-padding-inline-start: var(--a2-size-4, 1rem);
-  all: unset;
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -13,21 +12,21 @@
   box-sizing: border-box;
   display: flex;
   padding-inline-start: var(--a2-mod-avatar-group-padding-inline-start);
-}._avatar-group_1faog_1 > span, ._avatar-group_1faog_1 > div, ._avatar-group_1faog_1 > button {
+}._avatar-group_1op2x_1 > span, ._avatar-group_1op2x_1 > div, ._avatar-group_1op2x_1 > button {
   --a2-mod-avatar-margin-inline-start: var(
     --a2-mod-avatar-group-margin-inline-start
   );
-}._small_1faog_23 {
+}._small_1op2x_22 {
   --a2-mod-avatar-group-margin-inline-start: calc(var(--a2-size-1, 0.25rem) * -1);
   --a2-mod-avatar-group-padding-inline-start: var(--a2-size-1, 0.25rem);
-}._medium_1faog_28 {
+}._medium_1op2x_27 {
   --a2-mod-avatar-group-margin-inline-start: calc(var(--a2-size-2, 0.5rem) * -1);
   --a2-mod-avatar-group-padding-inline-start: var(--a2-size-2, 0.5rem);
-}._large_1faog_33 {
+}._large_1op2x_32 {
   --a2-mod-avatar-group-margin-inline-start: calc(var(--a2-size-3, 0.75rem) * -1);
   --a2-mod-avatar-group-padding-inline-start: var(--a2-size-3, 0.75rem);
 }
-}.anvil2 {._avatar-base_bvbpu_1 {
+}.anvil2 {._avatar-base_1orn6_1 {
   --a2-mod-avatar-font-size: var(--a2-font-size-200, 0.75rem);
   --a2-mod-avatar-font-size-10-plus-overflow: var(--a2-font-size-100, 0.625rem);
   --a2-mod-avatar-indicator-bg-color: var(--a2-avatar-indicator-background-color-default, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
@@ -36,7 +35,6 @@
   --a2-mod-avatar-margin-inline-start: 0;
   --a2-mod-avatar-size: var(--a2-size-8, 2rem);
   --a2-inline-avatar-border-color: var(--a2-color-neutral-0, #ffffff);
-  all: unset;
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -62,20 +60,20 @@
   position: relative;
   transition: box-shadow var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1)), background-color var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1)), outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
   width: var(--a2-mod-avatar-size);
-}._avatar-base_bvbpu_1[data-interactive=focus-visible], ._avatar-base_bvbpu_1:focus-visible {
+}._avatar-base_1orn6_1[data-interactive=focus-visible], ._avatar-base_1orn6_1:focus-visible {
   outline-width: var(--a2-size-half, 0.125rem);
 }@media (prefers-reduced-motion: reduce) {
-  ._avatar-base_bvbpu_1 {
+  ._avatar-base_1orn6_1 {
     transition-duration: 0.01ms !important;
   }
-}._initial_bvbpu_46 {
+}._initial_1orn6_45 {
   align-items: center;
   display: flex;
   height: 100%;
   justify-content: center;
   overflow: hidden;
   width: 100%;
-}._img_bvbpu_55 {
+}._img_1orn6_54 {
   border-radius: var(--a2-border-radius-circular, 100%);
   display: inline-flex;
   height: 100%;
@@ -84,7 +82,7 @@
   overflow: hidden;
   width: 100%;
   z-index: 0;
-}._indicator_bvbpu_65 {
+}._indicator_1orn6_64 {
   background-color: var(--a2-mod-avatar-indicator-bg-color);
   border: var(--a2-size-quarter, 0.0625rem) solid var(--a2-inline-avatar-border-color, var(--a2-avatar-border-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)))));
   border-radius: var(--a2-border-radius-circular, 100%);
@@ -95,25 +93,25 @@
   inset-inline-end: calc(var(--a2-size-quarter, 0.0625rem) * -1);
   position: absolute;
   width: var(--a2-mod-avatar-indicator-size);
-}._online_bvbpu_78 {
+}._online_1orn6_77 {
   --a2-mod-avatar-indicator-bg-color: var(--a2-avatar-indicator-background-color-online, var(--a2-status-color-success, light-dark(var(--a2-color-green-600, #077e50), var(--a2-color-green-400, #0bd085))));
-}._offline_bvbpu_82 {
+}._offline_1orn6_81 {
   box-shadow: inset 0 0 0 var(--a2-mod-avatar-indicator-offline-shadow-width) var(--a2-avatar-indicator-background-color-offline, var(--a2-background-color-disabled, light-dark(var(--a2-color-neutral-600, #545454), var(--a2-color-neutral-500, #707070))));
-}._xsmall_bvbpu_86 {
+}._xsmall_1orn6_85 {
   --a2-mod-avatar-size: var(--a2-size-4, 1rem);
   --a2-mod-avatar-indicator-size: var(--a2-size-1, 0.25rem);
   --a2-mod-avatar-indicator-offline-shadow-width: 0.0625rem;
-}._small_bvbpu_92 {
+}._small_1orn6_91 {
   --a2-mod-avatar-size: var(--a2-size-6, 1.5rem);
   --a2-mod-avatar-indicator-size: var(--a2-size-2, 0.5rem);
   --a2-mod-avatar-indicator-offline-shadow-width: 0.09375rem;
-}._large_bvbpu_98 {
+}._large_1orn6_97 {
   --a2-mod-avatar-font-size: var(--a2-font-size-500, 1.25rem);
   --a2-mod-avatar-font-size-10-plus-overflow: var(--a2-font-size-400, 1rem);
   --a2-mod-avatar-size: var(--a2-size-12, 3rem);
   --a2-mod-avatar-indicator-size: var(--a2-size-4, 1rem);
   --a2-mod-avatar-indicator-offline-shadow-width: 0.15625rem;
-}._overflow-ten-plus_bvbpu_106 {
+}._overflow-ten-plus_1orn6_105 {
   --a2-mod-avatar-font-size: var(--a2-mod-avatar-font-size-10-plus-overflow);
 }
 }

package/dist/Avatar.d.ts

@@ -1,6 +1 @@
-export * from './components/Avatar/index'
-export {}
-import _default from './components/Avatar/index'
-export default _default
-export * from './components/Avatar/index'
 export {}

package/dist/Avatar.js

@@ -1,3 +1,3 @@
-export { A as Avatar, A as default } from './Avatar-BmNcLUg-.js';
-export { A as AvatarGroup } from './Avatar-Cw8B8xZV.js';
+export { A as Avatar, A as default } from './Avatar-B_cRQqKR.js';
+export { A as AvatarGroup } from './Avatar-FDHyqiCy.js';
 //# sourceMappingURL=Avatar.js.map

package/dist/Badge-DtUI2AEk.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { c as cx } from './index-De1g9FRV.js';
+import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+
+import './Badge.css';const badge = "_badge_r4vxw_1";
+const empty = "_empty_r4vxw_40";
+const styles = {
+	badge: badge,
+	empty: empty
+};
+
+const Badge = forwardRef((props, ref) => {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    offset,
+    children,
+    style,
+    className,
+    "aria-label": ariaLabel,
+    ...rest
+  } = componentProps;
+  const classNames = cx(styles["badge"], className, {
+    [styles.empty]: !children
+  });
+  const offsetX = offset?.x ?? `0px`;
+  const offsetY = offset?.y ?? `0px`;
+  const iStyle = {
+    ...style,
+    ...layoutStyles,
+    "--a2-inline-badge-offset-y": offsetY,
+    "--a2-inline-badge-offset-x": offsetX
+  };
+  return /* @__PURE__ */ jsxs(
+    "sup",
+    {
+      className: classNames,
+      style: iStyle,
+      "data-anv": "badge",
+      ...rest,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx(SrOnly, { children: ariaLabel }),
+        children
+      ]
+    }
+  );
+});
+Badge.displayName = "Badge";
+
+export { Badge as B };
+//# sourceMappingURL=Badge-DtUI2AEk.js.map

package/dist/Badge-DtUI2AEk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge-DtUI2AEk.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Badge.module.scss\";\nimport { SrOnly } from \"../SrOnly\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { LayoutUtilProps } from \"../../types\";\n\n/**\n * Props for the Badge component\n * @extends ComponentPropsWithoutRef<\"sup\">\n * @extends Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\">\n */\nexport type BadgeProps = ComponentPropsWithoutRef<\"sup\"> &\n  Omit<LayoutUtilProps, \"flex\" | \"flexBasis\" | \"flexGrow\" | \"flexShrink\"> & {\n    /**\n     * Optional offset configuration for badge positioning\n     */\n    offset?: {\n      /**\n       * Horizontal offset from the default position\n       * @default \"0px\"\n       */\n      x?: string;\n      /**\n       * Vertical offset from the default position\n       * @default \"0px\"\n       */\n      y?: string;\n    };\n  };\n\n/**\n * Badge component for displaying small status indicators or counts.\n *\n * Features:\n * - Positioned as a superscript element\n * - Customizable offset positioning\n * - Screen reader support with aria-label\n * - Empty state styling when no content\n * - Supports layout utilities for positioning\n * - Accessible with proper ARIA roles\n *\n * @example\n * <Button>\n *   Notifications\n *   <Badge aria-label=\"3 new messages\">3</Badge>\n * </Button>\n */\nexport const Badge = forwardRef<HTMLScriptElement, BadgeProps>((props, ref) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n  const {\n    offset,\n    children,\n    style,\n    className,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = componentProps;\n  const classNames = cx(styles[\"badge\"], className, {\n    [styles.empty]: !children,\n  });\n  const offsetX = offset?.x ?? `0px`;\n  const offsetY = offset?.y ?? `0px`;\n  const iStyle = {\n    ...style,\n    ...layoutStyles,\n    \"--a2-inline-badge-offset-y\": offsetY,\n    \"--a2-inline-badge-offset-x\": offsetX,\n  };\n\n  return (\n    <sup\n      className={classNames}\n      style={iStyle}\n      data-anv=\"badge\"\n      {...rest}\n      ref={ref}\n    >\n      <SrOnly>{ariaLabel}</SrOnly>\n      {children}\n    </sup>\n  );\n});\nBadge.displayName = \"Badge\";\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgDO,MAAM,KAAA,GAAQ,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC7E,EAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,cAAA;AACJ,EAAA,MAAM,UAAA,GAAa,EAAA,CAAG,MAAA,CAAO,OAAO,GAAG,SAAA,EAAW;AAAA,IAChD,CAAC,MAAA,CAAO,KAAK,GAAG,CAAC;AAAA,GAClB,CAAA;AACD,EAAA,MAAM,OAAA,GAAU,QAAQ,CAAA,IAAK,CAAA,GAAA,CAAA;AAC7B,EAAA,MAAM,OAAA,GAAU,QAAQ,CAAA,IAAK,CAAA,GAAA,CAAA;AAC7B,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,GAAG,KAAA;AAAA,IACH,GAAG,YAAA;AAAA,IACH,4BAAA,EAA8B,OAAA;AAAA,IAC9B,4BAAA,EAA8B;AAAA,GAChC;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,MACX,KAAA,EAAO,MAAA;AAAA,MACP,UAAA,EAAS,OAAA;AAAA,MACR,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAQ,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,QAClB;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AACD,KAAA,CAAM,WAAA,GAAc,OAAA;;;;"}