Merged in chore/BOOK-708-replace-title-component (pull request #3414)

Chore/BOOK-708 replace title component

* chore(BOOK-708): replace title with typography

* chore(BOOK-708): replace title with typography

* chore(BOOK-708): remove Title from package.json


Approved-by: Linus Flood
Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx

@@ -5,7 +5,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useEnterDetailsStore } from "../../../stores/enter-details"
@@ -102,14 +101,9 @@ export default function PriceChangeDialog({
                 size={48}
                 color="Icon/Interactive/Default"
               />
-              <Title
-                level="h1"
-                as="h3"
-                textAlign="center"
-                textTransform="uppercase"
-              >
-                {title}
-              </Title>
+              <Typography variant="Title/sm">
+                <h3>{title}</h3>
+              </Typography>
             </div>
             <Typography variant="Body/Paragraph/mdRegular">
               <p style={{ textAlign: "center" }}>

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css

@@ -74,6 +74,7 @@
   flex-direction: column;
   align-items: center;
   gap: var(--Space-x1);
+  color: var(--Text-Heading);
 }
 
 .footer {