@metamask-previews/design-system-react 0.17.0-preview.ba86146 → 0.20.0-preview.f515a62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +56 -11
- package/dist/components/AvatarIcon/AvatarIcon.cjs +2 -2
- package/dist/components/AvatarIcon/AvatarIcon.cjs.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.cjs +16 -16
- package/dist/components/AvatarIcon/AvatarIcon.constants.cjs.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.d.cts +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.d.cts.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.d.mts +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.d.mts.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.mjs +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.constants.mjs.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.d.cts.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.d.mts.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.mjs +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.mjs.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.types.cjs.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.types.d.cts +3 -19
- package/dist/components/AvatarIcon/AvatarIcon.types.d.cts.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.types.d.mts +3 -19
- package/dist/components/AvatarIcon/AvatarIcon.types.d.mts.map +1 -1
- package/dist/components/AvatarIcon/AvatarIcon.types.mjs.map +1 -1
- package/dist/components/AvatarIcon/index.cjs +4 -4
- package/dist/components/AvatarIcon/index.cjs.map +1 -1
- package/dist/components/AvatarIcon/index.d.cts +1 -1
- package/dist/components/AvatarIcon/index.d.cts.map +1 -1
- package/dist/components/AvatarIcon/index.d.mts +1 -1
- package/dist/components/AvatarIcon/index.d.mts.map +1 -1
- package/dist/components/AvatarIcon/index.mjs +1 -1
- package/dist/components/AvatarIcon/index.mjs.map +1 -1
- package/dist/components/BadgeIcon/BadgeIcon.cjs +2 -1
- package/dist/components/BadgeIcon/BadgeIcon.cjs.map +1 -1
- package/dist/components/BadgeIcon/BadgeIcon.d.cts.map +1 -1
- package/dist/components/BadgeIcon/BadgeIcon.d.mts.map +1 -1
- package/dist/components/BadgeIcon/BadgeIcon.mjs +2 -1
- package/dist/components/BadgeIcon/BadgeIcon.mjs.map +1 -1
- package/dist/components/BadgeIcon/BadgeIcon.types.cjs.map +1 -1
- package/dist/components/BadgeIcon/BadgeIcon.types.d.cts +5 -7
- package/dist/components/BadgeIcon/BadgeIcon.types.d.cts.map +1 -1
- package/dist/components/BadgeIcon/BadgeIcon.types.d.mts +5 -7
- package/dist/components/BadgeIcon/BadgeIcon.types.d.mts.map +1 -1
- package/dist/components/BadgeIcon/BadgeIcon.types.mjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.cjs +8 -8
- package/dist/components/BannerAlert/BannerAlert.constants.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts +2 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts +2 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.mjs +2 -2
- package/dist/components/BannerAlert/BannerAlert.constants.mjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.cts +10 -10
- package/dist/components/BannerAlert/BannerAlert.d.mts +10 -10
- package/dist/components/BannerBase/BannerBase.cjs +3 -4
- package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.cts +7 -7
- package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.mts +7 -7
- package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
- package/dist/components/BannerBase/BannerBase.mjs +1 -2
- package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
- package/dist/components/Box/Box.constants.cjs.map +1 -1
- package/dist/components/Box/Box.constants.d.cts +1 -1
- package/dist/components/Box/Box.constants.d.cts.map +1 -1
- package/dist/components/Box/Box.constants.d.mts +1 -1
- package/dist/components/Box/Box.constants.d.mts.map +1 -1
- package/dist/components/Box/Box.constants.mjs.map +1 -1
- package/dist/components/Box/Box.types.cjs.map +1 -1
- package/dist/components/Box/Box.types.d.cts +2 -106
- package/dist/components/Box/Box.types.d.cts.map +1 -1
- package/dist/components/Box/Box.types.d.mts +2 -106
- package/dist/components/Box/Box.types.d.mts.map +1 -1
- package/dist/components/Box/Box.types.mjs.map +1 -1
- package/dist/components/Box/index.cjs +7 -7
- package/dist/components/Box/index.cjs.map +1 -1
- package/dist/components/Box/index.d.cts +1 -2
- package/dist/components/Box/index.d.cts.map +1 -1
- package/dist/components/Box/index.d.mts +1 -2
- package/dist/components/Box/index.d.mts.map +1 -1
- package/dist/components/Box/index.mjs +1 -1
- package/dist/components/Box/index.mjs.map +1 -1
- package/dist/components/Button/Button.cjs +5 -5
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.d.cts.map +1 -1
- package/dist/components/Button/Button.d.mts.map +1 -1
- package/dist/components/Button/Button.mjs +1 -1
- package/dist/components/Button/Button.mjs.map +1 -1
- package/dist/components/Button/Button.types.cjs.map +1 -1
- package/dist/components/Button/Button.types.d.cts +5 -12
- package/dist/components/Button/Button.types.d.cts.map +1 -1
- package/dist/components/Button/Button.types.d.mts +5 -12
- package/dist/components/Button/Button.types.d.mts.map +1 -1
- package/dist/components/Button/Button.types.mjs.map +1 -1
- package/dist/components/Button/index.cjs +3 -3
- package/dist/components/Button/index.cjs.map +1 -1
- package/dist/components/Button/index.d.cts +1 -1
- package/dist/components/Button/index.d.cts.map +1 -1
- package/dist/components/Button/index.d.mts +1 -1
- package/dist/components/Button/index.d.mts.map +1 -1
- package/dist/components/Button/index.mjs +1 -1
- package/dist/components/Button/index.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs +2 -0
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.cts.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.mts.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs +2 -0
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/index.cjs +1 -3
- package/dist/components/Button/variants/ButtonPrimary/index.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/index.d.cts +0 -1
- package/dist/components/Button/variants/ButtonPrimary/index.d.cts.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/index.d.mts +0 -1
- package/dist/components/Button/variants/ButtonPrimary/index.d.mts.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/index.mjs +0 -1
- package/dist/components/Button/variants/ButtonPrimary/index.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs +2 -0
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.cts.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.d.mts.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs +2 -0
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/index.cjs +1 -3
- package/dist/components/Button/variants/ButtonSecondary/index.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/index.d.cts +0 -1
- package/dist/components/Button/variants/ButtonSecondary/index.d.cts.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/index.d.mts +0 -1
- package/dist/components/Button/variants/ButtonSecondary/index.d.mts.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/index.mjs +0 -1
- package/dist/components/Button/variants/ButtonSecondary/index.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs +3 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.cts.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.d.mts.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs +3 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/index.cjs +1 -3
- package/dist/components/Button/variants/ButtonTertiary/index.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/index.d.cts +0 -1
- package/dist/components/Button/variants/ButtonTertiary/index.d.cts.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/index.d.mts +0 -1
- package/dist/components/Button/variants/ButtonTertiary/index.d.mts.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/index.mjs +0 -1
- package/dist/components/Button/variants/ButtonTertiary/index.mjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.cjs +3 -3
- package/dist/components/ButtonBase/ButtonBase.cjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.constants.cjs +4 -4
- package/dist/components/ButtonBase/ButtonBase.constants.cjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.constants.d.cts +1 -1
- package/dist/components/ButtonBase/ButtonBase.constants.d.cts.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.constants.d.mts +1 -1
- package/dist/components/ButtonBase/ButtonBase.constants.d.mts.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.constants.mjs +1 -1
- package/dist/components/ButtonBase/ButtonBase.constants.mjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.d.cts.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.d.mts.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.mjs +2 -2
- package/dist/components/ButtonBase/ButtonBase.mjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.types.cjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.types.d.cts +3 -35
- package/dist/components/ButtonBase/ButtonBase.types.d.cts.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.types.d.mts +3 -35
- package/dist/components/ButtonBase/ButtonBase.types.d.mts.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.types.mjs.map +1 -1
- package/dist/components/ButtonBase/index.cjs +2 -2
- package/dist/components/ButtonBase/index.cjs.map +1 -1
- package/dist/components/ButtonBase/index.d.cts +1 -1
- package/dist/components/ButtonBase/index.d.cts.map +1 -1
- package/dist/components/ButtonBase/index.d.mts +1 -1
- package/dist/components/ButtonBase/index.d.mts.map +1 -1
- package/dist/components/ButtonBase/index.mjs +1 -1
- package/dist/components/ButtonBase/index.mjs.map +1 -1
- package/dist/components/ButtonHero/index.cjs +2 -2
- package/dist/components/ButtonHero/index.cjs.map +1 -1
- package/dist/components/ButtonHero/index.d.cts +1 -1
- package/dist/components/ButtonHero/index.d.cts.map +1 -1
- package/dist/components/ButtonHero/index.d.mts +1 -1
- package/dist/components/ButtonHero/index.d.mts.map +1 -1
- package/dist/components/ButtonHero/index.mjs +1 -1
- package/dist/components/ButtonHero/index.mjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.cjs +5 -5
- package/dist/components/ButtonIcon/ButtonIcon.cjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.cjs +7 -8
- package/dist/components/ButtonIcon/ButtonIcon.constants.cjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts +3 -4
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts +3 -4
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.mjs +1 -2
- package/dist/components/ButtonIcon/ButtonIcon.constants.mjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.d.cts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.d.mts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.mjs +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.mjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.types.cjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.types.d.cts +5 -27
- package/dist/components/ButtonIcon/ButtonIcon.types.d.cts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.types.d.mts +5 -27
- package/dist/components/ButtonIcon/ButtonIcon.types.d.mts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.types.mjs.map +1 -1
- package/dist/components/ButtonIcon/index.cjs +3 -3
- package/dist/components/ButtonIcon/index.cjs.map +1 -1
- package/dist/components/ButtonIcon/index.d.cts +1 -1
- package/dist/components/ButtonIcon/index.d.cts.map +1 -1
- package/dist/components/ButtonIcon/index.d.mts +1 -1
- package/dist/components/ButtonIcon/index.d.mts.map +1 -1
- package/dist/components/ButtonIcon/index.mjs +1 -1
- package/dist/components/ButtonIcon/index.mjs.map +1 -1
- package/dist/components/Icon/Icon.types.cjs.map +1 -1
- package/dist/components/Icon/Icon.types.d.cts +2 -19
- package/dist/components/Icon/Icon.types.d.cts.map +1 -1
- package/dist/components/Icon/Icon.types.d.mts +2 -19
- package/dist/components/Icon/Icon.types.d.mts.map +1 -1
- package/dist/components/Icon/Icon.types.mjs.map +1 -1
- package/dist/components/Icon/icons/Telegram.cjs +32 -0
- package/dist/components/Icon/icons/Telegram.cjs.map +1 -0
- package/dist/components/Icon/icons/Telegram.d.cts +4 -0
- package/dist/components/Icon/icons/Telegram.d.cts.map +1 -0
- package/dist/components/Icon/icons/Telegram.d.mts +4 -0
- package/dist/components/Icon/icons/Telegram.d.mts.map +1 -0
- package/dist/components/Icon/icons/Telegram.mjs +7 -0
- package/dist/components/Icon/icons/Telegram.mjs.map +1 -0
- package/dist/components/Icon/icons/index.cjs +78 -76
- package/dist/components/Icon/icons/index.cjs.map +1 -1
- package/dist/components/Icon/icons/index.d.cts +39 -38
- package/dist/components/Icon/icons/index.d.cts.map +1 -1
- package/dist/components/Icon/icons/index.d.mts +39 -38
- package/dist/components/Icon/icons/index.d.mts.map +1 -1
- package/dist/components/Icon/icons/index.mjs +78 -76
- package/dist/components/Icon/icons/index.mjs.map +1 -1
- package/dist/components/ModalBody/ModalBody.cjs +32 -0
- package/dist/components/ModalBody/ModalBody.cjs.map +1 -0
- package/dist/components/ModalBody/ModalBody.d.cts +4 -0
- package/dist/components/ModalBody/ModalBody.d.cts.map +1 -0
- package/dist/components/ModalBody/ModalBody.d.mts +4 -0
- package/dist/components/ModalBody/ModalBody.d.mts.map +1 -0
- package/dist/components/ModalBody/ModalBody.mjs +13 -0
- package/dist/components/ModalBody/ModalBody.mjs.map +1 -0
- package/dist/components/ModalBody/ModalBody.types.cjs +3 -0
- package/dist/components/ModalBody/ModalBody.types.cjs.map +1 -0
- package/dist/components/ModalBody/ModalBody.types.d.cts +13 -0
- package/dist/components/ModalBody/ModalBody.types.d.cts.map +1 -0
- package/dist/components/ModalBody/ModalBody.types.d.mts +13 -0
- package/dist/components/ModalBody/ModalBody.types.d.mts.map +1 -0
- package/dist/components/ModalBody/ModalBody.types.mjs +2 -0
- package/dist/components/ModalBody/ModalBody.types.mjs.map +1 -0
- package/dist/components/ModalBody/index.cjs +6 -0
- package/dist/components/ModalBody/index.cjs.map +1 -0
- package/dist/components/ModalBody/index.d.cts +3 -0
- package/dist/components/ModalBody/index.d.cts.map +1 -0
- package/dist/components/ModalBody/index.d.mts +3 -0
- package/dist/components/ModalBody/index.d.mts.map +1 -0
- package/dist/components/ModalBody/index.mjs +2 -0
- package/dist/components/ModalBody/index.mjs.map +1 -0
- package/dist/components/ModalOverlay/ModalOverlay.cjs +32 -0
- package/dist/components/ModalOverlay/ModalOverlay.cjs.map +1 -0
- package/dist/components/ModalOverlay/ModalOverlay.d.cts +4 -0
- package/dist/components/ModalOverlay/ModalOverlay.d.cts.map +1 -0
- package/dist/components/ModalOverlay/ModalOverlay.d.mts +4 -0
- package/dist/components/ModalOverlay/ModalOverlay.d.mts.map +1 -0
- package/dist/components/ModalOverlay/ModalOverlay.mjs +13 -0
- package/dist/components/ModalOverlay/ModalOverlay.mjs.map +1 -0
- package/dist/components/ModalOverlay/ModalOverlay.types.cjs +3 -0
- package/dist/components/ModalOverlay/ModalOverlay.types.cjs.map +1 -0
- package/dist/components/ModalOverlay/ModalOverlay.types.d.cts +9 -0
- package/dist/components/ModalOverlay/ModalOverlay.types.d.cts.map +1 -0
- package/dist/components/ModalOverlay/ModalOverlay.types.d.mts +9 -0
- package/dist/components/ModalOverlay/ModalOverlay.types.d.mts.map +1 -0
- package/dist/components/ModalOverlay/ModalOverlay.types.mjs +2 -0
- package/dist/components/ModalOverlay/ModalOverlay.types.mjs.map +1 -0
- package/dist/components/ModalOverlay/index.cjs +6 -0
- package/dist/components/ModalOverlay/index.cjs.map +1 -0
- package/dist/components/ModalOverlay/index.d.cts +3 -0
- package/dist/components/ModalOverlay/index.d.cts.map +1 -0
- package/dist/components/ModalOverlay/index.d.mts +3 -0
- package/dist/components/ModalOverlay/index.d.mts.map +1 -0
- package/dist/components/ModalOverlay/index.mjs +2 -0
- package/dist/components/ModalOverlay/index.mjs.map +1 -0
- package/dist/components/index.cjs +5 -1
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +5 -1
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +5 -1
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +2 -0
- package/dist/components/index.mjs.map +1 -1
- package/dist/types/index.cjs +8 -593
- package/dist/types/index.cjs.map +1 -1
- package/dist/types/index.d.cts +4 -587
- package/dist/types/index.d.cts.map +1 -1
- package/dist/types/index.d.mts +4 -587
- package/dist/types/index.d.mts.map +1 -1
- package/dist/types/index.mjs +4 -596
- package/dist/types/index.mjs.map +1 -1
- package/package.json +6 -9
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,48 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.20.0]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- **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 with the shared cross-platform type contracts ([#1034](https://github.com/MetaMask/metamask-design-system/pull/1034))
|
|
15
|
+
- No migration required for typical usage; continue importing from `@metamask/design-system-react` as before.
|
|
16
|
+
- Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
|
|
17
|
+
- **BREAKING:** Updated `ButtonIconSize` and `ButtonIconVariant` to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React with the shared cross-platform type contracts ([#1038](https://github.com/MetaMask/metamask-design-system/pull/1038))
|
|
18
|
+
- No migration required for typical usage; continue importing from `@metamask/design-system-react` as before.
|
|
19
|
+
- Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
|
|
20
|
+
- 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))
|
|
21
|
+
- Expanded the `TextButton` migration guide for extension consumers replacing `ButtonLink` and `ButtonVariant.Link` with the current design-system APIs ([#1098](https://github.com/MetaMask/metamask-design-system/pull/1098))
|
|
22
|
+
|
|
23
|
+
## [0.19.0]
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- Added `Telegram` to the `IconName` set for use anywhere the React package accepts design system icons ([#1122](https://github.com/MetaMask/metamask-design-system/pull/1122))
|
|
28
|
+
|
|
29
|
+
### Changed
|
|
30
|
+
|
|
31
|
+
- **BREAKING:** Updated `AvatarIcon` exports to use shared const-object + string-union types rather than local enum-based definitions, aligning React with the shared cross-platform type contracts ([#996](https://github.com/MetaMask/metamask-design-system/pull/996))
|
|
32
|
+
- No migration required for typical usage; continue importing from `@metamask/design-system-react` as before.
|
|
33
|
+
- Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
|
|
34
|
+
|
|
35
|
+
## [0.18.0]
|
|
36
|
+
|
|
37
|
+
### Changed
|
|
38
|
+
|
|
39
|
+
- **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` continue to work, but enum-specific type assumptions may need updating ([#1042](https://github.com/MetaMask/metamask-design-system/pull/1042), [#1101](https://github.com/MetaMask/metamask-design-system/pull/1101))
|
|
40
|
+
- See [Migration Guide](./MIGRATION.md#from-version-0170-to-0180)
|
|
41
|
+
- **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))
|
|
42
|
+
- Removed `BoxBackgroundColor.WarningAlternative`, `BoxBackgroundColor.SuccessAlternative`, `BoxBorderColor.WarningAlternative`, `BoxBorderColor.SuccessAlternative`, and `BoxBorderColor.InfoAlternative`
|
|
43
|
+
- See [Migration Guide](./MIGRATION.md#from-version-0170-to-0180)
|
|
44
|
+
- Updated `ButtonTertiary` to use the default text color for more consistent contrast across states ([#1099](https://github.com/MetaMask/metamask-design-system/pull/1099))
|
|
45
|
+
|
|
46
|
+
## [0.17.1]
|
|
47
|
+
|
|
48
|
+
### Changed
|
|
49
|
+
|
|
50
|
+
- Expanded the `react` and `react-dom` peer dependency ranges to support React 19 consumers. ([#1089](https://github.com/MetaMask/metamask-design-system/pull/1089))
|
|
51
|
+
|
|
10
52
|
## [0.17.0]
|
|
11
53
|
|
|
12
54
|
### Changed
|
|
@@ -37,23 +79,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
37
79
|
|
|
38
80
|
### Changed
|
|
39
81
|
|
|
40
|
-
- **BREAKING:** Updated `AvatarBase` exports to consume shared const-object + string-union types rather than local enums, aligning React with shared cross-platform type contracts ([#1005](https://github.com/MetaMask/metamask-design-system/pull/1005))
|
|
82
|
+
- **BREAKING:** Updated `AvatarBase` exports to consume shared const-object + string-union types rather than local enums, aligning React with shared cross-platform type contracts ([#1005](https://github.com/MetaMask/metamask-design-system/pull/1005))
|
|
41
83
|
- No migration required for typical usage; continue importing from `@metamask/design-system-react` as before.
|
|
42
84
|
- Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
|
|
43
|
-
- Updated `@metamask/utils` peer dependency to `^11.11.0` ([#1033](https://github.com/MetaMask/metamask-design-system/pull/1033))
|
|
44
|
-
- Expanded `BannerBase` migration documentation to improve upgrade guidance for consumers moving between recent releases ([#1011](https://github.com/MetaMask/metamask-design-system/pull/1011))
|
|
85
|
+
- Updated `@metamask/utils` peer dependency to `^11.11.0` ([#1033](https://github.com/MetaMask/metamask-design-system/pull/1033))
|
|
86
|
+
- Expanded `BannerBase` migration documentation to improve upgrade guidance for consumers moving between recent releases ([#1011](https://github.com/MetaMask/metamask-design-system/pull/1011))
|
|
45
87
|
|
|
46
88
|
## [0.13.0]
|
|
47
89
|
|
|
48
90
|
### Changed
|
|
49
91
|
|
|
50
|
-
- `FontWeight.Bold` and the `Text` component now treat the semantic bold slot as weight 600; Storybook moved to the `Geist-SemiBold` assets and the tokens now emit `--font-weight-bold: 600`, so update any hardcoded `font-weight: 700` references as outlined in MIGRATION.md#from-version-0120-to-0130 ([#1017](https://github.com/MetaMask/metamask-design-system/pull/1017))
|
|
92
|
+
- `FontWeight.Bold` and the `Text` component now treat the semantic bold slot as weight 600; Storybook moved to the `Geist-SemiBold` assets and the tokens now emit `--font-weight-bold: 600`, so update any hardcoded `font-weight: 700` references as outlined in MIGRATION.md#from-version-0120-to-0130 ([#1017](https://github.com/MetaMask/metamask-design-system/pull/1017))
|
|
51
93
|
- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`, `BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now derive from const objects with `as const`/string-union typings per ADR-0003 and ADR-0004, so the same values are available to both React and React Native while your import statements continue to reference `@metamask/design-system-react` (or the platform-specific entry point) as before ([#1014](https://github.com/MetaMask/metamask-design-system/pull/1014); see https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md and MIGRATION.md#from-version-0120-to-0130).
|
|
52
|
-
- Documented the Button migration path that walks through prop, variant, and size mappings for both web and mobile, linking directly to MIGRATION.md#button-component so the release note, changelog, and migration guide share the same reference ([#999](https://github.com/MetaMask/metamask-design-system/pull/999))
|
|
94
|
+
- Documented the Button migration path that walks through prop, variant, and size mappings for both web and mobile, linking directly to MIGRATION.md#button-component so the release note, changelog, and migration guide share the same reference ([#999](https://github.com/MetaMask/metamask-design-system/pull/999))
|
|
53
95
|
|
|
54
96
|
### Fixed
|
|
55
97
|
|
|
56
|
-
- Restored a visible keyboard focus outline for `Checkbox` keyboard users by making the hidden input a Tailwind `peer` and mirroring its `peer-focus-visible` state onto the visible container so Tab navigation shows a clear indicator ([#1008](https://github.com/MetaMask/metamask-design-system/pull/1008))
|
|
98
|
+
- Restored a visible keyboard focus outline for `Checkbox` keyboard users by making the hidden input a Tailwind `peer` and mirroring its `peer-focus-visible` state onto the visible container so Tab navigation shows a clear indicator ([#1008](https://github.com/MetaMask/metamask-design-system/pull/1008))
|
|
57
99
|
|
|
58
100
|
## [0.12.0]
|
|
59
101
|
|
|
@@ -191,8 +233,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
191
233
|
### Added
|
|
192
234
|
|
|
193
235
|
- New icons (AppleLogo, Backspace, Candlestick, Clear, MetamaskFoxOutline) ([#798](https://github.com/MetaMask/metamask-design-system/pull/798))
|
|
194
|
-
|
|
195
|
-
- Figma code connect files for all components ([#766](https://github.com/MetaMask/metamask-design-system/pull/766)), ([#791](https://github.com/MetaMask/metamask-design-system/pull/791)), ([#795](https://github.com/MetaMask/metamask-design-system/pull/795)), ([#796](https://github.com/MetaMask/metamask-design-system/pull/796)), ([#794](https://github.com/MetaMask/metamask-design-system/pull/794)), ([#792](https://github.com/MetaMask/metamask-design-system/pull/792))
|
|
236
|
+
- Figma code connect files for all components ([#766](https://github.com/MetaMask/metamask-design-system/pull/766), [#791](https://github.com/MetaMask/metamask-design-system/pull/791), [#795](https://github.com/MetaMask/metamask-design-system/pull/795), [#796](https://github.com/MetaMask/metamask-design-system/pull/796), [#794](https://github.com/MetaMask/metamask-design-system/pull/794), [#792](https://github.com/MetaMask/metamask-design-system/pull/792))
|
|
196
237
|
|
|
197
238
|
### Changed
|
|
198
239
|
|
|
@@ -209,13 +250,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
209
250
|
|
|
210
251
|
### Added
|
|
211
252
|
|
|
212
|
-
- Added 5 new Text component variants with responsive typography support ([#777](https://github.com/MetaMask/metamask-design-system/pull/777))
|
|
253
|
+
- Added 5 new Text component variants with responsive typography support: ([#777](https://github.com/MetaMask/metamask-design-system/pull/777))
|
|
213
254
|
- `TextVariant.PageHeading` - For main page titles (renders as `<h1>` by default)
|
|
214
255
|
- `TextVariant.SectionHeading` - For section titles (renders as `<h2>` by default)
|
|
215
256
|
- `TextVariant.ButtonLabelMd` - For medium-sized button labels (renders as `<span>` by default)
|
|
216
257
|
- `TextVariant.ButtonLabelLg` - For large-sized button labels (renders as `<span>` by default)
|
|
217
258
|
- `TextVariant.AmountDisplayLg` - For large amount/value displays (renders as `<span>` by default)
|
|
218
|
-
- Added comprehensive utility props to Box component for enhanced layout control ([#779](https://github.com/MetaMask/metamask-design-system/pull/779)
|
|
259
|
+
- 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))
|
|
219
260
|
- **Margin props:** `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`, `marginVertical`
|
|
220
261
|
- **Padding props:** `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`, `paddingVertical`
|
|
221
262
|
- **Border props:** `borderWidth`, `borderColor`
|
|
@@ -241,7 +282,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
241
282
|
- Full TypeScript support with type definitions and enums
|
|
242
283
|
- Tailwind CSS integration with design token support
|
|
243
284
|
|
|
244
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
285
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.20.0...HEAD
|
|
286
|
+
[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
|
|
287
|
+
[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
|
|
288
|
+
[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
|
|
289
|
+
[0.17.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.0...@metamask/design-system-react@0.17.1
|
|
245
290
|
[0.17.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.16.0...@metamask/design-system-react@0.17.0
|
|
246
291
|
[0.16.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.15.0...@metamask/design-system-react@0.16.0
|
|
247
292
|
[0.15.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.14.0...@metamask/design-system-react@0.15.0
|
|
@@ -24,12 +24,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.AvatarIcon = void 0;
|
|
27
|
+
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
27
28
|
const react_1 = __importStar(require("react"));
|
|
28
|
-
const types_1 = require("../../types/index.cjs");
|
|
29
29
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
30
30
|
const AvatarBase_1 = require("../AvatarBase/index.cjs");
|
|
31
31
|
const Icon_1 = require("../Icon/index.cjs");
|
|
32
32
|
const AvatarIcon_constants_1 = require("./AvatarIcon.constants.cjs");
|
|
33
|
-
exports.AvatarIcon = (0, react_1.forwardRef)(({ iconName, iconProps, size =
|
|
33
|
+
exports.AvatarIcon = (0, react_1.forwardRef)(({ iconName, iconProps, size = design_system_shared_1.AvatarIconSize.Md, severity = design_system_shared_1.AvatarIconSeverity.Neutral, className, ...props }, ref) => (react_1.default.createElement(AvatarBase_1.AvatarBase, { ref: ref, shape: AvatarBase_1.AvatarBaseShape.Circle, size: size, className: (0, tw_merge_1.twMerge)(AvatarIcon_constants_1.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity], className), ...props }, iconName && (react_1.default.createElement(Icon_1.Icon, { name: iconName, size: AvatarIcon_constants_1.MAP_AVATARICON_SIZE_ICONSIZE[size], color: AvatarIcon_constants_1.MAP_AVATARICON_SEVERITY_ICONCOLOR[severity], ...iconProps })))));
|
|
34
34
|
exports.AvatarIcon.displayName = 'AvatarIcon';
|
|
35
35
|
//# sourceMappingURL=AvatarIcon.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,
|
|
1
|
+
{"version":3,"file":"AvatarIcon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAGiD;AACjD,+CAA0C;AAE1C,uDAA+C;AAC/C,wDAA4D;AAC5D,4CAA+B;AAE/B,qEAIgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,QAAQ,GAAG,yCAAkB,CAAC,OAAO,EACrC,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,4BAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,kBAAO,EAChB,qEAA8C,CAAC,QAAQ,CAAC,EACxD,SAAS,CACV,KACG,KAAK,IAER,QAAQ,IAAI,CACX,8BAAC,WAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,mDAA4B,CAAC,IAAI,CAAC,EACxC,KAAK,EAAE,wDAAiC,CAAC,QAAQ,CAAC,KAC9C,SAAS,GACb,CACH,CACU,CACd,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n AvatarIconSeverity,\n AvatarIconSize,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { AvatarBase, AvatarBaseShape } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_AVATARICON_SIZE_ICONSIZE,\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n MAP_AVATARICON_SEVERITY_ICONCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = forwardRef<HTMLDivElement, AvatarIconProps>(\n (\n {\n iconName,\n iconProps,\n size = AvatarIconSize.Md,\n severity = AvatarIconSeverity.Neutral,\n className,\n ...props\n },\n ref,\n ) => (\n <AvatarBase\n ref={ref}\n shape={AvatarBaseShape.Circle}\n size={size}\n className={twMerge(\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity],\n className,\n )}\n {...props}\n >\n {iconName && (\n <Icon\n name={iconName}\n size={MAP_AVATARICON_SIZE_ICONSIZE[size]}\n color={MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]}\n {...iconProps}\n />\n )}\n </AvatarBase>\n ),\n);\n\nAvatarIcon.displayName = 'AvatarIcon';\n"]}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.MAP_AVATARICON_SEVERITY_ICONCOLOR = exports.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = exports.MAP_AVATARICON_SIZE_ICONSIZE = void 0;
|
|
4
|
-
const
|
|
4
|
+
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
5
|
const Icon_1 = require("../Icon/index.cjs");
|
|
6
6
|
exports.MAP_AVATARICON_SIZE_ICONSIZE = {
|
|
7
|
-
[
|
|
8
|
-
[
|
|
9
|
-
[
|
|
10
|
-
[
|
|
11
|
-
[
|
|
7
|
+
[design_system_shared_1.AvatarIconSize.Xs]: Icon_1.IconSize.Xs,
|
|
8
|
+
[design_system_shared_1.AvatarIconSize.Sm]: Icon_1.IconSize.Sm,
|
|
9
|
+
[design_system_shared_1.AvatarIconSize.Md]: Icon_1.IconSize.Md,
|
|
10
|
+
[design_system_shared_1.AvatarIconSize.Lg]: Icon_1.IconSize.Lg,
|
|
11
|
+
[design_system_shared_1.AvatarIconSize.Xl]: Icon_1.IconSize.Xl, // 48px avatar -> 32px icon
|
|
12
12
|
};
|
|
13
13
|
exports.TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR = {
|
|
14
|
-
[
|
|
15
|
-
[
|
|
16
|
-
[
|
|
17
|
-
[
|
|
18
|
-
[
|
|
14
|
+
[design_system_shared_1.AvatarIconSeverity.Neutral]: 'bg-muted',
|
|
15
|
+
[design_system_shared_1.AvatarIconSeverity.Info]: 'bg-info-muted',
|
|
16
|
+
[design_system_shared_1.AvatarIconSeverity.Success]: 'bg-success-muted',
|
|
17
|
+
[design_system_shared_1.AvatarIconSeverity.Error]: 'bg-error-muted',
|
|
18
|
+
[design_system_shared_1.AvatarIconSeverity.Warning]: 'bg-warning-muted',
|
|
19
19
|
};
|
|
20
20
|
exports.MAP_AVATARICON_SEVERITY_ICONCOLOR = {
|
|
21
|
-
[
|
|
22
|
-
[
|
|
23
|
-
[
|
|
24
|
-
[
|
|
25
|
-
[
|
|
21
|
+
[design_system_shared_1.AvatarIconSeverity.Neutral]: Icon_1.IconColor.IconAlternative,
|
|
22
|
+
[design_system_shared_1.AvatarIconSeverity.Info]: Icon_1.IconColor.InfoDefault,
|
|
23
|
+
[design_system_shared_1.AvatarIconSeverity.Success]: Icon_1.IconColor.SuccessDefault,
|
|
24
|
+
[design_system_shared_1.AvatarIconSeverity.Error]: Icon_1.IconColor.ErrorDefault,
|
|
25
|
+
[design_system_shared_1.AvatarIconSeverity.Warning]: Icon_1.IconColor.WarningDefault,
|
|
26
26
|
};
|
|
27
27
|
//# sourceMappingURL=AvatarIcon.constants.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"AvatarIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kFAGiD;AAEjD,4CAA8C;AAEjC,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,eAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AAEW,QAAA,8CAA8C,GAGvD;IACF,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,yCAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,yCAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AAEW,QAAA,iCAAiC,GAG1C;IACF,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,eAAe;IACvD,CAAC,yCAAkB,CAAC,IAAI,CAAC,EAAE,gBAAS,CAAC,WAAW;IAChD,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,cAAc;IACtD,CAAC,yCAAkB,CAAC,KAAK,CAAC,EAAE,gBAAS,CAAC,YAAY;IAClD,CAAC,yCAAkB,CAAC,OAAO,CAAC,EAAE,gBAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import {\n AvatarIconSeverity,\n AvatarIconSize,\n} from '@metamask-previews/design-system-shared';\n\nimport { IconSize, IconColor } from '../Icon';\n\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\n\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n AvatarIconSeverity,\n string\n> = {\n [AvatarIconSeverity.Neutral]: 'bg-muted',\n [AvatarIconSeverity.Info]: 'bg-info-muted',\n [AvatarIconSeverity.Success]: 'bg-success-muted',\n [AvatarIconSeverity.Error]: 'bg-error-muted',\n [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\n\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n AvatarIconSeverity,\n IconColor\n> = {\n [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AvatarIconSeverity, AvatarIconSize } from "@metamask-previews/design-system-shared";
|
|
2
2
|
import { IconSize, IconColor } from "../Icon/index.cjs";
|
|
3
3
|
export declare const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize>;
|
|
4
4
|
export declare const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<AvatarIconSeverity, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AvatarIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,gDAAgD;AAEjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAE9C,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAMzE,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,kBAAkB,EAClB,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CACpD,kBAAkB,EAClB,SAAS,CAOV,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AvatarIconSeverity, AvatarIconSize } from "@metamask-previews/design-system-shared";
|
|
2
2
|
import { IconSize, IconColor } from "../Icon/index.mjs";
|
|
3
3
|
export declare const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize>;
|
|
4
4
|
export declare const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<AvatarIconSeverity, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AvatarIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,gDAAgD;AAEjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAE9C,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAMzE,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,kBAAkB,EAClB,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CACpD,kBAAkB,EAClB,SAAS,CAOV,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AvatarIconSeverity, AvatarIconSize } from "@metamask-previews/design-system-shared";
|
|
2
2
|
import { IconSize, IconColor } from "../Icon/index.mjs";
|
|
3
3
|
export const MAP_AVATARICON_SIZE_ICONSIZE = {
|
|
4
4
|
[AvatarIconSize.Xs]: IconSize.Xs,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AvatarIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,gDAAgD;AAEjD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAE9C,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,EAAE,2BAA2B;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,8CAA8C,GAGvD;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,UAAU;IACxC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe;IAC1C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;IAChD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,gBAAgB;IAC5C,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,kBAAkB;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAG1C;IACF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,eAAe;IACvD,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;IAChD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IACtD,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY;IAClD,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;CACvD,CAAC","sourcesContent":["import {\n AvatarIconSeverity,\n AvatarIconSize,\n} from '@metamask-previews/design-system-shared';\n\nimport { IconSize, IconColor } from '../Icon';\n\nexport const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {\n [AvatarIconSize.Xs]: IconSize.Xs, // 16px avatar -> 12px icon\n [AvatarIconSize.Sm]: IconSize.Sm, // 24px avatar -> 16px icon\n [AvatarIconSize.Md]: IconSize.Md, // 32px avatar -> 20px icon\n [AvatarIconSize.Lg]: IconSize.Lg, // 40px avatar -> 24px icon\n [AvatarIconSize.Xl]: IconSize.Xl, // 48px avatar -> 32px icon\n};\n\nexport const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<\n AvatarIconSeverity,\n string\n> = {\n [AvatarIconSeverity.Neutral]: 'bg-muted',\n [AvatarIconSeverity.Info]: 'bg-info-muted',\n [AvatarIconSeverity.Success]: 'bg-success-muted',\n [AvatarIconSeverity.Error]: 'bg-error-muted',\n [AvatarIconSeverity.Warning]: 'bg-warning-muted',\n};\n\nexport const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<\n AvatarIconSeverity,\n IconColor\n> = {\n [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,\n [AvatarIconSeverity.Info]: IconColor.InfoDefault,\n [AvatarIconSeverity.Success]: IconColor.SuccessDefault,\n [AvatarIconSeverity.Error]: IconColor.ErrorDefault,\n [AvatarIconSeverity.Warning]: IconColor.WarningDefault,\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarIcon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,cAAc;AAW1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAgCtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarIcon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,cAAc;AAW1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAgCtB,CAAC"}
|
|
@@ -4,9 +4,9 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
+
import { AvatarIconSeverity, AvatarIconSize } from "@metamask-previews/design-system-shared";
|
|
7
8
|
import $React, { forwardRef } from "react";
|
|
8
9
|
const React = $importDefault($React);
|
|
9
|
-
import { AvatarIconSize, AvatarIconSeverity } from "../../types/index.mjs";
|
|
10
10
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
11
11
|
import { AvatarBase, AvatarBaseShape } from "../AvatarBase/index.mjs";
|
|
12
12
|
import { Icon } from "../Icon/index.mjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AvatarIcon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,gCAAsB;AAC5D,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,4BAA4B,EAC5B,8CAA8C,EAC9C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,QAAQ,GAAG,kBAAkB,CAAC,OAAO,EACrC,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,CAChB,8CAA8C,CAAC,QAAQ,CAAC,EACxD,SAAS,CACV,KACG,KAAK,IAER,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,IAAI,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACxC,KAAK,EAAE,iCAAiC,CAAC,QAAQ,CAAC,KAC9C,SAAS,GACb,CACH,CACU,CACd,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n AvatarIconSeverity,\n AvatarIconSize,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { AvatarBase, AvatarBaseShape } from '../AvatarBase';\nimport { Icon } from '../Icon';\n\nimport {\n MAP_AVATARICON_SIZE_ICONSIZE,\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR,\n MAP_AVATARICON_SEVERITY_ICONCOLOR,\n} from './AvatarIcon.constants';\nimport type { AvatarIconProps } from './AvatarIcon.types';\n\nexport const AvatarIcon = forwardRef<HTMLDivElement, AvatarIconProps>(\n (\n {\n iconName,\n iconProps,\n size = AvatarIconSize.Md,\n severity = AvatarIconSeverity.Neutral,\n className,\n ...props\n },\n ref,\n ) => (\n <AvatarBase\n ref={ref}\n shape={AvatarBaseShape.Circle}\n size={size}\n className={twMerge(\n TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[severity],\n className,\n )}\n {...props}\n >\n {iconName && (\n <Icon\n name={iconName}\n size={MAP_AVATARICON_SIZE_ICONSIZE[size]}\n color={MAP_AVATARICON_SEVERITY_ICONCOLOR[severity]}\n {...iconProps}\n />\n )}\n </AvatarBase>\n ),\n);\n\nAvatarIcon.displayName = 'AvatarIcon';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"AvatarIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarIconPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { IconProps } from '../Icon';\n\nexport type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> &\n AvatarIconPropsShared & {\n /**\n * Optional props to be passed to the Icon component\n */\n iconProps?: Omit<IconProps, 'name'>;\n };\n"]}
|
|
@@ -1,26 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { AvatarIconPropsShared } from "@metamask-previews/design-system-shared";
|
|
2
2
|
import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
|
|
3
|
-
import type {
|
|
4
|
-
export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> & {
|
|
5
|
-
/**
|
|
6
|
-
* Required icon name from the icon set
|
|
7
|
-
*/
|
|
8
|
-
iconName: IconName;
|
|
3
|
+
import type { IconProps } from "../Icon/index.cjs";
|
|
4
|
+
export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> & AvatarIconPropsShared & {
|
|
9
5
|
/**
|
|
10
6
|
* Optional props to be passed to the Icon component
|
|
11
7
|
*/
|
|
12
8
|
iconProps?: Omit<IconProps, 'name'>;
|
|
13
|
-
/**
|
|
14
|
-
* Optional prop to control the size of the avatar
|
|
15
|
-
*
|
|
16
|
-
* @default AvatarIconSize.Md
|
|
17
|
-
*/
|
|
18
|
-
size?: AvatarIconSize;
|
|
19
|
-
/**
|
|
20
|
-
* Optional prop to control the severity of the avatar
|
|
21
|
-
*
|
|
22
|
-
* @default AvatarIconSeverity.Neutral
|
|
23
|
-
*/
|
|
24
|
-
severity?: AvatarIconSeverity;
|
|
25
9
|
};
|
|
26
10
|
//# sourceMappingURL=AvatarIcon.types.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AAErF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,CAAC,GACtE,qBAAqB,GAAG;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CACrC,CAAC"}
|
|
@@ -1,26 +1,10 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { AvatarIconPropsShared } from "@metamask-previews/design-system-shared";
|
|
2
2
|
import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
|
|
3
|
-
import type {
|
|
4
|
-
export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> & {
|
|
5
|
-
/**
|
|
6
|
-
* Required icon name from the icon set
|
|
7
|
-
*/
|
|
8
|
-
iconName: IconName;
|
|
3
|
+
import type { IconProps } from "../Icon/index.mjs";
|
|
4
|
+
export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> & AvatarIconPropsShared & {
|
|
9
5
|
/**
|
|
10
6
|
* Optional props to be passed to the Icon component
|
|
11
7
|
*/
|
|
12
8
|
iconProps?: Omit<IconProps, 'name'>;
|
|
13
|
-
/**
|
|
14
|
-
* Optional prop to control the size of the avatar
|
|
15
|
-
*
|
|
16
|
-
* @default AvatarIconSize.Md
|
|
17
|
-
*/
|
|
18
|
-
size?: AvatarIconSize;
|
|
19
|
-
/**
|
|
20
|
-
* Optional prop to control the severity of the avatar
|
|
21
|
-
*
|
|
22
|
-
* @default AvatarIconSeverity.Neutral
|
|
23
|
-
*/
|
|
24
|
-
severity?: AvatarIconSeverity;
|
|
25
9
|
};
|
|
26
10
|
//# sourceMappingURL=AvatarIcon.types.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarIcon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,gDAAgD;AAErF,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,CAAC,GACtE,qBAAqB,GAAG;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CACrC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"AvatarIcon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/AvatarIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarIconPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\nimport type { IconProps } from '../Icon';\n\nexport type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> &\n AvatarIconPropsShared & {\n /**\n * Optional props to be passed to the Icon component\n */\n iconProps?: Omit<IconProps, 'name'>;\n };\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.AvatarIcon = exports.
|
|
4
|
-
var
|
|
5
|
-
Object.defineProperty(exports, "
|
|
6
|
-
Object.defineProperty(exports, "
|
|
3
|
+
exports.AvatarIcon = exports.AvatarIconSize = exports.AvatarIconSeverity = void 0;
|
|
4
|
+
var design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "AvatarIconSeverity", { enumerable: true, get: function () { return design_system_shared_1.AvatarIconSeverity; } });
|
|
6
|
+
Object.defineProperty(exports, "AvatarIconSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarIconSize; } });
|
|
7
7
|
var AvatarIcon_1 = require("./AvatarIcon.cjs");
|
|
8
8
|
Object.defineProperty(exports, "AvatarIcon", { enumerable: true, get: function () { return AvatarIcon_1.AvatarIcon; } });
|
|
9
9
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":";;;AAAA
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":";;;AAAA,gFAGiD;AAF/C,0HAAA,kBAAkB,OAAA;AAClB,sHAAA,cAAc,OAAA;AAEhB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export {\n AvatarIconSeverity,\n AvatarIconSize,\n} from '@metamask-previews/design-system-shared';\nexport { AvatarIcon } from './AvatarIcon';\nexport type { AvatarIconProps } from './AvatarIcon.types';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AvatarIconSize,
|
|
1
|
+
export { AvatarIconSeverity, AvatarIconSize, } from "@metamask-previews/design-system-shared";
|
|
2
2
|
export { AvatarIcon } from "./AvatarIcon.cjs";
|
|
3
3
|
export type { AvatarIconProps } from "./AvatarIcon.types.cjs";
|
|
4
4
|
//# sourceMappingURL=index.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,GACf,gDAAgD;AACjD,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AvatarIconSize,
|
|
1
|
+
export { AvatarIconSeverity, AvatarIconSize, } from "@metamask-previews/design-system-shared";
|
|
2
2
|
export { AvatarIcon } from "./AvatarIcon.mjs";
|
|
3
3
|
export type { AvatarIconProps } from "./AvatarIcon.types.mjs";
|
|
4
4
|
//# sourceMappingURL=index.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,GACf,gDAAgD;AACjD,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,cAAc,EACf,gDAAgD;AACjD,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export {\n AvatarIconSeverity,\n AvatarIconSize,\n} from '@metamask-previews/design-system-shared';\nexport { AvatarIcon } from './AvatarIcon';\nexport type { AvatarIconProps } from './AvatarIcon.types';\n"]}
|
|
@@ -24,13 +24,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.BadgeIcon = void 0;
|
|
27
|
+
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
27
28
|
const react_1 = __importStar(require("react"));
|
|
28
29
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
29
30
|
const Icon_1 = require("../Icon/index.cjs");
|
|
30
31
|
exports.BadgeIcon = (0, react_1.forwardRef)(({ iconName, iconProps, className = '', style, ...props }, ref) => {
|
|
31
32
|
const mergedClassName = (0, tw_merge_1.twMerge)('inline-flex size-4 items-center justify-center rounded-full bg-icon-default', className);
|
|
32
33
|
return (react_1.default.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
|
|
33
|
-
react_1.default.createElement(Icon_1.Icon, { size:
|
|
34
|
+
react_1.default.createElement(Icon_1.Icon, { size: design_system_shared_1.IconSize.Xs, name: iconName, ...iconProps, className: (0, tw_merge_1.twMerge)(iconProps?.color ? '' : 'text-background-default', // if color is provided, use it, otherwise use background default
|
|
34
35
|
iconProps?.className) })));
|
|
35
36
|
});
|
|
36
37
|
exports.BadgeIcon.displayName = 'BadgeIcon';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeIcon.cjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,uDAA+C;AAC/C,
|
|
1
|
+
{"version":3,"file":"BadgeIcon.cjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAAmE;AACnE,+CAA0C;AAE1C,uDAA+C;AAC/C,4CAA+B;AAIlB,QAAA,SAAS,GAAG,IAAA,kBAAU,EACjC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,6EAA6E,EAC7E,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,8BAAC,WAAI,IACH,IAAI,EAAE,+BAAQ,CAAC,EAAE,EACjB,IAAI,EAAE,QAAQ,KACV,SAAS,EACb,SAAS,EAAE,IAAA,kBAAO,EAChB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,EAAE,iEAAiE;YACpH,SAAS,EAAE,SAAS,CACrB,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import { IconSize } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport type { BadgeIconProps } from './BadgeIcon.types';\n\nexport const BadgeIcon = forwardRef<HTMLDivElement, BadgeIconProps>(\n ({ iconName, iconProps, className = '', style, ...props }, ref) => {\n const mergedClassName = twMerge(\n 'inline-flex size-4 items-center justify-center rounded-full bg-icon-default',\n className,\n );\n\n return (\n <div ref={ref} className={mergedClassName} style={style} {...props}>\n <Icon\n size={IconSize.Xs}\n name={iconName}\n {...iconProps}\n className={twMerge(\n iconProps?.color ? '' : 'text-background-default', // if color is provided, use it, otherwise use background default\n iconProps?.className,\n )}\n />\n </div>\n );\n },\n);\n\nBadgeIcon.displayName = 'BadgeIcon';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeIcon.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BadgeIcon.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS,oGAqBrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeIcon.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BadgeIcon.d.mts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAK1C,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS,oGAqBrB,CAAC"}
|
|
@@ -4,10 +4,11 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
+
import { IconSize } from "@metamask-previews/design-system-shared";
|
|
7
8
|
import $React, { forwardRef } from "react";
|
|
8
9
|
const React = $importDefault($React);
|
|
9
10
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
10
|
-
import { Icon
|
|
11
|
+
import { Icon } from "../Icon/index.mjs";
|
|
11
12
|
export const BadgeIcon = forwardRef(({ iconName, iconProps, className = '', style, ...props }, ref) => {
|
|
12
13
|
const mergedClassName = twMerge('inline-flex size-4 items-center justify-center rounded-full bg-icon-default', className);
|
|
13
14
|
return (React.createElement("div", { ref: ref, className: mergedClassName, style: style, ...props },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeIcon.mjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"BadgeIcon.mjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,gDAAgD;AACnE,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,eAAe,GAAG,OAAO,CAC7B,6EAA6E,EAC7E,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK;QAChE,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,IAAI,EAAE,QAAQ,KACV,SAAS,EACb,SAAS,EAAE,OAAO,CAChB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,yBAAyB,EAAE,iEAAiE;YACpH,SAAS,EAAE,SAAS,CACrB,GACD,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import { IconSize } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Icon } from '../Icon';\n\nimport type { BadgeIconProps } from './BadgeIcon.types';\n\nexport const BadgeIcon = forwardRef<HTMLDivElement, BadgeIconProps>(\n ({ iconName, iconProps, className = '', style, ...props }, ref) => {\n const mergedClassName = twMerge(\n 'inline-flex size-4 items-center justify-center rounded-full bg-icon-default',\n className,\n );\n\n return (\n <div ref={ref} className={mergedClassName} style={style} {...props}>\n <Icon\n size={IconSize.Xs}\n name={iconName}\n {...iconProps}\n className={twMerge(\n iconProps?.color ? '' : 'text-background-default', // if color is provided, use it, otherwise use background default\n iconProps?.className,\n )}\n />\n </div>\n );\n },\n);\n\nBadgeIcon.displayName = 'BadgeIcon';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type {
|
|
1
|
+
{"version":3,"file":"BadgeIcon.types.cjs","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeIconPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\n\n/**\n * BadgeIcon component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type BadgeIconProps = ComponentProps<'div'> &\n BadgeIconPropsShared & {\n /**\n * Optional prop to pass additional properties to the icon\n */\n iconProps?: Omit<IconProps, 'name'>;\n /**\n * Optional prop for additional CSS classes to be applied to the BadgeIcon 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 };\n"]}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
|
+
import type { BadgeIconPropsShared } from "@metamask-previews/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
|
-
import type {
|
|
3
|
+
import type { IconProps } from "../Icon/index.cjs";
|
|
3
4
|
/**
|
|
4
|
-
* BadgeIcon component props
|
|
5
|
+
* BadgeIcon component props (React platform-specific)
|
|
6
|
+
* Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
|
|
5
7
|
*/
|
|
6
|
-
export type BadgeIconProps = ComponentProps<'div'> & {
|
|
7
|
-
/**
|
|
8
|
-
* Required prop to specify an icon to show
|
|
9
|
-
*/
|
|
10
|
-
iconName: IconName;
|
|
8
|
+
export type BadgeIconProps = ComponentProps<'div'> & BadgeIconPropsShared & {
|
|
11
9
|
/**
|
|
12
10
|
* Optional prop to pass additional properties to the icon
|
|
13
11
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"BadgeIcon.types.d.cts","sourceRoot":"","sources":["../../../src/components/BadgeIcon/BadgeIcon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gDAAgD;AACpF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,GAChD,oBAAoB,GAAG;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|