@metamask/design-system-react-native 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.28.0]
+
+### Added
+
+- Added `Content` for composing scrollable and padded content sections on React Native screens; it is closely related to the upcoming `ListItem` work ([#1192](https://github.com/MetaMask/metamask-design-system/pull/1192))
+
+### Changed
+
+- **BREAKING:** Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer ([#1206](https://github.com/MetaMask/metamask-design-system/pull/1206))
+- Added default padding and `isInteractive` support to `SectionHeader` so section rows match the new mobile layout patterns ([#1210](https://github.com/MetaMask/metamask-design-system/pull/1210))
+- **BREAKING:** Flattened `TextArea` so it renders the root `TextInput` directly; pass `TextInput` props on `TextArea`, use the component `ref` for the input, and stop relying on `inputProps` or `inputElement` ([#1205](https://github.com/MetaMask/metamask-design-system/pull/1205))
+- Updated avatar fallback handling so `AvatarToken`, `AvatarNetwork`, and `AvatarFavicon` resolve consistently when the requested image is unavailable ([#1212](https://github.com/MetaMask/metamask-design-system/pull/1212))
+
 ## [0.27.0]
 
 ### Added
@@ -468,7 +481,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.27.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.28.0...HEAD
+[0.28.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.27.0...@metamask/design-system-react-native@0.28.0
 [0.27.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.26.0...@metamask/design-system-react-native@0.27.0
 [0.26.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.25.0...@metamask/design-system-react-native@0.26.0
 [0.25.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.24.0...@metamask/design-system-react-native@0.25.0

package/dist/components/AvatarBase/AvatarBase.cjs

@@ -13,7 +13,7 @@ const AvatarBase_constants_1 = require("./AvatarBase.constants.cjs");
 const AvatarBase = ({ children, size = design_system_shared_1.AvatarBaseSize.Md, shape = design_system_shared_1.AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName, style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     return (<react_native_1.View {...props} style={[
-            tw.style('items-center justify-center overflow-hidden bg-section', shape === design_system_shared_1.AvatarBaseShape.Circle
+            tw.style('items-center justify-center overflow-hidden bg-alternative', shape === design_system_shared_1.AvatarBaseShape.Circle
                 ? 'rounded-full'
                 : AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size], hasBorder
                 ? AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAGwC;AACxC,qFAAmE;AACnE,kDAA0B;AAC1B,+CAAoC;AAEpC,4CAAmE;AAEnE,qEAKgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,GAAG,sCAAe,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,sCAAe,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 {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\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"]}
+{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAGwC;AACxC,qFAAmE;AACnE,kDAA0B;AAC1B,+CAAoC;AAEpC,4CAAmE;AAEnE,qEAKgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,GAAG,sCAAe,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,4DAA4D,EAC5D,KAAK,KAAK,sCAAe,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 {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\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-alternative',\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.mjs

@@ -14,7 +14,7 @@ import { TWCLASSMAP_AVATARBASE_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_HASBORDER_S
 export const AvatarBase = ({ children, size = AvatarBaseSize.Md, shape = AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName, style, ...props }) => {
     const tw = useTailwind();
     return (<View {...props} style={[
-            tw.style('items-center justify-center overflow-hidden bg-section', shape === AvatarBaseShape.Circle
+            tw.style('items-center justify-center overflow-hidden bg-alternative', shape === AvatarBaseShape.Circle
                 ? 'rounded-full'
                 : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size], hasBorder
                 ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,uCAAuC;AACxC,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAEpC,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 {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\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"]}
+{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,uCAAuC;AACxC,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAEpC,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,4DAA4D,EAC5D,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 {\n  AvatarBaseSize,\n  AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\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-alternative',\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

@@ -30,7 +30,7 @@ const AvatarBase_1 = require("../AvatarBase/index.cjs");
 const ImageOrSvg_1 = require("../temp-components/ImageOrSvg/index.cjs");
 const AvatarFavicon = ({ src, size = design_system_shared_1.AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
-    const backupFallbackText = fallbackText || name?.[0] || '';
+    const backupFallbackText = fallbackText || name?.[0] || '?';
     const onImageErrorHandler = (e) => {
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onImageError?.(e);
@@ -39,7 +39,7 @@ const AvatarFavicon = ({ src, size = design_system_shared_1.AvatarFaviconSize.Md
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onSvgError?.(e);
     };
-    return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
+    return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Circle} fallbackText={src ? finalFallbackText : backupFallbackText} 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

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,+CAAwC;AAGxC,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,wCAAiB,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,sCAAe,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 {\n  AvatarBaseShape,\n  AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\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"]}
+{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,+CAAwC;AAGxC,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,IAAI,GAAG,wCAAiB,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,GAAG,CAAC;IAC5D,MAAM,mBAAmB,GAAG,CAAC,CAAkB,EAAE,EAAE;QACjD,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,sCAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,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;AA9CW,QAAA,aAAa,iBA8CxB","sourcesContent":["import {\n  AvatarBaseShape,\n  AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\n\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 = (e: ImageErrorEvent) => {\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={src ? finalFallbackText : backupFallbackText}\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.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAwCpB,CAAC"}
+{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAwCpB,CAAC"}
+{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}

package/dist/components/AvatarFavicon/AvatarFavicon.mjs

@@ -11,7 +11,7 @@ import { AvatarBase } from "../AvatarBase/index.mjs";
 import { ImageOrSvg } from "../temp-components/ImageOrSvg/index.mjs";
 export const AvatarFavicon = ({ src, size = AvatarFaviconSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = useState('');
-    const backupFallbackText = fallbackText || name?.[0] || '';
+    const backupFallbackText = fallbackText || name?.[0] || '?';
     const onImageErrorHandler = (e) => {
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onImageError?.(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} {...props}>
+    return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
       {src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
                 resizeMode: 'contain',
                 ...imageOrSvgProps?.imageProps,

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;AACxC,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,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 {\n  AvatarBaseShape,\n  AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\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"]}
+{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;AACxC,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,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,GAAG,CAAC;IAC5D,MAAM,mBAAmB,GAAG,CAAC,CAAkB,EAAE,EAAE;QACjD,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,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,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 {\n  AvatarBaseShape,\n  AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\n\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 = (e: ImageErrorEvent) => {\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={src ? finalFallbackText : backupFallbackText}\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/AvatarNetwork/AvatarNetwork.cjs

@@ -31,7 +31,7 @@ const AvatarBase_1 = require("../AvatarBase/index.cjs");
 const ImageOrSvg_1 = require("../temp-components/ImageOrSvg/index.cjs");
 const AvatarNetwork = ({ src, size = types_1.AvatarNetworkSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
-    const backupFallbackText = fallbackText || name?.[0] || '';
+    const backupFallbackText = fallbackText || name?.[0] || '?';
     const onImageErrorHandler = (e) => {
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onImageError?.(e);
@@ -40,7 +40,7 @@ const AvatarNetwork = ({ src, size = types_1.AvatarNetworkSize.Md, name, fallbac
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onSvgError?.(e);
     };
-    return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Square} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
+    return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Square} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
       {src && (<ImageOrSvg_1.ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
                 resizeMode: 'contain',
                 ...imageOrSvgProps?.imageProps,

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAiE;AACjE,+CAAwC;AAGxC,iDAAgD;AAChD,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,sCAAe,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 { AvatarBaseShape } from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\nimport { AvatarNetworkSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = ({\n  src,\n  size = AvatarNetworkSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  imageOrSvgProps,\n  ...props\n}: AvatarNetworkProps) => {\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.Square}\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"]}
+{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAiE;AACjE,+CAAwC;AAGxC,iDAAgD;AAChD,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,GAAG,CAAC;IAC5D,MAAM,mBAAmB,GAAG,CAAC,CAAkB,EAAE,EAAE;QACjD,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,sCAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,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;AA9CW,QAAA,aAAa,iBA8CxB","sourcesContent":["import { AvatarBaseShape } from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\n\nimport { AvatarNetworkSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = ({\n  src,\n  size = AvatarNetworkSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  imageOrSvgProps,\n  ...props\n}: AvatarNetworkProps) => {\n  const [finalFallbackText, setFallbackText] = useState<string>('');\n\n  const backupFallbackText = fallbackText || name?.[0] || '?';\n  const onImageErrorHandler = (e: ImageErrorEvent) => {\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.Square}\n      fallbackText={src ? finalFallbackText : backupFallbackText}\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/AvatarNetwork/AvatarNetwork.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAwCpB,CAAC"}
+{"version":3,"file":"AvatarNetwork.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAwCpB,CAAC"}
+{"version":3,"file":"AvatarNetwork.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,cAAc;AAOxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,oFAQvB,kBAAkB,sBAsCpB,CAAC"}

package/dist/components/AvatarNetwork/AvatarNetwork.mjs

@@ -12,7 +12,7 @@ import { AvatarBase } from "../AvatarBase/index.mjs";
 import { ImageOrSvg } from "../temp-components/ImageOrSvg/index.mjs";
 export const AvatarNetwork = ({ src, size = AvatarNetworkSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = useState('');
-    const backupFallbackText = fallbackText || name?.[0] || '';
+    const backupFallbackText = fallbackText || name?.[0] || '?';
     const onImageErrorHandler = (e) => {
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onImageError?.(e);
@@ -21,7 +21,7 @@ export const AvatarNetwork = ({ src, size = AvatarNetworkSize.Md, name, fallback
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onSvgError?.(e);
     };
-    return (<AvatarBase size={size} shape={AvatarBaseShape.Square} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
+    return (<AvatarBase size={size} shape={AvatarBaseShape.Square} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
       {src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
                 resizeMode: 'contain',
                 ...imageOrSvgProps?.imageProps,

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,uCAAuC;AACjE,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,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 { AvatarBaseShape } from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\nimport { AvatarNetworkSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = ({\n  src,\n  size = AvatarNetworkSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  imageOrSvgProps,\n  ...props\n}: AvatarNetworkProps) => {\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.Square}\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"]}
+{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,uCAAuC;AACjE,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,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,GAAG,CAAC;IAC5D,MAAM,mBAAmB,GAAG,CAAC,CAAkB,EAAE,EAAE;QACjD,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,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,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 { AvatarBaseShape } from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\n\nimport { AvatarNetworkSize } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarNetworkProps } from './AvatarNetwork.types';\n\nexport const AvatarNetwork = ({\n  src,\n  size = AvatarNetworkSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  imageOrSvgProps,\n  ...props\n}: AvatarNetworkProps) => {\n  const [finalFallbackText, setFallbackText] = useState<string>('');\n\n  const backupFallbackText = fallbackText || name?.[0] || '?';\n  const onImageErrorHandler = (e: ImageErrorEvent) => {\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.Square}\n      fallbackText={src ? finalFallbackText : backupFallbackText}\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/AvatarToken/AvatarToken.cjs

@@ -30,7 +30,7 @@ const AvatarBase_1 = require("../AvatarBase/index.cjs");
 const ImageOrSvg_1 = require("../temp-components/ImageOrSvg/index.cjs");
 const AvatarToken = ({ src, size = design_system_shared_1.AvatarTokenSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
-    const backupFallbackText = fallbackText || name?.[0] || '';
+    const backupFallbackText = fallbackText || name?.[0] || '?';
     const onImageErrorHandler = (e) => {
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onImageError?.(e);
@@ -39,7 +39,7 @@ const AvatarToken = ({ src, size = design_system_shared_1.AvatarTokenSize.Md, na
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onSvgError?.(e);
     };
-    return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
+    return (<AvatarBase_1.AvatarBase size={size} shape={design_system_shared_1.AvatarBaseShape.Circle} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
       {src && (<ImageOrSvg_1.ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
                 resizeMode: 'contain',
                 ...imageOrSvgProps?.imageProps,

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,+CAAwC;AAGxC,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,WAAW,GAAG,CAAC,EAC1B,GAAG,EACH,IAAI,GAAG,sCAAe,CAAC,EAAE,EACzB,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,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,sCAAe,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,WAAW,eAgDtB","sourcesContent":["import {\n  AvatarBaseShape,\n  AvatarTokenSize,\n} from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = ({\n  src,\n  size = AvatarTokenSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  imageOrSvgProps,\n  ...props\n}: AvatarTokenProps) => {\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"]}
+{"version":3,"file":"AvatarToken.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,+CAAwC;AAGxC,wDAA2C;AAC3C,wEAA2D;AAIpD,MAAM,WAAW,GAAG,CAAC,EAC1B,GAAG,EACH,IAAI,GAAG,sCAAe,CAAC,EAAE,EACzB,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IAClE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAE5D,MAAM,mBAAmB,GAAG,CAAC,CAAkB,EAAE,EAAE;QACjD,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,sCAAe,CAAC,MAAM,CAAC,CAC9B,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,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;AA9CW,QAAA,WAAW,eA8CtB","sourcesContent":["import {\n  AvatarBaseShape,\n  AvatarTokenSize,\n} from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = ({\n  src,\n  size = AvatarTokenSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  imageOrSvgProps,\n  ...props\n}: AvatarTokenProps) => {\n  const [finalFallbackText, setFallbackText] = useState<string>('');\n  const backupFallbackText = fallbackText || name?.[0] || '?';\n\n  const onImageErrorHandler = (e: ImageErrorEvent) => {\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={src ? finalFallbackText : backupFallbackText}\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/AvatarToken/AvatarToken.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,sBAwClB,CAAC"}
+{"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,sBAsClB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,sBAwClB,CAAC"}
+{"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,cAAc;AAMxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,oFAQrB,gBAAgB,sBAsClB,CAAC"}

package/dist/components/AvatarToken/AvatarToken.mjs

@@ -11,7 +11,7 @@ import { AvatarBase } from "../AvatarBase/index.mjs";
 import { ImageOrSvg } from "../temp-components/ImageOrSvg/index.mjs";
 export const AvatarToken = ({ src, size = AvatarTokenSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = useState('');
-    const backupFallbackText = fallbackText || name?.[0] || '';
+    const backupFallbackText = fallbackText || name?.[0] || '?';
     const onImageErrorHandler = (e) => {
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onImageError?.(e);
@@ -20,7 +20,7 @@ export const AvatarToken = ({ src, size = AvatarTokenSize.Md, name, fallbackText
         setFallbackText(backupFallbackText);
         imageOrSvgProps?.onSvgError?.(e);
     };
-    return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={finalFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
+    return (<AvatarBase size={size} shape={AvatarBaseShape.Circle} fallbackText={src ? finalFallbackText : backupFallbackText} fallbackTextProps={fallbackTextProps} {...props}>
       {src && (<ImageOrSvg src={src} width={'100%'} height={'100%'} {...imageOrSvgProps} imageProps={{
                 resizeMode: 'contain',
                 ...imageOrSvgProps?.imageProps,

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,eAAe,EAChB,uCAAuC;AACxC,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,UAAU,EAAE,gDAAsC;AAI3D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,GAAG,EACH,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,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 {\n  AvatarBaseShape,\n  AvatarTokenSize,\n} from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEventData, NativeSyntheticEvent } from 'react-native';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = ({\n  src,\n  size = AvatarTokenSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  imageOrSvgProps,\n  ...props\n}: AvatarTokenProps) => {\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"]}
+{"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,eAAe,EAChB,uCAAuC;AACxC,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAGxC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,UAAU,EAAE,gDAAsC;AAI3D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,GAAG,EACH,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,IAAI,EACJ,YAAY,EACZ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,CAAC,iBAAiB,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAClE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC;IAE5D,MAAM,mBAAmB,GAAG,CAAC,CAAkB,EAAE,EAAE;QACjD,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,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAC3D,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 {\n  AvatarBaseShape,\n  AvatarTokenSize,\n} from '@metamask/design-system-shared';\nimport React, { useState } from 'react';\nimport type { ImageErrorEvent } from 'react-native';\n\nimport { AvatarBase } from '../AvatarBase';\nimport { ImageOrSvg } from '../temp-components/ImageOrSvg';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = ({\n  src,\n  size = AvatarTokenSize.Md,\n  name,\n  fallbackText,\n  fallbackTextProps,\n  imageOrSvgProps,\n  ...props\n}: AvatarTokenProps) => {\n  const [finalFallbackText, setFallbackText] = useState<string>('');\n  const backupFallbackText = fallbackText || name?.[0] || '?';\n\n  const onImageErrorHandler = (e: ImageErrorEvent) => {\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={src ? finalFallbackText : backupFallbackText}\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/Content/Content.cjs

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const react_1 = __importDefault(require("react"));
+const BoxColumn_1 = require("../BoxColumn/index.cjs");
+const BoxRow_1 = require("../BoxRow/index.cjs");
+const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
+const Content_constants_1 = require("./Content.constants.cjs");
+const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory, verticalAlignment = design_system_shared_1.ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);
+    const contentRow = (<BoxRow_1.BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()} {...(hasColumnShell ? {} : props)}>
+      {avatar}
+      {/* Title and description Column */}
+      <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
+              <TextOrChildren_1.TextOrChildren textProps={{
+                variant: design_system_shared_1.TextVariant.BodySm,
+                fontWeight: design_system_shared_1.FontWeight.Medium,
+                color: design_system_shared_1.TextColor.TextAlternative,
+                ...descriptionProps,
+            }}>
+                {description}
+              </TextOrChildren_1.TextOrChildren>
+            </BoxRow_1.BoxRow>) : null}>
+        {title ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} gap={1}>
+            <TextOrChildren_1.TextOrChildren textProps={{
+                variant: design_system_shared_1.TextVariant.BodyMd,
+                fontWeight: design_system_shared_1.FontWeight.Medium,
+                color: design_system_shared_1.TextColor.TextDefault,
+                ...titleProps,
+            }}>
+              {title}
+            </TextOrChildren_1.TextOrChildren>
+          </BoxRow_1.BoxRow>) : null}
+      </BoxColumn_1.BoxColumn>
+      {/* Value and subvalue Column */}
+      {value || subvalue ? (<BoxColumn_1.BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+                <TextOrChildren_1.TextOrChildren textProps={{
+                    variant: design_system_shared_1.TextVariant.BodySm,
+                    fontWeight: design_system_shared_1.FontWeight.Medium,
+                    color: design_system_shared_1.TextColor.TextAlternative,
+                    ...subvalueProps,
+                }}>
+                  {subvalue}
+                </TextOrChildren_1.TextOrChildren>
+              </BoxRow_1.BoxRow>) : null}>
+          {value ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
+              <TextOrChildren_1.TextOrChildren textProps={{
+                    variant: design_system_shared_1.TextVariant.BodyMd,
+                    fontWeight: design_system_shared_1.FontWeight.Medium,
+                    color: design_system_shared_1.TextColor.TextDefault,
+                    ...valueProps,
+                }}>
+                {value}
+              </TextOrChildren_1.TextOrChildren>
+            </BoxRow_1.BoxRow>) : null}
+        </BoxColumn_1.BoxColumn>) : null}
+    </BoxRow_1.BoxRow>);
+    if (hasColumnShell) {
+        return (<BoxColumn_1.BoxColumn gap={1} topAccessory={topAccessory} bottomAccessory={bottomAccessory} twClassName={twClassName} {...props}>
+        {contentRow}
+      </BoxColumn_1.BoxColumn>);
+    }
+    return contentRow;
+};
+exports.Content = Content;
+exports.Content.displayName = 'Content';
+//# sourceMappingURL=Content.cjs.map

package/dist/components/Content/Content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAKwC;AACxC,kDAA0B;AAE1B,sDAAyC;AACzC,gDAAmC;AACnC,gFAAmE;AAEnE,+DAA6D;AAGtD,MAAM,OAAO,GAA2B,CAAC,EAC9C,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,GAAG,+CAAwB,CAAC,MAAM,EACnD,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,cAAc,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,eAAe,CAAC,CAAC;IAEzE,MAAM,UAAU,GAAG,CACjB,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,UAAU,CAAC,CAAC,0CAAsB,CAAC,iBAAiB,CAAC,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,gBAAgB,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CACvF,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAElC;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,kCAAkC,CACnC;MAAA,CAAC,qBAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,eAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,+BAAc,CAClB;YAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,+BAAc,CAClB;UAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,qBAAS,CACX;MAAA,CAAC,+BAA+B,CAChC;MAAA,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CACnB,CAAC,qBAAS,CACR,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,QAAQ,CAAC,CAAC,CAAC,CACT,CAAC,eAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CACnC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;gBAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;oBAChC,GAAG,aAAa;iBACjB,CAAC,CAEF;kBAAA,CAAC,QAAQ,CACX;gBAAA,EAAE,+BAAc,CAClB;cAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;oBAC5B,GAAG,UAAU;iBACd,CAAC,CAEF;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,+BAAc,CAClB;YAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,qBAAS,CAAC,CACb,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,IAAI,cAAc,EAAE;QAClB,OAAO,CACL,CAAC,qBAAS,CACR,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,UAAU,CACb;MAAA,EAAE,qBAAS,CAAC,CACb,CAAC;KACH;IAED,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AApJW,QAAA,OAAO,WAoJlB;AAEF,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n  ContentVerticalAlignment,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  startAccessory,\n  endAccessory,\n  topAccessory,\n  bottomAccessory,\n  verticalAlignment = ContentVerticalAlignment.Center,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);\n\n  const contentRow = (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      gap={4}\n      twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()}\n      {...(hasColumnShell ? {} : props)}\n    >\n      {avatar}\n      {/* Title and description Column */}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          description ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodySm,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextAlternative,\n                  ...descriptionProps,\n                }}\n              >\n                {description}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {/* Value and subvalue Column */}\n      {value || subvalue ? (\n        <BoxColumn\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            subvalue ? (\n              <BoxRow\n                twClassName=\"w-full\"\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...subvalueProps,\n                  }}\n                >\n                  {subvalue}\n                </TextOrChildren>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </BoxRow>\n  );\n\n  if (hasColumnShell) {\n    return (\n      <BoxColumn\n        gap={1}\n        topAccessory={topAccessory}\n        bottomAccessory={bottomAccessory}\n        twClassName={twClassName}\n        {...props}\n      >\n        {contentRow}\n      </BoxColumn>\n    );\n  }\n\n  return contentRow;\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/Content.constants.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERTICAL_ALIGNMENT_MAP = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+exports.VERTICAL_ALIGNMENT_MAP = {
+    [design_system_shared_1.ContentVerticalAlignment.Top]: design_system_shared_1.BoxAlignItems.Start,
+    [design_system_shared_1.ContentVerticalAlignment.Center]: design_system_shared_1.BoxAlignItems.Center,
+};
+//# sourceMappingURL=Content.constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.constants.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.constants.ts"],"names":[],"mappings":";;;AAAA,yEAGwC;AAE3B,QAAA,sBAAsB,GAG/B;IACF,CAAC,+CAAwB,CAAC,GAAG,CAAC,EAAE,oCAAa,CAAC,KAAK;IACnD,CAAC,+CAAwB,CAAC,MAAM,CAAC,EAAE,oCAAa,CAAC,MAAM;CACxD,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  ContentVerticalAlignment,\n} from '@metamask/design-system-shared';\n\nexport const VERTICAL_ALIGNMENT_MAP: Record<\n  ContentVerticalAlignment,\n  BoxAlignItems\n> = {\n  [ContentVerticalAlignment.Top]: BoxAlignItems.Start,\n  [ContentVerticalAlignment.Center]: BoxAlignItems.Center,\n};\n"]}

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

@@ -0,0 +1,3 @@
+import { BoxAlignItems, ContentVerticalAlignment } from "@metamask/design-system-shared";
+export declare const VERTICAL_ALIGNMENT_MAP: Record<ContentVerticalAlignment, BoxAlignItems>;
+//# sourceMappingURL=Content.constants.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,wBAAwB,EACzB,uCAAuC;AAExC,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,wBAAwB,EACxB,aAAa,CAId,CAAC"}

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

@@ -0,0 +1,3 @@
+import { BoxAlignItems, ContentVerticalAlignment } from "@metamask/design-system-shared";
+export declare const VERTICAL_ALIGNMENT_MAP: Record<ContentVerticalAlignment, BoxAlignItems>;
+//# sourceMappingURL=Content.constants.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,wBAAwB,EACzB,uCAAuC;AAExC,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,wBAAwB,EACxB,aAAa,CAId,CAAC"}

package/dist/components/Content/Content.constants.mjs

@@ -0,0 +1,6 @@
+import { BoxAlignItems, ContentVerticalAlignment } from "@metamask/design-system-shared";
+export const VERTICAL_ALIGNMENT_MAP = {
+    [ContentVerticalAlignment.Top]: BoxAlignItems.Start,
+    [ContentVerticalAlignment.Center]: BoxAlignItems.Center,
+};
+//# sourceMappingURL=Content.constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.constants.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,wBAAwB,EACzB,uCAAuC;AAExC,MAAM,CAAC,MAAM,sBAAsB,GAG/B;IACF,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK;IACnD,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,MAAM;CACxD,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  ContentVerticalAlignment,\n} from '@metamask/design-system-shared';\n\nexport const VERTICAL_ALIGNMENT_MAP: Record<\n  ContentVerticalAlignment,\n  BoxAlignItems\n> = {\n  [ContentVerticalAlignment.Top]: BoxAlignItems.Start,\n  [ContentVerticalAlignment.Center]: BoxAlignItems.Center,\n};\n"]}

package/dist/components/Content/Content.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ContentProps } from "./Content.types.cjs";
+export declare const Content: React.FC<ContentProps>;
+//# sourceMappingURL=Content.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoJ1C,CAAC"}

package/dist/components/Content/Content.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ContentProps } from "./Content.types.mjs";
+export declare const Content: React.FC<ContentProps>;
+//# sourceMappingURL=Content.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoJ1C,CAAC"}

package/dist/components/Content/Content.mjs

@@ -0,0 +1,71 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { ContentVerticalAlignment, FontWeight, TextColor, TextVariant } from "@metamask/design-system-shared";
+import $React from "react";
+const React = $importDefault($React);
+import { BoxColumn } from "../BoxColumn/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
+import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
+import { VERTICAL_ALIGNMENT_MAP } from "./Content.constants.mjs";
+export const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory, verticalAlignment = ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);
+    const contentRow = (<BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()} {...(hasColumnShell ? {} : props)}>
+      {avatar}
+      {/* Title and description Column */}
+      <BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
+              <TextOrChildren textProps={{
+                variant: TextVariant.BodySm,
+                fontWeight: FontWeight.Medium,
+                color: TextColor.TextAlternative,
+                ...descriptionProps,
+            }}>
+                {description}
+              </TextOrChildren>
+            </BoxRow>) : null}>
+        {title ? (<BoxRow twClassName="w-full" startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} gap={1}>
+            <TextOrChildren textProps={{
+                variant: TextVariant.BodyMd,
+                fontWeight: FontWeight.Medium,
+                color: TextColor.TextDefault,
+                ...titleProps,
+            }}>
+              {title}
+            </TextOrChildren>
+          </BoxRow>) : null}
+      </BoxColumn>
+      {/* Value and subvalue Column */}
+      {value || subvalue ? (<BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow twClassName="w-full" startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+                <TextOrChildren textProps={{
+                    variant: TextVariant.BodySm,
+                    fontWeight: FontWeight.Medium,
+                    color: TextColor.TextAlternative,
+                    ...subvalueProps,
+                }}>
+                  {subvalue}
+                </TextOrChildren>
+              </BoxRow>) : null}>
+          {value ? (<BoxRow twClassName="w-full" startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
+              <TextOrChildren textProps={{
+                    variant: TextVariant.BodyMd,
+                    fontWeight: FontWeight.Medium,
+                    color: TextColor.TextDefault,
+                    ...valueProps,
+                }}>
+                {value}
+              </TextOrChildren>
+            </BoxRow>) : null}
+        </BoxColumn>) : null}
+    </BoxRow>);
+    if (hasColumnShell) {
+        return (<BoxColumn gap={1} topAccessory={topAccessory} bottomAccessory={bottomAccessory} twClassName={twClassName} {...props}>
+        {contentRow}
+      </BoxColumn>);
+    }
+    return contentRow;
+};
+Content.displayName = 'Content';
+//# sourceMappingURL=Content.mjs.map