## **Description**

This PR adds **`BoxVertical`** and **`BoxHorizontal`** to
`@metamask/design-system-react-native`, giving a small layout layer on
top of `Box` for common vertical and horizontal stacks with optional
accessories and the shared `TextOrChildren` pattern.

**Why:** Teams often repeat column/row `Box` setup (direction,
alignment, spacing) plus leading/trailing or top/bottom slots. These
components encode those defaults and naming (`start`/`end`,
`top`/`bottom`) so layouts stay consistent with design system patterns.

**What:**  
- **`BoxVertical`** — `flexDirection: column`; optional `topAccessory`
and `bottomAccessory`; forwards remaining `Box` props and `twClassName`.
- **`BoxHorizontal`** — `flexDirection: row`, `alignItems: center`,
default `gap={1}`; optional `startAccessory` and `endAccessory`.
- Package **exports**, **Storybook** stories, **unit tests**, and
**README**s for both. React Native Storybook `storybook.requires.js` is
updated to register the new stories.

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-658

## **Manual testing steps**

1. From the repo root, run `yarn storybook:ios` or `yarn
storybook:android` (or your usual RN Storybook command).
2. Open **BoxVertical** and **BoxHorizontal** in the story list.
3. Confirm stories render as expected: default, with string children,
with `textProps`, and with accessories (top/bottom for vertical,
start/end for horizontal).
4. Optionally import `BoxVertical` / `BoxHorizontal` from
`@metamask/design-system-react-native` in a consumer app and verify
layout and accessories in a real screen.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

N/A — new components; there was no prior BoxVertical/BoxHorizontal in
MMDS.

### **After**


https://github.com/user-attachments/assets/20f5f50e-6757-48bb-83a7-1e34cc37dd54

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: changes are additive (new components, stories, docs, tests)
with a small TypeScript-only refactor to `TextOrChildren` props to use
shared types.
> 
> **Overview**
> Adds two new layout utilities, `BoxHorizontal` and `BoxVertical`,
which compose `Box` with the `TextOrChildren` content pattern and
optional accessory slots (start/end or top/bottom).
> 
> Exports these components from `design-system-react-native`, registers
new Storybook stories, and adds unit tests and READMEs.
> 
> Introduces new shared type contracts in `design-system-shared`
(`TextOrChildrenPropsShared`, `BoxHorizontalPropsShared`,
`BoxVerticalPropsShared`) and updates RN `TextOrChildren` types to
extend the shared `children` contract.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4afc806. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## Release 29.0.0

This release includes new React Native header and layout primitives,
BottomSheet API updates, shared type migrations, and
documentation/runtime dependency alignment across core design-system
packages.

### 📦 Package Versions

- @metamask/design-system-shared: 0.7.0
- @metamask/design-system-react: 0.14.0
- @metamask/design-system-react-native: 0.14.0

### 🔄 Shared Type Updates (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, aligned with ADR-0003/ADR-0004
(#1005).
- Updated @metamask/utils dependency to ^11.11.0 (#1033).

### 🌐 React Web Updates (0.14.0)

#### Changed

- BREAKING: Updated AvatarBase exports to consume shared const-object +
string-union types rather than local enums (#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 recent releases (#1011).

### 📱 React Native Updates (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 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 sheet close
should navigate back.
- See migration guide:
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- Added panGestureHandlerProps support to BottomSheet for
gesture-handler customization (#1016).
- Migrated React Native package exports from default exports to named
exports for consistent import ergonomics (#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).

### ⚠️ Breaking Changes

- BottomSheet (React Native): replaced shouldNavigateBack with optional
goBack callback (#1024).
- Migration required where shouldNavigateBack was used; see
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- AvatarBase export type migration (React + React Native): moved from
local enums to shared const-object + string-union types (#1005).
- Marked breaking for type contract changes, but no migration is
expected for typical consumer imports/usage.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (yarn changelog:validate)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and
dependency alignment
- [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type
migration and docs/dependency updates
- [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new
components and API enhancements
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I have followed MetaMask Contributor Docs
- [x] I have reviewed the Release Workflow cursor rule
- [ ] All tests pass (yarn build && yarn test && yarn lint)
- [x] Changelog validation passes (yarn changelog:validate)

## **Pre-merge reviewer checklist**

- [x] I have reviewed the Reviewing Release PRs guide
- [x] Package versions follow semantic versioning
- [x] Changelog entries are consumer-facing (not commit message
regurgitation)
- [x] Breaking changes are documented in MIGRATION.md with examples
- [x] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 87c05a5. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## **Description**

This PR adds **`BoxVertical`** and **`BoxHorizontal`** to
`@metamask/design-system-react-native`, giving a small layout layer on
top of `Box` for common vertical and horizontal stacks with optional
accessories and the shared `TextOrChildren` pattern.

**Why:** Teams often repeat column/row `Box` setup (direction,
alignment, spacing) plus leading/trailing or top/bottom slots. These
components encode those defaults and naming (`start`/`end`,
`top`/`bottom`) so layouts stay consistent with design system patterns.

**What:**  
- **`BoxVertical`** — `flexDirection: column`; optional `topAccessory`
and `bottomAccessory`; forwards remaining `Box` props and `twClassName`.
- **`BoxHorizontal`** — `flexDirection: row`, `alignItems: center`,
default `gap={1}`; optional `startAccessory` and `endAccessory`.
- Package **exports**, **Storybook** stories, **unit tests**, and
**README**s for both. React Native Storybook `storybook.requires.js` is
updated to register the new stories.

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-658

## **Manual testing steps**

1. From the repo root, run `yarn storybook:ios` or `yarn
storybook:android` (or your usual RN Storybook command).
2. Open **BoxVertical** and **BoxHorizontal** in the story list.
3. Confirm stories render as expected: default, with string children,
with `textProps`, and with accessories (top/bottom for vertical,
start/end for horizontal).
4. Optionally import `BoxVertical` / `BoxHorizontal` from
`@metamask/design-system-react-native` in a consumer app and verify
layout and accessories in a real screen.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

N/A — new components; there was no prior BoxVertical/BoxHorizontal in
MMDS.

### **After**


https://github.com/user-attachments/assets/20f5f50e-6757-48bb-83a7-1e34cc37dd54

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: changes are additive (new components, stories, docs, tests)
with a small TypeScript-only refactor to `TextOrChildren` props to use
shared types.
> 
> **Overview**
> Adds two new layout utilities, `BoxHorizontal` and `BoxVertical`,
which compose `Box` with the `TextOrChildren` content pattern and
optional accessory slots (start/end or top/bottom).
> 
> Exports these components from `design-system-react-native`, registers
new Storybook stories, and adds unit tests and READMEs.
> 
> Introduces new shared type contracts in `design-system-shared`
(`TextOrChildrenPropsShared`, `BoxHorizontalPropsShared`,
`BoxVerticalPropsShared`) and updates RN `TextOrChildren` types to
extend the shared `children` contract.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4afc806. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## Release 29.0.0

This release includes new React Native header and layout primitives,
BottomSheet API updates, shared type migrations, and
documentation/runtime dependency alignment across core design-system
packages.

### 📦 Package Versions

- @metamask/design-system-shared: 0.7.0
- @metamask/design-system-react: 0.14.0
- @metamask/design-system-react-native: 0.14.0

### 🔄 Shared Type Updates (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, aligned with ADR-0003/ADR-0004
(#1005).
- Updated @metamask/utils dependency to ^11.11.0 (#1033).

### 🌐 React Web Updates (0.14.0)

#### Changed

- BREAKING: Updated AvatarBase exports to consume shared const-object +
string-union types rather than local enums (#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 recent releases (#1011).

### 📱 React Native Updates (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 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 sheet close
should navigate back.
- See migration guide:
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- Added panGestureHandlerProps support to BottomSheet for
gesture-handler customization (#1016).
- Migrated React Native package exports from default exports to named
exports for consistent import ergonomics (#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).

### ⚠️ Breaking Changes

- BottomSheet (React Native): replaced shouldNavigateBack with optional
goBack callback (#1024).
- Migration required where shouldNavigateBack was used; see
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- AvatarBase export type migration (React + React Native): moved from
local enums to shared const-object + string-union types (#1005).
- Marked breaking for type contract changes, but no migration is
expected for typical consumer imports/usage.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (yarn changelog:validate)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and
dependency alignment
- [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type
migration and docs/dependency updates
- [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new
components and API enhancements
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I have followed MetaMask Contributor Docs
- [x] I have reviewed the Release Workflow cursor rule
- [ ] All tests pass (yarn build && yarn test && yarn lint)
- [x] Changelog validation passes (yarn changelog:validate)

## **Pre-merge reviewer checklist**

- [x] I have reviewed the Reviewing Release PRs guide
- [x] Package versions follow semantic versioning
- [x] Changelog entries are consumer-facing (not commit message
regurgitation)
- [x] Breaking changes are documented in MIGRATION.md with examples
- [x] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 87c05a5. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## **Description**

This PR adds **`BoxVertical`** and **`BoxHorizontal`** to
`@metamask/design-system-react-native`, giving a small layout layer on
top of `Box` for common vertical and horizontal stacks with optional
accessories and the shared `TextOrChildren` pattern.

**Why:** Teams often repeat column/row `Box` setup (direction,
alignment, spacing) plus leading/trailing or top/bottom slots. These
components encode those defaults and naming (`start`/`end`,
`top`/`bottom`) so layouts stay consistent with design system patterns.

**What:**  
- **`BoxVertical`** — `flexDirection: column`; optional `topAccessory`
and `bottomAccessory`; forwards remaining `Box` props and `twClassName`.
- **`BoxHorizontal`** — `flexDirection: row`, `alignItems: center`,
default `gap={1}`; optional `startAccessory` and `endAccessory`.
- Package **exports**, **Storybook** stories, **unit tests**, and
**README**s for both. React Native Storybook `storybook.requires.js` is
updated to register the new stories.

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-658

## **Manual testing steps**

1. From the repo root, run `yarn storybook:ios` or `yarn
storybook:android` (or your usual RN Storybook command).
2. Open **BoxVertical** and **BoxHorizontal** in the story list.
3. Confirm stories render as expected: default, with string children,
with `textProps`, and with accessories (top/bottom for vertical,
start/end for horizontal).
4. Optionally import `BoxVertical` / `BoxHorizontal` from
`@metamask/design-system-react-native` in a consumer app and verify
layout and accessories in a real screen.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

N/A — new components; there was no prior BoxVertical/BoxHorizontal in
MMDS.

### **After**


https://github.com/user-attachments/assets/20f5f50e-6757-48bb-83a7-1e34cc37dd54

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: changes are additive (new components, stories, docs, tests)
with a small TypeScript-only refactor to `TextOrChildren` props to use
shared types.
> 
> **Overview**
> Adds two new layout utilities, `BoxHorizontal` and `BoxVertical`,
which compose `Box` with the `TextOrChildren` content pattern and
optional accessory slots (start/end or top/bottom).
> 
> Exports these components from `design-system-react-native`, registers
new Storybook stories, and adds unit tests and READMEs.
> 
> Introduces new shared type contracts in `design-system-shared`
(`TextOrChildrenPropsShared`, `BoxHorizontalPropsShared`,
`BoxVerticalPropsShared`) and updates RN `TextOrChildren` types to
extend the shared `children` contract.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4afc806. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## Release 29.0.0

This release includes new React Native header and layout primitives,
BottomSheet API updates, shared type migrations, and
documentation/runtime dependency alignment across core design-system
packages.

### 📦 Package Versions

- @metamask/design-system-shared: 0.7.0
- @metamask/design-system-react: 0.14.0
- @metamask/design-system-react-native: 0.14.0

### 🔄 Shared Type Updates (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, aligned with ADR-0003/ADR-0004
(#1005).
- Updated @metamask/utils dependency to ^11.11.0 (#1033).

### 🌐 React Web Updates (0.14.0)

#### Changed

- BREAKING: Updated AvatarBase exports to consume shared const-object +
string-union types rather than local enums (#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 recent releases (#1011).

### 📱 React Native Updates (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 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 sheet close
should navigate back.
- See migration guide:
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- Added panGestureHandlerProps support to BottomSheet for
gesture-handler customization (#1016).
- Migrated React Native package exports from default exports to named
exports for consistent import ergonomics (#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).

### ⚠️ Breaking Changes

- BottomSheet (React Native): replaced shouldNavigateBack with optional
goBack callback (#1024).
- Migration required where shouldNavigateBack was used; see
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- AvatarBase export type migration (React + React Native): moved from
local enums to shared const-object + string-union types (#1005).
- Marked breaking for type contract changes, but no migration is
expected for typical consumer imports/usage.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (yarn changelog:validate)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and
dependency alignment
- [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type
migration and docs/dependency updates
- [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new
components and API enhancements
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I have followed MetaMask Contributor Docs
- [x] I have reviewed the Release Workflow cursor rule
- [ ] All tests pass (yarn build && yarn test && yarn lint)
- [x] Changelog validation passes (yarn changelog:validate)

## **Pre-merge reviewer checklist**

- [x] I have reviewed the Reviewing Release PRs guide
- [x] Package versions follow semantic versioning
- [x] Changelog entries are consumer-facing (not commit message
regurgitation)
- [x] Breaking changes are documented in MIGRATION.md with examples
- [x] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 87c05a5. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

## Release 29.0.0

This release includes new React Native header and layout primitives,
BottomSheet API updates, shared type migrations, and
documentation/runtime dependency alignment across core design-system
packages.

### 📦 Package Versions

- @metamask/design-system-shared: 0.7.0
- @metamask/design-system-react: 0.14.0
- @metamask/design-system-react-native: 0.14.0

### 🔄 Shared Type Updates (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, aligned with ADR-0003/ADR-0004
(#1005).
- Updated @metamask/utils dependency to ^11.11.0 (#1033).

### 🌐 React Web Updates (0.14.0)

#### Changed

- BREAKING: Updated AvatarBase exports to consume shared const-object +
string-union types rather than local enums (#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 recent releases (#1011).

### 📱 React Native Updates (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 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 sheet close
should navigate back.
- See migration guide:
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- Added panGestureHandlerProps support to BottomSheet for
gesture-handler customization (#1016).
- Migrated React Native package exports from default exports to named
exports for consistent import ergonomics (#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).

### ⚠️ Breaking Changes

- BottomSheet (React Native): replaced shouldNavigateBack with optional
goBack callback (#1024).
- Migration required where shouldNavigateBack was used; see
packages/design-system-react-native/MIGRATION.md#from-version-0130-to-0140.
- AvatarBase export type migration (React + React Native): moved from
local enums to shared const-object + string-union types (#1005).
- Marked breaking for type contract changes, but no migration is
expected for typical consumer imports/usage.

### ✅ Checklist

- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (yarn changelog:validate)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.6.0 to 0.7.0) - shared types and
dependency alignment
- [x] design-system-react: minor (0.13.0 to 0.14.0) - shared type
migration and docs/dependency updates
- [x] design-system-react-native: minor (0.13.0 to 0.14.0) - new
components and API enhancements
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples (if breaking
changes)
- [x] PR references included in changelog entries

## **Pre-merge author checklist**

- [x] I have followed MetaMask Contributor Docs
- [x] I have reviewed the Release Workflow cursor rule
- [ ] All tests pass (yarn build && yarn test && yarn lint)
- [x] Changelog validation passes (yarn changelog:validate)

## **Pre-merge reviewer checklist**

- [x] I have reviewed the Reviewing Release PRs guide
- [x] Package versions follow semantic versioning
- [x] Changelog entries are consumer-facing (not commit message
regurgitation)
- [x] Breaking changes are documented in MIGRATION.md with examples
- [x] All unreleased changes are accounted for in changelogs

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a
summary for commit 87c05a5. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->