@metamask-previews/design-system-react-native 0.0.0-preview.bf69b6b → 0.0.0-preview.e1b50dd

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,79 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const AvatarAccount_1 = __importDefault(require("../AvatarAccount"));
+const AvatarFavicon_1 = __importDefault(require("../AvatarFavicon"));
+const AvatarNetwork_1 = __importDefault(require("../AvatarNetwork"));
+const AvatarToken_1 = __importDefault(require("../AvatarToken"));
+const Text_1 = __importStar(require("../Text"));
+const AvatarGroup_constants_1 = require("./AvatarGroup.constants");
+const AvatarGroup_types_1 = require("./AvatarGroup.types");
+const AvatarGroup_utilities_1 = require("./AvatarGroup.utilities");
+const AvatarGroup = ({ variant, avatarPropsArr, size = AvatarGroup_constants_1.DEFAULT_AVATARGROUP_PROPS.size, max = AvatarGroup_constants_1.DEFAULT_AVATARGROUP_PROPS.max, isReverse = AvatarGroup_constants_1.DEFAULT_AVATARGROUP_PROPS.isReverse, style, twClassName, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const overflowCounter = avatarPropsArr.length - max;
+    const shouldRenderOverflowCounter = overflowCounter > 0;
+    const twContainerClassNames = (0, react_1.useMemo)(() => {
+        return (0, AvatarGroup_utilities_1.generateAvatarGroupContainerClassNames)({
+            size,
+            isReverse,
+            twClassName,
+        });
+    }, [size, isReverse, twClassName]);
+    const twOverflowTextContainerClassNames = (0, react_1.useMemo)(() => {
+        return (0, AvatarGroup_utilities_1.generateAvatarGroupOverflowTextContainerClassNames)({
+            size,
+            variant,
+        });
+    }, [size, variant]);
+    const renderAvatarList = (0, react_1.useCallback)(() => avatarPropsArr.slice(0, max).map((avatarProps, index) => {
+        switch (variant) {
+            case AvatarGroup_types_1.AvatarGroupVariant.Account:
+                return (<AvatarAccount_1.default key={`avatar-${index}`} {...avatarProps} size={size} testID={`avatar-${variant}`} hasBorder hasSolidBackgroundColor/>);
+            case AvatarGroup_types_1.AvatarGroupVariant.Favicon:
+                return (<AvatarFavicon_1.default key={`avatar-${index}`} {...avatarProps} size={size} testID={`avatar-${variant}`} hasBorder hasSolidBackgroundColor/>);
+            case AvatarGroup_types_1.AvatarGroupVariant.Network:
+                return (<AvatarNetwork_1.default key={`avatar-${index}`} {...avatarProps} size={size} testID={`avatar-${variant}`} hasBorder hasSolidBackgroundColor/>);
+            case AvatarGroup_types_1.AvatarGroupVariant.Token:
+                return (<AvatarToken_1.default key={`avatar-${index}`} {...avatarProps} size={size} testID={`avatar-${variant}`} hasBorder hasSolidBackgroundColor/>);
+            default:
+                throw new Error(`Invalid Avatar Variant: ${variant}. Expected one of: ${Object.values(AvatarGroup_types_1.AvatarGroupVariant).join(', ')}`);
+        }
+    }), [avatarPropsArr, max, size, tw]);
+    return (<react_native_1.View style={[tw `${twContainerClassNames}`, style]} {...props}>
+      {renderAvatarList()}
+      {shouldRenderOverflowCounter && (<react_native_1.View style={tw `${twOverflowTextContainerClassNames}`}>
+          <Text_1.default variant={AvatarGroup_constants_1.MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT[size]} color={Text_1.TextColor.PrimaryInverse} testID="avatar-overflow-text">{`+${overflowCounter}`}</Text_1.default>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.default = AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/AvatarGroup/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { View } from 'react-native';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\n\nimport AvatarAccount, { AvatarAccountProps } from '../AvatarAccount';\nimport AvatarFavicon, { AvatarFaviconProps } from '../AvatarFavicon';\nimport AvatarNetwork, { AvatarNetworkProps } from '../AvatarNetwork';\nimport AvatarToken, { AvatarTokenProps } from '../AvatarToken';\nimport Text, { TextColor } from '../Text';\nimport {\n  MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT,\n  DEFAULT_AVATARGROUP_PROPS,\n} from './AvatarGroup.constants';\nimport { AvatarGroupProps, AvatarGroupVariant } from './AvatarGroup.types';\nimport {\n  generateAvatarGroupContainerClassNames,\n  generateAvatarGroupOverflowTextContainerClassNames,\n} from './AvatarGroup.utilities';\n\nconst AvatarGroup = ({\n  variant,\n  avatarPropsArr,\n  size = DEFAULT_AVATARGROUP_PROPS.size,\n  max = DEFAULT_AVATARGROUP_PROPS.max,\n  isReverse = DEFAULT_AVATARGROUP_PROPS.isReverse,\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 = useMemo(() => {\n    return generateAvatarGroupContainerClassNames({\n      size,\n      isReverse,\n      twClassName,\n    });\n  }, [size, isReverse, twClassName]);\n  const twOverflowTextContainerClassNames = useMemo(() => {\n    return generateAvatarGroupOverflowTextContainerClassNames({\n      size,\n      variant,\n    });\n  }, [size, variant]);\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                testID={`avatar-${variant}`}\n                hasBorder\n                hasSolidBackgroundColor\n              />\n            );\n          case AvatarGroupVariant.Favicon:\n            return (\n              <AvatarFavicon\n                key={`avatar-${index}`}\n                {...(avatarProps as AvatarFaviconProps)}\n                size={size}\n                testID={`avatar-${variant}`}\n                hasBorder\n                hasSolidBackgroundColor\n              />\n            );\n          case AvatarGroupVariant.Network:\n            return (\n              <AvatarNetwork\n                key={`avatar-${index}`}\n                {...(avatarProps as AvatarNetworkProps)}\n                size={size}\n                testID={`avatar-${variant}`}\n                hasBorder\n                hasSolidBackgroundColor\n              />\n            );\n          case AvatarGroupVariant.Token:\n            return (\n              <AvatarToken\n                key={`avatar-${index}`}\n                {...(avatarProps as AvatarTokenProps)}\n                size={size}\n                testID={`avatar-${variant}`}\n                hasBorder\n                hasSolidBackgroundColor\n              />\n            );\n          default:\n            throw new Error(\n              `Invalid Avatar Variant: ${variant}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`,\n            );\n        }\n      }),\n    [avatarPropsArr, max, size, tw],\n  );\n\n  return (\n    <View style={[tw`${twContainerClassNames}`, style]} {...props}>\n      {renderAvatarList()}\n      {shouldRenderOverflowCounter && (\n        <View style={tw`${twOverflowTextContainerClassNames}`}>\n          <Text\n            variant={MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT[size]}\n            color={TextColor.PrimaryInverse}\n            testID=\"avatar-overflow-text\"\n          >{`+${overflowCounter}`}</Text>\n        </View>\n      )}\n    </View>\n  );\n};\n\nexport default AvatarGroup;\n"]}

package/dist/components/AvatarGroup/AvatarGroup.types.d.ts

@@ -0,0 +1,70 @@
+import { ViewProps } from 'react-native';
+import { AvatarGroupSize } from '../../shared/enums';
+import { AvatarAccountProps } from '../AvatarAccount';
+import { AvatarFaviconProps } from '../AvatarFavicon';
+import { AvatarNetworkProps } from '../AvatarNetwork';
+import { AvatarTokenProps } from '../AvatarToken';
+/**
+ * AvatarGroup variants.
+ */
+export declare enum AvatarGroupVariant {
+    Account = "Account",
+    Favicon = "Favicon",
+    Network = "Network",
+    Token = "Token"
+}
+type BaseAvatarGroupProps = {
+    /**
+     * Optional enum to select between Avatar Group sizes.
+     * @default AvatarGroupSize.Md
+     */
+    size?: AvatarGroupSize;
+    /**
+     * Optional enum to select max number of Avatars visible,
+     * before the overflow counter being displayed
+     * @default 4
+     */
+    max?: number;
+    /**
+     * Optional prop to reverse the direction of the AvatarGroup
+     */
+    isReverse?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+} & ViewProps;
+/**
+ * AvatarGroup props.
+ */
+export type AvatarGroupProps = BaseAvatarGroupProps & ({
+    variant: AvatarGroupVariant.Account;
+    /**
+     * A list of Avatars to be horizontally stacked.
+     * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
+     */
+    avatarPropsArr: AvatarAccountProps[];
+} | {
+    variant: AvatarGroupVariant.Favicon;
+    /**
+     * A list of Avatars to be horizontally stacked.
+     * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
+     */
+    avatarPropsArr: AvatarFaviconProps[];
+} | {
+    variant: AvatarGroupVariant.Network;
+    /**
+     * A list of Avatars to be horizontally stacked.
+     * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
+     */
+    avatarPropsArr: AvatarNetworkProps[];
+} | {
+    variant: AvatarGroupVariant.Token;
+    /**
+     * A list of Avatars to be horizontally stacked.
+     * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
+     */
+    avatarPropsArr: AvatarTokenProps[];
+});
+export {};
+//# sourceMappingURL=AvatarGroup.types.d.ts.map

package/dist/components/AvatarGroup/AvatarGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD;;GAEG;AACH,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,KAAK,oBAAoB,GAAG;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CACI;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,KAAK,CAAC;IAClC;;;OAGG;IACH,cAAc,EAAE,gBAAgB,EAAE,CAAC;CACpC,CACJ,CAAC"}

package/dist/components/AvatarGroup/AvatarGroup.types.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroupVariant = void 0;
+/**
+ * AvatarGroup variants.
+ */
+var AvatarGroupVariant;
+(function (AvatarGroupVariant) {
+    AvatarGroupVariant["Account"] = "Account";
+    AvatarGroupVariant["Favicon"] = "Favicon";
+    AvatarGroupVariant["Network"] = "Network";
+    AvatarGroupVariant["Token"] = "Token";
+})(AvatarGroupVariant || (exports.AvatarGroupVariant = AvatarGroupVariant = {}));
+//# sourceMappingURL=AvatarGroup.types.js.map

package/dist/components/AvatarGroup/AvatarGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.types.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":";;;AAQA;;GAEG;AACH,IAAY,kBAKX;AALD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,yCAAmB,CAAA;IACnB,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EALW,kBAAkB,kCAAlB,kBAAkB,QAK7B","sourcesContent":["import { ViewProps } from 'react-native';\n\nimport { AvatarGroupSize } from '../../shared/enums';\nimport { AvatarAccountProps } from '../AvatarAccount';\nimport { AvatarFaviconProps } from '../AvatarFavicon';\nimport { AvatarNetworkProps } from '../AvatarNetwork';\nimport { AvatarTokenProps } from '../AvatarToken';\n\n/**\n * AvatarGroup variants.\n */\nexport enum AvatarGroupVariant {\n  Account = 'Account',\n  Favicon = 'Favicon',\n  Network = 'Network',\n  Token = 'Token',\n}\n\ntype BaseAvatarGroupProps = {\n  /**\n   * Optional enum to select between Avatar Group sizes.\n   * @default AvatarGroupSize.Md\n   */\n  size?: AvatarGroupSize;\n  /**\n   * Optional enum to select max number of Avatars visible,\n   * before the overflow counter being displayed\n   * @default 4\n   */\n  max?: number;\n  /**\n   * Optional prop to reverse the direction of the AvatarGroup\n   */\n  isReverse?: boolean;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * AvatarGroup props.\n */\nexport type AvatarGroupProps = BaseAvatarGroupProps &\n  (\n    | {\n        variant: AvatarGroupVariant.Account;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarAccountProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Favicon;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarFaviconProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Network;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarNetworkProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Token;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarTokenProps[];\n      }\n  );\n"]}

package/dist/components/AvatarGroup/AvatarGroup.utilities.d.ts

@@ -0,0 +1,48 @@
+import type { AvatarGroupProps } from './AvatarGroup.types';
+/**
+ * Generates a Tailwind class name string for the container of an avatar group.
+ *
+ * This function constructs a class name string based on the avatar group's `size`,
+ * `isReverse`, and optional additional Tailwind class names.
+ *
+ * @param size - The size of the avatar group, determining spacing between avatars.
+ * @param isReverse - A boolean indicating whether the avatar group should be reversed in order.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A string of Tailwind class names representing the avatar group's container styles.
+ *
+ * Example:
+ * ```
+ * const classNames = generateAvatarGroupContainerClassNames({
+ *   size: 'md',
+ *   isReverse: true,
+ *   twClassName: 'justify-center',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "flex-row-reverse gap-[8px] justify-center"
+ * ```
+ */
+export declare const generateAvatarGroupContainerClassNames: ({ size, isReverse, twClassName, }: Partial<AvatarGroupProps>) => string;
+/**
+ * Generates a Tailwind class name string for the overflow text container in an avatar group.
+ *
+ * This function constructs a class name string based on the avatar group's `size`,
+ * `variant`, and default styling rules.
+ *
+ * @param size - The size of the avatar group, determining dimensions and border width.
+ * @param variant - The variant of the avatar group, affecting border radius.
+ * @returns A string of Tailwind class names representing the avatar group's overflow text container styles.
+ *
+ * Example:
+ * ```
+ * const classNames = generateAvatarGroupOverflowTextContainerClassNames({
+ *   size: 48,
+ *   variant: 'network',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "bg-icon-default items-center justify-center overflow-hidden w-[52px] h-[52px] rounded-md border-background-default border-[2px]"
+ * ```
+ */
+export declare const generateAvatarGroupOverflowTextContainerClassNames: ({ size, variant, }: Partial<AvatarGroupProps>) => string;
+//# sourceMappingURL=AvatarGroup.utilities.d.ts.map

package/dist/components/AvatarGroup/AvatarGroup.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.utilities.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.utilities.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAO5D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,sCAAsC,sCAIhD,QAAQ,gBAAgB,CAAC,KAAG,MAK9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kDAAkD,uBAG5D,QAAQ,gBAAgB,CAAC,KAAG,MAY9B,CAAC"}

package/dist/components/AvatarGroup/AvatarGroup.utilities.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAvatarGroupOverflowTextContainerClassNames = exports.generateAvatarGroupContainerClassNames = void 0;
+/* eslint-disable jsdoc/check-param-names */
+/* eslint-disable jsdoc/require-param */
+const AvatarGroup_constants_1 = require("./AvatarGroup.constants");
+const AvatarGroup_types_1 = require("./AvatarGroup.types");
+const AvatarBase_constants_1 = require("../../primitives/AvatarBase/AvatarBase.constants");
+/**
+ * Generates a Tailwind class name string for the container of an avatar group.
+ *
+ * This function constructs a class name string based on the avatar group's `size`,
+ * `isReverse`, and optional additional Tailwind class names.
+ *
+ * @param size - The size of the avatar group, determining spacing between avatars.
+ * @param isReverse - A boolean indicating whether the avatar group should be reversed in order.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A string of Tailwind class names representing the avatar group's container styles.
+ *
+ * Example:
+ * ```
+ * const classNames = generateAvatarGroupContainerClassNames({
+ *   size: 'md',
+ *   isReverse: true,
+ *   twClassName: 'justify-center',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "flex-row-reverse gap-[8px] justify-center"
+ * ```
+ */
+const generateAvatarGroupContainerClassNames = ({ size = AvatarGroup_constants_1.DEFAULT_AVATARGROUP_PROPS.size, isReverse = AvatarGroup_constants_1.DEFAULT_AVATARGROUP_PROPS.isReverse, twClassName = '', }) => {
+    const rowStyle = isReverse ? 'flex-row-reverse' : 'flex-row';
+    const gapStyle = `gap-[${AvatarGroup_constants_1.MAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size]}px]`;
+    return `${rowStyle} ${gapStyle} ${twClassName}`.trim();
+};
+exports.generateAvatarGroupContainerClassNames = generateAvatarGroupContainerClassNames;
+/**
+ * Generates a Tailwind class name string for the overflow text container in an avatar group.
+ *
+ * This function constructs a class name string based on the avatar group's `size`,
+ * `variant`, and default styling rules.
+ *
+ * @param size - The size of the avatar group, determining dimensions and border width.
+ * @param variant - The variant of the avatar group, affecting border radius.
+ * @returns A string of Tailwind class names representing the avatar group's overflow text container styles.
+ *
+ * Example:
+ * ```
+ * const classNames = generateAvatarGroupOverflowTextContainerClassNames({
+ *   size: 48,
+ *   variant: 'network',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "bg-icon-default items-center justify-center overflow-hidden w-[52px] h-[52px] rounded-md border-background-default border-[2px]"
+ * ```
+ */
+const generateAvatarGroupOverflowTextContainerClassNames = ({ size = AvatarGroup_constants_1.DEFAULT_AVATARGROUP_PROPS.size, variant, }) => {
+    const baseStyle = 'bg-icon-default items-center justify-center overflow-hidden';
+    const totalSize = Number(size) + AvatarBase_constants_1.MAP_AVATARBASE_SIZE_BORDERWIDTH[size] * 2;
+    const sizeStyle = `w-[${totalSize}px] h-[${totalSize}px]`;
+    const borderColorStyle = 'border-background-default';
+    const borderWidthStyle = `border-[${AvatarBase_constants_1.MAP_AVATARBASE_SIZE_BORDERWIDTH[size]}px]`;
+    const borderRadiusStyle = variant === AvatarGroup_types_1.AvatarGroupVariant.Network
+        ? AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_SHAPE[size]
+        : 'rounded-full';
+    return `${baseStyle} ${sizeStyle} ${borderRadiusStyle} ${borderColorStyle} ${borderWidthStyle}`;
+};
+exports.generateAvatarGroupOverflowTextContainerClassNames = generateAvatarGroupOverflowTextContainerClassNames;
+//# sourceMappingURL=AvatarGroup.utilities.js.map

package/dist/components/AvatarGroup/AvatarGroup.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.utilities.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.utilities.ts"],"names":[],"mappings":";;;AAAA,4CAA4C;AAC5C,wCAAwC;AACxC,mEAGiC;AAEjC,2DAAyD;AACzD,2FAG0D;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACI,MAAM,sCAAsC,GAAG,CAAC,EACrD,IAAI,GAAG,iDAAyB,CAAC,IAAI,EACrC,SAAS,GAAG,iDAAyB,CAAC,SAAS,EAC/C,WAAW,GAAG,EAAE,GACU,EAAU,EAAE;IACtC,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC;IAC7D,MAAM,QAAQ,GAAG,QAAQ,gEAAwC,CAAC,IAAI,CAAC,KAAK,CAAC;IAE7E,OAAO,GAAG,QAAQ,IAAI,QAAQ,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;AACzD,CAAC,CAAC;AATW,QAAA,sCAAsC,0CASjD;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACI,MAAM,kDAAkD,GAAG,CAAC,EACjE,IAAI,GAAG,iDAAyB,CAAC,IAAI,EACrC,OAAO,GACmB,EAAU,EAAE;IACtC,MAAM,SAAS,GACb,6DAA6D,CAAC;IAChE,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,sDAA+B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3E,MAAM,SAAS,GAAG,MAAM,SAAS,UAAU,SAAS,KAAK,CAAC;IAC1D,MAAM,gBAAgB,GAAG,2BAA2B,CAAC;IACrD,MAAM,gBAAgB,GAAG,WAAW,sDAA+B,CAAC,IAAI,CAAC,KAAK,CAAC;IAC/E,MAAM,iBAAiB,GACrB,OAAO,KAAK,sCAAkB,CAAC,OAAO;QACpC,CAAC,CAAC,uDAAgC,CAAC,IAAI,CAAC;QACxC,CAAC,CAAC,cAAc,CAAC;IACrB,OAAO,GAAG,SAAS,IAAI,SAAS,IAAI,iBAAiB,IAAI,gBAAgB,IAAI,gBAAgB,EAAE,CAAC;AAClG,CAAC,CAAC;AAfW,QAAA,kDAAkD,sDAe7D","sourcesContent":["/* eslint-disable jsdoc/check-param-names */\n/* eslint-disable jsdoc/require-param */\nimport {\n  DEFAULT_AVATARGROUP_PROPS,\n  MAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS,\n} from './AvatarGroup.constants';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\nimport { AvatarGroupVariant } from './AvatarGroup.types';\nimport {\n  TWCLASSMAP_AVATARBASE_SIZE_SHAPE,\n  MAP_AVATARBASE_SIZE_BORDERWIDTH,\n} from '../../primitives/AvatarBase/AvatarBase.constants';\n\n/**\n * Generates a Tailwind class name string for the container of an avatar group.\n *\n * This function constructs a class name string based on the avatar group's `size`,\n * `isReverse`, and optional additional Tailwind class names.\n *\n * @param size - The size of the avatar group, determining spacing between avatars.\n * @param isReverse - A boolean indicating whether the avatar group should be reversed in order.\n * @param twClassName - Additional Tailwind class names for customization.\n * @returns A string of Tailwind class names representing the avatar group's container styles.\n *\n * Example:\n * ```\n * const classNames = generateAvatarGroupContainerClassNames({\n *   size: 'md',\n *   isReverse: true,\n *   twClassName: 'justify-center',\n * });\n *\n * console.log(classNames);\n * // Output: \"flex-row-reverse gap-[8px] justify-center\"\n * ```\n */\nexport const generateAvatarGroupContainerClassNames = ({\n  size = DEFAULT_AVATARGROUP_PROPS.size,\n  isReverse = DEFAULT_AVATARGROUP_PROPS.isReverse,\n  twClassName = '',\n}: Partial<AvatarGroupProps>): string => {\n  const rowStyle = isReverse ? 'flex-row-reverse' : 'flex-row';\n  const gapStyle = `gap-[${MAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size]}px]`;\n\n  return `${rowStyle} ${gapStyle} ${twClassName}`.trim();\n};\n\n/**\n * Generates a Tailwind class name string for the overflow text container in an avatar group.\n *\n * This function constructs a class name string based on the avatar group's `size`,\n * `variant`, and default styling rules.\n *\n * @param size - The size of the avatar group, determining dimensions and border width.\n * @param variant - The variant of the avatar group, affecting border radius.\n * @returns A string of Tailwind class names representing the avatar group's overflow text container styles.\n *\n * Example:\n * ```\n * const classNames = generateAvatarGroupOverflowTextContainerClassNames({\n *   size: 48,\n *   variant: 'network',\n * });\n *\n * console.log(classNames);\n * // Output: \"bg-icon-default items-center justify-center overflow-hidden w-[52px] h-[52px] rounded-md border-background-default border-[2px]\"\n * ```\n */\nexport const generateAvatarGroupOverflowTextContainerClassNames = ({\n  size = DEFAULT_AVATARGROUP_PROPS.size,\n  variant,\n}: Partial<AvatarGroupProps>): string => {\n  const baseStyle =\n    'bg-icon-default items-center justify-center overflow-hidden';\n  const totalSize = Number(size) + MAP_AVATARBASE_SIZE_BORDERWIDTH[size] * 2;\n  const sizeStyle = `w-[${totalSize}px] h-[${totalSize}px]`;\n  const borderColorStyle = 'border-background-default';\n  const borderWidthStyle = `border-[${MAP_AVATARBASE_SIZE_BORDERWIDTH[size]}px]`;\n  const borderRadiusStyle =\n    variant === AvatarGroupVariant.Network\n      ? TWCLASSMAP_AVATARBASE_SIZE_SHAPE[size]\n      : 'rounded-full';\n  return `${baseStyle} ${sizeStyle} ${borderRadiusStyle} ${borderColorStyle} ${borderWidthStyle}`;\n};\n"]}

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

@@ -0,0 +1,5 @@
+export { default } from './AvatarGroup';
+export type { AvatarGroupProps } from './AvatarGroup.types';
+export { AvatarGroupSize } from '../../shared/enums';
+export { AvatarGroupVariant } from './AvatarGroup.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/AvatarGroup/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroupVariant = exports.AvatarGroupSize = exports.default = void 0;
+var AvatarGroup_1 = require("./AvatarGroup");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AvatarGroup_1).default; } });
+var enums_1 = require("../../shared/enums");
+Object.defineProperty(exports, "AvatarGroupSize", { enumerable: true, get: function () { return enums_1.AvatarGroupSize; } });
+var AvatarGroup_types_1 = require("./AvatarGroup.types");
+Object.defineProperty(exports, "AvatarGroupVariant", { enumerable: true, get: function () { return AvatarGroup_types_1.AvatarGroupVariant; } });
+//# sourceMappingURL=index.js.map

package/dist/components/AvatarGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/index.ts"],"names":[],"mappings":";;;;;;AAAA,6CAAwC;AAA/B,uHAAA,OAAO,OAAA;AAEhB,4CAAqD;AAA5C,wGAAA,eAAe,OAAA;AACxB,yDAAyD;AAAhD,uHAAA,kBAAkB,OAAA","sourcesContent":["export { default } from './AvatarGroup';\nexport type { AvatarGroupProps } from './AvatarGroup.types';\nexport { AvatarGroupSize } from '../../shared/enums';\nexport { AvatarGroupVariant } from './AvatarGroup.types';\n"]}

package/dist/components/AvatarIcon/AvatarIcon.constants.d.ts

@@ -0,0 +1,9 @@
+import type { AvatarIconProps } from './AvatarIcon.types';
+import { AvatarIconSeverity } from './AvatarIcon.types';
+import { IconSize, IconColor } from '../Icon';
+import { AvatarIconSize } from '../../shared/enums';
+export declare const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<AvatarIconSeverity, string>;
+export declare const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize>;
+export declare const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<AvatarIconSeverity, IconColor>;
+export declare const DEFAULT_AVATARICON_PROPS: Required<Pick<AvatarIconProps, 'size' | 'shape' | 'severity'>>;
+//# sourceMappingURL=AvatarIcon.constants.d.ts.map

package/dist/components/AvatarIcon/AvatarIcon.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.constants.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAmB,MAAM,oBAAoB,CAAC;AAGrE,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,kBAAkB,EAClB,MAAM,CAOP,CAAC;AACF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAMzE,CAAC;AACF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CACpD,kBAAkB,EAClB,SAAS,CAOV,CAAC;AAGF,eAAO,MAAM,wBAAwB,EAAE,QAAQ,CAC7C,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,CAKrD,CAAC"}

package/dist/components/AvatarIcon/AvatarIcon.constants.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_AVATARICON_PROPS = exports.MAP_AVATARICON_SEVERITY_ICONCOLOR = exports.MAP_AVATARICON_SIZE_ICONSIZE = exports.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = void 0;
+const AvatarIcon_types_1 = require("./AvatarIcon.types");
+const Icon_1 = require("../Icon");
+const enums_1 = require("../../shared/enums");
+// Mappings
+exports.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = {
+    [AvatarIcon_types_1.AvatarIconSeverity.Default]: 'bg-background-muted',
+    [AvatarIcon_types_1.AvatarIconSeverity.Info]: 'bg-info-muted',
+    [AvatarIcon_types_1.AvatarIconSeverity.Success]: 'bg-success-muted',
+    [AvatarIcon_types_1.AvatarIconSeverity.Error]: 'bg-error-muted',
+    [AvatarIcon_types_1.AvatarIconSeverity.Warning]: 'bg-warning-muted',
+};
+exports.MAP_AVATARICON_SIZE_ICONSIZE = {
+    [enums_1.AvatarIconSize.Xs]: Icon_1.IconSize.Xs,
+    [enums_1.AvatarIconSize.Sm]: Icon_1.IconSize.Sm,
+    [enums_1.AvatarIconSize.Md]: Icon_1.IconSize.Md,
+    [enums_1.AvatarIconSize.Lg]: Icon_1.IconSize.Lg,
+    [enums_1.AvatarIconSize.Xl]: Icon_1.IconSize.Xl, // 48px avatar -> 32px icon
+};
+exports.MAP_AVATARICON_SEVERITY_ICONCOLOR = {
+    [AvatarIcon_types_1.AvatarIconSeverity.Default]: Icon_1.IconColor.IconAlternative,
+    [AvatarIcon_types_1.AvatarIconSeverity.Info]: Icon_1.IconColor.InfoDefault,
+    [AvatarIcon_types_1.AvatarIconSeverity.Success]: Icon_1.IconColor.SuccessDefault,
+    [AvatarIcon_types_1.AvatarIconSeverity.Error]: Icon_1.IconColor.ErrorDefault,
+    [AvatarIcon_types_1.AvatarIconSeverity.Warning]: Icon_1.IconColor.WarningDefault,
+};
+// Defaults
+exports.DEFAULT_AVATARICON_PROPS = {
+    size: enums_1.AvatarIconSize.Md,
+    shape: enums_1.AvatarBaseShape.Circle,
+    severity: AvatarIcon_types_1.AvatarIconSeverity.Default,
+};
+//# sourceMappingURL=AvatarIcon.constants.js.map

package/dist/components/AvatarIcon/AvatarIcon.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.constants.js","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":";;;AACA,yDAAwD;AACxD,kCAA8C;AAC9C,8CAAqE;AAErE,WAAW;AACE,QAAA,8CAA8C,GAGvD;IACF,CAAC,qCAAkB,CAAC,OAAO,CAAC,EAAE,qBAAqB;IACnD,CAAC,qCAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,qCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,qCAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,qCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,sBAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACW,QAAA,iCAAiC,GAG1C;IACF,CAAC,qCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,eAAe;IACvD,CAAC,qCAAkB,CAAC,IAAI,CAAC,EAAE,gBAAS,CAAC,WAAW;IAChD,CAAC,qCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,cAAc;IACtD,CAAC,qCAAkB,CAAC,KAAK,CAAC,EAAE,gBAAS,CAAC,YAAY;IAClD,CAAC,qCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,cAAc;CACvD,CAAC;AAEF,WAAW;AACE,QAAA,wBAAwB,GAEjC;IACF,IAAI,EAAE,sBAAc,CAAC,EAAE;IACvB,KAAK,EAAE,uBAAe,CAAC,MAAM;IAC7B,QAAQ,EAAE,qCAAkB,CAAC,OAAO;CACrC,CAAC","sourcesContent":["import type { AvatarIconProps } from './AvatarIcon.types';\nimport { AvatarIconSeverity } from './AvatarIcon.types';\nimport { IconSize, IconColor } from '../Icon';\nimport { AvatarIconSize, AvatarBaseShape } from '../../shared/enums';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Default]: 'bg-background-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Error]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Default]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n\n// Defaults\nexport const DEFAULT_AVATARICON_PROPS: Required<\n  Pick<AvatarIconProps, 'size' | 'shape' | 'severity'>\n> = {\n  size: AvatarIconSize.Md,\n  shape: AvatarBaseShape.Circle,\n  severity: AvatarIconSeverity.Default,\n};\n"]}

package/dist/components/AvatarIcon/AvatarIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { AvatarIconProps } from './AvatarIcon.types';
+declare const AvatarIcon: ({ size, shape, severity, iconName, iconProps, twClassName, style, ...props }: AvatarIconProps) => React.JSX.Element;
+export default AvatarIcon;
+//# sourceMappingURL=AvatarIcon.d.ts.map

package/dist/components/AvatarIcon/AvatarIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAOvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAK1D,QAAA,MAAM,UAAU,iFASb,eAAe,sBAyBjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/AvatarIcon/AvatarIcon.js

@@ -0,0 +1,49 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const AvatarIcon_constants_1 = require("./AvatarIcon.constants");
+const AvatarIcon_utilities_1 = require("./AvatarIcon.utilities");
+const Icon_1 = __importDefault(require("../Icon"));
+const AvatarBase_1 = __importDefault(require("../../primitives/AvatarBase"));
+const AvatarIcon = ({ size = AvatarIcon_constants_1.DEFAULT_AVATARICON_PROPS.size, shape = AvatarIcon_constants_1.DEFAULT_AVATARICON_PROPS.shape, severity = AvatarIcon_constants_1.DEFAULT_AVATARICON_PROPS.severity, iconName, iconProps, twClassName = '', style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const twContainerClassNames = (0, react_1.useMemo)(() => {
+        return (0, AvatarIcon_utilities_1.generateAvatarIconContainerClassNames)({
+            severity,
+            twClassName,
+        });
+    }, [severity, twClassName]);
+    return (<AvatarBase_1.default size={size} shape={shape} style={[tw `${twContainerClassNames}`, style]} accessibilityRole="image" {...props}>
+      <Icon_1.default name={iconName} size={AvatarIcon_constants_1.MAP_AVATARICON_SIZE_ICONSIZE[size]} color={AvatarIcon_constants_1.MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]} {...iconProps}/>
+    </AvatarBase_1.default>);
+};
+exports.default = AvatarIcon;
+//# sourceMappingURL=AvatarIcon.js.map

package/dist/components/AvatarIcon/AvatarIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.js","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iEAAiE;AACjE,8FAA4E;AAC5E,+CAAuC;AAEvC,iEAIgC;AAEhC,iEAA+E;AAC/E,mDAA2B;AAC3B,6EAAqD;AAErD,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,GAAG,+CAAwB,CAAC,IAAI,EACpC,KAAK,GAAG,+CAAwB,CAAC,KAAK,EACtC,QAAQ,GAAG,+CAAwB,CAAC,QAAQ,EAC5C,QAAQ,EACR,SAAS,EACT,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzC,OAAO,IAAA,4DAAqC,EAAC;YAC3C,QAAQ;YACR,WAAW;SACZ,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,oBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,cAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,mDAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,KAAK,CAAC,CAAC,wDAAiC,CAAC,QAAQ,CAAC,CAAC,CACnD,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,oBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,UAAU,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\n\nimport {\n  DEFAULT_AVATARICON_PROPS,\n  MAP_AVATARICON_SIZE_ICONSIZE,\n  MAP_AVATARICON_SEVERITY_ICONCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\nimport { generateAvatarIconContainerClassNames } from './AvatarIcon.utilities';\nimport Icon from '../Icon';\nimport AvatarBase from '../../primitives/AvatarBase';\n\nconst AvatarIcon = ({\n  size = DEFAULT_AVATARICON_PROPS.size,\n  shape = DEFAULT_AVATARICON_PROPS.shape,\n  severity = DEFAULT_AVATARICON_PROPS.severity,\n  iconName,\n  iconProps,\n  twClassName = '',\n  style,\n  ...props\n}: AvatarIconProps) => {\n  const tw = useTailwind();\n  const twContainerClassNames = useMemo(() => {\n    return generateAvatarIconContainerClassNames({\n      severity,\n      twClassName,\n    });\n  }, [severity, twClassName]);\n\n  return (\n    <AvatarBase\n      size={size}\n      shape={shape}\n      style={[tw`${twContainerClassNames}`, style]}\n      accessibilityRole=\"image\"\n      {...props}\n    >\n      <Icon\n        name={iconName}\n        size={MAP_AVATARICON_SIZE_ICONSIZE[size]}\n        color={MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]}\n        {...iconProps}\n      />\n    </AvatarBase>\n  );\n};\n\nexport default AvatarIcon;\n"]}

package/dist/components/AvatarIcon/AvatarIcon.types.d.ts

@@ -0,0 +1,28 @@
+import { AvatarBaseProps } from '../../primitives/AvatarBase';
+import { IconName, IconProps } from '../Icon';
+export declare enum AvatarIconSeverity {
+    Default = "default",
+    Info = "info",
+    Success = "success",
+    Error = "error",
+    Warning = "warning"
+}
+/**
+ * AvatarIcon component props.
+ */
+export type AvatarIconProps = {
+    /**
+     * Optional prop to control the severity of the avatar
+     * @default AvatarIconSeverity.Default
+     */
+    severity?: AvatarIconSeverity;
+    /**
+     * Optional prop to specify an icon to show
+     */
+    iconName: IconName;
+    /**
+     * Optional prop to pass additional properties to the icon
+     */
+    iconProps?: Omit<IconProps, 'name'>;
+} & Omit<AvatarBaseProps, 'children' | 'fallbackText' | 'fallbackTextProps'>;
+//# sourceMappingURL=AvatarIcon.types.d.ts.map

package/dist/components/AvatarIcon/AvatarIcon.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.types.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE9C,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CACrC,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,cAAc,GAAG,mBAAmB,CAAC,CAAC"}

package/dist/components/AvatarIcon/AvatarIcon.types.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarIconSeverity = void 0;
+var AvatarIconSeverity;
+(function (AvatarIconSeverity) {
+    AvatarIconSeverity["Default"] = "default";
+    AvatarIconSeverity["Info"] = "info";
+    AvatarIconSeverity["Success"] = "success";
+    AvatarIconSeverity["Error"] = "error";
+    AvatarIconSeverity["Warning"] = "warning";
+})(AvatarIconSeverity || (exports.AvatarIconSeverity = AvatarIconSeverity = {}));
+//# sourceMappingURL=AvatarIcon.types.js.map

package/dist/components/AvatarIcon/AvatarIcon.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.types.js","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":";;;AAGA,IAAY,kBAMX;AAND,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,mCAAa,CAAA;IACb,yCAAmB,CAAA;IACnB,qCAAe,CAAA;IACf,yCAAmB,CAAA;AACrB,CAAC,EANW,kBAAkB,kCAAlB,kBAAkB,QAM7B","sourcesContent":["import { AvatarBaseProps } from '../../primitives/AvatarBase';\nimport { IconName, IconProps } from '../Icon';\n\nexport enum AvatarIconSeverity {\n  Default = 'default',\n  Info = 'info',\n  Success = 'success',\n  Error = 'error',\n  Warning = 'warning',\n}\n\n/**\n * AvatarIcon component props.\n */\nexport type AvatarIconProps = {\n  /**\n   * Optional prop to control the severity of the avatar\n   * @default AvatarIconSeverity.Default\n   */\n  severity?: AvatarIconSeverity;\n  /**\n   * Optional prop to specify an icon to show\n   */\n  iconName: IconName;\n  /**\n   * Optional prop to pass additional properties to the icon\n   */\n  iconProps?: Omit<IconProps, 'name'>;\n} & Omit<AvatarBaseProps, 'children' | 'fallbackText' | 'fallbackTextProps'>;\n"]}

package/dist/components/AvatarIcon/AvatarIcon.utilities.d.ts

@@ -0,0 +1,24 @@
+import type { AvatarIconProps } from './AvatarIcon.types';
+/**
+ * Generates a Tailwind class name string for the background color of an avatar icon.
+ *
+ * This function constructs a class name string based on the icon's `severity`
+ * and optional additional Tailwind class names.
+ *
+ * @param severity - The severity level of the avatar icon, affecting background color.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A string of Tailwind class names representing the avatar icon's container styles.
+ *
+ * Example:
+ * ```
+ * const classNames = generateAvatarIconContainerClassNames({
+ *   severity: 'error',
+ *   twClassName: 'border border-red-500',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "bg-error border border-red-500"
+ * ```
+ */
+export declare const generateAvatarIconContainerClassNames: ({ severity, twClassName, }: Partial<AvatarIconProps>) => string;
+//# sourceMappingURL=AvatarIcon.utilities.d.ts.map

package/dist/components/AvatarIcon/AvatarIcon.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.utilities.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.utilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,qCAAqC,+BAG/C,QAAQ,eAAe,CAAC,KAAG,MAE7B,CAAC"}

package/dist/components/AvatarIcon/AvatarIcon.utilities.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAvatarIconContainerClassNames = void 0;
+const AvatarIcon_constants_1 = require("./AvatarIcon.constants");
+/**
+ * Generates a Tailwind class name string for the background color of an avatar icon.
+ *
+ * This function constructs a class name string based on the icon's `severity`
+ * and optional additional Tailwind class names.
+ *
+ * @param severity - The severity level of the avatar icon, affecting background color.
+ * @param twClassName - Additional Tailwind class names for customization.
+ * @returns A string of Tailwind class names representing the avatar icon's container styles.
+ *
+ * Example:
+ * ```
+ * const classNames = generateAvatarIconContainerClassNames({
+ *   severity: 'error',
+ *   twClassName: 'border border-red-500',
+ * });
+ *
+ * console.log(classNames);
+ * // Output: "bg-error border border-red-500"
+ * ```
+ */
+const generateAvatarIconContainerClassNames = ({ severity = AvatarIcon_constants_1.DEFAULT_AVATARICON_PROPS.severity, twClassName = '', }) => {
+    return `${AvatarIcon_constants_1.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity]} ${twClassName}`.trim();
+};
+exports.generateAvatarIconContainerClassNames = generateAvatarIconContainerClassNames;
+//# sourceMappingURL=AvatarIcon.utilities.js.map

package/dist/components/AvatarIcon/AvatarIcon.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.utilities.js","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.utilities.ts"],"names":[],"mappings":";;;AAGA,iEAGgC;AAEhC;;;;;;;;;;;;;;;;;;;;GAoBG;AACI,MAAM,qCAAqC,GAAG,CAAC,EACpD,QAAQ,GAAG,+CAAwB,CAAC,QAAQ,EAC5C,WAAW,GAAG,EAAE,GACS,EAAU,EAAE;IACrC,OAAO,GAAG,qEAA8C,CAAC,QAAQ,CAAC,IAAI,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC;AAC7F,CAAC,CAAC;AALW,QAAA,qCAAqC,yCAKhD","sourcesContent":["/* eslint-disable jsdoc/check-param-names */\n/* eslint-disable jsdoc/require-param */\nimport type { AvatarIconProps } from './AvatarIcon.types';\nimport {\n  TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n  DEFAULT_AVATARICON_PROPS,\n} from './AvatarIcon.constants';\n\n/**\n * Generates a Tailwind class name string for the background color of an avatar icon.\n *\n * This function constructs a class name string based on the icon's `severity`\n * and optional additional Tailwind class names.\n *\n * @param severity - The severity level of the avatar icon, affecting background color.\n * @param twClassName - Additional Tailwind class names for customization.\n * @returns A string of Tailwind class names representing the avatar icon's container styles.\n *\n * Example:\n * ```\n * const classNames = generateAvatarIconContainerClassNames({\n *   severity: 'error',\n *   twClassName: 'border border-red-500',\n * });\n *\n * console.log(classNames);\n * // Output: \"bg-error border border-red-500\"\n * ```\n */\nexport const generateAvatarIconContainerClassNames = ({\n  severity = DEFAULT_AVATARICON_PROPS.severity,\n  twClassName = '',\n}: Partial<AvatarIconProps>): string => {\n  return `${TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity]} ${twClassName}`.trim();\n};\n"]}

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

@@ -0,0 +1,5 @@
+export { default } from './AvatarIcon';
+export type { AvatarIconProps } from './AvatarIcon.types';
+export { AvatarIconSize } from '../../shared/enums';
+export { AvatarIconSeverity } from './AvatarIcon.types';
+//# sourceMappingURL=index.d.ts.map