[Task] Implement the Flex primitive component extending View

[soroushm]

Task Description ✏️

Implement the Flex primitive component extending View as part of the design system epic #40.
Flex will provide a semantic wrapper with display: flex and support customizable flexDirection while inheriting all responsive styled-system props from View. This component will serve as the foundation for layout compositions throughout the system.

Acceptance Criteria ✅

• Flex component implemented by extending View with display: flex.
• Supports flexDirection prop with default value 'column'.
• Inherits all styled-system props from View (space, layout, color, border, typography, flexbox, position).
• Unit tests verify rendering of children and correct flex-direction behavior.
• Storybook stories demonstrate Flex usage in both row and column directions with adjustable controls.
• No raw CSS values — all spacing, color, and layout derived from theme tokens.
• Code passes linting, typing, and CI checks.

Dependencies 🔗

• View component [Task] Implement Base View #41
• @emotion/styled
• styled-system

Definition of Ready (DoR) 📋

• Task is independent and scoped to the Flex component.
• View component is implemented and tested.
• Theme tokens are available for spacing, color, and layout.
• Props to be supported by Flex are agreed upon (flexDirection + inherited styled-system props).

Definition of Done (DoD) 🏁

• Flex component extends View and sets default display: flex.
• flexDirection prop works correctly with default 'column'.
• Unit tests cover child rendering and flex-direction behavior.
• Storybook stories display row and column layouts with adjustable controls.
• Code reviewed, linted, typed, and passes CI checks.
• Documentation updated in Storybook for component usage.
• Component is ready for reuse in layout compositions.

Additional Notes or Resources 📎

• Styled-system docs: https://styled-system.com/
• Emotion styled API: https://emotion.sh/docs/styled