Merged in chore/sw-3145-move-subtitle (pull request #2516)

chore(SW-3145): Move Title and Subtitle to design-system

* Move Title and Subtitle to design-system

* Fix export


Approved-by: Linus Flood

apps/scandic-web/components/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -1,4 +1,5 @@
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Title from "@scandic-hotels/design-system/Title"
+
 import { getIntl } from "@/i18n"
 
 import SectionWrapper from "../SectionWrapper"

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/index.tsx

@@ -3,7 +3,7 @@
 import { useReducer } from "react"
 import { useIntl } from "react-intl"
 
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import JobylonCard from "../JobylonCard"
 import Filter from "./Filter"

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -5,9 +5,9 @@ import { useIntl } from "react-intl"
 import { dt } from "@scandic-hotels/common/dt"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import styles from "./jobylonCard.module.css"

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,11 +1,11 @@
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Title from "@scandic-hotels/design-system/Title"
 
 import { serverClient } from "@/lib/trpc/server"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import SectionWrapper from "../SectionWrapper"

apps/scandic-web/components/Blocks/DynamicContent/Overview/Friend/index.tsx

@@ -1,10 +1,10 @@
 import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
 import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
 
 import { membershipLevels } from "@/constants/membershipLevels"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { isHighestMembership } from "@/utils/user"
 

apps/scandic-web/components/Blocks/DynamicContent/Overview/Stats/Points/PointsColumn/index.tsx

@@ -1,6 +1,6 @@
 import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
 
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./pointsColumn.module.css"

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

@@ -1,6 +1,7 @@
 import { ChevronDown } from "react-feather"
 
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Title from "@scandic-hotels/design-system/Title"
+
 import {
   findAvailableRewards,
   getGroupedLabelAndDescription,

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown } from "react-feather"
 
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Title from "@scandic-hotels/design-system/Title"
 
 import RewardValue from "../../RewardValue"
 

apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useState } from "react"
 
+import Title from "@scandic-hotels/design-system/Title"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { type Reward } from "@scandic-hotels/trpc/types/rewards"
 
@@ -12,7 +13,6 @@ import ScriptedRewardText from "@/components/Blocks/DynamicContent/Rewards/Scrip
 import Pagination from "@/components/MyPages/Pagination"
 import ExpirationDate from "@/components/Rewards/ExpirationDate"
 import Grids from "@/components/TempDesignSystem/Grids"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
 import { getEarliestExpirationDate } from "@/utils/rewards"
 

apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx

@@ -2,6 +2,7 @@ import { Lock } from "react-feather"
 
 import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
 import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
 
 import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
@@ -11,7 +12,6 @@ import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./next.module.css"

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx

@@ -1,9 +1,9 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import useRedeemFlow from "./useRedeemFlow"
 

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -5,9 +5,9 @@ import { useIntl } from "react-intl"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 
 import { RewardIcon } from "../../RewardIcon"

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx

@@ -3,10 +3,10 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
 
 import JsonToHtml from "@/components/JsonToHtml"
 import Button from "@/components/TempDesignSystem/Button"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
 
 import { RewardIcon } from "../../RewardIcon"

apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/index.tsx

@@ -1,7 +1,7 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -3,10 +3,10 @@
 import { dt } from "@scandic-hotels/common/dt"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
 
 import styles from "./stay.module.css"

apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx

@@ -1,10 +1,10 @@
 import Preamble from "@scandic-hotels/design-system/Preamble"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./fullWidthCampaign.module.css"
 

apps/scandic-web/components/Blocks/TextCols/index.tsx

@@ -1,5 +1,6 @@
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+
 import JsonToHtml from "@/components/JsonToHtml"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import { renderOptions } from "./renderOptions"
 

apps/scandic-web/components/ContentCard/index.tsx

@@ -1,9 +1,9 @@
 import Body from "@scandic-hotels/design-system/Body"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Image from "@/components/Image"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./contentCard.module.css"
 

apps/scandic-web/components/ContentType/DestinationPage/CityListing/CityListingItem/index.tsx

@@ -5,10 +5,10 @@ import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
 
 import ExperienceList from "../../ExperienceList"

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx

@@ -3,9 +3,10 @@
 import Link from "next/link"
 import { useIntl } from "react-intl"
 
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
 
 import ExperienceList from "../../../ExperienceList"

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/HotelsSection/index.tsx

@@ -1,6 +1,7 @@
+import Title from "@scandic-hotels/design-system/Title"
+
 import { getDestinationsList } from "@/lib/trpc/memoizedRequests"
 
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import { DestinationsList } from "./DestinationsList"

apps/scandic-web/components/ContentType/HotelPage/Map/MapCard/index.tsx

@@ -7,10 +7,10 @@ import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
+import Title from "@scandic-hotels/design-system/Title"
 
 import PoiMarker from "@/components/Maps/Markers/Poi"
 import Button from "@/components/TempDesignSystem/Button"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { trackHotelMapClick } from "@/utils/tracking"
 
 import styles from "./mapCard.module.css"

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx

@@ -2,12 +2,12 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import FacebookIcon from "@scandic-hotels/design-system/Icons/FacebookIcon"
 import InstagramIcon from "@scandic-hotels/design-system/Icons/InstagramIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Title from "@scandic-hotels/design-system/Title"
 import { Country } from "@scandic-hotels/trpc/types/country"
 
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx

@@ -1,9 +1,9 @@
 import Body from "@scandic-hotels/design-system/Body"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Title from "@scandic-hotels/design-system/Title"
 
 import ButtonLink from "@/components/ButtonLink"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { appendSlugToPathname } from "@/utils/appendSlugToPathname"
 

apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx

@@ -2,6 +2,7 @@ import { cx } from "class-variance-authority"
 import { Suspense } from "react"
 
 import Preamble from "@scandic-hotels/design-system/Preamble"
+import Title from "@scandic-hotels/design-system/Title"
 
 import { serverClient } from "@/lib/trpc/server"
 
@@ -10,7 +11,6 @@ import Hero from "@/components/Hero"
 import MaxWidth from "@/components/MaxWidth"
 import Sidebar from "@/components/Sidebar"
 import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 

apps/scandic-web/components/ContentType/StartPage/index.tsx

@@ -1,3 +1,4 @@
+import Title from "@scandic-hotels/design-system/Title"
 import { BlocksEnums } from "@scandic-hotels/trpc/types/blocks"
 
 import { getStartPage } from "@/lib/trpc/memoizedRequests"
@@ -6,7 +7,6 @@ import Blocks from "@/components/Blocks"
 import FullWidthCampaign from "@/components/Blocks/FullWidthCampaign"
 import { FloatingBookingWidget } from "@/components/BookingWidget/FloatingBookingWidget"
 import Image from "@/components/Image"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./startPage.module.css"

apps/scandic-web/components/Countdown/index.tsx

@@ -4,8 +4,7 @@ import { useState } from "react"
 import { useInterval } from "usehooks-ts"
 
 import { dt } from "@scandic-hotels/common/dt"
-
+import Title from "@scandic-hotels/design-system/Title"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import type { CountdownProps } from "@/types/components/countdown"
 

apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -4,13 +4,13 @@ import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import Title from "@scandic-hotels/design-system/Title"
 
 import { logout } from "@/constants/routes/handleAuth"
 import useDropdownStore from "@/stores/main-menu"
 
 import { useMyPagesNavigation } from "@/components/Header/MainMenu/MyPagesMenuContent"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
 
 import styles from "./my-pages-mobile-dropdown.module.css"

apps/scandic-web/components/DatePicker/Single/Desktop.tsx

@@ -9,9 +9,9 @@ import { dt } from "@scandic-hotels/common/dt"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"

apps/scandic-web/components/DatePicker/Single/Mobile.tsx

@@ -5,9 +5,9 @@ import { useIntl } from "react-intl"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 import Body from "@scandic-hotels/design-system/Body"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import { locales } from "../locales"

apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -3,6 +3,8 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Title from "@scandic-hotels/design-system/Title"
 import {
   AvailableParagraphFormatEnum,
   RTEItemTypeEnum,
@@ -16,8 +18,6 @@ import Link from "@/components/TempDesignSystem/Link"
 import ImageContainer from "../ImageContainer"
 import Table from "../TempDesignSystem/Table"
 import BiroScript from "../TempDesignSystem/Text/BiroScript"
-import Subtitle from "../TempDesignSystem/Text/Subtitle"
-import Title from "../TempDesignSystem/Text/Title"
 import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
 
 import styles from "./jsontohtml.module.css"

apps/scandic-web/components/DestinationFilterAndSort/Filter/index.tsx

@@ -2,10 +2,10 @@
 
 import { useIntl } from "react-intl"
 
-import { useDestinationDataStore } from "@/stores/destination-data"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Title from "@scandic-hotels/design-system/Title"
 
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useDestinationDataStore } from "@/stores/destination-data"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import Checkbox from "./Checkbox"
 

apps/scandic-web/components/DestinationFilterAndSort/index.tsx

@@ -13,12 +13,12 @@ import { useIntl } from "react-intl"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import Alert from "../TempDesignSystem/Alert"
 import Filter from "./Filter"

apps/scandic-web/components/Dialog/index.tsx

@@ -7,11 +7,11 @@ import {
 } from "react-aria-components"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./dialog.module.css"
 

apps/scandic-web/components/Forms/Edit/Profile/index.tsx

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
 
 import { profile } from "@scandic-hotels/common/constants/routes/myPages"
 import { logger } from "@scandic-hotels/common/logger"
+import Title from "@scandic-hotels/design-system/Title"
 import { trpc } from "@scandic-hotels/trpc/client"
 import { langToApiLang } from "@scandic-hotels/trpc/constants/apiLang"
 
@@ -17,7 +18,6 @@ import { editProfile } from "@/actions/editProfile"
 import Dialog from "@/components/Dialog"
 import ChangeNameDisclaimer from "@/components/MyPages/Profile/ChangeNameDisclaimer"
 import Button from "@/components/TempDesignSystem/Button"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"
 import { formatPhoneNumber } from "@/utils/phone"

apps/scandic-web/components/GuestsRoomsPicker/GuestsRoom/index.tsx

@@ -2,10 +2,10 @@ import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import AdultSelector from "../AdultSelector"
 import ChildSelector from "../ChildSelector"

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -6,12 +6,12 @@ import { useIntl } from "react-intl"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { logout } from "@/constants/routes/handleAuth"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import styles from "./myPagesMenuContent.module.css"

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -4,12 +4,12 @@ import FocusLock from "react-focus-lock"
 
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import useDropdownStore from "@/stores/main-menu"
 
 import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./megaMenu.module.css"
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/Header/index.tsx

@@ -3,8 +3,7 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
-
+import Title from "@scandic-hotels/design-system/Title"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import AddToCalendar from "../../AddToCalendar"
 import AddToCalendarButton from "./Actions/AddToCalendarButton"

apps/scandic-web/components/HotelReservation/BookingConfirmation/HotelDetails/index.tsx

@@ -3,9 +3,9 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./hotelDetails.module.css"
 

apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx

@@ -4,11 +4,10 @@ import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-
 import styles from "./paymentDetails.module.css"
 
 export default function PaymentDetails() {

apps/scandic-web/components/HotelReservation/BookingConfirmation/Promos/Promo/index.tsx

@@ -1,8 +1,8 @@
 import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./promo.module.css"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx

@@ -7,11 +7,11 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Body from "@scandic-hotels/design-system/Body"
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { useRoomContext } from "@/contexts/Details/Room"
 import { formatPrice } from "@/utils/numberFormatting"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx

@@ -1,7 +1,7 @@
+import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ToggleSidePeek from "./ToggleSidePeek"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx

@@ -3,12 +3,12 @@
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { customerService } from "@/constants/webHrefs"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import styles from "./timeoutSpinner.module.css"

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -13,9 +13,9 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./priceChangeSummary.module.css"

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx

@@ -4,12 +4,12 @@ import { useIntl } from "react-intl"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Title from "@scandic-hotels/design-system/Title"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import { calculateTotalRoomPrice } from "../Payment/helpers"

apps/scandic-web/components/HotelReservation/EnterDetails/Room/Multiroom.tsx

@@ -1,6 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import Title from "@scandic-hotels/design-system/Title"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
@@ -11,7 +12,6 @@ import Details from "@/components/HotelReservation/EnterDetails/Details/Multiroo
 import Header from "@/components/HotelReservation/EnterDetails/Room/Header"
 import Section from "@/components/HotelReservation/EnterDetails/Section"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { useRoomContext } from "@/contexts/Details/Room"
 
 import { getBedTypeInfoText } from "./utils"

apps/scandic-web/components/HotelReservation/EnterDetails/Room/One.tsx

@@ -1,6 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import Title from "@scandic-hotels/design-system/Title"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
@@ -11,7 +12,6 @@ import Details from "@/components/HotelReservation/EnterDetails/Details/RoomOne"
 import Header from "@/components/HotelReservation/EnterDetails/Room/Header"
 import Section from "@/components/HotelReservation/EnterDetails/Section"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { useRoomContext } from "@/contexts/Details/Room"
 
 import { getBedTypeInfoText } from "./utils"

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -8,10 +8,10 @@ import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReserva
 import { Button } from "@scandic-hotels/design-system/Button"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -9,6 +9,7 @@ import { dt } from "@scandic-hotels/common/dt"
 import Body from "@scandic-hotels/design-system/Body"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { longDateFormat } from "@/constants/dateFormats"
@@ -17,7 +18,6 @@ import BookingCodeChip from "@/components/BookingCodeChip"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import { isBookingCodeRate } from "@/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/utils"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 

apps/scandic-web/components/HotelReservation/FindMyBooking/AdditionalInfoForm.tsx

@@ -6,10 +6,10 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Button from "@/components/TempDesignSystem/Button"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import {
   type AdditionalInfoFormSchema,

apps/scandic-web/components/HotelReservation/FindMyBooking/index.tsx

@@ -9,6 +9,7 @@ import { myStay } from "@scandic-hotels/common/constants/routes/myStay"
 import { logger } from "@scandic-hotels/common/logger"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
+import Title from "@scandic-hotels/design-system/Title"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { customerService } from "@/constants/webHrefs"
@@ -16,7 +17,6 @@ import { customerService } from "@/constants/webHrefs"
 import Button from "@/components/TempDesignSystem/Button"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 

apps/scandic-web/components/HotelReservation/HotelCard/HotelChequeCard/index.tsx

@@ -2,8 +2,7 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Caption from "@scandic-hotels/design-system/Caption"
-
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./hotelChequeCard.module.css"
 

apps/scandic-web/components/HotelReservation/HotelCard/HotelPointsRow/index.tsx

@@ -1,8 +1,7 @@
 import { useIntl } from "react-intl"
 
 import Caption from "@scandic-hotels/design-system/Caption"
-
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./hotelPointsRow.module.css"
 

apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx

@@ -4,10 +4,9 @@ import { useIntl } from "react-intl"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
 
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-
 import styles from "./hotelPriceCard.module.css"
 
 import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"

apps/scandic-web/components/HotelReservation/HotelCard/HotelVoucherCard/index.tsx

@@ -2,8 +2,7 @@ import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Caption from "@scandic-hotels/design-system/Caption"
-
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./hotelVoucherCard.module.css"
 

apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx

@@ -7,12 +7,12 @@ import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReserva
 import Caption from "@scandic-hotels/design-system/Caption"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { isValidClientSession } from "@/utils/clientSession"
 

apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx

@@ -9,12 +9,12 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { isValidClientSession } from "@/utils/clientSession"
 import { trackEvent } from "@/utils/tracking/base"

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx

@@ -4,11 +4,11 @@ import { useIntl } from "react-intl"
 import Body from "@scandic-hotels/design-system/Body"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage"

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx

@@ -2,12 +2,12 @@
 import { use } from "react"
 import { useIntl } from "react-intl"
 
+import Title from "@scandic-hotels/design-system/Title"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
 import { Carousel } from "@/components/Carousel"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { AddAncillaryProvider } from "@/providers/AddAncillaryProvider"
 
 import AddAncillaryFlowModal from "./AddAncillaryFlow/AddAncillaryFlowModal"

apps/scandic-web/components/HotelReservation/MyStay/Header/index.tsx

@@ -1,5 +1,6 @@
+import Title from "@scandic-hotels/design-system/Title"
+
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
 import styles from "./header.module.css"

apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Header/index.tsx

@@ -1,8 +1,7 @@
 import { Button as ButtonRAC } from "react-aria-components"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./header.module.css"
 

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx

@@ -1,6 +1,5 @@
 import Caption from "@scandic-hotels/design-system/Caption"
-
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./priceContainer.module.css"
 

apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx

@@ -16,12 +16,12 @@ import { useIntl } from "react-intl"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
 import Button from "@/components/TempDesignSystem/Button"
 import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
 
 import { DEFAULT_SORT } from "../../HotelSorter"

apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterContent/index.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
+import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Title from "@/components/TempDesignSystem/Text/Title"
-
 import FilterCheckbox from "./FilterCheckbox"
 
 import styles from "./filterContent.module.css"

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -1,4 +1,5 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
@@ -10,7 +11,6 @@ import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/
 import NoAvailabilityAlert from "@/components/HotelReservation/SelectHotel/NoAvailabilityAlert"
 import StaticMap from "@/components/Maps/StaticMap"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 
 import { getFiltersFromHotels, type HotelResponse } from "./helpers"

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx

@@ -9,6 +9,7 @@ import { Button } from "@scandic-hotels/design-system/Button"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import { longDateFormat } from "@/constants/dateFormats"
@@ -17,7 +18,6 @@ import { useRatesStore } from "@/stores/select-rate"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx

@@ -8,6 +8,7 @@ import { dt } from "@scandic-hotels/common/dt"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
 
@@ -15,7 +16,6 @@ import { useRatesStore } from "@/stores/select-rate"
 
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { isValidClientSession } from "@/utils/clientSession"
 import { formatPrice } from "@/utils/numberFormatting"
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -8,6 +8,7 @@ import { logger } from "@scandic-hotels/common/logger"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
 
 import { useRatesStore } from "@/stores/select-rate"
@@ -15,7 +16,6 @@ import { useRatesStore } from "@/stores/select-rate"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import { isValidClientSession } from "@/utils/clientSession"
 

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx

@@ -2,11 +2,11 @@ import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { useRatesStore } from "@/stores/select-rate"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import useStickyPosition from "@/hooks/useStickyPosition"
 

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx

@@ -1,11 +1,10 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import useDropdownStore from "@/stores/main-menu"
 
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-
 import styles from "./languageSwitcherContainer.module.css"
 
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -4,12 +4,12 @@ import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { languages } from "@/constants/languages"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 
 import { replaceUrlPart } from "./utils"

apps/scandic-web/components/Modal/ModalContentWithActions/index.tsx

@@ -1,7 +1,7 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./modalContent.module.css"
 

apps/scandic-web/components/Modal/index.tsx

@@ -13,8 +13,7 @@ import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Preamble from "@scandic-hotels/design-system/Preamble"
-
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import {
   type AnimationState,

apps/scandic-web/components/SasTierComparison/index.tsx

@@ -4,14 +4,14 @@ import Image from "next/image"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Title from "@scandic-hotels/design-system/Title"
 
 import JsonToHtml from "@/components/JsonToHtml"
 import Link from "@/components/TempDesignSystem/Link"
 
 import SectionContainer from "../Section/Container"
 import Button from "../TempDesignSystem/Button"
-import Subtitle from "../TempDesignSystem/Text/Subtitle"
-import Title from "../TempDesignSystem/Text/Title"
 
 import styles from "./sasTierComparison.module.css"
 

apps/scandic-web/components/Section/Header/index.tsx

@@ -1,13 +1,10 @@
 import Preamble from "@scandic-hotels/design-system/Preamble"
-
+import Title, { type HeadingProps } from "@scandic-hotels/design-system/Title"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import SectionLink from "../Link"
 
 import styles from "./header.module.css"
 
-import type { HeadingProps } from "@/components/TempDesignSystem/Text/Title/title"
-
 export type HeaderProps = {
   link?: {
     href: string

apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/index.tsx

@@ -1,6 +1,6 @@
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { JoinLoyaltyContactEnums } from "@scandic-hotels/trpc/types/joinLoyaltyContact"
 
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 
 import ContactRow from "./ContactRow"

apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx

@@ -1,9 +1,9 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { faq, membershipTermsAndConditions } from "@/constants/webHrefs"
 
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 

apps/scandic-web/components/Sidebar/JoinLoyalty/index.tsx

@@ -1,11 +1,11 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Title from "@scandic-hotels/design-system/Title"
 
 import { ScandicFriends } from "@/components/Levels"
 import LoginButton from "@/components/LoginButton"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 

apps/scandic-web/components/TempDesignSystem/Accordion/AccordionItem/index.tsx

@@ -4,11 +4,11 @@ import { useRef } from "react"
 
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { IconByIconName } from "@/components/Icons/IconByIconName"
 import { trackAccordionClick } from "@/utils/tracking"
 
-import Subtitle from "../../Text/Subtitle"
 import { accordionItemVariants } from "./variants"
 
 import styles from "./accordionItem.module.css"

apps/scandic-web/components/TempDesignSystem/Card/index.tsx

@@ -2,11 +2,11 @@ import { cx } from "class-variance-authority"
 import Link from "next/link"
 
 import Body from "@scandic-hotels/design-system/Body"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import {
   getBodyFontColor,

apps/scandic-web/components/TempDesignSystem/Card/utils.ts

@@ -1,15 +1,14 @@
 import type Body from "@scandic-hotels/design-system/Body"
+import type Title from "@scandic-hotels/design-system/Title"
 import type { VariantProps } from "class-variance-authority"
 import type { ComponentProps } from "react"
 
 import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
 import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
-import type { headingVariants } from "@/components/TempDesignSystem/Text/Title/variants"
 
-export function getTitleFontColor(
+type TitleColor = ComponentProps<typeof Title>["color"]
-  theme: CardProps["theme"]
+export function getTitleFontColor(theme: CardProps["theme"]): TitleColor {
-): VariantProps<typeof headingVariants>["color"] {
   switch (theme) {
     case "one":
       return "primaryLight"

apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx

@@ -1,9 +1,9 @@
 import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Title from "@scandic-hotels/design-system/Title"
 
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
-import Title from "@/components/TempDesignSystem/Text/Title"
 
 import { loyaltyCardVariants } from "./variants"
 

apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx

@@ -6,11 +6,11 @@ import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import Image from "@/components/Image"
 
 import ShowMoreButton from "../ShowMoreButton"
-import Subtitle from "../Text/Subtitle"
 import { translateRoomLighting, translateSeatingType } from "./utils"
 
 import styles from "./meetingRoomCard.module.css"

apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx

@@ -1,9 +1,9 @@
 import Body from "@scandic-hotels/design-system/Body"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import ButtonLink from "@/components/ButtonLink"
 import Image from "@/components/Image"
 
-import Subtitle from "../Text/Subtitle"
 import TeaserCardSidepeek from "./Sidepeek"
 import { teaserCardVariants } from "./variants"
 

apps/scandic-web/components/TempDesignSystem/Text/Subtitle/index.tsx

@@ -1,29 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { checkForEmptyChildren } from "../../utils/checkForEmptyChildren"
-import { subtitleVariants } from "./variants"
-
-import type { SubtitleProps } from "./subtitle"
-
-export default function Subtitle({
-  asChild = false,
-  className = "",
-  color,
-  textAlign,
-  textTransform,
-  type,
-  ...props
-}: SubtitleProps) {
-  if (checkForEmptyChildren(props.children) === 0) {
-    return null
-  }
-  const Comp = asChild ? Slot : "p"
-  const classNames = subtitleVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-    type,
-  })
-  return <Comp className={classNames} {...props} />
-}

apps/scandic-web/components/TempDesignSystem/Text/Subtitle/subtitle.ts

@@ -1,9 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { subtitleVariants } from "./variants"
-
-export interface SubtitleProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof subtitleVariants> {
-  asChild?: boolean
-}

apps/scandic-web/components/TempDesignSystem/Text/Title/index.tsx

@@ -1,39 +0,0 @@
-import { checkForEmptyChildren } from "../../utils/checkForEmptyChildren"
-import { headingVariants } from "./variants"
-
-import type { HeadingProps } from "./title"
-
-export default function Title({
-  /**
-   * What styling to use, based on heading level. If not provided `level`
-   * will determine the styling.
-   */
-  as,
-  children,
-  className = "",
-  color,
-  /**
-   * What HTML tag to use. Defaults to h1.
-   */
-  level = "h1",
-  textAlign,
-  textTransform,
-  ...rest
-}: HeadingProps) {
-  if (checkForEmptyChildren(children) === 0) {
-    return null
-  }
-  const Hx = level
-  const classNames = headingVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-    type: as ?? level,
-  })
-  return (
-    <Hx {...rest} className={classNames}>
-      {children}
-    </Hx>
-  )
-}

apps/scandic-web/components/TempDesignSystem/Text/Title/title.ts

@@ -1,12 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { headingVariants } from "./variants"
-
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
-
-export interface HeadingProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof headingVariants> {
-  as?: HeadingLevel
-  level?: HeadingLevel
-}

apps/scandic-web/components/TempDesignSystem/utils/checkForEmptyChildren.ts

@@ -1,13 +0,0 @@
-import { Children, type ReactNode } from "react"
-
-export function checkForEmptyChildren(children: ReactNode) {
-  return Children.toArray(children).filter((child) => {
-    if (child === "") {
-      return false
-    } else if (child == null) {
-      return false
-    } else {
-      return true
-    }
-  }).length
-}

apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx

@@ -1,7 +1,8 @@
+import Title from "@scandic-hotels/design-system/Title"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import MaxWidth from "@/components/MaxWidth"
-import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 import LinkToOverview from "@/components/Webviews/LinkToOverview"
 

packages/design-system/lib/components/Subtitle/index.tsx

@@ -0,0 +1,50 @@
+import { Slot } from '@radix-ui/react-slot'
+
+import { subtitleVariants } from './variants'
+
+import type { VariantProps } from 'class-variance-authority'
+import { Children, ReactNode } from 'react'
+
+interface SubtitleProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
+    VariantProps<typeof subtitleVariants> {
+  asChild?: boolean
+}
+
+/**
+ * @deprecated Use `Typography` instead.
+ */
+export default function Subtitle({
+  asChild = false,
+  className = '',
+  color,
+  textAlign,
+  textTransform,
+  type,
+  ...props
+}: SubtitleProps) {
+  if (checkForEmptyChildren(props.children) === 0) {
+    return null
+  }
+  const Comp = asChild ? Slot : 'p'
+  const classNames = subtitleVariants({
+    className,
+    color,
+    textAlign,
+    textTransform,
+    type,
+  })
+  return <Comp className={classNames} {...props} />
+}
+
+function checkForEmptyChildren(children: ReactNode) {
+  return Children.toArray(children).filter((child) => {
+    if (child === '') {
+      return false
+    } else if (child == null) {
+      return false
+    } else {
+      return true
+    }
+  }).length
+}

packages/design-system/lib/components/Subtitle/variants.ts

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./subtitle.module.css"
+import styles from './subtitle.module.css'
 
 const config = {
   variants: {
@@ -32,10 +32,10 @@ const config = {
     },
   },
   defaultVariants: {
-    color: "black",
+    color: 'black',
-    textAlign: "left",
+    textAlign: 'left',
-    textTransform: "regular",
+    textTransform: 'regular',
-    type: "one",
+    type: 'one',
   },
 } as const
 

packages/design-system/lib/components/Title/index.tsx

@@ -0,0 +1,63 @@
+import { Children, ReactNode } from 'react'
+import { headingVariants } from './variants'
+
+import type { VariantProps } from 'class-variance-authority'
+
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5'
+
+export interface HeadingProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
+    VariantProps<typeof headingVariants> {
+  as?: HeadingLevel
+  level?: HeadingLevel
+}
+
+/**
+ * @deprecated Use `Typography` instead.
+ */
+export default function Title({
+  /**
+   * What styling to use, based on heading level. If not provided `level`
+   * will determine the styling.
+   */
+  as,
+  children,
+  className = '',
+  color,
+  /**
+   * What HTML tag to use. Defaults to h1.
+   */
+  level = 'h1',
+  textAlign,
+  textTransform,
+  ...rest
+}: HeadingProps) {
+  if (checkForEmptyChildren(children) === 0) {
+    return null
+  }
+  const Hx = level
+  const classNames = headingVariants({
+    className,
+    color,
+    textAlign,
+    textTransform,
+    type: as ?? level,
+  })
+  return (
+    <Hx {...rest} className={classNames}>
+      {children}
+    </Hx>
+  )
+}
+
+function checkForEmptyChildren(children: ReactNode) {
+  return Children.toArray(children).filter((child) => {
+    if (child === '') {
+      return false
+    } else if (child == null) {
+      return false
+    } else {
+      return true
+    }
+  }).length
+}

packages/design-system/lib/components/Title/variants.ts

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./title.module.css"
+import styles from './title.module.css'
 
 const config = {
   variants: {
@@ -37,10 +37,10 @@ const config = {
     },
   },
   defaultVariants: {
-    color: "burgundy",
+    color: 'burgundy',
-    textAlign: "left",
+    textAlign: 'left',
-    textTransform: "uppercase",
+    textTransform: 'uppercase',
-    type: "h1",
+    type: 'h1',
   },
 } as const
 

packages/design-system/package.json

@@ -18,6 +18,8 @@
     "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",
     "./SkeletonShimmer": "./dist/components/SkeletonShimmer/index.js",
+    "./Subtitle": "./dist/components/Subtitle/index.js",
+    "./Title": "./dist/components/Title/index.js",
     "./Tooltip": "./dist/components/Tooltip/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",