35.0.0

@metamask/design-system-react 0.18.0

Changed

• 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, #1101)
  • See Migration Guide
• 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)
  • Removed BoxBackgroundColor.WarningAlternative, BoxBackgroundColor.SuccessAlternative, BoxBorderColor.WarningAlternative, BoxBorderColor.SuccessAlternative, and BoxBorderColor.InfoAlternative
  • See Migration Guide
• Updated ButtonTertiary to use the default text color for more consistent contrast across states (#1099)

@metamask/design-system-react-native 0.20.0

Added

• Added TitleStandard for mobile title layouts with optional top and bottom accessory rows (#1051)
• Added TitleSubpage for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts (#1059)
• Added Tag for compact severity-based metadata labels with optional icons or custom accessories (#1053)

Changed

• Box now forwards refs to the underlying View, which makes imperative measurement and focus flows easier to integrate (#1102)
• Updated ButtonTertiary to use the default text color for more consistent contrast across states (#1099)
• BREAKING: Updated IconName, IconColor, and IconSize exports to use const-object + string-union types instead of local enums; existing imports from @metamask/design-system-react-native continue to work, but enum-specific type assumptions may need updating (#1042)
  • See Migration Guide
• 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)
  • Removed BoxBackgroundColor.WarningAlternative, BoxBackgroundColor.SuccessAlternative, BoxBorderColor.WarningAlternative, BoxBorderColor.SuccessAlternative, and BoxBorderColor.InfoAlternative
  • See Migration Guide

@metamask/design-system-shared 0.13.0

Added

• Added TitleStandardPropsShared and TitleSubpagePropsShared for shared header composition across platform packages (#1051, #1059)
• Added TagSeverity and TagPropsShared for shared Tag contracts consumed by platform packages (#1053)

Changed

• BREAKING: Updated shared Box exports (BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, BoxSpacing, BoxBorderWidth, BoxPropsShared) from enums to const objects with derived string unions (#1026)
  • Removed BoxBackgroundColor.WarningAlternative, BoxBackgroundColor.SuccessAlternative, BoxBorderColor.WarningAlternative, BoxBorderColor.SuccessAlternative, and BoxBorderColor.InfoAlternative
  • See Migration Guide
• BREAKING: Updated shared Icon exports (IconName, IconColor, IconSize, IconPropsShared) to use const objects with derived string unions and made @metamask/design-system-shared the source of truth for icon names and assets across React and React Native (#1042)
  • See Migration Guide

34.0.0

@metamask/design-system-react 0.17.1

Changed

• Expanded the react and react-dom peer dependency ranges to support React 19 consumers. (#1089)

@metamask/design-system-react-native 0.19.0

Added

• Added TitleHub for stacked title, amount, and bottom-label layouts with optional accessory slots. (#1052)

Changed

• BREAKING: Raised the minimum supported peer dependency versions to React Native >=0.76.0, react-native-gesture-handler >=2.25.0, react-native-reanimated >=3.17.0, and react-native-safe-area-context >=5.0.0 to align the package with the React Native 0.76 and Storybook 10 stack. (#844)
• BREAKING: HeaderRoot now renders titleAccessory only when title is present; use children for fully custom accessory-only title rows. See Migration Guide. (#1076)
• BREAKING: IconProps now align with the underlying SVG component props instead of ViewProps; move View-specific props to a wrapper view if TypeScript flags them after upgrading. See Migration Guide. (#1090)

@metamask/design-system-shared 0.12.0

Added

• Added TitleHubPropsShared and CheckboxPropsShared for shared cross-platform component contracts. (#1052, #1040)

Changed

• Expanded the react peer dependency range to support React 19 consumers. (#1089)

Removed

• BREAKING: Removed isReactNodeRenderable from the public API; replace imports with plain truthy checks instead. See Migration Guide. (#1076)

@metamask/design-system-twrnc-preset 0.4.2

Changed

• Expanded the react peer dependency range to >=18.2.0, allowing the preset to install alongside newer React Native 0.76 and React 19 app stacks. (#844)

33.0.0

@metamask/design-system-react 0.17.0

Changed

• Updated AvatarFavicon type internals to use ADR-0003/ADR-0004 shared types; imports from @metamask/design-system-react are unchanged (#1062)
• BREAKING: Migrated Text typography types (TextVariant, TextColor, FontWeight, FontStyle, FontFamily) to @metamask/design-system-shared; all imports through @metamask/design-system-react continue to work without change (#1047)
  • FontWeight, FontStyle, and FontFamily underlying string values changed to semantic identifiers (e.g. FontWeight.Bold was 'font-bold', now 'bold'); idiomatic usage is unaffected
  • Projects scanning node_modules for Tailwind class names must also scan @metamask/design-system-shared
  • See Migration Guide

@metamask/design-system-react-native 0.18.0

Added

• Added IconAlert component for mapping a severity (info, success, warning, error) to a fixed icon glyph and theme color (#1060)

Changed

• Updated AvatarFavicon type internals to use ADR-0003/ADR-0004 shared types; imports from @metamask/design-system-react-native are unchanged (#1062)

@metamask/design-system-shared 0.11.0

Added

• Added IconAlertSeverity and IconAlertPropsShared shared types for cross-platform use (#1060)
• Added AvatarFaviconSize and AvatarFaviconPropsShared shared types for cross-platform use (#1062)

32.0.0

@metamask/design-system-react-native 0.17.0

Changed

• BREAKING: Migrated Text typography types (TextVariant, TextColor, FontWeight, FontStyle, FontFamily) to @metamask/design-system-shared; all imports through @metamask/design-system-react-native continue to work without change (#1047)
  • FontWeight underlying string values changed from numeric strings ('600', '500', '400') to semantic identifiers ('bold', 'medium', 'regular'); idiomatic usage (e.g. FontWeight.Bold) is unaffected
  • See Migration Guide

@metamask/design-system-shared 0.10.0

Added

• Added TextVariant, TextColor, FontWeight, FontStyle, FontFamily, and TextPropsShared shared types for cross-platform use (#1047)

31.0.0

@metamask/design-system-react 0.16.0

Changed

• Updated BadgeNetwork type internals; imports from @metamask/design-system-react are unchanged (#1021)

@metamask/design-system-react-native 0.16.0

Added

• Added HeaderSearch component for in-screen and inline search experiences (#1031)
• Added KeyValueColumn component for vertically-stacked key/value layouts (#1046)

Changed

• BREAKING: Renamed BoxHorizontal to BoxRow and BoxVertical to BoxColumn (#1050)
  • See Migration Guide
• BREAKING: Refactored KeyValueRow API — removed the legacy stub-based composition (KeyValueRowStubs, field/value objects); use keyLabel, value, variant, and accessory props directly (#1023)
  • See Migration Guide
• Updated BadgeNetwork type internals; imports from @metamask/design-system-react-native are unchanged (#1021)

@metamask/design-system-shared 0.9.0

Added

• Added BadgeNetworkPropsShared shared type for cross-platform use (#1021)
• Added HeaderSearchVariant, HeaderSearchPropsShared, HeaderSearchInlinePropsShared, and HeaderSearchScreenPropsShared shared types for cross-platform use (#1031)
• Added KeyValueRowVariant const object (Summary, Input) and KeyValueRowPropsShared shared type for cross-platform use (#1023)
• Added KeyValueColumnPropsShared shared type for cross-platform use (#1046)

Changed

• BREAKING: Renamed BoxHorizontalPropsShared to BoxRowPropsShared and BoxVerticalPropsShared to BoxColumnPropsShared (#1050)
  • See Migration Guide

30.0.0

@metamask/design-system-react 0.15.0

Added

• Added NoPhotography icon (#1056)

Changed

• BREAKING: Updated AvatarToken and AvatarAccount exports to use shared const-object + string-union types (ADR-0003/ADR-0004); normal use is unaffected (#1009, #1015)

@metamask/design-system-react-native 0.15.0

Added

• Added NoPhotography icon (#1056)

Changed

• BREAKING: Updated IconSize underlying string values to semantic t-shirt size tokens; normal use is unaffected (#1049)
• BREAKING: Updated AvatarToken and AvatarAccount exports to use shared const-object + string-union types (ADR-0003/ADR-0004); normal use is unaffected (#1009, #1015)

@metamask/design-system-shared 0.8.0

Added

• Added AvatarToken shared types (AvatarTokenSize, AvatarTokenPropsShared) for cross-platform use (#1009)
• Added AvatarAccount shared types (AvatarAccountPropsShared) for cross-platform use (#1015)

29.0.0

@metamask/design-system-react 0.14.0

Changed

• 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).
  • No migration required for typical usage; continue importing from @metamask/design-system-react as before.
  • Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
• Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
• Expanded BannerBase migration documentation to improve upgrade guidance for consumers moving between recent releases (#1011).

@metamask/design-system-react-native 0.14.0

Added

• Added HeaderRoot as a new root primitive for React Native header composition (#1029).
• Added HeaderStandard for standardized title + action header layouts in mobile screens (#1028, #1030).
• Added TextFieldSearch for search-style text input flows on mobile (#1027).
• Added BoxHorizontal and BoxVertical utility components for common directional layout composition (#1003).

Changed

• BREAKING: Replaced BottomSheet shouldNavigateBack with an optional goBack callback for explicit navigation handling in host apps (#1024).
  • Remove shouldNavigateBack usage and pass goBack when you want the sheet close action to navigate back.
  • See Migration Guide.
• Added panGestureHandlerProps support to BottomSheet so integrators can customize gesture-handler behavior (#1016).
• Migrated React Native package exports from default exports to named exports for more consistent import ergonomics across the library (#1032).
• BREAKING: Updated AvatarBase exports to use shared const-object + string-union types instead of local enums (#1005).
  • No migration required for typical usage; continue importing from @metamask/design-system-react-native as before.
  • Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
• Updated @metamask/utils peer dependency to ^11.11.0 (#1033).
• Expanded BannerBase migration documentation to improve upgrade guidance for consumers (#1011).

Fixed

• Updated BottomSheetHeader action button size to md for consistent sizing and visual alignment (#1012).

@metamask/design-system-shared 0.7.0

Added

• Added shared types used by new React Native header components, including HeaderRoot contracts consumed by @metamask/design-system-react-native (#1029).
• Added shared BoxHorizontal and BoxVertical utility component contracts for cross-platform layout primitives (#1003).

Changed

• Migrated AvatarBase type exports from enum-based definitions to shared const-object + string-union types, keeping consumers aligned with the ADR-0003/ADR-0004 type model (#1005).
• Updated @metamask/utils dependency to ^11.11.0 (#1033).

28.0.0

@metamask/design-system-twrnc-preset 0.4.1

Fixed

• Fixed typography class generation so custom font family mappings are no longer combined with forced fontWeight values, preventing incorrect or fallback font rendering in React Native apps that supply custom font families (#1037).

27.0.0

@metamask/design-system-react 0.13.0

Changed

• 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).
• 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; 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).
• 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).

Fixed

• 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).

@metamask/design-system-react-native 0.13.0

Changed

• FontWeight.Bold and the React Native Text component now describe bold as weight 600; the Storybook mobile FontLoader and @metamask/design-system-twrnc-preset now reference the Geist-SemiBold/Geist-SemiBoldItalic assets, so update any custom font registrations that previously assumed weight 700 as explained in the migration guide (#1017).
• BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, BadgeWrapperCustomPosition, and BadgeWrapperPropsShared now derive from const objects annotated as const, producing string-union typings per ADR-0003/ADR-0004; the React Native entry point still exports the same names, so your imports stay on @metamask/design-system-react-native while the shared package hosts the canonical definitions (#1014; see https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md and https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0004-centralized-types-architecture.md).
• Documented the Button migration instructions (prop, variant, and size mappings) in MIGRATION.md#button-component so both web and native developers follow the same before/after story (#999).

@metamask/design-system-shared 0.6.0

Changed

• Added shared BadgeWrapper const objects and props (BadgeWrapperPosition, BadgeWrapperPositionAnchorShape, BadgeWrapperCustomPosition, BadgeWrapperPropsShared) so React and React Native now consume a single source of truth for the ADR-0003/ADR-0004 types; both platform packages re-export the shared definitions so existing imports keep working even as the shared package remains the canonical source. See the design-system-react migration guide for additional guidance (#1014).

@metamask/design-system-twrnc-preset 0.4.0

Changed

• The default-bold and default-bold-italic font mappings now resolve to Geist-SemiBold/Geist-SemiBoldItalic, aligning the preset with the new semibold typography tokens and font assets introduced in this release (#1017; see @metamask/design-tokens release notes for details). Update any custom tw classnames or font bundles that referenced the old Geist-Bold/Geist-BoldItalic names so Metro/Expo resolve the semibold files.

@metamask/design-tokens 8.3.0

Changed

• fontWeights.bold and the --font-weight-bold CSS variable now return 600, and the Storybook font loaders/@font-face declarations consume the new Geist-SemiBold/Geist-SemiBoldItalic assets instead of the retired bold files (#1017). The design-system-twrnc-preset mapping for default-bold/default-bold-italic now resolves to those semibold PostScript names, so custom Tailwind classnames should align with the new fonts. Update @font-face declarations, font bundles, and font-weight: 700 styles to point at the semibold files, include the semibold assets from apps/storybook-react-native/fonts/Geist and apps/storybook-react/fonts/Geist when you bundle fonts manually, and run the migration guide to verify fontWeights.bold references propagate through CSS, JS, and Tailwind configurations.

26.0.0

@metamask/design-system-react 0.12.0

Added

• Added BannerAlert component (#975)

Changed

• Updated TextButton hover/pressed styles to be text-only (no background fill) (#1001)
• Updated Candlestick icon asset with smaller size variant (#998)

@metamask/design-system-react-native 0.12.0

Added

• Added BannerAlert component (#966)
• Added KeyValueRow component (#959)

Changed

• BREAKING: Simplified TextButton to a text-only control and removed size/TextButtonSize, inverse/disabled props, and icon/accessory props (#1001)
  • See Migration Guide
• BREAKING: Removed TextFieldSize and the size prop; TextField is now a single fixed-height (48px) row (#1000)
  • See Migration Guide
• Updated Candlestick icon asset with smaller size variant (#998)

Fixed

• Improved Input single-line typography alignment (including iOS placeholder behavior) (#1000)

@metamask/design-system-shared 0.5.0

Added

• Added shared BannerAlertSeverity and BannerAlertPropsShared types for cross-package reuse (#975)
• Added shared AvatarNetworkPropsShared type (ADR-0004) for cross-package reuse (#997)