fix: rendering errors when applying components to children that are already applying to children

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>
           )
         },