From d8ac5614e25f0fc21ff24edd79f81e12132edc82 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Tue, 27 May 2025 13:23:30 +0200
Subject: [PATCH] fix: rendering errors when applying components to children
 that are already applying to children

---
 .../components/DatePicker/Range/Desktop.tsx         |  8 ++++----
 .../components/DatePicker/Range/Mobile.tsx          |  8 ++++----
 .../scandic-web/components/Header/TopMenu/index.tsx | 13 +++++--------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/scandic-web/components/DatePicker/Range/Desktop.tsx b/apps/scandic-web/components/DatePicker/Range/Desktop.tsx
index 2c5161d53..be4e42645 100644
--- a/apps/scandic-web/components/DatePicker/Range/Desktop.tsx
+++ b/apps/scandic-web/components/DatePicker/Range/Desktop.tsx
@@ -5,6 +5,7 @@ import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
@@ -12,7 +13,6 @@ import { dt } from "@/lib/dt"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"
@@ -123,9 +123,9 @@ export default function DatePickerRangeDesktop({
         MonthCaption(props) {
           return (
             <div className={props.className}>
-              <Subtitle asChild type="two">
-                {props.children}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <h3>{props.children}</h3>
+              </Typography>
             </div>
           )
         },
diff --git a/apps/scandic-web/components/DatePicker/Range/Mobile.tsx b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx
index 95712d841..3f19794f5 100644
--- a/apps/scandic-web/components/DatePicker/Range/Mobile.tsx
+++ b/apps/scandic-web/components/DatePicker/Range/Mobile.tsx
@@ -3,13 +3,13 @@ import { DayPicker } from "react-day-picker"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"
@@ -86,9 +86,9 @@ export default function DatePickerRangeMobile({
           MonthCaption(props) {
             return (
               <div className={props.className}>
-                <Subtitle asChild type="two">
-                  {props.children}
-                </Subtitle>
+                <Typography variant="Title/Subtitle/md">
+                  <h3>{props.children}</h3>
+                </Typography>
               </div>
             )
           },
diff --git a/apps/scandic-web/components/Header/TopMenu/index.tsx b/apps/scandic-web/components/Header/TopMenu/index.tsx
index a5ef0cfb2..857be6aad 100644
--- a/apps/scandic-web/components/Header/TopMenu/index.tsx
+++ b/apps/scandic-web/components/Header/TopMenu/index.tsx
@@ -8,7 +8,6 @@ import { getHeader } from "@/lib/trpc/memoizedRequests"
 import { IconName } from "@/components/Icons/iconName"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
@@ -47,13 +46,11 @@ export default async function TopMenu() {
         <div className={styles.options}>
           <LanguageSwitcher type="desktopHeader" />
 
-          <Caption type="regular" color="textMediumContrast" asChild>
-            <HeaderLink href={findMyBookingUrl} iconName={IconName.Search}>
-              {intl.formatMessage({
-                defaultMessage: "Find booking",
-              })}
-            </HeaderLink>
-          </Caption>
+          <HeaderLink href={findMyBookingUrl} iconName={IconName.Search}>
+            {intl.formatMessage({
+              defaultMessage: "Find booking",
+            })}
+          </HeaderLink>
         </div>
       </div>
     </div>