Description

We need to align export conventions across the entire monorepo to use named exports consistently. Currently, there's inconsistency between packages with some using default exports and others using named exports. This inconsistency makes it harder for developers to use components correctly and requires knowledge of each package's export style.

The @metamask/design-system-react package already uses named exports, but @metamask/design-system-react-native uses default exports. We need to standardize on named exports across all packages in the monorepo.

Technical Details

• Convert all default exports to named exports in all packages
• Update import statements to use named exports
• Ensure consistency between React and React Native packages
• Follow the pattern already established in design-system-react:
  • Export components with named exports (e.g., export const Component = ...)
  • Use barrel exports in index.ts files (e.g., export { Component } from './Component')
  • Export types and enums with the components

Example of conversion required:

// Before
const Component = () => { ... };
export default Component;

// After
export const Component = () => { ... };

// Before
import Component from './Component';

// After
import { Component } from './Component';