@metamask-previews/design-system-react-native 0.19.0-preview.1679aa9 → 0.24.0-preview.178e60f

package/CHANGELOG.md

@@ -7,6 +7,82 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.24.0]
+
+### Added
+
+- Added `ListArrow`, `Musd`, and `MusdFilled` icons; refreshed `Candlestick`; and added `Group`, `PieChart`, and `Predictions` icons (same names as in `@metamask/design-system-react`) ([#1157](https://github.com/MetaMask/metamask-design-system/pull/1157), [#1161](https://github.com/MetaMask/metamask-design-system/pull/1161), [#1162](https://github.com/MetaMask/metamask-design-system/pull/1162), [#1163](https://github.com/MetaMask/metamask-design-system/pull/1163))
+
+### Changed
+
+- **BREAKING:** Tightened the `Toast` API shipped with `Toaster` in 0.23.0 ([#1143](https://github.com/MetaMask/metamask-design-system/pull/1143))
+  - **`toast.show`** → **`toast(...)`**; **`toast.hide`** → **`toast.dismiss()`**
+  - **`iconProps`** renamed to **`iconAlertProps`**
+  - **`ToastSeverity.Info`** removed; use **`Default`**, **`Success`**, **`Warning`**, or **`Danger`**
+  - **`hasNoTimeout`** is optional and defaults to auto-dismiss unless set to **`true`**
+  - Close control is always shown on the toast surface
+  - See [Migration Guide](./MIGRATION.md#from-version-0230-to-0x0)
+- Expanded `HeaderBase` migration guidance for apps moving off the mobile component library ([#1100](https://github.com/MetaMask/metamask-design-system/pull/1100))
+
+## [0.23.0]
+
+### Added
+
+- Added `Merge` to the icon set so it can be used anywhere `IconName` is supported in `@metamask/design-system-react-native` ([#1155](https://github.com/MetaMask/metamask-design-system/pull/1155))
+
+### Changed
+
+- **BREAKING:** Redesigned `Toast` to use a single mounted `<Toast />` plus static `Toast.show(...)` and `Toast.hide()` methods for application usage ([#1104](https://github.com/MetaMask/metamask-design-system/pull/1104))
+  - Removed `ToastContext`, `ToastContextWrapper`, and `ToastContextParams` from the public export surface
+  - Renamed `ToastVariants` to `ToastVariant`, changed icon-only close buttons to `ToastCloseButtonVariant.Icon`, and renamed `customBottomOffset` to `bottomOffset`
+  - `Toast.show()` and `Toast.hide()` now throw a descriptive error if called before `<Toast />` mounts
+  - See [Migration Guide](./MIGRATION.md#from-version-0220-to-0230)
+- Updated `Input` to use the shared cross-platform API. Consumers should pass a controlled `value`, replace `isReadonly` with `isReadOnly`, and use the shared state-style behavior expected by wrappers like `TextField` ([#1043](https://github.com/MetaMask/metamask-design-system/pull/1043))
+- Updated `AvatarGroup` to use shared cross-platform size and variant contracts, keeping React and React Native aligned on the same public API names and values ([#1067](https://github.com/MetaMask/metamask-design-system/pull/1067))
+
+## [0.22.0]
+
+### Changed
+
+- **BREAKING:** Updated `Button`, `ButtonBase`, and `ButtonHero` size and variant exports to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React Native with the shared cross-platform type contracts ([#1034](https://github.com/MetaMask/metamask-design-system/pull/1034))
+  - No migration required for typical usage; continue importing from `@metamask/design-system-react-native` as before.
+  - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
+- **BREAKING:** Updated `ButtonIconSize` and `ButtonIconVariant` to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React Native with the shared cross-platform type contracts ([#1038](https://github.com/MetaMask/metamask-design-system/pull/1038))
+  - No migration required for typical usage; continue importing from `@metamask/design-system-react-native` as before.
+  - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
+- **BREAKING:** `TextField` and `TextFieldSearch` now use a root `Box`/`View`, require native `TextInput` props under `inputProps`, rename `isReadonly` to `isReadOnly`, and use `inputRef` for the inner input ref. See [Migration Guide](./MIGRATION.md#from-version-0210-to-0220) ([#1081](https://github.com/MetaMask/metamask-design-system/pull/1081))
+- Updated Figma Code Connect to the live `MMDS Components` file and aligned `ButtonIcon` and `TextButton` mappings with the current component APIs shown in Dev Mode ([#1109](https://github.com/MetaMask/metamask-design-system/pull/1109))
+
+## [0.21.0]
+
+### Added
+
+- Added `Telegram` to the `IconName` set for use anywhere the React Native package accepts design system icons ([#1122](https://github.com/MetaMask/metamask-design-system/pull/1122))
+
+### Changed
+
+- **BREAKING:** Updated `AvatarIcon` exports to use shared const-object + string-union types rather than local enum-based definitions, aligning React Native with the shared cross-platform type contracts ([#996](https://github.com/MetaMask/metamask-design-system/pull/996))
+  - No migration required for typical usage; continue importing from `@metamask/design-system-react-native` as before.
+  - Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
+
+## [0.20.0]
+
+### Added
+
+- Added `TitleStandard` for mobile title layouts with optional top and bottom accessory rows ([#1051](https://github.com/MetaMask/metamask-design-system/pull/1051))
+- Added `TitleSubpage` for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts ([#1059](https://github.com/MetaMask/metamask-design-system/pull/1059))
+- Added `Tag` for compact severity-based metadata labels with optional icons or custom accessories ([#1053](https://github.com/MetaMask/metamask-design-system/pull/1053))
+
+### Changed
+
+- `Box` now forwards refs to the underlying `View`, which makes imperative measurement and focus flows easier to integrate ([#1102](https://github.com/MetaMask/metamask-design-system/pull/1102))
+- Updated `ButtonTertiary` to use the default text color for more consistent contrast across states ([#1099](https://github.com/MetaMask/metamask-design-system/pull/1099))
+- **BREAKING:** Updated `IconName`, `IconColor`, and `IconSize` exports to use const-object + string-union types instead of local enums; existing imports from `@metamask/design-system-react-native` continue to work, but enum-specific type assumptions may need updating ([#1042](https://github.com/MetaMask/metamask-design-system/pull/1042))
+  - See [Migration Guide](./MIGRATION.md#from-version-0190-to-0200)
+- **BREAKING:** Updated `Box` type exports (`BoxFlexDirection`, `BoxFlexWrap`, `BoxAlignItems`, `BoxJustifyContent`, `BoxBackgroundColor`, `BoxBorderColor`, `BoxSpacing`, `BoxBorderWidth`) to use const-object + string-union types, and removed stale Box color entries that no longer map to design tokens ([#1026](https://github.com/MetaMask/metamask-design-system/pull/1026))
+  - Removed `BoxBackgroundColor.WarningAlternative`, `BoxBackgroundColor.SuccessAlternative`, `BoxBorderColor.WarningAlternative`, `BoxBorderColor.SuccessAlternative`, and `BoxBorderColor.InfoAlternative`
+  - See [Migration Guide](./MIGRATION.md#from-version-0190-to-0200)
+
 ## [0.19.0]
 
 ### Added
@@ -312,13 +388,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Added 5 new Text component variants with responsive typography support ([#777](https://github.com/MetaMask/metamask-design-system/pull/777)):
+- Added 5 new Text component variants with responsive typography support: ([#777](https://github.com/MetaMask/metamask-design-system/pull/777))
   - `TextVariant.PageHeading` - For main page titles with large, bold styling
   - `TextVariant.SectionHeading` - For section titles with medium, bold styling
   - `TextVariant.ButtonLabelMd` - For medium-sized button labels with optimized button text styling
   - `TextVariant.ButtonLabelLg` - For large-sized button labels with optimized button text styling
   - `TextVariant.AmountDisplayLg` - For large amount/value displays with prominent numeric styling
-- Added comprehensive utility props to Box component for enhanced layout control ([#779](https://github.com/MetaMask/metamask-design-system/pull/779)) and fixes ([#781](https://github.com/MetaMask/metamask-design-system/pull/781)):
+- Added comprehensive utility props to Box component for enhanced layout control and fixes: ([#779](https://github.com/MetaMask/metamask-design-system/pull/779), [#781](https://github.com/MetaMask/metamask-design-system/pull/781))
   - **Margin props:** `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`, `marginVertical`
   - **Padding props:** `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`, `paddingVertical`
   - **Border props:** `borderWidth`, `borderColor`
@@ -343,7 +419,12 @@ 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.19.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.24.0...HEAD
+[0.24.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.23.0...@metamask/design-system-react-native@0.24.0
+[0.23.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.22.0...@metamask/design-system-react-native@0.23.0
+[0.22.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.21.0...@metamask/design-system-react-native@0.22.0
+[0.21.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.20.0...@metamask/design-system-react-native@0.21.0
+[0.20.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.19.0...@metamask/design-system-react-native@0.20.0
 [0.19.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.18.0...@metamask/design-system-react-native@0.19.0
 [0.18.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.17.0...@metamask/design-system-react-native@0.18.0
 [0.17.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.16.0...@metamask/design-system-react-native@0.17.0

package/dist/components/AvatarGroup/AvatarGroup.cjs

@@ -24,33 +24,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarGroup = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native/index.js");
-const types_1 = require("../../types/index.cjs");
 const AvatarAccount_1 = require("../AvatarAccount/index.cjs");
 const AvatarBase_1 = require("../AvatarBase/index.cjs");
 const AvatarFavicon_1 = require("../AvatarFavicon/index.cjs");
 const AvatarNetwork_1 = require("../AvatarNetwork/index.cjs");
 const AvatarToken_1 = require("../AvatarToken/index.cjs");
-const Text_1 = require("../Text/index.cjs");
 const AvatarGroup_constants_1 = require("./AvatarGroup.constants.cjs");
-const AvatarGroup = ({ variant, avatarPropsArr, size = types_1.AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, twClassName, ...props }) => {
+const AvatarGroup = ({ variant, avatarPropsArr, size = design_system_shared_1.AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, twClassName, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const overflowCounter = avatarPropsArr.length - max;
     const shouldRenderOverflowCounter = overflowCounter > 0;
     const renderAvatarList = (0, react_1.useCallback)(() => avatarPropsArr.slice(0, max).map((avatarProps, index) => {
         switch (variant) {
-            case types_1.AvatarGroupVariant.Account:
+            case design_system_shared_1.AvatarGroupVariant.Account:
                 return (<AvatarAccount_1.AvatarAccount key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
-            case types_1.AvatarGroupVariant.Favicon:
+            case design_system_shared_1.AvatarGroupVariant.Favicon:
                 return (<AvatarFavicon_1.AvatarFavicon key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
-            case types_1.AvatarGroupVariant.Network:
+            case design_system_shared_1.AvatarGroupVariant.Network:
                 return (<AvatarNetwork_1.AvatarNetwork key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
-            case types_1.AvatarGroupVariant.Token:
+            case design_system_shared_1.AvatarGroupVariant.Token:
                 return (<AvatarToken_1.AvatarToken key={`avatar-${index}`} {...avatarProps} size={size} hasBorder/>);
             default:
-                throw new Error(`Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(types_1.AvatarGroupVariant).join(', ')}`);
+                throw new Error(`Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(design_system_shared_1.AvatarGroupVariant).join(', ')}`);
         }
     }), [avatarPropsArr, max, size, variant]);
     return (<react_native_1.View {...props} style={[
@@ -60,10 +59,10 @@ const AvatarGroup = ({ variant, avatarPropsArr, size = types_1.AvatarGroupSize.M
       {renderAvatarList()}
       {shouldRenderOverflowCounter && (<AvatarBase_1.AvatarBase twClassName="bg-icon-default" hasBorder fallbackText={`+${overflowCounter}`} fallbackTextProps={{
                 variant: AvatarGroup_constants_1.MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT[size],
-                color: Text_1.TextColor.PrimaryInverse,
-            }} size={size} shape={variant === types_1.AvatarGroupVariant.Network
-                ? AvatarBase_1.AvatarBaseShape.Square
-                : AvatarBase_1.AvatarBaseShape.Circle} {...overflowTextProps}/>)}
+                color: design_system_shared_1.TextColor.PrimaryInverse,
+            }} size={size} shape={variant === design_system_shared_1.AvatarGroupVariant.Network
+                ? design_system_shared_1.AvatarBaseShape.Square
+                : design_system_shared_1.AvatarBaseShape.Circle} {...overflowTextProps}/>)}
     </react_native_1.View>);
 };
 exports.AvatarGroup = AvatarGroup;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
-import { AvatarGroupSize } from "../../types/index.mjs";
-import { TextVariant } from "../Text/index.mjs";
+import { AvatarGroupSize, TextVariant } from "@metamask-previews/design-system-shared";
 // Mappings
 export const TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS = {
     [AvatarGroupSize.Xs]: 'gap-[-6px]',

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

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

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

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

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

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

package/dist/components/AvatarGroup/AvatarGroup.mjs

@@ -4,17 +4,16 @@ function $importDefault(module) {
     }
     return module;
 }
+import { AvatarBaseShape, AvatarGroupSize, AvatarGroupVariant, TextColor } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React, { useCallback } from "react";
 const React = $importDefault($React);
 import { View } from "react-native/index.js";
-import { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.mjs";
 import { AvatarAccount } from "../AvatarAccount/index.mjs";
-import { AvatarBase, AvatarBaseShape } from "../AvatarBase/index.mjs";
+import { AvatarBase } from "../AvatarBase/index.mjs";
 import { AvatarFavicon } from "../AvatarFavicon/index.mjs";
 import { AvatarNetwork } from "../AvatarNetwork/index.mjs";
 import { AvatarToken } from "../AvatarToken/index.mjs";
-import { TextColor } from "../Text/index.mjs";
 import { MAP_AVATARGROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT, TWCLASSMAP_AVATARGROUP_SIZE_SPACEBETWEENAVATARS } from "./AvatarGroup.constants.mjs";
 export const AvatarGroup = ({ variant, avatarPropsArr, size = AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, twClassName, ...props }) => {
     const tw = useTailwind();

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = {\n  /**\n   * Optional enum to select between Avatar Group sizes.\n   *\n   * @default AvatarGroupSize.Md\n   */\n  size?: AvatarGroupSize;\n  /**\n   * Optional enum to select max number of Avatars visible,\n   * before the overflow counter being displayed\n   *\n   * @default 4\n   */\n  max?: number;\n  /**\n   * Optional prop to reverse the direction of the AvatarGroup\n   */\n  isReverse?: boolean;\n  /**\n   * Optional prop to pass additional AvatarBase props to the overflow Text element\n   */\n  overflowTextProps?: AvatarBaseProps;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * AvatarGroup props.\n */\nexport type AvatarGroupProps = BaseAvatarGroupProps &\n  (\n    | {\n        variant: AvatarGroupVariant.Account;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarAccountProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Favicon;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarFaviconProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Network;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarNetworkProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Token;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarTokenProps[];\n      }\n  );\n"]}
+{"version":3,"file":"AvatarGroup.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  AvatarGroupPropsShared,\n  AvatarGroupVariant,\n} from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = Omit<AvatarGroupPropsShared, 'variant'> & {\n  /**\n   * Optional prop to pass additional AvatarBase props to the overflow Text element.\n   */\n  overflowTextProps?: AvatarBaseProps;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * AvatarGroup props.\n */\nexport type AvatarGroupProps = BaseAvatarGroupProps &\n  (\n    | {\n        variant: typeof AvatarGroupVariant.Account;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarAccountProps[];\n      }\n    | {\n        variant: typeof AvatarGroupVariant.Favicon;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarFaviconProps[];\n      }\n    | {\n        variant: typeof AvatarGroupVariant.Network;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarNetworkProps[];\n      }\n    | {\n        variant: typeof AvatarGroupVariant.Token;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarTokenProps[];\n      }\n  );\n"]}

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

@@ -1,30 +1,13 @@
+import type { AvatarGroupPropsShared, AvatarGroupVariant } from "@metamask-previews/design-system-shared";
 import type { ViewProps } from "react-native/index.js";
-import type { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.cjs";
 import type { AvatarAccountProps } from "../AvatarAccount/index.cjs";
 import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
 import type { AvatarFaviconProps } from "../AvatarFavicon/index.cjs";
 import type { AvatarNetworkProps } from "../AvatarNetwork/index.cjs";
 import type { AvatarTokenProps } from "../AvatarToken/index.cjs";
-type BaseAvatarGroupProps = {
+type BaseAvatarGroupProps = Omit<AvatarGroupPropsShared, 'variant'> & {
     /**
-     * Optional enum to select between Avatar Group sizes.
-     *
-     * @default AvatarGroupSize.Md
-     */
-    size?: AvatarGroupSize;
-    /**
-     * Optional enum to select max number of Avatars visible,
-     * before the overflow counter being displayed
-     *
-     * @default 4
-     */
-    max?: number;
-    /**
-     * Optional prop to reverse the direction of the AvatarGroup
-     */
-    isReverse?: boolean;
-    /**
-     * Optional prop to pass additional AvatarBase props to the overflow Text element
+     * Optional prop to pass additional AvatarBase props to the overflow Text element.
      */
     overflowTextProps?: AvatarBaseProps;
     /**
@@ -36,28 +19,28 @@ type BaseAvatarGroupProps = {
  * AvatarGroup props.
  */
 export type AvatarGroupProps = BaseAvatarGroupProps & ({
-    variant: AvatarGroupVariant.Account;
+    variant: typeof AvatarGroupVariant.Account;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
      */
     avatarPropsArr: AvatarAccountProps[];
 } | {
-    variant: AvatarGroupVariant.Favicon;
+    variant: typeof AvatarGroupVariant.Favicon;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
      */
     avatarPropsArr: AvatarFaviconProps[];
 } | {
-    variant: AvatarGroupVariant.Network;
+    variant: typeof AvatarGroupVariant.Network;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
      */
     avatarPropsArr: AvatarNetworkProps[];
 } | {
-    variant: AvatarGroupVariant.Token;
+    variant: typeof AvatarGroupVariant.Token;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,8BAAoB;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAEvD,KAAK,oBAAoB,GAAG;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CACI;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,KAAK,CAAC;IAClC;;;OAGG;IACH,cAAc,EAAE,gBAAgB,EAAE,CAAC;CACpC,CACJ,CAAC"}
+{"version":3,"file":"AvatarGroup.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EACnB,gDAAgD;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAEvD,KAAK,oBAAoB,GAAG,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAAG;IACpE;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CACI;IACE,OAAO,EAAE,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC3C;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC3C;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC3C;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,OAAO,kBAAkB,CAAC,KAAK,CAAC;IACzC;;;OAGG;IACH,cAAc,EAAE,gBAAgB,EAAE,CAAC;CACpC,CACJ,CAAC"}

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

@@ -1,30 +1,13 @@
+import type { AvatarGroupPropsShared, AvatarGroupVariant } from "@metamask-previews/design-system-shared";
 import type { ViewProps } from "react-native/index.js";
-import type { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.mjs";
 import type { AvatarAccountProps } from "../AvatarAccount/index.mjs";
 import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
 import type { AvatarFaviconProps } from "../AvatarFavicon/index.mjs";
 import type { AvatarNetworkProps } from "../AvatarNetwork/index.mjs";
 import type { AvatarTokenProps } from "../AvatarToken/index.mjs";
-type BaseAvatarGroupProps = {
+type BaseAvatarGroupProps = Omit<AvatarGroupPropsShared, 'variant'> & {
     /**
-     * Optional enum to select between Avatar Group sizes.
-     *
-     * @default AvatarGroupSize.Md
-     */
-    size?: AvatarGroupSize;
-    /**
-     * Optional enum to select max number of Avatars visible,
-     * before the overflow counter being displayed
-     *
-     * @default 4
-     */
-    max?: number;
-    /**
-     * Optional prop to reverse the direction of the AvatarGroup
-     */
-    isReverse?: boolean;
-    /**
-     * Optional prop to pass additional AvatarBase props to the overflow Text element
+     * Optional prop to pass additional AvatarBase props to the overflow Text element.
      */
     overflowTextProps?: AvatarBaseProps;
     /**
@@ -36,28 +19,28 @@ type BaseAvatarGroupProps = {
  * AvatarGroup props.
  */
 export type AvatarGroupProps = BaseAvatarGroupProps & ({
-    variant: AvatarGroupVariant.Account;
+    variant: typeof AvatarGroupVariant.Account;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
      */
     avatarPropsArr: AvatarAccountProps[];
 } | {
-    variant: AvatarGroupVariant.Favicon;
+    variant: typeof AvatarGroupVariant.Favicon;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
      */
     avatarPropsArr: AvatarFaviconProps[];
 } | {
-    variant: AvatarGroupVariant.Network;
+    variant: typeof AvatarGroupVariant.Network;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.
      */
     avatarPropsArr: AvatarNetworkProps[];
 } | {
-    variant: AvatarGroupVariant.Token;
+    variant: typeof AvatarGroupVariant.Token;
     /**
      * A list of Avatars to be horizontally stacked.
      * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,8BAAoB;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAEvD,KAAK,oBAAoB,GAAG;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CACI;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACpC;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,kBAAkB,CAAC,KAAK,CAAC;IAClC;;;OAGG;IACH,cAAc,EAAE,gBAAgB,EAAE,CAAC;CACpC,CACJ,CAAC"}
+{"version":3,"file":"AvatarGroup.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EACnB,gDAAgD;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAEvD,KAAK,oBAAoB,GAAG,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAAG;IACpE;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,CACI;IACE,OAAO,EAAE,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC3C;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC3C;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,OAAO,kBAAkB,CAAC,OAAO,CAAC;IAC3C;;;OAGG;IACH,cAAc,EAAE,kBAAkB,EAAE,CAAC;CACtC,GACD;IACE,OAAO,EAAE,OAAO,kBAAkB,CAAC,KAAK,CAAC;IACzC;;;OAGG;IACH,cAAc,EAAE,gBAAgB,EAAE,CAAC;CACpC,CACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = {\n  /**\n   * Optional enum to select between Avatar Group sizes.\n   *\n   * @default AvatarGroupSize.Md\n   */\n  size?: AvatarGroupSize;\n  /**\n   * Optional enum to select max number of Avatars visible,\n   * before the overflow counter being displayed\n   *\n   * @default 4\n   */\n  max?: number;\n  /**\n   * Optional prop to reverse the direction of the AvatarGroup\n   */\n  isReverse?: boolean;\n  /**\n   * Optional prop to pass additional AvatarBase props to the overflow Text element\n   */\n  overflowTextProps?: AvatarBaseProps;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * AvatarGroup props.\n */\nexport type AvatarGroupProps = BaseAvatarGroupProps &\n  (\n    | {\n        variant: AvatarGroupVariant.Account;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarAccountProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Favicon;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarFaviconProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Network;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarNetworkProps[];\n      }\n    | {\n        variant: AvatarGroupVariant.Token;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarTokenProps[];\n      }\n  );\n"]}
+{"version":3,"file":"AvatarGroup.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  AvatarGroupPropsShared,\n  AvatarGroupVariant,\n} from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { AvatarFaviconProps } from '../AvatarFavicon';\nimport type { AvatarNetworkProps } from '../AvatarNetwork';\nimport type { AvatarTokenProps } from '../AvatarToken';\n\ntype BaseAvatarGroupProps = Omit<AvatarGroupPropsShared, 'variant'> & {\n  /**\n   * Optional prop to pass additional AvatarBase props to the overflow Text element.\n   */\n  overflowTextProps?: AvatarBaseProps;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * AvatarGroup props.\n */\nexport type AvatarGroupProps = BaseAvatarGroupProps &\n  (\n    | {\n        variant: typeof AvatarGroupVariant.Account;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarAccountProps[];\n      }\n    | {\n        variant: typeof AvatarGroupVariant.Favicon;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarFaviconProps[];\n      }\n    | {\n        variant: typeof AvatarGroupVariant.Network;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarNetworkProps[];\n      }\n    | {\n        variant: typeof AvatarGroupVariant.Token;\n        /**\n         * A list of Avatars to be horizontally stacked.\n         * Note: AvatarGroupProps's size prop will overwrite each individual avatarProp's size.\n         */\n        avatarPropsArr: AvatarTokenProps[];\n      }\n  );\n"]}

package/dist/components/AvatarGroup/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/index.ts"],"names":[],"mappings":";;;AAAA,+CAAkE;AAAzD,wGAAA,eAAe,OAAA;AAAE,2GAAA,kBAAkB,OAAA;AAC5C,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nexport { AvatarGroup } from './AvatarGroup';\nexport type { AvatarGroupProps } from './AvatarGroup.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarGroup/index.ts"],"names":[],"mappings":";;;AAAA,gFAGiD;AAF/C,uHAAA,eAAe,OAAA;AACf,0HAAA,kBAAkB,OAAA;AAEpB,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export {\n  AvatarGroupSize,\n  AvatarGroupVariant,\n} from '@metamask-previews/design-system-shared';\nexport { AvatarGroup } from './AvatarGroup';\nexport type { AvatarGroupProps } from './AvatarGroup.types';\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,8BAAoB;AAClE,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,kBAAkB,GACnB,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}

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

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