@metamask/design-system-react 0.13.0 → 0.15.0

package/dist/components/AvatarBase/AvatarBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,eAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,+CAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,8CAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,oCAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,iCAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,kCAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n  TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n  (\n    {\n      children,\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarBaseSize.Md,\n      shape = AvatarBaseShape.Circle,\n      asChild,\n      style,\n      hasBorder = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'div';\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n      shape === AvatarBaseShape.Circle\n        ? 'rounded-full'\n        : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n      // Size\n      hasBorder\n        ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n        : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n      // Border\n      hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component ref={ref} className={mergedClassName} style={style} {...props}>\n        {fallbackText ? (\n          <Text\n            variant={TextVariant.BodySm}\n            fontWeight={FontWeight.Medium}\n            color={TextColor.TextMuted}\n            asChild\n            className=\"uppercase\"\n            {...fallbackTextProps}\n          >\n            {/* asChild prop renders Text component as a span, it does not create an additional element */}\n            <span>{fallbackText}</span>\n          </Text>\n        ) : (\n          children\n        )}\n      </Component>\n    );\n  },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}
+{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,uCAAuC;AACxC,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,eAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,+CAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,8CAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,oCAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,iCAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,kCAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n  TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n  TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n  (\n    {\n      children,\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarBaseSize.Md,\n      shape = AvatarBaseShape.Circle,\n      asChild,\n      style,\n      hasBorder = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : 'div';\n\n    const mergedClassName = twMerge(\n      // Base styles\n      'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n      shape === AvatarBaseShape.Circle\n        ? 'rounded-full'\n        : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n      // Size\n      hasBorder\n        ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n        : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n      // Border\n      hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n      // Custom classes\n      className,\n    );\n\n    return (\n      <Component ref={ref} className={mergedClassName} style={style} {...props}>\n        {fallbackText ? (\n          <Text\n            variant={TextVariant.BodySm}\n            fontWeight={FontWeight.Medium}\n            color={TextColor.TextMuted}\n            asChild\n            className=\"uppercase\"\n            {...fallbackTextProps}\n          >\n            {/* asChild prop renders Text component as a span, it does not create an additional element */}\n            <span>{fallbackText}</span>\n          </Text>\n        ) : (\n          children\n        )}\n      </Component>\n    );\n  },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}

package/dist/components/AvatarBase/AvatarBase.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> & {\n  /**\n   * Required prop for the content to be rendered within the AvatarBase\n   * Not required if fallbackText is provided\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional text to display when no children are provided\n   */\n  fallbackText?: string;\n  /**\n   * Optional props to be passed to the Text component when rendering fallback text\n   * Only used when fallbackText is provided and no children\n   */\n  fallbackTextProps?: Partial<\n    React.HTMLAttributes<HTMLSpanElement> & TextProps\n  >;\n  /**\n   * Optional prop for additional CSS classes to be applied to the AvatarBase component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the size of the AvatarBase\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: AvatarBaseSize;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a div element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to control the shape of the AvatarBase\n   *\n   * @default AvatarBaseShape.Circle\n   */\n  shape?: AvatarBaseShape;\n  /**\n   * Optional prop to include the border with the Avatar.\n   * For internal use only\n   *\n   * @default false\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"AvatarBase.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBasePropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> &\n  AvatarBasePropsShared & {\n    /**\n     * Optional test id for querying in tests.\n     */\n    'data-testid'?: string;\n    /**\n     * Optional props to be passed to the Text component when rendering fallback text\n     * Only used when fallbackText is provided and no children\n     */\n    fallbackTextProps?: Partial<\n      React.HTMLAttributes<HTMLSpanElement> & TextProps\n    >;\n    /**\n     * Optional boolean that determines if the component should merge its props onto its immediate child\n     * instead of rendering a div element\n     *\n     * @default false\n     */\n    asChild?: boolean;\n  };\n"]}

package/dist/components/AvatarBase/AvatarBase.types.d.cts

@@ -1,32 +1,16 @@
+import type { AvatarBasePropsShared } from "@metamask/design-system-shared";
 import type { ComponentProps } from "react";
-import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
 import type { TextProps } from "../Text/index.cjs";
-export type AvatarBaseProps = ComponentProps<'div'> & {
+export type AvatarBaseProps = ComponentProps<'div'> & AvatarBasePropsShared & {
     /**
-     * Required prop for the content to be rendered within the AvatarBase
-     * Not required if fallbackText is provided
+     * Optional test id for querying in tests.
      */
-    children?: React.ReactNode;
-    /**
-     * Optional text to display when no children are provided
-     */
-    fallbackText?: string;
+    'data-testid'?: string;
     /**
      * Optional props to be passed to the Text component when rendering fallback text
      * Only used when fallbackText is provided and no children
      */
     fallbackTextProps?: Partial<React.HTMLAttributes<HTMLSpanElement> & TextProps>;
-    /**
-     * Optional prop for additional CSS classes to be applied to the AvatarBase component.
-     * These classes will be merged with the component's default classes using twMerge.
-     */
-    className?: string;
-    /**
-     * Optional prop to control the size of the AvatarBase
-     *
-     * @default AvatarBaseSize.Md
-     */
-    size?: AvatarBaseSize;
     /**
      * Optional boolean that determines if the component should merge its props onto its immediate child
      * instead of rendering a div element
@@ -34,27 +18,5 @@ export type AvatarBaseProps = ComponentProps<'div'> & {
      * @default false
      */
     asChild?: boolean;
-    /**
-     * Optional CSS styles to be applied to the component.
-     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Optional prop to control the shape of the AvatarBase
-     *
-     * @default AvatarBaseShape.Circle
-     */
-    shape?: AvatarBaseShape;
-    /**
-     * Optional prop to include the border with the Avatar.
-     * For internal use only
-     *
-     * @default false
-     */
-    hasBorder?: boolean;
-    /**
-     * Optional prop to add a test id to the icon
-     */
-    'data-testid'?: string;
 };
 //# sourceMappingURL=AvatarBase.types.d.cts.map

package/dist/components/AvatarBase/AvatarBase.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"AvatarBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GACjD,qBAAqB,GAAG;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

package/dist/components/AvatarBase/AvatarBase.types.d.mts

@@ -1,32 +1,16 @@
+import type { AvatarBasePropsShared } from "@metamask/design-system-shared";
 import type { ComponentProps } from "react";
-import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
 import type { TextProps } from "../Text/index.mjs";
-export type AvatarBaseProps = ComponentProps<'div'> & {
+export type AvatarBaseProps = ComponentProps<'div'> & AvatarBasePropsShared & {
     /**
-     * Required prop for the content to be rendered within the AvatarBase
-     * Not required if fallbackText is provided
+     * Optional test id for querying in tests.
      */
-    children?: React.ReactNode;
-    /**
-     * Optional text to display when no children are provided
-     */
-    fallbackText?: string;
+    'data-testid'?: string;
     /**
      * Optional props to be passed to the Text component when rendering fallback text
      * Only used when fallbackText is provided and no children
      */
     fallbackTextProps?: Partial<React.HTMLAttributes<HTMLSpanElement> & TextProps>;
-    /**
-     * Optional prop for additional CSS classes to be applied to the AvatarBase component.
-     * These classes will be merged with the component's default classes using twMerge.
-     */
-    className?: string;
-    /**
-     * Optional prop to control the size of the AvatarBase
-     *
-     * @default AvatarBaseSize.Md
-     */
-    size?: AvatarBaseSize;
     /**
      * Optional boolean that determines if the component should merge its props onto its immediate child
      * instead of rendering a div element
@@ -34,27 +18,5 @@ export type AvatarBaseProps = ComponentProps<'div'> & {
      * @default false
      */
     asChild?: boolean;
-    /**
-     * Optional CSS styles to be applied to the component.
-     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Optional prop to control the shape of the AvatarBase
-     *
-     * @default AvatarBaseShape.Circle
-     */
-    shape?: AvatarBaseShape;
-    /**
-     * Optional prop to include the border with the Avatar.
-     * For internal use only
-     *
-     * @default false
-     */
-    hasBorder?: boolean;
-    /**
-     * Optional prop to add a test id to the icon
-     */
-    'data-testid'?: string;
 };
 //# sourceMappingURL=AvatarBase.types.d.mts.map

package/dist/components/AvatarBase/AvatarBase.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"AvatarBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GACjD,qBAAqB,GAAG;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

package/dist/components/AvatarBase/AvatarBase.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> & {\n  /**\n   * Required prop for the content to be rendered within the AvatarBase\n   * Not required if fallbackText is provided\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional text to display when no children are provided\n   */\n  fallbackText?: string;\n  /**\n   * Optional props to be passed to the Text component when rendering fallback text\n   * Only used when fallbackText is provided and no children\n   */\n  fallbackTextProps?: Partial<\n    React.HTMLAttributes<HTMLSpanElement> & TextProps\n  >;\n  /**\n   * Optional prop for additional CSS classes to be applied to the AvatarBase component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional prop to control the size of the AvatarBase\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: AvatarBaseSize;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a div element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to control the shape of the AvatarBase\n   *\n   * @default AvatarBaseShape.Circle\n   */\n  shape?: AvatarBaseShape;\n  /**\n   * Optional prop to include the border with the Avatar.\n   * For internal use only\n   *\n   * @default false\n   */\n  hasBorder?: boolean;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"AvatarBase.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBasePropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> &\n  AvatarBasePropsShared & {\n    /**\n     * Optional test id for querying in tests.\n     */\n    'data-testid'?: string;\n    /**\n     * Optional props to be passed to the Text component when rendering fallback text\n     * Only used when fallbackText is provided and no children\n     */\n    fallbackTextProps?: Partial<\n      React.HTMLAttributes<HTMLSpanElement> & TextProps\n    >;\n    /**\n     * Optional boolean that determines if the component should merge its props onto its immediate child\n     * instead of rendering a div element\n     *\n     * @default false\n     */\n    asChild?: boolean;\n  };\n"]}

package/dist/components/AvatarBase/index.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarBase = exports.AvatarBaseShape = exports.AvatarBaseSize = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return types_1.AvatarBaseSize; } });
-Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return types_1.AvatarBaseShape; } });
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseSize; } });
+Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseShape; } });
 var AvatarBase_1 = require("./AvatarBase.cjs");
 Object.defineProperty(exports, "AvatarBase", { enumerable: true, get: function () { return AvatarBase_1.AvatarBase; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/AvatarBase/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8D;AAArD,uGAAA,cAAc,OAAA;AAAE,wGAAA,eAAe,OAAA;AACxC,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export { AvatarBaseSize, AvatarBaseShape } from '../../types';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":";;;AAAA,uEAGwC;AAFtC,sHAAA,cAAc,OAAA;AACd,uHAAA,eAAe,OAAA;AAGjB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\n\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}

package/dist/components/AvatarBase/index.d.cts

@@ -1,4 +1,4 @@
-export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
+export { AvatarBaseSize, AvatarBaseShape, } from "@metamask/design-system-shared";
 export { AvatarBase } from "./AvatarBase.cjs";
 export type { AvatarBaseProps } from "./AvatarBase.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/AvatarBase/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,GAChB,uCAAuC;AAExC,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/AvatarBase/index.d.mts

@@ -1,4 +1,4 @@
-export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
+export { AvatarBaseSize, AvatarBaseShape, } from "@metamask/design-system-shared";
 export { AvatarBase } from "./AvatarBase.mjs";
 export type { AvatarBaseProps } from "./AvatarBase.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/AvatarBase/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,GAChB,uCAAuC;AAExC,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}

package/dist/components/AvatarBase/index.mjs

@@ -1,3 +1,3 @@
-export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
+export { AvatarBaseSize, AvatarBaseShape } from "@metamask/design-system-shared";
 export { AvatarBase } from "./AvatarBase.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/AvatarBase/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export { AvatarBaseSize, AvatarBaseShape } from '../../types';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,uCAAuC;AAExC,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\n\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}

package/dist/components/AvatarFavicon/AvatarFavicon.cjs

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarFavicon = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importStar(require("react"));
 const types_1 = require("../../types/index.cjs");
 const AvatarBase_1 = require("../AvatarBase/index.cjs");
@@ -35,7 +36,7 @@ exports.AvatarFavicon = (0, react_1.forwardRef)(({ src, name = '', fallbackText,
         setFinalFallbackText(backupFallbackText);
         imageProps?.onError?.(e);
     };
-    return (react_1.default.createElement(AvatarBase_1.AvatarBase, { ref: ref, shape: types_1.AvatarBaseShape.Circle, size: size, className: className, fallbackText: src ? finalFallbackText : backupFallbackText, fallbackTextProps: fallbackTextProps, ...props }, src && (react_1.default.createElement("img", { src: src, alt: altText, className: "size-full object-contain", ...imageProps, onError: onErrorHandler }))));
+    return (react_1.default.createElement(AvatarBase_1.AvatarBase, { ref: ref, shape: design_system_shared_1.AvatarBaseShape.Circle, size: size, className: className, fallbackText: src ? finalFallbackText : backupFallbackText, fallbackTextProps: fallbackTextProps, ...props }, src && (react_1.default.createElement("img", { src: src, alt: altText, className: "size-full object-contain", ...imageProps, onError: onErrorHandler }))));
 });
 exports.AvatarFavicon.displayName = 'AvatarFavicon';
 //# sourceMappingURL=AvatarFavicon.cjs.map

package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AAEpD,iDAAiE;AACjE,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,yBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,uBAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport { AvatarFaviconSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarFaviconSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}
+{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAiE;AACjE,+CAAoD;AAEpD,iDAAgD;AAChD,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,yBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,sCAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import { AvatarBaseShape } from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarFaviconSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarFaviconSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}

package/dist/components/AvatarFavicon/AvatarFavicon.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}
+{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}
+{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.mjs

@@ -4,9 +4,10 @@ function $importDefault(module) {
     }
     return module;
 }
+import { AvatarBaseShape } from "@metamask/design-system-shared";
 import $React, { forwardRef, useState } from "react";
 const React = $importDefault($React);
-import { AvatarFaviconSize, AvatarBaseShape } from "../../types/index.mjs";
+import { AvatarFaviconSize } from "../../types/index.mjs";
 import { AvatarBase } from "../AvatarBase/index.mjs";
 export const AvatarFavicon = forwardRef(({ src, name = '', fallbackText, fallbackTextProps, className, size = AvatarFaviconSize.Md, imageProps, ...props }, ref) => {
     const [finalFallbackText, setFinalFallbackText] = useState('');

package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,8BAAoB;AACjE,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport { AvatarFaviconSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarFaviconSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}
+{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,uCAAuC;AACjE,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import { AvatarBaseShape } from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarFaviconSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarFaviconSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}

package/dist/components/AvatarNetwork/AvatarNetwork.cjs

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarNetwork = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importStar(require("react"));
 const types_1 = require("../../types/index.cjs");
 const AvatarBase_1 = require("../AvatarBase/index.cjs");
@@ -35,7 +36,7 @@ exports.AvatarNetwork = (0, react_1.forwardRef)(({ src, name = '', fallbackText,
         setFinalFallbackText(backupFallbackText);
         imageProps?.onError?.(e);
     };
-    return (react_1.default.createElement(AvatarBase_1.AvatarBase, { ref: ref, shape: types_1.AvatarBaseShape.Square, size: size, className: className, fallbackText: src ? finalFallbackText : backupFallbackText, fallbackTextProps: fallbackTextProps, ...props }, src && (react_1.default.createElement("img", { src: src, alt: altText, className: "size-full object-contain", ...imageProps, onError: onErrorHandler }))));
+    return (react_1.default.createElement(AvatarBase_1.AvatarBase, { ref: ref, shape: design_system_shared_1.AvatarBaseShape.Square, size: size, className: className, fallbackText: src ? finalFallbackText : backupFallbackText, fallbackTextProps: fallbackTextProps, ...props }, src && (react_1.default.createElement("img", { src: src, alt: altText, className: "size-full object-contain", ...imageProps, onError: onErrorHandler }))));
 });
 exports.AvatarNetwork.displayName = 'AvatarNetwork';
 //# sourceMappingURL=AvatarNetwork.cjs.map

package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AAEpD,iDAAiE;AACjE,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,yBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,cAAc,CAAC,CAAC,yCAAyC;IAEjF,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,uBAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport { AvatarNetworkSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = forwardRef<HTMLDivElement, AvatarNetworkProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarNetworkSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Network logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Square}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarNetwork.displayName = 'AvatarNetwork';\n"]}
+{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAiE;AACjE,+CAAoD;AAEpD,iDAAgD;AAChD,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,yBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,cAAc,CAAC,CAAC,yCAAyC;IAEjF,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,sCAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import { AvatarBaseShape } from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarNetworkSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = forwardRef<HTMLDivElement, AvatarNetworkProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarNetworkSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Network logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Square}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarNetwork.displayName = 'AvatarNetwork';\n"]}

package/dist/components/AvatarNetwork/AvatarNetwork.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}
+{"version":3,"file":"AvatarNetwork.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}

package/dist/components/AvatarNetwork/AvatarNetwork.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}
+{"version":3,"file":"AvatarNetwork.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}

package/dist/components/AvatarNetwork/AvatarNetwork.mjs

@@ -4,9 +4,10 @@ function $importDefault(module) {
     }
     return module;
 }
+import { AvatarBaseShape } from "@metamask/design-system-shared";
 import $React, { forwardRef, useState } from "react";
 const React = $importDefault($React);
-import { AvatarNetworkSize, AvatarBaseShape } from "../../types/index.mjs";
+import { AvatarNetworkSize } from "../../types/index.mjs";
 import { AvatarBase } from "../AvatarBase/index.mjs";
 export const AvatarNetwork = forwardRef(({ src, name = '', fallbackText, fallbackTextProps, className, size = AvatarNetworkSize.Md, imageProps, ...props }, ref) => {
     const [finalFallbackText, setFinalFallbackText] = useState('');

package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,8BAAoB;AACjE,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,cAAc,CAAC,CAAC,yCAAyC;IAEjF,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport { AvatarNetworkSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = forwardRef<HTMLDivElement, AvatarNetworkProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarNetworkSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Network logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Square}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarNetwork.displayName = 'AvatarNetwork';\n"]}
+{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,uCAAuC;AACjE,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,cAAc,CAAC,CAAC,yCAAyC;IAEjF,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import { AvatarBaseShape } from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarNetworkSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = forwardRef<HTMLDivElement, AvatarNetworkProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarNetworkSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Network logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Square}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            {...imageProps}\n            onError={onErrorHandler}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarNetwork.displayName = 'AvatarNetwork';\n"]}

package/dist/components/AvatarToken/AvatarToken.cjs

@@ -24,10 +24,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarToken = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importStar(require("react"));
-const types_1 = require("../../types/index.cjs");
 const AvatarBase_1 = require("../AvatarBase/index.cjs");
-exports.AvatarToken = (0, react_1.forwardRef)(({ src, name = '', fallbackText, fallbackTextProps, className, size = types_1.AvatarTokenSize.Md, imageProps, ...props }, ref) => {
+exports.AvatarToken = (0, react_1.forwardRef)(({ src, name = '', fallbackText, fallbackTextProps, className, size = design_system_shared_1.AvatarTokenSize.Md, imageProps, ...props }, ref) => {
     const [finalFallbackText, setFinalFallbackText] = (0, react_1.useState)('');
     const backupFallbackText = fallbackText || name?.[0] || '';
     const altText = name || 'Token logo'; // TBC: Add localization for default text
@@ -35,7 +35,7 @@ exports.AvatarToken = (0, react_1.forwardRef)(({ src, name = '', fallbackText, f
         setFinalFallbackText(backupFallbackText);
         imageProps?.onError?.(e);
     };
-    return (react_1.default.createElement(AvatarBase_1.AvatarBase, { ref: ref, shape: types_1.AvatarBaseShape.Circle, size: size, className: className, fallbackText: src ? finalFallbackText : backupFallbackText, fallbackTextProps: fallbackTextProps, ...props }, src && (react_1.default.createElement("img", { src: src, alt: altText, className: "size-full object-contain", onError: onErrorHandler, ...imageProps }))));
+    return (react_1.default.createElement(AvatarBase_1.AvatarBase, { ref: ref, shape: design_system_shared_1.AvatarBaseShape.Circle, size: size, className: className, fallbackText: src ? finalFallbackText : backupFallbackText, fallbackTextProps: fallbackTextProps, ...props }, src && (react_1.default.createElement("img", { src: src, alt: altText, className: "size-full object-contain", onError: onErrorHandler, ...imageProps }))));
 });
 exports.AvatarToken.displayName = 'AvatarToken';
 //# sourceMappingURL=AvatarToken.cjs.map

package/dist/components/AvatarToken/AvatarToken.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AAEpD,iDAA+D;AAC/D,wDAA2C;AAI9B,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,uBAAe,CAAC,EAAE,EACzB,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,YAAY,CAAC,CAAC,yCAAyC;IAE/E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,uBAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAc,KACnB,UAAU,GACd,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport { AvatarTokenSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = forwardRef<HTMLDivElement, AvatarTokenProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarTokenSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Token logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            onError={onErrorHandler}\n            {...imageProps}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarToken.displayName = 'AvatarToken';\n"]}
+{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,+CAAoD;AAEpD,wDAA2C;AAI9B,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,sCAAe,CAAC,EAAE,EACzB,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,YAAY,CAAC,CAAC,yCAAyC;IAE/E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,sCAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAc,KACnB,UAAU,GACd,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import {\n  AvatarBaseShape,\n  AvatarTokenSize,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = forwardRef<HTMLDivElement, AvatarTokenProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarTokenSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Token logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            onError={onErrorHandler}\n            {...imageProps}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarToken.displayName = 'AvatarToken';\n"]}

package/dist/components/AvatarToken/AvatarToken.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGA6CvB,CAAC"}
+{"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,cAAc;AAIpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGA6CvB,CAAC"}

package/dist/components/AvatarToken/AvatarToken.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGA6CvB,CAAC"}
+{"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,cAAc;AAIpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGA6CvB,CAAC"}

package/dist/components/AvatarToken/AvatarToken.mjs

@@ -4,9 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
+import { AvatarBaseShape, AvatarTokenSize } from "@metamask/design-system-shared";
 import $React, { forwardRef, useState } from "react";
 const React = $importDefault($React);
-import { AvatarTokenSize, AvatarBaseShape } from "../../types/index.mjs";
 import { AvatarBase } from "../AvatarBase/index.mjs";
 export const AvatarToken = forwardRef(({ src, name = '', fallbackText, fallbackTextProps, className, size = AvatarTokenSize.Md, imageProps, ...props }, ref) => {
     const [finalFallbackText, setFinalFallbackText] = useState('');

package/dist/components/AvatarToken/AvatarToken.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,8BAAoB;AAC/D,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,YAAY,CAAC,CAAC,yCAAyC;IAE/E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAc,KACnB,UAAU,GACd,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport { AvatarTokenSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = forwardRef<HTMLDivElement, AvatarTokenProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarTokenSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Token logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            onError={onErrorHandler}\n            {...imageProps}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarToken.displayName = 'AvatarToken';\n"]}
+{"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,eAAe,EAChB,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,YAAY,CAAC,CAAC,yCAAyC;IAE/E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAc,KACnB,UAAU,GACd,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import {\n  AvatarBaseShape,\n  AvatarTokenSize,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = forwardRef<HTMLDivElement, AvatarTokenProps>(\n  (\n    {\n      src,\n      name = '',\n      fallbackText,\n      fallbackTextProps,\n      className,\n      size = AvatarTokenSize.Md,\n      imageProps,\n      ...props\n    },\n    ref,\n  ) => {\n    const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n    const backupFallbackText = fallbackText || name?.[0] || '';\n    const altText = name || 'Token logo'; // TBC: Add localization for default text\n\n    const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setFinalFallbackText(backupFallbackText);\n      imageProps?.onError?.(e);\n    };\n\n    return (\n      <AvatarBase\n        ref={ref}\n        shape={AvatarBaseShape.Circle}\n        size={size}\n        className={className}\n        fallbackText={src ? finalFallbackText : backupFallbackText}\n        fallbackTextProps={fallbackTextProps}\n        {...props}\n      >\n        {src && (\n          <img\n            src={src}\n            alt={altText}\n            className=\"size-full object-contain\"\n            onError={onErrorHandler}\n            {...imageProps}\n          />\n        )}\n      </AvatarBase>\n    );\n  },\n);\n\nAvatarToken.displayName = 'AvatarToken';\n"]}

package/dist/components/AvatarToken/AvatarToken.types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarTokenProps = Omit<\n  ComponentProps<'img'>,\n  'children' | 'size'\n> &\n  Omit<AvatarBaseProps, 'children'> & {\n    /**\n     * Required name of the token\n     * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n     */\n    name?: string;\n    /**\n     * Optional URL for the token image\n     * When provided, displays the image instead of fallback text\n     */\n    src?: string;\n    /**\n     * Optional prop to pass to the underlying img element\n     * Useful for overriding the default alt text which is the token name\n     */\n    imageProps?: ComponentProps<'img'> & {\n      'data-testid'?: string;\n    };\n  };\n"]}
+{"version":3,"file":"AvatarToken.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarTokenPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarToken component props (React platform-specific)\n * Extends shared props from @metamask/design-system-shared with React-specific platform concerns\n */\nexport type AvatarTokenProps = Omit<\n  ComponentProps<'img'>,\n  'children' | 'size'\n> &\n  Omit<AvatarBaseProps, 'children'> &\n  AvatarTokenPropsShared & {\n    /**\n     * Optional URL for the token image\n     * When provided, displays the image instead of fallback text\n     */\n    src?: string;\n    /**\n     * Optional prop to pass to the underlying img element\n     * Useful for overriding the default alt text which is the token name\n     */\n    imageProps?: ComponentProps<'img'> & {\n      'data-testid'?: string;\n    };\n  };\n"]}

package/dist/components/AvatarToken/AvatarToken.types.d.cts

@@ -1,11 +1,11 @@
+import type { AvatarTokenPropsShared } from "@metamask/design-system-shared";
 import type { ComponentProps } from "react";
 import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
-export type AvatarTokenProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & {
-    /**
-     * Required name of the token
-     * Used as alt text for image and first letter is used as fallback if no fallbackText provided
-     */
-    name?: string;
+/**
+ * AvatarToken component props (React platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React-specific platform concerns
+ */
+export type AvatarTokenProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarTokenPropsShared & {
     /**
      * Optional URL for the token image
      * When provided, displays the image instead of fallback text

package/dist/components/AvatarToken/AvatarToken.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
+{"version":3,"file":"AvatarToken.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,sBAAsB,GAAG;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}

package/dist/components/AvatarToken/AvatarToken.types.d.mts

@@ -1,11 +1,11 @@
+import type { AvatarTokenPropsShared } from "@metamask/design-system-shared";
 import type { ComponentProps } from "react";
 import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
-export type AvatarTokenProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & {
-    /**
-     * Required name of the token
-     * Used as alt text for image and first letter is used as fallback if no fallbackText provided
-     */
-    name?: string;
+/**
+ * AvatarToken component props (React platform-specific)
+ * Extends shared props from @metamask/design-system-shared with React-specific platform concerns
+ */
+export type AvatarTokenProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarTokenPropsShared & {
     /**
      * Optional URL for the token image
      * When provided, displays the image instead of fallback text

package/dist/components/AvatarToken/AvatarToken.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
+{"version":3,"file":"AvatarToken.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,uCAAuC;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,sBAAsB,GAAG;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}

package/dist/components/AvatarToken/AvatarToken.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarTokenProps = Omit<\n  ComponentProps<'img'>,\n  'children' | 'size'\n> &\n  Omit<AvatarBaseProps, 'children'> & {\n    /**\n     * Required name of the token\n     * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n     */\n    name?: string;\n    /**\n     * Optional URL for the token image\n     * When provided, displays the image instead of fallback text\n     */\n    src?: string;\n    /**\n     * Optional prop to pass to the underlying img element\n     * Useful for overriding the default alt text which is the token name\n     */\n    imageProps?: ComponentProps<'img'> & {\n      'data-testid'?: string;\n    };\n  };\n"]}
+{"version":3,"file":"AvatarToken.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarTokenPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarToken component props (React platform-specific)\n * Extends shared props from @metamask/design-system-shared with React-specific platform concerns\n */\nexport type AvatarTokenProps = Omit<\n  ComponentProps<'img'>,\n  'children' | 'size'\n> &\n  Omit<AvatarBaseProps, 'children'> &\n  AvatarTokenPropsShared & {\n    /**\n     * Optional URL for the token image\n     * When provided, displays the image instead of fallback text\n     */\n    src?: string;\n    /**\n     * Optional prop to pass to the underlying img element\n     * Useful for overriding the default alt text which is the token name\n     */\n    imageProps?: ComponentProps<'img'> & {\n      'data-testid'?: string;\n    };\n  };\n"]}

package/dist/components/AvatarToken/index.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarToken = exports.AvatarTokenSize = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "AvatarTokenSize", { enumerable: true, get: function () { return types_1.AvatarTokenSize; } });
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "AvatarTokenSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarTokenSize; } });
 var AvatarToken_1 = require("./AvatarToken.cjs");
 Object.defineProperty(exports, "AvatarToken", { enumerable: true, get: function () { return AvatarToken_1.AvatarToken; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/AvatarToken/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8C;AAArC,wGAAA,eAAe,OAAA;AACxB,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { AvatarTokenSize } from '../../types';\nexport { AvatarToken } from './AvatarToken';\nexport type { AvatarTokenProps } from './AvatarToken.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":";;;AAAA,uEAAiE;AAAxD,uHAAA,eAAe,OAAA;AACxB,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { AvatarTokenSize } from '@metamask/design-system-shared';\nexport { AvatarToken } from './AvatarToken';\nexport type { AvatarTokenProps } from './AvatarToken.types';\n"]}

package/dist/components/AvatarToken/index.d.cts

@@ -1,4 +1,4 @@
-export { AvatarTokenSize } from "../../types/index.cjs";
+export { AvatarTokenSize } from "@metamask/design-system-shared";
 export { AvatarToken } from "./AvatarToken.cjs";
 export type { AvatarTokenProps } from "./AvatarToken.types.cjs";
 //# sourceMappingURL=index.d.cts.map