@servicetitan/anvil2 2.9.1 → 3.0.0

package/dist/Avatar-B4hRHku9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar-B4hRHku9.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,\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":"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"}

package/dist/{Avatar-ChybzixS.js → Avatar-NbFc4Ovc.js}

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { a as Avatar$1, A as AvatarGroup } from './Avatar-BckUfs1N.js';
+import { a as Avatar$1, A as AvatarGroup } from './Avatar-B4hRHku9.js';
 import { forwardRef } from 'react';
 
 const Avatar = Object.assign(
@@ -32,4 +32,4 @@ const Avatar = Object.assign(
 Avatar.displayName = Avatar$1.displayName;
 
 export { Avatar as A };
-//# sourceMappingURL=Avatar-ChybzixS.js.map
+//# sourceMappingURL=Avatar-NbFc4Ovc.js.map

package/dist/{Avatar-ChybzixS.js.map → Avatar-NbFc4Ovc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Avatar-ChybzixS.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;;;;"}
+{"version":3,"file":"Avatar-NbFc4Ovc.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.css

@@ -1,180 +1,119 @@
-@layer starter, reset, base, state, application;
-@layer reset {
-  ._avatar-group_1gdlr_2 {
-    all: unset;
-    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
-    font-size: 100%;
-    color: var(--foreground-color, #141414);
-    margin: 0;
-    padding: 0;
-    border-style: none;
-    border-width: 0;
-    border-color: transparent;
-    box-sizing: border-box;
-    display: flex;
-  }
-}
-@layer base {
-  ._avatar-group_1gdlr_2 {
-    padding-inline-start: 1rem;
-  }
-  ._avatar-group_1gdlr_2._small_1gdlr_20 {
-    padding-inline-start: 0.25rem;
-  }
-  ._avatar-group_1gdlr_2._small_1gdlr_20 > * {
-    margin-inline-start: -0.25rem;
-  }
-  ._avatar-group_1gdlr_2._medium_1gdlr_26 {
-    padding-inline-start: 0.5rem;
-  }
-  ._avatar-group_1gdlr_2._medium_1gdlr_26 > * {
-    margin-inline-start: -0.5rem;
-  }
-  ._avatar-group_1gdlr_2._large_1gdlr_32 {
-    padding-inline-start: 0.75rem;
-  }
-  ._avatar-group_1gdlr_2._large_1gdlr_32 > * {
-    margin-inline-start: -0.75rem;
-  }
-}@layer starter, reset, base, state, application;
-@layer reset {
-  ._avatar-base_bnoyf_2 {
-    all: unset;
-    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
-    font-size: 100%;
-    color: var(--foreground-color, #141414);
-    margin: 0;
-    padding: 0;
-    border-style: none;
-    border-width: 0;
-    border-color: transparent;
-    box-sizing: border-box;
-    display: inline-flex;
-  }
+.anvil2{@layer starter, reset, base, state, application;._avatar-group_1faog_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;
+  margin: 0;
+  padding: 0;
+  border-style: none;
+  border-width: 0;
+  border-color: transparent;
+  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 {
+  --a2-mod-avatar-margin-inline-start: var(
+    --a2-mod-avatar-group-margin-inline-start
+  );
+}._small_1faog_23 {
+  --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 {
+  --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 {
+  --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);
 }
-@layer base {
-  ._avatar-base_bnoyf_2 {
-    position: relative;
-    width: 2rem;
-    height: 2rem;
-    justify-content: center;
-    align-items: center;
-    border-radius: 100%;
-    border: 0.0625rem solid var(--int-border-color, #ffffff);
-    background-color: var(--int-bg-color, var(--background-color-stronger, #eeeeee));
-    font-size: 0.75rem;
-    color: var(--int-font-color, var(--foreground-color, #141414));
-    font-weight: bold;
-    outline-offset: 0.125rem;
-    outline: 0 solid var(--focus-ring-color, #0265DC);
-    transition: box-shadow 200ms cubic-bezier(0, 0, 0.4, 1), background-color 200ms cubic-bezier(0, 0, 0.4, 1), outline 200ms cubic-bezier(0, 0, 0.4, 1);
-  }
-  ._avatar-base_bnoyf_2::before {
-    content: none;
-    position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    z-index: 1;
-    border-radius: 100%;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    ._avatar-base_bnoyf_2 {
-      transition-duration: 0.01ms !important;
-    }
-  }
-  ._avatar-base_bnoyf_2 ._initial_bnoyf_49 {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-  }
-  ._avatar-base_bnoyf_2 ._img_bnoyf_57 {
-    display: inline-flex;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 0;
-    border-radius: 100%;
-    -o-object-fit: cover;
-       object-fit: cover;
-  }
-  ._avatar-base_bnoyf_2 ._indicator_bnoyf_66 {
-    width: 0.75rem;
-    height: 0.75rem;
-    border-radius: 100%;
-    border: 0.0625rem solid var(--int-border-color, #ffffff);
-    background-color: var(--background-color, #ffffff);
-    display: inline-block;
-    position: absolute;
-    box-sizing: border-box;
-    inset-block-end: -0.0625rem;
-    inset-inline-end: -0.0625rem;
-  }
+}.anvil2{@layer starter, reset, base, state, application;._avatar-base_bvbpu_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))));
+  --a2-mod-avatar-indicator-offline-shadow-width: 0.125rem;
+  --a2-mod-avatar-indicator-size: var(--a2-size-3, 0.75rem);
+  --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;
+  margin: 0;
+  padding: 0;
+  border-style: none;
+  border-width: 0;
+  border-color: transparent;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--a2-inline-avatar-background-color, var(--a2-avatar-background-color, var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040)))));
+  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%);
+  color: var(--a2-inline-avatar-font-color, var(--a2-avatar-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)))));
+  font-size: var(--a2-mod-avatar-font-size);
+  font-weight: bold;
+  height: var(--a2-mod-avatar-size);
+  justify-content: center;
+  margin-inline-start: var(--a2-mod-avatar-margin-inline-start);
+  outline: 0 solid var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))));
+  outline-offset: var(--a2-size-half, 0.125rem);
+  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 {
+  outline-width: var(--a2-size-half, 0.125rem);
+}@media (prefers-reduced-motion: reduce) {
+  ._avatar-base_bvbpu_1 {
+    transition-duration: 0.01ms !important;
+  }
+}._initial_bvbpu_46 {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  overflow: hidden;
+  width: 100%;
+}._img_bvbpu_55 {
+  border-radius: var(--a2-border-radius-circular, 100%);
+  display: inline-flex;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  overflow: hidden;
+  width: 100%;
+  z-index: 0;
+}._indicator_bvbpu_65 {
+  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%);
+  box-sizing: border-box;
+  display: inline-block;
+  height: var(--a2-mod-avatar-indicator-size);
+  inset-block-end: calc(var(--a2-size-quarter, 0.0625rem) * -1);
+  inset-inline-end: calc(var(--a2-size-quarter, 0.0625rem) * -1);
+  position: absolute;
+  width: var(--a2-mod-avatar-indicator-size);
+}._online_bvbpu_78 {
+  --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 {
+  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 {
+  --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 {
+  --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 {
+  --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 {
+  --a2-mod-avatar-font-size: var(--a2-mod-avatar-font-size-10-plus-overflow);
 }
-@layer state {
-  ._avatar-base_bnoyf_2 ._indicator_bnoyf_66._online_bnoyf_80 {
-    background-color: var(--status-color-success, #007A4D);
-  }
-  ._avatar-base_bnoyf_2 ._indicator_bnoyf_66._offline_bnoyf_83 {
-    background-color: var(--background-color, #ffffff);
-    box-shadow: inset 0 0 0 0.125rem var(--background-color-disabled, #606162);
-  }
-  ._avatar-base_bnoyf_2._overflow-ten-plus_bnoyf_87 {
-    font-size: 0.625rem;
-  }
-  ._avatar-base_bnoyf_2._xsmall_bnoyf_90 {
-    width: 1rem;
-    height: 1rem;
-    font-size: 0.75rem;
-  }
-  ._avatar-base_bnoyf_2._xsmall_bnoyf_90._overflow-ten-plus_bnoyf_87 {
-    font-size: 0.625rem;
-  }
-  ._avatar-base_bnoyf_2._xsmall_bnoyf_90 ._indicator_bnoyf_66 {
-    width: 0.25rem;
-    height: 0.25rem;
-  }
-  ._avatar-base_bnoyf_2._xsmall_bnoyf_90 ._indicator_bnoyf_66._offline_bnoyf_83 {
-    box-shadow: inset 0 0 0 0.0625rem var(--background-color-disabled, #606162);
-  }
-  ._avatar-base_bnoyf_2._small_bnoyf_105 {
-    width: 1.5rem;
-    height: 1.5rem;
-    font-size: 0.75rem;
-  }
-  ._avatar-base_bnoyf_2._small_bnoyf_105._overflow-ten-plus_bnoyf_87 {
-    font-size: 0.625rem;
-  }
-  ._avatar-base_bnoyf_2._small_bnoyf_105 ._indicator_bnoyf_66 {
-    width: 0.5rem;
-    height: 0.5rem;
-  }
-  ._avatar-base_bnoyf_2._small_bnoyf_105 ._indicator_bnoyf_66._offline_bnoyf_83 {
-    box-shadow: inset 0 0 0 0.09375rem var(--background-color-disabled, #606162);
-  }
-  ._avatar-base_bnoyf_2._large_bnoyf_120 {
-    width: 3rem;
-    height: 3rem;
-    font-size: 1.25rem;
-  }
-  ._avatar-base_bnoyf_2._large_bnoyf_120._overflow-ten-plus_bnoyf_87 {
-    font-size: 1rem;
-  }
-  ._avatar-base_bnoyf_2._large_bnoyf_120 ._indicator_bnoyf_66 {
-    width: 1rem;
-    height: 1rem;
-  }
-  ._avatar-base_bnoyf_2._large_bnoyf_120 ._indicator_bnoyf_66._offline_bnoyf_83 {
-    box-shadow: inset 0 0 0 0.15625rem var(--background-color-disabled, #606162);
-  }
-  ._avatar-base_bnoyf_2[data-interactive=focus-visible], ._avatar-base_bnoyf_2:focus-visible {
-    outline-width: 0.125rem;
-  }
 }

package/dist/Avatar.js

@@ -1,3 +1,3 @@
-export { A as Avatar, A as default } from './Avatar-ChybzixS.js';
-export { A as AvatarGroup } from './Avatar-BckUfs1N.js';
+export { A as Avatar, A as default } from './Avatar-NbFc4Ovc.js';
+export { A as AvatarGroup } from './Avatar-B4hRHku9.js';
 //# sourceMappingURL=Avatar.js.map

package/dist/{Badge-C2W7Dls9.js → Badge-C_wTvtnB.js}

@@ -1,11 +1,11 @@
 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-eUpYGpAT.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
+import { S as SrOnly } from './SrOnly-pnf8ajnh.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
 
-import './Badge.css';const badge = "_badge_1rwnm_2";
-const empty = "_empty_1rwnm_43";
+import './Badge.css';const badge = "_badge_n9xub_1";
+const empty = "_empty_n9xub_41";
 const styles = {
 	badge: badge,
 	empty: empty
@@ -29,8 +29,8 @@ const Badge = forwardRef((props, ref) => {
   const iStyle = {
     ...style,
     ...layoutStyles,
-    "--offsetY": offsetY,
-    "--offsetX": offsetX
+    "--a2-inline-badge-offset-y": offsetY,
+    "--a2-inline-badge-offset-x": offsetX
   };
   return /* @__PURE__ */ jsxs(
     "sup",
@@ -50,4 +50,4 @@ const Badge = forwardRef((props, ref) => {
 Badge.displayName = "Badge";
 
 export { Badge as B };
-//# sourceMappingURL=Badge-C2W7Dls9.js.map
+//# sourceMappingURL=Badge-C_wTvtnB.js.map

package/dist/{Badge-C2W7Dls9.js.map → Badge-C_wTvtnB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Badge-C2W7Dls9.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    \"--offsetY\": offsetY,\n    \"--offsetX\": 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,WAAA,EAAa,OAAA;AAAA,IACb,WAAA,EAAa;AAAA,GACf;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;;;;"}
+{"version":3,"file":"Badge-C_wTvtnB.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;;;;"}

package/dist/Badge.css

@@ -1,52 +1,44 @@
-@layer starter, reset, base, state, application;
-@layer reset {
-  ._badge_1rwnm_2 {
-    all: unset;
-    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
-    font-size: 100%;
-    color: var(--foreground-color, #141414);
-    margin: 0;
-    padding: 0;
-    border-style: none;
-    border-width: 0;
-    border-color: transparent;
-    box-sizing: border-box;
-    display: revert-layer;
-  }
+.anvil2{@layer starter, reset, base, state, application;._badge_n9xub_1 {
+  --a2-mod-badge-background-color: var(--a2-badge-background-color, var(--a2-background-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d)))));
+  --a2-mod-badge-foreground-color: var(--a2-badge-foreground-color, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
+  --a2-mod-badge-min-size: var(--a2-size-5, 1.25rem);
+  --a2-mod-badge-transform-origin: top right;
+  all: unset;
+  font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
+  font-size: 100%;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border-style: none;
+  border-width: 0;
+  border-color: transparent;
+  box-sizing: border-box;
+  display: revert-layer;
+  align-items: center;
+  background-color: var(--a2-mod-badge-background-color);
+  border-radius: var(--a2-border-radius-xlarge, var(--a2-radius-8, 1.5rem));
+  color: var(--a2-mod-badge-foreground-color);
+  display: inline-flex;
+  font-size: var(--a2-font-size-200, 0.75rem);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  justify-content: center;
+  line-height: 1em;
+  min-height: var(--a2-mod-badge-min-size);
+  min-width: var(--a2-mod-badge-min-size);
+  padding-block: var(--a2-size-1, 0.25rem);
+  padding-inline: calc(var(--a2-size-1, 0.25rem) * 1.5);
+  position: absolute;
+  transform: translateY(calc(-50% + var(--a2-inline-badge-offset-y) - var(--a2-size-quarter, 0.0625rem))) translateX(calc(50% + var(--a2-inline-badge-offset-x) + var(--a2-size-quarter, 0.0625rem)));
+  transform-origin: var(--a2-mod-badge-transform-origin);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}[dir=rtl] ._badge_n9xub_1 {
+  --a2-mod-badge-transform-origin: top left;
+  transform: translateY(calc(-50% + var(--a2-inline-badge-offset-y) - var(--a2-size-quarter, 0.0625rem))) translateX(calc(-50% - (var(--a2-inline-badge-offset-x) - var(--a2-size-quarter, 0.0625rem))));
+}._empty_n9xub_41 {
+  --a2-mod-badge-min-size: var(--a2-size-3, 0.75rem);
+  aspect-ratio: 1;
 }
-@layer base {
-  ._badge_1rwnm_2 {
-    background-color: var(--background-color-danger, var(--background-color-danger, #e13212));
-    color: var(--foreground-color-on-danger, var(--foreground-color-on-danger, #ffffff));
-    border-radius: 1.5rem;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 0.75rem;
-    padding-block: 0.25rem;
-    padding-inline: 0.375rem;
-    min-height: 1.25rem;
-    min-width: 1.25rem;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    position: absolute;
-    line-height: 1em;
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    transform-origin: top right;
-    transform: translateY(calc(-50% + var(--offsetY) - 0.0625rem)) translateX(calc(50% + var(--offsetX) + 0.0625rem));
-  }
-}
-@layer state {
-  [dir=rtl] ._badge_1rwnm_2 {
-    transform-origin: top left;
-    transform: translateY(calc(-50% + var(--offsetY) - 0.0625rem)) translateX(calc(-50% - (var(--offsetX) - 0.0625rem)));
-  }
-  ._badge_1rwnm_2._empty_1rwnm_43 {
-    min-height: 0.75rem;
-    min-width: 0.75rem;
-    height: 0.75rem;
-    width: 0.75rem;
-  }
 }

package/dist/Badge.js

@@ -1,2 +1,2 @@
-export { B as Badge, B as default } from './Badge-C2W7Dls9.js';
+export { B as Badge, B as default } from './Badge-C_wTvtnB.js';
 //# sourceMappingURL=Badge.js.map

package/dist/{Breadcrumbs-ojgYVZwe.js → Breadcrumbs-CYmciJ1D.js}

@@ -2,17 +2,17 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { forwardRef, Children, cloneElement } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
-import { L as Link } from './Link-jTvzyXca.js';
-import { T as Text } from './Text-WiS8UZkY.js';
-import { I as Icon } from './Icon-DuIlne4x.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+import { L as Link } from './Link-BUgivkGS.js';
+import { T as Text } from './Text-J5YtSSXY.js';
+import { I as Icon } from './Icon-BMMbp40n.js';
 
 import './Breadcrumbs.css';const SvgChevronRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }));
 
-const breadcrumbs = "_breadcrumbs_1c7ez_2";
+const breadcrumbs = "_breadcrumbs_1dm38_1";
 const styles = {
 	breadcrumbs: breadcrumbs,
-	"breadcrumbs-link": "_breadcrumbs-link_1c7ez_18"
+	"breadcrumbs-link": "_breadcrumbs-link_1dm38_18"
 };
 
 const BreadcrumbsLink = forwardRef((props, ref) => {
@@ -104,4 +104,4 @@ const Breadcrumbs = Object.assign(
 Breadcrumbs.displayName = "Breadcrumbs";
 
 export { Breadcrumbs as B };
-//# sourceMappingURL=Breadcrumbs-ojgYVZwe.js.map
+//# sourceMappingURL=Breadcrumbs-CYmciJ1D.js.map

package/dist/{Breadcrumbs-ojgYVZwe.js.map → Breadcrumbs-CYmciJ1D.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs-ojgYVZwe.js","sources":["../../hammer-icon/mdi/filled/chevron_right.svg","../src/components/Breadcrumbs/BreadcrumbsLink.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgChevronRight = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" }));\nexport default SvgChevronRight;\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Link, Text } from \"../\";\n\nimport styles from \"./Breadcrumbs.module.scss\";\n\n/**\n * Props for the BreadcrumbsLink component\n * @extends ComponentPropsWithoutRef<\"a\">\n * @extends LayoutUtilProps\n */\nexport type BreadcrumbsLinkProps = ComponentPropsWithoutRef<\"a\"> &\n  LayoutUtilProps;\n\n/**\n * BreadcrumbsLink component for individual breadcrumb navigation items.\n *\n * Features:\n * - Renders as a clickable link with secondary appearance\n * - Supports all standard anchor element props\n * - Includes layout utilities for positioning and spacing\n * - Uses small text size for consistent styling\n * - Fully accessible with proper focus management\n * - Automatically applies secondary link styling\n *\n * @example\n * <BreadcrumbsLink href=\"/dashboard\">Dashboard</BreadcrumbsLink>\n */\nexport const BreadcrumbsLink = forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbsLinkProps\n>((props, ref) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n  const { children, className, style, ...rest } = componentProps;\n\n  const classes = cx([styles[\"breadcrumbs-link\"]], className, {});\n\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n  };\n\n  return (\n    <Link\n      tabIndex={0}\n      data-anv=\"breadcrumbs-link\"\n      style={styleCombined}\n      appearance=\"secondary\"\n      className={classes}\n      {...rest}\n      ref={ref}\n    >\n      <Text size=\"small\" inline>\n        {children}\n      </Text>\n    </Link>\n  );\n});\n\nBreadcrumbsLink.displayName = \"BreadcrumbsLink\";\n","import {\n  Children,\n  ComponentPropsWithoutRef,\n  ReactElement,\n  cloneElement,\n  forwardRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport ChevronRight from \"@servicetitan/hammer-icon/mdi/filled/chevron_right.svg\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Icon, Text } from \"../\";\n\nimport styles from \"./Breadcrumbs.module.scss\";\nimport { BreadcrumbsLink, BreadcrumbsLinkProps } from \"./BreadcrumbsLink\";\n\n/**\n * Props for the Breadcrumbs component\n * @extends ComponentPropsWithoutRef<\"nav\">\n * @extends LayoutUtilProps\n */\nexport type BreadcrumbsProps = ComponentPropsWithoutRef<\"nav\"> &\n  LayoutUtilProps & {\n    /**\n     * Breadcrumb links to display. The last child will be rendered as non-clickable text.\n     */\n    children:\n      | ReactElement<BreadcrumbsLinkProps>\n      | ReactElement<BreadcrumbsLinkProps>[];\n  };\n\n/**\n * Breadcrumbs component for displaying navigation hierarchy.\n *\n * Features:\n * - Displays a series of navigation links with chevron separators\n * - Automatically renders the last item as non-clickable text\n * - Includes proper ARIA labeling for accessibility\n * - Supports layout utilities for positioning and spacing\n * - Uses chevron icons as visual separators between links\n * - Responsive design with flexbox layout\n *\n * @example\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/home\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Link href=\"/products\">Products</Breadcrumbs.Link>\n *   <Breadcrumbs.Link href=\"/electronics\">Electronics</Breadcrumbs.Link>\n * </Breadcrumbs>\n */\nexport const Breadcrumbs = Object.assign(\n  forwardRef<HTMLElement, BreadcrumbsProps>(\n    function BreadcrumbsInner(props, ref) {\n      const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n      const { children, className, style, ...rest } = componentProps;\n\n      const classes = cx([styles[\"breadcrumbs\"]], className, {});\n\n      const styleCombined = {\n        ...style,\n        ...layoutStyles,\n      };\n\n      const linkCount = Children.count(children);\n\n      return (\n        <nav\n          data-anv=\"breadcrumbs\"\n          style={styleCombined}\n          className={classes}\n          aria-label=\"Breadcrumb\"\n          {...rest}\n          ref={ref}\n        >\n          {Children.map(children, (link, i) => {\n            if (i + 1 === linkCount) {\n              return (\n                <Text\n                  inline\n                  size=\"small\"\n                  style={{\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  {link.props.children}\n                </Text>\n              );\n            } else {\n              return (\n                <>\n                  {cloneElement(link as ReactElement)}\n                  <Icon svg={ChevronRight} aria-hidden=\"true\" />\n                </>\n              );\n            }\n          })}\n        </nav>\n      );\n    },\n  ),\n  {\n    /**\n     * BreadcrumbsLink component for individual breadcrumb navigation items.\n     *\n     * Features:\n     * - Renders as a clickable link with secondary appearance\n     * - Supports all standard anchor element props\n     * - Includes layout utilities for positioning and spacing\n     * - Uses small text size for consistent styling\n     * - Fully accessible with proper focus management\n     * - Automatically applies secondary link styling\n     *\n     * @example\n     * <Breadcrumbs.Link href=\"/dashboard\">Dashboard</Breadcrumbs.Link>\n     */\n    Link: BreadcrumbsLink,\n  },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"names":["ChevronRight"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs-CYmciJ1D.js","sources":["../../hammer-icon/mdi/filled/chevron_right.svg","../src/components/Breadcrumbs/BreadcrumbsLink.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgChevronRight = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" }));\nexport default SvgChevronRight;\n","import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Link, Text } from \"../\";\n\nimport styles from \"./Breadcrumbs.module.scss\";\n\n/**\n * Props for the BreadcrumbsLink component\n * @extends ComponentPropsWithoutRef<\"a\">\n * @extends LayoutUtilProps\n */\nexport type BreadcrumbsLinkProps = ComponentPropsWithoutRef<\"a\"> &\n  LayoutUtilProps;\n\n/**\n * BreadcrumbsLink component for individual breadcrumb navigation items.\n *\n * Features:\n * - Renders as a clickable link with secondary appearance\n * - Supports all standard anchor element props\n * - Includes layout utilities for positioning and spacing\n * - Uses small text size for consistent styling\n * - Fully accessible with proper focus management\n * - Automatically applies secondary link styling\n *\n * @example\n * <BreadcrumbsLink href=\"/dashboard\">Dashboard</BreadcrumbsLink>\n */\nexport const BreadcrumbsLink = forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbsLinkProps\n>((props, ref) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n  const { children, className, style, ...rest } = componentProps;\n\n  const classes = cx([styles[\"breadcrumbs-link\"]], className, {});\n\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n  };\n\n  return (\n    <Link\n      tabIndex={0}\n      data-anv=\"breadcrumbs-link\"\n      style={styleCombined}\n      appearance=\"secondary\"\n      className={classes}\n      {...rest}\n      ref={ref}\n    >\n      <Text size=\"small\" inline>\n        {children}\n      </Text>\n    </Link>\n  );\n});\n\nBreadcrumbsLink.displayName = \"BreadcrumbsLink\";\n","import {\n  Children,\n  ComponentPropsWithoutRef,\n  ReactElement,\n  cloneElement,\n  forwardRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport ChevronRight from \"@servicetitan/hammer-icon/mdi/filled/chevron_right.svg\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Icon, Text } from \"../\";\n\nimport styles from \"./Breadcrumbs.module.scss\";\nimport { BreadcrumbsLink, BreadcrumbsLinkProps } from \"./BreadcrumbsLink\";\n\n/**\n * Props for the Breadcrumbs component\n * @extends ComponentPropsWithoutRef<\"nav\">\n * @extends LayoutUtilProps\n */\nexport type BreadcrumbsProps = ComponentPropsWithoutRef<\"nav\"> &\n  LayoutUtilProps & {\n    /**\n     * Breadcrumb links to display. The last child will be rendered as non-clickable text.\n     */\n    children:\n      | ReactElement<BreadcrumbsLinkProps>\n      | ReactElement<BreadcrumbsLinkProps>[];\n  };\n\n/**\n * Breadcrumbs component for displaying navigation hierarchy.\n *\n * Features:\n * - Displays a series of navigation links with chevron separators\n * - Automatically renders the last item as non-clickable text\n * - Includes proper ARIA labeling for accessibility\n * - Supports layout utilities for positioning and spacing\n * - Uses chevron icons as visual separators between links\n * - Responsive design with flexbox layout\n *\n * @example\n * <Breadcrumbs>\n *   <Breadcrumbs.Link href=\"/home\">Home</Breadcrumbs.Link>\n *   <Breadcrumbs.Link href=\"/products\">Products</Breadcrumbs.Link>\n *   <Breadcrumbs.Link href=\"/electronics\">Electronics</Breadcrumbs.Link>\n * </Breadcrumbs>\n */\nexport const Breadcrumbs = Object.assign(\n  forwardRef<HTMLElement, BreadcrumbsProps>(\n    function BreadcrumbsInner(props, ref) {\n      const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n      const { children, className, style, ...rest } = componentProps;\n\n      const classes = cx([styles[\"breadcrumbs\"]], className, {});\n\n      const styleCombined = {\n        ...style,\n        ...layoutStyles,\n      };\n\n      const linkCount = Children.count(children);\n\n      return (\n        <nav\n          data-anv=\"breadcrumbs\"\n          style={styleCombined}\n          className={classes}\n          aria-label=\"Breadcrumb\"\n          {...rest}\n          ref={ref}\n        >\n          {Children.map(children, (link, i) => {\n            if (i + 1 === linkCount) {\n              return (\n                <Text\n                  inline\n                  size=\"small\"\n                  style={{\n                    fontWeight: \"bold\",\n                  }}\n                >\n                  {link.props.children}\n                </Text>\n              );\n            } else {\n              return (\n                <>\n                  {cloneElement(link as ReactElement)}\n                  <Icon svg={ChevronRight} aria-hidden=\"true\" />\n                </>\n              );\n            }\n          })}\n        </nav>\n      );\n    },\n  ),\n  {\n    /**\n     * BreadcrumbsLink component for individual breadcrumb navigation items.\n     *\n     * Features:\n     * - Renders as a clickable link with secondary appearance\n     * - Supports all standard anchor element props\n     * - Includes layout utilities for positioning and spacing\n     * - Uses small text size for consistent styling\n     * - Fully accessible with proper focus management\n     * - Automatically applies secondary link styling\n     *\n     * @example\n     * <Breadcrumbs.Link href=\"/dashboard\">Dashboard</Breadcrumbs.Link>\n     */\n    Link: BreadcrumbsLink,\n  },\n);\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"names":["ChevronRight"],"mappings":"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"}