## Context Header components are defined in the `app` ([Header](https://github.com/liam-hq/liam/tree/7486ee3f82c80ef1511a1f06e87d93c7b3673520/frontend/apps/app/components/SessionDetailPage/components/Output/components/Header)) and `erd-core` ([AppBar](https://github.com/liam-hq/liam/tree/7486ee3f82c80ef1511a1f06e87d93c7b3673520/frontend/packages/erd-core/src/features/erd/components/ERDRenderer/AppBar)) packages independently. ## Problem It causes several issues: - [The `Toast` component](https://github.com/liam-hq/liam/tree/7486ee3f82c80ef1511a1f06e87d93c7b3673520/frontend/packages/ui/src/components/Toast) from the `ui` package implicitly depends on the `Header` styles - [A `z-index` custom property for Header component](https://github.com/liam-hq/liam/blob/7486ee3f82c80ef1511a1f06e87d93c7b3673520/frontend/packages/ui/src/styles/variables.css#L12) is defined in the `ui` package ## Proposed Solution We should define a common `Header` component in the `ui` and make the application headers depends on it. ## Reference https://github.com/liam-hq/liam/pull/2943#discussion_r2278076682