npm - @metamask-previews/design-system-react-native - Versions diffs - 0.5.1-preview.ab80aae → 0.6.0-preview.3dc70e1 - Mend

@metamask-previews/design-system-react-native 0.5.1-preview.ab80aae → 0.6.0-preview.3dc70e1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
+## [0.6.0]
+### Added
+- Added `AfterHours` icon ([#879](https://github.com/MetaMask/metamask-design-system/pull/879))
 ## [0.5.1]
 ### Changed
@@ -116,7 +122,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - React Native integration with TWRNC preset support
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.6.0...HEAD
+[0.6.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.1...@metamask/design-system-react-native@0.6.0
 [0.5.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.0...@metamask/design-system-react-native@0.5.1
 [0.5.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.4.1...@metamask/design-system-react-native@0.5.0
 [0.4.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.4.0...@metamask/design-system-react-native@0.4.1

package/dist/components/AvatarBase/AvatarBase.cjs CHANGED Viewed

@@ -10,18 +10,16 @@ const react_native_1 = require("react-native/index.js");
 const types_1 = require("../../types/index.cjs");
 const Text_1 = require("../Text/index.cjs");
 const AvatarBase_constants_1 = require("./AvatarBase.constants.cjs");
-const AvatarBase = ({ children, size = types_1.AvatarBaseSize.Md, shape = types_1.AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName = '', style, ...props }) => {
+const AvatarBase = ({ children, size = types_1.AvatarBaseSize.Md, shape = types_1.AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName, style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const twContainerClassNames = `
-    items-center justify-center overflow-hidden bg-section
-    ${shape === types_1.AvatarBaseShape.Circle
-        ? 'rounded-full'
-        : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size]}
-    ${hasBorder ? AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size] : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size]}
-    ${hasBorder ? AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDER[size] : ''}
-    ${twClassName}
-  `;
-    return (<react_native_1.View style={[tw `${twContainerClassNames}`, style]} {...props}>
+    return (<react_native_1.View {...props} style={[
+            tw.style('items-center justify-center overflow-hidden bg-section', shape === types_1.AvatarBaseShape.Circle
+                ? 'rounded-full'
+                : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size], hasBorder
+                ? AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]
+                : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size], hasBorder && AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDER[size], twClassName),
+            style,
+        ]}>
       {fallbackText ? (<Text_1.Text color={Text_1.TextColor.TextMuted} variant={Text_1.TextVariant.BodySm} fontWeight={Text_1.FontWeight.Medium} {...fallbackTextProps} twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}>
           {fallbackText}
         </Text_1.Text>) : (children)}

package/dist/components/AvatarBase/AvatarBase.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,wDAAoC;AAEpC,iDAA8D;AAC9D,4CAAmE;AAEnE,qEAKgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,~~GAAG~~,~~EAAE,EAChB,~~KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;~~IACzB~~,~~MAAM~~,~~qBAAqB~~,~~GAAG;;MAG1B~~,~~KAAK~~,~~KAAK~~,~~uBAAe~~,~~CAAC~~,~~MAAM;QAC9B,~~CAAC,~~CAAC~~,~~cAAc;QAChB~~,CAAC,CAAC,~~sEAA+C~~,CAAC,~~IAAI~~,~~CAC1D;MACE~~,~~SAAS~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~qEAA8C~~,CAAC,~~IAAI~~,CAAC,CAAC,CAAC,CAAC,~~2DAAoC~~,CAAC,IAAI,CAAC~~;MAC7G~~,SAAS,CAAC,CAAC,~~CAAC~~,~~wDAAiC,~~CAAC,IAAI,CAAC,CAAC,CAAC,~~CAAC~~,~~EAAE;MACxD,WAAW;GACd,~~CAAC~~;IAEF~~,~~OAAO~~,~~CACL,~~CAAC,~~mBAAI~~,~~CAAC~~,~~KAAK~~,~~CAAC~~,CAAC,~~CAAC~~,~~EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,~~CAAC,~~CAAC~~,~~CAAC~~,~~IAAI~~,KAAK,CAAC,~~CAC5D~~;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,WAAI,CACH,KAAK,CAAC,CAAC,gBAAS,CAAC,SAAS,CAAC,CAC3B,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,iBAAiB,CAAC,CACtB,WAAW,CAAC,CAAC,aAAa,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAE7G;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;~~AAzCW~~,QAAA,UAAU,~~cAyCrB~~","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { Text, TextColor, TextVariant, FontWeight } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = ({\n children,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n fallbackText,\n fallbackTextProps,\n hasBorder = false,\n twClassName ~~= ''~~,\n style,\n ...props\n}: AvatarBaseProps) => {\n const tw = useTailwind();\n ~~const~~ ~~twContainerClassNames~~ = `\n items-center justify-center overflow-hidden bg-section\n ~~${\n~~ shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size]\n }\n ~~${hasBorder~~ ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size] : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size]}\n ${hasBorder ? TWCLASSMAP_AVATARBASE_SIZE_BORDER[size] ~~: ''}\~~n ${twClassName}\n ~~`;\~~n\n ~~return (~~\n ~~<View style={[tw`${twContainerClassNames}`, style]} {...props}~~>\n {fallbackText ? (\n <Text\n color={TextColor.TextMuted}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n {...fallbackTextProps}\n twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}\n >\n {fallbackText}\n </Text>\n ) : (\n children\n )}\n </View>\n );\n};\n"]}
1	+ {"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,wDAAoC;AAEpC,iDAA8D;AAC9D,4CAAmE;AAEnE,qEAKgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,wDAAwD,EACxD,KAAK,KAAK,uBAAe,CAAC,MAAM;gBAC9B,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,sEAA+C,CAAC,IAAI,CAAC,EACzD,SAAS;gBACP,CAAC,CAAC,qEAA8C,CAAC,IAAI,CAAC;gBACtD,CAAC,CAAC,2DAAoC,CAAC,IAAI,CAAC,EAC9C,SAAS,IAAI,wDAAiC,CAAC,IAAI,CAAC,EACpD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,WAAI,CACH,KAAK,CAAC,CAAC,gBAAS,CAAC,SAAS,CAAC,CAC3B,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,iBAAiB,CAAC,CACtB,WAAW,CAAC,CAAC,aAAa,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAE7G;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,UAAU,cA8CrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { Text, TextColor, TextVariant, FontWeight } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = ({\n children,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n fallbackText,\n fallbackTextProps,\n hasBorder = false,\n twClassName,\n style,\n ...props\n}: AvatarBaseProps) => {\n const tw = useTailwind();\n\n return (\n <View\n {...props}\n style={[\n tw.style(\n 'items-center justify-center overflow-hidden bg-section',\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n hasBorder\n ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n twClassName,\n ),\n style,\n ]}\n >\n {fallbackText ? (\n <Text\n color={TextColor.TextMuted}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n {...fallbackTextProps}\n twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}\n >\n {fallbackText}\n </Text>\n ) : (\n children\n )}\n </View>\n );\n};\n"]}

package/dist/components/AvatarBase/AvatarBase.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarBase.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAUpB,eAAe,~~sBA+BjB~~,CAAC"}
1	+ {"version":3,"file":"AvatarBase.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAUpB,eAAe,sBAoCjB,CAAC"}

package/dist/components/AvatarBase/AvatarBase.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarBase.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAUpB,eAAe,~~sBA+BjB~~,CAAC"}
1	+ {"version":3,"file":"AvatarBase.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,wGAUpB,eAAe,sBAoCjB,CAAC"}

package/dist/components/AvatarBase/AvatarBase.mjs CHANGED Viewed

@@ -11,18 +11,16 @@ import { View } from "react-native/index.js";
 import { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
 import { Text, TextColor, TextVariant, FontWeight } from "../Text/index.mjs";
 import { TWCLASSMAP_AVATARBASE_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE, TWCLASSMAP_AVATARBASE_SIZE_BORDER } from "./AvatarBase.constants.mjs";
-export const AvatarBase = ({ children, size = AvatarBaseSize.Md, shape = AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName = '', style, ...props }) => {
+export const AvatarBase = ({ children, size = AvatarBaseSize.Md, shape = AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName, style, ...props }) => {
     const tw = useTailwind();
-    const twContainerClassNames = `
-    items-center justify-center overflow-hidden bg-section
-    ${shape === AvatarBaseShape.Circle
-        ? 'rounded-full'
-        : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size]}
-    ${hasBorder ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size] : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size]}
-    ${hasBorder ? TWCLASSMAP_AVATARBASE_SIZE_BORDER[size] : ''}
-    ${twClassName}
-  `;
-    return (<View style={[tw `${twContainerClassNames}`, style]} {...props}>
+    return (<View {...props} style={[
+            tw.style('items-center justify-center overflow-hidden bg-section', shape === AvatarBaseShape.Circle
+                ? 'rounded-full'
+                : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size], hasBorder
+                ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]
+                : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size], hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size], twClassName),
+            style,
+        ]}>
       {fallbackText ? (<Text color={TextColor.TextMuted} variant={TextVariant.BodySm} fontWeight={FontWeight.Medium} {...fallbackTextProps} twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}>
           {fallbackText}
         </Text>) : (children)}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,~~GAAG~~,~~EAAE,EAChB,~~KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;~~IACzB~~,~~MAAM~~,~~qBAAqB~~,~~GAAG;;MAG1B~~,KAAK,KAAK,eAAe,CAAC,MAAM;~~QAC9B~~,CAAC,CAAC,cAAc;~~QAChB~~,CAAC,CAAC,+CAA+C,CAAC,IAAI,~~CAC1D;MACE~~,SAAS,CAAC,CAAC,~~CAAC,~~8CAA8C,CAAC,IAAI,CAAC,CAAC,CAAC,~~CAAC,~~oCAAoC,CAAC,IAAI,CAAC~~;MAC7G~~,SAAS,~~CAAC~~,~~CAAC,CAAC,~~iCAAiC,CAAC,IAAI,CAAC,~~CAAC~~,~~CAAC,CAAC,EAAE;MACxD,~~WAAW~~;GACd~~,~~CAAC~~;~~IAEF~~,~~OAAO,CACL,CAAC,IAAI,CAAC,~~KAAK,CAAC,~~CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAC5D~~;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAC3B,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,iBAAiB,CAAC,CACtB,WAAW,CAAC,CAAC,aAAa,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAE7G;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { Text, TextColor, TextVariant, FontWeight } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = ({\n children,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n fallbackText,\n fallbackTextProps,\n hasBorder = false,\n twClassName ~~= ''~~,\n style,\n ...props\n}: AvatarBaseProps) => {\n const tw = useTailwind();\n ~~const~~ ~~twContainerClassNames~~ = `\n items-center justify-center overflow-hidden bg-section\n ~~${\n~~ shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size]\n }\n ~~${hasBorder~~ ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size] : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size]}\n ${hasBorder ? TWCLASSMAP_AVATARBASE_SIZE_BORDER[size] ~~: ''}\~~n ${twClassName}\n ~~`;\~~n\n ~~return (~~\n ~~<View style={[tw`${twContainerClassNames}`, style]} {...props}~~>\n {fallbackText ? (\n <Text\n color={TextColor.TextMuted}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n {...fallbackTextProps}\n twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}\n >\n {fallbackText}\n </Text>\n ) : (\n children\n )}\n </View>\n );\n};\n"]}
1	+ {"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,8BAAoB;AAC9D,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,wDAAwD,EACxD,KAAK,KAAK,eAAe,CAAC,MAAM;gBAC9B,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,+CAA+C,CAAC,IAAI,CAAC,EACzD,SAAS;gBACP,CAAC,CAAC,8CAA8C,CAAC,IAAI,CAAC;gBACtD,CAAC,CAAC,oCAAoC,CAAC,IAAI,CAAC,EAC9C,SAAS,IAAI,iCAAiC,CAAC,IAAI,CAAC,EACpD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAC3B,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,iBAAiB,CAAC,CACtB,WAAW,CAAC,CAAC,aAAa,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAE7G;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { Text, TextColor, TextVariant, FontWeight } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = ({\n children,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n fallbackText,\n fallbackTextProps,\n hasBorder = false,\n twClassName,\n style,\n ...props\n}: AvatarBaseProps) => {\n const tw = useTailwind();\n\n return (\n <View\n {...props}\n style={[\n tw.style(\n 'items-center justify-center overflow-hidden bg-section',\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n hasBorder\n ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n twClassName,\n ),\n style,\n ]}\n >\n {fallbackText ? (\n <Text\n color={TextColor.TextMuted}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n {...fallbackTextProps}\n twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}\n >\n {fallbackText}\n </Text>\n ) : (\n children\n )}\n </View>\n );\n};\n"]}

package/dist/components/AvatarFavicon/AvatarFavicon.cjs CHANGED Viewed

@@ -28,7 +28,7 @@ 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 AvatarFavicon = ({ src, size = types_1.AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
     const backupFallbackText = fallbackText || name?.[0] || '';
     const onImageErrorHandler = (e) => {
@@ -39,7 +39,7 @@ const AvatarFavicon = ({ src, size = types_1.AvatarFaviconSize.Md, name, fallbac
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onSvgError?.(e);
     };
-    return (<AvatarBase_1.AvatarBase size={size} shape={types_1.AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} twClassName={twClassName} {...props}>
+    return (<AvatarBase_1.AvatarBase size={size} shape={types_1.AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
       {src && (<ImageOrSvg_1.ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
                 resizeMode: 'contain',
                 ...imageOrSvgProps?.imageProps,

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

	@@ -1 +1 @@
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"]}
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,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,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;AAhDW,QAAA,aAAa,iBAgDxB","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 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 {...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 CHANGED Viewed

@@ -1,4 +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;
+export declare const AvatarFavicon: ({ src, size, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }: AvatarFaviconProps) => React.JSX.Element;
 //# sourceMappingURL=AvatarFavicon.d.cts.map

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

	@@ -1 +1 @@
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"}
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,oFAQvB,kBAAkB,sBAwCpB,CAAC"}

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

@@ -1,4 +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;
+export declare const AvatarFavicon: ({ src, size, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }: AvatarFaviconProps) => React.JSX.Element;
 //# sourceMappingURL=AvatarFavicon.d.mts.map

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

	@@ -1 +1 @@
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"}
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,oFAQvB,kBAAkB,sBAwCpB,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ 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 }) => {
+export const AvatarFavicon = ({ src, size = AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = useState('');
     const backupFallbackText = fallbackText || name?.[0] || '';
     const onImageErrorHandler = (e) => {
@@ -20,7 +20,7 @@ export const AvatarFavicon = ({ src, size = AvatarFaviconSize.Md, name, fallback
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onSvgError?.(e);
     };
-    return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} twClassName={twClassName} {...props}>
+    return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
       {src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
                 resizeMode: 'contain',
                 ...imageOrSvgProps?.imageProps,

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

	@@ -1 +1 @@
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"]}
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,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,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 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 {...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/AvatarGroup/AvatarGroup.cjs CHANGED Viewed

@@ -39,10 +39,6 @@ const AvatarGroup = ({ variant, avatarPropsArr, size = types_1.AvatarGroupSize.M
     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:
@@ -57,7 +53,10 @@ const AvatarGroup = ({ variant, avatarPropsArr, size = types_1.AvatarGroupSize.M
                 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}>
+    return (<react_native_1.View {...props} style={[
+            tw.style(isReverse ? 'flex-row-reverse' : 'flex-row', AvatarGroup_constants_1.TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size], twClassName),
+            style,
+        ]}>
       {renderAvatarList()}
       {shouldRenderOverflowCounter && (<AvatarBase_1.AvatarBase twClassName="bg-icon-default" hasBorder fallbackText={`+${overflowCounter}`} fallbackTextProps={{
                 variant: AvatarGroup_constants_1.MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT[size],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAA2C;AAC3C,wDAAoC;AAEpC,iDAAkE;AAElE,8DAAiD;AACjD,wDAA4D;AAE5D,8DAAiD;AAEjD,8DAAiD;AAEjD,0DAA6C;AAC7C,4CAAoC;AAEpC,uEAGiC;AAG1B,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,cAAc,EACd,IAAI,GAAG,uBAAe,CAAC,EAAE,EACzB,GAAG,GAAG,CAAC,EACP,SAAS,GAAG,KAAK,EACjB,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,GAAG,GAAG,CAAC;IACpD,MAAM,2BAA2B,GAAG,eAAe,GAAG,CAAC,CAAC;~~IACxD~~,MAAM,~~qBAAqB,GAAG;MAC1B,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU;MAC3C,uEAA+C,CAAC,IAAI,CAAC;GACxD,CAAC;IAEF,MAAM,~~gBAAgB,GAAG,IAAA,mBAAW,EAClC,GAAG,EAAE,CACH,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QACtD,QAAQ,OAAO,EAAE;YACf,KAAK,0BAAkB,CAAC,OAAO;gBAC7B,OAAO,CACL,CAAC,6BAAa,CACZ,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,IAAK,WAAkC,CAAC,CACxC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,EACT,CACH,CAAC;YACJ,KAAK,0BAAkB,CAAC,OAAO;gBAC7B,OAAO,CACL,CAAC,6BAAa,CACZ,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,IAAK,WAAkC,CAAC,CACxC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,EACT,CACH,CAAC;YACJ,KAAK,0BAAkB,CAAC,OAAO;gBAC7B,OAAO,CACL,CAAC,6BAAa,CACZ,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,IAAK,WAAkC,CAAC,CACxC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,EACT,CACH,CAAC;YACJ,KAAK,0BAAkB,CAAC,KAAK;gBAC3B,OAAO,CACL,CAAC,yBAAW,CACV,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,IAAK,WAAgC,CAAC,CACtC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,EACT,CACH,CAAC;YACJ;gBACE,MAAM,IAAI,KAAK,CACb,2BAA2B,MAAM,CAAC,OAAO,CAAC,sBAAsB,MAAM,CAAC,MAAM,CAAC,0BAAkB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC/G,CAAC;SACL;IACH,CAAC,CAAC,EACJ,CAAC,cAAc,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,CAAC,CACrC,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,~~CAAC~~,KAAK,CAAC,CAAC,CAAC,EAAE,~~CAAA~~,~~GAAG~~,~~qBAAqB~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,~~CAC5D~~;MAAA,CAAC,gBAAgB,EAAE,CACnB;MAAA,CAAC,2BAA2B,IAAI,CAC9B,CAAC,uBAAU,CACT,WAAW,CAAC,iBAAiB,CAC7B,SAAS,CACT,YAAY,CAAC,CAAC,IAAI,eAAe,EAAE,CAAC,CACpC,iBAAiB,CAAC,CAAC;gBACjB,OAAO,EAAE,qEAA6C,CAAC,IAAI,CAAC;gBAC5D,KAAK,EAAE,gBAAS,CAAC,cAAc;aAChC,CAAC,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CACJ,OAAO,KAAK,0BAAkB,CAAC,OAAO;gBACpC,CAAC,CAAC,4BAAe,CAAC,MAAM;gBACxB,CAAC,CAAC,4BAAe,CAAC,MAAM,CAC3B,CACD,IAAI,iBAAiB,CAAC,EACtB,CACH,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;~~AA3FW~~,QAAA,WAAW,~~eA2FtB~~","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"]}
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\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\n {...props}\n style={[\n tw.style(\n isReverse ? 'flex-row-reverse' : 'flex-row',\n TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size],\n twClassName,\n ),\n style,\n ]}\n >\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.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
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"}
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,sBAuFlB,CAAC"}

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

	@@ -1 +1 @@
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"}
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,sBAuFlB,CAAC"}

package/dist/components/AvatarGroup/AvatarGroup.mjs CHANGED Viewed

@@ -20,10 +20,6 @@ export const AvatarGroup = ({ variant, avatarPropsArr, size = AvatarGroupSize.Md
     const tw = useTailwind();
     const overflowCounter = avatarPropsArr.length - max;
     const shouldRenderOverflowCounter = overflowCounter > 0;
-    const twContainerClassNames = `
-    ${isReverse ? 'flex-row-reverse' : 'flex-row'}
-    ${TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size]}
-  `;
     const renderAvatarList = useCallback(() => avatarPropsArr.slice(0, max).map((avatarProps, index) => {
         switch (variant) {
             case AvatarGroupVariant.Account:
@@ -38,7 +34,10 @@ export const AvatarGroup = ({ variant, avatarPropsArr, size = AvatarGroupSize.Md
                 throw new Error(`Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`);
         }
     }), [avatarPropsArr, max, size, variant]);
-    return (<View style={[tw `${twContainerClassNames}`, style]} {...props}>
+    return (<View {...props} style={[
+            tw.style(isReverse ? 'flex-row-reverse' : 'flex-row', TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size], twClassName),
+            style,
+        ]}>
       {renderAvatarList()}
       {shouldRenderOverflowCounter && (<AvatarBase twClassName="bg-icon-default" hasBorder fallbackText={`+${overflowCounter}`} fallbackTextProps={{
                 variant: MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT[size],

package/dist/components/AvatarGroup/AvatarGroup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.mjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,WAAW,EAAE,cAAc;;AAC3C,OAAO,EAAE,IAAI,EAAE,8BAAqB;AAEpC,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,8BAAoB;AAElE,OAAO,EAAE,aAAa,EAAE,mCAAyB;AACjD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,gCAAsB;AAE5D,OAAO,EAAE,aAAa,EAAE,mCAAyB;AAEjD,OAAO,EAAE,aAAa,EAAE,mCAAyB;AAEjD,OAAO,EAAE,WAAW,EAAE,iCAAuB;AAC7C,OAAO,EAAE,SAAS,EAAE,0BAAgB;AAEpC,OAAO,EACL,6CAA6C,EAC7C,+CAA+C,EAChD,oCAAgC;AAGjC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,cAAc,EACd,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,GAAG,GAAG,CAAC,EACP,SAAS,GAAG,KAAK,EACjB,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,GAAG,GAAG,CAAC;IACpD,MAAM,2BAA2B,GAAG,eAAe,GAAG,CAAC,CAAC;~~IACxD~~,MAAM,~~qBAAqB,GAAG;MAC1B,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU;MAC3C,+CAA+C,CAAC,IAAI,CAAC;GACxD,CAAC;IAEF,MAAM,~~gBAAgB,GAAG,WAAW,CAClC,GAAG,EAAE,CACH,cAAc,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;QACtD,QAAQ,OAAO,EAAE;YACf,KAAK,kBAAkB,CAAC,OAAO;gBAC7B,OAAO,CACL,CAAC,aAAa,CACZ,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,IAAK,WAAkC,CAAC,CACxC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,EACT,CACH,CAAC;YACJ,KAAK,kBAAkB,CAAC,OAAO;gBAC7B,OAAO,CACL,CAAC,aAAa,CACZ,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,IAAK,WAAkC,CAAC,CACxC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,EACT,CACH,CAAC;YACJ,KAAK,kBAAkB,CAAC,OAAO;gBAC7B,OAAO,CACL,CAAC,aAAa,CACZ,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,IAAK,WAAkC,CAAC,CACxC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,EACT,CACH,CAAC;YACJ,KAAK,kBAAkB,CAAC,KAAK;gBAC3B,OAAO,CACL,CAAC,WAAW,CACV,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,IAAK,WAAgC,CAAC,CACtC,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,EACT,CACH,CAAC;YACJ;gBACE,MAAM,IAAI,KAAK,CACb,2BAA2B,MAAM,CAAC,OAAO,CAAC,sBAAsB,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC/G,CAAC;SACL;IACH,CAAC,CAAC,EACJ,CAAC,cAAc,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,CAAC,CACrC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,~~CAAC~~,KAAK,CAAC,CAAC,CAAC,EAAE,~~CAAA~~,~~GAAG~~,~~qBAAqB~~,~~EAAE~~,~~EAAE~~,~~KAAK~~,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,~~CAC5D~~;MAAA,CAAC,gBAAgB,EAAE,CACnB;MAAA,CAAC,2BAA2B,IAAI,CAC9B,CAAC,UAAU,CACT,WAAW,CAAC,iBAAiB,CAC7B,SAAS,CACT,YAAY,CAAC,CAAC,IAAI,eAAe,EAAE,CAAC,CACpC,iBAAiB,CAAC,CAAC;gBACjB,OAAO,EAAE,6CAA6C,CAAC,IAAI,CAAC;gBAC5D,KAAK,EAAE,SAAS,CAAC,cAAc;aAChC,CAAC,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CACJ,OAAO,KAAK,kBAAkB,CAAC,OAAO;gBACpC,CAAC,CAAC,eAAe,CAAC,MAAM;gBACxB,CAAC,CAAC,eAAe,CAAC,MAAM,CAC3B,CACD,IAAI,iBAAiB,CAAC,EACtB,CACH,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","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"]}
1	+ {"version":3,"file":"AvatarGroup.mjs","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\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\n {...props}\n style={[\n tw.style(\n isReverse ? 'flex-row-reverse' : 'flex-row',\n TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS[size],\n twClassName,\n ),\n style,\n ]}\n >\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.types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { AvatarGroupSize } from '../../types';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = {\n /*\n Optional enum to select between Avatar Group sizes.\n \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 \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 pass additional AvatarBase props to the overflow Text element\n /\n overflowTextProps?: AvatarBaseProps;\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: '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: '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: '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: '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"]}
1	+ {"version":3,"file":"AvatarGroup.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = {\n /*\n Optional enum to select between Avatar Group sizes.\n \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 \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 pass additional AvatarBase props to the overflow Text element\n /\n overflowTextProps?: AvatarBaseProps;\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.types.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { ViewProps } from "react-native/index.js";
-import type { AvatarGroupSize } from "../../types/index.cjs";
+import type { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.cjs";
 import type { AvatarAccountProps } from "../AvatarAccount/index.cjs";
 import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
 import type { AvatarFaviconProps } from "../AvatarFavicon/index.cjs";
@@ -36,28 +36,28 @@ type BaseAvatarGroupProps = {
  * AvatarGroup props.
  */
 export type AvatarGroupProps = BaseAvatarGroupProps & ({
-    variant: 'Account';
+    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: 'Favicon';
+    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: 'Network';
+    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: 'Token';
+    variant: AvatarGroupVariant.Token;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.

package/dist/components/AvatarGroup/AvatarGroup.types.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,8BAAoB;~~AACnD~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAEvD,KAAK,oBAAoB,GAAG;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CACI;IACE,OAAO,EAAE,~~SAAS~~,CAAC;~~IACnB~~;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,~~SAAS~~,CAAC;~~IACnB~~;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,~~SAAS~~,CAAC;~~IACnB~~;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,~~OAAO~~,CAAC;~~IACjB~~;;;OAGG;IACH,cAAc,EAAE,gBAAgB,EAAE,CAAC;CACpC,CACJ,CAAC"}
1	+ {"version":3,"file":"AvatarGroup.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,8BAAoB;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAEvD,KAAK,oBAAoB,GAAG;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC;;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.d.mts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { ViewProps } from "react-native/index.js";
-import type { AvatarGroupSize } from "../../types/index.mjs";
+import type { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.mjs";
 import type { AvatarAccountProps } from "../AvatarAccount/index.mjs";
 import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
 import type { AvatarFaviconProps } from "../AvatarFavicon/index.mjs";
@@ -36,28 +36,28 @@ type BaseAvatarGroupProps = {
  * AvatarGroup props.
  */
 export type AvatarGroupProps = BaseAvatarGroupProps & ({
-    variant: 'Account';
+    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: 'Favicon';
+    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: 'Network';
+    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: 'Token';
+    variant: AvatarGroupVariant.Token;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.

package/dist/components/AvatarGroup/AvatarGroup.types.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,8BAAoB;~~AACnD~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAEvD,KAAK,oBAAoB,GAAG;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CACI;IACE,OAAO,EAAE,~~SAAS~~,CAAC;~~IACnB~~;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,~~SAAS~~,CAAC;~~IACnB~~;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,~~SAAS~~,CAAC;~~IACnB~~;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,~~OAAO~~,CAAC;~~IACjB~~;;;OAGG;IACH,cAAc,EAAE,gBAAgB,EAAE,CAAC;CACpC,CACJ,CAAC"}
1	+ {"version":3,"file":"AvatarGroup.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,8BAAoB;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAEvD,KAAK,oBAAoB,GAAG;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC;;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.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarGroup.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { AvatarGroupSize } from '../../types';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = {\n /*\n Optional enum to select between Avatar Group sizes.\n \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 \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 pass additional AvatarBase props to the overflow Text element\n /\n overflowTextProps?: AvatarBaseProps;\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: '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: '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: '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: '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"]}
1	+ {"version":3,"file":"AvatarGroup.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = {\n /*\n Optional enum to select between Avatar Group sizes.\n \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 \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 pass additional AvatarBase props to the overflow Text element\n /\n overflowTextProps?: AvatarBaseProps;\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/AvatarIcon/AvatarIcon.cjs CHANGED Viewed

@@ -10,13 +10,12 @@ const types_1 = require("../../types/index.cjs");
 const AvatarBase_1 = require("../AvatarBase/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const AvatarIcon_constants_1 = require("./AvatarIcon.constants.cjs");
-const AvatarIcon = ({ size = types_1.AvatarIconSize.Md, shape = types_1.AvatarBaseShape.Circle, severity = types_1.AvatarIconSeverity.Neutral, iconName, iconProps, twClassName = '', style, ...props }) => {
+const AvatarIcon = ({ size = types_1.AvatarIconSize.Md, shape = types_1.AvatarBaseShape.Circle, severity = types_1.AvatarIconSeverity.Neutral, iconName, iconProps, twClassName, style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
-    const twContainerClassNames = `
-    ${AvatarIcon_constants_1.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity]}
-    ${twClassName}
-  `;
-    return (<AvatarBase_1.AvatarBase size={size} shape={shape} style={[tw `${twContainerClassNames}`, style]} accessibilityRole="image" {...props}>
+    return (<AvatarBase_1.AvatarBase size={size} shape={shape} accessibilityRole="image" {...props} style={[
+            tw.style(AvatarIcon_constants_1.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity], twClassName),
+            style,
+        ]}>
       <Icon_1.Icon name={iconName} size={AvatarIcon_constants_1.MAP_AVATARICON_SIZE_ICONSIZE[size]} color={AvatarIcon_constants_1.MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]} {...iconProps}/>
     </AvatarBase_1.AvatarBase>);
 };

package/dist/components/AvatarIcon/AvatarIcon.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarIcon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAE1B,iDAIqB;AACrB,wDAA2C;AAC3C,4CAA+B;AAE/B,qEAIgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,QAAQ,GAAG,0BAAkB,CAAC,OAAO,EACrC,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;MAC1B,qEAA8C,CAAC,QAAQ,CAAC;MACxD,WAAW;GACd,CAAC;IAEF,~~OAAO,CACL,CAAC,uBAAU,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,WAAI,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,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;~~AAhCW~~,QAAA,UAAU,~~cAgCrB~~","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport {\n AvatarIconSize,\n AvatarBaseShape,\n AvatarIconSeverity,\n} from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_AVATARICON_SIZE_ICONSIZE,\n MAP_AVATARICON_SEVERITY_ICONCOLOR,\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = ({\n size = AvatarIconSize.Md,\n shape = AvatarBaseShape.Circle,\n severity = AvatarIconSeverity.Neutral,\n iconName,\n iconProps,\n twClassName ~~= ''~~,\n style,\n ...props\n}: AvatarIconProps) => {\n const tw = useTailwind();\n ~~const twContainerClassNames = `\n ${TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity]}~~\n ~~${twClassName}\n~~ ~~`;\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"]}
1	+ {"version":3,"file":"AvatarIcon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAE1B,iDAIqB;AACrB,wDAA2C;AAC3C,4CAA+B;AAE/B,qEAIgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,QAAQ,GAAG,0BAAkB,CAAC,OAAO,EACrC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,qEAA8C,CAAC,QAAQ,CAAC,EACxD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,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,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,UAAU,cAkCrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport {\n AvatarIconSize,\n AvatarBaseShape,\n AvatarIconSeverity,\n} from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_AVATARICON_SIZE_ICONSIZE,\n MAP_AVATARICON_SEVERITY_ICONCOLOR,\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = ({\n size = AvatarIconSize.Md,\n shape = AvatarBaseShape.Circle,\n severity = AvatarIconSeverity.Neutral,\n iconName,\n iconProps,\n twClassName,\n style,\n ...props\n}: AvatarIconProps) => {\n const tw = useTailwind();\n\n return (\n <AvatarBase\n size={size}\n shape={shape}\n accessibilityRole=\"image\"\n {...props}\n style={[\n tw.style(\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity],\n twClassName,\n ),\n style,\n ]}\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"]}

package/dist/components/AvatarIcon/AvatarIcon.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarIcon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAe1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,iFASpB,eAAe,~~sBAuBjB~~,CAAC"}
1	+ {"version":3,"file":"AvatarIcon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAe1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,iFASpB,eAAe,sBAyBjB,CAAC"}

package/dist/components/AvatarIcon/AvatarIcon.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarIcon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAe1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,iFASpB,eAAe,~~sBAuBjB~~,CAAC"}
1	+ {"version":3,"file":"AvatarIcon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAe1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,iFASpB,eAAe,sBAyBjB,CAAC"}

package/dist/components/AvatarIcon/AvatarIcon.mjs CHANGED Viewed

@@ -11,13 +11,12 @@ import { AvatarIconSize, AvatarBaseShape, AvatarIconSeverity } from "../../types
 import { AvatarBase } from "../AvatarBase/index.mjs";
 import { Icon } from "../Icon/index.mjs";
 import { MAP_AVATARICON_SIZE_ICONSIZE, MAP_AVATARICON_SEVERITY_ICONCOLOR, TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR } from "./AvatarIcon.constants.mjs";
-export const AvatarIcon = ({ size = AvatarIconSize.Md, shape = AvatarBaseShape.Circle, severity = AvatarIconSeverity.Neutral, iconName, iconProps, twClassName = '', style, ...props }) => {
+export const AvatarIcon = ({ size = AvatarIconSize.Md, shape = AvatarBaseShape.Circle, severity = AvatarIconSeverity.Neutral, iconName, iconProps, twClassName, style, ...props }) => {
     const tw = useTailwind();
-    const twContainerClassNames = `
-    ${TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity]}
-    ${twClassName}
-  `;
-    return (<AvatarBase size={size} shape={shape} style={[tw `${twContainerClassNames}`, style]} accessibilityRole="image" {...props}>
+    return (<AvatarBase size={size} shape={shape} accessibilityRole="image" {...props} style={[
+            tw.style(TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity], twClassName),
+            style,
+        ]}>
       <Icon name={iconName} size={MAP_AVATARICON_SIZE_ICONSIZE[size]} color={MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]} {...iconProps}/>
     </AvatarBase>);
 };

package/dist/components/AvatarIcon/AvatarIcon.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarIcon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EACL,cAAc,EACd,eAAe,EACf,kBAAkB,EACnB,8BAAoB;AACrB,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,4BAA4B,EAC5B,iCAAiC,EACjC,8CAA8C,EAC/C,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,QAAQ,GAAG,kBAAkB,CAAC,OAAO,EACrC,QAAQ,EACR,SAAS,EACT,WAAW,~~GAAG~~,~~EAAE,EAChB,~~KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;~~IACzB~~,~~MAAM,qBAAqB,GAAG;MAC1B,8CAA8C,CAAC,QAAQ,CAAC;MACxD,WAAW;GACd,CAAC;IAEF,~~OAAO,CACL,CAAC,UAAU,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,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,KAAK,CAAC,CAAC,iCAAiC,CAAC,QAAQ,CAAC,CAAC,CACnD,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport {\n AvatarIconSize,\n AvatarBaseShape,\n AvatarIconSeverity,\n} from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_AVATARICON_SIZE_ICONSIZE,\n MAP_AVATARICON_SEVERITY_ICONCOLOR,\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = ({\n size = AvatarIconSize.Md,\n shape = AvatarBaseShape.Circle,\n severity = AvatarIconSeverity.Neutral,\n iconName,\n iconProps,\n twClassName ~~= ''~~,\n style,\n ...props\n}: AvatarIconProps) => {\n const tw = useTailwind();\n ~~const twContainerClassNames = `\n ${TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity]}~~\n ~~${twClassName}\n~~ ~~`;\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"]}
1	+ {"version":3,"file":"AvatarIcon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EACL,cAAc,EACd,eAAe,EACf,kBAAkB,EACnB,8BAAoB;AACrB,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,4BAA4B,EAC5B,iCAAiC,EACjC,8CAA8C,EAC/C,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,QAAQ,GAAG,kBAAkB,CAAC,OAAO,EACrC,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,iBAAiB,CAAC,OAAO,CACzB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,8CAA8C,CAAC,QAAQ,CAAC,EACxD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC,CACzC,KAAK,CAAC,CAAC,iCAAiC,CAAC,QAAQ,CAAC,CAAC,CACnD,IAAI,SAAS,CAAC,EAElB;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport {\n AvatarIconSize,\n AvatarBaseShape,\n AvatarIconSeverity,\n} from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_AVATARICON_SIZE_ICONSIZE,\n MAP_AVATARICON_SEVERITY_ICONCOLOR,\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = ({\n size = AvatarIconSize.Md,\n shape = AvatarBaseShape.Circle,\n severity = AvatarIconSeverity.Neutral,\n iconName,\n iconProps,\n twClassName,\n style,\n ...props\n}: AvatarIconProps) => {\n const tw = useTailwind();\n\n return (\n <AvatarBase\n size={size}\n shape={shape}\n accessibilityRole=\"image\"\n {...props}\n style={[\n tw.style(\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity],\n twClassName,\n ),\n style,\n ]}\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"]}