Alert redesign

apps/website/package.json

@@ -25,13 +25,14 @@
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
+    "@dxc-technology/typescript-config": "*",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18",
     "@types/styled-components": "5.1.29",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
-    "typescript": "^5"
+    "typescript": "^5.6.3"
   }
 }

apps/website/pages/components/accordion/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import AccordionPageLayout from "../../../screens/components/accordion/AccordionPageLayout";
-import AccordionCodePage from "../../../screens/components/accordion/code/AccordionCodePage";
+import AccordionPageLayout from "screens/components/accordion/AccordionPageLayout";
+import AccordionCodePage from "screens/components/accordion/code/AccordionCodePage";
 
 const Index = () => {
   return (

apps/website/pages/components/accordion/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import AccordionPageLayout from "../../../screens/components/accordion/AccordionPageLayout";
-import AccordionSpecsPage from "../../../screens/components/accordion/specs/AccordionSpecsPage";
+import AccordionPageLayout from "screens/components/accordion/AccordionPageLayout";
+import AccordionSpecsPage from "screens/components/accordion/specs/AccordionSpecsPage";
 
 const Specifications = () => {
   return (

apps/website/pages/components/accordion/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import AccordionPageLayout from "../../../screens/components/accordion/AccordionPageLayout";
-import AccordionUsagePage from "../../../screens/components/accordion/usage/AccordionUsagePage";
+import AccordionPageLayout from "screens/components/accordion/AccordionPageLayout";
+import AccordionUsagePage from "screens/components/accordion/usage/AccordionUsagePage";
 
 const Usage = () => {
   return (

apps/website/pages/components/alert/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import AlertPageLayout from "../../../screens/components/alert/AlertPageLayout";
-import AlertCodePage from "../../../screens/components/alert/code/AlertCodePage";
+import AlertPageLayout from "screens/components/alert/AlertPageLayout";
+import AlertCodePage from "screens/components/alert/code/AlertCodePage";
 
 const Index = () => {
   return (

apps/website/pages/components/alert/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import AlertPageLayout from "../../../screens/components/alert/AlertPageLayout";
-import AlertSpecsPage from "../../../screens/components/alert/specs/AlertSpecsPage";
+import AlertPageLayout from "screens/components/alert/AlertPageLayout";
+import AlertSpecsPage from "screens/components/alert/specs/AlertSpecsPage";
 
 const Specifications = () => {
   return (

apps/website/pages/components/alert/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import AlertPageLayout from "../../../screens/components/alert/AlertPageLayout";
-import AlertUsagePage from "../../../screens/components/alert/usage/AlertUsagePage";
+import AlertPageLayout from "screens/components/alert/AlertPageLayout";
+import AlertUsagePage from "screens/components/alert/usage/AlertUsagePage";
 
 const Usage = () => {
   return (

apps/website/pages/components/application-layout/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ApplicationLayoutPageLayout from "../../../screens/components/application-layout/ApplicationLayoutPageLayout";
-import ApplicationLayoutCodePage from "../../../screens/components/application-layout/code/ApplicationLayoutCodePage";
+import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
+import ApplicationLayoutCodePage from "screens/components/application-layout/code/ApplicationLayoutCodePage";
 
 const Index = () => {
   return (

apps/website/pages/components/application-layout/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ApplicationLayoutPageLayout from "../../../screens/components/application-layout/ApplicationLayoutPageLayout";
-import ApplicationLayoutSpecsPage from "../../../screens/components/application-layout/specs/ApplicationLayoutSpecsPage";
+import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
+import ApplicationLayoutSpecsPage from "screens/components/application-layout/specs/ApplicationLayoutSpecsPage";
 
 const Specifications = () => {
   return (

apps/website/pages/components/application-layout/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ApplicationLayoutPageLayout from "../../../screens/components/application-layout/ApplicationLayoutPageLayout";
-import ApplicationLayoutUsagePage from "../../../screens/components/application-layout/usage/ApplicationLayoutUsagePage";
+import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
+import ApplicationLayoutUsagePage from "screens/components/application-layout/usage/ApplicationLayoutUsagePage";
 
 const Usage = () => {
   return (

apps/website/pages/components/badge/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BadgePageLayout from "../../../screens/components/badge/BadgePageLayout";
-import BadgeCodePage from "../../../screens/components/badge/code/BadgeCodePage";
+import BadgePageLayout from "screens/components/badge/BadgePageLayout";
+import BadgeCodePage from "screens/components/badge/code/BadgeCodePage";
 
 const Index = () => {
   return (

apps/website/pages/components/badge/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BadgePageLayout from "../../../screens/components/badge/BadgePageLayout";
-import BadgeSpecsPage from "../../../screens/components/badge/specs/BadgeSpecsPage";
+import BadgePageLayout from "screens/components/badge/BadgePageLayout";
+import BadgeSpecsPage from "screens/components/badge/specs/BadgeSpecsPage";
 
 const Specifications = () => {
   return (

apps/website/pages/components/bleed/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BleedPageLayout from "../../../screens/components/bleed/BleedPageLayout";
-import BleedCodePage from "../../../screens/components/bleed/code/BleedCodePage";
+import BleedPageLayout from "screens/components/bleed/BleedPageLayout";
+import BleedCodePage from "screens/components/bleed/code/BleedCodePage";
 
 const Index = () => {
   return (

apps/website/pages/components/bleed/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BleedPageLayout from "../../../screens/components/bleed/BleedPageLayout";
-import BleedSpecsPage from "../../../screens/components/bleed/specs/BleedSpecsPage";
+import BleedPageLayout from "screens/components/bleed/BleedPageLayout";
+import BleedSpecsPage from "screens/components/bleed/specs/BleedSpecsPage";
 
 const Specifications = () => {
   return (

apps/website/pages/components/breadcrumbs/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BreadcrumbsCodePage from "../../../screens/components/breadcrumbs/code/BreadcrumbsCodePage";
-import BreadcrumbsPageLayout from "../../../screens/components/breadcrumbs/BreadcrumbsPageLayout";
+import BreadcrumbsCodePage from "screens/components/breadcrumbs/code/BreadcrumbsCodePage";
+import BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/breadcrumbs/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BreadcrumbsPageLayout from "../../../screens/components/breadcrumbs/BreadcrumbsPageLayout";
-import BreadcrumbsSpecsPage from "../../../screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage";
+import BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout";
+import BreadcrumbsSpecsPage from "screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage";
 
 const Specifications = () => {
   return (

apps/website/pages/components/breadcrumbs/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BreadcrumbsPageLayout from "../../../screens/components/breadcrumbs/BreadcrumbsPageLayout";
-import BreadcrumbsUsagePage from "../../../screens/components/breadcrumbs/usage/BreadcrumbsUsagePage";
+import BreadcrumbsPageLayout from "screens/components/breadcrumbs/BreadcrumbsPageLayout";
+import BreadcrumbsUsagePage from "screens/components/breadcrumbs/usage/BreadcrumbsUsagePage";
 
 const Usage = () => {
   return (

apps/website/pages/components/bulleted-list/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BulletedListPageLayout from "../../../screens/components/bulleted-list/BulletedListPageLayout";
-import BulletedListCodePage from "../../../screens/components/bulleted-list/code/BulletedListCodePage";
+import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout";
+import BulletedListCodePage from "screens/components/bulleted-list/code/BulletedListCodePage";
 
 const Index = () => {
   return (

apps/website/pages/components/bulleted-list/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BulletedListPageLayout from "../../../screens/components/bulleted-list/BulletedListPageLayout";
-import BulletedListSpecsPage from "../../../screens/components/bulleted-list/specs/BulletedListSpecsPage";
+import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout";
+import BulletedListSpecsPage from "screens/components/bulleted-list/specs/BulletedListSpecsPage";
 
 const Specifications = () => {
   return (

apps/website/pages/components/bulleted-list/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import BulletedListUsagePage from "../../../screens/components/bulleted-list/usage/BulletedListUsagePage";
-import BulletedListPageLayout from "../../../screens/components/bulleted-list/BulletedListPageLayout";
+import BulletedListUsagePage from "screens/components/bulleted-list/usage/BulletedListUsagePage";
+import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/button/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ButtonPageLayout from "../../../screens/components/button/ButtonPageLayout";
-import ButtonCodePage from "../../../screens/components/button/code/ButtonCodePage";
+import ButtonPageLayout from "screens/components/button/ButtonPageLayout";
+import ButtonCodePage from "screens/components/button/code/ButtonCodePage";
 
 const Index = () => {
   return (

apps/website/pages/components/button/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ButtonPageLayout from "../../../screens/components/button/ButtonPageLayout";
-import ButtonSpecsPage from "../../../screens/components/button/specs/ButtonSpecsPage";
+import ButtonPageLayout from "screens/components/button/ButtonPageLayout";
+import ButtonSpecsPage from "screens/components/button/specs/ButtonSpecsPage";
 
 const Specifications = () => {
   return (

apps/website/pages/components/card/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import CardCodePage from "../../../screens/components/card/code/CardCodePage";
-import CardPageLayout from "../../../screens/components/card/CardPageLayout";
+import CardCodePage from "screens/components/card/code/CardCodePage";
+import CardPageLayout from "screens/components/card/CardPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/card/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import CardSpecsPage from "../../../screens/components/card/specs/CardSpecsPage";
-import CardPageLayout from "../../../screens/components/card/CardPageLayout";
+import CardSpecsPage from "screens/components/card/specs/CardSpecsPage";
+import CardPageLayout from "screens/components/card/CardPageLayout";
 
 const Specifications = () => {
   return (

apps/website/pages/components/card/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import CardUsagePage from "../../../screens/components/card/usage/CardUsagePage";
-import CardPageLayout from "../../../screens/components/card/CardPageLayout";
+import CardUsagePage from "screens/components/card/usage/CardUsagePage";
+import CardPageLayout from "screens/components/card/CardPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/checkbox/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import CheckboxCodePage from "../../../screens/components/checkbox/code/CheckboxCodePage";
-import CheckboxPageLayout from "../../../screens/components/checkbox/CheckboxPageLayout";
+import CheckboxCodePage from "screens/components/checkbox/code/CheckboxCodePage";
+import CheckboxPageLayout from "screens/components/checkbox/CheckboxPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/checkbox/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import CheckboxSpecsPage from "../../../screens/components/checkbox/specs/CheckboxSpecsPage";
-import CheckboxPageLayout from "../../../screens/components/checkbox/CheckboxPageLayout";
+import CheckboxSpecsPage from "screens/components/checkbox/specs/CheckboxSpecsPage";
+import CheckboxPageLayout from "screens/components/checkbox/CheckboxPageLayout";
 
 const Specifications = () => {
   return (

apps/website/pages/components/checkbox/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import CheckboxPageLayout from "../../../screens/components/checkbox/CheckboxPageLayout";
-import CheckboxUsagePage from "../../../screens/components/checkbox/usage/CheckboxUsagePage";
+import CheckboxPageLayout from "screens/components/checkbox/CheckboxPageLayout";
+import CheckboxUsagePage from "screens/components/checkbox/usage/CheckboxUsagePage";
 
 const Usage = () => {
   return (

apps/website/pages/components/chip/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ChipCodePage from "../../../screens/components/chip/code/ChipCodePage";
-import ChipPageLayout from "../../../screens/components/chip/ChipPageLayout";
+import ChipCodePage from "screens/components/chip/code/ChipCodePage";
+import ChipPageLayout from "screens/components/chip/ChipPageLayout";
 
 const Index = () => {
   return (

apps/website/pages/components/chip/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ChipSpecsPage from "../../../screens/components/chip/specs/ChipSpecsPage";
-import ChipPageLayout from "../../../screens/components/chip/ChipPageLayout";
+import ChipSpecsPage from "screens/components/chip/specs/ChipSpecsPage";
+import ChipPageLayout from "screens/components/chip/ChipPageLayout";
 
 const Specifications = () => {
   return (

apps/website/pages/components/chip/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ChipUsagePage from "../../../screens/components/chip/usage/ChipUsagePage";
-import ChipPageLayout from "../../../screens/components/chip/ChipPageLayout";
+import ChipUsagePage from "screens/components/chip/usage/ChipUsagePage";
+import ChipPageLayout from "screens/components/chip/ChipPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/container/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ContainerCodePage from "../../../screens/components/container/code/ContainerCodePage";
-import ContainerPageLayout from "../../../screens/components/container/ContainerPageLayout";
+import ContainerCodePage from "screens/components/container/code/ContainerCodePage";
+import ContainerPageLayout from "screens/components/container/ContainerPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/container/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ContainerUsagePage from "../../../screens/components/container/usage/ContainerUsagePage";
-import ContainerPageLayout from "../../../screens/components/container/ContainerPageLayout";
+import ContainerUsagePage from "screens/components/container/usage/ContainerUsagePage";
+import ContainerPageLayout from "screens/components/container/ContainerPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/contextual-menu/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ContextualMenuCodePage from "../../../screens/components/contextual-menu/code/ContextualMenuCodePage";
-import ContextualMenuPageLayout from "../../../screens/components/contextual-menu/ContextualMenuPageLayout";
+import ContextualMenuCodePage from "screens/components/contextual-menu/code/ContextualMenuCodePage";
+import ContextualMenuPageLayout from "screens/components/contextual-menu/ContextualMenuPageLayout";
 
 const Usage = () => {
   return (

apps/website/pages/components/contextual-menu/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ContextualMenuSpecsPage from "../../../screens/components/contextual-menu/specs/ContextualMenuSpecsPage";
-import ContextualMenuPageLayout from "../../../screens/components/contextual-menu/ContextualMenuPageLayout";
+import ContextualMenuSpecsPage from "screens/components/contextual-menu/specs/ContextualMenuSpecsPage";
+import ContextualMenuPageLayout from "screens/components/contextual-menu/ContextualMenuPageLayout";
 
 const Specifications = () => {
   return (

apps/website/pages/components/contextual-menu/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ContextualMenuPageLayout from "../../../screens/components/contextual-menu/ContextualMenuPageLayout";
-import ContextualMenuUsagePage from "../../../screens/components/contextual-menu/usage/ContextualMenuUsagePage";
+import ContextualMenuPageLayout from "screens/components/contextual-menu/ContextualMenuPageLayout";
+import ContextualMenuUsagePage from "screens/components/contextual-menu/usage/ContextualMenuUsagePage";
 
 const Usage = () => {
   return (

apps/website/pages/components/data-grid/index.tsx

@@ -1,7 +1,8 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import DataGridCodePage from "screens/components/data-grid/code/DataGridCodePage";
-import DataGridPageLayout from "screens/components/data-grid/DatagridPageLayout";
+import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout";
+
 
 const Usage = () => {
   return (

apps/website/pages/components/data-grid/specifications.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import DataGridSpecsPage from "screens/components/data-grid/specs/DataGridSpecsPage";
-import DataGridPageLayout from "screens/components/data-grid/DatagridPageLayout";
+import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout";
 
 const Specifications = () => {
   return (

apps/website/pages/components/data-grid/usage.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import DataGridUsagePage from "screens/components/data-grid/usage/DataGridUsagePage";
-import DataGridPageLayout from "../../../screens/components/data-grid/DatagridPageLayout";
+import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout";
 
 const Usage = () => {
   return (