@metamask-previews/design-system-react-native 0.0.0-preview.fbd1fe9 → 0.1.0-preview.a448767

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

@@ -0,0 +1,58 @@
+import type { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
+import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
+import type { TextProps } from "../Text/index.cjs";
+/**
+ * AvatarBase component props.
+ */
+export type AvatarBaseProps = {
+    /**
+     * Required prop for the content to be rendered within the AvatarBase
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional prop to control the size of the AvatarBase
+     * Possible values:
+     * AvatarBaseSize.Xs (16px),
+     * - AvatarBaseSize.Sm (24px),
+     * - AvatarBaseSize.Md (32px).
+     * - AvatarBaseSize.Lg (40px),
+     * - AvatarBaseSize.Xl (48px),
+     *
+     * @default AvatarBaseSize.Md
+     */
+    size?: AvatarBaseSize;
+    /**
+     * Optional prop to control the shape of the AvatarBase
+     * Possible values:
+     * - AvatarBaseShape.Circle
+     * - AvatarBaseShape.Square
+     *
+     * @default AvatarBaseShape.Circle
+     */
+    shape?: AvatarBaseShape;
+    /**
+     * Optional text to be rendered when the content fails to render
+     */
+    fallbackText?: string;
+    /**
+     * Optional props to be passed to the fallbackText when the content
+     * fails to render
+     */
+    fallbackTextProps?: Omit<TextProps, 'children'>;
+    /**
+     * Optional prop to include the border with the Avatar.
+     * For internal use only
+     *
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional prop to control the style.
+     */
+    style?: StyleProp<ViewStyle>;
+} & ViewProps;
+//# sourceMappingURL=AvatarBase.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IAChD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,SAAS,CAAC"}

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

@@ -0,0 +1,58 @@
+import type { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
+import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
+import type { TextProps } from "../Text/index.mjs";
+/**
+ * AvatarBase component props.
+ */
+export type AvatarBaseProps = {
+    /**
+     * Required prop for the content to be rendered within the AvatarBase
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional prop to control the size of the AvatarBase
+     * Possible values:
+     * AvatarBaseSize.Xs (16px),
+     * - AvatarBaseSize.Sm (24px),
+     * - AvatarBaseSize.Md (32px).
+     * - AvatarBaseSize.Lg (40px),
+     * - AvatarBaseSize.Xl (48px),
+     *
+     * @default AvatarBaseSize.Md
+     */
+    size?: AvatarBaseSize;
+    /**
+     * Optional prop to control the shape of the AvatarBase
+     * Possible values:
+     * - AvatarBaseShape.Circle
+     * - AvatarBaseShape.Square
+     *
+     * @default AvatarBaseShape.Circle
+     */
+    shape?: AvatarBaseShape;
+    /**
+     * Optional text to be rendered when the content fails to render
+     */
+    fallbackText?: string;
+    /**
+     * Optional props to be passed to the fallbackText when the content
+     * fails to render
+     */
+    fallbackTextProps?: Omit<TextProps, 'children'>;
+    /**
+     * Optional prop to include the border with the Avatar.
+     * For internal use only
+     *
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+    /**
+     * Optional prop to control the style.
+     */
+    style?: StyleProp<ViewStyle>;
+} & ViewProps;
+//# sourceMappingURL=AvatarBase.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IAChD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,SAAS,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AvatarBase.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarBase.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport type { TextProps } from '../Text';\n\n/**\n * AvatarBase component props.\n */\nexport type AvatarBaseProps = {\n  /**\n   * Required prop for the content to be rendered within the AvatarBase\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional prop to control the size of the AvatarBase\n   * Possible values:\n   * AvatarBaseSize.Xs (16px),\n   * - AvatarBaseSize.Sm (24px),\n   * - AvatarBaseSize.Md (32px).\n   * - AvatarBaseSize.Lg (40px),\n   * - AvatarBaseSize.Xl (48px),\n   *\n   * @default AvatarBaseSize.Md\n   */\n  size?: AvatarBaseSize;\n  /**\n   * Optional prop to control the shape of the AvatarBase\n   * Possible values:\n   * - AvatarBaseShape.Circle\n   * - AvatarBaseShape.Square\n   *\n   * @default AvatarBaseShape.Circle\n   */\n  shape?: AvatarBaseShape;\n  /**\n   * Optional text to be rendered when the content fails to render\n   */\n  fallbackText?: string;\n  /**\n   * Optional props to be passed to the fallbackText when the content\n   * fails to render\n   */\n  fallbackTextProps?: Omit<TextProps, 'children'>;\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 twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional prop to control the style.\n   */\n  style?: StyleProp<ViewStyle>;\n} & ViewProps;\n"]}

package/dist/components/AvatarBase/index.cjs

@@ -0,0 +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 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

@@ -0,0 +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"]}

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

@@ -0,0 +1,4 @@
+export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
+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

@@ -0,0 +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"}

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

@@ -0,0 +1,4 @@
+export { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
+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

@@ -0,0 +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"}

package/dist/components/AvatarBase/index.mjs

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

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

@@ -0,0 +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"]}

package/dist/components/AvatarFavicon/AvatarFavicon.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarFavicon = void 0;
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../types/index.cjs");
+const AvatarBase_1 = require("../AvatarBase/index.cjs");
+const ImageOrSvg_1 = require("../temp-components/ImageOrSvg/index.cjs");
+const AvatarFavicon = ({ src, size = types_1.AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, twClassName, imageOrSvgProps, ...props }) => {
+    const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
+    const backupFallbackText = fallbackText || name?.[0] || '';
+    const onImageErrorHandler = (e) => {
+        setFallbackText(backupFallbackText);
+        imageOrSvgProps?.onImageError?.(e);
+    };
+    const onSvgErrorHandler = (e) => {
+        setFallbackText(backupFallbackText);
+        imageOrSvgProps?.onSvgError?.(e);
+    };
+    return (<AvatarBase_1.AvatarBase size={size} shape={types_1.AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} twClassName={twClassName} {...props}>
+      {src && (<ImageOrSvg_1.ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
+                resizeMode: 'contain',
+                ...imageOrSvgProps?.imageProps,
+            }} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
+    </AvatarBase_1.AvatarBase>);
+};
+exports.AvatarFavicon = AvatarFavicon;
+//# sourceMappingURL=AvatarFavicon.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAGxC,iDAAiE;AACjE,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,yBAAiB,CAAC,EAAE,EAC3B,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAElE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,mBAAmB,GAAG,CAC1B,CAA4C,EAC5C,EAAE;QACF,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,uBAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,aAAa,iBAkDxB","sourcesContent":["import React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\nimport { AvatarFaviconSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = ({\n  src,\n  size = AvatarFaviconSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  twClassName,\n  imageOrSvgProps,\n  ...props\n}: AvatarFaviconProps) => {\n  const [finalFallbackText, setFallbackText] = useState<string>('');\n\n  const backupFallbackText = fallbackText || name?.[0] || '';\n  const onImageErrorHandler = (\n    e: NativeSyntheticEvent<ImageErrorEventData>,\n  ) => {\n    setFallbackText(backupFallbackText);\n    imageOrSvgProps?.onImageError?.(e);\n  };\n\n  const onSvgErrorHandler = (e: Error) => {\n    setFallbackText(backupFallbackText);\n    imageOrSvgProps?.onSvgError?.(e);\n  };\n\n  return (\n    <AvatarBase\n      size={size}\n      shape={AvatarBaseShape.Circle}\n      fallbackText={finalFallbackText}\n      fallbackTextProps={fallbackTextProps}\n      twClassName={twClassName}\n      {...props}\n    >\n      {src && (\n        <ImageOrSvg\n          src={src}\n          width={'100%'}\n          height={'100%'}\n          {...imageOrSvgProps}\n          imageProps={{\n            resizeMode: 'contain',\n            ...imageOrSvgProps?.imageProps,\n          }}\n          onImageError={onImageErrorHandler}\n          onSvgError={onSvgErrorHandler}\n        />\n      )}\n    </AvatarBase>\n  );\n};\n"]}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { AvatarFaviconProps } from "./AvatarFavicon.types.cjs";
+export declare const AvatarFavicon: ({ src, size, name, fallbackText, fallbackTextProps, twClassName, imageOrSvgProps, ...props }: AvatarFaviconProps) => React.JSX.Element;
+//# sourceMappingURL=AvatarFavicon.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,iGASvB,kBAAkB,sBAyCpB,CAAC"}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type { AvatarFaviconProps } from "./AvatarFavicon.types.mjs";
+export declare const AvatarFavicon: ({ src, size, name, fallbackText, fallbackTextProps, twClassName, imageOrSvgProps, ...props }: AvatarFaviconProps) => React.JSX.Element;
+//# sourceMappingURL=AvatarFavicon.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,iGASvB,kBAAkB,sBAyCpB,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.mjs

@@ -0,0 +1,30 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React, { useState } from "react";
+const React = $importDefault($React);
+import { AvatarFaviconSize, AvatarBaseShape } from "../../types/index.mjs";
+import { AvatarBase } from "../AvatarBase/index.mjs";
+import { ImageOrSvg } from "../temp-components/ImageOrSvg/index.mjs";
+export const AvatarFavicon = ({ src, size = AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, twClassName, imageOrSvgProps, ...props }) => {
+    const [finalFallbackText, setFallbackText] = useState('');
+    const backupFallbackText = fallbackText || name?.[0] || '';
+    const onImageErrorHandler = (e) => {
+        setFallbackText(backupFallbackText);
+        imageOrSvgProps?.onImageError?.(e);
+    };
+    const onSvgErrorHandler = (e) => {
+        setFallbackText(backupFallbackText);
+        imageOrSvgProps?.onSvgError?.(e);
+    };
+    return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} twClassName={twClassName} {...props}>
+      {src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
+                resizeMode: 'contain',
+                ...imageOrSvgProps?.imageProps,
+            }} onImageError={onImageErrorHandler} onSvgError={onSvgErrorHandler}/>)}
+    </AvatarBase>);
+};
+//# sourceMappingURL=AvatarFavicon.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,8BAAoB;AACjE,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,UAAU,EAAE,gDAAsC;AAI3D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAElE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,mBAAmB,GAAG,CAC1B,CAA4C,EAC5C,EAAE;QACF,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACrC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QACpC,eAAe,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,GAAG,IAAI,CACN,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,KAAK,CAAC,CAAC,MAAM,CAAC,CACd,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,eAAe,CAAC,CACpB,UAAU,CAAC,CAAC;gBACV,UAAU,EAAE,SAAS;gBACrB,GAAG,eAAe,EAAE,UAAU;aAC/B,CAAC,CACF,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,UAAU,CAAC,CAAC,iBAAiB,CAAC,EAC9B,CACH,CACH;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\nimport { AvatarFaviconSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = ({\n  src,\n  size = AvatarFaviconSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  twClassName,\n  imageOrSvgProps,\n  ...props\n}: AvatarFaviconProps) => {\n  const [finalFallbackText, setFallbackText] = useState<string>('');\n\n  const backupFallbackText = fallbackText || name?.[0] || '';\n  const onImageErrorHandler = (\n    e: NativeSyntheticEvent<ImageErrorEventData>,\n  ) => {\n    setFallbackText(backupFallbackText);\n    imageOrSvgProps?.onImageError?.(e);\n  };\n\n  const onSvgErrorHandler = (e: Error) => {\n    setFallbackText(backupFallbackText);\n    imageOrSvgProps?.onSvgError?.(e);\n  };\n\n  return (\n    <AvatarBase\n      size={size}\n      shape={AvatarBaseShape.Circle}\n      fallbackText={finalFallbackText}\n      fallbackTextProps={fallbackTextProps}\n      twClassName={twClassName}\n      {...props}\n    >\n      {src && (\n        <ImageOrSvg\n          src={src}\n          width={'100%'}\n          height={'100%'}\n          {...imageOrSvgProps}\n          imageProps={{\n            resizeMode: 'contain',\n            ...imageOrSvgProps?.imageProps,\n          }}\n          onImageError={onImageErrorHandler}\n          onSvgError={onSvgErrorHandler}\n        />\n      )}\n    </AvatarBase>\n  );\n};\n"]}

package/dist/components/AvatarFavicon/AvatarFavicon.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=AvatarFavicon.types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFavicon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarFavicon component props.\n */\nexport type AvatarFaviconProps = {\n  /**\n   * Optional prop for the source of the image or SVG\n   */\n  src?: ImageOrSvgSrc;\n  /**\n   * Optional props for favicon name, to be used to calculate the fallbackText.\n   */\n  name?: string;\n  /**\n   * Optional prop to pass to the underlying ImageOrSvg element\n   * Useful for overriding the default alt text which is the dapp name\n   */\n  imageOrSvgProps?: Partial<ImageOrSvgProps>;\n} & Omit<AvatarBaseProps, 'children'>;\n"]}

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

@@ -0,0 +1,21 @@
+import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
+import type { ImageOrSvgProps, ImageOrSvgSrc } from "../temp-components/ImageOrSvg/index.cjs";
+/**
+ * AvatarFavicon component props.
+ */
+export type AvatarFaviconProps = {
+    /**
+     * Optional prop for the source of the image or SVG
+     */
+    src?: ImageOrSvgSrc;
+    /**
+     * Optional props for favicon name, to be used to calculate the fallbackText.
+     */
+    name?: string;
+    /**
+     * Optional prop to pass to the underlying ImageOrSvg element
+     * Useful for overriding the default alt text which is the dapp name
+     */
+    imageOrSvgProps?: Partial<ImageOrSvgProps>;
+} & Omit<AvatarBaseProps, 'children'>;
+//# sourceMappingURL=AvatarFavicon.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFavicon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,21 @@
+import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
+import type { ImageOrSvgProps, ImageOrSvgSrc } from "../temp-components/ImageOrSvg/index.mjs";
+/**
+ * AvatarFavicon component props.
+ */
+export type AvatarFaviconProps = {
+    /**
+     * Optional prop for the source of the image or SVG
+     */
+    src?: ImageOrSvgSrc;
+    /**
+     * Optional props for favicon name, to be used to calculate the fallbackText.
+     */
+    name?: string;
+    /**
+     * Optional prop to pass to the underlying ImageOrSvg element
+     * Useful for overriding the default alt text which is the dapp name
+     */
+    imageOrSvgProps?: Partial<ImageOrSvgProps>;
+} & Omit<AvatarBaseProps, 'children'>;
+//# sourceMappingURL=AvatarFavicon.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFavicon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EACV,eAAe,EACf,aAAa,EACd,gDAAsC;AAEvC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AvatarFavicon.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFavicon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBaseProps } from '../AvatarBase';\nimport type {\n  ImageOrSvgProps,\n  ImageOrSvgSrc,\n} from '../temp-components/ImageOrSvg';\n\n/**\n * AvatarFavicon component props.\n */\nexport type AvatarFaviconProps = {\n  /**\n   * Optional prop for the source of the image or SVG\n   */\n  src?: ImageOrSvgSrc;\n  /**\n   * Optional props for favicon name, to be used to calculate the fallbackText.\n   */\n  name?: string;\n  /**\n   * Optional prop to pass to the underlying ImageOrSvg element\n   * Useful for overriding the default alt text which is the dapp name\n   */\n  imageOrSvgProps?: Partial<ImageOrSvgProps>;\n} & Omit<AvatarBaseProps, 'children'>;\n"]}

package/dist/components/AvatarFavicon/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarFavicon = exports.AvatarFaviconSize = void 0;
+var types_1 = require("../../types/index.cjs");
+Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return types_1.AvatarFaviconSize; } });
+var AvatarFavicon_1 = require("./AvatarFavicon.cjs");
+Object.defineProperty(exports, "AvatarFavicon", { enumerable: true, get: function () { return AvatarFavicon_1.AvatarFavicon; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":";;;AAAA,+CAAgD;AAAvC,0GAAA,iBAAiB,OAAA;AAC1B,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { AvatarFaviconSize } from '../../types';\nexport { AvatarFavicon } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon.types';\n"]}

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

@@ -0,0 +1,4 @@
+export { AvatarFaviconSize } from "../../types/index.cjs";
+export { AvatarFavicon } from "./AvatarFavicon.cjs";
+export type { AvatarFaviconProps } from "./AvatarFavicon.types.cjs";
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

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

@@ -0,0 +1,4 @@
+export { AvatarFaviconSize } from "../../types/index.mjs";
+export { AvatarFavicon } from "./AvatarFavicon.mjs";
+export type { AvatarFaviconProps } from "./AvatarFavicon.types.mjs";
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

package/dist/components/AvatarFavicon/index.mjs

@@ -0,0 +1,3 @@
+export { AvatarFaviconSize } from "../../types/index.mjs";
+export { AvatarFavicon } from "./AvatarFavicon.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,aAAa,EAAE,4BAAwB","sourcesContent":["export { AvatarFaviconSize } from '../../types';\nexport { AvatarFavicon } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon.types';\n"]}

package/dist/components/AvatarGroup/AvatarGroup.cjs

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroup = void 0;
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native/index.js");
+const types_1 = require("../../types/index.cjs");
+const AvatarAccount_1 = require("../AvatarAccount/index.cjs");
+const AvatarBase_1 = require("../AvatarBase/index.cjs");
+const AvatarFavicon_1 = require("../AvatarFavicon/index.cjs");
+const AvatarNetwork_1 = require("../AvatarNetwork/index.cjs");
+const AvatarToken_1 = require("../AvatarToken/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+const AvatarGroup_constants_1 = require("./AvatarGroup.constants.cjs");
+const AvatarGroup = ({ variant, avatarPropsArr, size = types_1.AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, twClassName, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const overflowCounter = avatarPropsArr.length - max;
+    const shouldRenderOverflowCounter = overflowCounter > 0;
+    const twContainerClassNames = `
+    ${isReverse ? 'flex-row-reverse' : 'flex-row'}
+    ${AvatarGroup_constants_1.TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size]}
+  `;
+    const renderAvatarList = (0, react_1.useCallback)(() => avatarPropsArr.slice(0, max).map((avatarProps, index) => {
+        switch (variant) {
+            case types_1.AvatarGroupVariant.Account:
+                return (<AvatarAccount_1.AvatarAccount key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
+            case types_1.AvatarGroupVariant.Favicon:
+                return (<AvatarFavicon_1.AvatarFavicon key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
+            case types_1.AvatarGroupVariant.Network:
+                return (<AvatarNetwork_1.AvatarNetwork key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
+            case types_1.AvatarGroupVariant.Token:
+                return (<AvatarToken_1.AvatarToken key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
+            default:
+                throw new Error(`Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(types_1.AvatarGroupVariant).join(', ')}`);
+        }
+    }), [avatarPropsArr, max, size, variant]);
+    return (<react_native_1.View style={[tw `${twContainerClassNames}`, style]} {...props}>
+      {renderAvatarList()}
+      {shouldRenderOverflowCounter && (<AvatarBase_1.AvatarBase twClassName="bg-icon-default" hasBorder fallbackText={`+${overflowCounter}`} fallbackTextProps={{
+                variant: AvatarGroup_constants_1.MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT[size],
+                color: Text_1.TextColor.PrimaryInverse,
+            }} size={size} shape={variant === types_1.AvatarGroupVariant.Network
+                ? AvatarBase_1.AvatarBaseShape.Square
+                : AvatarBase_1.AvatarBaseShape.Circle} {...overflowTextProps}/>)}
+    </react_native_1.View>);
+};
+exports.AvatarGroup = AvatarGroup;
+//# sourceMappingURL=AvatarGroup.cjs.map

package/dist/components/AvatarGroup/AvatarGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { View } from 'react-native';\n\nimport { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport { AvatarAccount } from '../AvatarAccount';\nimport { AvatarBase, AvatarBaseShape } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport { AvatarFavicon } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport { AvatarNetwork } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\nimport { AvatarToken } from '../AvatarToken';\nimport { TextColor } from '../Text';\n\nimport {\n  MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT,\n  TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS,\n} from './AvatarGroup.constants';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\n\nexport const AvatarGroup = ({\n  variant,\n  avatarPropsArr,\n  size = AvatarGroupSize.Md,\n  max = 4,\n  isReverse = false,\n  overflowTextProps,\n  style,\n  twClassName,\n  ...props\n}: AvatarGroupProps) => {\n  const tw = useTailwind();\n  const overflowCounter = avatarPropsArr.length - max;\n  const shouldRenderOverflowCounter = overflowCounter > 0;\n  const twContainerClassNames = `\n    ${isReverse ? 'flex-row-reverse' : 'flex-row'}\n    ${TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size]}\n  `;\n\n  const renderAvatarList = useCallback(\n    () =>\n      avatarPropsArr.slice(0, max).map((avatarProps, index) => {\n        switch (variant) {\n          case AvatarGroupVariant.Account:\n            return (\n              <AvatarAccount\n                key={`avatar-${index}`}\n                {...(avatarProps as AvatarAccountProps)}\n                size={size}\n                hasBorder\n              />\n            );\n          case AvatarGroupVariant.Favicon:\n            return (\n              <AvatarFavicon\n                key={`avatar-${index}`}\n                {...(avatarProps as AvatarFaviconProps)}\n                size={size}\n                hasBorder\n              />\n            );\n          case AvatarGroupVariant.Network:\n            return (\n              <AvatarNetwork\n                key={`avatar-${index}`}\n                {...(avatarProps as AvatarNetworkProps)}\n                size={size}\n                hasBorder\n              />\n            );\n          case AvatarGroupVariant.Token:\n            return (\n              <AvatarToken\n                key={`avatar-${index}`}\n                {...(avatarProps as AvatarTokenProps)}\n                size={size}\n                hasBorder\n              />\n            );\n          default:\n            throw new Error(\n              `Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`,\n            );\n        }\n      }),\n    [avatarPropsArr, max, size, variant],\n  );\n\n  return (\n    <View style={[tw`${twContainerClassNames}`, style]} {...props}>\n      {renderAvatarList()}\n      {shouldRenderOverflowCounter && (\n        <AvatarBase\n          twClassName=\"bg-icon-default\"\n          hasBorder\n          fallbackText={`+${overflowCounter}`}\n          fallbackTextProps={{\n            variant: MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT[size],\n            color: TextColor.PrimaryInverse,\n          }}\n          size={size}\n          shape={\n            variant === AvatarGroupVariant.Network\n              ? AvatarBaseShape.Square\n              : AvatarBaseShape.Circle\n          }\n          {...overflowTextProps}\n        />\n      )}\n    </View>\n  );\n};\n"]}

package/dist/components/AvatarGroup/AvatarGroup.constants.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT = exports.TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS = void 0;
+const types_1 = require("../../types/index.cjs");
+const Text_1 = require("../Text/index.cjs");
+// Mappings
+exports.TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS = {
+    [types_1.AvatarGroupSize.Xs]: 'gap-[-6px]',
+    [types_1.AvatarGroupSize.Sm]: 'gap-[-10px]',
+    [types_1.AvatarGroupSize.Md]: 'gap-[-14px]',
+    [types_1.AvatarGroupSize.Lg]: 'gap-[-18px]',
+    [types_1.AvatarGroupSize.Xl]: 'gap-[-22px]',
+};
+exports.MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT = {
+    [types_1.AvatarGroupSize.Xs]: Text_1.TextVariant.BodyXs,
+    [types_1.AvatarGroupSize.Sm]: Text_1.TextVariant.BodySm,
+    [types_1.AvatarGroupSize.Md]: Text_1.TextVariant.BodyMd,
+    [types_1.AvatarGroupSize.Lg]: Text_1.TextVariant.HeadingMd,
+    [types_1.AvatarGroupSize.Xl]: Text_1.TextVariant.HeadingMd,
+};
+//# sourceMappingURL=AvatarGroup.constants.cjs.map

package/dist/components/AvatarGroup/AvatarGroup.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.constants.ts"],"names":[],"mappings":";;;AAAA,iDAA8C;AAC9C,4CAAsC;AAEtC,WAAW;AACE,QAAA,+CAA+C,GAGxD;IACF,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,aAAa;IACnC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,aAAa;IACnC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,aAAa;IACnC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,aAAa;CACpC,CAAC;AAEW,QAAA,6CAA6C,GAGtD;IACF,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;IACxC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;IACxC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,MAAM;IACxC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,SAAS;IAC3C,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,kBAAW,CAAC,SAAS;CAC5C,CAAC","sourcesContent":["import { AvatarGroupSize } from '../../types';\nimport { TextVariant } from '../Text';\n\n// Mappings\nexport const TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'gap-[-6px]',\n  [AvatarGroupSize.Sm]: 'gap-[-10px]',\n  [AvatarGroupSize.Md]: 'gap-[-14px]',\n  [AvatarGroupSize.Lg]: 'gap-[-18px]',\n  [AvatarGroupSize.Xl]: 'gap-[-22px]',\n};\n\nexport const MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT: Record<\n  AvatarGroupSize,\n  TextVariant\n> = {\n  [AvatarGroupSize.Xs]: TextVariant.BodyXs,\n  [AvatarGroupSize.Sm]: TextVariant.BodySm,\n  [AvatarGroupSize.Md]: TextVariant.BodyMd,\n  [AvatarGroupSize.Lg]: TextVariant.HeadingMd,\n  [AvatarGroupSize.Xl]: TextVariant.HeadingMd,\n};\n"]}

package/dist/components/AvatarGroup/AvatarGroup.constants.d.cts

@@ -0,0 +1,5 @@
+import { AvatarGroupSize } from "../../types/index.cjs";
+import { TextVariant } from "../Text/index.cjs";
+export declare const TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS: Record<AvatarGroupSize, string>;
+export declare const MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT: Record<AvatarGroupSize, TextVariant>;
+//# sourceMappingURL=AvatarGroup.constants.d.cts.map

package/dist/components/AvatarGroup/AvatarGroup.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAC9C,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,eAAO,MAAM,+CAA+C,EAAE,MAAM,CAClE,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,6CAA6C,EAAE,MAAM,CAChE,eAAe,EACf,WAAW,CAOZ,CAAC"}

package/dist/components/AvatarGroup/AvatarGroup.constants.d.mts

@@ -0,0 +1,5 @@
+import { AvatarGroupSize } from "../../types/index.mjs";
+import { TextVariant } from "../Text/index.mjs";
+export declare const TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS: Record<AvatarGroupSize, string>;
+export declare const MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT: Record<AvatarGroupSize, TextVariant>;
+//# sourceMappingURL=AvatarGroup.constants.d.mts.map

package/dist/components/AvatarGroup/AvatarGroup.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAC9C,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAGtC,eAAO,MAAM,+CAA+C,EAAE,MAAM,CAClE,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,6CAA6C,EAAE,MAAM,CAChE,eAAe,EACf,WAAW,CAOZ,CAAC"}

package/dist/components/AvatarGroup/AvatarGroup.constants.mjs

@@ -0,0 +1,18 @@
+import { AvatarGroupSize } from "../../types/index.mjs";
+import { TextVariant } from "../Text/index.mjs";
+// Mappings
+export const TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS = {
+    [AvatarGroupSize.Xs]: 'gap-[-6px]',
+    [AvatarGroupSize.Sm]: 'gap-[-10px]',
+    [AvatarGroupSize.Md]: 'gap-[-14px]',
+    [AvatarGroupSize.Lg]: 'gap-[-18px]',
+    [AvatarGroupSize.Xl]: 'gap-[-22px]',
+};
+export const MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT = {
+    [AvatarGroupSize.Xs]: TextVariant.BodyXs,
+    [AvatarGroupSize.Sm]: TextVariant.BodySm,
+    [AvatarGroupSize.Md]: TextVariant.BodyMd,
+    [AvatarGroupSize.Lg]: TextVariant.HeadingMd,
+    [AvatarGroupSize.Xl]: TextVariant.HeadingMd,
+};
+//# sourceMappingURL=AvatarGroup.constants.mjs.map

package/dist/components/AvatarGroup/AvatarGroup.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAC9C,OAAO,EAAE,WAAW,EAAE,0BAAgB;AAEtC,WAAW;AACX,MAAM,CAAC,MAAM,+CAA+C,GAGxD;IACF,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,aAAa;IACnC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,aAAa;IACnC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,aAAa;IACnC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,aAAa;CACpC,CAAC;AAEF,MAAM,CAAC,MAAM,6CAA6C,GAGtD;IACF,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACxC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACxC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM;IACxC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,SAAS;IAC3C,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC,SAAS;CAC5C,CAAC","sourcesContent":["import { AvatarGroupSize } from '../../types';\nimport { TextVariant } from '../Text';\n\n// Mappings\nexport const TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'gap-[-6px]',\n  [AvatarGroupSize.Sm]: 'gap-[-10px]',\n  [AvatarGroupSize.Md]: 'gap-[-14px]',\n  [AvatarGroupSize.Lg]: 'gap-[-18px]',\n  [AvatarGroupSize.Xl]: 'gap-[-22px]',\n};\n\nexport const MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT: Record<\n  AvatarGroupSize,\n  TextVariant\n> = {\n  [AvatarGroupSize.Xs]: TextVariant.BodyXs,\n  [AvatarGroupSize.Sm]: TextVariant.BodySm,\n  [AvatarGroupSize.Md]: TextVariant.BodyMd,\n  [AvatarGroupSize.Lg]: TextVariant.HeadingMd,\n  [AvatarGroupSize.Xl]: TextVariant.HeadingMd,\n};\n"]}

package/dist/components/AvatarGroup/AvatarGroup.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { AvatarGroupProps } from "./AvatarGroup.types.cjs";
+export declare const AvatarGroup: ({ variant, avatarPropsArr, size, max, isReverse, overflowTextProps, style, twClassName, ...props }: AvatarGroupProps) => React.JSX.Element;
+//# sourceMappingURL=AvatarGroup.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAmB3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,uGAUrB,gBAAgB,sBAiFlB,CAAC"}

package/dist/components/AvatarGroup/AvatarGroup.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { AvatarGroupProps } from "./AvatarGroup.types.mjs";
+export declare const AvatarGroup: ({ variant, avatarPropsArr, size, max, isReverse, overflowTextProps, style, twClassName, ...props }: AvatarGroupProps) => React.JSX.Element;
+//# sourceMappingURL=AvatarGroup.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,cAAc;AAmB3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,uGAUrB,gBAAgB,sBAiFlB,CAAC"}