Release 38.0.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/metamask-design-system",
-  "version": "37.0.0",
+  "version": "38.0.0",
   "private": true,
   "description": "The MetaMask Design System monorepo",
   "repository": {

packages/design-system-react-native/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.23.0]
+
+### Added
+
+- Added `Merge` to the icon set so it can be used anywhere `IconName` is supported in `@metamask/design-system-react-native` ([#1155](https://github.com/MetaMask/metamask-design-system/pull/1155))
+
+### Changed
+
+- **BREAKING:** Redesigned `Toast` to use a single mounted `<Toast />` plus static `Toast.show(...)` and `Toast.hide()` methods for application usage ([#1104](https://github.com/MetaMask/metamask-design-system/pull/1104))
+  - Removed `ToastContext`, `ToastContextWrapper`, and `ToastContextParams` from the public export surface
+  - Renamed `ToastVariants` to `ToastVariant`, changed icon-only close buttons to `ToastCloseButtonVariant.Icon`, and renamed `customBottomOffset` to `bottomOffset`
+  - `Toast.show()` and `Toast.hide()` now throw a descriptive error if called before `<Toast />` mounts
+  - See [Migration Guide](./MIGRATION.md#from-version-0220-to-0230)
+- Updated `Input` to use the shared cross-platform API. Consumers should pass a controlled `value`, replace `isReadonly` with `isReadOnly`, and use the shared state-style behavior expected by wrappers like `TextField` ([#1043](https://github.com/MetaMask/metamask-design-system/pull/1043))
+- Updated `AvatarGroup` to use shared cross-platform size and variant contracts, keeping React and React Native aligned on the same public API names and values ([#1067](https://github.com/MetaMask/metamask-design-system/pull/1067))
+
 ## [0.22.0]
 
 ### Changed
@@ -386,7 +402,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - React Native integration with TWRNC preset support
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.22.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.23.0...HEAD
+[0.23.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.22.0...@metamask/design-system-react-native@0.23.0
 [0.22.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.21.0...@metamask/design-system-react-native@0.22.0
 [0.21.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.20.0...@metamask/design-system-react-native@0.21.0
 [0.20.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.19.0...@metamask/design-system-react-native@0.20.0

packages/design-system-react-native/MIGRATION.md

@@ -26,7 +26,7 @@ This guide provides detailed instructions for migrating your project from one ve
   - [TabEmptyState Component](#tabemptystate-component)
   - [Toast Component](#toast-component)
 - [Version Updates](#version-updates)
-  - [From version 0.X.0 to 0.X.0](#from-version-0x0-to-0x0)
+  - [From version 0.22.0 to 0.23.0](#from-version-0220-to-0230)
   - [From version 0.21.0 to 0.22.0](#from-version-0210-to-0220)
   - [From version 0.19.0 to 0.20.0](#from-version-0190-to-0200)
   - [From version 0.18.0 to 0.19.0](#from-version-0180-to-0190)
@@ -40,9 +40,33 @@ This guide provides detailed instructions for migrating your project from one ve
 
 ## Version Updates
 
-### From version 0.X.0 to 0.X.0
+### From version 0.22.0 to 0.23.0
 
-TODO(release): replace `0.X.0` with the actual version numbers when this PR lands in a release.
+#### Toast: static API replaces context-based usage
+
+**What changed:**
+
+- **`Toast`** now exposes static **`Toast.show(...)`** and **`Toast.hide()`** methods for application usage, instead of relying on **`ToastContext`**, **`ToastContextWrapper`**, or an app-level service singleton.
+- **`ToastContext`**, **`ToastContextWrapper`**, and **`ToastContextParams`** are no longer part of the public **`@metamask/design-system-react-native`** exports.
+- **`ToastVariants`** is renamed to **`ToastVariant`**.
+- Icon-only close buttons now use **`ToastCloseButtonVariant.Icon`** instead of **`ButtonVariants.Link`**.
+- **`customBottomOffset`** is renamed to **`bottomOffset`**.
+- Calling **`Toast.show()`** or **`Toast.hide()`** before **`<Toast />`** mounts now throws a descriptive runtime error instead of silently doing nothing.
+
+**Migration:**
+
+- Mount **`<Toast />`** exactly once near the root of the app.
+- Replace any **`useContext(ToastContext)`**, **`ToastContextWrapper`**, or app-level **`ToastService`** usage with **`Toast.show(...)`** and **`Toast.hide()`**.
+- Rename **`ToastVariants`** to **`ToastVariant`** in all call sites.
+- Replace icon-only close button usage from **`ButtonVariants.Link`** to **`ToastCloseButtonVariant.Icon`**.
+- Rename **`customBottomOffset`** to **`bottomOffset`**.
+
+See [Toast Component](#toast-component) for complete before/after examples and API mappings.
+
+**Impact:**
+
+- Existing **`@metamask/design-system-react-native`** consumers using the old context-based Toast flow must update imports, root mounting, and toast invocation patterns.
+- Existing call sites that already use the forwarded **`ToastRef`** methods for isolated cases can keep doing so, but app-level usage should move to the static API.
 
 #### Input: shared controlled contract and readonly naming alignment
 

packages/design-system-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-react-native",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Design System React Native",
   "keywords": [
     "MetaMask",

packages/design-system-react/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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 +294,8 @@ 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.21.0...HEAD
+[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

packages/design-system-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-react",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Design system react ui components",
   "keywords": [
     "MetaMask",
@@ -78,7 +78,7 @@
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
-    "@metamask/design-system-tailwind-preset": "^0.6.0",
+    "@metamask/design-system-tailwind-preset": "^0.7.0",
     "@metamask/design-tokens": "^8.1.0",
     "@metamask/utils": "^11.11.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",

packages/design-system-shared/CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.16.0]
+
+### Added
+
+- Added `Merge` to the shared icon exports so React and React Native consumers can access it through their existing `IconName` APIs ([#1155](https://github.com/MetaMask/metamask-design-system/pull/1155))
+- Added shared `Input` contracts for a controlled `value`, `isReadOnly`, and `isStateStylesDisabled`, making it easier to build cross-platform wrappers against one public input API ([#1043](https://github.com/MetaMask/metamask-design-system/pull/1043))
+- Added shared `AvatarGroup` size, variant, and prop contracts for consumers building cross-platform abstractions on top of `@metamask/design-system-shared` ([#1067](https://github.com/MetaMask/metamask-design-system/pull/1067))
+
 ## [0.15.0]
 
 ### Added
@@ -166,7 +174,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Initial release** - MetaMask Design System Shared
 - Adding CAIP-10 address utilities ([#817](https://github.com/MetaMask/metamask-design-system/pull/817))
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.15.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.16.0...HEAD
+[0.16.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.15.0...@metamask/design-system-shared@0.16.0
 [0.15.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.14.0...@metamask/design-system-shared@0.15.0
 [0.14.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.13.0...@metamask/design-system-shared@0.14.0
 [0.13.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-shared@0.12.0...@metamask/design-system-shared@0.13.0

packages/design-system-shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-shared",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Shared types for design system libraries",
   "keywords": [
     "MetaMask",

packages/design-system-tailwind-preset/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.7.0]
+
+### Added
+
+- Added a `fade-in` animation utility so consumers can use `animate-fade-in` for simple opacity entrance transitions, including the new `ModalOverlay` web migration path ([#1120](https://github.com/MetaMask/metamask-design-system/pull/1120))
+
+### Changed
+
+- Clarified the migration path for consumers moving to Tailwind CSS v4. Existing Tailwind v3 projects can keep using this preset, while Tailwind v4 projects should move to `@metamask/design-tokens/tailwind/theme.css` instead ([#1117](https://github.com/MetaMask/metamask-design-system/pull/1117))
+
 ## [0.6.1]
 
 ### Fixed
@@ -42,7 +52,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- **BREAKING:** Removed variant-specific font family classnames in favor of base font families ([#533](https://github.com/MetaMask/metamask-design-system/pull/533)):
+- **BREAKING:** Removed variant-specific font family classnames in favor of base font families: ([#533](https://github.com/MetaMask/metamask-design-system/pull/533))
   - Removed all `s-*` and `l-*` typography font family classnames (e.g., `s-display-md`, `s-heading-lg`, etc.)
   - Now using three base font family classnames:
     - `font-default` for default text (Geist)
@@ -54,15 +64,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Updated to use new font family configuration from @metamask/design-tokens@6.0.0 ([#499](https://github.com/MetaMask/metamask-design-system/pull/499)). Note: This includes breaking changes in the design-tokens package - see the [@metamask/design-tokens migration guide](../design-tokens/MIGRATION.md#from-version-510-to-600) for details.
+- Updated to use new font family configuration from @metamask/design-tokens@6.0.0. Note: This includes breaking changes in the design-tokens package - see the [@metamask/design-tokens migration guide](../design-tokens/MIGRATION.md#from-version-510-to-600) for details. ([#499](https://github.com/MetaMask/metamask-design-system/pull/499))
 
 ## [0.1.0]
 
 ### Added
 
 - Initial release.
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.6.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.7.0...HEAD
+[0.7.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.6.1...@metamask/design-system-tailwind-preset@0.7.0
 [0.6.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.6.0...@metamask/design-system-tailwind-preset@0.6.1
 [0.6.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.5.0...@metamask/design-system-tailwind-preset@0.6.0
 [0.5.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-tailwind-preset@0.4.0...@metamask/design-system-tailwind-preset@0.5.0

packages/design-system-tailwind-preset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask/design-system-tailwind-preset",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Design System Tailwind CSS preset for MetaMask projects",
   "keywords": [
     "MetaMask",