@metamask-previews/design-system-react-native 0.28.0-preview.1f40f69f → 0.30.2-preview.2222cbb5

package/CHANGELOG.md

@@ -7,6 +7,53 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.30.2]
+
+### Fixed
+
+- Fixed `Content` value and subvalue to right-align in list rows when token amounts and fiat equivalents differ in length, including in `ListItem` ([#1257](https://github.com/MetaMask/metamask-design-system/pull/1257))
+
+## [0.30.1]
+
+### Fixed
+
+- Fixed `BottomSheetDialog` pan callbacks to run on the UI thread, resolving broken slow-drag gesture ([#1253](https://github.com/MetaMask/metamask-design-system/pull/1253))
+- Fixed `Tag` gap between icon and label from 4px to 2px to match design spec ([#1236](https://github.com/MetaMask/metamask-design-system/pull/1236))
+
+## [0.30.0]
+
+### Added
+
+- Added `Switch` for controlled on/off toggles with optional `label`, `isDisabled`, and `accessibilityRole="switch"` ([#1022](https://github.com/MetaMask/metamask-design-system/pull/1022))
+- Added `HeaderSubpage` — a fixed subpage navigation row with identity content and back/close shortcuts ([#1241](https://github.com/MetaMask/metamask-design-system/pull/1241))
+- Added `SegmentedControl` — a bordered, controlled segmented picker composing `FilterButton` children with `value`/`onChange` ([#1242](https://github.com/MetaMask/metamask-design-system/pull/1242))
+- Added `ListItemSelect` and `ListItemMultiSelect` for single- and multi-select list rows with `isSelected` styling ([#1230](https://github.com/MetaMask/metamask-design-system/pull/1230))
+- Added `Trophy` to `IconName` ([#1235](https://github.com/MetaMask/metamask-design-system/pull/1235))
+
+### Changed
+
+- Added `accessoryGap` to `ListItem` to control spacing between row accessories and inner content (`BoxSpacing`, default `0`; pass `accessoryGap={4}` for legacy 16px spacing) ([#1232](https://github.com/MetaMask/metamask-design-system/pull/1232))
+- **BREAKING:** Renamed `SegmentButton`/`SegmentGroup` (and related types/context) to `FilterButton`/`FilterButtonGroup`; props and behavior are unchanged — `ButtonFilter` is unaffected ([#1240](https://github.com/MetaMask/metamask-design-system/pull/1240))
+  - See [Migration Guide](./MIGRATION.md#from-version-0290-to-0300)
+- **BREAKING:** `Content` is now inner-only; `startAccessory`/`endAccessory` moved to `ListItem`, and `topAccessory`/`bottomAccessory` removed — compose column shell with `BoxColumn` instead ([#1231](https://github.com/MetaMask/metamask-design-system/pull/1231))
+  - Row accessory spacing defaults to `accessoryGap={0}`; pass `accessoryGap={4}` to restore previous 16px spacing
+  - See [Migration Guide](./MIGRATION.md#content-shell-accessories-removed-row-accessories-moved-to-listitem)
+
+### Fixed
+
+- Fixed unsatisfiable `lodash` peer dependency range from `^4.17.23` to `^4.17.21` ([#1228](https://github.com/MetaMask/metamask-design-system/pull/1228))
+
+## [0.29.0]
+
+### Added
+
+- Added `ListItem` component for list row layouts ([#1203](https://github.com/MetaMask/metamask-design-system/pull/1203))
+
+### Changed
+
+- **BREAKING:** `AvatarIconSeverity.Error`, `IconAlertSeverity.Error`, and `TagSeverity.Error` renamed to `.Danger`; severity vocabulary standardized to use `Danger` for destructive/critical states and `Neutral` for default states ([#1159](https://github.com/MetaMask/metamask-design-system/pull/1159))
+  - See [Migration Guide](./MIGRATION.md#from-version-0280-to-0290)
+
 ## [0.28.0]
 
 ### Added
@@ -481,7 +528,11 @@ 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.28.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.2...HEAD
+[0.30.2]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.1...@metamask/design-system-react-native@0.30.2
+[0.30.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.0...@metamask/design-system-react-native@0.30.1
+[0.30.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.29.0...@metamask/design-system-react-native@0.30.0
+[0.29.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.28.0...@metamask/design-system-react-native@0.29.0
 [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

package/dist/components/AvatarBase/AvatarBase.cjs

@@ -20,7 +20,7 @@ const AvatarBase = ({ children, size = design_system_shared_1.AvatarBaseSize.Md,
                 : 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 color={Text_1.TextColor.TextMuted} variant={Text_1.TextVariant.BodySm} fontWeight={Text_1.FontWeight.Medium} {...fallbackTextProps} twClassName={(0, design_system_shared_1.mergeTwClassName)('uppercase', fallbackTextProps?.twClassName)}>
           {fallbackText}
         </Text_1.Text>) : (children)}
     </react_native_1.View>);

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAGiD;AACjD,8FAA4E;AAC5E,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-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/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"]}
+{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAIiD;AACjD,8FAA4E;AAC5E,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,IAAA,uCAAgB,EAC3B,WAAW,EACX,iBAAiB,EAAE,WAAW,CAC/B,CAAC,CAEF;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;AAjDW,QAAA,UAAU,cAiDrB","sourcesContent":["import {\n  AvatarBaseSize,\n  AvatarBaseShape,\n  mergeTwClassName,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/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={mergeTwClassName(\n            'uppercase',\n            fallbackTextProps?.twClassName,\n          )}\n        >\n          {fallbackText}\n        </Text>\n      ) : (\n        children\n      )}\n    </View>\n  );\n};\n"]}

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

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

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

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

package/dist/components/AvatarBase/AvatarBase.mjs

@@ -4,7 +4,7 @@ function $importDefault(module) {
     }
     return module;
 }
-import { AvatarBaseSize, AvatarBaseShape } from "@metamask-previews/design-system-shared";
+import { AvatarBaseSize, AvatarBaseShape, mergeTwClassName } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
@@ -21,7 +21,7 @@ export const AvatarBase = ({ children, size = AvatarBaseSize.Md, shape = AvatarB
                 : 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 color={TextColor.TextMuted} variant={TextVariant.BodySm} fontWeight={FontWeight.Medium} {...fallbackTextProps} twClassName={mergeTwClassName('uppercase', fallbackTextProps?.twClassName)}>
           {fallbackText}
         </Text>) : (children)}
     </View>);

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,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,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-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/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"]}
+{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,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,gBAAgB,CAC3B,WAAW,EACX,iBAAiB,EAAE,WAAW,CAC/B,CAAC,CAEF;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  mergeTwClassName,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/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={mergeTwClassName(\n            'uppercase',\n            fallbackTextProps?.twClassName,\n          )}\n        >\n          {fallbackText}\n        </Text>\n      ) : (\n        children\n      )}\n    </View>\n  );\n};\n"]}

package/dist/components/AvatarIcon/AvatarIcon.constants.cjs

@@ -7,7 +7,7 @@ exports.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = {
     [design_system_shared_1.AvatarIconSeverity.Neutral]: 'bg-muted',
     [design_system_shared_1.AvatarIconSeverity.Info]: 'bg-info-muted',
     [design_system_shared_1.AvatarIconSeverity.Success]: 'bg-success-muted',
-    [design_system_shared_1.AvatarIconSeverity.Error]: 'bg-error-muted',
+    [design_system_shared_1.AvatarIconSeverity.Danger]: 'bg-error-muted',
     [design_system_shared_1.AvatarIconSeverity.Warning]: 'bg-warning-muted',
 };
 exports.MAP_AVATARICON_SIZE_ICONSIZE = {
@@ -21,7 +21,7 @@ exports.MAP_AVATARICON_SEVERITY_ICONCOLOR = {
     [design_system_shared_1.AvatarIconSeverity.Neutral]: design_system_shared_1.IconColor.IconAlternative,
     [design_system_shared_1.AvatarIconSeverity.Info]: design_system_shared_1.IconColor.InfoDefault,
     [design_system_shared_1.AvatarIconSeverity.Success]: design_system_shared_1.IconColor.SuccessDefault,
-    [design_system_shared_1.AvatarIconSeverity.Error]: design_system_shared_1.IconColor.ErrorDefault,
+    [design_system_shared_1.AvatarIconSeverity.Danger]: design_system_shared_1.IconColor.ErrorDefault,
     [design_system_shared_1.AvatarIconSeverity.Warning]: design_system_shared_1.IconColor.WarningDefault,
 };
 //# sourceMappingURL=AvatarIcon.constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kFAKiD;AAEjD,WAAW;AACE,QAAA,8CAA8C,GAGvD;IACF,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,yCAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,yCAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACW,QAAA,iCAAiC,GAG1C;IACF,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,eAAe;IACvD,CAAC,yCAAkB,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;IAChD,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IACtD,CAAC,yCAAkB,CAAC,KAAK,CAAC,EAAE,gCAAS,CAAC,YAAY;IAClD,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import {\n  AvatarIconSeverity,\n  AvatarIconSize,\n  IconColor,\n  IconSize,\n} from '@metamask-previews/design-system-shared';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Neutral]: 'bg-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Error]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}
+{"version":3,"file":"AvatarIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kFAKiD;AAEjD,WAAW;AACE,QAAA,8CAA8C,GAGvD;IACF,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,yCAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,yCAAkB,CAAC,MAAM,CAAC,EAAE,gBAAgB;IAC7C,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACW,QAAA,iCAAiC,GAG1C;IACF,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,eAAe;IACvD,CAAC,yCAAkB,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;IAChD,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IACtD,CAAC,yCAAkB,CAAC,MAAM,CAAC,EAAE,gCAAS,CAAC,YAAY;IACnD,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import {\n  AvatarIconSeverity,\n  AvatarIconSize,\n  IconColor,\n  IconSize,\n} from '@metamask-previews/design-system-shared';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Neutral]: 'bg-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Danger]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Danger]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}

package/dist/components/AvatarIcon/AvatarIcon.constants.mjs

@@ -4,7 +4,7 @@ export const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = {
     [AvatarIconSeverity.Neutral]: 'bg-muted',
     [AvatarIconSeverity.Info]: 'bg-info-muted',
     [AvatarIconSeverity.Success]: 'bg-success-muted',
-    [AvatarIconSeverity.Error]: 'bg-error-muted',
+    [AvatarIconSeverity.Danger]: 'bg-error-muted',
     [AvatarIconSeverity.Warning]: 'bg-warning-muted',
 };
 export const MAP_AVATARICON_SIZE_ICONSIZE = {
@@ -18,7 +18,7 @@ export const MAP_AVATARICON_SEVERITY_ICONCOLOR = {
     [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,
     [AvatarIconSeverity.Info]: IconColor.InfoDefault,
     [AvatarIconSeverity.Success]: IconColor.SuccessDefault,
-    [AvatarIconSeverity.Error]: IconColor.ErrorDefault,
+    [AvatarIconSeverity.Danger]: IconColor.ErrorDefault,
     [AvatarIconSeverity.Warning]: IconColor.WarningDefault,
 };
 //# sourceMappingURL=AvatarIcon.constants.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,gDAAgD;AAEjD,WAAW;AACX,MAAM,CAAC,MAAM,8CAA8C,GAGvD;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACF,MAAM,CAAC,MAAM,iCAAiC,GAG1C;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,eAAe;IACvD,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;IAChD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IACtD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY;IAClD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import {\n  AvatarIconSeverity,\n  AvatarIconSize,\n  IconColor,\n  IconSize,\n} from '@metamask-previews/design-system-shared';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Neutral]: 'bg-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Error]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}
+{"version":3,"file":"AvatarIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,QAAQ,EACT,gDAAgD;AAEjD,WAAW;AACX,MAAM,CAAC,MAAM,8CAA8C,GAGvD;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,gBAAgB;IAC7C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AACF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AACF,MAAM,CAAC,MAAM,iCAAiC,GAG1C;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,eAAe;IACvD,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;IAChD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IACtD,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IACnD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import {\n  AvatarIconSeverity,\n  AvatarIconSize,\n  IconColor,\n  IconSize,\n} from '@metamask-previews/design-system-shared';\n\n// Mappings\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n  AvatarIconSeverity,\n  string\n> = {\n  [AvatarIconSeverity.Neutral]: 'bg-muted',\n  [AvatarIconSeverity.Info]: 'bg-info-muted',\n  [AvatarIconSeverity.Success]: 'bg-success-muted',\n  [AvatarIconSeverity.Danger]: 'bg-error-muted',\n  [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n  [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n  [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n  [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n  [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n  [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n  AvatarIconSeverity,\n  IconColor\n> = {\n  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n  [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n  [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n  [AvatarIconSeverity.Danger]: IconColor.ErrorDefault,\n  [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}

package/dist/components/AvatarNetwork/AvatarNetwork.cjs

@@ -26,10 +26,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarNetwork = void 0;
 const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 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 AvatarNetwork = ({ src, size = types_1.AvatarNetworkSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
+const AvatarNetwork = ({ src, size = design_system_shared_1.AvatarNetworkSize.Md, name, fallbackText, fallbackTextProps, imageOrSvgProps, ...props }) => {
     const [finalFallbackText, setFallbackText] = (0, react_1.useState)('');
     const backupFallbackText = fallbackText || name?.[0] || '?';
     const onImageErrorHandler = (e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAA0E;AAC1E,+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-previews/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"]}
+{"version":3,"file":"AvatarNetwork.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,+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  AvatarNetworkSize,\n} from '@metamask-previews/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 { 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,sBAsCpB,CAAC"}
+{"version":3,"file":"AvatarNetwork.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.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/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,sBAsCpB,CAAC"}
+{"version":3,"file":"AvatarNetwork.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.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/AvatarNetwork/AvatarNetwork.mjs

@@ -4,10 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
-import { AvatarBaseShape } from "@metamask-previews/design-system-shared";
+import { AvatarBaseShape, AvatarNetworkSize } from "@metamask-previews/design-system-shared";
 import $React, { useState } from "react";
 const React = $importDefault($React);
-import { AvatarNetworkSize } from "../../types/index.mjs";
 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 }) => {

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,gDAAgD;AAC1E,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-previews/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"]}
+{"version":3,"file":"AvatarNetwork.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,gDAAgD;AACjD,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  AvatarNetworkSize,\n} from '@metamask-previews/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 { 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/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/index.ts"],"names":[],"mappings":";;;AAAA,+CAAgD;AAAvC,0GAAA,iBAAiB,OAAA;AAC1B,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { AvatarNetworkSize } from '../../types';\nexport { AvatarNetwork } from './AvatarNetwork';\nexport type { AvatarNetworkProps } from './AvatarNetwork.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/index.ts"],"names":[],"mappings":";;;AAAA,gFAA4E;AAAnE,yHAAA,iBAAiB,OAAA;AAC1B,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { AvatarNetworkSize } from '@metamask-previews/design-system-shared';\nexport { AvatarNetwork } from './AvatarNetwork';\nexport type { AvatarNetworkProps } from './AvatarNetwork.types';\n"]}

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

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

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

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

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

@@ -1,4 +1,4 @@
-export { AvatarNetworkSize } from "../../types/index.mjs";
+export { AvatarNetworkSize } from "@metamask-previews/design-system-shared";
 export { AvatarNetwork } from "./AvatarNetwork.mjs";
 export type { AvatarNetworkProps } from "./AvatarNetwork.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

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

package/dist/components/AvatarNetwork/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,8BAAoB;AAChD,OAAO,EAAE,aAAa,EAAE,4BAAwB","sourcesContent":["export { AvatarNetworkSize } from '../../types';\nexport { AvatarNetwork } from './AvatarNetwork';\nexport type { AvatarNetworkProps } from './AvatarNetwork.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAC5E,OAAO,EAAE,aAAa,EAAE,4BAAwB","sourcesContent":["export { AvatarNetworkSize } from '@metamask-previews/design-system-shared';\nexport { AvatarNetwork } from './AvatarNetwork';\nexport type { AvatarNetworkProps } from './AvatarNetwork.types';\n"]}

package/dist/components/BadgeCount/BadgeCount.cjs

@@ -16,7 +16,7 @@ const BadgeCount = ({ size = design_system_shared_1.BadgeCountSize.Md, count, ma
             tw.style('bg-error-default rounded-lg items-center justify-center self-start', BadgeCount_constants_1.TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size], twClassName),
             style,
         ]}>
-      <Text_1.Text variant={BadgeCount_constants_1.MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]} color={Text_1.TextColor.ErrorInverse} fontWeight={Text_1.FontWeight.Medium} {...textProps} twClassName={`leading-0 ${textProps?.twClassName || ''}`}>
+      <Text_1.Text variant={BadgeCount_constants_1.MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]} color={Text_1.TextColor.ErrorInverse} fontWeight={Text_1.FontWeight.Medium} {...textProps} twClassName={(0, design_system_shared_1.mergeTwClassName)('leading-0', textProps?.twClassName)}>
         {count > max ? `${max}+` : `${count}`}
       </Text_1.Text>
     </react_native_1.View>);

package/dist/components/BadgeCount/BadgeCount.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAAyE;AACzE,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,4CAAsD;AAEtD,qEAGgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,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,oEAAoE,EACpE,2DAAoC,CAAC,IAAI,CAAC,EAC1C,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,sDAA+B,CAAC,IAAI,CAAC,CAAC,CAC/C,KAAK,CAAC,CAAC,gBAAS,CAAC,YAAY,CAAC,CAC9B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,aAAa,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE,CAAC,CAEzD;QAAA,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CACvC;MAAA,EAAE,WAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,UAAU,cAkCrB","sourcesContent":["import { BadgeCountSize } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = ({\n  size = BadgeCountSize.Md,\n  count,\n  max = 99,\n  textProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeCountProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'bg-error-default rounded-lg items-center justify-center self-start',\n          TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Text\n        variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n        color={TextColor.ErrorInverse}\n        fontWeight={FontWeight.Medium}\n        {...textProps}\n        twClassName={`leading-0 ${textProps?.twClassName || ''}`}\n      >\n        {count > max ? `${max}+` : `${count}`}\n      </Text>\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"BadgeCount.cjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAGiD;AACjD,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,4CAAsD;AAEtD,qEAGgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,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,oEAAoE,EACpE,2DAAoC,CAAC,IAAI,CAAC,EAC1C,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,sDAA+B,CAAC,IAAI,CAAC,CAAC,CAC/C,KAAK,CAAC,CAAC,gBAAS,CAAC,YAAY,CAAC,CAC9B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,IAAA,uCAAgB,EAAC,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAEnE;QAAA,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CACvC;MAAA,EAAE,WAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,UAAU,cAkCrB","sourcesContent":["import {\n  BadgeCountSize,\n  mergeTwClassName,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = ({\n  size = BadgeCountSize.Md,\n  count,\n  max = 99,\n  textProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeCountProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'bg-error-default rounded-lg items-center justify-center self-start',\n          TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Text\n        variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n        color={TextColor.ErrorInverse}\n        fontWeight={FontWeight.Medium}\n        {...textProps}\n        twClassName={mergeTwClassName('leading-0', textProps?.twClassName)}\n      >\n        {count > max ? `${max}+` : `${count}`}\n      </Text>\n    </View>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,kEAQpB,eAAe,sBA0BjB,CAAC"}
+{"version":3,"file":"BadgeCount.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,kEAQpB,eAAe,sBA0BjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,kEAQpB,eAAe,sBA0BjB,CAAC"}
+{"version":3,"file":"BadgeCount.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,kEAQpB,eAAe,sBA0BjB,CAAC"}

package/dist/components/BadgeCount/BadgeCount.mjs

@@ -4,7 +4,7 @@ function $importDefault(module) {
     }
     return module;
 }
-import { BadgeCountSize } from "@metamask-previews/design-system-shared";
+import { BadgeCountSize, mergeTwClassName } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
@@ -17,7 +17,7 @@ export const BadgeCount = ({ size = BadgeCountSize.Md, count, max = 99, textProp
             tw.style('bg-error-default rounded-lg items-center justify-center self-start', TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size], twClassName),
             style,
         ]}>
-      <Text variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]} color={TextColor.ErrorInverse} fontWeight={FontWeight.Medium} {...textProps} twClassName={`leading-0 ${textProps?.twClassName || ''}`}>
+      <Text variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]} color={TextColor.ErrorInverse} fontWeight={FontWeight.Medium} {...textProps} twClassName={mergeTwClassName('leading-0', textProps?.twClassName)}>
         {count > max ? `${max}+` : `${count}`}
       </Text>
     </View>);

package/dist/components/BadgeCount/BadgeCount.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeCount.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,gDAAgD;AACzE,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAEpC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,0BAAgB;AAEtD,OAAO,EACL,+BAA+B,EAC/B,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,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,oEAAoE,EACpE,oCAAoC,CAAC,IAAI,CAAC,EAC1C,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,+BAA+B,CAAC,IAAI,CAAC,CAAC,CAC/C,KAAK,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAC9B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,aAAa,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE,CAAC,CAEzD;QAAA,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CACvC;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { BadgeCountSize } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = ({\n  size = BadgeCountSize.Md,\n  count,\n  max = 99,\n  textProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeCountProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'bg-error-default rounded-lg items-center justify-center self-start',\n          TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Text\n        variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n        color={TextColor.ErrorInverse}\n        fontWeight={FontWeight.Medium}\n        {...textProps}\n        twClassName={`leading-0 ${textProps?.twClassName || ''}`}\n      >\n        {count > max ? `${max}+` : `${count}`}\n      </Text>\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"BadgeCount.mjs","sourceRoot":"","sources":["../../../src/components/BadgeCount/BadgeCount.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,gBAAgB,EACjB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAEpC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,0BAAgB;AAEtD,OAAO,EACL,+BAA+B,EAC/B,oCAAoC,EACrC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,EACL,GAAG,GAAG,EAAE,EACR,SAAS,EACT,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,oEAAoE,EACpE,oCAAoC,CAAC,IAAI,CAAC,EAC1C,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,+BAA+B,CAAC,IAAI,CAAC,CAAC,CAC/C,KAAK,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAC9B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAEnE;QAAA,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CACvC;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  BadgeCountSize,\n  mergeTwClassName,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, TextColor, FontWeight } from '../Text';\n\nimport {\n  MAP_BADGECOUNT_SIZE_TEXTVARIANT,\n  TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER,\n} from './BadgeCount.constants';\nimport type { BadgeCountProps } from './BadgeCount.types';\n\nexport const BadgeCount = ({\n  size = BadgeCountSize.Md,\n  count,\n  max = 99,\n  textProps,\n  twClassName,\n  style,\n  ...props\n}: BadgeCountProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'bg-error-default rounded-lg items-center justify-center self-start',\n          TWCLASSMAP_BADGECOUNT_SIZE_CONTAINER[size],\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <Text\n        variant={MAP_BADGECOUNT_SIZE_TEXTVARIANT[size]}\n        color={TextColor.ErrorInverse}\n        fontWeight={FontWeight.Medium}\n        {...textProps}\n        twClassName={mergeTwClassName('leading-0', textProps?.twClassName)}\n      >\n        {count > max ? `${max}+` : `${count}`}\n      </Text>\n    </View>\n  );\n};\n"]}

package/dist/components/BannerBase/BannerBase.cjs

@@ -20,7 +20,7 @@ const BannerBase = ({ title, titleProps, description, descriptionProps, children
     const mergedCloseButtonTwClassName = closeButtonTwClassName
         ? `ml-3 ${closeButtonTwClassName}`
         : 'ml-3';
-    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={design_system_shared_1.BoxAlignItems.Start} gap={2} backgroundColor={design_system_shared_1.BoxBackgroundColor.BackgroundDefault} padding={3} twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'} {...props}>
+    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={design_system_shared_1.BoxAlignItems.Start} gap={2} backgroundColor={design_system_shared_1.BoxBackgroundColor.BackgroundDefault} padding={3} twClassName={(0, design_system_shared_1.mergeTwClassName)('rounded-sm', twClassName)} {...props}>
       {startAccessory}
 
       <Box_1.Box twClassName="flex-1">

package/dist/components/BannerBase/BannerBase.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;AAAA,kFASiD;AACjD,kDAA0B;AAE1B,0CAA6B;AAC7B,gDAAmC;AACnC,wDAA2C;AAC3C,4CAA+B;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAErC,MAAM,UAAU,GAA8B,CAAC,EACpD,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,kBAAkB,EAAE,6BAA6B,GAAG,cAAc,EAClE,WAAW,EAAE,sBAAsB,EACnC,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE5D,MAAM,4BAA4B,GAAG,sBAAsB;QACzD,CAAC,CAAC,QAAQ,sBAAsB,EAAE;QAClC,CAAC,CAAC,MAAM,CAAC;IAEX,OAAO,CACL,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,uCAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,oCAAa,CAAC,KAAK,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,eAAe,CAAC,CAAC,yCAAkB,CAAC,iBAAiB,CAAC,CACtD,OAAO,CAAC,CAAC,CAAC,CAAC,CACX,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,WAAW,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CACtE,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,cAAc,CAEf;;MAAA,CAAC,SAAG,CAAC,WAAW,CAAC,QAAQ,CACvB;QAAA,CAAC,UAAU,CAAC,KAAK,CAAC;YAChB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,kCAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iCAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,UAAU,CAAC,CAEf;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC,CAEJ;;QAAA,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,CAAC,SAAG,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CACvD;YAAA,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC5B,CAAC,WAAI,CAAC,OAAO,CAAC,CAAC,kCAAW,CAAC,MAAM,CAAC,CAAC,IAAI,gBAAgB,CAAC,CACtD;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CACH;UAAA,EAAE,SAAG,CAAC,CACP,CAED;;QAAA,CAAC,UAAU,CAAC,QAAQ,CAAC;YACnB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzB,CAAC,WAAI,CAAC,OAAO,CAAC,CAAC,kCAAW,CAAC,MAAM,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAC1D;cAAA,CAAC,QAAQ,CACX;YAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC,CAEJ;;QAAA,CAAC,sBAAsB,IAAI,CACzB,CAAC,SAAG,CAAC,WAAW,CAAC,MAAM,CACrB;YAAA,CAAC,eAAM,CACL,IAAI,CAAC,CAAC,iCAAU,CAAC,EAAE,CAAC,CACpB,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAC7B,IAAI,yBAAyB,CAAC,CAE9B;cAAA,CAAC,iBAAiB,CACpB;YAAA,EAAE,eAAM,CACV;UAAA,EAAE,SAAG,CAAC,CACP,CACH;MAAA,EAAE,SAAG,CAEL;;MAAA,CAAC,qBAAqB,IAAI,CACxB,CAAC,uBAAU,CACT,WAAW,CAAC,CAAC,4BAA4B,CAAC,CAC1C,QAAQ,CAAC,CAAC,+BAAQ,CAAC,KAAK,CAAC,CACzB,IAAI,CAAC,CAAC,qCAAc,CAAC,EAAE,CAAC,CACxB,kBAAkB,CAAC,CAAC,6BAA6B,CAAC,CAClD,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,wBAAwB,CAAC,EAC7B,CACH,CACH;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAvGW,QAAA,UAAU,cAuGrB","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n  const mergedCloseButtonTwClassName = closeButtonTwClassName\n    ? `ml-3 ${closeButtonTwClassName}`\n    : 'ml-3';\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={2}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      padding={3}\n      twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box twClassName={hasContent(title) ? 'mt-1' : undefined}>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {shouldShowActionButton && (\n          <Box twClassName=\"mt-4\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergedCloseButtonTwClassName}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Sm}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={onClose}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}
+{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  mergeTwClassName,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n  const mergedCloseButtonTwClassName = closeButtonTwClassName\n    ? `ml-3 ${closeButtonTwClassName}`\n    : 'ml-3';\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={2}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      padding={3}\n      twClassName={mergeTwClassName('rounded-sm', twClassName)}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box twClassName={hasContent(title) ? 'mt-1' : undefined}>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {shouldShowActionButton && (\n          <Box twClassName=\"mt-4\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergedCloseButtonTwClassName}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Sm}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={onClose}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuGhD,CAAC"}
+{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuGhD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuGhD,CAAC"}
+{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAQ1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuGhD,CAAC"}

package/dist/components/BannerBase/BannerBase.mjs

@@ -4,7 +4,7 @@ function $importDefault(module) {
     }
     return module;
 }
-import { BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, FontWeight, IconName, TextVariant } from "@metamask-previews/design-system-shared";
+import { BoxAlignItems, BoxBackgroundColor, BoxFlexDirection, ButtonIconSize, ButtonSize, FontWeight, IconName, mergeTwClassName, TextVariant } from "@metamask-previews/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
 import { Box } from "../Box/index.mjs";
@@ -21,7 +21,7 @@ export const BannerBase = ({ title, titleProps, description, descriptionProps, c
     const mergedCloseButtonTwClassName = closeButtonTwClassName
         ? `ml-3 ${closeButtonTwClassName}`
         : 'ml-3';
-    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} gap={2} backgroundColor={BoxBackgroundColor.BackgroundDefault} padding={3} twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'} {...props}>
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Start} gap={2} backgroundColor={BoxBackgroundColor.BackgroundDefault} padding={3} twClassName={mergeTwClassName('rounded-sm', twClassName)} {...props}>
       {startAccessory}
 
       <Box twClassName="flex-1">

package/dist/components/BannerBase/BannerBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n  const mergedCloseButtonTwClassName = closeButtonTwClassName\n    ? `ml-3 ${closeButtonTwClassName}`\n    : 'ml-3';\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={2}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      padding={3}\n      twClassName={twClassName ? `rounded-sm ${twClassName}` : 'rounded-sm'}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box twClassName={hasContent(title) ? 'mt-1' : undefined}>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {shouldShowActionButton && (\n          <Box twClassName=\"mt-4\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergedCloseButtonTwClassName}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Sm}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={onClose}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}
+{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  BoxAlignItems,\n  BoxBackgroundColor,\n  BoxFlexDirection,\n  ButtonIconSize,\n  ButtonSize,\n  FontWeight,\n  IconName,\n  mergeTwClassName,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n  typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n  content !== null && content !== undefined;\n\nexport const BannerBase: React.FC<BannerBaseProps> = ({\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n  children,\n  childrenWrapperProps,\n  actionButtonLabel,\n  actionButtonOnPress,\n  actionButtonProps,\n  startAccessory,\n  onClose,\n  closeButtonProps,\n  twClassName,\n  ...props\n}) => {\n  const resolvedActionButtonProps = actionButtonProps ?? {};\n\n  const {\n    accessibilityLabel: closeButtonAccessibilityLabel = 'Close banner',\n    twClassName: closeButtonTwClassName,\n    ...resolvedCloseButtonProps\n  } = closeButtonProps ?? {};\n\n  const shouldShowCloseButton = Boolean(onClose);\n  const shouldShowActionButton = Boolean(actionButtonOnPress);\n\n  const mergedCloseButtonTwClassName = closeButtonTwClassName\n    ? `ml-3 ${closeButtonTwClassName}`\n    : 'ml-3';\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Start}\n      gap={2}\n      backgroundColor={BoxBackgroundColor.BackgroundDefault}\n      padding={3}\n      twClassName={mergeTwClassName('rounded-sm', twClassName)}\n      {...props}\n    >\n      {startAccessory}\n\n      <Box twClassName=\"flex-1\">\n        {hasContent(title) &&\n          (isTextContent(title) ? (\n            <Text\n              variant={TextVariant.BodyMd}\n              fontWeight={FontWeight.Medium}\n              {...titleProps}\n            >\n              {title}\n            </Text>\n          ) : (\n            title\n          ))}\n\n        {hasContent(description) && (\n          <Box twClassName={hasContent(title) ? 'mt-1' : undefined}>\n            {isTextContent(description) ? (\n              <Text variant={TextVariant.BodySm} {...descriptionProps}>\n                {description}\n              </Text>\n            ) : (\n              description\n            )}\n          </Box>\n        )}\n\n        {hasContent(children) &&\n          (isTextContent(children) ? (\n            <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n              {children}\n            </Text>\n          ) : (\n            children\n          ))}\n\n        {shouldShowActionButton && (\n          <Box twClassName=\"mt-4\">\n            <Button\n              size={ButtonSize.Md}\n              onPress={actionButtonOnPress}\n              {...resolvedActionButtonProps}\n            >\n              {actionButtonLabel}\n            </Button>\n          </Box>\n        )}\n      </Box>\n\n      {shouldShowCloseButton && (\n        <ButtonIcon\n          twClassName={mergedCloseButtonTwClassName}\n          iconName={IconName.Close}\n          size={ButtonIconSize.Sm}\n          accessibilityLabel={closeButtonAccessibilityLabel}\n          onPress={onClose}\n          {...resolvedCloseButtonProps}\n        />\n      )}\n    </Box>\n  );\n};\n"]}

package/dist/components/BottomSheetDialog/BottomSheetDialog.cjs

@@ -66,13 +66,22 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
         // Ref values do not affect deps.
     }, [onCloseCB]);
     const gestureHandler = (0, react_1.useMemo)(() => {
+        // These gesture callbacks need explicit 'worklet' directives because this
+        // package ships a pre-built dist compiled by ts-bridge (tsc), which emits the
+        // gesture chain as a namespaced call (react_native_gesture_handler_1.Gesture).
+        // The consumer's Reanimated/Worklets Babel plugin does run over dist (that's
+        // why useAnimatedStyle below works), but its gesture auto-detection doesn't
+        // recognize that compiled namespaced form, so without these directives the
+        // callbacks run on the JS thread and slow drags lag behind the finger.
         const gesture = react_native_gesture_handler_1.Gesture.Pan()
             .enabled(isInteractable)
             .onStart(() => {
+            'worklet';
             // Starts tracking vertical position of gesture.
             gestureStartYOffset.value = currentYOffset.value;
         })
             .onUpdate((event) => {
+            'worklet';
             const { translationY } = event;
             currentYOffset.value = gestureStartYOffset.value + translationY;
             // If gesture Y value goes above the bottom of Dialog Y value(bottom of dialog),
@@ -89,6 +98,7 @@ exports.BottomSheetDialog = (0, react_1.forwardRef)(({ children, isFullscreen =
             }
         })
             .onEnd((event) => {
+            'worklet';
             const { translationY, velocityY } = event;
             // finalYOffset is used to animate the Y position of the Dialog after the gesture event
             let finalYOffset;