@metamask-previews/design-system-react 0.20.0-preview.f515a62 → 0.23.1-preview.047f96c

package/CHANGELOG.md

@@ -7,6 +7,50 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.23.1]
+
+### Changed
+
+- Updated the `Telegram` icon asset to match the official Telegram logo ([#1176](https://github.com/MetaMask/metamask-design-system/pull/1176))
+
+## [0.23.0]
+
+### Added
+
+- Added `PopoverHeader` for popover title rows and trailing actions, aligned with MetaMask extension screen patterns ([#1158](https://github.com/MetaMask/metamask-design-system/pull/1158))
+- Added `ModalHeader` for modal title rows and accessory slots, aligned with MetaMask extension screen patterns ([#1144](https://github.com/MetaMask/metamask-design-system/pull/1144))
+- Added `Label` for accessible captions paired with form controls ([#1152](https://github.com/MetaMask/metamask-design-system/pull/1152))
+- Added `SensitiveText` for masking and revealing sensitive strings (addresses, secrets, recovery phrases) with configurable visible length ([#1164](https://github.com/MetaMask/metamask-design-system/pull/1164))
+- Added `HelpText` for helper, success, warning, and error copy beneath inputs and other controls ([#1169](https://github.com/MetaMask/metamask-design-system/pull/1169))
+
+### Changed
+
+- `ButtonBase` now derives label typography, start and end icon sizes, and internal spacing from the `size` prop for every supported `ButtonBaseSize`, keeping defaults aligned without manual per-size tuning ([#1150](https://github.com/MetaMask/metamask-design-system/pull/1150))
+  - If you wrap **`ButtonBase`** and override label, icon, or spacing, see [Migration guide](./MIGRATION.md#buttonbase-size-defaults).
+- `BannerBase` close control behavior is simplified and aligned with the shared dismiss contract ([#1166](https://github.com/MetaMask/metamask-design-system/pull/1166))
+
+## [0.22.0]
+
+### Added
+
+- Added `Modal` and `useModalContext` for composing modal dialogs with focus management and the same layout patterns used in the MetaMask extension migration ([#1136](https://github.com/MetaMask/metamask-design-system/pull/1136))
+- Added `ModalContent` (with `ModalContentSize` and `MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR`) for sized modal bodies, entrance motion, and outside-click handling aligned with that migration ([#1139](https://github.com/MetaMask/metamask-design-system/pull/1139))
+- Added `Skeleton` for loading placeholders ([#1146](https://github.com/MetaMask/metamask-design-system/pull/1146))
+- Added `HeaderBase` for flexible header layouts when migrating extension screens into the design system ([#1142](https://github.com/MetaMask/metamask-design-system/pull/1142))
+- Added `ListArrow`, `Musd`, and `MusdFilled` icons; refreshed `Candlestick`; and added `Group`, `PieChart`, and `Predictions` icons ([#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))
+
+## [0.21.0]
+
+### Added
+
+- Added `Merge` to the icon set so it can be used anywhere `IconName` is supported in `@metamask/design-system-react` ([#1155](https://github.com/MetaMask/metamask-design-system/pull/1155))
+- Added `ModalOverlay`, `ModalBody`, `ModalFocus`, and `ModalFooter` to help Extension consumers migrate modal building blocks into `@metamask/design-system-react` ([#1120](https://github.com/MetaMask/metamask-design-system/pull/1120), [#1121](https://github.com/MetaMask/metamask-design-system/pull/1121), [#1128](https://github.com/MetaMask/metamask-design-system/pull/1128), [#1132](https://github.com/MetaMask/metamask-design-system/pull/1132))
+
+### Changed
+
+- Updated `Input` to use the shared cross-platform API. Consumers should pass a controlled `value`, use `isReadOnly` as the readonly prop name, and stop relying on `defaultValue` as part of the public component contract ([#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.20.0]
 
 ### Changed
@@ -282,7 +326,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - Tailwind CSS integration with design token support
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.20.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.23.1...HEAD
+[0.23.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.23.0...@metamask/design-system-react@0.23.1
+[0.23.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.22.0...@metamask/design-system-react@0.23.0
+[0.22.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.21.0...@metamask/design-system-react@0.22.0
+[0.21.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.20.0...@metamask/design-system-react@0.21.0
 [0.20.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.19.0...@metamask/design-system-react@0.20.0
 [0.19.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.18.0...@metamask/design-system-react@0.19.0
 [0.18.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.1...@metamask/design-system-react@0.18.0

package/dist/components/AvatarGroup/AvatarGroup.cjs

@@ -24,17 +24,16 @@ 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 react_1 = __importStar(require("react"));
-const types_1 = require("../../types/index.cjs");
 const tw_merge_1 = require("../../utils/tw-merge.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");
-exports.AvatarGroup = (0, react_1.forwardRef)(({ variant, avatarPropsArr, size = types_1.AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, className, ...props }, ref) => {
+exports.AvatarGroup = (0, react_1.forwardRef)(({ variant, avatarPropsArr, size = design_system_shared_1.AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, className, ...props }, ref) => {
     const overflowCounter = avatarPropsArr.length - max;
     const shouldRenderOverflowCounter = overflowCounter > 0;
     const negativeSpaceBetweenAvatarsTwClassName = isReverse
@@ -57,39 +56,45 @@ exports.AvatarGroup = (0, react_1.forwardRef)(({ variant, avatarPropsArr, size =
     negativeSpaceBetweenAvatarsTwClassName);
     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 (react_1.default.createElement(AvatarAccount_1.AvatarAccount, { hasBorder: true, key: `avatar-${index}`, ...avatarProps, size: size, className: `${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`, style: {
                         zIndex: index + 1,
                         ...avatarProps.style,
                     } }));
-            case types_1.AvatarGroupVariant.Favicon:
+            case design_system_shared_1.AvatarGroupVariant.Favicon:
                 return (react_1.default.createElement(AvatarFavicon_1.AvatarFavicon, { hasBorder: true, key: `avatar-${index}`, ...avatarProps, size: size, className: `${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`, style: {
                         zIndex: index + 1,
                         ...avatarProps.style,
                     } }));
-            case types_1.AvatarGroupVariant.Network:
+            case design_system_shared_1.AvatarGroupVariant.Network:
                 return (react_1.default.createElement(AvatarNetwork_1.AvatarNetwork, { hasBorder: true, key: `avatar-${index}`, ...avatarProps, size: size, className: `${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`, style: {
                         zIndex: index + 1,
                         ...avatarProps.style,
                     } }));
-            case types_1.AvatarGroupVariant.Token:
+            case design_system_shared_1.AvatarGroupVariant.Token:
                 return (react_1.default.createElement(AvatarToken_1.AvatarToken, { hasBorder: true, key: `avatar-${index}`, ...avatarProps, size: size, className: `${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`, style: {
                         zIndex: index + 1,
                         ...avatarProps.style,
                     } }));
             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]);
+    }), [
+        avatarPropsArr,
+        max,
+        negativeSpaceBetweenAvatarsTwClassName,
+        size,
+        variant,
+    ]);
     return (react_1.default.createElement("div", { ref: ref, ...props, style: style, className: containerClassNames },
         react_1.default.createElement("div", { className: avatarListContainerClassNames }, renderAvatarList()),
         shouldRenderOverflowCounter && (react_1.default.createElement(AvatarBase_1.AvatarBase, { className: overflowTextContainerClassNames, style: {
                 zIndex: avatarPropsArr.length,
             }, hasBorder: true, fallbackText: `+${overflowCounter}`, fallbackTextProps: {
                 variant: AvatarGroup_constants_1.AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP[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 }))));
 });
 //# sourceMappingURL=AvatarGroup.cjs.map

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 React, { forwardRef, useCallback } from 'react';\n\nimport { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport { AvatarAccount } from '../AvatarAccount';\nimport type { AvatarBaseSize } from '../AvatarBase';\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  AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP,\n} from './AvatarGroup.constants';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      variant,\n      avatarPropsArr,\n      size = AvatarGroupSize.Md,\n      max = 4,\n      isReverse = false,\n      overflowTextProps,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const overflowCounter = avatarPropsArr.length - max;\n    const shouldRenderOverflowCounter = overflowCounter > 0;\n    const negativeSpaceBetweenAvatarsTwClassName = isReverse\n      ? AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP[size]\n      : AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP[size];\n    const containerClassNames = twMerge(\n      // Base style\n      'inline-flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n      className,\n    );\n    const avatarListContainerClassNames = twMerge(\n      // Base style\n      'flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n    );\n    const overflowTextContainerClassNames = twMerge(\n      // Base style\n      'bg-icon-default',\n      // Negative spacing\n      negativeSpaceBetweenAvatarsTwClassName,\n    );\n\n    const renderAvatarList = useCallback(\n      () =>\n        avatarPropsArr.slice(0, max).map((avatarProps, index) => {\n          switch (variant) {\n            case AvatarGroupVariant.Account:\n              return (\n                <AvatarAccount\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarAccountProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Favicon:\n              return (\n                <AvatarFavicon\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarFaviconProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Network:\n              return (\n                <AvatarNetwork\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarNetworkProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Token:\n              return (\n                <AvatarToken\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarTokenProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\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],\n    );\n\n    return (\n      <div ref={ref} {...props} style={style} className={containerClassNames}>\n        <div className={avatarListContainerClassNames}>\n          {renderAvatarList()}\n        </div>\n        {shouldRenderOverflowCounter && (\n          <AvatarBase\n            className={overflowTextContainerClassNames}\n            style={{\n              zIndex: avatarPropsArr.length,\n            }}\n            hasBorder\n            fallbackText={`+${overflowCounter}`}\n            fallbackTextProps={{\n              variant: AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP[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      </div>\n    );\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 type { AvatarBaseSize } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef, useCallback } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\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  AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP,\n} from './AvatarGroup.constants';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      variant,\n      avatarPropsArr,\n      size = AvatarGroupSize.Md,\n      max = 4,\n      isReverse = false,\n      overflowTextProps,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const overflowCounter = avatarPropsArr.length - max;\n    const shouldRenderOverflowCounter = overflowCounter > 0;\n    const negativeSpaceBetweenAvatarsTwClassName = isReverse\n      ? AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP[size]\n      : AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP[size];\n    const containerClassNames = twMerge(\n      // Base style\n      'inline-flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n      className,\n    );\n    const avatarListContainerClassNames = twMerge(\n      // Base style\n      'flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n    );\n    const overflowTextContainerClassNames = twMerge(\n      // Base style\n      'bg-icon-default',\n      // Negative spacing\n      negativeSpaceBetweenAvatarsTwClassName,\n    );\n\n    const renderAvatarList = useCallback(\n      () =>\n        avatarPropsArr.slice(0, max).map((avatarProps, index) => {\n          switch (variant) {\n            case AvatarGroupVariant.Account:\n              return (\n                <AvatarAccount\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarAccountProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Favicon:\n              return (\n                <AvatarFavicon\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarFaviconProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Network:\n              return (\n                <AvatarNetwork\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarNetworkProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Token:\n              return (\n                <AvatarToken\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarTokenProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\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      [\n        avatarPropsArr,\n        max,\n        negativeSpaceBetweenAvatarsTwClassName,\n        size,\n        variant,\n      ],\n    );\n\n    return (\n      <div ref={ref} {...props} style={style} className={containerClassNames}>\n        <div className={avatarListContainerClassNames}>\n          {renderAvatarList()}\n        </div>\n        {shouldRenderOverflowCounter && (\n          <AvatarBase\n            className={overflowTextContainerClassNames}\n            style={{\n              zIndex: avatarPropsArr.length,\n            }}\n            hasBorder\n            fallbackText={`+${overflowCounter}`}\n            fallbackTextProps={{\n              variant: AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP[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      </div>\n    );\n  },\n);\n"]}

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

@@ -1,28 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP = exports.AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP = exports.AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP = 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.AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP = {
-    [types_1.AvatarGroupSize.Xs]: 'ml-[-6px]',
-    [types_1.AvatarGroupSize.Sm]: 'ml-[-10px]',
-    [types_1.AvatarGroupSize.Md]: 'ml-[-14px]',
-    [types_1.AvatarGroupSize.Lg]: 'ml-[-18px]',
-    [types_1.AvatarGroupSize.Xl]: 'ml-[-22px]',
+    [design_system_shared_1.AvatarGroupSize.Xs]: 'ml-[-6px]',
+    [design_system_shared_1.AvatarGroupSize.Sm]: 'ml-[-10px]',
+    [design_system_shared_1.AvatarGroupSize.Md]: 'ml-[-14px]',
+    [design_system_shared_1.AvatarGroupSize.Lg]: 'ml-[-18px]',
+    [design_system_shared_1.AvatarGroupSize.Xl]: 'ml-[-22px]',
 };
 exports.AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP = {
-    [types_1.AvatarGroupSize.Xs]: 'mr-[-6px]',
-    [types_1.AvatarGroupSize.Sm]: 'mr-[-10px]',
-    [types_1.AvatarGroupSize.Md]: 'mr-[-14px]',
-    [types_1.AvatarGroupSize.Lg]: 'mr-[-18px]',
-    [types_1.AvatarGroupSize.Xl]: 'mr-[-22px]',
+    [design_system_shared_1.AvatarGroupSize.Xs]: 'mr-[-6px]',
+    [design_system_shared_1.AvatarGroupSize.Sm]: 'mr-[-10px]',
+    [design_system_shared_1.AvatarGroupSize.Md]: 'mr-[-14px]',
+    [design_system_shared_1.AvatarGroupSize.Lg]: 'mr-[-18px]',
+    [design_system_shared_1.AvatarGroupSize.Xl]: 'mr-[-22px]',
 };
 exports.AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP = {
-    [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,iDAAiD,GAG1D;IACF,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,WAAW;IACjC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;CACnC,CAAC;AAEW,QAAA,2DAA2D,GAGpE;IACF,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,WAAW;IACjC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,uBAAe,CAAC,EAAE,CAAC,EAAE,YAAY;CACnC,CAAC;AAEW,QAAA,8CAA8C,GAGvD;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 AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'ml-[-6px]',\n  [AvatarGroupSize.Sm]: 'ml-[-10px]',\n  [AvatarGroupSize.Md]: 'ml-[-14px]',\n  [AvatarGroupSize.Lg]: 'ml-[-18px]',\n  [AvatarGroupSize.Xl]: 'ml-[-22px]',\n};\n\nexport const AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'mr-[-6px]',\n  [AvatarGroupSize.Sm]: 'mr-[-10px]',\n  [AvatarGroupSize.Md]: 'mr-[-14px]',\n  [AvatarGroupSize.Lg]: 'mr-[-18px]',\n  [AvatarGroupSize.Xl]: 'mr-[-22px]',\n};\n\nexport const AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP: 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,iDAAiD,GAG1D;IACF,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,WAAW;IACjC,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,YAAY;CACnC,CAAC;AAEW,QAAA,2DAA2D,GAGpE;IACF,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,WAAW;IACjC,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,sCAAe,CAAC,EAAE,CAAC,EAAE,YAAY;CACnC,CAAC;AAEW,QAAA,8CAA8C,GAGvD;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 AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'ml-[-6px]',\n  [AvatarGroupSize.Sm]: 'ml-[-10px]',\n  [AvatarGroupSize.Md]: 'ml-[-14px]',\n  [AvatarGroupSize.Lg]: 'ml-[-18px]',\n  [AvatarGroupSize.Xl]: 'ml-[-22px]',\n};\n\nexport const AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'mr-[-6px]',\n  [AvatarGroupSize.Sm]: 'mr-[-10px]',\n  [AvatarGroupSize.Md]: 'mr-[-14px]',\n  [AvatarGroupSize.Lg]: 'mr-[-18px]',\n  [AvatarGroupSize.Xl]: 'mr-[-22px]',\n};\n\nexport const AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP: 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 AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<AvatarGroupSize, string>;
 export declare const AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<AvatarGroupSize, string>;
 export declare const AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP: Record<AvatarGroupSize, TextVariant>;

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,iDAAiD,EAAE,MAAM,CACpE,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,2DAA2D,EAAE,MAAM,CAC9E,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,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,iDAAiD,EAAE,MAAM,CACpE,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,2DAA2D,EAAE,MAAM,CAC9E,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,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 AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<AvatarGroupSize, string>;
 export declare const AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<AvatarGroupSize, string>;
 export declare const AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP: Record<AvatarGroupSize, TextVariant>;

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,iDAAiD,EAAE,MAAM,CACpE,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,2DAA2D,EAAE,MAAM,CAC9E,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,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,iDAAiD,EAAE,MAAM,CACpE,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,2DAA2D,EAAE,MAAM,CAC9E,eAAe,EACf,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,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 AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP = {
     [AvatarGroupSize.Xs]: 'ml-[-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,iDAAiD,GAG1D;IACF,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW;IACjC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,2DAA2D,GAGpE;IACF,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW;IACjC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,8CAA8C,GAGvD;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 AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'ml-[-6px]',\n  [AvatarGroupSize.Sm]: 'ml-[-10px]',\n  [AvatarGroupSize.Md]: 'ml-[-14px]',\n  [AvatarGroupSize.Lg]: 'ml-[-18px]',\n  [AvatarGroupSize.Xl]: 'ml-[-22px]',\n};\n\nexport const AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'mr-[-6px]',\n  [AvatarGroupSize.Sm]: 'mr-[-10px]',\n  [AvatarGroupSize.Md]: 'mr-[-14px]',\n  [AvatarGroupSize.Lg]: 'mr-[-18px]',\n  [AvatarGroupSize.Xl]: 'mr-[-22px]',\n};\n\nexport const AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP: 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,iDAAiD,GAG1D;IACF,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW;IACjC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,2DAA2D,GAGpE;IACF,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,WAAW;IACjC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;IAClC,CAAC,eAAe,CAAC,EAAE,CAAC,EAAE,YAAY;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,8CAA8C,GAGvD;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 AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'ml-[-6px]',\n  [AvatarGroupSize.Sm]: 'ml-[-10px]',\n  [AvatarGroupSize.Md]: 'ml-[-14px]',\n  [AvatarGroupSize.Lg]: 'ml-[-18px]',\n  [AvatarGroupSize.Xl]: 'ml-[-22px]',\n};\n\nexport const AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP: Record<\n  AvatarGroupSize,\n  string\n> = {\n  [AvatarGroupSize.Xs]: 'mr-[-6px]',\n  [AvatarGroupSize.Sm]: 'mr-[-10px]',\n  [AvatarGroupSize.Md]: 'mr-[-14px]',\n  [AvatarGroupSize.Lg]: 'mr-[-18px]',\n  [AvatarGroupSize.Xl]: 'mr-[-22px]',\n};\n\nexport const AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP: 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

@@ -1,48 +1,35 @@
 import React from "react";
-import { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.cjs";
 import type { AvatarAccountProps } from "../AvatarAccount/index.cjs";
 import type { AvatarFaviconProps } from "../AvatarFavicon/index.cjs";
 import type { AvatarNetworkProps } from "../AvatarNetwork/index.cjs";
 import type { AvatarTokenProps } from "../AvatarToken/index.cjs";
-export declare const AvatarGroup: React.ForwardRefExoticComponent<(Omit<{
-    size?: AvatarGroupSize | undefined;
-    max?: number | undefined;
-    isReverse?: boolean | undefined;
+export declare const AvatarGroup: React.ForwardRefExoticComponent<(Omit<Omit<import("@metamask-previews/design-system-shared").AvatarGroupPropsShared, "variant"> & {
     overflowTextProps?: import("../AvatarBase/index.cjs").AvatarBaseProps | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    variant: AvatarGroupVariant.Account;
+    variant: "account";
     avatarPropsArr: AvatarAccountProps[];
-}, "ref"> | Omit<{
-    size?: AvatarGroupSize | undefined;
-    max?: number | undefined;
-    isReverse?: boolean | undefined;
+}, "ref"> | Omit<Omit<import("@metamask-previews/design-system-shared").AvatarGroupPropsShared, "variant"> & {
     overflowTextProps?: import("../AvatarBase/index.cjs").AvatarBaseProps | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    variant: AvatarGroupVariant.Favicon;
+    variant: "favicon";
     avatarPropsArr: AvatarFaviconProps[];
-}, "ref"> | Omit<{
-    size?: AvatarGroupSize | undefined;
-    max?: number | undefined;
-    isReverse?: boolean | undefined;
+}, "ref"> | Omit<Omit<import("@metamask-previews/design-system-shared").AvatarGroupPropsShared, "variant"> & {
     overflowTextProps?: import("../AvatarBase/index.cjs").AvatarBaseProps | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    variant: AvatarGroupVariant.Network;
+    variant: "network";
     avatarPropsArr: AvatarNetworkProps[];
-}, "ref"> | Omit<{
-    size?: AvatarGroupSize | undefined;
-    max?: number | undefined;
-    isReverse?: boolean | undefined;
+}, "ref"> | Omit<Omit<import("@metamask-previews/design-system-shared").AvatarGroupPropsShared, "variant"> & {
     overflowTextProps?: import("../AvatarBase/index.cjs").AvatarBaseProps | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    variant: AvatarGroupVariant.Token;
+    variant: "token";
     avatarPropsArr: AvatarTokenProps[];
 }, "ref">) & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=AvatarGroup.d.cts.map

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":"AAAA,OAAO,KAAkC,cAAc;AAEvD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,8BAAoB;AAElE,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAI3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAWvD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0IvB,CAAC"}
+{"version":3,"file":"AvatarGroup.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkC,cAAc;AAGvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAG3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAUvD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAgJvB,CAAC"}

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

@@ -1,48 +1,35 @@
 import React from "react";
-import { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.mjs";
 import type { AvatarAccountProps } from "../AvatarAccount/index.mjs";
 import type { AvatarFaviconProps } from "../AvatarFavicon/index.mjs";
 import type { AvatarNetworkProps } from "../AvatarNetwork/index.mjs";
 import type { AvatarTokenProps } from "../AvatarToken/index.mjs";
-export declare const AvatarGroup: React.ForwardRefExoticComponent<(Omit<{
-    size?: AvatarGroupSize | undefined;
-    max?: number | undefined;
-    isReverse?: boolean | undefined;
+export declare const AvatarGroup: React.ForwardRefExoticComponent<(Omit<Omit<import("@metamask-previews/design-system-shared").AvatarGroupPropsShared, "variant"> & {
     overflowTextProps?: import("../AvatarBase/index.mjs").AvatarBaseProps | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    variant: AvatarGroupVariant.Account;
+    variant: "account";
     avatarPropsArr: AvatarAccountProps[];
-}, "ref"> | Omit<{
-    size?: AvatarGroupSize | undefined;
-    max?: number | undefined;
-    isReverse?: boolean | undefined;
+}, "ref"> | Omit<Omit<import("@metamask-previews/design-system-shared").AvatarGroupPropsShared, "variant"> & {
     overflowTextProps?: import("../AvatarBase/index.mjs").AvatarBaseProps | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    variant: AvatarGroupVariant.Favicon;
+    variant: "favicon";
     avatarPropsArr: AvatarFaviconProps[];
-}, "ref"> | Omit<{
-    size?: AvatarGroupSize | undefined;
-    max?: number | undefined;
-    isReverse?: boolean | undefined;
+}, "ref"> | Omit<Omit<import("@metamask-previews/design-system-shared").AvatarGroupPropsShared, "variant"> & {
     overflowTextProps?: import("../AvatarBase/index.mjs").AvatarBaseProps | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    variant: AvatarGroupVariant.Network;
+    variant: "network";
     avatarPropsArr: AvatarNetworkProps[];
-}, "ref"> | Omit<{
-    size?: AvatarGroupSize | undefined;
-    max?: number | undefined;
-    isReverse?: boolean | undefined;
+}, "ref"> | Omit<Omit<import("@metamask-previews/design-system-shared").AvatarGroupPropsShared, "variant"> & {
     overflowTextProps?: import("../AvatarBase/index.mjs").AvatarBaseProps | undefined;
     className?: string | undefined;
     style?: React.CSSProperties | undefined;
 } & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    variant: AvatarGroupVariant.Token;
+    variant: "token";
     avatarPropsArr: AvatarTokenProps[];
 }, "ref">) & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=AvatarGroup.d.mts.map

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":"AAAA,OAAO,KAAkC,cAAc;AAEvD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,8BAAoB;AAElE,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAI3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAWvD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0IvB,CAAC"}
+{"version":3,"file":"AvatarGroup.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAkC,cAAc;AAGvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAG3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,mCAAyB;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,iCAAuB;AAUvD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDAgJvB,CAAC"}

package/dist/components/AvatarGroup/AvatarGroup.mjs

@@ -4,16 +4,15 @@ function $importDefault(module) {
     }
     return module;
 }
+import { AvatarBaseShape, AvatarGroupSize, AvatarGroupVariant, TextColor } from "@metamask-previews/design-system-shared";
 import $React, { forwardRef, useCallback } from "react";
 const React = $importDefault($React);
-import { AvatarGroupSize, AvatarGroupVariant } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.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 { AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP, AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP, AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP } from "./AvatarGroup.constants.mjs";
 export const AvatarGroup = forwardRef(({ variant, avatarPropsArr, size = AvatarGroupSize.Md, max = 4, isReverse = false, overflowTextProps, style, className, ...props }, ref) => {
     const overflowCounter = avatarPropsArr.length - max;
@@ -61,7 +60,13 @@ export const AvatarGroup = forwardRef(({ variant, avatarPropsArr, size = AvatarG
             default:
                 throw new Error(`Invalid Avatar Variant: ${String(variant)}. Expected one of: ${Object.values(AvatarGroupVariant).join(', ')}`);
         }
-    }), [avatarPropsArr, max, size]);
+    }), [
+        avatarPropsArr,
+        max,
+        negativeSpaceBetweenAvatarsTwClassName,
+        size,
+        variant,
+    ]);
     return (React.createElement("div", { ref: ref, ...props, style: style, className: containerClassNames },
         React.createElement("div", { className: avatarListContainerClassNames }, renderAvatarList()),
         shouldRenderOverflowCounter && (React.createElement(AvatarBase, { className: overflowTextContainerClassNames, style: {

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 React, { forwardRef, useCallback } from 'react';\n\nimport { AvatarGroupSize, AvatarGroupVariant } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport type { AvatarAccountProps } from '../AvatarAccount';\nimport { AvatarAccount } from '../AvatarAccount';\nimport type { AvatarBaseSize } from '../AvatarBase';\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  AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP,\n} from './AvatarGroup.constants';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      variant,\n      avatarPropsArr,\n      size = AvatarGroupSize.Md,\n      max = 4,\n      isReverse = false,\n      overflowTextProps,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const overflowCounter = avatarPropsArr.length - max;\n    const shouldRenderOverflowCounter = overflowCounter > 0;\n    const negativeSpaceBetweenAvatarsTwClassName = isReverse\n      ? AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP[size]\n      : AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP[size];\n    const containerClassNames = twMerge(\n      // Base style\n      'inline-flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n      className,\n    );\n    const avatarListContainerClassNames = twMerge(\n      // Base style\n      'flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n    );\n    const overflowTextContainerClassNames = twMerge(\n      // Base style\n      'bg-icon-default',\n      // Negative spacing\n      negativeSpaceBetweenAvatarsTwClassName,\n    );\n\n    const renderAvatarList = useCallback(\n      () =>\n        avatarPropsArr.slice(0, max).map((avatarProps, index) => {\n          switch (variant) {\n            case AvatarGroupVariant.Account:\n              return (\n                <AvatarAccount\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarAccountProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Favicon:\n              return (\n                <AvatarFavicon\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarFaviconProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Network:\n              return (\n                <AvatarNetwork\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarNetworkProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Token:\n              return (\n                <AvatarToken\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarTokenProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\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],\n    );\n\n    return (\n      <div ref={ref} {...props} style={style} className={containerClassNames}>\n        <div className={avatarListContainerClassNames}>\n          {renderAvatarList()}\n        </div>\n        {shouldRenderOverflowCounter && (\n          <AvatarBase\n            className={overflowTextContainerClassNames}\n            style={{\n              zIndex: avatarPropsArr.length,\n            }}\n            hasBorder\n            fallbackText={`+${overflowCounter}`}\n            fallbackTextProps={{\n              variant: AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP[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      </div>\n    );\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 type { AvatarBaseSize } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef, useCallback } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\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  AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP,\n  AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP,\n} from './AvatarGroup.constants';\nimport type { AvatarGroupProps } from './AvatarGroup.types';\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      variant,\n      avatarPropsArr,\n      size = AvatarGroupSize.Md,\n      max = 4,\n      isReverse = false,\n      overflowTextProps,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const overflowCounter = avatarPropsArr.length - max;\n    const shouldRenderOverflowCounter = overflowCounter > 0;\n    const negativeSpaceBetweenAvatarsTwClassName = isReverse\n      ? AVATAR_GROUP_SIZE_ISREVERSE_NEGATIVESPACEBETWEENAVATARS_MAP[size]\n      : AVATAR_GROUP_SIZE_NEGATIVESPACEBETWEENAVATARS_MAP[size];\n    const containerClassNames = twMerge(\n      // Base style\n      'inline-flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n      className,\n    );\n    const avatarListContainerClassNames = twMerge(\n      // Base style\n      'flex',\n      // Reverse style\n      isReverse ? 'flex-row-reverse' : 'flex-row',\n    );\n    const overflowTextContainerClassNames = twMerge(\n      // Base style\n      'bg-icon-default',\n      // Negative spacing\n      negativeSpaceBetweenAvatarsTwClassName,\n    );\n\n    const renderAvatarList = useCallback(\n      () =>\n        avatarPropsArr.slice(0, max).map((avatarProps, index) => {\n          switch (variant) {\n            case AvatarGroupVariant.Account:\n              return (\n                <AvatarAccount\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarAccountProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Favicon:\n              return (\n                <AvatarFavicon\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarFaviconProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Network:\n              return (\n                <AvatarNetwork\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarNetworkProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\n                />\n              );\n            case AvatarGroupVariant.Token:\n              return (\n                <AvatarToken\n                  hasBorder\n                  key={`avatar-${index}`}\n                  {...(avatarProps as AvatarTokenProps)}\n                  size={size as unknown as AvatarBaseSize}\n                  className={`${index > 0 && negativeSpaceBetweenAvatarsTwClassName} ${avatarProps.className}`}\n                  style={{\n                    zIndex: index + 1,\n                    ...avatarProps.style,\n                  }}\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      [\n        avatarPropsArr,\n        max,\n        negativeSpaceBetweenAvatarsTwClassName,\n        size,\n        variant,\n      ],\n    );\n\n    return (\n      <div ref={ref} {...props} style={style} className={containerClassNames}>\n        <div className={avatarListContainerClassNames}>\n          {renderAvatarList()}\n        </div>\n        {shouldRenderOverflowCounter && (\n          <AvatarBase\n            className={overflowTextContainerClassNames}\n            style={{\n              zIndex: avatarPropsArr.length,\n            }}\n            hasBorder\n            fallbackText={`+${overflowCounter}`}\n            fallbackTextProps={{\n              variant: AVATAR_GROUP_SIZE_OVERFLOWTEXT_TEXTVARIANT_MAP[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      </div>\n    );\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 { ComponentProps } from 'react';\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 for additional CSS classes to be applied to the AvatarGroup component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n} & ComponentProps<'div'>;\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 { ComponentProps } from 'react';\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 for additional CSS classes to be applied to the AvatarGroup component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n} & ComponentProps<'div'>;\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 { ComponentProps } from "react";
-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;
     /**
@@ -42,28 +25,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.